:root{
  --bg:#06111d;--bg2:#081522;--panel:#0b1926;--panel2:#0e2030;--panel3:#101f2c;
  --sidebar:#07121d;--line:#1d3344;--line2:#263f52;--text:#eef4f7;--muted:#8196a6;
  --gold:#d3a64c;--gold2:#f0d079;--blue:#3a8cff;--green:#3ed788;--red:#ff5f5f;--amber:#f0b64a;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text)}
body{font-family:"Leelawadee UI",Tahoma,Arial,sans-serif;font-size:14px;line-height:1.45}
a{color:inherit}button,input,select,textarea{font:inherit}button,summary{ -webkit-tap-highlight-color:transparent}

/* Login */
.ops-login-page{min-height:100vh;background:#04101b}
.ops-login-shell{min-height:100vh;display:grid;grid-template-columns:minmax(0,55%) minmax(540px,45%)}
.ops-login-art{min-height:100vh;background:url('/assets/img/ufabet-login-desktop-v8.webp') center/cover no-repeat;position:relative}
.ops-login-art:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.02),rgba(0,0,0,.08) 70%,rgba(2,12,21,.58))}
.ops-login-side{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:90px clamp(36px,5vw,84px) 60px;background:linear-gradient(145deg,#061827,#020c15)}
.ops-login-runtime{position:absolute;top:28px;right:clamp(28px,4vw,64px);display:flex;gap:18px;align-items:center;color:#c1ced7;font-size:12px}
.ops-login-runtime>span+span{padding-left:18px;border-left:1px solid #2a4356}
.ops-login-runtime span:first-child{display:flex;align-items:center;gap:7px}.ops-login-runtime i{width:8px;height:8px;border-radius:50%;background:var(--green)}
.ops-login-content{width:min(660px,100%)}
.ops-login-card{padding:clamp(36px,4vw,56px);background:rgba(6,25,40,.98);border:1px solid rgba(211,166,76,.58);border-radius:12px;box-shadow:0 30px 90px rgba(0,0,0,.36)}
.ops-login-brandline{display:flex;align-items:baseline;gap:12px}.ops-login-brandline strong{font-size:23px;letter-spacing:.09em;color:var(--gold2)}.ops-login-brandline span{font-size:16px;letter-spacing:.16em;color:#d9e2e8}
.ops-login-heading>small{display:block;margin-top:3px;color:#99aab7;font-size:11px;letter-spacing:.18em}.ops-gold-rule{width:76px;height:3px;background:var(--gold);margin:23px 0 25px}
.ops-login-heading h1{margin:0;font-size:clamp(30px,2.1vw,38px);line-height:1.2}.ops-login-heading h1 b{color:var(--gold2)}.ops-login-heading p{margin:8px 0 0;color:#a6b5c0;font-size:16px}
.ops-login-form{display:grid;gap:19px;margin-top:31px}.ops-login-form label>span{display:block;margin-bottom:7px;font-size:14px;font-weight:650}
.ops-login-field{height:57px;display:flex;align-items:center;gap:12px;padding:0 15px;background:#0b2031;border:1px solid #345973;border-radius:7px}.ops-login-field:focus-within{border-color:var(--gold)}
.ops-login-field svg{width:24px;height:24px;fill:none;stroke:#bdcbd5;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ops-login-field input{width:100%;height:100%;min-width:0;padding:0;border:0;outline:0;background:transparent;color:#fff;font-size:16px}
.ops-pass-toggle{width:38px;height:38px;border:0;background:transparent;color:#c2ced7;cursor:pointer;font-size:18px}
.ops-login-submit{height:58px;margin-top:8px;display:flex;align-items:center;justify-content:center;gap:20px;border:1px solid #efd17c;border-radius:7px;background:linear-gradient(90deg,#bf892c,#f1d27e,#c68d2e);color:#111;font-size:17px;font-weight:850;cursor:pointer}.ops-login-submit b{font-size:25px}
.ops-login-security{margin-top:34px;padding-top:19px;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #29465a}.ops-login-security>div{display:flex;align-items:center;gap:8px;padding:0 12px;border-right:1px solid #29465a}.ops-login-security>div:first-child{padding-left:0}.ops-login-security>div:last-child{border-right:0}
.ops-login-security i{width:25px;color:var(--gold2);font-style:normal}.ops-login-security i.ok{color:var(--green)}.ops-login-security strong,.ops-login-security small{display:block}.ops-login-security strong{font-size:10px}.ops-login-security small{margin-top:2px;color:#7f94a4;font-size:9px}
.ops-login-footer{position:absolute;left:clamp(28px,4vw,64px);right:clamp(28px,4vw,64px);bottom:23px;display:flex;justify-content:flex-end;gap:18px;color:#6c8292;font-size:10px}

/* Shell */
.ops-shell{min-height:100vh}.ops-sidebar{position:fixed;inset:0 auto 0 0;width:210px;background:linear-gradient(180deg,#07131f,#07111b);border-right:1px solid #1c3344;z-index:80;display:flex;flex-direction:column}
.ops-brand{height:76px;display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid #1d3344}.ops-brand img{width:126px;height:48px;object-fit:contain}.ops-brand>span{padding-left:10px;border-left:1px solid #31475a;color:#c7d2da;font-size:9px;letter-spacing:.14em}
.ops-nav{padding:10px 9px 18px;overflow-y:auto;flex:1}.ops-nav-section{padding:13px 11px 6px;color:#526b7d;font-size:9px;font-weight:800;letter-spacing:.14em}
.ops-nav a{min-height:42px;display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:6px;color:#a9b9c5;text-decoration:none;font-size:13px;border:1px solid transparent}.ops-nav a:hover{background:#0d2030;color:#fff}.ops-nav a.active{color:#fff;background:linear-gradient(90deg,rgba(211,166,76,.22),rgba(211,166,76,.06));border-color:rgba(211,166,76,.23);box-shadow:inset 3px 0 0 var(--gold)}
.ops-nav svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ops-sidebar-health{margin:8px 12px 14px;padding:11px;display:flex;align-items:center;gap:9px;border:1px solid #1f384b;border-radius:7px;background:#0a1a27}.ops-sidebar-health>i{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 10px rgba(62,215,136,.3)}.ops-sidebar-health strong,.ops-sidebar-health small{display:block}.ops-sidebar-health strong{font-size:11px}.ops-sidebar-health small{color:#7590a3;font-size:9px}
.ops-main{margin-left:210px;min-height:100vh}.ops-topbar{height:66px;position:sticky;top:0;z-index:55;display:flex;align-items:center;gap:18px;padding:0 20px;background:#071522;border-bottom:1px solid #1e3445;box-shadow:0 4px 18px rgba(0,0,0,.16)}
.ops-menu{display:none}.ops-top-title{min-width:250px}.ops-top-title strong,.ops-top-title span{display:block}.ops-top-title strong{font-size:14px}.ops-top-title span{color:#6f899c;font-size:9px;letter-spacing:.03em}
.ops-search{width:min(430px,34vw);display:flex;align-items:center;gap:8px;height:36px;padding:0 11px;background:#0b1c2b;border:1px solid #274156;border-radius:6px}.ops-search svg{width:16px;height:16px;fill:none;stroke:#8299aa;stroke-width:1.8}.ops-search input{width:100%;border:0;outline:0;background:transparent;color:#dbe5eb;font-size:12px}
.ops-production{margin-left:auto;display:flex;align-items:center;gap:7px;padding:6px 10px;border:1px solid #1f533e;border-radius:5px;background:#0b2a20;color:#82e5af;font-size:10px;font-weight:700}.ops-production i{width:7px;height:7px;border-radius:50%;background:var(--green)}
.ops-clock{color:#8ba0af;font-size:10px;white-space:nowrap}
.ops-admin{position:relative}.ops-admin>summary{display:flex;align-items:center;gap:8px;cursor:pointer;list-style:none}.ops-admin>summary::-webkit-details-marker{display:none}.ops-admin>summary>b{width:34px;height:34px;display:grid;place-items:center;border-radius:8px;background:#15283a;color:#fff}.ops-admin summary strong,.ops-admin summary small{display:block}.ops-admin summary strong{font-size:11px;max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ops-admin summary small{color:#728a9a;font-size:9px}
.ops-admin-menu{position:absolute;right:0;top:45px;min-width:180px;padding:12px;background:#0b1a27;border:1px solid #274156;border-radius:7px;box-shadow:0 10px 28px rgba(0,0,0,.35)}.ops-admin-menu>div{margin-bottom:9px;color:#a6b6c1;font-size:11px}.ops-admin-menu button{width:100%;height:34px;border:1px solid #3a5061;border-radius:5px;background:#101f2b;color:#fff;cursor:pointer;font-size:11px}
.ops-content{padding:22px 22px 45px;max-width:1800px;margin:0 auto}

/* Page header */
.ops-page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:17px}.ops-page-head>div:first-child>span{display:block;margin-bottom:2px;color:var(--gold);font-size:9px;font-weight:800;letter-spacing:.12em}.ops-page-head h1{margin:0;font-size:27px;line-height:1.22}.ops-page-head p{margin:4px 0 0;color:#7890a1;font-size:12px}.ops-head-actions{display:flex;gap:7px}.ops-head-stat{padding-left:16px;border-left:1px solid #2a4051}.ops-head-stat span,.ops-head-stat strong{display:block}.ops-head-stat span{color:#788f9f;font-size:9px}.ops-head-stat strong{margin-top:1px;font-size:23px}

/* Buttons/forms */
.ops-btn{min-height:34px;display:inline-flex;align-items:center;justify-content:center;padding:6px 11px;border:1px solid #365267;border-radius:5px;background:#0d1e2b;color:#dce5ea;text-decoration:none;cursor:pointer;font-size:11px;font-weight:700}.ops-btn:hover{background:#132839}.ops-btn-gold{border-color:#c79a45;background:linear-gradient(180deg,#d7ae5c,#b88731);color:#101010}.ops-btn-sm{min-height:28px;padding:4px 8px;font-size:10px}.ops-btn-ok{border-color:#2d8a5c;color:#7fe5ad;background:#0b2b20}.ops-btn-danger{border-color:#88413f;color:#ff918b;background:#2c1518}
.ops-alert{margin:0 0 13px;padding:9px 11px;border:1px solid #365267;border-left-width:4px;border-radius:4px;font-size:11px}.ops-alert-ok{border-left-color:var(--green);background:#0a2a20;color:#a8edc5}.ops-alert-danger{border-left-color:var(--red);background:#2c1518;color:#ffc0bc}
.ops-commandbar{display:flex;justify-content:space-between;gap:12px;margin-bottom:13px}.ops-filter{display:flex;align-items:flex-end;gap:6px}.ops-filter label>span,.ops-form-grid label>span{display:block;margin-bottom:4px;color:#9aabb7;font-size:10px;font-weight:700}.ops-filter input{width:330px}
input,select,textarea{width:100%;min-height:34px;padding:6px 8px;border:1px solid #2b465b;border-radius:5px;background:#091927;color:#eaf0f4;outline:none;font-size:12px}input:focus,select:focus,textarea:focus{border-color:#b98f42}input:disabled{background:#0a1520;color:#637989}
.ops-drawer{min-width:190px}.ops-drawer>summary{min-height:34px;display:flex;align-items:center;justify-content:center;padding:6px 11px;border:1px solid #b88d3c;border-radius:5px;background:#a97b2c;color:#101010;cursor:pointer;list-style:none;font-size:11px;font-weight:800}.ops-drawer>summary::-webkit-details-marker{display:none}.ops-drawer-wide{margin-bottom:13px}.ops-drawer[open]{width:100%}.ops-drawer[open]>summary{justify-content:flex-start;border-radius:5px 5px 0 0}
.ops-form-grid{display:grid;grid-template-columns:repeat(4,minmax(145px,1fr));gap:11px;padding:13px;background:#091725;border:1px solid #263f52;border-top:0;border-radius:0 0 6px 6px}.ops-form-five{grid-template-columns:repeat(5,minmax(120px,1fr))}.ops-form-six{grid-template-columns:repeat(6,minmax(105px,1fr))}.ops-form-submit{display:flex;align-items:flex-end}.ops-check{display:flex!important;align-items:center;gap:7px;padding-top:18px}.ops-check input{width:16px;min-height:16px}

/* KPI */
.ops-kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px;margin-bottom:12px}.ops-kpis-four{grid-template-columns:repeat(4,minmax(0,1fr))}
.ops-kpis article{min-width:0;padding:13px 14px;background:linear-gradient(180deg,#0d1e2d,#0a1825);border:1px solid #1e3648;border-radius:8px;box-shadow:0 8px 18px rgba(0,0,0,.09)}.ops-kpis article.has-risk{border-color:#62343a;background:linear-gradient(180deg,#251820,#101722)}
.ops-kpis span,.ops-kpis strong,.ops-kpis small{display:block}.ops-kpis span{color:#9aabb7;font-size:10px}.ops-kpis strong{margin-top:6px;font-size:21px;line-height:1.15;font-variant-numeric:tabular-nums}.ops-kpis small{margin-top:5px;color:#6e8597;font-size:9px}

/* Panels/dashboard */
.ops-dashboard-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:11px}.ops-dashboard-main{display:grid;gap:11px;align-content:start}.ops-dashboard-rail{display:grid;gap:11px;align-content:start}.ops-two{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.ops-panel{min-width:0;background:#091724;border:1px solid #1d3547;border-radius:8px;overflow:hidden;box-shadow:0 7px 18px rgba(0,0,0,.08)}.ops-panel-head{min-height:47px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 11px;border-bottom:1px solid #1f3546;background:#0b1a28}.ops-panel-head>div>span{display:block;color:#6f8798;font-size:8px;font-weight:800;letter-spacing:.11em}.ops-panel-head h2{margin:1px 0 0;font-size:13px}.ops-panel-head>a,.ops-panel-head nav a{color:#55a0ff;text-decoration:none;font-size:9px;font-weight:700}.ops-panel-head nav{display:flex;gap:10px}.ops-panel-head>small{color:#6f8798;font-size:9px}
.ops-grid-head,.ops-grid-row{display:grid;align-items:center;column-gap:8px;padding:0 10px}.ops-grid-head{min-height:30px;background:#0c1d2b;border-bottom:1px solid #1d3445;color:#738a9b;font-size:9px;font-weight:700}.ops-grid-row{min-height:40px;border-bottom:1px solid #142b3b;color:#b7c5ce;font-size:10px}.ops-grid-row:last-child{border-bottom:0}.ops-grid-row b{color:#e8eff3;font-size:10px}.ops-grid-row b small{display:block;color:#637b8e;font-size:8px;font-weight:400}
.activity-grid{grid-template-columns:58px 105px 95px minmax(130px,1fr) 100px 72px}.provider-grid{grid-template-columns:1.15fr 80px 60px 96px 88px}.game-grid{grid-template-columns:24px 1.15fr 1fr 55px 96px}
.ops-empty,.ops-table-empty{min-height:92px;display:flex;align-items:center;justify-content:center;padding:14px;color:#647d8f;font-size:10px}.ops-empty-lg{min-height:185px}
.ops-state{display:inline-flex;width:max-content;min-height:20px;align-items:center;padding:2px 6px;border-radius:4px;border:1px solid #395064;background:#132432;color:#91a3af;font-style:normal;font-size:8px;font-weight:800;text-transform:capitalize}.ops-state.is-ok{border-color:#276447;background:#0c2b20;color:#62dfa0}.ops-state.is-warn{border-color:#6d582d;background:#2c2413;color:#f0c35d}.ops-state.is-bad{border-color:#70373c;background:#30171c;color:#ff7474}.ops-state.is-neutral{color:#8ea0ac}
.right{text-align:right}.positive{color:var(--green)!important}.negative{color:var(--red)!important}.truncate{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.money{font-weight:800;font-variant-numeric:tabular-nums}
.ops-payment-split{display:grid;grid-template-columns:1fr 1fr}.ops-payment-split>div:first-child{border-right:1px solid #1e3547}.ops-subhead{min-height:35px;display:flex;align-items:center;justify-content:space-between;padding:5px 10px;background:#0b1d2c;border-bottom:1px solid #1e3547}.ops-subhead strong{font-size:10px}.ops-subhead a{color:#55a0ff;text-decoration:none;font-size:8px}
.ops-mini-row{min-height:38px;display:grid;grid-template-columns:44px 1fr 80px 82px 65px;align-items:center;gap:6px;padding:0 9px;border-bottom:1px solid #142a3a;color:#aebdc6;font-size:9px}.ops-mini-row:last-child{border-bottom:0}
.ops-health-row{min-height:38px;display:grid;grid-template-columns:9px 1fr 58px 50px;align-items:center;gap:6px;padding:0 10px;border-bottom:1px solid #142b3b;font-size:9px}.ops-health-row>i{width:7px;height:7px;border-radius:50%;background:#718797}.ops-health-row>i.is-ok{background:var(--green)}.ops-health-row>i.is-warn{background:var(--amber)}.ops-health-row>i.is-bad{background:var(--red)}.ops-health-row b{font-size:9px}.ops-health-row span,.ops-health-row small{color:#738b9c}.ops-health-row small{text-align:right}
.ops-control-list{margin:0}.ops-control-list>div{min-height:36px;display:grid;grid-template-columns:1fr auto;align-items:center;padding:5px 10px;border-bottom:1px solid #142b3b}.ops-control-list dt,.ops-control-list dd{margin:0}.ops-control-list dt{color:#869baa;font-size:9px}.ops-control-list dd{font-size:11px;font-weight:800}
.ops-wallet-total{padding:15px 12px}.ops-wallet-total span,.ops-wallet-total strong,.ops-wallet-total small{display:block}.ops-wallet-total span{color:#8298a8;font-size:9px}.ops-wallet-total strong{margin-top:4px;font-size:24px;color:#f3f6f8}.ops-wallet-total small{margin-top:6px;color:#6d8596;font-size:9px}
.ops-risk-row{min-height:38px;display:grid;grid-template-columns:60px 80px 1fr;align-items:center;gap:6px;padding:0 9px;border-bottom:1px solid #142b3b;font-size:9px}.ops-risk-row b{font-size:9px}

/* Tables */
.ops-table-wrap{width:100%;overflow:auto}.ops-table{width:100%;min-width:820px;border-collapse:collapse;background:#091724;font-size:10px}.ops-table th{height:32px;padding:6px 9px;background:#0c1d2b;border-bottom:1px solid #1d3445;color:#7890a1;text-align:left;white-space:nowrap;font-size:9px;font-weight:800}.ops-table td{min-height:39px;padding:7px 9px;border-bottom:1px solid #142b3b;color:#acbbc5;vertical-align:middle}.ops-table tbody tr:hover{background:#0d1f2e}.ops-table strong{color:#e6edf1}.ops-inline-form,.ops-decisions{display:flex;align-items:center;gap:5px}.ops-inline-form select{width:105px;min-height:28px;height:28px;padding:3px 5px;font-size:10px}.ops-decisions form{margin:0}.mono{font-family:Consolas,"Courier New",monospace;font-size:9px}.clip{max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Reports/system */
.ops-report-grid{display:grid;grid-template-columns:minmax(420px,.8fr) minmax(520px,1.2fr);gap:11px}.ops-chart-bars{height:280px;display:grid;grid-template-columns:repeat(7,1fr);align-items:end;gap:10px;padding:20px 20px 8px}.ops-chart-day{height:100%;display:grid;grid-template-rows:1fr 22px;gap:5px}.ops-bar-pair{display:flex;align-items:end;justify-content:center;gap:5px;height:100%;border-bottom:1px solid #263f52}.ops-bar-pair i{width:18px;min-height:3px;border-radius:3px 3px 0 0}.bar-dep{background:#39c983}.bar-wd{background:#e85a5a}.ops-chart-day>span{text-align:center;color:#718899;font-size:9px}.ops-chart-legend{display:flex;gap:18px;padding:0 20px 15px;color:#8499a8;font-size:9px}.ops-chart-legend span{display:flex;align-items:center;gap:5px}.ops-chart-legend i{width:8px;height:8px;border-radius:2px}.ops-chart-legend i.dep{background:#39c983}.ops-chart-legend i.wd{background:#e85a5a}
.ops-system-summary{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px;margin-bottom:11px}.ops-system-summary article{padding:12px;background:#0a1926;border:1px solid #1d3445;border-radius:7px}.ops-system-summary span,.ops-system-summary strong,.ops-system-summary small{display:block}.ops-system-summary span{color:#7d94a4;font-size:9px}.ops-system-summary strong{margin-top:3px;font-size:14px}.ops-system-summary small{margin-top:3px;color:#61798c;font-size:8px}

/* Backdrop/mobile */
.ops-backdrop{display:none}
@media(max-width:1250px){
  .ops-dashboard-grid{grid-template-columns:1fr}.ops-dashboard-rail{grid-template-columns:repeat(2,1fr)}
  .ops-kpis{grid-template-columns:repeat(3,1fr)}.ops-kpis-four{grid-template-columns:repeat(4,1fr)}
  .ops-form-grid,.ops-form-five,.ops-form-six{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:960px){
  /* APPLICATION SHELL */
  .ops-sidebar{
    transform:translateX(-100%);
    transition:transform .2s ease;
  }

  .ops-sidebar.open{
    transform:translateX(0);
  }

  .ops-main{
    margin-left:0;
  }

  .ops-menu{
    display:inline-grid;
    place-items:center;
    width:34px;
    height:34px;
    border:1px solid #2b465b;
    border-radius:5px;
    background:#0b1c2b;
    color:#fff;
    cursor:pointer;
  }

  .ops-backdrop.open{
    display:block;
    position:fixed;
    inset:0;
    z-index:70;
    background:rgba(0,0,0,.55);
  }

  .ops-top-title{
    min-width:auto;
  }

  .ops-search{
    margin-left:auto;
  }

  .ops-production,
  .ops-clock{
    display:none;
  }

  .ops-content{
    padding:17px 14px 40px;
  }

  .ops-two,
  .ops-payment-split,
  .ops-report-grid{
    grid-template-columns:1fr;
  }

  .ops-payment-split>div:first-child{
    border-right:0;
    border-bottom:1px solid #1e3547;
  }

  .ops-form-grid,
  .ops-form-five,
  .ops-form-six{
    grid-template-columns:repeat(2,1fr);
  }

  /* LOGIN MOBILE
     IMPORTANT:
     artwork 1024x1536 = 2:3.
     Show full artwork. No cover crop. No overlap. */

  .ops-login-page{
    overflow-x:hidden;
    background:#04101b;
  }

  .ops-login-shell{
    display:block;
    width:100%;
    min-height:100vh;
    overflow-x:hidden;
  }

  .ops-login-art{
    display:block;
    width:100%;
    height:auto;
    min-height:0;
    aspect-ratio:2 / 3;

    background-image:
      url('/assets/img/ufabet-login-mobile-clean-v8.webp');

    background-repeat:no-repeat;
    background-position:center top;
    background-size:100% 100%;
  }

  .ops-login-art:after{
    display:none;
  }

  .ops-login-side{
    position:relative;
    width:100%;
    min-width:0;
    min-height:auto;

    display:block;

    margin:0;
    padding:22px 14px 34px;

    background:#04101b;
    border-left:0;
  }

  .ops-login-runtime{
    display:none;
  }

  .ops-login-content{
    width:100%;
    max-width:680px;
    min-width:0;

    margin:0 auto;
  }

  .ops-login-card{
    width:100%;
    max-width:none;

    margin:0;

    padding:30px 26px;

    background:#061724;

    border:
      1px solid
      rgba(211,166,76,.58);

    border-radius:12px;

    box-shadow:
      0 20px 55px
      rgba(0,0,0,.30);
  }

  .ops-login-footer{
    display:none;
  }
}
@media(max-width:680px){
  body{
    font-size:13px;
  }

  /* APPLICATION */
  .ops-topbar{
    padding:0 10px;
    gap:9px;
  }

  .ops-top-title span{
    display:none;
  }

  .ops-top-title strong{
    font-size:12px;
  }

  .ops-search{
    display:none;
  }

  .ops-admin summary>span{
    display:none;
  }

  .ops-content{
    padding:14px 9px 35px;
  }

  .ops-page-head{
    align-items:flex-start;
    flex-direction:column;
  }

  .ops-page-head h1{
    font-size:23px;
  }

  .ops-head-actions{
    width:100%;
  }

  .ops-kpis,
  .ops-kpis-four{
    grid-template-columns:repeat(2,1fr);
  }

  .ops-dashboard-rail{
    grid-template-columns:1fr;
  }

  .ops-form-grid,
  .ops-form-five,
  .ops-form-six{
    grid-template-columns:1fr;
  }

  .ops-commandbar{
    flex-direction:column;
  }

  .ops-filter{
    width:100%;
  }

  .ops-filter label{
    flex:1;
  }

  .ops-filter input{
    width:100%;
  }

  .ops-drawer{
    width:100%;
  }

  /* LOGIN */
  .ops-login-side{
    margin:0;
    padding:16px 8px 28px;
  }

  .ops-login-content{
    width:100%;
    max-width:none;
  }

  .ops-login-card{
    width:100%;
    margin:0;
    padding:25px 19px;
    border-radius:10px;
  }

  .ops-login-brandline{
    gap:8px;
  }

  .ops-login-brandline strong{
    font-size:20px;
  }

  .ops-login-brandline span{
    font-size:13px;
  }

  .ops-login-heading>small{
    font-size:10px;
  }

  .ops-gold-rule{
    margin:19px 0 21px;
  }

  .ops-login-heading h1{
    font-size:26px;
  }

  .ops-login-heading p{
    font-size:14px;
  }

  .ops-login-form{
    margin-top:25px;
    gap:17px;
  }

  .ops-login-form label>span{
    font-size:14px;
  }

  .ops-login-field{
    width:100%;
    height:54px;
  }

  .ops-login-field input{
    min-width:0;
    font-size:16px;
  }

  .ops-login-submit{
    width:100%;
    height:55px;
    font-size:17px;
  }

  .ops-login-security{
    margin-top:28px;
    padding-top:15px;

    grid-template-columns:1fr;
  }

  .ops-login-security>div{
    min-height:42px;

    padding:7px 0;

    border-right:0;
    border-bottom:1px solid #223b4d;
  }

  .ops-login-security>div:last-child{
    border-bottom:0;
  }

  .ops-login-security strong{
    font-size:11px;
  }

  .ops-login-security small{
    font-size:9px;
  }
}


/* ============================================================
   UFABET OPERATOR V7.1
   READABILITY / BRAND SCALE / RESPONSIVE TOPBAR
   ============================================================ */


/* ------------------------------------------------------------
   1. GLOBAL READABILITY
   ------------------------------------------------------------ */

body.ops-app{
    font-size:15px;
}

.ops-content{
    padding:
        26px
        28px
        52px;
}


/* ------------------------------------------------------------
   2. SIDEBAR — BIGGER REAL UFABET LOGO
   ------------------------------------------------------------ */

.ops-sidebar{
    width:238px;
}

.ops-main{
    margin-left:238px;
}

.ops-brand{
    height:82px;

    gap:14px;

    padding:
        10px
        17px;
}

.ops-brand>a{
    display:flex;
    align-items:center;

    min-width:0;
}

.ops-brand img{
    width:158px;
    height:58px;

    object-fit:contain;

    object-position:left center;
}

.ops-brand>span{
    padding-left:12px;

    color:#d0dae1;

    font-size:10px;

    letter-spacing:.12em;
}

.ops-nav{
    padding:
        11px
        10px
        20px;
}

.ops-nav-section{
    padding:
        15px
        12px
        7px;

    color:#617b8e;

    font-size:10.5px;

    letter-spacing:.12em;
}

.ops-nav a{
    min-height:46px;

    gap:12px;

    padding:
        9px
        11px;

    font-size:14px;
}

.ops-nav svg{
    width:20px;
    height:20px;
}

.ops-sidebar-health{
    margin:
        9px
        13px
        15px;

    padding:12px;
}

.ops-sidebar-health strong{
    font-size:12px;
}

.ops-sidebar-health small{
    font-size:10px;
}


/* ------------------------------------------------------------
   3. TOP BAR
   prevent overlap on browser zoom / narrower desktop widths
   ------------------------------------------------------------ */

.ops-topbar{
    min-width:0;

    height:76px;

    gap:15px;

    padding:
        0
        22px;
}

.ops-menu{
    flex:none;
}

.ops-top-title{
    flex:
        0
        1
        320px;

    min-width:190px;

    max-width:320px;
}

.ops-top-title strong{
    overflow:hidden;

    color:#f3f6f8;

    font-size:15px;

    text-overflow:ellipsis;

    white-space:nowrap;
}

.ops-top-title span{
    margin-top:2px;

    overflow:hidden;

    color:#8198a9;

    font-size:10.5px;

    text-overflow:ellipsis;

    white-space:nowrap;
}

.ops-search{
    flex:
        1
        1
        390px;

    width:auto;

    min-width:170px;

    max-width:520px;

    height:40px;

    margin:0;
}

.ops-search input{
    min-width:0;

    font-size:13px;
}

.ops-production{
    flex:none;

    margin-left:auto;

    padding:
        7px
        11px;

    font-size:11px;

    white-space:nowrap;
}

.ops-clock{
    flex:none;

    font-size:11px;

    white-space:nowrap;
}

.ops-admin{
    flex:none;

    min-width:0;
}

.ops-admin>summary{
    min-width:0;
}

.ops-admin>summary>b{
    width:38px;
    height:38px;
}

.ops-admin summary strong{
    max-width:155px;

    font-size:12.5px;
}

.ops-admin summary small{
    font-size:10px;
}


/* ------------------------------------------------------------
   4. PAGE TITLES
   ------------------------------------------------------------ */

.ops-page-head{
    margin-bottom:20px;
}

.ops-page-head>div:first-child>span{
    margin-bottom:4px;

    font-size:11px;

    letter-spacing:.11em;
}

.ops-page-head h1{
    font-size:32px;

    line-height:1.18;
}

.ops-page-head p{
    margin-top:6px;

    color:#8da1b0;

    font-size:14px;
}

.ops-head-stat span{
    font-size:10.5px;
}

.ops-head-stat strong{
    font-size:26px;
}


/* ------------------------------------------------------------
   5. KPI CARDS
   ------------------------------------------------------------ */

.ops-kpis{
    gap:11px;

    margin-bottom:15px;
}

.ops-kpis article{
    min-height:112px;

    padding:
        16px
        17px;
}

.ops-kpis span{
    font-size:12px;
}

.ops-kpis strong{
    margin-top:8px;

    font-size:27px;
}

.ops-kpis small{
    margin-top:6px;

    color:#8297a7;

    font-size:11px;
}


/* ------------------------------------------------------------
   6. PANELS
   ------------------------------------------------------------ */

.ops-panel-head{
    min-height:55px;

    padding:
        10px
        14px;
}

.ops-panel-head>div>span{
    font-size:9.5px;
}

.ops-panel-head h2{
    margin-top:2px;

    font-size:15px;
}

.ops-panel-head>a,
.ops-panel-head nav a{
    font-size:11px;
}

.ops-panel-head>small{
    font-size:10.5px;
}


/* ------------------------------------------------------------
   7. TABLE / LIVE OPERATIONS
   ------------------------------------------------------------ */

.ops-grid-head{
    min-height:36px;

    padding:
        0
        13px;

    font-size:10.5px;
}

.ops-grid-row{
    min-height:47px;

    padding:
        0
        13px;

    font-size:12px;
}

.ops-grid-row b{
    font-size:12px;
}

.ops-grid-row b small{
    margin-top:2px;

    font-size:9.5px;
}

.ops-table{
    font-size:12.5px;
}

.ops-table th{
    height:39px;

    padding:
        8px
        11px;

    font-size:11px;
}

.ops-table td{
    min-height:46px;

    padding:
        9px
        11px;
}

.ops-table-empty,
.ops-empty{
    color:#8196a6;

    font-size:12px;
}

.ops-empty{
    min-height:110px;
}

.ops-empty-lg{
    min-height:215px;
}

.mono{
    font-size:10.5px;
}


/* ------------------------------------------------------------
   8. STATUS PILLS / MINI ROWS
   ------------------------------------------------------------ */

.ops-state{
    min-height:23px;

    padding:
        3px
        7px;

    font-size:9.5px;
}

.ops-mini-row{
    min-height:43px;

    padding:
        0
        11px;

    font-size:10.5px;
}

.ops-subhead{
    min-height:40px;

    padding:
        6px
        12px;
}

.ops-subhead strong{
    font-size:12px;
}

.ops-subhead a{
    font-size:10px;
}

.ops-health-row{
    min-height:44px;

    padding:
        0
        12px;

    font-size:10.5px;
}

.ops-health-row b{
    font-size:10.5px;
}

.ops-control-list>div{
    min-height:42px;

    padding:
        6px
        12px;
}

.ops-control-list dt{
    font-size:10.5px;
}

.ops-control-list dd{
    font-size:13px;
}

.ops-risk-row{
    min-height:43px;

    font-size:10.5px;
}

.ops-risk-row b{
    font-size:10.5px;
}


/* ------------------------------------------------------------
   9. FORMS
   ------------------------------------------------------------ */

.ops-filter label>span,
.ops-form-grid label>span{
    margin-bottom:6px;

    font-size:11.5px;
}

input,
select,
textarea{
    min-height:38px;

    padding:
        7px
        10px;

    font-size:13px;
}

.ops-btn{
    min-height:38px;

    padding:
        7px
        13px;

    font-size:12px;
}

.ops-btn-sm{
    min-height:31px;

    padding:
        5px
        9px;

    font-size:10.5px;
}


/* ------------------------------------------------------------
   10. LOGIN — USE REAL LOGO IMAGE
   ------------------------------------------------------------ */

.ops-login-card{
    padding:
        clamp(
            40px,
            4vw,
            58px
        );
}

.ops-login-real-logo{
    display:flex;

    align-items:center;

    gap:20px;
}

.ops-login-real-logo img{
    width:255px;
    height:82px;

    display:block;

    object-fit:contain;

    object-position:left center;
}

.ops-login-real-logo span{
    padding-left:19px;

    border-left:
        1px solid
        #385266;

    color:#d6e0e6;

    font-size:16px;

    font-weight:700;

    letter-spacing:.16em;
}

.ops-login-subbrand{
    margin-top:8px;

    color:#8fa4b4;

    font-size:12px;

    letter-spacing:.18em;
}

.ops-login-heading h1{
    font-size:
        clamp(
            31px,
            2.15vw,
            40px
        );
}

.ops-login-heading p{
    font-size:16px;
}

.ops-login-form label>span{
    font-size:15px;
}

.ops-login-field{
    height:60px;
}

.ops-login-field svg{
    width:26px;
    height:26px;
}

.ops-login-field input{
    font-size:17px;
}


/* Chrome autofill must stay DARK, not white/blue */

.ops-login-field input:-webkit-autofill,
.ops-login-field input:-webkit-autofill:hover,
.ops-login-field input:-webkit-autofill:focus,
.ops-login-field input:-webkit-autofill:active{
    -webkit-text-fill-color:#fff !important;

    caret-color:#fff;

    box-shadow:
        0 0 0 1000px
        #0b2031
        inset !important;

    transition:
        background-color
        99999s
        ease-out
        0s;
}

.ops-login-submit{
    height:61px;

    font-size:18px;
}

.ops-login-security strong{
    font-size:11px;
}

.ops-login-security small{
    font-size:9.5px;
}


/* ------------------------------------------------------------
   11. WIDE DESKTOP / ZOOM PROTECTION
   ------------------------------------------------------------ */

@media(max-width:1500px){

    .ops-sidebar{
        width:220px;
    }

    .ops-main{
        margin-left:220px;
    }

    .ops-brand img{
        width:145px;
    }

    .ops-top-title{
        flex-basis:265px;

        max-width:265px;
    }

    .ops-search{
        flex-basis:300px;

        max-width:440px;
    }

    .ops-clock{
        display:none;
    }
}


@media(max-width:1280px){

    .ops-topbar{
        gap:11px;

        padding:
            0
            15px;
    }

    .ops-top-title{
        flex:
            0
            1
            225px;

        min-width:160px;
    }

    .ops-top-title span{
        display:none;
    }

    .ops-search{
        min-width:150px;

        max-width:none;
    }

    .ops-production{
        padding:
            6px
            8px;
    }

    .ops-admin summary strong{
        max-width:105px;
    }
}


/* ------------------------------------------------------------
   12. TABLET / MOBILE APPLICATION
   ------------------------------------------------------------ */

@media(max-width:960px){

    .ops-sidebar{
        width:238px;

        transform:
            translateX(-100%);
    }

    .ops-sidebar.open{
        transform:
            translateX(0);
    }

    .ops-main{
        margin-left:0;
    }

    .ops-topbar{
        height:70px;
    }

    .ops-top-title{
        flex:
            0
            1
            auto;

        min-width:0;
    }

    .ops-top-title strong{
        font-size:14px;
    }

    .ops-search{
        margin-left:auto;
    }

    .ops-page-head h1{
        font-size:29px;
    }

    .ops-kpis article{
        min-height:105px;
    }

    /* login */

    .ops-login-real-logo{
        justify-content:center;
    }

    .ops-login-real-logo img{
        width:235px;
        height:76px;
    }

    .ops-login-real-logo span{
        font-size:13px;
    }

    .ops-login-subbrand{
        text-align:center;
    }
}


/* ------------------------------------------------------------
   13. MOBILE
   ------------------------------------------------------------ */

@media(max-width:680px){

    body.ops-app{
        font-size:14px;
    }

    .ops-content{
        padding:
            17px
            11px
            40px;
    }

    .ops-page-head h1{
        font-size:27px;
    }

    .ops-page-head p{
        font-size:13px;
    }

    .ops-kpis span{
        font-size:11px;
    }

    .ops-kpis strong{
        font-size:24px;
    }

    .ops-kpis small{
        font-size:10px;
    }

    .ops-panel-head h2{
        font-size:14px;
    }

    .ops-table{
        font-size:12px;
    }

    .ops-table th{
        font-size:10.5px;
    }

    .ops-login-card{
        padding:
            27px
            20px;
    }

    .ops-login-real-logo{
        display:block;

        text-align:center;
    }

    .ops-login-real-logo img{
        width:250px;
        height:80px;

        margin:
            0
            auto;
    }

    .ops-login-real-logo span{
        display:block;

        margin-top:7px;

        padding:0;

        border-left:0;

        font-size:13px;
    }

    .ops-login-subbrand{
        margin-top:4px;

        font-size:10px;
    }

    .ops-gold-rule{
        margin:
            18px
            auto
            21px;
    }

    .ops-login-heading h1{
        text-align:center;

        font-size:27px;
    }

    .ops-login-heading p{
        text-align:center;

        font-size:14px;
    }

    .ops-login-form label>span{
        font-size:14px;
    }

    .ops-login-field{
        height:56px;
    }

    .ops-login-field input{
        font-size:16px;
    }

    .ops-login-submit{
        height:57px;

        font-size:17px;
    }
}


/* ------------------------------------------------------------
   14. SMALL MOBILE
   ------------------------------------------------------------ */

@media(max-width:430px){

    .ops-login-card{
        padding:
            24px
            16px;
    }

    .ops-login-real-logo img{
        width:220px;
        height:72px;
    }

    .ops-login-heading h1{
        font-size:25px;
    }
}



/* ============================================================
   UFABET V7.1.1
   REAL LOGO VISUAL CORRECTION
   ============================================================ */

/* Sidebar logo uses trimmed real asset */
.ops-brand{
    height:94px;
    padding:10px 16px;
}

.ops-brand>a{
    width:100%;
    min-width:0;
    overflow:hidden;
}

.ops-brand img{
    width:178px;
    height:auto;
    max-height:70px;

    display:block;

    object-fit:contain;
    object-position:left center;
}

/* Login branding: actual artwork, no text pretending to be logo */
.ops-login-real-logo{
    display:block;

    width:100%;

    margin:0 0 13px;

    text-align:left;
}

.ops-login-real-logo img{
    display:block;

    width:min(370px,78%);
    height:auto;
    max-height:none;

    margin:0;

    object-fit:contain;
}

.ops-login-subbrand{
    margin-top:0;

    display:flex;
    align-items:center;
    gap:12px;

    color:#a6b8c4;
}

.ops-login-subbrand strong{
    color:#f0d079;

    font-size:15px;

    letter-spacing:.16em;
}

.ops-login-subbrand span{
    padding-left:12px;

    border-left:1px solid #385266;

    color:#91a6b5;

    font-size:11px;

    letter-spacing:.16em;
}

.ops-login-card{
    padding-top:
        clamp(34px,3vw,48px);
}


/* ============================================================
   MOBILE
   artwork stays untouched and complete.
   Login branding below artwork becomes visibly large.
   ============================================================ */

@media(max-width:960px){

    .ops-login-side{
        margin:0;
    }

    .ops-login-real-logo{
        margin:
            0
            0
            12px;

        text-align:center;
    }

    .ops-login-real-logo img{
        width:min(360px,88%);

        margin:
            0
            auto;
    }

    .ops-login-subbrand{
        justify-content:center;

        margin-top:0;
    }

    .ops-login-subbrand strong{
        font-size:14px;
    }

    .ops-login-subbrand span{
        font-size:10px;
    }
}


@media(max-width:680px){

    .ops-login-card{
        padding:
            22px
            20px
            25px;
    }

    .ops-login-real-logo{
        margin-bottom:10px;
    }

    .ops-login-real-logo img{
        width:min(330px,92%);
        height:auto;
    }

    .ops-login-subbrand{
        display:block;

        text-align:center;
    }

    .ops-login-subbrand strong,
    .ops-login-subbrand span{
        display:block;
    }

    .ops-login-subbrand strong{
        font-size:14px;
    }

    .ops-login-subbrand span{
        margin-top:4px;
        padding:0;
        border-left:0;

        font-size:10px;
    }

    .ops-gold-rule{
        margin:
            16px
            auto
            20px;
    }
}


@media(max-width:430px){

    .ops-login-real-logo img{
        width:min(300px,94%);
    }
}


/* ============================================================
   UFABET V7.1.2
   MOBILE LOGIN ABOVE-THE-FOLD
   DESKTOP RULES UNCHANGED
   ============================================================ */

@media(max-width:960px){

    html,
    body.ops-login-page{
        width:100%;
        min-height:100%;
        overflow-x:hidden;
    }

    /*
       IMPORTANT:
       Do NOT render the entire 2:3 poster before the login form.
       Mobile is a functional login screen first.
    */

    .ops-login-shell{
        width:100%;
        min-height:100svh;

        display:block;

        background:#04101b;
    }

    .ops-login-art{
        width:100%;

        /*
           First screen artwork:
           enough to keep the UFABET identity visible,
           but short enough for the login controls to enter
           the initial viewport.
        */
        height:32svh;
        min-height:230px;
        max-height:310px;

        aspect-ratio:auto;

        background-image:
            url('/assets/img/ufabet-login-mobile-clean-v8.webp');

        background-repeat:no-repeat;

        /*
           Artwork is portrait; crop around the main UFABET
           logo/Administration area instead of forcing 2:3.
        */
        background-size:cover;
        background-position:center 18%;
    }

    .ops-login-art::after{
        content:"";

        display:block;

        position:absolute;
        inset:0;

        background:
            linear-gradient(
                180deg,
                rgba(1,7,13,.02) 0%,
                rgba(1,7,13,.04) 70%,
                #04101b 100%
            );
    }

    .ops-login-side{
        width:100%;
        min-height:auto;

        display:block;

        margin:0;

        padding:
            0
            12px
            28px;

        background:#04101b;

        border-left:0;
    }

    .ops-login-runtime{
        display:none;
    }

    .ops-login-content{
        width:100%;
        max-width:620px;

        margin:
            -18px
            auto
            0;

        position:relative;
        z-index:5;
    }

    .ops-login-card{
        width:100%;

        margin:0;

        padding:
            20px
            22px
            23px;

        border-radius:12px;

        background:
            rgba(5,22,36,.99);
    }

    /*
       Keep the real logo in the real form,
       but compact it enough that Username/Password
       are visible on the first screen.
    */

    .ops-login-real-logo{
        margin-bottom:5px;
    }

    .ops-login-real-logo img{
        width:min(230px,72%);
        height:auto;

        margin:
            0
            auto;
    }

    .ops-login-subbrand{
        margin-top:1px;

        text-align:center;
    }

    .ops-login-subbrand strong{
        font-size:12px;
    }

    .ops-login-subbrand span{
        margin-top:2px;

        font-size:9px;
    }

    .ops-gold-rule{
        width:62px;
        height:2px;

        margin:
            11px
            auto
            12px;
    }

    .ops-login-heading h1{
        margin:0;

        text-align:center;

        font-size:23px;
    }

    .ops-login-heading p{
        margin-top:3px;

        text-align:center;

        font-size:12px;
    }

    .ops-login-form{
        margin-top:15px;

        gap:12px;
    }

    .ops-login-form label>span{
        margin-bottom:4px;

        font-size:12px;
    }

    .ops-login-field{
        height:49px;

        padding:
            0
            13px;
    }

    .ops-login-field svg{
        width:21px;
        height:21px;
    }

    .ops-login-field input{
        font-size:15px;
    }

    .ops-pass-toggle{
        width:34px;
        height:34px;
    }

    .ops-login-submit{
        height:50px;

        margin-top:3px;

        font-size:16px;
    }

    /*
       Security information should not push login controls
       below the fold.
    */

    .ops-login-security{
        margin-top:16px;

        padding-top:11px;

        grid-template-columns:
            repeat(3,minmax(0,1fr));
    }

    .ops-login-security>div{
        min-height:auto;

        padding:
            0
            7px;

        border-right:
            1px solid
            #29465a;

        border-bottom:0;
    }

    .ops-login-security strong{
        font-size:9px;
    }

    .ops-login-security small{
        display:none;
    }

    .ops-login-footer{
        display:none;
    }
}


@media(max-width:520px){

    .ops-login-art{
        height:30svh;
        min-height:210px;
        max-height:265px;

        background-position:center 17%;
    }

    .ops-login-side{
        padding:
            0
            7px
            20px;
    }

    .ops-login-content{
        margin-top:-14px;
    }

    .ops-login-card{
        padding:
            18px
            16px
            20px;
    }

    .ops-login-real-logo img{
        width:min(205px,68%);
    }

    .ops-login-heading h1{
        font-size:21px;
    }

    .ops-login-heading p{
        font-size:11px;
    }

    .ops-login-form{
        margin-top:13px;
        gap:10px;
    }

    .ops-login-field{
        height:47px;
    }

    .ops-login-submit{
        height:48px;
    }

    .ops-login-security{
        margin-top:13px;
    }
}


/* ============================================================
   UFABET V7.1.3
   MOBILE LOGIN SAFE COMPACT
   No artwork / desktop / authentication changes.
   ============================================================ */

@media(max-width:680px){

    /* lift the working panel slightly */
    .ops-login-content{
        margin-top:-24px;
    }

    /* reduce excess vertical bulk without shrinking readability */
    .ops-login-card{
        padding:
            18px
            18px
            19px;
    }

    .ops-login-real-logo{
        margin-bottom:4px;
    }

    .ops-login-real-logo img{
        width:min(210px,68%);
    }

    .ops-login-subbrand{
        margin-top:0;
    }

    .ops-login-subbrand strong{
        font-size:12px;
    }

    .ops-login-subbrand span{
        margin-top:1px;
        font-size:9px;
    }

    .ops-gold-rule{
        margin:
            9px
            auto
            10px;
    }

    .ops-login-heading h1{
        font-size:22px;
    }

    .ops-login-heading p{
        margin-top:2px;
        font-size:11px;
    }

    .ops-login-form{
        margin-top:11px;
        gap:8px;
    }

    .ops-login-form label>span{
        margin-bottom:3px;
        font-size:12px;
    }

    .ops-login-field{
        height:44px;
        min-height:44px;
        padding:
            0
            12px;
    }

    .ops-login-field svg{
        width:19px;
        height:19px;
    }

    .ops-login-field input{
        height:42px;
        font-size:14px;
    }

    .ops-pass-toggle{
        width:32px;
        height:32px;
    }

    .ops-login-submit{
        height:46px;
        min-height:46px;
        margin-top:2px;
        font-size:15px;
    }

    .ops-login-submit b{
        font-size:22px;
    }

    .ops-login-security{
        margin-top:11px;
        padding-top:9px;
    }

    .ops-login-security>div{
        padding:
            0
            5px;
    }

    .ops-login-security strong{
        font-size:8.5px;
    }

    .ops-login-security small{
        display:none;
    }
}


@media(max-width:430px){

    .ops-login-content{
        margin-top:-20px;
    }

    .ops-login-card{
        padding:
            16px
            14px
            17px;
    }

    .ops-login-real-logo img{
        width:min(195px,66%);
    }

    .ops-login-heading h1{
        font-size:21px;
    }

    .ops-login-field{
        height:43px;
        min-height:43px;
    }

    .ops-login-submit{
        height:45px;
        min-height:45px;
    }
}


/* ============================================================
   UFABET V7.1.4
   MOBILE FULL VIEWPORT ARTWORK BACKGROUND

   Fix:
   - Artwork is NOT a 30svh block anymore.
   - Artwork stays behind the whole mobile login screen.
   - No dark "second half" caused by document flow.
   - Browser zoom no longer pushes the artwork block upward.
   - Desktop remains untouched.
   ============================================================ */

@media(max-width:960px){

    html{
        min-height:100%;
        background:#03101b;
    }

    body.ops-login-page{
        position:relative;

        width:100%;
        min-width:0;
        min-height:100svh;

        overflow-x:hidden;

        background:#03101b;
    }

    .ops-login-shell{
        position:relative;

        display:block;

        width:100%;
        min-width:0;
        min-height:100svh;

        overflow-x:hidden;

        background:transparent;
    }

    /*
       Full mobile artwork layer.

       Important:
       fixed positioning disconnects the image from document flow,
       so the login card can move/scroll without pushing the image.
    */
    .ops-login-art{
        position:fixed;

        z-index:0;

        inset:0;

        width:100vw;
        height:100dvh;
        min-height:0;
        max-height:none;

        aspect-ratio:auto;

        background-image:
            url('/assets/img/ufabet-login-mobile-clean-v8.webp');

        background-repeat:no-repeat;

        /*
           Show the entire vertical composition.
           Horizontal edges may crop slightly depending on device ratio,
           but top/bottom artwork will not be cut in half.
        */
        background-size:auto 100%;
        background-position:center top;

        pointer-events:none;
    }

    .ops-login-art::after{
        content:"";

        display:block;

        position:absolute;

        inset:0;

        /*
           Keep artwork visible at top.
           Darken only behind/below the login panel for readability.
        */
        background:
            linear-gradient(
                180deg,
                rgba(2,9,16,.00) 0%,
                rgba(2,9,16,.02) 28%,
                rgba(2,9,16,.20) 43%,
                rgba(2,9,16,.67) 66%,
                rgba(3,16,27,.92) 100%
            );
    }

    /*
       Real login content now floats over the full artwork.
    */
    .ops-login-side{
        position:relative;

        z-index:2;

        width:100%;
        min-width:0;
        min-height:100svh;

        display:flex;

        align-items:flex-start;
        justify-content:center;

        /*
           Enough clear space to retain visible UFABET artwork
           while still keeping Username/Password on opening screen.
        */
        padding:
            clamp(155px,20svh,190px)
            10px
            16px;

        margin:0;

        background:transparent;

        border:0;
    }

    .ops-login-runtime{
        display:none;
    }

    .ops-login-content{
        position:relative;

        z-index:3;

        width:100%;
        max-width:560px;
        min-width:0;

        margin:0 auto;
    }

    .ops-login-card{
        width:100%;

        margin:0;

        /*
           Card remains compact from V7.1.3.
        */
        background:
            rgba(4,20,33,.96);

        border:
            1px solid
            rgba(211,166,76,.78);

        box-shadow:
            0 18px 48px
            rgba(0,0,0,.38);

        backdrop-filter:
            blur(3px);
    }

    .ops-login-footer{
        display:none;
    }
}


/* Phones */
@media(max-width:680px){

    .ops-login-side{
        min-height:100svh;

        padding:
            clamp(145px,18svh,175px)
            6px
            14px;
    }

    .ops-login-content{
        /*
           Cancel previous negative positioning.
           Background is fixed now, so no need to drag the form upward.
        */
        margin:0 auto;
    }

    .ops-login-card{
        margin:0;
    }
}


/* Small phones */
@media(max-width:430px){

    /*
       Real mobile artwork focal adjustment.
       Keep the Login card exactly where R2 placed it.
       Move only the fixed poster upward so its large UFABET mark
       is not hidden behind the Login card.
    */
    .ops-login-art{
        background-position:center -90px;
        background-color:#03101b;
    }

    .ops-login-side{
        padding:
            clamp(185px,24.5svh,210px)
            5px
            10px;
    }

    .ops-login-content{
        margin:0 auto;
    }
}


/*
   Fallback for browsers whose dynamic viewport unit support
   is incomplete.
*/
@supports not (height:100dvh){

    @media(max-width:960px){

        .ops-login-art{
            height:100vh;
        }

        .ops-login-side{
            min-height:100vh;
        }
    }
}


/* ============================================================
   UFABET V7.1.5
   MOBILE LOGIN FINAL POLISH

   LOCK CANDIDATE:
   - background unchanged
   - card position unchanged
   - desktop unchanged
   - real logo retained
   ============================================================ */

@media(max-width:680px){

    /*
       IMPORTANT:
       do not alter .ops-login-art
       do not alter .ops-login-side positioning
       do not alter .ops-login-content positioning
    */

    .ops-login-card{
        padding:
            17px
            18px
            16px;
    }

    /* real UFABET logo */
    .ops-login-real-logo{
        margin-bottom:2px;
    }

    .ops-login-real-logo img{
        width:min(190px,62%);
        height:auto;
    }

    .ops-login-subbrand{
        margin-top:0;
    }

    .ops-login-subbrand strong{
        font-size:11px;
        line-height:1.2;
    }

    .ops-login-subbrand span{
        margin-top:1px;

        font-size:8.5px;
        line-height:1.2;
    }

    .ops-gold-rule{
        width:58px;
        height:2px;

        margin:
            8px
            auto
            9px;
    }

    .ops-login-heading h1{
        margin:0;

        font-size:21px;
        line-height:1.15;
    }

    .ops-login-heading p{
        margin:
            2px
            0
            0;

        font-size:10.5px;
        line-height:1.3;
    }

    /* form */
    .ops-login-form{
        margin-top:10px;

        gap:7px;
    }

    .ops-login-form label>span{
        margin-bottom:3px;

        font-size:11.5px;
        line-height:1.2;
    }

    .ops-login-field{
        height:42px;
        min-height:42px;

        padding:
            0
            11px;
    }

    .ops-login-field svg{
        width:18px;
        height:18px;
    }

    .ops-login-field input{
        height:40px;

        font-size:14px;
    }

    .ops-pass-toggle{
        width:30px;
        height:30px;

        font-size:16px;
    }

    .ops-login-submit{
        height:44px;
        min-height:44px;

        margin-top:2px;

        font-size:15px;
    }

    .ops-login-submit b{
        font-size:20px;
    }

    /* bottom status strip */
    .ops-login-security{
        margin-top:10px;

        padding-top:8px;
    }

    .ops-login-security>div{
        min-height:27px;

        gap:5px;

        padding:
            0
            6px;
    }

    .ops-login-security i{
        width:19px;

        font-size:13px;
    }

    .ops-login-security strong{
        font-size:8px;

        line-height:1.15;
    }

    .ops-login-security small{
        display:none;
    }
}


@media(max-width:430px){

    .ops-login-card{
        padding:
            15px
            14px
            15px;
    }

    .ops-login-real-logo img{
        width:min(178px,60%);
    }

    .ops-login-heading h1{
        font-size:20px;
    }

    .ops-login-form{
        margin-top:9px;
    }

    .ops-login-field{
        height:41px;
        min-height:41px;
    }

    .ops-login-submit{
        height:43px;
        min-height:43px;
    }
}


/* ============================================================
   UFABET MOBILE LOGIN CARD COMPACT REAL V7.1.9

   Scope:
   - <=430px only
   - .ops-login-card internals only

   Explicitly untouched:
   - .ops-login-art
   - .ops-login-side positioning
   - .ops-login-content positioning
   - desktop layout
   - authentication markup / logic
   ============================================================ */

@media(max-width:430px){

    .ops-login-card{
        padding:
            10px
            11px
            11px;
    }

    .ops-login-real-logo{
        margin-bottom:0;
    }

    .ops-login-real-logo img{
        width:min(160px,55%);
        height:auto;
    }

    .ops-login-subbrand{
        margin-top:0;
    }

    .ops-login-subbrand strong{
        font-size:10px;
        line-height:1.1;
    }

    .ops-login-subbrand span{
        margin-top:0;
        font-size:8px;
        line-height:1.1;
    }

    .ops-gold-rule{
        width:48px;
        height:2px;
        margin:
            5px
            auto
            6px;
    }

    .ops-login-heading h1{
        margin:0;
        font-size:19px;
        line-height:1.08;
    }

    .ops-login-heading p{
        margin:
            2px
            0
            0;
        font-size:10px;
        line-height:1.15;
    }

    .ops-login-form{
        margin-top:7px;
        gap:5px;
    }

    .ops-login-form label>span{
        margin-bottom:2px;
        font-size:11px;
        line-height:1.1;
    }

    .ops-login-field{
        height:39px;
        min-height:39px;
        padding:
            0
            9px;
        gap:8px;
    }

    .ops-login-field svg{
        width:17px;
        height:17px;
    }

    .ops-login-field input{
        height:37px;
        font-size:13px;
    }

    .ops-pass-toggle{
        width:28px;
        height:28px;
    }

    .ops-login-submit{
        height:41px;
        min-height:41px;
        margin-top:1px;
        font-size:14px;
    }

    .ops-login-submit b{
        font-size:18px;
    }

    .ops-login-security{
        margin-top:7px;
        padding-top:6px;
    }

    .ops-login-security>div{
        min-height:22px;
        gap:3px;
        padding:
            0
            3px;
    }

    .ops-login-security i{
        width:16px;
        font-size:11px;
    }

    .ops-login-security strong{
        font-size:7.5px;
        line-height:1.05;
    }

    .ops-login-security small{
        display:none;
    }
}

/* ============================================================
   UFABET PAYMENT ACCOUNT — BANK RECEIVING ACCOUNT V1
   BACKOFFICE ONLY
   ============================================================ */

.ops-payment-account-layout{
    display:grid;
    grid-template-columns:minmax(320px,430px) minmax(0,1fr);
    gap:16px;
    align-items:start;
}

.ops-payment-account-layout > *{
    min-width:0;
}

.ops-payment-account-layout input,
.ops-payment-account-layout select{
    min-height:42px;
}

.ops-payment-account-layout .ops-table-wrap{
    width:100%;
    min-width:0;
}

.ops-payment-account-layout .ops-table td small{
    display:block;
    margin-top:2px;
    color:#7d92a2;
    font-size:10px;
}

@media(max-width:680px){

    .ops-payment-account-layout{
        grid-template-columns:1fr;
        gap:12px;
    }

    .ops-payment-account-layout .ops-form-grid{
        grid-template-columns:1fr;
    }

    .ops-payment-account-layout .ops-table-wrap{
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
    }

    .ops-payment-account-layout .ops-table{
        min-width:760px;
    }

}

/* ============================================================
   UFABET PAYMENT ACCOUNTS — UNIFIED V2
   BANK / TRUEMONEY / QR
   ============================================================ */

.ops-payment-types{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
    margin-bottom:16px;
    align-items:start;
}

.ops-payment-type{
    min-width:0;
    padding:18px;
    border:1px solid rgba(211,166,76,.24);
    border-radius:12px;
    background:rgba(6,25,40,.72);
    box-shadow:0 10px 30px rgba(0,0,0,.14);
}

.ops-payment-type.is-active{
    border-color:rgba(211,166,76,.52);
}

.ops-payment-type-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:10px;
    margin-bottom:14px;
}

.ops-payment-type-head strong{
    font-size:15px;
    line-height:1.2;
}

.ops-payment-type-head span{
    font-size:9px;
    letter-spacing:.1em;
    opacity:.58;
}

.ops-payment-type .ops-form-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:9px;
}

.ops-payment-type .ops-form-submit{
    margin-top:2px;
}

.ops-field-help{
    display:block;
    margin-top:4px;
    font-size:10px;
    opacity:.58;
}

.ops-payment-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:24px;
    padding:0 8px;
    border:1px solid rgba(211,166,76,.35);
    border-radius:999px;
    font-size:9px;
    font-weight:800;
    letter-spacing:.07em;
}

.ops-payment-badge.bank{
    border-color:rgba(94,183,255,.38);
}

.ops-payment-badge.truemoney{
    border-color:rgba(92,214,146,.38);
}

.ops-payment-badge.qr{
    border-color:rgba(211,166,76,.58);
}

.ops-payment-subvalue{
    margin-top:3px;
    font-size:11px;
    opacity:.82;
}

.ops-payment-account-list .ops-table td small{
    display:block;
    margin-top:2px;
    font-size:10px;
    opacity:.6;
}

@media(max-width:1100px){

    .ops-payment-types{
        grid-template-columns:1fr;
    }

}

@media(max-width:680px){

    .ops-payment-type{
        padding:14px;
    }

    .ops-payment-type-head strong{
        font-size:14px;
    }

}

/* =========================================================
   UFABET SEO FOUNDATION V1
   Graph + table + future connector-ready UI
   ========================================================= */

.ops-seo-connector-state{
    min-width:170px;
    padding:9px 12px;
    border:1px solid #294357;
    border-radius:7px;
    background:#0a1b29;
}

.ops-seo-connector-state span{
    display:block;
    margin-bottom:3px;
    color:#70889a;
    font-size:8px;
    font-weight:800;
    letter-spacing:.12em;
}

.ops-seo-connector-state strong{
    color:#d8a63a;
    font-size:11px;
}

.ops-seo-summary{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:11px;
    margin-bottom:11px;
}

.ops-seo-stat{
    min-width:0;
    padding:13px 15px;
    border:1px solid #1d3547;
    border-radius:8px;
    background:#091724;
}

.ops-seo-stat span{
    display:block;
    color:#7590a3;
    font-size:9px;
    font-weight:700;
}

.ops-seo-stat strong{
    display:block;
    margin:7px 0 2px;
    color:#edf4f7;
    font-size:22px;
    line-height:1;
}

.ops-seo-stat small{
    color:#607b8e;
    font-size:8px;
}

.ops-seo-chart-panel{
    margin-bottom:11px;
}

.ops-seo-empty-chart{
    min-height:260px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
    padding:20px;
    text-align:center;
}

.ops-seo-empty-chart strong{
    color:#a9bbc7;
    font-size:12px;
}

.ops-seo-empty-chart span{
    color:#607b8e;
    font-size:9px;
}

.ops-seo-chart{
    height:290px;
    display:flex;
    align-items:stretch;
    gap:7px;
    padding:22px 18px 8px;
}

.ops-seo-chart-day{
    min-width:0;
    flex:1 1 0;
    display:grid;
    grid-template-rows:minmax(0,1fr) 21px;
    gap:5px;
}

.ops-seo-bar-zone{
    min-height:0;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    gap:3px;
    border-bottom:1px solid #263f52;
}

.ops-seo-bar-zone i{
    width:min(12px,38%);
    min-height:3px;
    border-radius:3px 3px 0 0;
}

.ops-seo-bar-zone .seo-click{
    background:#43cb8e;
}

.ops-seo-bar-zone .seo-impression{
    background:#4c93df;
}

.ops-seo-chart-day>span{
    overflow:hidden;
    color:#72899a;
    font-size:8px;
    text-align:center;
    white-space:nowrap;
}

.ops-seo-chart-legend{
    display:flex;
    gap:18px;
    padding:2px 18px 15px;
    color:#8499a8;
    font-size:9px;
}

.ops-seo-chart-legend span{
    display:flex;
    align-items:center;
    gap:5px;
}

.ops-seo-chart-legend i{
    width:8px;
    height:8px;
    border-radius:2px;
}

.ops-seo-chart-legend .seo-click{
    background:#43cb8e;
}

.ops-seo-chart-legend .seo-impression{
    background:#4c93df;
}

.ops-seo-keyword-panel .ops-table{
    min-width:760px;
}

@media (max-width:900px){
    .ops-seo-summary{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .ops-seo-chart{
        overflow-x:auto;
        justify-content:flex-start;
    }

    .ops-seo-chart-day{
        flex:0 0 52px;
    }
}

@media (max-width:560px){
    .ops-seo-summary{
        grid-template-columns:1fr 1fr;
        gap:8px;
    }

    .ops-seo-stat{
        padding:11px;
    }

    .ops-seo-stat strong{
        font-size:18px;
    }

    .ops-seo-connector-state{
        width:100%;
        min-width:0;
    }

    .ops-seo-chart{
        height:240px;
        padding:16px 12px 8px;
    }
}

/* =========================================================
   UFABET SEO KEYWORD GRAPH V1
   Horizontal ranking graph
   ========================================================= */

.ops-seo-keyword-chart{
    display:grid;
    gap:5px;
    padding:14px 16px 16px;
}

.ops-seo-keyword-row{
    display:grid;
    grid-template-columns:
        minmax(170px,240px)
        minmax(180px,1fr)
        82px;
    align-items:center;
    gap:13px;
    min-height:52px;
    padding:7px 0;
    border-bottom:1px solid #142b3b;
}

.ops-seo-keyword-row:last-child{
    border-bottom:0;
}

.ops-seo-keyword-name{
    min-width:0;
}

.ops-seo-keyword-name strong{
    display:block;
    overflow:hidden;
    color:#e5edf2;
    font-size:11px;
    line-height:1.3;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.ops-seo-keyword-name span{
    display:block;
    overflow:hidden;
    margin-top:4px;
    color:#6e8799;
    font-size:8px;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.ops-seo-keyword-track{
    position:relative;
    height:12px;
    overflow:hidden;
    border:1px solid #213b4e;
    border-radius:999px;
    background:#07131e;
}

.ops-seo-keyword-track i{
    display:block;
    width:0;
    height:100%;
    min-width:3px;
    border-radius:999px;
    background:linear-gradient(
        90deg,
        #317fcb 0%,
        #4ca2ea 100%
    );
}

.ops-seo-keyword-value{
    min-width:0;
    text-align:right;
}

.ops-seo-keyword-value strong{
    display:block;
    color:#e6edf1;
    font-size:11px;
}

.ops-seo-keyword-value span{
    display:block;
    margin-top:2px;
    color:#637d8f;
    font-size:7px;
    text-transform:uppercase;
}

.ops-seo-keyword-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:10px 16px;
    border-top:1px solid #1a3244;
    color:#688194;
    font-size:8px;
}

.ops-seo-keyword-empty{
    min-height:220px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
    padding:20px;
    text-align:center;
}

.ops-seo-keyword-empty strong{
    color:#a9bbc7;
    font-size:12px;
}

.ops-seo-keyword-empty span{
    color:#607b8e;
    font-size:9px;
}

@media(max-width:780px){

    .ops-seo-keyword-row{
        grid-template-columns:
            minmax(120px,180px)
            minmax(130px,1fr)
            70px;
        gap:8px;
    }

}

@media(max-width:560px){

    .ops-seo-keyword-chart{
        gap:0;
        padding:10px 12px 12px;
    }

    .ops-seo-keyword-row{
        grid-template-columns:1fr 64px;
        gap:7px 10px;
        min-height:70px;
        padding:10px 0;
    }

    .ops-seo-keyword-name{
        grid-column:1 / 2;
    }

    .ops-seo-keyword-value{
        grid-column:2 / 3;
        grid-row:1 / 2;
    }

    .ops-seo-keyword-track{
        grid-column:1 / 3;
        height:10px;
    }

    .ops-seo-keyword-footer{
        align-items:flex-start;
        flex-direction:column;
        gap:4px;
        padding:9px 12px;
    }

}

/* =========================================================
   UFABET SEO EMPTY GRAPH VISUAL V1
   Visible graph frame with zero data
   ========================================================= */

.ops-seo-chart-empty-frame{
    position:relative;
    height:260px;
    margin:18px;
    border-left:1px solid #294357;
    border-bottom:1px solid #294357;
    overflow:hidden;
}

.ops-seo-chart-grid{
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(
            to right,
            rgba(76,147,223,.08) 1px,
            transparent 1px
        ),
        linear-gradient(
            to bottom,
            rgba(76,147,223,.13) 1px,
            transparent 1px
        );
    background-size:
        calc(100% / 7) 100%,
        100% 25%;
}

.ops-seo-chart-x-ticks{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    display:grid;
    grid-template-columns:repeat(7,1fr);
}

.ops-seo-chart-x-ticks i{
    height:6px;
    border-right:1px solid #294357;
}

.ops-seo-empty-overlay{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:5px;
    text-align:center;
    pointer-events:none;
}

.ops-seo-empty-overlay strong{
    color:#b8c8d2;
    font-size:12px;
}

.ops-seo-empty-overlay span{
    color:#668296;
    font-size:9px;
}

.ops-seo-keyword-empty-frame{
    position:relative;
    display:grid;
    gap:12px;
    min-height:250px;
    padding:24px 18px;
}

.ops-seo-keyword-empty-lane{
    display:grid;
    grid-template-columns:
        minmax(120px,220px)
        minmax(200px,1fr);
    align-items:center;
    gap:15px;
}

.ops-seo-keyword-empty-lane span{
    height:9px;
    width:70%;
    border-radius:999px;
    background:rgba(99,125,143,.14);
}

.ops-seo-keyword-empty-lane i{
    height:12px;
    border:1px solid #213b4e;
    border-radius:999px;
    background:
        linear-gradient(
            90deg,
            rgba(49,127,203,.08),
            rgba(76,162,234,.03)
        );
}

.ops-seo-keyword-empty-overlay{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
    text-align:center;
    pointer-events:none;
}

.ops-seo-keyword-empty-overlay strong{
    color:#b8c8d2;
    font-size:12px;
}

.ops-seo-keyword-empty-overlay small{
    color:#668296;
    font-size:9px;
}

@media(max-width:560px){

    .ops-seo-chart-empty-frame{
        height:220px;
        margin:12px;
    }

    .ops-seo-keyword-empty-frame{
        min-height:220px;
        padding:18px 12px;
    }

    .ops-seo-keyword-empty-lane{
        grid-template-columns:90px minmax(120px,1fr);
        gap:9px;
    }

}

/* =========================================================
   UFABET SEO ANALYTICS DASHBOARD V2
   Power BI style dashboard
   ========================================================= */

.ops-seo-bi-page-head{
    align-items:flex-start;
}

.ops-seo-bi-connector{
    min-width:175px;
    padding:11px 14px;
    border:1px solid #27465b;
    border-radius:8px;
    background:
        linear-gradient(
            180deg,
            #0d2233,
            #091724
        );
}

.ops-seo-bi-connector span{
    display:block;
    color:#7d96a8;
    font-size:8px;
    font-weight:800;
    letter-spacing:.12em;
}

.ops-seo-bi-connector strong{
    display:block;
    margin-top:4px;
    color:#d6a83d;
    font-size:10px;
}


/* KPI */

.ops-seo-bi-kpis{
    display:grid;
    grid-template-columns:
        repeat(4,minmax(0,1fr));
    gap:11px;
    margin-bottom:11px;
}

.ops-seo-bi-kpi{
    position:relative;
    min-height:102px;
    display:grid;
    grid-template-columns:
        42px
        minmax(0,1fr)
        34%;
    align-items:center;
    gap:10px;
    overflow:hidden;
    padding:13px;
    border:1px solid #1f3a4d;
    border-radius:9px;
    background:
        linear-gradient(
            135deg,
            #0c2030,
            #081724
        );
}

.ops-seo-bi-kpi-icon{
    width:40px;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:9px;
    font-size:18px;
    font-weight:900;
}

.ops-seo-bi-kpi-icon.blue{
    color:#62b7ff;
    background:rgba(47,145,255,.14);
}

.ops-seo-bi-kpi-icon.cyan{
    color:#5bd4f2;
    background:rgba(40,199,216,.14);
}

.ops-seo-bi-kpi-icon.purple{
    color:#b688ff;
    background:rgba(137,101,237,.14);
}

.ops-seo-bi-kpi-icon.gold{
    color:#ffc657;
    background:rgba(255,173,61,.14);
}

.ops-seo-bi-kpi-main{
    position:relative;
    z-index:2;
    min-width:0;
}

.ops-seo-bi-kpi-main>span{
    display:block;
    color:#92a8b7;
    font-size:9px;
}

.ops-seo-bi-kpi-main>strong{
    display:block;
    margin:5px 0 4px;
    color:#f0f6fa;
    font-size:25px;
    line-height:1;
}

.ops-seo-bi-kpi-main>small{
    color:#5f7c91;
    font-size:8px;
}

.ops-seo-bi-spark{
    width:100%;
    height:55px;
}

.ops-seo-bi-spark polyline{
    fill:none;
    stroke-width:4;
    vector-effect:non-scaling-stroke;
}

.ops-seo-bi-spark.blue polyline{
    stroke:#2f91ff;
}

.ops-seo-bi-spark.cyan polyline{
    stroke:#28c7d8;
}

.ops-seo-bi-spark.purple polyline{
    stroke:#9b67f0;
}

.ops-seo-bi-spark.gold polyline{
    stroke:#ffb43e;
}


/* layouts */

.ops-seo-bi-grid-two{
    display:grid;
    grid-template-columns:
        minmax(0,1.08fr)
        minmax(0,.92fr);
    gap:11px;
    margin-bottom:11px;
}

.ops-seo-bi-panel{
    min-height:360px;
}


/* legend */

.ops-seo-bi-legend{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:14px;
    padding:11px 12px 3px;
    color:#8da3b2;
    font-size:8px;
}

.ops-seo-bi-legend span{
    display:flex;
    align-items:center;
    gap:5px;
}

.ops-seo-bi-legend i{
    width:8px;
    height:8px;
    border-radius:50%;
}

.ops-seo-bi-legend .blue i{
    background:#2f91ff;
}

.ops-seo-bi-legend .cyan i{
    background:#28c7d8;
}

.ops-seo-bi-legend .purple i{
    background:#9b67f0;
}

.ops-seo-bi-legend .gold i{
    background:#ffb43e;
}


/* line chart */

.ops-seo-bi-line-chart{
    position:relative;
    height:245px;
    margin:8px 18px 0;
    border-left:1px solid #29475b;
    border-bottom:1px solid #29475b;
    overflow:hidden;
}

.ops-seo-bi-chart-grid{
    position:absolute;
    inset:0;

    background-image:
        linear-gradient(
            to right,
            rgba(72,115,143,.14) 1px,
            transparent 1px
        ),
        linear-gradient(
            to bottom,
            rgba(72,115,143,.16) 1px,
            transparent 1px
        );

    background-size:
        12.5% 100%,
        100% 20%;
}

.ops-seo-bi-line-chart svg{
    position:absolute;
    inset:8px 0 8px 0;
    width:100%;
    height:calc(100% - 16px);
}

.ops-seo-bi-line-chart polyline{
    fill:none;
    stroke-width:2.4;
    vector-effect:non-scaling-stroke;
    filter:
        drop-shadow(
            0 0 4px rgba(80,160,255,.16)
        );
}

.ops-seo-bi-line-chart .line-blue{
    stroke:#2f91ff;
}

.ops-seo-bi-line-chart .line-cyan{
    stroke:#33ce8d;
}

.ops-seo-bi-line-chart .line-purple{
    stroke:#a166ff;
}

.ops-seo-bi-line-chart .line-gold{
    stroke:#ffb53d;
}

.ops-seo-bi-chart-dates{
    display:flex;
    justify-content:space-between;
    gap:4px;
    padding:6px 18px 12px;
    color:#647f92;
    font-size:7px;
}

.ops-seo-bi-empty{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
    pointer-events:none;
}

.ops-seo-bi-empty strong{
    color:#b4c4cf;
    font-size:11px;
}

.ops-seo-bi-empty span{
    color:#628096;
    font-size:8px;
}


/* keyword column chart */

.ops-seo-bi-column-chart{
    position:relative;
    height:275px;
    display:flex;
    align-items:flex-end;
    gap:9px;
    padding:18px 16px 10px;
    overflow:hidden;

    background-image:
        linear-gradient(
            to bottom,
            rgba(72,115,143,.16) 1px,
            transparent 1px
        );

    background-size:
        100% 20%;
}

.ops-seo-bi-column-item{
    height:100%;
    min-width:0;
    flex:1 1 0;
    display:grid;
    grid-template-rows:
        minmax(0,1fr)
        35px;
    gap:7px;
}

.ops-seo-bi-column-bars{
    display:flex;
    align-items:flex-end;
    justify-content:center;
    gap:4px;
    border-bottom:1px solid #29475b;
}

.ops-seo-bi-column-bars i{
    width:38%;
    min-height:2px;
    border-radius:2px 2px 0 0;
}

.ops-seo-bi-column-bars i.blue{
    background:
        linear-gradient(
            180deg,
            #42a9ff,
            #237bd5
        );
}

.ops-seo-bi-column-bars i.purple{
    background:
        linear-gradient(
            180deg,
            #b273ff,
            #7d48d7
        );
}

.ops-seo-bi-column-item>span{
    overflow:hidden;
    color:#6d8698;
    font-size:7px;
    text-align:center;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.ops-seo-bi-column-item.is-empty
.ops-seo-bi-column-bars i{
    height:2px;
    opacity:.35;
}


/* traffic */

.ops-seo-bi-traffic{
    min-height:300px;
    display:grid;
    grid-template-columns:
        minmax(180px,.9fr)
        minmax(180px,1.1fr);
    align-items:center;
    gap:25px;
    padding:22px;
}

.ops-seo-bi-donut{
    width:min(230px,100%);
    aspect-ratio:1;
    margin:auto;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    box-shadow:
        0 0 28px rgba(30,130,220,.12);
}

.ops-seo-bi-donut>div{
    width:55%;
    aspect-ratio:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#081724;
    box-shadow:
        inset 0 0 0 1px #1b3547;
}

.ops-seo-bi-donut span,
.ops-seo-bi-donut small{
    color:#718c9e;
    font-size:8px;
}

.ops-seo-bi-donut strong{
    margin:4px 0;
    color:#f2f7fa;
    font-size:23px;
}

.ops-seo-bi-traffic-list{
    display:grid;
    gap:10px;
}

.ops-seo-bi-traffic-list>div{
    display:grid;
    grid-template-columns:
        10px
        minmax(0,1fr)
        52px;
    align-items:center;
    gap:8px;
}

.ops-seo-bi-traffic-list i{
    width:9px;
    height:9px;
    border-radius:50%;
}

.ops-seo-bi-traffic-list span{
    color:#a6b7c2;
    font-size:9px;
}

.ops-seo-bi-traffic-list strong{
    color:#e8eff3;
    font-size:9px;
    text-align:right;
}

.ops-seo-bi-traffic-list .is-empty{
    opacity:.58;
}


/* landing table */

.ops-seo-bi-table{
    min-width:650px;
}

.ops-seo-bi-cellbar{
    position:relative;
    min-width:95px;
    height:21px;
    display:flex;
    align-items:center;
    overflow:hidden;
    border-radius:3px;
    background:#0a1925;
}

.ops-seo-bi-cellbar i{
    position:absolute;
    inset:0 auto 0 0;
    opacity:.85;
}

.ops-seo-bi-cellbar i.blue{
    background:
        linear-gradient(
            90deg,
            #25b7e8,
            #38d3f3
        );
}

.ops-seo-bi-cellbar i.purple{
    background:
        linear-gradient(
            90deg,
            #7648da,
            #aa73ff
        );
}

.ops-seo-bi-cellbar span{
    position:relative;
    z-index:2;
    padding:0 6px;
    color:#eaf3f7;
    font-size:8px;
}


/* keyword table */

.ops-seo-bi-keyword-table{
    margin-bottom:16px;
}

.ops-seo-bi-keyword-table
.ops-table{
    min-width:850px;
}


/* responsive */

@media(max-width:1150px){

    .ops-seo-bi-kpis{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .ops-seo-bi-grid-two{
        grid-template-columns:1fr;
    }

}

@media(max-width:680px){

    .ops-seo-bi-kpis{
        grid-template-columns:1fr 1fr;
        gap:8px;
    }

    .ops-seo-bi-kpi{
        min-height:92px;
        grid-template-columns:
            34px
            minmax(0,1fr);
        padding:10px;
    }

    .ops-seo-bi-kpi-icon{
        width:32px;
        height:32px;
        font-size:14px;
    }

    .ops-seo-bi-kpi-main>strong{
        font-size:19px;
    }

    .ops-seo-bi-spark{
        display:none;
    }

    .ops-seo-bi-connector{
        width:100%;
        min-width:0;
    }

    .ops-seo-bi-panel{
        min-height:310px;
    }

    .ops-seo-bi-line-chart{
        height:210px;
        margin-left:12px;
        margin-right:12px;
    }

    .ops-seo-bi-chart-dates{
        padding-left:12px;
        padding-right:12px;
    }

    .ops-seo-bi-column-chart{
        height:230px;
        overflow-x:auto;
    }

    .ops-seo-bi-column-item{
        flex:0 0 58px;
    }

    .ops-seo-bi-traffic{
        grid-template-columns:1fr;
        gap:18px;
        padding:18px 14px;
    }

    .ops-seo-bi-donut{
        max-width:190px;
    }

}

/* =========================================================
   UFABET MEMBER INFORMATION FOUNDATION V1
   Member profile + settings
   ========================================================= */

.ops-member-info-layout{
    display:grid;
    grid-template-columns:
        290px
        minmax(0,1fr);
    gap:11px;
    align-items:start;
}

.ops-member-info-directory{
    position:sticky;
    top:58px;
    min-height:520px;
}

.ops-member-info-search{
    display:grid;
    grid-template-columns:
        minmax(0,1fr)
        auto;
    gap:7px;
    padding:10px;
    border-bottom:1px solid #193245;
}

.ops-member-info-search input{
    width:100%;
    min-width:0;
    height:32px;
    padding:0 9px;
    border:1px solid #294356;
    border-radius:5px;
    outline:0;
    background:#081824;
    color:#dae5eb;
    font-size:9px;
}

.ops-member-info-list{
    max-height:610px;
    overflow:auto;
}

.ops-member-info-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:9px;
    min-height:54px;
    padding:9px 11px;
    border-bottom:1px solid #142c3c;
    color:inherit;
    text-decoration:none;
}

.ops-member-info-item:hover,
.ops-member-info-item.is-active{
    background:#0e2638;
}

.ops-member-info-item.is-active{
    box-shadow:
        inset 3px 0 0 #d0a548;
}

.ops-member-info-item>div{
    min-width:0;
}

.ops-member-info-item strong{
    display:block;
    overflow:hidden;
    color:#e6eef3;
    font-size:10px;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.ops-member-info-item span{
    display:block;
    overflow:hidden;
    margin-top:3px;
    color:#708a9b;
    font-size:8px;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.ops-member-info-item small{
    color:#718b9d;
    font-size:7px;
}

.ops-member-info-main{
    min-width:0;
    display:grid;
    gap:11px;
}

.ops-member-info-empty{
    min-height:430px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:6px;
    text-align:center;
}

.ops-member-info-empty strong{
    color:#c4d2da;
    font-size:13px;
}

.ops-member-info-empty span{
    color:#698496;
    font-size:9px;
}

.ops-member-info-summary{
    display:grid;
    grid-template-columns:
        repeat(4,minmax(0,1fr));
    gap:9px;
}

.ops-member-info-summary>div{
    min-width:0;
    padding:12px 13px;
    border:1px solid #1f394c;
    border-radius:7px;
    background:#091824;
}

.ops-member-info-summary span{
    display:block;
    color:#6f899a;
    font-size:8px;
}

.ops-member-info-summary strong{
    display:block;
    overflow:hidden;
    margin-top:5px;
    color:#e8f0f4;
    font-size:13px;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.ops-member-info-form{
    padding:14px;
}

.ops-member-info-section{
    padding:0 0 15px;
    margin-bottom:15px;
    border-bottom:1px solid #1a3244;
}

.ops-member-info-section>header{
    margin-bottom:11px;
}

.ops-member-info-section>header strong{
    display:block;
    color:#dce7ed;
    font-size:11px;
}

.ops-member-info-section>header span{
    display:block;
    margin-top:2px;
    color:#688294;
    font-size:8px;
}

.ops-member-info-form .ops-form-grid{
    display:grid;
    grid-template-columns:
        repeat(2,minmax(0,1fr));
    gap:10px;
}

.ops-member-info-wide{
    grid-column:1 / -1;
}

.ops-member-password-panel{
    min-width:0;
}

.ops-member-password-form{
    display:grid;
    grid-template-columns:
        minmax(240px,1fr)
        auto;
    align-items:end;
    gap:10px;
    padding:14px;
}

.ops-member-password-form label span{
    display:block;
    margin-bottom:5px;
    color:#7790a1;
    font-size:8px;
}

.ops-member-password-form input{
    width:100%;
}

.ops-member-info-readonly{
    min-height:120px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#71899a;
    font-size:9px;
}

.ops-member-connection-grid{
    display:grid;
    grid-template-columns:
        repeat(4,minmax(0,1fr));
    gap:1px;
    background:#1a3243;
}

.ops-member-connection-grid>div{
    min-width:0;
    padding:13px;
    background:#091824;
}

.ops-member-connection-grid span{
    display:block;
    color:#698395;
    font-size:8px;
}

.ops-member-connection-grid strong{
    display:block;
    overflow:hidden;
    margin-top:4px;
    color:#dce7ed;
    font-size:9px;
    text-overflow:ellipsis;
    white-space:nowrap;
}

@media(max-width:1050px){

    .ops-member-info-layout{
        grid-template-columns:
            240px
            minmax(0,1fr);
    }

    .ops-member-info-summary{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .ops-member-connection-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

}

@media(max-width:760px){

    .ops-member-info-layout{
        grid-template-columns:1fr;
    }

    .ops-member-info-directory{
        position:static;
        min-height:0;
    }

    .ops-member-info-list{
        max-height:260px;
    }

}

@media(max-width:560px){

    .ops-member-info-summary{
        grid-template-columns:
            1fr 1fr;
    }

    .ops-member-info-form .ops-form-grid{
        grid-template-columns:1fr;
    }

    .ops-member-info-wide{
        grid-column:auto;
    }

    .ops-member-password-form{
        grid-template-columns:1fr;
    }

    .ops-member-connection-grid{
        grid-template-columns:1fr 1fr;
    }

}

/* =========================================================
   UFABET MEMBER INFO
   WIDE DIRECTORY + COMPACT SETTINGS V1
   ========================================================= */

@media(min-width:901px){

    .ops-member-info-layout{
        grid-template-columns:
            minmax(0,1fr)
            410px;
        gap:12px;
    }

    .ops-member-info-directory{
        min-width:0;
        width:auto;
    }

    .ops-member-info-main{
        min-width:0;
        width:410px;
    }

    /*
     * Directory becomes the primary workspace.
     */

    .ops-member-info-list{
        max-height:680px;
    }

    .ops-member-info-item{
        min-height:60px;
        padding:11px 14px;
    }

    .ops-member-info-item strong{
        font-size:11px;
    }

    .ops-member-info-item span{
        font-size:9px;
    }

    /*
     * Settings becomes compact.
     */

    .ops-member-info-main
    .ops-member-info-summary{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
        gap:7px;
    }

    .ops-member-info-main
    .ops-member-info-summary>div{
        padding:10px 11px;
    }

    .ops-member-info-main
    .ops-member-info-form{
        padding:12px;
    }

    .ops-member-info-main
    .ops-member-info-form
    .ops-form-grid{
        grid-template-columns:1fr;
        gap:9px;
    }

    .ops-member-info-main
    .ops-member-info-wide{
        grid-column:auto;
    }

    .ops-member-info-main
    .ops-member-info-section{
        margin-bottom:12px;
        padding-bottom:12px;
    }

    .ops-member-info-main
    .ops-member-password-form{
        grid-template-columns:1fr;
        gap:9px;
        padding:12px;
    }

    .ops-member-info-main
    .ops-member-connection-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

}


/*
 * Medium screens:
 * keep directory wider than settings.
 */

@media(min-width:761px) and (max-width:1050px){

    .ops-member-info-layout{
        grid-template-columns:
            minmax(0,1fr)
            350px;
    }

    .ops-member-info-main{
        width:350px;
    }

}


/*
 * Mobile remains stacked.
 */

@media(max-width:760px){

    .ops-member-info-layout{
        grid-template-columns:1fr;
    }

    .ops-member-info-main{
        width:auto;
    }

}

/* =========================================================
   UFABET MEMBER HISTORY V1R1
   ========================================================= */

.ops-member-history-layout{
    display:grid;
    grid-template-columns:
        330px
        minmax(0,1fr);
    gap:12px;
    align-items:start;
}

.ops-member-history-directory{
    position:sticky;
    top:58px;
    min-width:0;
}

.ops-member-history-search{
    display:grid;
    grid-template-columns:
        minmax(0,1fr)
        auto;
    gap:7px;
    padding:10px;
    border-bottom:1px solid #1a3345;
}

.ops-member-history-search input{
    width:100%;
    min-width:0;
    height:32px;
    padding:0 9px;
    border:1px solid #294356;
    border-radius:5px;
    outline:0;
    background:#081824;
    color:#dce7ed;
    font-size:9px;
}

.ops-member-history-list{
    max-height:720px;
    overflow:auto;
}

.ops-member-history-member{
    min-height:58px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:9px;
    padding:10px 12px;
    border-bottom:1px solid #142c3c;
    color:inherit;
    text-decoration:none;
}

.ops-member-history-member:hover,
.ops-member-history-member.is-active{
    background:#0d2536;
}

.ops-member-history-member.is-active{
    box-shadow:
        inset 3px 0 0 #d1a74a;
}

.ops-member-history-member>div{
    min-width:0;
}

.ops-member-history-member strong{
    display:block;
    overflow:hidden;
    color:#e7eef2;
    font-size:10px;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.ops-member-history-member span{
    display:block;
    overflow:hidden;
    margin-top:3px;
    color:#718a9b;
    font-size:8px;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.ops-member-history-member small{
    color:#7891a0;
    font-size:7px;
}

.ops-member-history-main{
    min-width:0;
    display:grid;
    gap:11px;
}

.ops-member-history-empty{
    min-height:170px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
}

.ops-member-history-empty strong{
    display:block;
    color:#dbe5ea;
    font-size:14px;
}

.ops-member-history-empty span{
    display:block;
    margin-top:5px;
    color:#708a9b;
    font-size:9px;
}

.ops-member-history-empty-grid{
    display:grid;
    grid-template-columns:
        repeat(2,minmax(0,1fr));
    gap:11px;
}

.ops-member-history-profile{
    display:grid;
    grid-template-columns:
        repeat(6,minmax(0,1fr));
    gap:1px;
    background:#1a3345;
}

.ops-member-history-profile>div{
    min-width:0;
    padding:13px;
    background:#091925;
}

.ops-member-history-profile span{
    display:block;
    color:#698495;
    font-size:8px;
}

.ops-member-history-profile strong{
    display:block;
    overflow:hidden;
    margin-top:5px;
    color:#e9f0f4;
    font-size:11px;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.ops-member-history-kpis{
    display:grid;
    grid-template-columns:
        repeat(5,minmax(0,1fr));
    gap:8px;
}

.ops-member-history-kpis>section{
    min-width:0;
    padding:12px;
    border:1px solid #1f394c;
    border-radius:7px;
    background:#091925;
}

.ops-member-history-kpis span{
    display:block;
    color:#6d8798;
    font-size:8px;
}

.ops-member-history-kpis strong{
    display:block;
    margin-top:5px;
    color:#eef4f7;
    font-size:17px;
}

.ops-member-history-kpis small{
    display:block;
    margin-top:3px;
    color:#688294;
    font-size:7px;
}

.ops-member-history-jump{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
}

.ops-member-history-jump a{
    padding:6px 10px;
    border:1px solid #284557;
    border-radius:5px;
    background:#091925;
    color:#91a8b7;
    font-size:8px;
    text-decoration:none;
}

.ops-member-history-jump a:hover{
    color:#e6eef2;
    border-color:#45687e;
}

.ops-member-history-two{
    display:grid;
    grid-template-columns:
        repeat(2,minmax(0,1fr));
    gap:11px;
}

@media(max-width:1180px){

    .ops-member-history-profile{
        grid-template-columns:
            repeat(3,minmax(0,1fr));
    }

    .ops-member-history-kpis{
        grid-template-columns:
            repeat(3,minmax(0,1fr));
    }

}

@media(max-width:920px){

    .ops-member-history-layout{
        grid-template-columns:
            260px
            minmax(0,1fr);
    }

    .ops-member-history-two,
    .ops-member-history-empty-grid{
        grid-template-columns:1fr;
    }

}

@media(max-width:760px){

    .ops-member-history-layout{
        grid-template-columns:1fr;
    }

    .ops-member-history-directory{
        position:static;
    }

    .ops-member-history-list{
        max-height:260px;
    }

}

@media(max-width:560px){

    .ops-member-history-profile{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .ops-member-history-kpis{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

}

/* =========================================================
   UFABET CONTACT CHANNELS V1
   ========================================================= */

.ops-contact-create{
    margin-bottom:11px;
}

.ops-contact-form{
    display:grid;
    grid-template-columns:
        repeat(3,minmax(0,1fr));
    gap:10px;
    padding:14px;
}

.ops-contact-form label span,
.ops-contact-edit-form label span{
    display:block;
    margin-bottom:5px;
    color:#748d9e;
    font-size:8px;
}

.ops-contact-form input,
.ops-contact-form select,
.ops-contact-edit-form input,
.ops-contact-edit-form select{
    width:100%;
}

.ops-contact-form .ops-form-submit{
    grid-column:1 / -1;
}

.ops-contact-empty{
    min-height:220px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
    text-align:center;
}

.ops-contact-empty strong{
    color:#dce7ed;
    font-size:13px;
}

.ops-contact-empty span{
    color:#6e8798;
    font-size:9px;
}

.ops-contact-grid{
    display:grid;
    grid-template-columns:
        repeat(3,minmax(0,1fr));
    gap:10px;
    padding:12px;
}

.ops-contact-card{
    min-width:0;
    border:1px solid #1e394c;
    border-radius:8px;
    overflow:hidden;
    background:#091925;
}

.ops-contact-card-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
    padding:12px 13px;
    border-bottom:1px solid #193245;
}

.ops-contact-card-head>div{
    min-width:0;
}

.ops-contact-card-head>div>span{
    display:block;
    color:#d2a74c;
    font-size:8px;
    font-weight:800;
    letter-spacing:.08em;
}

.ops-contact-card-head strong{
    display:block;
    overflow:hidden;
    margin-top:4px;
    color:#e9f0f4;
    font-size:11px;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.ops-contact-card-body{
    display:grid;
    gap:1px;
    background:#163043;
}

.ops-contact-card-body>div{
    min-width:0;
    padding:10px 12px;
    background:#081722;
}

.ops-contact-card-body span{
    display:block;
    color:#688294;
    font-size:7px;
}

.ops-contact-card-body strong{
    display:block;
    overflow:hidden;
    margin-top:4px;
    color:#cbd9e1;
    font-size:9px;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.ops-contact-actions{
    display:flex;
    align-items:flex-start;
    gap:7px;
    padding:10px 12px;
}

.ops-contact-actions details{
    flex:1 1 auto;
}

.ops-contact-actions summary{
    list-style:none;
    cursor:pointer;
}

.ops-contact-actions summary::-webkit-details-marker{
    display:none;
}

.ops-contact-edit-form{
    display:grid;
    gap:9px;
    margin-top:10px;
    padding:11px;
    border:1px solid #203d50;
    border-radius:6px;
    background:#07141e;
}

.ops-contact-connection{
    display:grid;
    grid-template-columns:
        repeat(4,minmax(0,1fr));
    gap:1px;
    background:#1a3345;
}

.ops-contact-connection>div{
    min-width:0;
    padding:13px;
    background:#091925;
}

.ops-contact-connection span{
    display:block;
    color:#688294;
    font-size:8px;
}

.ops-contact-connection strong{
    display:block;
    overflow:hidden;
    margin-top:5px;
    color:#dce7ed;
    font-size:9px;
    text-overflow:ellipsis;
    white-space:nowrap;
}

@media(max-width:1100px){

    .ops-contact-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .ops-contact-form{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .ops-contact-connection{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

}

@media(max-width:650px){

    .ops-contact-grid,
    .ops-contact-form{
        grid-template-columns:1fr;
    }

    .ops-contact-connection{
        grid-template-columns:1fr 1fr;
    }

}

/* =========================================================
   UFABET PROMOTIONS V1
   ========================================================= */

.ops-promo-kpis{
    display:grid;
    grid-template-columns:
        repeat(4,minmax(0,1fr));
    gap:8px;
    margin-bottom:11px;
}

.ops-promo-kpis>section{
    min-width:0;
    padding:12px 14px;
    border:1px solid #1f394c;
    border-radius:7px;
    background:#091925;
}

.ops-promo-kpis span{
    display:block;
    color:#6d8798;
    font-size:8px;
}

.ops-promo-kpis strong{
    display:block;
    margin-top:4px;
    color:#edf4f7;
    font-size:18px;
}

.ops-promo-create{
    margin-bottom:11px;
}

.ops-promo-form{
    display:grid;
    grid-template-columns:
        repeat(3,minmax(0,1fr));
    gap:10px;
    padding:14px;
}

.ops-promo-form label span,
.ops-promo-edit label span{
    display:block;
    margin-bottom:5px;
    color:#728b9d;
    font-size:8px;
}

.ops-promo-form input,
.ops-promo-form select,
.ops-promo-form textarea,
.ops-promo-edit input,
.ops-promo-edit select,
.ops-promo-edit textarea{
    width:100%;
}

.ops-promo-span-2{
    grid-column:span 2;
}

.ops-promo-span-3{
    grid-column:1 / -1;
}

.ops-promo-empty{
    min-height:240px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
    text-align:center;
}

.ops-promo-empty strong{
    color:#dce7ed;
    font-size:13px;
}

.ops-promo-empty span{
    color:#70899a;
    font-size:9px;
}

.ops-promo-grid{
    display:grid;
    grid-template-columns:
        repeat(2,minmax(0,1fr));
    gap:11px;
    padding:12px;
}

.ops-promo-card{
    min-width:0;
    overflow:hidden;
    border:1px solid #203a4c;
    border-radius:8px;
    background:#091925;
}

.ops-promo-card-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
    padding:13px;
    border-bottom:1px solid #1a3345;
}

.ops-promo-card-head>div{
    min-width:0;
}

.ops-promo-card-head>div>span{
    display:block;
    color:#d0a64a;
    font-size:8px;
    font-weight:800;
    letter-spacing:.07em;
}

.ops-promo-card-head strong{
    display:block;
    overflow:hidden;
    margin-top:4px;
    color:#e9f0f4;
    font-size:12px;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.ops-promo-card-head small{
    display:block;
    margin-top:4px;
    color:#718a9a;
    font-size:7px;
}

.ops-promo-metrics{
    display:grid;
    grid-template-columns:
        repeat(4,minmax(0,1fr));
    gap:1px;
    background:#193345;
}

.ops-promo-metrics>div{
    min-width:0;
    padding:11px;
    background:#081722;
}

.ops-promo-metrics span,
.ops-promo-window span{
    display:block;
    color:#688294;
    font-size:7px;
}

.ops-promo-metrics strong{
    display:block;
    overflow:hidden;
    margin-top:4px;
    color:#e0e9ee;
    font-size:10px;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.ops-promo-window{
    display:grid;
    grid-template-columns:
        repeat(2,minmax(0,1fr));
    gap:1px;
    background:#183143;
    border-top:1px solid #183143;
}

.ops-promo-window>div{
    min-width:0;
    padding:10px 11px;
    background:#091925;
}

.ops-promo-window strong{
    display:block;
    overflow:hidden;
    margin-top:4px;
    color:#b9c9d3;
    font-size:8px;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.ops-promo-description{
    margin:0;
    padding:11px 13px;
    border-top:1px solid #183244;
    color:#8098a8;
    font-size:8px;
    line-height:1.6;
}

.ops-promo-actions{
    display:flex;
    align-items:flex-start;
    gap:7px;
    padding:10px 12px;
    border-top:1px solid #183244;
}

.ops-promo-actions>details{
    flex:1 1 auto;
}

.ops-promo-actions summary{
    list-style:none;
    cursor:pointer;
}

.ops-promo-actions summary::-webkit-details-marker{
    display:none;
}

.ops-promo-edit{
    display:grid;
    grid-template-columns:
        repeat(2,minmax(0,1fr));
    gap:9px;
    margin-top:10px;
    padding:11px;
    border:1px solid #213e50;
    border-radius:7px;
    background:#07141e;
}

.ops-promo-edit-wide{
    grid-column:1 / -1;
}

.ops-promo-connection{
    display:grid;
    grid-template-columns:
        repeat(3,minmax(0,1fr));
    gap:1px;
    background:#193345;
}

.ops-promo-connection>div{
    min-width:0;
    padding:13px;
    background:#091925;
}

.ops-promo-connection span{
    display:block;
    color:#688294;
    font-size:8px;
}

.ops-promo-connection strong{
    display:block;
    overflow:hidden;
    margin-top:5px;
    color:#dce7ed;
    font-size:9px;
    text-overflow:ellipsis;
    white-space:nowrap;
}

@media(max-width:1100px){

    .ops-promo-form{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .ops-promo-span-3{
        grid-column:1 / -1;
    }

    .ops-promo-grid{
        grid-template-columns:1fr;
    }

    .ops-promo-connection{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

}

@media(max-width:700px){

    .ops-promo-kpis{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .ops-promo-form{
        grid-template-columns:1fr;
    }

    .ops-promo-span-2,
    .ops-promo-span-3{
        grid-column:auto;
    }

    .ops-promo-metrics{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .ops-promo-connection{
        grid-template-columns:1fr;
    }

}

/* =========================================================
   UFABET PROMOTIONS FORM EXPLICIT LAYOUT V1R2
   Explicit field classes. No nth-of-type dependency.
   ========================================================= */

.ops-promo-form,
.ops-promo-edit{
    display:grid !important;
    grid-template-columns:
        repeat(12,minmax(0,1fr)) !important;
    gap:10px !important;
    align-items:end;
}


/* ROW 1
   Code = narrow
   Name = dominant
   Type = medium
*/

.ops-promo-form > .ops-promo-f-code,
.ops-promo-edit > .ops-promo-f-code{
    grid-column:1 / 3 !important;
    grid-row:1 !important;
}

.ops-promo-form > .ops-promo-f-name,
.ops-promo-edit > .ops-promo-f-name{
    grid-column:3 / 10 !important;
    grid-row:1 !important;
}

.ops-promo-form > .ops-promo-f-type,
.ops-promo-edit > .ops-promo-f-type{
    grid-column:10 / 13 !important;
    grid-row:1 !important;
}


/* ROW 2 */

.ops-promo-form > .ops-promo-f-reward-type,
.ops-promo-edit > .ops-promo-f-reward-type{
    grid-column:1 / 4 !important;
    grid-row:2 !important;
}

.ops-promo-form > .ops-promo-f-reward-value,
.ops-promo-edit > .ops-promo-f-reward-value{
    grid-column:4 / 7 !important;
    grid-row:2 !important;
}

.ops-promo-form > .ops-promo-f-currency,
.ops-promo-edit > .ops-promo-f-currency{
    grid-column:7 / 9 !important;
    grid-row:2 !important;
}

.ops-promo-form > .ops-promo-f-min-deposit,
.ops-promo-edit > .ops-promo-f-min-deposit{
    grid-column:9 / 13 !important;
    grid-row:2 !important;
}


/* ROW 3 */

.ops-promo-form > .ops-promo-f-max-reward,
.ops-promo-edit > .ops-promo-f-max-reward{
    grid-column:1 / 5 !important;
    grid-row:3 !important;
}

.ops-promo-form > .ops-promo-f-turnover,
.ops-promo-edit > .ops-promo-f-turnover{
    grid-column:5 / 8 !important;
    grid-row:3 !important;
}

.ops-promo-form > .ops-promo-f-claim,
.ops-promo-edit > .ops-promo-f-claim{
    grid-column:8 / 13 !important;
    grid-row:3 !important;
}


/* ROW 4 */

.ops-promo-form > .ops-promo-f-start,
.ops-promo-edit > .ops-promo-f-start{
    grid-column:1 / 5 !important;
    grid-row:4 !important;
}

.ops-promo-form > .ops-promo-f-end,
.ops-promo-edit > .ops-promo-f-end{
    grid-column:5 / 9 !important;
    grid-row:4 !important;
}

.ops-promo-form > .ops-promo-f-status,
.ops-promo-edit > .ops-promo-f-status{
    grid-column:9 / 11 !important;
    grid-row:4 !important;
}

.ops-promo-form > .ops-promo-f-sort,
.ops-promo-edit > .ops-promo-f-sort{
    grid-column:11 / 13 !important;
    grid-row:4 !important;
}


/* FULL WIDTH */

.ops-promo-form > .ops-promo-f-banner,
.ops-promo-edit > .ops-promo-f-banner{
    grid-column:1 / 13 !important;
    grid-row:5 !important;
}

.ops-promo-form > .ops-promo-f-description,
.ops-promo-edit > .ops-promo-f-description{
    grid-column:1 / 13 !important;
    grid-row:6 !important;
}

.ops-promo-form > .ops-promo-f-terms,
.ops-promo-edit > .ops-promo-f-terms{
    grid-column:1 / 13 !important;
    grid-row:7 !important;
}


/* SUBMIT */

.ops-promo-form > .ops-form-submit{
    grid-column:1 / 13 !important;
    grid-row:8 !important;
}

.ops-promo-edit > button.ops-promo-edit-wide{
    grid-column:1 / 13 !important;
}


/* Make the visual difference obvious */

.ops-promo-f-code input,
.ops-promo-f-currency input,
.ops-promo-f-sort input{
    min-width:0 !important;
}

.ops-promo-f-name input{
    min-width:0 !important;
}

.ops-promo-f-description textarea{
    min-height:90px;
}

.ops-promo-f-terms textarea{
    min-height:120px;
}


/* TABLET */

@media(max-width:900px){

    .ops-promo-form,
    .ops-promo-edit{
        grid-template-columns:
            repeat(2,minmax(0,1fr)) !important;
    }

    .ops-promo-form > label,
    .ops-promo-edit > label{
        grid-column:auto !important;
        grid-row:auto !important;
    }

    .ops-promo-form > .ops-promo-f-name,
    .ops-promo-form > .ops-promo-f-banner,
    .ops-promo-form > .ops-promo-f-description,
    .ops-promo-form > .ops-promo-f-terms,
    .ops-promo-edit > .ops-promo-f-name,
    .ops-promo-edit > .ops-promo-f-banner,
    .ops-promo-edit > .ops-promo-f-description,
    .ops-promo-edit > .ops-promo-f-terms{
        grid-column:1 / -1 !important;
    }

    .ops-promo-form > .ops-form-submit,
    .ops-promo-edit > button.ops-promo-edit-wide{
        grid-column:1 / -1 !important;
        grid-row:auto !important;
    }

}


/* MOBILE */

@media(max-width:620px){

    .ops-promo-form,
    .ops-promo-edit{
        display:block !important;
    }

    .ops-promo-form > label,
    .ops-promo-edit > label{
        display:block !important;
        margin-bottom:10px;
    }

    .ops-promo-form > .ops-form-submit,
    .ops-promo-edit > button.ops-promo-edit-wide{
        display:block !important;
        width:100% !important;
    }

}


/* =========================================================
   UFABET GLOBAL BACKOFFICE BACKGROUND V1
   Scope: all authenticated Backoffice work pages
   Sidebar and Topbar remain unchanged.
   ========================================================= */

.ops-main{
    position:relative;
    min-height:100vh;

    background-color:#03101b;

    background-image:
        linear-gradient(
            180deg,
            rgba(2,13,23,.22) 0%,
            rgba(2,13,23,.30) 42%,
            rgba(2,13,23,.42) 100%
        ),
        url('/assets/img/backoffice/ufabet-backoffice-bg-desktop.jpg');

    background-position:
        center center,
        center center;

    background-repeat:no-repeat;

    background-size:
        cover,
        cover;

    background-attachment:
        fixed,
        fixed;
}


/*
 * The Topbar stays fully independent and opaque.
 * Background therefore begins visually underneath it.
 */

.ops-main > .ops-topbar{
    position:sticky;
    background:#071522;
}


/*
 * Content stays structurally identical.
 * We only make its base transparent so the global stadium
 * can be seen around panels/forms/tables.
 */

.ops-main > .ops-content{
    position:relative;
    min-height:calc(100vh - 66px);
    background:transparent;
}


/*
 * Give the page content a very light atmospheric veil.
 * This is intentionally weak so the stadium remains visible.
 */

.ops-main > .ops-content::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(27,135,201,.05),
            rgba(2,12,21,0) 48%
        );
}

.ops-main > .ops-content > *{
    position:relative;
    z-index:1;
}


/* MOBILE / TABLET */

@media(max-width:900px){

    .ops-main{
        background-image:
            linear-gradient(
                180deg,
                rgba(2,13,23,.18) 0%,
                rgba(2,13,23,.28) 45%,
                rgba(2,13,23,.44) 100%
            ),
            url('/assets/img/backoffice/ufabet-backoffice-bg-mobile.jpg');

        background-position:
            center top,
            center top;

        background-size:
            cover,
            cover;

        background-attachment:
            scroll,
            scroll;
    }

}


/* =========================================================
   UFABET BACKOFFICE VISUAL TUNING SAFE V1
   Scope:
   - inner cards / forms / tables only
   - typography inside authenticated work area
   MUST NOT alter:
   - ops-main
   - ops-topbar
   - ops-content geometry
   - sidebar / brand / logo
   ========================================================= */


/* ---------------------------------------------------------
   1. PANEL SURFACES
   Make stadium visible through work surfaces.
   --------------------------------------------------------- */

.ops-content .ops-panel{
    background:rgba(7,23,36,.82);
    border-color:rgba(63,96,123,.52);
    box-shadow:
        0 9px 24px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.018);
}

.ops-content .ops-panel-head{
    background:rgba(8,26,42,.82);
    border-bottom-color:rgba(63,96,123,.45);
}

.ops-content .ops-form-grid{
    background:rgba(7,23,37,.78);
    border-color:rgba(62,96,123,.48);
}

.ops-content .ops-table{
    background:rgba(7,23,36,.76);
}

.ops-content .ops-table th{
    background:rgba(10,29,43,.82);
}

.ops-content .ops-subhead{
    background:rgba(8,29,44,.80);
}

.ops-content .ops-system-summary article{
    background:rgba(8,25,38,.78);
}


/* ---------------------------------------------------------
   2. KPI CARDS
   --------------------------------------------------------- */

.ops-content .ops-kpis article{
    background:
        linear-gradient(
            180deg,
            rgba(13,30,45,.82),
            rgba(8,24,37,.76)
        );

    border-color:rgba(58,91,116,.52);

    box-shadow:
        0 9px 22px rgba(0,0,0,.16),
        inset 0 1px 0 rgba(255,255,255,.018);
}

.ops-content .ops-kpis article.has-risk{
    background:
        linear-gradient(
            180deg,
            rgba(37,24,32,.84),
            rgba(16,23,34,.78)
        );
}


/* ---------------------------------------------------------
   3. PAGE TITLE TYPOGRAPHY
   --------------------------------------------------------- */

.ops-content .ops-page-head>div:first-child>span{
    color:#e0b45d;
    font-size:11.5px;
    font-weight:800;
    letter-spacing:.105em;
}

.ops-content .ops-page-head h1{
    color:#f3f7fa;
    font-size:34px;
    line-height:1.16;
    font-weight:800;

    text-shadow:
        0 2px 12px rgba(0,0,0,.24);
}

.ops-content .ops-page-head p{
    color:#a9bdcb;
    font-size:15px;
    line-height:1.5;
}


/* ---------------------------------------------------------
   4. PANEL TYPOGRAPHY
   --------------------------------------------------------- */

.ops-content .ops-panel-head>div>span{
    color:#cda354;
    font-size:9.5px;
    font-weight:800;
}

.ops-content .ops-panel-head h2{
    color:#eef4f8;
    font-size:15px;
    line-height:1.3;
    font-weight:750;
}

.ops-content .ops-panel-head>small{
    color:#9eb2c1;
    font-size:10px;
}


/* ---------------------------------------------------------
   5. KPI TYPOGRAPHY
   --------------------------------------------------------- */

.ops-content .ops-kpis span{
    color:#b5c5d0;
    font-size:11px;
}

.ops-content .ops-kpis strong{
    color:#f2f7fa;
    font-size:24px;
    font-weight:800;
}

.ops-content .ops-kpis small{
    color:#91a5b4;
    font-size:10px;
}


/* ---------------------------------------------------------
   6. TABLE TYPOGRAPHY
   --------------------------------------------------------- */

.ops-content .ops-table{
    font-size:12px;
}

.ops-content .ops-table th{
    color:#a8bbc8;
    font-size:10.5px;
    font-weight:800;
}

.ops-content .ops-table td{
    color:#c4d2db;
    font-size:11.5px;
}

.ops-content .ops-table strong{
    color:#edf4f7;
}


/* ---------------------------------------------------------
   7. FORM LABEL READABILITY
   --------------------------------------------------------- */

.ops-content .ops-form-grid label>span,
.ops-content .ops-filter label>span{
    color:#bdccd6;
    font-size:11px;
    font-weight:700;
}


/* ---------------------------------------------------------
   8. MOBILE
   More stadium visibility, without touching the background
   container or its positioning.
   --------------------------------------------------------- */

@media(max-width:680px){

    .ops-content .ops-panel{
        background:rgba(6,20,33,.70);
    }

    .ops-content .ops-panel-head{
        background:rgba(7,24,39,.73);
    }

    .ops-content .ops-form-grid{
        background:rgba(6,20,33,.68);
    }

    .ops-content .ops-table{
        background:rgba(6,20,33,.68);
    }

    .ops-content .ops-table th{
        background:rgba(8,26,40,.74);
    }

    .ops-content .ops-kpis article{
        background:
            linear-gradient(
                180deg,
                rgba(10,28,42,.74),
                rgba(7,22,34,.68)
            );
    }

    .ops-content .ops-system-summary article{
        background:rgba(7,23,35,.68);
    }

    .ops-content .ops-page-head h1{
        font-size:30px;
    }

    .ops-content .ops-page-head p{
        font-size:14px;
    }

    .ops-content .ops-panel-head h2{
        font-size:15px;
    }

    .ops-content .ops-table{
        font-size:12px;
    }

}


/* =========================================================
   UFABET INNER LOGO FIT V1
   Fix clipped sidebar logo only.
   ========================================================= */

.ops-brand{
    overflow:visible;
}

.ops-brand>a{
    flex:1 1 auto;
    width:auto;
    min-width:0;
    overflow:visible;
}

.ops-brand img{
    display:block;

    width:auto;
    height:auto;

    max-width:100%;
    max-height:58px;

    object-fit:contain;
    object-position:left center;

    flex:none;
}


/*
 * Smaller sidebar state.
 * Keep artwork proportional instead of cropping it.
 */
@media(max-width:960px){

    .ops-brand img{
        width:auto;
        height:auto;

        max-width:100%;
        max-height:52px;
    }

}