/* BLCK Studio final identity — black, navy, white and electric blue */
:root{
  --orange:#086bff;
  --orange-2:#0055d9;
  --blue:#2d8bff;
  --bg:#02050b;
  --panel:#07101d;
  --panel-2:#0a1526;
  --panel-3:#050b14;
  --line:rgba(101,151,221,.17);
  --line-strong:rgba(45,139,255,.42);
  --text:#f7f9ff;
  --muted:#8b98ac;
  --muted-2:#58677e;
  --shadow:0 24px 80px rgba(0,10,31,.34);
  --brand-blue:#086bff;
  --brand-blue-2:#2d8bff;
  --brand-cyan:#55bdff;
}

html{color-scheme:dark;background:#02050b}
body.app-body{
  background:#02050b!important;
  color:#f7f9ff!important;
  font-family:"Inter Tight",Inter,system-ui,-apple-system,"Segoe UI",sans-serif!important;
}
body.app-body .workspace{
  background:
    radial-gradient(circle at 78% -12%,rgba(8,107,255,.14),transparent 30%),
    radial-gradient(circle at 16% 110%,rgba(45,139,255,.07),transparent 32%),
    linear-gradient(180deg,#030711 0%,#02050b 100%)!important;
}
body.app-body .topbar{background:rgba(2,5,11,.88)!important;border-color:rgba(89,139,211,.13)!important}
body.app-body .sidebar{background:linear-gradient(180deg,#03060d 0%,#02040a 100%)!important;border-right:1px solid rgba(86,135,204,.13)!important}

/* Use the official BLCK Studio logo supplied by the client. */
body.app-body .blck-wordmark{
  width:106px!important;
  height:43px!important;
  min-width:106px!important;
  display:block!important;
  background:url("https://blckstudio.com.br/assets/images/blck-logo-transparente-20260514.png") center/contain no-repeat!important;
  filter:drop-shadow(0 8px 18px rgba(0,65,190,.18));
}
body.app-body .blck-wordmark>*{display:none!important}
body.app-body .brand-product{padding-left:12px!important}
body.app-body .brand-product strong{color:#fff!important}
body.app-body .brand-product small{color:#50617c!important}

.auth-body .blck-login-wordmark{
  width:145px!important;
  height:57px!important;
  display:block!important;
  background:url("https://blckstudio.com.br/assets/images/blck-logo-transparente-20260514.png") center/contain no-repeat!important;
  filter:drop-shadow(0 12px 26px rgba(0,75,215,.22));
}
.auth-body .blck-login-wordmark>*{display:none!important}

body.app-body .page-hero{align-items:center!important;margin-bottom:26px!important}
body.app-body .hero-copy h1{
  font-family:"Barlow Condensed","Inter Tight",sans-serif!important;
  font-size:clamp(45px,5vw,76px)!important;
  font-style:italic!important;
  font-weight:850!important;
  text-transform:uppercase!important;
  letter-spacing:-.035em!important;
  line-height:.88!important;
}
body.app-body .hero-copy h1 span{color:#1478ff!important}
body.app-body .hero-copy p{max-width:720px!important;color:#8997ac!important;font-size:12px!important}
body.app-body .kicker{color:#2d8bff!important}
body.app-body .kicker:before{background:#2d8bff!important}

body.app-body .btn-primary,
.auth-body .login-submit{
  background:linear-gradient(135deg,#1178ff,#0057e7)!important;
  color:#fff!important;
  border:1px solid rgba(95,171,255,.34)!important;
  box-shadow:0 14px 38px rgba(8,107,255,.23)!important;
}
body.app-body .btn-primary:hover,.auth-body .login-submit:hover{filter:brightness(1.08);box-shadow:0 18px 48px rgba(8,107,255,.32)!important}
body.app-body .btn-secondary,body.app-body .ghost{
  color:#d9e4f4!important;
  background:rgba(255,255,255,.025)!important;
  border-color:rgba(111,157,220,.18)!important;
}
body.app-body .btn-secondary:hover,body.app-body .ghost:hover{border-color:rgba(45,139,255,.5)!important;background:rgba(8,107,255,.08)!important;color:#fff!important}
body.app-body .ghost-danger:hover{border-color:rgba(232,91,105,.42)!important;color:#ff9aa5!important;background:rgba(232,91,105,.06)!important}

body.app-body .panel,
body.app-body .metric,
body.app-body .billing-card,
body.app-body .team-kpi,
body.app-body .integration-card,
body.app-body .client-row{
  background:linear-gradient(180deg,rgba(9,21,38,.97),rgba(5,12,23,.99))!important;
  border-color:rgba(104,151,217,.16)!important;
  box-shadow:0 18px 60px rgba(0,10,31,.22)!important;
}
body.app-body .panel:hover,body.app-body .metric:hover{border-color:rgba(45,139,255,.28)!important}
body.app-body .metric-icon,
body.app-body .team-kpi-icon,
body.app-body .integration-logo,
body.app-body .company-avatar{
  background:rgba(8,107,255,.11)!important;
  color:#7eb4ff!important;
  border:1px solid rgba(68,151,255,.2)!important;
}
body.app-body .metric-copy strong,body.app-body .team-kpi-copy strong{color:#fff!important}
body.app-body .metric-copy span,body.app-body .team-kpi-copy span{color:#718199!important}
body.app-body .metric-copy small,body.app-body .team-kpi-copy small{color:#526179!important}
body.app-body .team-kpi-accent{background:radial-gradient(circle at 100% 0,rgba(8,107,255,.16),transparent 38%),linear-gradient(180deg,rgba(9,25,47,.98),rgba(5,12,23,.99))!important}

body.app-body .plan-banner,
body.app-body .isolation-card{
  background:radial-gradient(circle at 100% 0,rgba(45,139,255,.18),transparent 36%),linear-gradient(135deg,#081a32,#040b16)!important;
  border-color:rgba(45,139,255,.3)!important;
}
body.app-body .usage-ring{background:conic-gradient(#1478ff calc(var(--p)*1%),rgba(255,255,255,.09) 0)!important}
body.app-body .usage-ring:after,body.app-body .usage-ring:before{background:#07101d!important}

body.app-body .data-table th{color:#65748b!important;border-color:rgba(107,151,215,.15)!important}
body.app-body .data-table td{border-color:rgba(98,143,207,.1)!important;color:#c5d1e2!important}
body.app-body .data-table tr:hover td{background:rgba(8,107,255,.035)!important}
body.app-body .user-cell strong,body.app-body .admin-access-copy strong{color:#fff!important}
body.app-body .user-cell small,body.app-body .admin-access-copy span{color:#617189!important}
body.app-body .scope-note{color:#7e8ca1!important}
body.app-body .scope-note i{background:#2d8bff!important;box-shadow:0 0 10px rgba(45,139,255,.65)}
body.app-body .seat-chip{color:#8ebdff!important;border-color:rgba(45,139,255,.2)!important;background:rgba(8,107,255,.055)!important}
body.app-body .role-chip.seller{color:#91bdff!important;background:rgba(8,107,255,.08)!important}
body.app-body .role-chip.admin{color:#fff!important;background:rgba(8,107,255,.13)!important}
body.app-body .role-chip.manager{color:#a6c8ff!important;background:rgba(55,125,226,.1)!important}
body.app-body .status-chip.active,body.app-body .state.ok{color:#75e1aa!important;background:rgba(43,202,126,.08)!important}
body.app-body .status-chip.inactive{color:#ef939d!important;background:rgba(232,91,105,.08)!important}
body.app-body .state.warn{color:#8fbcff!important;background:rgba(8,107,255,.08)!important}
body.app-body .state.off{color:#65748b!important;background:rgba(255,255,255,.025)!important}
body.app-body .portfolio-count,body.app-body .last-access{display:flex;flex-direction:column;gap:3px}
body.app-body .portfolio-count strong,body.app-body .last-access strong{color:#f4f8ff;font-size:11px}
body.app-body .portfolio-count small,body.app-body .last-access small{color:#58677c;font-size:8px}

body.app-body input,body.app-body textarea,body.app-body select{
  background:#040a13!important;
  color:#f3f7ff!important;
  border-color:rgba(104,151,217,.18)!important;
}
body.app-body input:focus,body.app-body textarea:focus,body.app-body select:focus{
  border-color:rgba(45,139,255,.72)!important;
  box-shadow:0 0 0 4px rgba(8,107,255,.1)!important;
}
body.app-body input::placeholder,body.app-body textarea::placeholder{color:#48566b!important}
body.app-body label{color:#7e8ca2!important}

body.app-body .modal{background:linear-gradient(180deg,#0a1628,#050c17)!important;border-color:rgba(110,158,225,.2)!important;box-shadow:0 38px 120px rgba(0,0,0,.72)!important}
body.app-body .modal-head,body.app-body .modal-foot{border-color:rgba(103,150,216,.14)!important}
body.app-body .modal-close{background:rgba(255,255,255,.04)!important;color:#8190a6!important}
body.app-body .modal-section{background:rgba(255,255,255,.018)!important;border-color:rgba(102,150,218,.14)!important}
body.app-body .modal-eyebrow{display:block;color:#5aa2ff;font-size:8px;font-weight:850;letter-spacing:.18em;margin-bottom:7px}
body.app-body .modal-helper{margin:0;color:#78879d;font-size:10px;line-height:1.62}
body.app-body .modal-helper b{color:#b8cdf0}
body.app-body .modal-xl{width:min(1080px,100%)}
body.app-body .modal-total{margin-right:auto;color:#718097;font-size:10px}
body.app-body .modal-total strong{color:#fff}
body.app-body .plan-option{background:rgba(255,255,255,.018)!important;border-color:rgba(103,150,216,.14)!important}
body.app-body .plan-option:has(input:checked){border-color:rgba(45,139,255,.68)!important;background:rgba(8,107,255,.1)!important;box-shadow:0 0 0 3px rgba(8,107,255,.08)!important}
body.app-body .plan-option b{color:#74adff!important}
body.app-body .plan-option em{display:block;margin-top:7px;color:#60718a;font-size:8px;font-style:normal}
body.app-body .plan-option-top{display:flex;align-items:center;justify-content:space-between;gap:12px}

body.app-body .integration-readiness{min-width:145px;padding:13px 16px;border:1px solid rgba(45,139,255,.22);border-radius:15px;background:rgba(8,107,255,.07);display:flex;flex-direction:column;align-items:flex-end}
body.app-body .integration-readiness b{font-size:22px;color:#fff}
body.app-body .integration-readiness small{color:#66758b;font-size:8px;margin-top:3px}
body.app-body .tenant-security-chip{margin-left:auto;padding:6px 9px;border-radius:999px;background:rgba(8,107,255,.08);color:#8fbcff;font-weight:750;white-space:nowrap}
body.app-body .integration-detail em{font-style:normal;color:#a7b7cc;font-weight:650;text-align:right}
body.app-body .integration-error{display:block;margin-top:12px;padding-top:10px;border-top:1px solid rgba(232,91,105,.14)}
body.app-body .integration-checklist ul{margin:0;padding-left:18px;color:#78879d;font-size:10px;line-height:1.8}

body.app-body .context-bar{display:flex;align-items:center;gap:12px;margin:0 clamp(26px,4vw,62px);padding:10px 14px;border:1px solid rgba(45,139,255,.25);border-top:0;border-radius:0 0 13px 13px;background:linear-gradient(90deg,rgba(8,107,255,.12),rgba(8,107,255,.035));color:#8fa5c2;font-size:9px}
body.app-body .context-bar strong{color:#fff}
body.app-body .context-bar form{margin-left:auto}
body.app-body .context-bar button{border:0;background:transparent;color:#83b5ff;font-weight:800;cursor:pointer;font-size:9px}

body.app-body .client-row{grid-template-columns:42px minmax(180px,1fr) 105px 88px 100px 120px 95px auto!important}
body.app-body .client-access-form{display:flex;justify-content:flex-end}
body.app-body .client-access-form .btn{white-space:nowrap}

/* Authentication screen */
.auth-shell{background:radial-gradient(circle at 78% 22%,rgba(8,107,255,.2),transparent 30%),radial-gradient(circle at 18% 82%,rgba(45,139,255,.08),transparent 32%),linear-gradient(135deg,#02050b,#050b16 58%,#02050b)!important}
.auth-orbit{border-color:rgba(45,139,255,.22)!important}
.auth-particles i{background:#2d8bff!important;box-shadow:0 0 20px rgba(8,107,255,.75)!important}
.auth-body .login-copy h1{font-family:"Barlow Condensed","Inter Tight",sans-serif!important;font-size:clamp(52px,6.7vw,100px)!important;line-height:.84!important}
.auth-body .login-copy h1 strong{color:#1478ff!important}
.auth-body .login-copy p{color:#8391a5!important}
.auth-body .signal-dot{background:#2d8bff!important;box-shadow:0 0 12px rgba(8,107,255,.72)!important}
.auth-body .login-card.auth-card-modern{background:linear-gradient(180deg,rgba(9,21,38,.97),rgba(4,10,20,.99))!important;border-color:rgba(104,151,217,.2)!important}
.auth-body .login-card.auth-card-modern:before{background:linear-gradient(90deg,transparent,#1478ff,transparent)!important}
.auth-body .login-panel-glow{background:radial-gradient(circle,rgba(8,107,255,.25),transparent 66%)!important}
.auth-body .login-mini-icon{color:#81b5ff!important;background:rgba(8,107,255,.1)!important;border-color:rgba(45,139,255,.25)!important}
.auth-body .login-eyebrow{color:#6da8ff!important}
.auth-body .auth-input-wrap input:focus{border-color:rgba(45,139,255,.72)!important;box-shadow:0 0 0 4px rgba(8,107,255,.1)!important}
.auth-body .auth-input-wrap:focus-within .auth-input-icon{color:#7eb4ff!important}

/* Mining remains cinematic but follows the blue brand. */
body.app-body .mining-stage-card{border-color:rgba(45,139,255,.28)!important;background:radial-gradient(circle at 25% 45%,rgba(8,107,255,.19),transparent 35%),linear-gradient(135deg,#020711,#071326)!important}
body.app-body .mine-glow{background:radial-gradient(circle,rgba(8,107,255,.3),transparent 65%)!important}
body.app-body .scan-ring{border-color:rgba(45,139,255,.3)!important}
body.app-body .mine-sparks i{background:#63bcff!important;box-shadow:0 0 14px #1478ff!important}
body.app-body .mining-progress-bar{background:linear-gradient(90deg,#0056e5,#3aa7ff)!important;box-shadow:0 0 22px rgba(8,107,255,.38)!important}
body.app-body .mining-step.active{border-color:rgba(45,139,255,.44)!important;background:rgba(8,107,255,.08)!important}
body.app-body .mining-step.active b,body.app-body .mining-step.active .step-state{color:#76afff!important}

@media(max-width:1100px){
  body.app-body .client-row{grid-template-columns:42px minmax(160px,1fr) 90px 90px auto!important}
  body.app-body .client-row>.client-integrations,body.app-body .client-row>.client-monthly,body.app-body .client-row>.status-chip{display:none}
}
@media(max-width:850px){
  body.app-body .context-bar{margin:0 18px}
  body.app-body .integration-readiness{align-items:flex-start}
}
@media(max-width:620px){
  body.app-body .blck-wordmark{width:96px!important;height:39px!important;min-width:96px!important}
  body.app-body .brand-product{display:none!important}
  body.app-body .hero-copy h1{font-size:48px!important}
  body.app-body .tenant-security-chip{display:none}
}