/* Bingo Web PRO V8 visual layer.
   Layout-only overrides. Draw and TV screens do not load this file. */
:root{
  --v8-bg:#f5faf7;
  --v8-bg-2:#eef7f2;
  --v8-panel:#ffffff;
  --v8-panel-2:#f8fcfa;
  --v8-panel-3:#edf8f2;
  --v8-line:#dcebe2;
  --v8-line-2:#c9dfd2;
  --v8-text:#0c1f16;
  --v8-muted:#60706a;
  --v8-soft:#263a30;
  --v8-green:#18ad61;
  --v8-green-2:#0b7f45;
  --v8-green-soft:#e7f8ef;
  --v8-red:#d92d3d;
  --v8-yellow:#d69e16;
  --v8-radius:18px;
  --v8-radius-sm:12px;
  --v8-shadow:0 18px 42px rgba(17,67,42,.10);
  --v8-font:Inter,"Segoe UI",Roboto,Arial,sans-serif;
}

html,body:not(.bingo-screen){
  min-height:100%;
  background:
    radial-gradient(circle at 16% 0%, rgba(24,173,97,.12), transparent 28%),
    linear-gradient(135deg,#ffffff 0%,#f6fbf8 48%,#eef7f2 100%)!important;
  color:var(--v8-text)!important;
  font-family:var(--v8-font)!important;
  letter-spacing:0!important;
}

body:not(.bingo-screen) *{font-family:var(--v8-font)!important;letter-spacing:0!important}
body:not(.bingo-screen) a{color:inherit;text-decoration:none!important}
body:not(.bingo-screen) b,
body:not(.bingo-screen) strong,
body:not(.bingo-screen) h1,
body:not(.bingo-screen) h2,
body:not(.bingo-screen) h3{color:var(--v8-text)!important}

body:not(.bingo-screen) .wrap,
body:not(.bingo-screen) .client-wrap,
body:not(.bingo-screen) .seller-wrap,
body:not(.bingo-screen) .finance-app,
body:not(.bingo-screen) .page,
body:not(.bingo-screen) .report-page{
  max-width:1180px!important;
  width:100%!important;
  margin:0 auto!important;
  padding:82px 18px 38px!important;
  background:transparent!important;
}

body:not(.bingo-screen) .client-top,
body:not(.bingo-screen) .seller-head,
body:not(.bingo-screen) .header,
body:not(.bingo-screen) .finance-top,
body:not(.bingo-screen) .report-toolbar,
body:not(.bingo-screen) .page-heading{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:14px!important;
  min-height:56px!important;
  margin:0 0 18px!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}

body:not(.bingo-screen) .client-brand,
body:not(.bingo-screen) .seller-title-row,
body:not(.bingo-screen) .page-title-block{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  min-width:0!important;
}

body:not(.bingo-screen) .brand,
body:not(.bingo-screen) .page-title,
body:not(.bingo-screen) .client-brand h1,
body:not(.bingo-screen) .seller-title-block h1,
body:not(.bingo-screen) .seller-head h1,
body:not(.bingo-screen) .report-toolbar h1,
body:not(.bingo-screen) .finance-title,
body:not(.bingo-screen) h1{
  margin:0!important;
  color:var(--v8-text)!important;
  font-size:clamp(24px,3vw,38px)!important;
  line-height:1.04!important;
  font-weight:900!important;
}

body:not(.bingo-screen) .client-brand span,
body:not(.bingo-screen) .seller-title-block p,
body:not(.bingo-screen) .muted,
body:not(.bingo-screen) .muted-small,
body:not(.bingo-screen) .mini,
body:not(.bingo-screen) p,
body:not(.bingo-screen) .report-toolbar p{
  color:var(--v8-muted)!important;
}

body:not(.bingo-screen) .brand-icon,
body:not(.bingo-screen) .quick-icon,
body:not(.bingo-screen) .config-icon{
  width:48px!important;
  height:48px!important;
  min-width:48px!important;
  border-radius:16px!important;
  background:linear-gradient(145deg,var(--v8-green),var(--v8-green-2))!important;
  color:#fff!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-shadow:0 14px 34px rgba(32,199,106,.22)!important;
  font-weight:900!important;
  font-size:20px!important;
  margin:0 0 10px!important;
}

body:not(.bingo-screen) .card,
body:not(.bingo-screen) .seller-card,
body:not(.bingo-screen) .hero-card,
body:not(.bingo-screen) .quick-card,
body:not(.bingo-screen) .manager-card,
body:not(.bingo-screen) .report,
body:not(.bingo-screen) .report-shell,
body:not(.bingo-screen) .section,
body:not(.bingo-screen) .finance-hero,
body:not(.bingo-screen) .metric,
body:not(.bingo-screen) .winner-card,
body:not(.bingo-screen) .config-option,
body:not(.bingo-screen) .resume-card,
body:not(.bingo-screen) .seller-row,
body:not(.bingo-screen) .qr-box,
body:not(.bingo-screen) .mini-summary{
  background:#fff!important;
  color:var(--v8-text)!important;
  border:1px solid var(--v8-line)!important;
  border-radius:var(--v8-radius)!important;
  box-shadow:var(--v8-shadow)!important;
  backdrop-filter:none!important;
}

body:not(.bingo-screen) .card,
body:not(.bingo-screen) .seller-card,
body:not(.bingo-screen) .hero-card,
body:not(.bingo-screen) .report,
body:not(.bingo-screen) .finance-hero{
  padding:22px!important;
  margin:0 0 16px!important;
}

body:not(.bingo-screen) .hero-card:before{display:none!important}

body:not(.bingo-screen) .quick-grid,
body:not(.bingo-screen) .dashboard-grid,
body:not(.bingo-screen) .kpi-grid,
body:not(.bingo-screen) .logs-grid{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr))!important;
  gap:14px!important;
}

body:not(.bingo-screen) .quick-card,
body:not(.bingo-screen) .config-option{
  min-height:132px!important;
  padding:18px!important;
  transition:transform .18s ease,border-color .18s ease,background .18s ease!important;
}
body:not(.bingo-screen) .quick-card:hover,
body:not(.bingo-screen) .config-option:hover{
  transform:translateY(-2px)!important;
  border-color:rgba(32,199,106,.55)!important;
  background:#f7fcf9!important;
}
body:not(.bingo-screen) .quick-card b,
body:not(.bingo-screen) .config-option b{display:block!important;font-size:16px!important;margin:0 0 5px!important;color:var(--v8-text)!important}
body:not(.bingo-screen) .quick-card span,
body:not(.bingo-screen) .config-option span{display:block!important;color:var(--v8-muted)!important;font-size:13px!important;line-height:1.35!important}

body:not(.bingo-screen) input,
body:not(.bingo-screen) select,
body:not(.bingo-screen) textarea{
  width:100%!important;
  min-height:46px!important;
  background:rgba(255,255,255,.92)!important;
  color:#101820!important;
  border:1px solid var(--v8-line-2)!important;
  border-radius:12px!important;
  padding:12px 13px!important;
  font-weight:750!important;
  box-shadow:none!important;
  outline:none!important;
}
body:not(.bingo-screen) textarea{min-height:100px!important}
body:not(.bingo-screen) input:focus,
body:not(.bingo-screen) select:focus,
body:not(.bingo-screen) textarea:focus{
  border-color:var(--v8-green)!important;
  box-shadow:0 0 0 4px rgba(32,199,106,.18)!important;
}
body:not(.bingo-screen) label{color:var(--v8-text)!important;font-weight:850!important}

body:not(.bingo-screen) .btn,
body:not(.bingo-screen) button,
body:not(.bingo-screen) input[type=submit]{
  min-height:44px!important;
  border-radius:12px!important;
  border:1px solid rgba(32,199,106,.32)!important;
  background:linear-gradient(145deg,var(--v8-green),var(--v8-green-2))!important;
  color:#fff!important;
  box-shadow:0 14px 30px rgba(32,199,106,.18)!important;
  font-weight:900!important;
}
body:not(.bingo-screen) .btn.dark,
body:not(.bingo-screen) .btn.light,
body:not(.bingo-screen) .logout-btn{
  background:#fff!important;
  color:var(--v8-text)!important;
  border-color:var(--v8-line)!important;
  box-shadow:none!important;
}
body:not(.bingo-screen) .btn.red,
body:not(.bingo-screen) .btn.danger,
body:not(.bingo-screen) .danger,
body:not(.bingo-screen) .btn-remove,
body:not(.bingo-screen) .btn-sales-close,
body:not(.bingo-screen) .btn-finalize{
  background:linear-gradient(145deg,#ef4b58,#bd1f30)!important;
  border-color:#efb7bd!important;
  color:#fff!important;
}

body:not(.bingo-screen) .menu-fab{
  position:fixed!important;
  left:18px!important;
  top:18px!important;
  z-index:10001!important;
  width:46px!important;
  height:46px!important;
  border-radius:14px!important;
  background:linear-gradient(145deg,var(--v8-green),var(--v8-green-2))!important;
  color:#fff!important;
  border:1px solid #c7e9d4!important;
  box-shadow:0 16px 34px rgba(24,173,97,.22)!important;
}

body:not(.bingo-screen) .side-menu{
  width:300px!important;
  padding:82px 16px 18px!important;
  background:#fff!important;
  border-right:1px solid var(--v8-line)!important;
  box-shadow:24px 0 60px rgba(17,67,42,.14)!important;
  backdrop-filter:none!important;
  transform:translateX(-330px)!important;
}
body:not(.bingo-screen) .side-menu.open{transform:translateX(0)!important}
body:not(.bingo-screen) .side-menu-title{
  color:var(--v8-text)!important;
  font-size:18px!important;
  font-weight:900!important;
  margin:0 0 14px!important;
}
body:not(.bingo-screen) .side-menu a,
body:not(.bingo-screen) .side-menu button{
  min-height:46px!important;
  margin:0 0 9px!important;
  background:#fff!important;
  color:var(--v8-text)!important;
  border:1px solid var(--v8-line)!important;
  border-radius:13px!important;
  box-shadow:none!important;
}
body:not(.bingo-screen) .side-menu a.active,
body:not(.bingo-screen) .side-menu button.active{
  background:linear-gradient(145deg,rgba(32,199,106,.95),rgba(15,142,77,.95))!important;
  color:#fff!important;
}
body:not(.bingo-screen) .side-menu a:hover,
body:not(.bingo-screen) .side-menu button:hover{
  background:#effaf4!important;
  color:#0b3b24!important;
  border-color:rgba(32,199,106,.42)!important;
}
body:not(.bingo-screen) .side-menu a.danger,
body:not(.bingo-screen) .side-menu button.danger{
  color:#ffd7dc!important;
  border-color:rgba(255,77,95,.25)!important;
  background:#fff5f6!important;
}

body:not(.bingo-screen) table{
  background:#fff!important;
  color:var(--v8-text)!important;
  border-radius:14px!important;
  overflow:hidden!important;
  border-collapse:separate!important;
  border-spacing:0!important;
}
body:not(.bingo-screen) th{
  background:#e8f7ef!important;
  color:#0b3b24!important;
  border-color:var(--v8-line)!important;
}
body:not(.bingo-screen) td{
  color:var(--v8-soft)!important;
  border-color:var(--v8-line)!important;
  background:#fff!important;
}

body:not(.bingo-screen) .status-pill.ok,
body:not(.bingo-screen) .ok,
body:not(.bingo-screen) .notice-ok,
body:not(.bingo-screen) .event-state-badge,
body:not(.bingo-screen) .sales-badge:not(.closed){
  background:#e8f8ef!important;
  color:#087144!important;
  border:1px solid #bfe8cf!important;
}
body:not(.bingo-screen) .status-pill.bad,
body:not(.bingo-screen) .bad,
body:not(.bingo-screen) .notice-err,
body:not(.bingo-screen) .sales-badge.closed{
  background:#fff1f2!important;
  color:#b42332!important;
  border:1px solid #ffc9cf!important;
}

body.login-page:not(.bingo-screen){
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:100vh!important;
  padding:22px!important;
}
body:not(.bingo-screen) .login-panel,
body:not(.bingo-screen) .login.card,
body:not(.bingo-screen) .login{
  width:min(380px,100%)!important;
  max-width:380px!important;
  margin:0!important;
  padding:32px 28px!important;
  background:#fff!important;
  border:1px solid var(--v8-line-2)!important;
  border-radius:20px!important;
  box-shadow:var(--v8-shadow)!important;
  color:var(--v8-text)!important;
  backdrop-filter:none!important;
}
body:not(.bingo-screen) .login-panel h2,
body:not(.bingo-screen) .login h2{
  font-size:30px!important;
  text-align:center!important;
  margin:0 0 8px!important;
}
body:not(.bingo-screen) .login-panel .muted{text-align:center!important;margin-bottom:22px!important}
body:not(.bingo-screen) .login-logo{
  width:72px!important;
  height:72px!important;
  margin:0 auto 18px!important;
  border-radius:20px!important;
  background:linear-gradient(145deg,var(--v8-green),var(--v8-green-2))!important;
  color:#fff!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
body:not(.bingo-screen) .login-logo.is-hidden,
body:not(.bingo-screen) .login-client-logo.is-hidden{display:none!important}
body.login-page.has-login-banner:before{
  background:rgba(255,255,255,.78)!important;
  backdrop-filter:blur(3px)!important;
}

body:not(.bingo-screen) .seller-stats-grid,
body:not(.bingo-screen) .summary,
body:not(.bingo-screen) .grid,
body:not(.bingo-screen) .forms{
  gap:14px!important;
}
body:not(.bingo-screen) .stat-value,
body:not(.bingo-screen) .value-big,
body:not(.bingo-screen) .seller-money,
body:not(.bingo-screen) .seller-total{
  color:#0b7f45!important;
  font-weight:950!important;
}

body:not(.bingo-screen) .seller-check,
body:not(.bingo-screen) .report-select-box,
body:not(.bingo-screen) .row-card{
  background:#f7fcf9!important;
  border-color:var(--v8-line)!important;
  color:var(--v8-text)!important;
}

body:not(.bingo-screen) .seller-check input[type=checkbox],
body:not(.bingo-screen) .report-select-box input[type=checkbox]{
  accent-color:var(--v8-green)!important;
  min-height:16px!important;
}

@media(max-width:860px){
  body:not(.bingo-screen) .wrap,
  body:not(.bingo-screen) .client-wrap,
  body:not(.bingo-screen) .seller-wrap,
  body:not(.bingo-screen) .finance-app,
  body:not(.bingo-screen) .page,
  body:not(.bingo-screen) .report-page{
    max-width:520px!important;
    padding:78px 12px 28px!important;
  }
  body:not(.bingo-screen) .client-top,
  body:not(.bingo-screen) .seller-head,
  body:not(.bingo-screen) .header,
  body:not(.bingo-screen) .finance-top,
  body:not(.bingo-screen) .report-toolbar,
  body:not(.bingo-screen) .page-heading{
    align-items:flex-start!important;
    flex-direction:column!important;
    gap:8px!important;
  }
  body:not(.bingo-screen) .quick-grid,
  body:not(.bingo-screen) .dashboard-grid,
  body:not(.bingo-screen) .kpi-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:12px!important;
  }
  body:not(.bingo-screen) .quick-card{
    min-height:126px!important;
    padding:15px!important;
  }
  body:not(.bingo-screen) .card,
  body:not(.bingo-screen) .seller-card,
  body:not(.bingo-screen) .hero-card,
  body:not(.bingo-screen) .report,
  body:not(.bingo-screen) .finance-hero{
    padding:16px!important;
    border-radius:16px!important;
  }
  body:not(.bingo-screen) table{
    display:block!important;
    overflow-x:auto!important;
    white-space:nowrap!important;
  }
  body:not(.bingo-screen) .side-menu{
    width:84vw!important;
    max-width:320px!important;
    transform:translateX(-104vw)!important;
  }
}

@media(max-width:390px){
  body:not(.bingo-screen) .quick-grid,
  body:not(.bingo-screen) .dashboard-grid,
  body:not(.bingo-screen) .kpi-grid{gap:10px!important}
  body:not(.bingo-screen) .quick-card{padding:13px!important;min-height:118px!important}
  body:not(.bingo-screen) .quick-card b{font-size:14px!important}
  body:not(.bingo-screen) .quick-card span{font-size:12px!important}
}