:root {
  --blue: #0073ea;
  --blue-dark: #0757ad;
  --blue-soft: #eaf3ff;
  --line: #d8deea;
  --line-strong: #c7cfdd;
  --text: #20243a;
  --muted: #667085;
  --surface: #ffffff;
  --surface-soft: #f6f8fb;
  --page: #f3f5f9;
  --green: #00a86b;
  --green-soft: #e6f7ef;
  --red: #d83a52;
  --red-soft: #fdecef;
  --orange: #f97316;
  --yellow: #e5ad00;
  --shadow: 0 20px 48px rgba(24, 32, 56, 0.08);
}

body:not(.official-open) {
  min-height: 100vh;
  overflow-x: hidden;
  color: #f8fafc;
  background:
    radial-gradient(circle at 47% 8%, rgba(30, 91, 255, 0.22), transparent 26%),
    radial-gradient(circle at 85% 92%, rgba(37, 99, 235, 0.14), transparent 34%),
    linear-gradient(135deg, #020817 0%, #071225 48%, #020617 100%);
}

body:not(.official-open) .portal-header,
body:not(.official-open) .portal-hero:not(.portal-login-screen) {
  display: none;
}

.portal-login-screen {
  position: relative;
  display: grid;
  grid-template-columns: minmax(560px, 1fr) 1px minmax(500px, 0.9fr);
  min-height: 100vh;
  padding: 50px 67px 58px 49px;
  overflow: hidden;
  background:
    radial-gradient(circle at 44% 8%, rgba(32, 91, 255, 0.24), transparent 28%),
    radial-gradient(circle at 48% 56%, rgba(37, 99, 235, 0.09), transparent 34%),
    linear-gradient(135deg, #020817 0%, #071225 48%, #020617 100%);
}

.portal-login-screen::before {
  content: "";
  position: absolute;
  left: 33%;
  top: 16%;
  width: 56vw;
  height: 86vh;
  border: 1px solid rgba(37, 99, 235, 0.16);
  border-radius: 50%;
  opacity: 0.68;
}

.portal-login-screen::after {
  content: "";
  position: absolute;
  inset: 1;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 45% 9%, rgba(37, 99, 235, 0.9) 0 2px, transparent 3px),
    radial-gradient(circle at 58% 76%, rgba(37, 99, 235, 0.5) 0 1px, transparent 2px),
	radial-gradient(circle at 58% 76%, rgba(37, 99, 235, 0.8) 0 2px, transparent 2px),
	radial-gradient(circle at 56% 75%, rgba(37, 99, 235, 0.7) 0 2px, transparent 2px),
    radial-gradient(circle at 30% 55%, rgba(37, 99, 235, 0.42) 0 3px, transparent 1px);
}

.portal-login-left {
  position: relative;
  left: 20px;
  z-index: 1;
  min-height: calc(100vh - 108px);
}

.portal-login-brand {
  display: flex;
  align-items: center;
  gap: 30px;
}

.phone-logo {
  position: relative;
  left: 20px;
  top: -0px;
  width: 40px;
  height: 67px;
  border: 6px solid #1f6bff;
  border-radius: 8px;
  background: linear-gradient(#071225, #0b1730);
  box-shadow: 0 18px 44px rgba(31, 107, 255, 0.28);
}

.phone-logo::before {
  content: "";
  position: absolute;
  left: 8px;
  top: -5px;
  width: 13px;
  height: 3px;
  border-radius: 999px;
  background: #020817;
}

.phone-logo span {
  position: absolute;
  left: 11px;
  bottom: -5px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #020817;
}

.portal-login-brand strong {
  display: block;
  color: #f8fafc;
  font-size: 35px;
  font-style: italic;
  font-weight: 950;
  line-height: 1;
  letter-spacing: 0;
}

.portal-login-brand strong span {
  color: #1f6bff;
}

.portal-login-brand small {
  display: block;
  margin-top: 6px;
  color: rgba(226, 232, 240, 0.84);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.52em;
}

.portal-login-copy {
  margin-top: 107px;
}

.portal-login-copy h2 {
  max-width: 500px;
  margin: 30px;
  color: #f8fafc;
  font-size: 50px;
  font-weight: 950;
  line-height: 1.25;
  letter-spacing: 0;
}

.portal-login-copy h2 strong {
  color: #1f6bff;
}

.portal-login-copy p {
  max-width: 520px;
  margin: 40px 40px;
  color: rgba(226, 232, 240, 0.82);
  font-size: 20px;
  line-height: 1.45;
}

.login-feature-list {
  display: grid;
  gap: 20px;
  max-width: 510px;
}

.login-feature-list article,
.login-safe-card {
  display: grid;
  grid-template-columns: 68px 1fr;
  gap: 20px;
  align-items: center;
}

.feature-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border: 2px solid rgba(96, 165, 250, 0.28);
  border-radius: 15px;
  background: rgba(15, 23, 42, 0.64);
  box-shadow: inset 3px 3px 1px rgba(255, 255, 255, 0.09);
}

.feature-icon::before,
.feature-icon::after,
.login-lock::before,
.login-lock::after,
.mail-icon::before,
.mail-icon::after,
.mini-lock-icon::before,
.mini-lock-icon::after,
.eye-icon::before,
.eye-icon::after,
.small-shield-icon::before {
  content: "";
  position: absolute;
}

.box-icon::before {
  width: 26px;
  height: 26px;
  border: 4px solid #1f6bff;
  transform: rotate(30deg) skewY(-18deg);
}

.clipboard-icon::before {
  width: 24px;
  height: 32px;
  border: 4px solid #1f6bff;
  border-radius: 4px;
}

.clipboard-icon::after {
  top: 17px;
  width: 14px;
  height: 4px;
  border-top: 4px solid #1f6bff;
  border-bottom: 4px solid #1f6bff;
}

.chart-icon::before {
  bottom: 17px;
  width: 31px;
  height: 30px;
  border-left: 4px solid #1f6bff;
  border-bottom: 4px solid #1f6bff;
}

.chart-icon::after {
  bottom: 21px;
  width: 24px;
  height: 26px;
  border-left: 4px solid #1f6bff;
  border-right: 4px solid #1f6bff;
}

.shield-icon::before,
.lock-shield-icon::before {
  width: 30px;
  height: 34px;
  border: 5px solid #1f6bff;
  border-radius: 5px 5px 5px 5px;
  clip-path: polygon(50% 0, 100% 18%, 90% 76%, 50% 100%, 10% 76%, 0 18%);
}

.login-feature-list strong,
.login-safe-card strong {
  color: #fff;
  font-size: 17px;
  font-weight: 850;
}

.login-feature-list p,
.login-safe-card p {
  margin: 7px 0 0;
  color: rgba(203, 213, 225, 0.84);
  font-size: 16px;
  line-height: 1.35;
}

.login-safe-card {
  width: 350px;
  margin-top: 100px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 12px;
  padding: 30px 17px;
  background: linear-gradient(145deg, rgba(30, 41, 59, 0.84), rgba(15, 23, 42, 0.78));
}

.login-safe-card .feature-icon {
  border: 0;
  background: transparent;
}

.phone-visual {
  position: absolute;
  z-index: -1;
  right: 60px;
  top: 148px;
  width: 290px;
  height: 590px;
  border: 3px solid rgba(96, 165, 250, 0.5);
  border-radius: 46px;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(15, 23, 42, 0.82), rgba(2, 6, 23, 0.62)),
    radial-gradient(circle at 48% 16%, rgba(31, 107, 255, 0.70), transparent 30%);
  box-shadow: inset 0 70px 80px rgba(31, 107, 255, 0.2), 0 26px 70px rgba(0, 0, 0, 0.42);
  transform: rotate(-18deg);
}

.phone-visual::before {
  content: "";
  position: absolute;
  border-radius: 32px;
  background:
    linear-gradient(90deg, rgba(31, 107, 255, 0.26) 1px, transparent 1px),
    linear-gradient(rgba(31, 107, 255, 0.22) 1px, transparent 1px);
  background-size: 40px 50px;
}

.phone-visual::after {
  content: "";
  position: absolute;
  left: 90px;
  top: 28px;
  width: 110px;
  height: 12px;
  border-radius: 999px;
  background: rgba(2, 6, 23, 0.82);
}

.phone-inner-grid {
  position: absolute;
  inset: 74px 28px 34px;
  width: 130;
  height: 150;
  border-radius: 15px;
  background:
    linear-gradient(90deg, transparent 0 36%, rgba(31, 107, 255, 0.18) 36% 40%, transparent 40%),
    linear-gradient(0deg, transparent 0 28%, rgba(31, 107, 255, 0.18) 28% 32%, transparent 32%),
    rgba(15, 23, 42, 0.58);
}

.portal-login-divider {
  z-index: 1;
  width: 4px;
  min-height: 100vh;
  margin: 10px 170px -90px;
  background: rgba(148, 163, 184, 0.22);
}

.portal-login-card {
  position: relative;
  z-index: 1;
  align-self: center;
  width: min(100%, 646px);
  min-height: 924px;
  margin-left: 200px;
  border: 3px solid rgba(148, 163, 184, 0.22);
  border-radius: 15px;
  padding: 90px 47px 50px;
  background:
    radial-gradient(circle at 50% 11%, rgba(31, 107, 255, 0.18), transparent 28%),
    linear-gradient(145deg, rgba(15, 23, 42, 0.9), rgba(15, 23, 42, 0.72));
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.login-lock {
  position: relative;
  width: 90px;
  height: 90px;
  margin: 0 auto 35px;
  border-radius: 22px;
  background: radial-gradient(circle at 50% 42%, rgba(96, 165, 250, 0.36), rgba(30, 64, 175, 0.2) 60%, rgba(15, 23, 42, 0.72));
  box-shadow: 0 20px 56px rgba(31, 107, 255, 0.23);
}

.login-lock::before {
  left: 31px;
  top: 20px;
  width: 28px;
  height: 22px;
  border: 3px solid #fff;
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
}

.login-lock::after {
  left: 28px;
  top: 43px;
  width: 34px;
  height: 28px;
  border: 3px solid #fff;
  border-radius: 4px;
  box-shadow: 0 0 18px rgba(96, 165, 250, 0.64);
}

.activation-top-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: max-content;
  min-height: 42px;
  margin: -18px auto 24px;
  border: 1px solid rgba(59, 130, 246, 0.44);
  border-radius: 999px;
  padding: 8px 16px 8px 12px;
  color: #f8fafc;
  background:
    radial-gradient(circle at 22% 50%, rgba(37, 99, 235, 0.5), transparent 42%),
    rgba(15, 34, 64, 0.86);
  box-shadow: 0 16px 46px rgba(37, 99, 235, 0.28);
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
}

.activation-top-button span {
  position: relative;
  width: 22px;
  height: 17px;
  border: 2px solid currentColor;
  border-radius: 5px;
}

.activation-top-button span::before {
  content: "";
  position: absolute;
  left: 4px;
  top: -12px;
  width: 10px;
  height: 12px;
  border: 2px solid currentColor;
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
}

.portal-login-card h2 {
  margin: 0;
  color: #f8fafc;
  font-size: 34px;
  font-weight: 900;
  text-align: center;
}

.portal-login-card > p {
  margin: 13px 0 45px;
  color: rgba(203, 213, 225, 0.7);
  font-size: 19px;
  text-align: center;
}

.login-field {
  display: block;
  margin-bottom: 40px;
  color: #f8fafc;
  font-size: 17px;
  font-weight: 750;
}

.login-field > div {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 58px;
  margin-top: 13px;
  border: 3px solid rgba(148, 163, 184, 0.10);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.80);
}

.login-field input[type="text"],
.login-field input[type="password"] {
  width: 100%;
  height: 56px;
  border: 0;
  outline: 0;
  padding: 0 48px 0 52px;
  color: #f8fafc;
  background: transparent;
  font-size: 16px;
}

.login-field input::placeholder {
  color: rgba(203, 213, 225, 0.56);
}

.mail-icon,
.mini-lock-icon,
.eye-icon {
  position: absolute;
  display: block;
  color: rgba(203, 213, 225, 0.78);
}

.mail-icon {
  left: 18px;
  width: 20px;
  height: 15px;
  border: 1px solid currentColor;
  border-radius: 2px;
}

.mail-icon::before,
.mail-icon::after {
  top: 3px;
  width: 12px;
  height: 2px;
  background: currentColor;
}

.mail-icon::before {
  left: -1px;
  transform: rotate(35deg);
}

.mail-icon::after {
  right: -1px;
  transform: rotate(-35deg);
}

.mini-lock-icon {
  left: 19px;
  width: 17px;
  height: 15px;
  border: 1px solid currentColor;
  border-radius: 3px;
}

.mini-lock-icon::before {
  left: 2px;
  top: -11px;
  width: 9px;
  height: 10px;
  border: 1px solid currentColor;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
}

.eye-icon {
  right: 20px;
  width: 22px;
  height: 14px;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.eye-icon::after {
  left: 6px;
  top: 2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.eye-icon::before {
  left: -4px;
  top: 5px;
  width: 28px;
  height: 2px;
  background: currentColor;
  transform: rotate(35deg);
}

.login-eye-button {
  position: absolute;
  right: 0;
  top: 0;
  width: 58px;
  height: 58px;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.login-eye-button .eye-icon {
  right: 18px;
  top: 22px;
}

.login-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: -1px 0 42px;
  color: #f8fafc;
}

.login-options label {
  display: flex;
  align-items: center;
  gap: 11px;
}

.login-options input {
  width: 22px;
  height: 22px;
  appearance: none;
  border: 1px solid rgba(148, 163, 184, 0.36);
  border-radius: 3px;
  background: rgba(15, 23, 42, 0.58);
}

.login-options button {
  border: 0;
  color: #1f6bff;
  background: transparent;
  font-size: 15px;
}

.activation-panel {
  display: grid;
  gap: 12px;
  margin: 0 0 28px;
  border: 1px solid rgba(37, 99, 235, 0.34);
  border-radius: 14px;
  padding: 16px;
  color: #f8fafc;
  background: rgba(37, 99, 235, 0.10);
  text-align: center;
}

.activation-panel[hidden] {
  display: none;
}

.activation-panel strong {
  font-size: 18px;
}

.activation-panel p {
  margin: 0;
  color: rgba(203, 213, 225, 0.74);
  line-height: 1.45;
}

.activation-panel label {
  display: grid;
  gap: 8px;
  color: #dbe7ff;
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  text-align: left;
}

.activation-panel input {
  min-height: 46px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 8px;
  padding: 0 12px;
  color: #f8fafc;
  background: rgba(15, 23, 42, 0.78);
}

.activation-panel .login-code {
  min-height: 46px;
  box-shadow: none;
  font-size: 16px;
}

.activation-panel span {
  color: rgba(203, 213, 225, 0.78);
  font-size: 13px;
  font-weight: 800;
}

.activation-panel span[data-tone="success"] {
  color: #54d78b;
}

.activation-panel span[data-tone="warn"] {
  color: #f8c35f;
}

.activation-panel span[data-tone="error"] {
  color: #ff7b8a;
}

.activation-panel.attention {
  animation: activationPulse 900ms ease both;
}

@keyframes activationPulse {
  0% {
    border-color: rgba(37, 99, 235, 0.34);
    box-shadow: none;
  }
  45% {
    border-color: rgba(96, 165, 250, 0.95);
    box-shadow: 0 0 0 5px rgba(37, 99, 235, 0.18), 0 18px 50px rgba(37, 99, 235, 0.24);
  }
  100% {
    border-color: rgba(37, 99, 235, 0.34);
    box-shadow: none;
  }
}

.login-feedback {
  min-height: 24px;
  margin: -22px 0 18px;
  color: rgba(203, 213, 225, 0.78);
  font-size: 14px;
  line-height: 1.45;
}

.login-feedback[data-tone="success"] {
  color: #54d78b;
}

.login-feedback[data-tone="warn"] {
  color: #f8c35f;
}

.login-feedback[data-tone="error"] {
  color: #ff7b8a;
}

.login-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  width: 100%;
  min-height: 61px;
  border: 0;
  border-radius: 7px;
  color: #fff;
  background: linear-gradient(90deg, #1f6bff, #1557ff);
  box-shadow: 0px 0px 30px rgba(37, 99, 235, 0.90);
  font-size: 18px;
  font-weight: 650;
}

.login-separator {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 22px;
  align-items: center;
  margin: 39px 0;
  color: rgba(255, 255, 225, 0.90);
}

.login-separator span {
  height: 2px;
  background: rgba(255, 255, 255, 0.100);
}

.login-code {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  width: 100%;
  min-height: 59px;
  border: 1px solid rgba(148, 163, 184, 0.34);
  border-radius: 7px;
  color: #f8fafc;
  background: rgba(15, 23, 42, 0.34);
  box-shadow: 0px 0px 30px rgba(37, 99, 235, 0.90);
  font-size: 20px;
}

.portal-login-card footer {
  margin-top: 55px;
  color: rgba(148, 163, 184, 0.72);
  font-size: 14px;
  text-align: center;
}

@media (max-width: 1100px) {
  .portal-login-screen {
    grid-template-columns: 1fr;
    gap: 44px;
    padding: 32px 22px;
  }

  .portal-login-divider {
    display: none;
  }

  .portal-login-left {
    min-height: auto;
  }

  .portal-login-copy {
    margin-top: 60px;
  }

  .phone-visual {
    opacity: 0.28;
    right: 0;
  }

  .portal-login-card {
    width: 100%;
    min-height: auto;
    margin: 16px 0px 50px;
  }
}

@media (max-width: 620px) {
  .portal-login-brand strong {
    font-size: 28px;
  }

  .portal-login-copy h2 {
    font-size: 38px;
  }

  .portal-login-card {
    padding: 42px 22px 32px;
  }

  .login-feature-list article,
  .login-safe-card {
    grid-template-columns: 54px 1fr;
  }

  .feature-icon {
    width: 54px;
    height: 54px;
  }

  .login-safe-card {
    width: 100%;
  }
}

body.official-open {
  --page: #071421;
  --surface: #102132;
  --surface-soft: #0c1b2b;
  --line: rgba(148, 163, 184, 0.16);
  --line-strong: rgba(148, 163, 184, 0.28);
  --text: #f8fafc;
  --muted: #91a0b5;
  min-height: 100vh;
  color: #f8fafc;
  background:
    radial-gradient(circle at 0 0, rgba(31, 107, 255, 0.12), transparent 30%),
    linear-gradient(135deg, #071421 0%, #06111d 100%);
}

body.official-open .board-shell {
  display: grid;
  grid-template-columns: 293px minmax(680px, 1fr) 420px;
  grid-template-rows: 92px minmax(0, 1fr);
  min-height: 100vh;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(31, 107, 255, 0.04), transparent 28%),
    #071421;
}
.demo-tour-link { display:block; margin-top:12px; color:#bfdbfe; font-size:12px; font-weight:800; text-align:center; text-decoration:none; }
.demo-tour-link:hover { color:#fff; text-decoration:underline; }
.demo-badge { position:fixed; top:14px; right:14px; z-index:10001; border:1px solid rgba(96,165,250,.5); border-radius:999px; padding:8px 12px; color:#dbeafe; background:#0757a6; box-shadow:0 10px 24px rgba(0,0,0,.28); font-size:11px; font-weight:900; letter-spacing:.08em; }
.demo-tour-card { position:fixed; right:18px; bottom:18px; z-index:10002; width:min(390px,calc(100vw - 36px)); border:1px solid rgba(96,165,250,.42); border-radius:14px; padding:18px; color:#dbeafe; background:linear-gradient(145deg,#09294b,#061a30); box-shadow:0 20px 52px rgba(0,0,0,.48); }
.demo-tour-card small { color:#60a5fa; font-weight:900; letter-spacing:.08em; }.demo-tour-card h2 { margin:8px 0; color:#fff; font-size:20px; }.demo-tour-card p { margin:0; color:#b6c8dc; font-size:13px; line-height:1.55; }.demo-tour-card div { display:flex; justify-content:flex-end; gap:8px; margin-top:16px; }.demo-tour-card button { border:1px solid rgba(96,165,250,.35); border-radius:7px; padding:9px 12px; color:#dbeafe; background:#0b3764; cursor:pointer; }.demo-tour-card button:last-child { color:#fff; background:#075be6; }.demo-tour-card button:disabled { opacity:.42; cursor:not-allowed; }
.demo-tour-highlight { position:relative; z-index:10000!important; outline:3px solid #38bdf8!important; outline-offset:4px; box-shadow:0 0 0 8px rgba(56,189,248,.14),0 0 32px rgba(56,189,248,.5)!important; }

body.official-open:not(.checkout-visible) .board-shell {
  grid-template-columns: 293px minmax(680px, 1fr);
}

body.official-open .inventory-sidebar {
  grid-column: 1;
  grid-row: 1 / 3;
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(148, 163, 184, 0.14);
  padding: 28px 12px 18px;
  background: linear-gradient(180deg, rgba(7, 20, 33, 0.98), rgba(6, 17, 29, 0.96));
}

body.official-open.sidebar-collapsed .board-shell {
  grid-template-columns: 72px minmax(680px, 1fr) 420px;
}

body.official-open.sidebar-collapsed:not(.checkout-visible) .board-shell {
  grid-template-columns: 72px minmax(680px, 1fr);
}

body.official-open.sidebar-collapsed .inventory-sidebar {
  padding-inline: 8px;
}

body.official-open.sidebar-collapsed .inventory-brand div,
body.official-open.sidebar-collapsed .side-label,
body.official-open.sidebar-collapsed .inventory-sidebar nav button:not(.active),
body.official-open.sidebar-collapsed .inventory-sidebar nav button small,
body.official-open.sidebar-collapsed .stock-summary {
  display: none;
}

body.official-open.sidebar-collapsed .inventory-brand {
  justify-content: center;
  margin: 0 0 34px;
}

body.official-open.sidebar-collapsed .inventory-phone {
  width: 32px;
  height: 48px;
}

body.official-open.sidebar-collapsed .inventory-sidebar nav button.active {
  grid-template-columns: 1fr;
  justify-items: center;
  padding: 0;
}

.sidebar-toggle {
  display: none;
}

body.official-open .sidebar-toggle {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 6px;
  color: #dbe7f7;
  background: rgba(15, 33, 50, 0.82);
  font-size: 18px;
}

.inventory-topbar { display: none; }
body.official-open .inventory-topbar { position:relative; grid-column: 2 / 4; grid-row: 1; display: flex; align-items: center; gap: 18px; overflow:visible; border-bottom: 1px solid rgba(96,165,250,.2); padding: 14px 20px; background:radial-gradient(circle at 46% 0,rgba(17,91,178,.13),transparent 38%),linear-gradient(180deg,#06152a,#031124); box-shadow:inset 0 -1px 0 rgba(96,165,250,.08),0 8px 26px rgba(0,0,0,.22); }
body.official-open .inventory-topbar::before { position:absolute; inset:0; pointer-events:none; background:linear-gradient(110deg,rgba(255,255,255,.025),transparent 42%); content:""; }
body.official-open:not(.checkout-visible) .inventory-topbar { grid-column: 2; }
.inventory-topbar-greeting { min-width: 265px; margin-right:auto; }.inventory-topbar-greeting strong,.inventory-topbar-greeting small { display:block; }.inventory-topbar-greeting strong { color:#f8fafc; font-size:22px; text-shadow:0 0 18px rgba(255,255,255,.12); }.inventory-topbar-greeting small { margin-top:7px; color:#b0bed2; font-size:13px; }
.inventory-topbar-search { display:flex; align-items:center; gap:11px; min-width:330px; max-width:520px; flex:1; margin-left:auto; border:1px solid rgba(96,165,250,.28); border-radius:8px; padding:0 14px; background:linear-gradient(145deg,rgba(9,31,58,.94),rgba(7,24,45,.88)); color:#9db2cc; box-shadow:inset 0 1px 0 rgba(191,219,254,.05),0 8px 18px rgba(0,0,0,.12); }
.inventory-topbar-search span { color:#a7bad2; font-size:24px; }.inventory-topbar-search input { min-width:0; height:52px; flex:1; border:0; outline:0; color:#e2e8f0; background:transparent; font-size:14px; }.inventory-topbar-search kbd { border-radius:5px; padding:5px 8px; color:#c6d4e6; background:rgba(148,163,184,.12); box-shadow:inset 0 1px 0 rgba(255,255,255,.05); font-size:11px; }
.inventory-top-stat,.inventory-top-alert,.inventory-top-date { position:relative; display:flex; align-items:center; gap:13px; min-height:58px; overflow:hidden; border:1px solid rgba(59,130,246,.18); border-radius:8px; padding:8px 16px; color:#2294ff; background:linear-gradient(145deg,rgba(8,36,78,.98),rgba(5,25,57,.9)); box-shadow:inset 0 1px 0 rgba(147,197,253,.06),0 8px 18px rgba(0,0,0,.14); }
.inventory-top-stat::before,.inventory-top-date::before { position:absolute; inset:0; pointer-events:none; background:linear-gradient(120deg,rgba(255,255,255,.04),transparent 48%); content:""; }.inventory-top-stat.orders { border-color:rgba(0,102,255,.28); background:linear-gradient(145deg,rgba(6,42,105,.98),rgba(4,27,75,.9)); box-shadow:inset 0 1px 0 rgba(147,197,253,.07),0 9px 22px rgba(0,73,190,.14); }
.inventory-top-stat small,.inventory-top-date small { display:block; color:#b7c6dc; font-size:11px; text-align:left; }.inventory-top-stat b,.inventory-top-date b { display:block; margin-top:3px; color:#fff; font-size:18px; line-height:1; }.inventory-top-date b { color:#b7c6dc; font-size:11px; font-weight:500; line-height:1.2; }
.inventory-notifications { position:relative; }
.inventory-top-alert{position:relative;overflow:visible;z-index:9999; }
.inventory-top-alert { min-width:58px; justify-content:center; border-radius:50%; padding:8px; background:linear-gradient(145deg,rgba(20,47,79,.96),rgba(8,28,52,.92)); }.inventory-top-alert b { position:absolute; top:-5px; right:-4px; display:grid; min-width:23px; height:23px; place-items:center; border-radius:50%; color:#fff; background:#ef4444; box-shadow:0 0 12px rgba(239,68,68,.4); font-size:11px; }
.topbar-cart-icon,.topbar-order-icon,.topbar-calendar-icon { position:relative; display:block; width:26px; height:25px; color:#1689ff; filter:drop-shadow(0 0 7px rgba(22,137,255,.34)); }
.topbar-cart-icon { border-bottom:3px solid currentColor; border-left:3px solid currentColor; transform:skew(-8deg); }.topbar-cart-icon::before { position:absolute; top:3px; right:-1px; left:-6px; border-top:3px solid currentColor; content:""; }.topbar-cart-icon::after { position:absolute; right:1px; bottom:-9px; width:5px; height:5px; border-radius:50%; background:currentColor; box-shadow:-18px 0 0 currentColor; content:""; }
.topbar-order-icon { width:22px; height:27px; border:2px solid #38bdf8; border-radius:4px; }.topbar-order-icon::before { position:absolute; top:5px; left:5px; width:9px; height:9px; border:2px solid #38bdf8; border-radius:2px; content:""; }.topbar-order-icon::after { position:absolute; right:-7px; bottom:-5px; width:10px; height:10px; border:2px solid #38bdf8; border-radius:50%; background:#082746; content:""; }
.topbar-calendar-icon { width:26px; height:23px; border:2px solid #38a5ff; border-radius:3px; }.topbar-calendar-icon::before { position:absolute; top:5px; right:0; left:0; border-top:2px solid #38a5ff; content:""; }.topbar-calendar-icon::after { position:absolute; top:-5px; right:5px; left:5px; height:8px; border-right:3px solid #38a5ff; border-left:3px solid #38a5ff; content:""; }
.topbar-cart-icon.custom-image,.topbar-order-icon.custom-image,.topbar-calendar-icon.custom-image { border:0; transform:none; }.topbar-cart-icon.custom-image::before,.topbar-cart-icon.custom-image::after,.topbar-order-icon.custom-image::before,.topbar-order-icon.custom-image::after,.topbar-calendar-icon.custom-image::before,.topbar-calendar-icon.custom-image::after { display:none; }.topbar-cart-icon img,.topbar-order-icon img,.topbar-calendar-icon img { width:100%; height:100%; object-fit:contain; }
.notification-bell { position:relative; display:block; width:20px; height:22px; border:2px solid #e2e8f0; border-radius:11px 11px 5px 5px; filter:drop-shadow(0 0 7px rgba(191,219,254,.22)); }
.notification-bell::before { position:absolute; top:-5px; left:7px; width:5px; height:5px; border-radius:4px 4px 0 0; background:#e2e8f0; content:""; }
.notification-bell::after { position:absolute; right:4px; bottom:-6px; left:4px; height:4px; border-radius:0 0 6px 6px; background:#e2e8f0; content:""; }
.notifications-popover { position:absolute; z-index:80; top:50px; right:-82px; width:320px; overflow:hidden; border:1px solid rgba(96,165,250,.2); border-radius:7px; background:#081a2c; box-shadow:0 18px 48px rgba(0,0,0,.42); }
.notifications-popover header { display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(148,163,184,.14); padding:11px 12px; }.notifications-popover header strong { color:#f8fafc; font-size:13px; }.notifications-popover header button { border:0; color:#94a3b8; background:transparent; font-size:20px; }
.notifications-popover > div { display:grid; max-height:330px; overflow:auto; }
.notification-item { display:grid; grid-template-columns:9px 1fr; gap:9px; border:0; border-top:1px solid rgba(148,163,184,.09); padding:10px 12px; color:#e2e8f0; background:transparent; text-align:left; }.notification-item:hover { background:rgba(37,99,235,.1); }.notification-item i { width:8px; height:8px; margin-top:3px; border-radius:50%; background:#60a5fa; }.notification-item.warn i { background:#f59e0b; }.notification-item.danger i { background:#ef4444; }.notification-item strong,.notification-item small { display:block; }.notification-item strong { font-size:11px; }.notification-item small { margin-top:4px; color:#91a0b5; font-size:10px; line-height:1.35; }.notification-empty { margin:0; padding:16px; color:#91a0b5; font-size:11px; }
body:not(.official-open) .inventory-sidebar,
body:not(.official-open) .order-panel,
body.official-open:not(.checkout-visible) .order-panel {
  display: none;
}

.inventory-brand {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0 18px 52px;
}

.inventory-phone {
  width: 37px;
  height: 56px;
  border: 3px solid #f8fafc;
  border-radius: 6px;
  box-shadow: 0 0 18px rgba(96, 165, 250, 0.2);
}

.inventory-brand strong {
  color: #f8fafc;
  font-size: 30px;
  font-style: italic;
  font-weight: 950;
  line-height: 1;
}

.inventory-brand strong span {
  color: #1f6bff;
}

.inventory-brand small {
  display: block;
  margin-top: 7px;
  color: rgba(226, 232, 240, 0.78);
  font-size: 10px;
  letter-spacing: 0.48em;
}

.side-label {
  margin: 0 18px 22px;
  color: #91a0b5;
  font-size: 12px;
  font-weight: 800;
}

.inventory-sidebar nav {
  display: grid;
  gap: 6px;
}

.inventory-sidebar nav button {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  min-height: 48px;
  border: 0;
  border-radius: 7px;
  padding: 0 14px;
  color: #cbd5e1;
  background: transparent;
  text-align: left;
  font-size: 18px;
}

.inventory-sidebar nav button.active,
.inventory-sidebar nav button:hover {
  color: #fff;
  background: linear-gradient(90deg, rgba(31, 107, 255, 0.42), rgba(31, 107, 255, 0.12));
  box-shadow: inset 3px 0 0 #1f6bff;
}

.inventory-sidebar nav span {
  color: #b8c4d8;
}

.inventory-sidebar nav small {
  border-radius: 999px;
  padding: 2px 8px;
  background: rgba(148, 163, 184, 0.18);
  color: #dbe7f7;
  font-size: 12px;
}

.stock-summary {
  display:none;
  margin-top: auto;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 8px;
  padding: 20px;
  background: linear-gradient(145deg, rgba(15, 35, 56, 0.92), rgba(9, 23, 38, 0.86));
}

.stock-summary strong {
  font-size: 17px;
}

.stock-summary p {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 20px 0 0;
  color: #91a0b5;
  font-size: 13px;
}

.stock-summary b {
  color: #f8fafc;
}

.stock-summary .warn,
.stock-summary .danger-text {
  color: #ef6348;
}

.stock-summary button {
  width: 100%;
  min-height: 42px;
  margin-top: 20px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 5px;
  color: #aebbd0;
  background: transparent;
}

.technician-profile { position:relative; margin-top:auto; border-top:1px solid rgba(148,163,184,.13); padding-top:13px; }
.technician-profile-trigger { display:grid; width:100%; grid-template-columns:36px 1fr 18px; align-items:center; gap:10px; border:0; border-radius:7px; padding:8px 7px; color:#f8fafc; background:transparent; text-align:left; }
.technician-profile-trigger:hover,.technician-profile-trigger[aria-expanded="true"] { background:rgba(37,99,235,.1); }
.technician-avatar { position:relative; display:grid; width:34px; height:34px; place-items:center; border:1px solid rgba(147,197,253,.28); border-radius:50%; color:#e0edff; background:linear-gradient(145deg,#315279,#142a46); box-shadow:0 5px 14px rgba(0,0,0,.2); font-size:13px; font-weight:900; }
.technician-avatar::after { position:absolute; right:-1px; bottom:1px; width:8px; height:8px; border:2px solid #071421; border-radius:50%; background:#22c55e; content:""; }
.technician-avatar img,.technician-photo-preview img { width:100%; height:100%; border-radius:50%; object-fit:cover; }
.technician-profile-copy strong,.technician-profile-copy small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.technician-profile-copy strong { font-size:12px; }.technician-profile-copy small { margin-top:4px; color:#91a0b5; font-size:10px; }
.technician-profile-chevron { color:#91a0b5; font-size:16px; }
.technician-profile-menu { position:absolute; z-index:12; right:0; bottom:58px; left:0; display:grid; gap:4px; border:1px solid rgba(96,165,250,.22); border-radius:7px; padding:6px; background:#081a2c; box-shadow:0 15px 35px rgba(0,0,0,.36); }
.technician-profile-menu[hidden] { display:none; }
.technician-profile-menu button { border:0; border-radius:5px; padding:9px; color:#dbeafe; background:transparent; text-align:left; font-size:11px; }.technician-profile-menu button:hover { background:rgba(37,99,235,.14); }.technician-profile-menu .danger { color:#fca5a5; }
body.official-open.sidebar-collapsed .technician-profile { margin-top:auto; padding-top:10px; }
body.official-open.sidebar-collapsed .technician-profile-trigger { grid-template-columns:1fr; justify-items:center; padding-inline:0; }
body.official-open.sidebar-collapsed .technician-profile-copy,body.official-open.sidebar-collapsed .technician-profile-chevron { display:none; }
body.official-open.sidebar-collapsed .technician-profile-menu { left:54px; right:auto; bottom:0; width:150px; }
.technician-profile-dialog { max-width:540px; }
.technician-photo-editor { display:flex; align-items:center; gap:13px; margin-top:7px; }
.technician-photo-preview { display:grid; width:58px; height:58px; flex:0 0 auto; place-items:center; overflow:hidden; border:1px solid rgba(147,197,253,.32); border-radius:50%; color:#e0edff; background:linear-gradient(145deg,#315279,#142a46); font-size:18px; font-weight:900; }
.technician-photo-actions { display:flex; flex-wrap:wrap; gap:7px; }
.technician-photo-upload { border:1px solid rgba(96,165,250,.3); border-radius:5px; padding:8px 10px; color:#dbeafe; background:rgba(37,99,235,.12); font-size:11px; text-align:center; }
.technician-photo-upload input { display:none; }

.warranty-view { display:grid; gap:14px; }
.warranty-client-picker small { margin-top:2px; color:#8da3bd; font-size:10px; font-weight:700; text-transform:none; }
.warranty-date-field span { display:flex; flex-wrap:wrap; gap:6px; margin-top:2px; }
.warranty-date-field button { border:1px solid rgba(96,165,250,.24); border-radius:999px; padding:5px 8px; color:#bfdbfe; background:rgba(37,99,235,.13); font-size:10px; font-weight:800; cursor:pointer; }
.warranty-date-field button:hover { border-color:rgba(96,165,250,.5); color:#fff; background:rgba(37,99,235,.24); }
.warranty-head { display:flex; min-height:67px; align-items:center; justify-content:space-between; gap:16px; }.warranty-head-actions { display:flex; flex:0 0 auto; align-items:center; gap:9px; }.warranty-head-actions button,.warranty-detail footer button { border:1px solid rgba(96,165,250,.28); border-radius:6px; padding:10px 14px; color:#dbeafe; background:rgba(15,42,70,.78); }.warranty-head-actions .primary { color:#fff; background:linear-gradient(90deg,#075be6,#087cff); }
.warranty-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(370px,390px); gap:17px; align-items:start; }
.warranty-main { display:grid; gap:12px; min-width:0; }
.warranty-filters { display:grid; grid-template-columns:160px 1fr; gap:9px; }.warranty-filters input,.warranty-filters select { min-height:39px; border:1px solid rgba(96,165,250,.2); border-radius:6px; padding:8px 11px; color:#dbeafe; background:#071a2d; }
.warranty-kpis { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; }.warranty-kpis article { display:flex; gap:11px; min-height:92px; border:1px solid rgba(96,165,250,.16); border-radius:7px; padding:14px; background:linear-gradient(145deg,rgba(11,37,62,.96),rgba(8,27,47,.9)); }.warranty-kpis article>b { display:grid; width:39px; height:39px; flex:0 0 auto; place-items:center; border-radius:6px; color:#60a5fa; background:rgba(37,99,235,.16); font-size:22px; }.warranty-kpis small,.warranty-kpis em { display:block; color:#91a0b5; font-size:10px; font-style:normal; }.warranty-kpis strong { display:block; margin:4px 0; color:#f8fafc; font-size:22px; }.warranty-kpis .green>b { color:#4ade80;background:rgba(34,197,94,.14) }.warranty-kpis .orange>b { color:#fbbf24;background:rgba(245,158,11,.14) }.warranty-kpis .red>b { color:#f87171;background:rgba(239,68,68,.14) }
.warranty-table-panel,.warranty-detail { border:1px solid rgba(96,165,250,.16); border-radius:7px; background:linear-gradient(145deg,rgba(8,29,50,.98),rgba(5,21,38,.95)); }.warranty-table-panel { overflow:hidden; }.warranty-table-panel>header { display:flex; justify-content:space-between; padding:12px 14px; }.warranty-table-panel small { color:#91a0b5; }
.warranty-table { overflow:auto; }.warranty-table-row { display:grid; min-width:920px; grid-template-columns:120px 1.1fr 1.1fr 1.15fr 78px 102px 74px 38px; gap:8px; align-items:center; width:100%; border:0; border-top:1px solid rgba(148,163,184,.1); padding:10px 13px; color:#cbd5e1; background:transparent; text-align:left; font-size:11px; }.warranty-table-row.selected,.warranty-table-row:not(.warranty-table-head):hover { background:rgba(37,99,235,.1); }.warranty-table-head { color:#91a0b5; background:rgba(5,18,33,.55); font-size:10px; text-transform:uppercase; }.warranty-table-row strong,.warranty-table-row small { display:block; }.warranty-table-row small { margin-top:4px; font-size:9px; }.warranty-table-row em,.warranty-detail em { display:inline-block; border-radius:4px; padding:4px 6px; color:#86efac; background:rgba(34,197,94,.16); font-size:10px; font-style:normal; }.warranty-table-row em.warning,.warranty-detail em.warning { color:#fde68a;background:rgba(245,158,11,.16) }.warranty-table-row em.expired,.warranty-detail em.expired,.warranty-table-row em.cancelled,.warranty-detail em.cancelled { color:#fca5a5;background:rgba(239,68,68,.16) }.warranty-empty { padding:18px; color:#91a0b5; }
.warranty-detail { position:sticky; top:0; display:grid; max-height:calc(100vh - 102px); gap:14px; overflow:auto; padding:19px; border-color:rgba(96,165,250,.23); background:radial-gradient(circle at 84% 4%,rgba(37,99,235,.15),transparent 26%),linear-gradient(145deg,rgba(10,35,60,.99),rgba(5,20,38,.98)); box-shadow:inset 0 1px 0 rgba(191,219,254,.08),0 18px 42px rgba(0,0,0,.28); }.warranty-detail::before { position:absolute; inset:0; pointer-events:none; background:linear-gradient(120deg,rgba(255,255,255,.045),transparent 38%); content:""; }.warranty-detail>* { position:relative; z-index:1; }.warranty-detail header div { display:flex; justify-content:space-between; gap:8px; align-items:center; }.warranty-detail h3,.warranty-detail h4 { margin:0; color:#f8fafc; }.warranty-detail h3 { font-size:18px; }.warranty-detail h4 { margin-bottom:9px; font-size:13px; }.warranty-detail p,.warranty-detail small { display:block; margin:4px 0 0; color:#91a0b5; font-size:11px; line-height:1.5; }.warranty-detail strong { color:#f8fafc; font-size:13px; }.warranty-detail hr { width:100%; border:0; border-top:1px solid rgba(148,163,184,.12); }.warranty-detail-number,.warranty-person,.warranty-info-line { display:flex; align-items:center; gap:12px; }.warranty-detail-number>b { display:grid; width:52px; height:52px; flex:0 0 auto; place-items:center; border-radius:50%; color:#dbeafe; background:linear-gradient(145deg,#1573ff,#0645c8); box-shadow:0 0 0 6px rgba(37,99,235,.1),0 9px 22px rgba(0,87,255,.32); }.warranty-detail svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.7; }.warranty-detail-number svg { width:28px; height:28px; }.warranty-person>b { display:grid; width:42px; height:42px; flex:0 0 auto; place-items:center; border-radius:50%; color:#fff; background:linear-gradient(145deg,#337dff,#0750d8); box-shadow:0 7px 17px rgba(0,89,255,.24); }.warranty-info-line>b { display:grid; width:41px; height:48px; flex:0 0 auto; place-items:center; border:1px solid rgba(96,165,250,.22); border-radius:5px; color:#8dc1ff; background:linear-gradient(145deg,rgba(11,57,103,.8),rgba(6,29,54,.92)); }.warranty-person p { display:flex; align-items:center; gap:5px; }.warranty-person p svg { width:11px; height:11px; }.warranty-period { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }.warranty-period span { display:grid; min-width:0; grid-template-columns:17px minmax(0,1fr); column-gap:5px; color:#91a0b5; }.warranty-period i { display:grid; grid-row:1 / 3; align-self:start; color:#91a0b5; }.warranty-period svg { width:14px; height:14px; }.warranty-period small { min-width:0; margin:0; font-size:10px; white-space:nowrap; }.warranty-period strong { display:block; min-width:0; margin-top:5px; font-size:13px; white-space:nowrap; }.warranty-state-line { color:#4ade80!important; text-align:center; }.warranty-state-line.warning { color:#fbbf24!important; }.warranty-state-line.expired,.warranty-state-line.cancelled { color:#f87171!important; }.warranty-notes { border:1px solid rgba(96,165,250,.16); border-radius:5px; padding:11px; background:rgba(6,25,45,.72); }.warranty-actions { display:grid; gap:8px; }.warranty-actions>div { display:grid; grid-template-columns:1fr 1fr; gap:7px; }.warranty-detail footer button,.warranty-actions button { display:flex; align-items:center; justify-content:center; gap:7px; min-height:40px; border:1px solid rgba(96,165,250,.28); border-radius:5px; padding:8px; color:#dbeafe; background:linear-gradient(145deg,rgba(12,48,85,.82),rgba(7,30,55,.88)); font-size:11px; transition:filter .18s ease,transform .18s ease; }.warranty-actions button:hover { filter:brightness(1.18); transform:translateY(-1px); }.warranty-actions .whatsapp { color:#86efac; border-color:rgba(34,197,94,.38); background:rgba(22,101,52,.14); }.warranty-actions .danger { color:#fca5a5; border-color:rgba(239,68,68,.4); background:rgba(239,68,68,.07); }.warranty-empty-detail { min-height:180px; align-content:center; }
@media(max-width:1150px){.warranty-layout{grid-template-columns:1fr}.warranty-detail{order:-1}.warranty-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}

.warranty-full-view { display:grid; gap:12px; min-width:0; }
.warranty-full-view svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.7; }
.warranty-full-hero,.warranty-full-kpis article,.warranty-full-card { border:1px solid rgba(96,165,250,.15); border-radius:7px; background:radial-gradient(circle at 84% 0,rgba(37,99,235,.1),transparent 32%),linear-gradient(145deg,rgba(10,35,60,.98),rgba(5,20,38,.97)); box-shadow:inset 0 1px 0 rgba(191,219,254,.07),0 13px 34px rgba(0,0,0,.2); }
.warranty-full-hero { display:flex; min-height:88px; align-items:center; justify-content:space-between; gap:16px; padding:15px 18px; }
.warranty-full-title { display:flex; align-items:center; gap:14px; }.warranty-full-title>button { display:grid; width:27px; height:27px; place-items:center; border:1px solid rgba(96,165,250,.25); border-radius:5px; color:#bfdbfe; background:rgba(9,34,59,.82); }.warranty-full-title>b { display:grid; width:50px; height:50px; place-items:center; border:1px solid #087cff; border-radius:50%; color:#64a8ff; background:rgba(7,58,151,.3); box-shadow:0 0 22px rgba(0,103,255,.25),inset 0 0 18px rgba(37,99,235,.2); }.warranty-full-title>b svg { width:27px; height:27px; }.warranty-full-title h2 { display:flex; align-items:center; gap:9px; margin:0; color:#f8fafc; font-size:18px; }.warranty-full-title p,.warranty-full-title small { display:block; margin:4px 0 0; color:#91a0b5; font-size:10px; }.warranty-full-title em { border-radius:4px; padding:4px 7px; color:#86efac; background:rgba(34,197,94,.16); font-size:9px; font-style:normal; }.warranty-full-title em.warning { color:#fde68a; background:rgba(245,158,11,.16); }.warranty-full-title em.expired,.warranty-full-title em.cancelled { color:#fca5a5; background:rgba(239,68,68,.16); }
.warranty-full-actions { display:flex; flex:0 0 auto; gap:9px; }.warranty-full-actions button,.warranty-full-card>button,.warranty-full-footer button { display:flex; min-height:37px; align-items:center; justify-content:center; gap:7px; border:1px solid rgba(96,165,250,.28); border-radius:5px; padding:8px 13px; color:#dbeafe; background:linear-gradient(145deg,rgba(12,48,85,.82),rgba(7,30,55,.9)); font-size:11px; transition:filter .18s ease,transform .18s ease; }.warranty-full-actions button:hover,.warranty-full-card>button:hover,.warranty-full-footer button:hover { filter:brightness(1.18); transform:translateY(-1px); }.warranty-full-actions .whatsapp { color:#86efac; border-color:rgba(34,197,94,.38); background:rgba(22,101,52,.14); }
.warranty-full-kpis { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; }.warranty-full-kpis article { min-height:86px; padding:13px; }.warranty-full-kpis small { display:block; margin-bottom:12px; color:#91a0b5; font-size:10px; }.warranty-full-kpis article>div { display:flex; align-items:center; gap:10px; }.warranty-full-kpis b { display:grid; width:27px; height:27px; flex:0 0 auto; place-items:center; color:#93c5fd; }.warranty-full-kpis strong,.warranty-full-kpis em { display:block; color:#f8fafc; font-size:12px; font-style:normal; }.warranty-full-kpis em { margin-top:5px; color:#91a0b5; font-size:10px; }
.warranty-full-info-grid { display:grid; grid-template-columns:1fr 1fr 1.08fr; gap:10px; }.warranty-full-card { position:relative; min-width:0; padding:14px; overflow:hidden; }.warranty-full-card::before { position:absolute; inset:0; pointer-events:none; background:linear-gradient(125deg,rgba(255,255,255,.04),transparent 35%); content:""; }.warranty-full-card>* { position:relative; z-index:1; }.warranty-full-card h3 { margin:0 0 13px; color:#f8fafc; font-size:13px; }.warranty-full-card p { display:flex; align-items:center; gap:5px; margin:5px 0 0; color:#91a0b5; font-size:10px; line-height:1.45; }.warranty-full-card strong { color:#f8fafc; font-size:13px; }.warranty-full-card em { display:inline-block; margin-top:5px; border-radius:3px; padding:3px 5px; color:#c4b5fd; background:rgba(124,58,237,.25); font-size:8px; font-style:normal; }.warranty-full-card>button { width:100%; margin-top:14px; }
.warranty-client-card>div,.warranty-full-product { display:flex; min-height:80px; align-items:center; gap:12px; }.warranty-client-card>div>b { display:grid; width:42px; height:42px; flex:0 0 auto; place-items:center; border-radius:50%; color:#fff; background:linear-gradient(145deg,#337dff,#0750d8); box-shadow:0 7px 17px rgba(0,89,255,.24); }.warranty-client-card span em { margin:0 0 0 7px; color:#dbeafe; background:#075be6; }.warranty-client-card svg { width:11px; height:11px; }.warranty-full-product>b { display:grid; width:48px; height:64px; flex:0 0 auto; place-items:center; border:1px solid rgba(96,165,250,.24); border-radius:5px; color:#8dc1ff; background:linear-gradient(145deg,rgba(11,57,103,.85),rgba(6,29,54,.96)); box-shadow:inset 0 1px 0 rgba(191,219,254,.08); }.warranty-full-product>b svg { width:23px; height:23px; }
.warranty-full-bottom { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(285px,.85fr); gap:10px; }.warranty-history>div { display:grid; gap:4px; }.warranty-history article { display:grid; grid-template-columns:14px 70px 1fr; gap:10px; min-height:58px; color:#91a0b5; font-size:10px; }.warranty-history article>b { position:relative; width:8px; height:8px; margin-top:4px; border-radius:50%; background:#22c55e; box-shadow:0 0 9px rgba(34,197,94,.7); }.warranty-history article>b::after { position:absolute; top:11px; left:3px; width:1px; height:43px; background:rgba(96,165,250,.28); content:""; }.warranty-history article:last-child>b::after { display:none; }.warranty-history time { color:#91a0b5; line-height:1.45; }.warranty-history span p { margin-top:4px; }.warranty-full-side { display:grid; gap:10px; }.warranty-condition { color:#b9c7d8!important; }.warranty-condition svg { width:12px; height:12px; flex:0 0 auto; color:#4ade80; }.warranty-full-footer { display:grid; grid-template-columns:1fr 1.35fr; gap:8px; }.warranty-full-footer .danger { color:#fca5a5; border-color:rgba(239,68,68,.5); background:rgba(239,68,68,.07); }.warranty-full-footer .primary { color:#fff; border-color:#087cff; background:linear-gradient(90deg,#075be6,#087cff); box-shadow:0 7px 18px rgba(0,97,255,.2); }
@media(max-width:860px){.warranty-full-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}.warranty-full-info-grid{grid-template-columns:1fr 1fr}.warranty-full-info-grid>:last-child{grid-column:1/-1}.warranty-full-bottom{grid-template-columns:1fr}}
@media(max-width:760px){.warranty-full-hero{align-items:flex-start;flex-direction:column}.warranty-full-actions{width:100%;flex-wrap:wrap}.warranty-full-kpis,.warranty-full-info-grid{grid-template-columns:1fr}.warranty-full-info-grid>:last-child{grid-column:auto}.warranty-full-footer{grid-template-columns:1fr}}

.warranty-full-view { max-width:1440px; gap:11px; margin:0 auto; padding:1px; }
.warranty-full-hero,.warranty-full-kpis article,.warranty-full-card { border-color:rgba(96,165,250,.12); background:radial-gradient(circle at 88% 0,rgba(30,90,173,.14),transparent 31%),linear-gradient(135deg,rgba(9,31,54,.99),rgba(5,20,37,.98)); box-shadow:inset 0 1px 0 rgba(191,219,254,.075),inset 0 -1px 0 rgba(0,0,0,.22),0 11px 28px rgba(0,0,0,.2); }
.warranty-full-hero { min-height:91px; padding:15px 20px; }.warranty-full-title { gap:16px; }.warranty-full-title>b { width:54px; height:54px; }.warranty-full-title h2 { font-size:19px; letter-spacing:0; }.warranty-full-title p,.warranty-full-title small { font-size:10px; }
.warranty-full-actions { gap:10px; }.warranty-full-actions button { min-height:38px; min-width:92px; padding:8px 14px; }.warranty-full-actions .whatsapp { min-width:164px; }.warranty-more-wrap { position:relative; }.warranty-more-wrap>button { min-width:112px; }.warranty-more-menu { position:absolute; top:44px; right:0; z-index:20; display:grid; width:168px; gap:3px; border:1px solid rgba(96,165,250,.22); border-radius:6px; padding:5px; background:#071a2d; box-shadow:0 16px 28px rgba(0,0,0,.38); }.warranty-more-menu button { display:flex; align-items:center; gap:7px; border:0; border-radius:4px; padding:9px; color:#dbeafe; background:transparent; font-size:10px; text-align:left; }.warranty-more-menu button:hover { background:rgba(37,99,235,.16); }
.warranty-full-kpis { grid-template-columns:1.08fr 1fr 1fr 1.08fr 1.08fr; gap:10px; }.warranty-full-kpis article { min-height:88px; padding:13px 15px; }.warranty-full-kpis article:nth-child(1) b { color:#dbeafe; }.warranty-full-kpis article:nth-child(2) b { color:#c4b5fd; }.warranty-full-kpis article:nth-child(3) b { color:#4ade80; }.warranty-full-kpis article:nth-child(4) b { color:#bfdbfe; }.warranty-full-kpis article:nth-child(5) b { color:#dbeafe; }.warranty-full-kpis small { margin-bottom:11px; font-size:9px; }.warranty-full-kpis strong { font-size:13px; }.warranty-full-kpis em { font-size:10px; }
.warranty-full-info-grid { grid-template-columns:1.08fr 1.08fr 1.2fr; gap:10px; }.warranty-full-card { padding:14px 16px; }.warranty-full-card h3 { margin-bottom:12px; font-size:13px; }.warranty-full-card p { font-size:10px; }.warranty-full-card>button { min-height:36px; margin-top:12px; }
.warranty-client-card>div,.warranty-full-product { min-height:90px; }.warranty-full-product>b { width:51px; height:70px; overflow:hidden; }.warranty-full-product>b.phone-preview,.warranty-full-product>b.part-preview { border:0; background:transparent; box-shadow:none; }.warranty-full-product>b.phone-preview svg,.warranty-full-product>b.part-preview svg { width:40px; height:67px; }.warranty-info-line>b.phone-preview { width:43px; height:54px; overflow:hidden; border-color:rgba(96,165,250,.34); background:linear-gradient(145deg,rgba(11,57,103,.9),rgba(6,29,54,.98)); box-shadow:inset 0 1px 0 rgba(191,219,254,.1),0 7px 17px rgba(0,89,255,.16); }.warranty-info-line>b.phone-preview svg { width:31px; height:51px; }
.warranty-full-bottom { grid-template-columns:minmax(0,1.85fr) minmax(310px,1fr); gap:10px; }.warranty-history { min-height:284px; }.warranty-history article { grid-template-columns:14px 76px 1fr; min-height:58px; }.warranty-full-side { align-content:start; }.warranty-condition { margin-top:7px!important; }
@media(max-width:860px){.warranty-full-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}.warranty-full-info-grid{grid-template-columns:1fr 1fr}.warranty-full-info-grid>:last-child{grid-column:1/-1}.warranty-full-bottom{grid-template-columns:1fr}}

.warranty-history-modern { display:grid; min-height:300px; gap:14px; }
.warranty-history-modern header { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.warranty-history-modern header p { margin:5px 0 0; color:#91a0b5; font-size:10px; line-height:1.5; }
.warranty-history-modern header em { display:inline-flex; flex:0 0 auto; align-items:center; border:1px solid rgba(34,197,94,.22); border-radius:999px; padding:6px 9px; color:#bbf7d0; background:rgba(34,197,94,.12); font-size:10px; font-style:normal; font-weight:900; }
.warranty-history-modern header em.warning { color:#fde68a; border-color:rgba(245,158,11,.28); background:rgba(245,158,11,.13); }
.warranty-history-modern header em.expired,.warranty-history-modern header em.cancelled { color:#fecaca; border-color:rgba(239,68,68,.3); background:rgba(239,68,68,.13); }
.warranty-progress { height:10px; overflow:hidden; border:1px solid rgba(96,165,250,.2); border-radius:999px; background:rgba(4,15,28,.82); box-shadow:inset 0 1px 4px rgba(0,0,0,.28); }
.warranty-progress span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#087cff,#22c55e); box-shadow:0 0 20px rgba(34,197,94,.28); }
.warranty-progress-labels { display:flex; align-items:center; justify-content:space-between; gap:10px; color:#91a0b5; font-size:10px; }
.warranty-progress-labels strong { color:#dbeafe; font-size:11px; }
.warranty-modern-timeline { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.warranty-modern-timeline article { position:relative; min-height:96px; border:1px solid rgba(96,165,250,.16); border-radius:8px; padding:13px 13px 13px 42px; background:linear-gradient(145deg,rgba(8,28,50,.82),rgba(4,17,32,.86)); box-shadow:inset 0 1px 0 rgba(191,219,254,.05); }
.warranty-modern-timeline article>b { position:absolute; top:16px; left:14px; width:12px; height:12px; border-radius:50%; background:#60a5fa; box-shadow:0 0 0 6px rgba(96,165,250,.12),0 0 18px rgba(96,165,250,.24); }
.warranty-modern-timeline article.done>b { background:#22c55e; box-shadow:0 0 0 6px rgba(34,197,94,.12),0 0 18px rgba(34,197,94,.24); }
.warranty-modern-timeline article.pending>b,.warranty-modern-timeline article.warning>b { background:#fbbf24; box-shadow:0 0 0 6px rgba(245,158,11,.12),0 0 18px rgba(245,158,11,.22); }
.warranty-modern-timeline article.expired>b,.warranty-modern-timeline article.cancelled>b { background:#f87171; box-shadow:0 0 0 6px rgba(239,68,68,.12),0 0 18px rgba(239,68,68,.22); }
.warranty-modern-timeline time { color:#60a5fa; font-size:10px; font-weight:900; text-transform:uppercase; }
.warranty-modern-timeline strong { display:block; margin-top:7px; color:#f8fafc; font-size:13px; }
.warranty-modern-timeline p { margin:5px 0 0; color:#91a0b5; font-size:10px; line-height:1.5; }
.warranty-history-modern footer { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.warranty-history-modern footer button { display:flex; min-height:38px; align-items:center; justify-content:center; gap:7px; border:1px solid rgba(96,165,250,.28); border-radius:6px; color:#dbeafe; background:rgba(37,99,235,.12); font-size:11px; transition:filter .18s ease,transform .18s ease; }
.warranty-history-modern footer button:hover { filter:brightness(1.16); transform:translateY(-1px); }
.warranty-history-modern footer button:last-child { color:#bbf7d0; border-color:rgba(34,197,94,.38); background:rgba(22,101,52,.14); }
.warranty-actions .delete,.warranty-full-footer .delete,.warranty-more-menu button[data-warranty-action="delete"] { color:#fecaca; border-color:rgba(239,68,68,.5); background:rgba(127,29,29,.16); }
.warranty-full-footer { grid-template-columns:repeat(3,minmax(0,1fr)); }
@media(max-width:760px){.warranty-modern-timeline,.warranty-history-modern footer{grid-template-columns:1fr}.warranty-progress-labels{align-items:flex-start;flex-direction:column}.warranty-full-footer{grid-template-columns:1fr}}

.about-view { display:grid; gap:14px; }
.about-head-actions { display:flex; flex-wrap:wrap; gap:9px; }
.about-head-actions button,.about-support-card button { min-height:39px; border:1px solid rgba(96,165,250,.28); border-radius:7px; padding:9px 14px; color:#dbeafe; background:rgba(37,99,235,.12); font-weight:800; }
.about-head-actions .primary,.about-support-card .primary { color:#fff; border-color:#087cff; background:linear-gradient(90deg,#075be6,#087cff); }
.about-hero,.about-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.about-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
.about-hero article,.about-info-card,.about-support-card { border:1px solid rgba(96,165,250,.15); border-radius:9px; padding:16px; background:radial-gradient(circle at 90% 0,rgba(37,99,235,.13),transparent 36%),linear-gradient(145deg,rgba(10,35,60,.98),rgba(5,20,38,.97)); box-shadow:inset 0 1px 0 rgba(191,219,254,.07),0 12px 30px rgba(0,0,0,.18); }
.about-hero small,.about-info-card small { display:block; color:#91a0b5; font-size:10px; font-weight:900; text-transform:uppercase; }
.about-hero strong,.about-info-card strong { display:block; margin-top:8px; color:#f8fafc; font-size:20px; word-break:break-word; }
.about-info-card strong { font-size:13px; }
.about-hero strong.active { color:#86efac; }
.about-hero strong.expired,.about-hero strong.inactive { color:#fca5a5; }
.about-hero p,.about-info-card p,.about-support-card p { margin:7px 0 0; color:#91a0b5; font-size:11px; line-height:1.55; }
.about-support-card { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.about-support-card h3 { margin:0; color:#f8fafc; }
.about-support-card>div:last-child { display:flex; flex-wrap:wrap; gap:9px; }
@media(max-width:980px){.about-hero,.about-grid{grid-template-columns:1fr 1fr}.about-support-card{align-items:flex-start;flex-direction:column}}
@media(max-width:640px){.about-hero,.about-grid{grid-template-columns:1fr}}

body.official-open .tabs {
  grid-column: 2 / 4;
  grid-row: 1;
  display: none;
  align-items: center;
  gap: 10px;
  min-height: 102px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
  padding: 24px 464px 18px 24px;
  background: rgba(7, 20, 33, 0.86);
}

body.official-open:not(.checkout-visible) .tabs {
  grid-column: 2;
  padding-right: 24px;
}

body.official-open .tabs::after {
  content: "Olá, Técnico\A Administrador";
  white-space: pre;
  margin-left: 1150px;
  color: #f8fafc;
  font-size: 16px;
  line-height: 1.35;
}

body.official-open .tabs button {
  min-height: 42px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  color: #dbe7f7;
  background: rgba(15, 33, 50, 0.50);
}

body.official-open .tabs button.active {
  color: #fff;
  background: #1f6bff;
}

body.official-open .toolbar {
  grid-column: 2;
  grid-row: 2;
  display: none;
  padding: 28px 28px 12px 22px;
  background: transparent;
}

body.official-open .toolbar-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

body.official-open .toolbar-group,
body.official-open .toolbar-group.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  width: auto;
}

body.official-open .toolbar .search {
  display: flex;
  order: -2;
  min-width: min(100%, 400px);
}

body.official-open .toolbar button,
body.official-open .toolbar select,
body.official-open .toolbar input {
  border-color: rgba(148, 163, 184, 0.18);
  color: #f8fafc;
  background: rgba(11, 27, 43, 0.92);
}

body.official-open .toolbar .primary {
  background: linear-gradient(90deg, #1f6bff, #1557ff);
}

body.official-open .metrics {
  grid-column: 2;
  grid-row: 3;
  display: none;
  gap: 12px;
  padding: 0 28px 12px 22px;
}

body.official-open .metrics article {
  min-width: 164px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 8px;
  padding: 14px 16px;
  color: #f8fafc;
  background: rgba(15, 33, 50, 0.88);
  box-shadow: none;
}

body.official-open .metrics span {
  color: #cbd5e1;
}

body.official-open .metrics strong {
  font-size: 20px;
}

body.official-open .group-tabs {
  grid-column: 2;
  grid-row: 3;
  align-self: end;
  display: none;
  gap: 10px;
  padding: 78px 28px 0 22px;
  background: transparent;
}

body.official-open .group-tab {
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 7px;
  color: #cbd5e1;
  background: rgba(11, 27, 43, 0.82);
}

body.official-open .group-tab.active {
  color: #fff;
  background: #1f6bff;
}

body.official-open .board {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  max-height: calc(100vh - 92px);
  overflow: auto;
  padding: 28px 28px 28px 22px;
  background: transparent;
}

body.official-open .group {
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-left: 0;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(15, 33, 50, 0.78);
  box-shadow: none;
}

body.official-open .group-title {
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  color: #f8fafc;
  background: rgba(10, 24, 39, 0.74);
}

body.official-open .table {
  min-width: 1020px;
}

body.official-open .cell {
  border-color: rgba(148, 163, 184, 0.12);
  color: #dbe7f7;
  background: rgba(9, 22, 36, 0.56);
}

body.official-open .header-cell {
  color: #91a0b5;
  background: rgba(8, 19, 31, 0.9);
}

body.official-open .client-balance {
  background: rgba(31, 107, 255, 0.12);
}

body.official-open .order-panel {
  grid-column: 3;
  grid-row: 2;
  align-self: stretch;
  display: grid;
  grid-template-rows: auto auto auto auto minmax(120px, 1fr) auto auto;
  margin: 13px 14px 32px 8px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 8px;
  padding: 22px;
  background: linear-gradient(180deg, rgba(15, 33, 50, 0.96), rgba(13, 28, 44, 0.92));
  box-shadow: -18px 0 80px rgba(0, 0, 0, 0.16);
}

.inventory-view {
  min-height: 100%;
}

.inventory-view header {
  margin-bottom: 18px;
}

.inventory-view-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.inventory-view-head .primary {
  min-height: 42px;
  border: 0;
  border-radius: 7px;
  padding: 0 18px;
  color: #fff;
  background: #1f6bff;
}

.inventory-view header span {
  color: #1f6bff;
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}

.inventory-view h2 {
  margin: 4px 0 4px;
  color: #f8fafc;
  font-size: 30px;
}

.inventory-view p {
  color: #91a0b5;
}

.dashboard-view { display: grid; min-height: 0; align-content: start; gap: 14px; }
.dashboard-welcome { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin: 0; border-bottom: 1px solid rgba(148,163,184,.14); padding: 4px 0 16px; }
.dashboard-welcome span,
.dashboard-guide header span { color: #60a5fa; font-size: 11px; font-weight: 900; text-transform: uppercase; }
.dashboard-welcome h2 { margin: 5px 0; font-size: 28px; }
.dashboard-welcome p { max-width: 820px; margin: 0; line-height: 1.5; }
.dashboard-summary { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px; }
.dashboard-summary article,
.dashboard-guide { border: 1px solid rgba(148,163,184,.14); border-radius: 8px; background: rgba(13,31,48,.84); }
.dashboard-summary article { padding: 11px 13px; }
.dashboard-summary span,
.dashboard-summary small { display: block; color: #91a0b5; font-size: 11px; }
.dashboard-summary strong { display: block; margin: 4px 0; color: #bfdbfe; font-size: 21px; }
.dashboard-summary article.warn { border-color: rgba(239,68,68,.34); background: rgba(239,68,68,.08); }
.dashboard-summary article.warn strong { color: #fca5a5; }
.dashboard-guide { overflow: hidden; }
.dashboard-guide > header { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0; border-bottom: 1px solid rgba(148,163,184,.12); padding: 13px; }
.dashboard-guide h3 { margin: 3px 0; color: #f8fafc; font-size: 17px; }
.dashboard-guide p { margin: 0; font-size: 12px; }
.dashboard-guide > header > strong { color: #bfdbfe; font-size: 12px; }
.dashboard-task-list { display: grid; }
.dashboard-task { display: grid; grid-template-columns: 28px minmax(210px,1.5fr) minmax(150px,1fr) 116px 92px minmax(58px,max-content); gap: 10px; align-items: center; min-height: 58px; border-top: 1px solid rgba(148,163,184,.1); padding: 9px 13px; color: #cbd5e1; font-size: 12px; }
.dashboard-task:first-child { border-top: 0; }
.dashboard-task > b { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 50%; color: #bfdbfe; background: rgba(31,107,255,.18); }
.dashboard-task strong { display: block; color: #f8fafc; }
.dashboard-task small { display: block; margin-top: 3px; color: #91a0b5; }
.dashboard-task.late { background: rgba(239,68,68,.05); }
.dashboard-task.today { background: rgba(31,107,255,.05); }
.dashboard-orientation { color: #bfdbfe; font-weight: 800; }
.dashboard-task button { border: 1px solid rgba(96,165,250,.3); border-radius: 6px; padding: 7px; color: #bfdbfe; background: rgba(31,107,255,.12); }
.dashboard-task-actions { display: flex; flex-wrap: wrap; gap: 5px; }
.dashboard-empty { padding: 18px; }
.dashboard-empty strong { color: #f8fafc; }
.dashboard-empty p { margin: 4px 0 0; }
@media (max-width: 1000px) { .dashboard-summary { grid-template-columns: repeat(2,minmax(0,1fr)); } .dashboard-guide { overflow-x: auto; } .dashboard-task { min-width: 850px; } }

.dashboard-command-center { gap: 0; }
.dashboard-topline { min-height: 54px; padding: 0 0 10px; }
.dashboard-topline h2 { margin: 0; font-size: 23px; }
.dashboard-topline p { margin: 4px 0 0; font-size: 12px; }
.dashboard-shell { display: grid; grid-template-columns: minmax(0,1fr) 292px; gap: 12px; }
.dashboard-main, .dashboard-assistant { display: grid; align-content: start; gap: 10px; min-width: 0; }
.dashboard-panel, .dashboard-kpi { border: 1px solid rgba(96,165,250,.15); border-radius: 8px; background: rgba(8,25,43,.9); box-shadow: inset 0 1px 0 rgba(255,255,255,.03); }
.dashboard-panel h3 { margin: 0; color: #f8fafc; font-size: 14px; }
.dashboard-panel p { margin: 3px 0 0; color: #91a0b5; font-size: 11px; line-height: 1.45; }
.dashboard-kpis { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 9px; }
.dashboard-kpi { display: flex; justify-content: space-between; gap: 8px; min-height: 94px; padding: 13px; }
.dashboard-kpi span, .dashboard-kpi small { display: block; color: #cbd5e1; font-size: 11px; }
.dashboard-kpi strong { display: block; margin: 7px 0 5px; color: #f8fafc; font-size: 22px; }
.dashboard-kpi small { color: #60a5fa; font-size: 10px; }
.dashboard-kpi-icon { display: grid; width: 38px; height: 38px; flex: 0 0 auto; place-items: center; border-radius: 50%; color: #60a5fa; background: rgba(37,99,235,.16); }
.dashboard-kpi.green { background: rgba(5,56,47,.44); }.dashboard-kpi.green .dashboard-kpi-icon { color: #4ade80; background: rgba(34,197,94,.14); }
.dashboard-kpi.purple { background: rgba(40,20,75,.4); }.dashboard-kpi.purple .dashboard-kpi-icon { color: #c084fc; background: rgba(147,51,234,.15); }
.dashboard-kpi.orange { background: rgba(73,43,9,.4); }.dashboard-kpi.orange .dashboard-kpi-icon { color: #fb923c; background: rgba(249,115,22,.15); }
.dashboard-flow-panel { overflow: hidden; padding: 13px; }
.dashboard-flow-panel > header, .dashboard-chart-panel header, .dashboard-recent header, .dashboard-low-stock header, .dashboard-today-flow header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dashboard-flow-panel header em { border-radius: 4px; padding: 2px 5px; color: #bfdbfe; background: #1d4ed8; font-size: 9px; font-style: normal; }
.dashboard-flow-panel header > strong { color: #60a5fa; font-size: 11px; }.dashboard-flow-panel header > strong b { margin-left: 8px; font-size: 17px; }
.dashboard-flow-steps { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); margin: 16px 0 12px; }
.dashboard-flow-steps article { position: relative; display: grid; justify-items: center; gap: 5px; text-align: center; }
.dashboard-flow-steps article:not(:last-child)::after { position: absolute; top: 16px; left: calc(50% + 20px); width: calc(100% - 40px); border-top: 1px solid #3b82f6; content: ""; }
.dashboard-flow-steps b { z-index: 1; display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid #2563eb; border-radius: 50%; color: #93c5fd; background: #092b57; }
.dashboard-flow-steps strong { color: #e2e8f0; font-size: 11px; }.dashboard-flow-steps small { color: #91a0b5; font-size: 10px; }
.dashboard-flow-steps button, .dashboard-flow-panel footer button, .dashboard-recent button, .dashboard-low-stock button, .dashboard-today-flow button { border: 1px solid rgba(59,130,246,.35); border-radius: 5px; padding: 5px 8px; color: #60a5fa; background: rgba(37,99,235,.08); font-size: 10px; }
.dashboard-flow-panel footer { display: flex; align-items: center; gap: 8px; border: 1px solid rgba(96,165,250,.14); border-radius: 5px; padding: 7px 9px; }.dashboard-flow-panel footer span { color: #facc15; }.dashboard-flow-panel footer p { flex: 1; margin: 0; }
.dashboard-analytics-grid, .dashboard-bottom-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 10px; }
.dashboard-chart-panel, .dashboard-status-panel, .dashboard-recent, .dashboard-low-stock { padding: 12px; }
.dashboard-chart-panel header span { border: 1px solid rgba(148,163,184,.18); border-radius: 5px; padding: 5px 8px; color: #94a3b8; font-size: 10px; }
.dashboard-line-chart { height: 145px; margin-top: 6px; }.dashboard-line-chart svg { width: 100%; height: 100%; overflow: visible; }
.dashboard-line-chart path { stroke: rgba(148,163,184,.15); }.dashboard-line-chart polyline { fill: none; stroke: #2684ff; stroke-width: 2; }.dashboard-line-chart circle { fill: #60a5fa; stroke: #dbeafe; stroke-width: 1; }.dashboard-line-chart text { fill: #bfdbfe; font-size: 9px; text-anchor: middle; }.dashboard-line-chart text.day { fill: #94a3b8; }
.dashboard-chart-panel footer { display: flex; gap: 18px; border-top: 1px solid rgba(148,163,184,.12); padding-top: 8px; }.dashboard-chart-panel footer b { color: #91a0b5; font-size: 10px; }.dashboard-chart-panel footer strong { display: block; margin-top: 3px; color: #f8fafc; font-size: 16px; }
.dashboard-donut-wrap { display: flex; align-items: center; justify-content: center; gap: 23px; min-height: 185px; }
.dashboard-donut { display: grid; width: 126px; height: 126px; place-items: center; border-radius: 50%; background: conic-gradient(#1265f3 0 var(--done),#7e22ce var(--done) var(--progress),#f59e0b var(--progress) 100%); }.dashboard-donut::before { grid-area: 1/1; width: 72px; height: 72px; border-radius: 50%; background: #081a2c; content: ""; }.dashboard-donut b { z-index: 1; grid-area: 1/1; color: #f8fafc; text-align: center; font-size: 19px; }.dashboard-donut small { display: block; color: #94a3b8; font-size: 10px; font-weight: 500; }
.dashboard-status-legend { display: grid; gap: 11px; }.dashboard-status-legend span { display: flex; align-items: center; gap: 7px; color: #cbd5e1; font-size: 11px; }.dashboard-status-legend i { width: 8px; height: 8px; border-radius: 50%; background: #f59e0b; }.dashboard-status-legend i.done { background:#1265f3; }.dashboard-status-legend i.progress { background:#7e22ce; }.dashboard-status-legend b { margin-left: auto; color: #f8fafc; }
.dashboard-recent > div, .dashboard-low-stock > div { margin-top: 7px; }.dashboard-recent header > div { display:flex; gap:6px; }.dashboard-recent article, .dashboard-low-stock article { display: grid; align-items: center; gap: 7px; border-top: 1px solid rgba(148,163,184,.1); padding: 8px 0; color: #cbd5e1; font-size: 10px; }.dashboard-recent article { grid-template-columns: 18px 70px 1fr 1.2fr 86px 25px; }.dashboard-recent article.selected { margin-inline:-6px; border-radius:5px; padding-inline:6px; background:rgba(37,99,235,.12); }.dashboard-recent label { display:grid; place-items:center; }.dashboard-recent input { width:13px; height:13px; accent-color:#2563eb; }.dashboard-low-stock article { grid-template-columns: 24px 1fr max-content; }.dashboard-recent .dashboard-delete-selected { border-color:rgba(239,68,68,.34); color:#fca5a5; background:rgba(239,68,68,.09); }
.dashboard-recent article > b, .dashboard-low-stock article > b { color: #bfdbfe; }.dashboard-recent em, .dashboard-low-stock em { border-radius: 4px; padding: 4px 5px; color: #fca5a5; background: rgba(239,68,68,.12); font-size: 9px; font-style: normal; }.dashboard-recent em.done { color: #86efac; background: rgba(34,197,94,.12); }.dashboard-recent button { border: 0; color: #bfdbfe; background: transparent; }.dashboard-low-stock small { display:block; margin-top:3px; color:#91a0b5; }
.dashboard-assistant { gap: 9px; }
.dashboard-assistant-card, .dashboard-today-flow, .dashboard-tip { padding: 11px; background: linear-gradient(150deg,rgba(9,29,52,.98),rgba(5,20,38,.95)); }
.dashboard-assistant-card > h3 { font-size: 14px; }
.dashboard-assistant-intro { display: grid; grid-template-columns: 58px 1fr; align-items: center; gap: 7px; margin: 10px 0 12px; }
.dashboard-assistant-intro p { min-height: 60px; border: 1px solid rgba(96,165,250,.12); border-radius: 6px; padding: 9px; background: rgba(16,43,75,.55); font-size: 10px; }
.dashboard-assistant-intro p b { color: #38bdf8; }
.dashboard-bot { position:relative; display:grid; width:54px; height:54px; place-items:center; border:0; border-radius:46% 46% 42% 42%; color:#fff; background:linear-gradient(145deg,#bfdbfe 0 23%,#3986f6 24% 72%,#1d4ed8 73%); box-shadow:0 8px 18px rgba(37,99,235,.28); font-size:12px; font-weight:900; }
.dashboard-bot::before { position:absolute; top:-9px; width:2px; height:10px; border-radius:4px; background:#93c5fd; content:""; }.dashboard-bot::after { position:absolute; top:-12px; width:5px; height:5px; border-radius:50%; background:#bfdbfe; content:""; }
.dashboard-bot i { position:absolute; top:9px; width:38px; height:21px; border:2px solid #93c5fd; border-radius:12px; background:#081b50; }.dashboard-bot i::before,.dashboard-bot i::after { position:absolute; top:6px; width:5px; height:5px; border-radius:50%; background:#67e8f9; box-shadow:0 0 7px #38bdf8; content:""; }.dashboard-bot i::before{left:8px}.dashboard-bot i::after{right:8px}
.dashboard-bot span { position:absolute; bottom:7px; width:30px; height:11px; border-radius:50%; background:#60a5fa; }.dashboard-bot b { z-index:1; margin-top:27px; font-size:8px; }
.dashboard-next-action { border: 1px solid rgba(96,165,250,.12); border-radius: 7px; padding: 9px; background: rgba(11,34,61,.62); }.dashboard-next-action > strong { display:block; margin-bottom:8px; color:#cbd5e1; font-size:10px; }.dashboard-next-action > div { display:flex; gap:9px; border:1px solid rgba(59,130,246,.36); border-bottom:0; border-radius:6px 6px 0 0; padding:9px; }.dashboard-action-icon { display:grid; width:34px; height:34px; flex:0 0 auto; place-items:center; border-radius:6px; color:#bfdbfe; background:rgba(37,99,235,.46); }.dashboard-next-action h4 { margin:0; color:#f8fafc; font-size:11px; }.dashboard-next-action p { margin-top:4px; font-size:9px; }.dashboard-next-action button { display:flex; justify-content:center; gap:26px; width:100%; margin:0; border:0; border-radius:0 0 5px 5px; padding:8px; color:#fff; background:#0f62fe; font-size:11px; }.dashboard-next-action button b { font-size:15px; line-height:10px; }
.dashboard-today-flow header { margin-bottom:3px; }.dashboard-today-flow header b { border:1px solid rgba(59,130,246,.45); border-radius:12px; padding:3px 6px; color:#60a5fa; font-size:10px; }.dashboard-today-flow article { position:relative; display:grid; grid-template-columns:22px 1fr max-content; gap:7px; align-items:center; min-height:45px; padding:6px 0; }.dashboard-today-flow article:not(:last-child)::after { position:absolute; top:28px; bottom:-15px; left:8px; border-left:1px solid #2563eb; content:""; }.dashboard-today-flow article > b { z-index:1; display:grid; width:17px; height:17px; place-items:center; border:1px solid #60a5fa; border-radius:50%; color:#bfdbfe; background:#1d4ed8; font-size:8px; }.dashboard-today-flow .flow-step-2 > b { border-color:#a855f7;background:#581c87 }.dashboard-today-flow .flow-step-3 > b { border-color:#f59e0b;background:#78350f }.dashboard-today-flow .flow-step-4 > b { border-color:#22d3ee;background:#155e75 }.dashboard-today-flow .flow-step-5 > b { border-color:#4ade80;background:#166534 }.dashboard-today-flow strong,.dashboard-today-flow small { display:block; color:#e2e8f0; font-size:10px; }.dashboard-today-flow small { margin-top:3px; color:#91a0b5; }.dashboard-today-flow button { min-width:58px; padding:5px 6px; }
.dashboard-tip { display:flex; gap:9px; }.dashboard-tip > b { color:#60a5fa; font-size:24px; }

/* Dashboard command center: luminous operational cards */
.dashboard-kpis { gap: 14px; }
.dashboard-kpi { position:relative; min-height:130px; overflow:hidden; border-color:rgba(37,99,235,.58); border-radius:9px; padding:19px 17px; background:linear-gradient(135deg,rgba(5,31,76,.97),rgba(5,23,53,.9)); box-shadow:inset 0 1px 0 rgba(147,197,253,.12),0 12px 28px rgba(0,0,0,.18); }
.dashboard-kpi::before { position:absolute; inset:0; pointer-events:none; background:linear-gradient(115deg,rgba(255,255,255,.045),transparent 42%); content:""; }
.dashboard-kpi span { color:#f1f5f9; font-size:15px; }.dashboard-kpi strong { margin:11px 0 13px; color:#fff; font-size:34px; line-height:1; text-shadow:0 2px 12px rgba(255,255,255,.12); }.dashboard-kpi small { color:#bfdbfe; font-size:12px; }.dashboard-kpi small i { color:#1f8cff; font-size:17px; font-style:normal; }
.dashboard-kpi-icon { width:54px; height:54px; align-self:center; color:#2294ff; background:rgba(13,95,218,.2); box-shadow:0 0 24px rgba(0,102,255,.16); font-size:25px; }
.dashboard-kpi-icon svg,.dashboard-flow-steps b svg { width:58%; height:58%; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.8; }.dashboard-uploaded-icon { width:70%; height:70%; object-fit:contain; filter:drop-shadow(0 0 7px currentColor); }
.dashboard-kpi.green { border-color:rgba(16,185,129,.42); background:linear-gradient(135deg,rgba(4,55,52,.93),rgba(4,39,40,.82)); }.dashboard-kpi.green .dashboard-kpi-icon { color:#42e66d;background:rgba(22,163,74,.18);box-shadow:0 0 24px rgba(34,197,94,.14) }.dashboard-kpi.green small i { color:#42e66d; }
.dashboard-kpi.purple { border-color:rgba(139,92,246,.4); background:linear-gradient(135deg,rgba(34,23,78,.93),rgba(24,21,65,.86)); }.dashboard-kpi.purple .dashboard-kpi-icon { color:#a855f7;background:rgba(126,34,206,.2);box-shadow:0 0 24px rgba(147,51,234,.16) }.dashboard-kpi.purple small i { color:#a855f7; }
.dashboard-kpi.orange { border-color:rgba(245,158,11,.42); background:linear-gradient(135deg,rgba(67,44,16,.88),rgba(46,31,16,.82)); }.dashboard-kpi.orange .dashboard-kpi-icon { color:#ffa311;background:rgba(217,119,6,.2);box-shadow:0 0 24px rgba(245,158,11,.16) }.dashboard-kpi.orange small i { color:#ffa311; }
.dashboard-kpi.neutral { border-color:rgba(96,165,250,.25); background:linear-gradient(135deg,rgba(9,35,60,.94),rgba(7,27,50,.88)); }.dashboard-kpi.neutral .dashboard-kpi-icon { color:#b8c8df;background:rgba(96,165,250,.12) }.dashboard-kpi.neutral small i { color:#42e66d; }
.dashboard-flow-panel { border-color:rgba(96,165,250,.25); border-radius:10px; padding:19px; background:radial-gradient(circle at 50% 42%,rgba(14,79,139,.16),transparent 46%),linear-gradient(145deg,rgba(4,25,47,.98),rgba(5,20,38,.94)); box-shadow:inset 0 1px 0 rgba(147,197,253,.06),0 16px 34px rgba(0,0,0,.2); }
.dashboard-flow-panel > header { margin-bottom:21px; }.dashboard-flow-panel h3 { display:flex; align-items:center; gap:8px; color:#f8fafc; font-size:19px; }.dashboard-flow-mark { display:grid; width:30px; height:30px; place-items:center; border:2px solid #1789ff; border-radius:50%; color:#38a5ff; box-shadow:0 0 18px rgba(23,137,255,.25); font-size:15px; font-style:normal; }.dashboard-flow-panel header em { padding:3px 7px; color:#38a5ff; background:rgba(15,90,203,.52); }.dashboard-flow-panel header p { margin-left:38px; font-size:13px; }
.dashboard-flow-panel header > strong { display:flex; align-items:center; gap:14px; border:1px solid rgba(96,165,250,.22); border-radius:7px; padding:6px 8px 6px 15px; color:#1789ff; background:rgba(6,28,53,.72); font-size:14px; }.dashboard-flow-panel header > strong b { display:grid; width:51px; height:51px; place-items:center; margin:0; border-radius:50%; color:#fff; background:radial-gradient(circle,#0b284c 55%,transparent 56%),conic-gradient(#087cff 0 var(--flow),rgba(37,99,235,.2) var(--flow) 100%); box-shadow:0 0 16px rgba(8,124,255,.22); font-size:15px; }
.dashboard-flow-steps { margin:7px 0 19px; }.dashboard-flow-steps article { gap:7px; }.dashboard-flow-steps article:not(:last-child)::after { top:29px; left:calc(50% + 36px); width:calc(100% - 72px); border-top:2px solid rgba(56,189,248,.46); }.dashboard-flow-steps article:not(:last-child)::before { position:absolute; z-index:2; top:21px; right:-5px; color:#dbeafe; content:"›"; font-size:31px; font-weight:200; line-height:1; }
.dashboard-flow-steps b { width:58px; height:58px; border:0; color:#e8f3ff; background:#0666ee; box-shadow:0 0 0 11px rgba(8,100,245,.15),0 0 25px rgba(8,100,245,.46); font-size:27px; }.dashboard-flow-steps .step-2 b { color:#dec5ff;background:#6523b6;box-shadow:0 0 0 11px rgba(126,34,206,.16),0 0 25px rgba(126,34,206,.42) }.dashboard-flow-steps .step-3 b { color:#ffe2a3;background:#b46600;box-shadow:0 0 0 11px rgba(217,119,6,.16),0 0 25px rgba(217,119,6,.4) }.dashboard-flow-steps .step-4 b { color:#bdfaff;background:#087e91;box-shadow:0 0 0 11px rgba(8,145,178,.15),0 0 25px rgba(8,145,178,.4) }.dashboard-flow-steps .step-5 b { color:#c9ffd5;background:#15803d;box-shadow:0 0 0 11px rgba(22,163,74,.15),0 0 25px rgba(22,163,74,.4) }
.dashboard-flow-steps strong { margin-top:14px; color:#f8fafc; font-size:14px; }.dashboard-flow-steps small { color:#cbd5e1; font-size:12px; }.dashboard-flow-steps button { min-width:124px; margin-top:8px; border-color:rgba(96,165,250,.38); padding:8px 12px; color:#d5e7ff; background:rgba(5,26,49,.7); font-size:12px; }.dashboard-flow-steps .step-1 button { color:#fff;background:linear-gradient(90deg,#0868f5,#0755cd);box-shadow:0 4px 14px rgba(8,104,245,.22) }
.dashboard-flow-panel footer { min-height:52px; border-color:rgba(96,165,250,.14); padding:8px 14px; background:rgba(10,35,61,.46); }.dashboard-flow-panel footer span { font-size:23px; }.dashboard-flow-panel footer p { color:#dbe7f7; font-size:13px; }.dashboard-flow-panel footer button { min-width:170px; padding:8px 12px; color:#dbeafe; font-size:12px; }
@media (max-width: 1400px) { body.official-open .inventory-topbar { gap:10px;padding-inline:12px }.inventory-topbar-greeting { min-width:190px }.inventory-topbar-greeting strong { font-size:17px }.inventory-topbar-greeting small { font-size:11px }.inventory-topbar-search { min-width:220px;max-width:360px }.inventory-top-stat,.inventory-top-date { gap:8px;padding-inline:10px }.inventory-top-stat small,.inventory-top-date small { font-size:9px }.inventory-top-stat b { font-size:15px } }
@media (max-width: 1180px) { .inventory-topbar-greeting { min-width:150px; }.inventory-topbar-search { min-width:160px; }.inventory-top-date { display:none; } }
@media (max-width: 820px) { body.official-open .inventory-topbar { gap:7px; padding-inline:8px; }.inventory-topbar-greeting small,.inventory-top-stat small { display:none; }.inventory-topbar-greeting { min-width:auto; }.inventory-topbar-greeting strong { font-size:12px; }.inventory-top-stat { min-width:36px; padding:6px 8px; }.inventory-topbar-search kbd { display:none; } }
@media (max-width: 1350px) { .dashboard-shell { grid-template-columns: 1fr; }.dashboard-assistant { grid-template-columns: repeat(3,minmax(0,1fr)); }.dashboard-kpis { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media (max-width: 900px) { .dashboard-assistant,.dashboard-kpis,.dashboard-analytics-grid,.dashboard-bottom-grid { grid-template-columns: 1fr; }.dashboard-flow-steps { overflow-x:auto; grid-template-columns:repeat(5,150px); padding-bottom:5px; }.dashboard-recent { overflow-x:auto; }.dashboard-recent > div { min-width:600px; } }

/* Balanced dashboard proportions and expanded right workflow rail */
.dashboard-command-center { width:100%; max-width:1540px; margin-inline:auto; }
.dashboard-shell { grid-template-columns:minmax(0,1fr) 340px; gap:15px; }
.dashboard-main { gap:13px; }
.dashboard-assistant { gap:12px; }
.dashboard-panel { box-shadow:inset 0 1px 0 rgba(191,219,254,.045),0 12px 26px rgba(0,0,0,.14); }
.dashboard-assistant-card,.dashboard-today-flow,.dashboard-tip { border-color:rgba(96,165,250,.2); border-radius:9px; padding:14px; background:linear-gradient(145deg,rgba(8,31,56,.98),rgba(5,20,39,.96)); box-shadow:inset 0 1px 0 rgba(191,219,254,.06),0 14px 28px rgba(0,0,0,.18); }
.dashboard-assistant-card::before,.dashboard-today-flow::before,.dashboard-tip::before { pointer-events:none; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(120deg,rgba(255,255,255,.035),transparent 46%); content:""; }
.dashboard-assistant-card,.dashboard-today-flow,.dashboard-tip { position:relative; overflow:hidden; }
.dashboard-assistant-card > *,.dashboard-today-flow > *,.dashboard-tip > * { position:relative; z-index:1; }
.dashboard-assistant-card > h3,.dashboard-today-flow h3 { font-size:16px; }
.dashboard-assistant-intro { grid-template-columns:67px 1fr; gap:10px; margin:14px 0; }
.dashboard-assistant-intro p { min-height:72px; padding:11px; font-size:11px; }
.dashboard-bot { width:63px; height:63px; box-shadow:0 0 0 7px rgba(37,99,235,.08),0 9px 22px rgba(37,99,235,.34); }
.dashboard-bot i { top:11px; width:44px; height:24px; }
.dashboard-next-action { padding:11px; }.dashboard-next-action > strong { margin-bottom:10px; font-size:11px; }.dashboard-next-action > div { gap:10px; padding:11px; }.dashboard-action-icon { width:40px; height:40px; box-shadow:0 0 16px rgba(37,99,235,.24); }.dashboard-next-action h4 { font-size:12px; }.dashboard-next-action p { font-size:10px; }.dashboard-next-action button { min-height:36px; font-size:12px; background:linear-gradient(90deg,#075be6,#087cff); box-shadow:0 7px 17px rgba(8,124,255,.2); transition:filter .18s ease,transform .18s ease; }.dashboard-next-action button:hover { filter:brightness(1.13); transform:translateY(-1px); }
.dashboard-today-flow { padding:15px 14px 13px; }
.dashboard-today-flow header { margin-bottom:8px; }.dashboard-today-flow header b { padding:4px 8px; box-shadow:0 0 13px rgba(37,99,235,.16); font-size:11px; }
.dashboard-today-flow article { grid-template-columns:28px 1fr max-content; gap:10px; min-height:60px; padding:9px 0; }
.dashboard-today-flow article:not(:last-child)::after { top:37px; bottom:-23px; left:11px; border-left:2px solid rgba(37,99,235,.55); box-shadow:0 0 8px rgba(37,99,235,.18); }
.dashboard-today-flow article > b { width:23px; height:23px; border-width:2px; box-shadow:0 0 0 5px rgba(37,99,235,.08),0 0 14px rgba(37,99,235,.3); font-size:10px; }
.dashboard-today-flow .flow-step-2 > b { box-shadow:0 0 0 5px rgba(147,51,234,.08),0 0 14px rgba(147,51,234,.28) }.dashboard-today-flow .flow-step-3 > b { box-shadow:0 0 0 5px rgba(245,158,11,.08),0 0 14px rgba(245,158,11,.28) }.dashboard-today-flow .flow-step-4 > b { box-shadow:0 0 0 5px rgba(34,211,238,.08),0 0 14px rgba(34,211,238,.28) }.dashboard-today-flow .flow-step-5 > b { box-shadow:0 0 0 5px rgba(74,222,128,.08),0 0 14px rgba(74,222,128,.28) }
.dashboard-today-flow strong { font-size:12px; }.dashboard-today-flow small { margin-top:5px; font-size:10px; }.dashboard-today-flow button { min-width:72px; border-color:rgba(59,130,246,.5); padding:7px 8px; color:#8dc1ff; background:linear-gradient(145deg,rgba(9,46,91,.76),rgba(5,28,57,.76)); box-shadow:inset 0 1px 0 rgba(147,197,253,.05),0 5px 12px rgba(0,0,0,.12); font-size:10px; transition:filter .18s ease,transform .18s ease; }.dashboard-today-flow button:hover { filter:brightness(1.22); transform:translateY(-1px); }
.dashboard-tip { gap:12px; padding-block:16px; }.dashboard-tip > b { text-shadow:0 0 18px rgba(96,165,250,.48); }.dashboard-tip h3 { font-size:13px; }.dashboard-tip p { font-size:11px; }
@media (max-width:1450px) { .dashboard-shell { grid-template-columns:minmax(0,1fr) 315px;gap:12px }.dashboard-today-flow article { min-height:55px }.dashboard-assistant-card,.dashboard-today-flow,.dashboard-tip { padding:12px } }
@media (max-width:1350px) { .dashboard-shell { grid-template-columns:1fr }.dashboard-assistant { grid-template-columns:repeat(3,minmax(0,1fr)) }.dashboard-today-flow article { min-height:50px }.dashboard-kpis { grid-template-columns:repeat(3,minmax(0,1fr)) } }

.dashboard-icon-settings { margin-top:22px; }.dashboard-icon-settings header { margin-bottom:12px; }.dashboard-icon-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:10px; }.dashboard-icon-grid article { display:grid; gap:8px; border:1px solid rgba(96,165,250,.16); border-radius:7px; padding:11px; background:rgba(8,29,52,.84); box-shadow:inset 0 1px 0 rgba(191,219,254,.04); }.dashboard-icon-preview { display:grid; width:46px; height:46px; place-items:center; border-radius:50%; color:#60a5fa; background:rgba(37,99,235,.16); box-shadow:0 0 15px rgba(37,99,235,.16); }.dashboard-icon-preview svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.8; }.dashboard-icon-preview img { width:30px; height:30px; object-fit:contain; }.dashboard-icon-grid strong { color:#e2e8f0; font-size:12px; }.dashboard-icon-grid label,.dashboard-icon-grid button { border:1px solid rgba(96,165,250,.26); border-radius:5px; padding:7px; color:#bfdbfe; background:rgba(37,99,235,.08); font-size:10px; text-align:center; }.dashboard-icon-grid input { display:none; }.dashboard-icon-grid button { color:#fca5a5; border-color:rgba(239,68,68,.24); background:rgba(239,68,68,.07); }

/* Preserve the dashboard proportions instead of scaling cards to fill empty space. */
.dashboard-command-center { max-width:1440px; }
.dashboard-shell { grid-template-columns:minmax(0,1fr) minmax(292px,320px); justify-content:center; }
.dashboard-main { min-width:0; }
.dashboard-analytics-grid,.dashboard-bottom-grid { align-items:start; grid-template-columns:minmax(0,1.06fr) minmax(300px,.94fr); gap:12px; }
.dashboard-chart-panel,.dashboard-status-panel { min-height:0; padding:12px; }
.dashboard-line-chart { display:grid; height:145px; margin-top:6px; place-items:center; }
.dashboard-line-chart svg { width:100%; max-width:560px; height:145px; }
.dashboard-donut-wrap { min-height:185px; gap:20px; }
.dashboard-recent,.dashboard-low-stock { min-height:0; align-self:start; padding:12px; }
.dashboard-recent > div,.dashboard-low-stock > div { max-height:190px; overflow:auto; }
.dashboard-recent > div:has(> p),.dashboard-low-stock > div:has(> p) { min-height:42px; }
@media (max-width:1180px) { .dashboard-command-center { max-width:1120px }.dashboard-shell { grid-template-columns:minmax(0,1fr) 292px }.dashboard-assistant-card,.dashboard-today-flow,.dashboard-tip { padding:11px } }
@media (max-width:1020px) { .dashboard-command-center { max-width:940px }.dashboard-shell { grid-template-columns:1fr }.dashboard-assistant { grid-template-columns:repeat(3,minmax(0,1fr)) } }
@media (max-width:760px) { .dashboard-analytics-grid,.dashboard-bottom-grid,.dashboard-assistant { grid-template-columns:1fr }.dashboard-line-chart { height:auto; aspect-ratio:470/145 }.dashboard-line-chart svg { height:auto; aspect-ratio:470/145 } }

.inventory-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
}

.inventory-product,
.inventory-add-card,
.inventory-table-card,
.inventory-note-grid article,
.inventory-timeline article,
.inventory-report-grid article,
.inventory-settings-grid button {
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 10px;
  background: rgba(15, 33, 50, 0.82);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.inventory-product {
  position: relative;
  display: grid;
  gap: 8px;
  padding: 16px;
}

.inventory-product.low-stock {
  border-color: rgba(239, 68, 68, 0.46);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 0 0 1px rgba(239, 68, 68, 0.08);
}

.low-stock-alert {
  display: grid;
  gap: 4px;
  margin: 0 0 16px;
  border: 1px solid rgba(239, 68, 68, 0.34);
  border-radius: 10px;
  padding: 14px 16px;
  color: #fecaca;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.16), rgba(127, 29, 29, 0.12));
}

.low-stock-alert strong {
  color: #fee2e2;
  font-size: 14px;
}

.low-stock-alert p {
  margin: 0;
  color: #fca5a5;
}

.stock-filter-panel {
  display: grid;
  grid-template-columns: minmax(160px, 220px) 1fr;
  gap: 14px;
  align-items: center;
  margin: 0 0 18px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 10px;
  padding: 14px;
  background: rgba(15, 33, 50, 0.72);
}

.stock-filter-panel span {
  color: #1f6bff;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.stock-filter-panel strong {
  display: block;
  margin-top: 3px;
  color: #f8fafc;
}

.stock-filter-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.stock-filter-list button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 999px;
  padding: 0 12px;
  color: #dbe7f7;
  background: rgba(8, 19, 31, 0.62);
  font-weight: 800;
}

.stock-filter-list button.active {
  border-color: rgba(31, 107, 255, 0.55);
  color: #fff;
  background: #1f6bff;
}

.stock-filter-list small {
  display: inline-grid;
  min-width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 999px;
  padding: 0 7px;
  color: #bfceea;
  background: rgba(255, 255, 255, 0.08);
  font-size: 11px;
  font-weight: 900;
}

.stock-filter-list button.active small {
  color: #fff;
  background: rgba(255, 255, 255, 0.22);
}

.low-stock-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  border-radius: 999px;
  padding: 5px 9px;
  color: #fee2e2;
  background: rgba(239, 68, 68, 0.28);
  font-size: 11px;
  font-weight: 900;
}

.product-tag {
  width: fit-content;
  border-radius: 4px;
  padding: 5px 10px;
  color: #fff;
  background: #1f6bff;
  font-size: 12px;
  font-weight: 900;
}

.product-image {
  height: 112px;
  border-radius: 10px;
  background:
    radial-gradient(circle at 50% 20%, #7c3aed, transparent 34%),
    linear-gradient(#111827, #020617 52%, #e2e8f0);
}

.inventory-product small,
.inventory-line small,
.inventory-note-grid span {
  color: #91a0b5;
}

.inventory-product strong,
.inventory-line strong,
.inventory-note-grid strong,
.inventory-timeline strong {
  color: #f8fafc;
}

.inventory-product b {
  color: #f8fafc;
  font-size: 22px;
}

.inventory-product em {
  color: #22c55e;
  font-style: normal;
}

.inventory-product button,
.inventory-settings-grid button {
  min-height: 38px;
  border: 0;
  border-radius: 6px;
  color: #fff;
  background: #1f6bff;
}

.stock-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.stock-actions button:last-child {
  background: rgba(239, 99, 72, 0.16);
  color: #ff9b87;
}

.stock-reservation {
  display: grid;
  gap: 3px;
  border: 1px solid rgba(34, 197, 94, 0.24);
  border-radius: 8px;
  padding: 10px;
  background: rgba(34, 197, 94, 0.08);
}

.stock-reservation span,
.stock-reservation small {
  color: #9fb0c6;
  font-size: 12px;
}

.stock-reservation strong {
  color: #f8fafc;
}

.stock-reservation a {
  color: #22c55e;
  font-weight: 800;
  text-decoration: none;
}

.stock-reservation.empty {
  border-color: rgba(148, 163, 184, 0.14);
  background: rgba(148, 163, 184, 0.06);
}

.inventory-add-card {
  display: grid;
  place-items: center;
  min-height: 312px;
  border-style: dashed;
  color: rgba(203, 213, 225, 0.45);
  font-size: 88px;
}

.inventory-table-card {
  display: grid;
  overflow: hidden;
}

.inventory-line {
  display: grid;
  grid-template-columns: 96px 1fr 180px 130px 120px;
  gap: 12px;
  align-items: center;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  padding: 16px;
  color: #dbe7f7;
}

.inventory-line:last-child {
  border-bottom: 0;
}

.inventory-line em {
  width: fit-content;
  border-radius: 999px;
  padding: 6px 10px;
  color: #fff;
  background: rgba(31, 107, 255, 0.32);
  font-style: normal;
}

.part-order-list {
  display: grid;
  gap: 12px;
}

.part-order-row {
  display: grid;
  grid-template-columns: minmax(220px, 1.2fr) minmax(160px, 0.9fr) 72px 118px 118px minmax(160px, 1fr) auto;
  gap: 14px;
  align-items: center;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 10px;
  padding: 15px;
  color: #dbe7f7;
  background: rgba(15, 33, 50, 0.82);
}

.part-order-row span,
.part-order-row small {
  color: #91a0b5;
  font-size: 12px;
}

.part-order-row strong {
  color: #f8fafc;
}

.part-order-row p {
  margin: 0;
  color: #b7c4d7;
}

.part-order-status {
  width: fit-content;
  border-radius: 999px;
  padding: 7px 10px;
  color: #dbeafe !important;
  background: rgba(31, 107, 255, 0.25);
  font-weight: 900;
}

.part-order-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.part-order-status.reserved {
  color: #bbf7d0 !important;
  background: rgba(34, 197, 94, 0.24);
}

.part-order-actions {
  display: flex;
  gap: 8px;
}

.part-order-actions button,
.inventory-empty-card button {
  min-height: 36px;
  border: 0;
  border-radius: 6px;
  padding: 8px 12px;
  color: #fff;
  background: #1f6bff;
}

.part-order-actions button:last-child {
  color: #ff9b87;
  background: rgba(239, 99, 72, 0.16);
}

.inventory-empty-card.compact {
  min-height: 0;
  padding: 20px;
}

.inventory-note-grid,
.inventory-report-grid,
.inventory-settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}

.inventory-note-grid article,
.inventory-timeline article,
.inventory-report-grid article {
  padding: 18px;
}

.annotated-orders-view { display: grid; min-height: 0; align-content: start; gap: 12px; }
.annotated-orders-view > .inventory-view-head { margin-bottom: 2px; }
.annotated-order-summary { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 8px; }
.annotated-order-summary article,
.annotated-order-ledger { border: 1px solid rgba(148,163,184,.14); border-radius: 8px; background: rgba(13,31,48,.84); }
.annotated-order-summary article { min-height: 0; padding: 9px 11px; }
.annotated-order-summary span,
.annotated-order-card span,
.annotated-order-card small { display: block; color: #91a0b5; font-size: 11px; }
.annotated-order-summary strong { display: block; margin-top: 4px; color: #bfdbfe; font-size: 19px; }
.annotated-order-ledger { overflow: hidden; }
.annotated-order-ledger > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px; border-bottom: 1px solid rgba(148,163,184,.12); }
.annotated-order-ledger > header span { color: #60a5fa; font-size: 10px; font-weight: 900; text-transform: uppercase; }
.annotated-order-ledger h3 { margin: 3px 0 0; color: #f8fafc; font-size: 16px; }
.annotated-order-ledger > header strong { color: #bfdbfe; font-size: 12px; }
.annotated-order-card-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(245px,1fr)); gap: 10px; padding: 12px; }
.annotated-order-card { display: grid; gap: 10px; border: 1px solid rgba(148,163,184,.14); border-radius: 7px; padding: 12px; background: rgba(8,19,31,.55); }
.annotated-order-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.annotated-order-product { min-height: 45px; }
.annotated-order-card strong { color: #f8fafc; }
.annotated-order-card p { min-height: 30px; margin: 0; color: #cbd5e1; font-size: 12px; }
.annotated-order-client { border-top: 1px solid rgba(148,163,184,.1); padding-top: 9px; }
.annotated-order-card.done { opacity: .7; }
.annotated-order-status { width: fit-content; border-radius: 999px; padding: 6px 8px; color: #bfdbfe; background: rgba(31,107,255,.18); font-size: 10px; text-transform: uppercase; }
.annotated-order-actions { display: flex; gap: 5px; border-top: 1px solid rgba(148,163,184,.1); padding-top: 9px; }
.annotated-order-actions button { border: 1px solid rgba(96,165,250,.28); border-radius: 6px; padding: 7px 10px; color: #bfdbfe; background: rgba(31,107,255,.12); }
.annotated-order-actions button.danger { border-color: rgba(239,68,68,.28); color: #fca5a5; background: rgba(239,68,68,.1); }
@media (max-width: 980px) { .annotated-order-summary { grid-template-columns: repeat(2,minmax(0,1fr)); } }

.inventory-timeline {
  display: grid;
  gap: 12px;
}

.inventory-timeline article {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 12px;
}

.inventory-timeline article > span {
  width: 12px;
  height: 12px;
  margin-top: 5px;
  border-radius: 50%;
  background: #1f6bff;
  box-shadow: 0 0 0 6px rgba(31, 107, 255, 0.12);
}

.inventory-report-grid article span {
  color: #91a0b5;
}

.inventory-report-grid article strong {
  display: block;
  margin-top: 8px;
  color: #f8fafc;
  font-size: 28px;
}

.financial-view { display: grid; gap: 16px; }
.financial-head-actions { display: grid; gap: 8px; justify-items: end; }
.financial-day { display: grid; gap: 5px; color: #91a0b5; font-size: 11px; font-weight: 800; text-transform: uppercase; }
.financial-export-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.financial-export-actions button { border: 1px solid rgba(96,165,250,.32); border-radius: 6px; padding: 7px 9px; color: #bfdbfe; background: rgba(31,107,255,.13); font-size: 11px; font-weight: 800; }
.financial-day input,
.financial-entry-form input,
.financial-entry-form select { min-height: 38px; border: 1px solid rgba(148,163,184,.2); border-radius: 6px; padding: 8px 10px; color: #f8fafc; background: rgba(5,15,27,.82); }
.financial-summary-grid { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 10px; }
.financial-summary-grid article,
.financial-entry-panel,
.financial-ledger { border: 1px solid rgba(148,163,184,.14); border-radius: 8px; background: rgba(13,31,48,.84); }
.financial-summary-grid article { min-height: 110px; padding: 15px; }
.financial-summary-grid span,
.financial-summary-grid small { display: block; color: #91a0b5; font-size: 11px; }
.financial-summary-grid strong { display: block; margin: 11px 0 6px; color: #86efac; font-size: 21px; }
.financial-summary-grid .expense strong { color: #fca5a5; }
.financial-summary-grid .balance { border-color: rgba(37,99,235,.52); background: rgba(31,107,255,.13); }
.financial-summary-grid .balance strong { color: #bfdbfe; }
.financial-entry-panel { padding: 15px; }
.financial-entry-panel h3,
.financial-ledger h3 { margin: 0; color: #f8fafc; }
.financial-entry-panel p { margin: 4px 0 13px; color: #91a0b5; font-size: 12px; }
.financial-entry-form { display: grid; grid-template-columns: .75fr 1.05fr 1.55fr .58fr .78fr .9fr .9fr .9fr; gap: 10px; align-items: end; }
.financial-entry-form label { display: grid; gap: 5px; color: #91a0b5; font-size: 11px; font-weight: 800; text-transform: uppercase; }
.financial-entry-form .financial-description { grid-column: 1 / -2; }
.financial-entry-form .primary { min-height: 38px; }
.financial-ledger { overflow: hidden; }
.financial-ledger > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px; border-bottom: 1px solid rgba(148,163,184,.14); }
.financial-ledger > header span { color: #60a5fa; font-size: 11px; font-weight: 900; text-transform: uppercase; }
.financial-ledger > header strong { color: #bfdbfe; font-size: 12px; }
.financial-table-head,
.financial-table-row { display: grid; grid-template-columns: .62fr 1fr 1.35fr .38fr .72fr .72fr 1.35fr .72fr .56fr; gap: 10px; align-items: center; }
.financial-table-head { padding: 10px 15px; color: #91a0b5; background: rgba(5,15,27,.55); font-size: 10px; font-weight: 900; text-transform: uppercase; }
.financial-table-row { min-height: 54px; padding: 9px 15px; border-top: 1px solid rgba(148,163,184,.1); color: #cbd5e1; font-size: 12px; }
.financial-table-row strong { color: #f8fafc; }
.financial-kind { width: max-content; border-radius: 999px; padding: 4px 7px; font-size: 10px; font-weight: 900; text-transform: uppercase; }
.financial-kind.incoming { color: #86efac; background: rgba(34,197,94,.14); }
.financial-kind.outgoing { color: #fca5a5; background: rgba(239,68,68,.14); }
.financial-table-row b.incoming { color: #86efac; }
.financial-table-row b.outgoing { color: #fca5a5; }
.financial-table-row button { border: 1px solid rgba(239,68,68,.28); border-radius: 6px; padding: 7px; color: #fca5a5; background: rgba(239,68,68,.1); }
.financial-empty { margin: 0; padding: 22px 15px; color: #91a0b5; }

@media (max-width: 1180px) {
  .financial-summary-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .financial-entry-form { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .financial-entry-form .financial-description { grid-column: 1 / -1; }
  .financial-table { overflow-x: auto; }
  .financial-table-head,
  .financial-table-row { min-width: 1180px; }
}

.clients-directory {
  padding-bottom: 18px;
}

.directory-tabs {
  display: flex;
  gap: 8px;
  margin: 18px 0 12px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
  padding-bottom: 10px;
}

.directory-tabs button {
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 6px;
  padding: 9px 13px;
  color: #91a0b5;
  background: rgba(8, 19, 31, 0.64);
}

.directory-tabs button.active {
  border-color: rgba(31, 107, 255, 0.72);
  color: #dbeafe;
  background: rgba(31, 107, 255, 0.18);
}

.directory-tabs b {
  margin-left: 5px;
  color: #60a5fa;
}

.supplier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(265px, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.supplier-card {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 8px;
  padding: 14px;
  background: rgba(8, 19, 31, 0.55);
}

.supplier-card p {
  display: grid;
  gap: 3px;
  margin: 0;
  color: #dbe7f7;
  font-size: 12px;
}

.supplier-card p b,
.supplier-card small {
  color: #91a0b5;
  font-size: 10px;
}

.supplier-card > div:last-child {
  display: flex;
  gap: 7px;
}

.supplier-card button {
  border: 1px solid rgba(96, 165, 250, 0.28);
  border-radius: 6px;
  padding: 7px 10px;
  color: #bfdbfe;
  background: rgba(31, 107, 255, 0.12);
}

.supplier-card button.danger {
  border-color: rgba(239, 68, 68, 0.28);
  color: #fca5a5;
  background: rgba(239, 68, 68, 0.1);
}

.group-only[hidden],
.client-only[hidden] {
  display: none !important;
}

.client-head-actions {
  display: flex;
  gap: 12px;
}

.client-head-actions button,
.client-filter-row button {
  min-height: 42px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 7px;
  padding: 0 16px;
  color: #dbe7f7;
  background: rgba(11, 27, 43, 0.88);
}

.client-head-actions .primary {
  border: 0;
  color: #fff;
  background: #1f6bff;
}

.client-head-actions .danger {
  border-color: rgba(239, 68, 68, 0.42);
  color: #fca5a5;
  background: rgba(239, 68, 68, 0.12);
}

.client-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0 10px;
}

.client-filter-row select {
  min-width: 124px;
  height: 40px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 6px;
  padding: 0 12px;
  color: #dbe7f7;
  background: rgba(11, 27, 43, 0.88);
}

.client-filter-row button {
  margin-left: auto;
  color: #1f6bff;
  background: transparent;
}

.client-search {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 42px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 6px;
  padding: 0 14px;
  color: #91a0b5;
  background: rgba(8, 19, 31, 0.64);
}

.client-search input {
  width: 100%;
  border: 0;
  outline: 0;
  color: #f8fafc;
  background: transparent;
}

.client-table {
  margin-top: 12px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(8, 19, 31, 0.42);
}

.client-table-scroll {
  overflow-x: auto;
}

.client-table-head,
.client-row {
  display: grid;
  grid-template-columns: 34px minmax(210px, 1.2fr) minmax(180px, 1fr) minmax(210px, 1fr) 112px 132px 78px 168px;
  gap: 12px;
  align-items: center;
  min-width: 1180px;
}

.client-table-head {
  min-height: 48px;
  padding: 0 14px;
  color: #dbe7f7;
  background: rgba(15, 33, 50, 0.9);
  font-size: 12px;
  font-weight: 800;
}

.client-row {
  min-height: 56px;
  border-top: 1px solid rgba(148, 163, 184, 0.09);
  padding: 9px 14px;
  color: #dbe7f7;
}

.client-row.selected {
  background: rgba(31, 107, 255, 0.1);
}

.client-check {
  display: grid;
  place-items: center;
  width: 14px;
  height: 14px;
  border: 1px solid rgba(148, 163, 184, 0.42);
  border-radius: 3px;
  padding: 0;
  background: transparent;
}

.client-check.selected {
  border-color: #60a5fa;
  background: #1f6bff;
}

.client-check.selected::after {
  color: #fff;
  font-size: 10px;
  content: "✓";
}

.client-name-cell {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  align-items: center;
}

.client-name-cell > b {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, #64748b, #334155);
  font-size: 12px;
}

.client-row strong {
  color: #f8fafc;
}

.client-row small {
  display: block;
  max-width: 180px;
  overflow: hidden;
  color: #91a0b5;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.client-tag,
.client-status {
  width: fit-content;
  border-radius: 4px;
  padding: 4px 8px;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
}

.client-tag.revenda {
  background: #6546c9;
}

.client-tag.empresa {
  background: #1f6bff;
}

.client-tag.técnico,
.client-tag.tecnico {
  background: #a16207;
}

.client-status.active {
  background: #17884f;
}

.client-status.inactive {
  background: #475569;
}

.client-actions {
  display: flex;
  gap: 5px;
}

.client-actions button {
  min-height: 28px;
  border: 0;
  border-radius: 4px;
  padding: 0 8px;
  color: #dbe7f7;
  background: rgba(148, 163, 184, 0.12);
}

.client-pagination {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 26px;
  color: #91a0b5;
}

.client-pagination button,
.client-pagination select {
  min-width: 38px;
  height: 38px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 5px;
  color: #dbe7f7;
  background: rgba(11, 27, 43, 0.88);
}

.client-pagination button.active {
  color: #fff;
  background: #1f6bff;
}

.client-pagination button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

.client-pagination select {
  margin-left: 18px;
  min-width: 130px;
  padding: 0 10px;
}

.client-empty {
  padding: 28px;
  color: #91a0b5;
}

.order-panel header,
.order-panel footer,
.order-totals p,
.order-totals strong,
.order-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.order-panel h2 {
  margin: 0;
  font-size: 24px;
}

.order-panel h2 span {
  border-radius: 999px;
  padding: 3px 8px;
  background: #1f6bff;
  font-size: 13px;
}

.order-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 24px;
}

.order-panel label {
  display: grid;
  gap: 8px;
  color: #dbe7f7;
}

.order-panel input {
  width: 100%;
  height: 38px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 5px;
  padding: 0 12px;
  color: #f8fafc;
  background: rgba(8, 19, 31, 0.68);
}

.order-field {
  margin-top: 18px;
}

.client-pagination p {
  white-space: nowrap;
}

.reserved-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  margin-top: 18px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 7px;
  padding: 0 12px;
  color: #dbe7f7;
  background: rgba(8, 19, 31, 0.68);
  font-weight: 900;
}

.reserved-toggle span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  color: #fff;
  background: #1f6bff;
}

.reserved-toggle.active {
  border-color: rgba(34, 197, 94, 0.45);
  color: #bbf7d0;
  background: rgba(34, 197, 94, 0.12);
}

.reserved-toggle.active span {
  background: #16a34a;
}

.order-field div {
  display: grid;
  grid-template-columns: 1fr 40px;
}

.order-field button,
.order-panel header button {
  border: 1px solid rgba(148, 163, 184, 0.18);
  color: #dbe7f7;
  background: rgba(8, 19, 31, 0.68);
}

.order-item {
  position: relative;
  gap: 12px;
  justify-content: flex-start;
  margin-top: 34px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  padding-bottom: 24px;
}

.checkout-items {
  min-height: 220px;
  overflow: auto;
}

.part-thumb {
  width: 36px;
  height: 52px;
  border-radius: 6px;
  background: linear-gradient(#7c3aed, #020617 48%, #e2e8f0);
}

.order-item div {
  flex: 1;
  display: grid;
  gap: 4px;
}

.order-item small {
  color: #91a0b5;
}

.qty {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 4px;
  padding: 4px 8px;
  color: #dbe7f7;
}

.qty button,
.checkout-remove {
  border: 0;
  color: #f8fafc;
  background: transparent;
  font-weight: 900;
}

.qty b {
  min-width: 16px;
  text-align: center;
}

.checkout-remove {
  position: absolute;
  top: 8px;
  right: 0;
  color: #ff9b87;
}

.order-totals {
  margin-top: auto;
  padding-top: 18px;
}

.checkout-empty {
  display: grid;
  gap: 6px;
  margin-top: 24px;
  border: 1px dashed rgba(148, 163, 184, 0.24);
  border-radius: 8px;
  padding: 18px;
  color: #dbe7f7;
  background: rgba(8, 19, 31, 0.32);
}

.checkout-empty p {
  color: #91a0b5;
}

.checkout-expand {
  width: 100%;
  min-height: 42px;
  margin-top: 18px;
}

.checkout-product-grid {
  margin-bottom: 24px;
}

.checkout-product-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.checkout-product-actions button:last-child {
  color: #bbf7d0;
  background: rgba(34, 197, 94, 0.18);
}

.saved-orders-head {
  margin-top: 10px;
}

.compatibility-note {
  display: grid;
  gap: 4px;
  margin: 0 0 16px;
  border: 1px solid rgba(250, 204, 21, 0.28);
  border-radius: 10px;
  padding: 14px 16px;
  color: #fde68a;
  background: rgba(250, 204, 21, 0.09);
}

.compatibility-note p {
  margin: 0;
  color: #e7d698;
}

.compat-flow {
  display: grid;
  gap: 16px;
  margin-bottom: 18px;
}

.compat-flow-head,
.compat-model-section {
  display: grid;
  gap: 12px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 12px;
  padding: 16px;
  background: rgba(15, 33, 50, 0.78);
}

.compat-flow span,
.compat-model-section span,
.compat-lookup header span {
  color: #1f6bff;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.compat-flow strong,
.compat-model-section strong {
  display: block;
  margin-top: 4px;
  color: #f8fafc;
}

.compat-brand-grid,
.compat-model-grid {
  display: grid;
  gap: 8px;
}

.compat-model-grid button {
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 10px;
  color: #dbe7f7;
  background: rgba(8, 19, 31, 0.72);
}

.compat-brand-grid {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.compat-brand-card {
  display: grid;
  justify-items: start;
  gap: 7px;
  min-height: 190px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 10px;
  padding: 0 14px 14px;
  overflow: hidden;
  color: #dbe7f7;
  background: rgba(8, 19, 31, 0.72);
  text-align: left;
}

.compat-brand-card img {
  width: calc(100% + 28px);
  height: 124px;
  margin-inline: -14px;
  object-fit: cover;
}

.compat-brand-card strong {
  color: #f8fafc;
}

.compat-brand-card.active {
  border-color: rgba(31, 107, 255, 0.55);
  color: #fff;
  background: rgba(31, 107, 255, 0.18);
}

.compat-brand-card small {
  color: #bfceea;
}

.compat-model-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
}

.compat-model-grid button {
  display: grid;
  gap: 6px;
  min-height: 78px;
  padding: 13px;
  text-align: left;
}

.compat-model-grid button span {
  color: #f8fafc;
  font-size: 15px;
  text-transform: none;
}

.compat-model-grid button small {
  color: #91a0b5;
}

.compat-lookup-backdrop {
  position: fixed;
  z-index: 80;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(2, 6, 23, 0.64);
  backdrop-filter: blur(8px);
}

.compat-lookup {
  width: min(860px, 100%);
  max-height: min(760px, calc(100vh - 48px));
  overflow: auto;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 14px;
  padding: 22px;
  color: #dbe7f7;
  background: linear-gradient(180deg, rgba(15, 33, 50, 0.98), rgba(8, 19, 31, 0.98));
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.38);
}

.compat-lookup header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.compat-lookup h3 {
  margin: 4px 0;
  color: #f8fafc;
  font-size: 28px;
}

.compat-lookup header button {
  min-width: 38px;
  height: 38px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  color: #dbe7f7;
  background: rgba(8, 19, 31, 0.72);
}

.compat-lookup-head-actions {
  display: flex;
  gap: 8px;
}

.compat-lookup-head-actions button:first-child {
  padding: 0 12px;
}

.compat-lookup-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.compat-lookup-controls label {
  display: grid;
  gap: 7px;
  color: #cbd5e1;
}

.compat-lookup-controls select {
  min-height: 42px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  padding: 0 12px;
  color: #f8fafc;
  background: #0b1b2b;
}

.compat-result-list {
  display: grid;
  gap: 12px;
}

.compat-result,
.compat-empty-result {
  display: grid;
  gap: 8px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 10px;
  padding: 14px;
  background: rgba(8, 19, 31, 0.58);
}

.compat-result-image {
  width: 100%;
  height: 170px;
  border-radius: 8px;
  object-fit: cover;
}

.compat-result.ok {
  border-color: rgba(34, 197, 94, 0.32);
}

.compat-result.no {
  border-color: rgba(239, 68, 68, 0.32);
}

.compat-result.check {
  border-color: rgba(250, 204, 21, 0.32);
}

.compat-result div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.compat-result h4,
.compat-empty-result strong {
  margin: 0;
  color: #f8fafc;
  font-size: 19px;
}

.compat-result p,
.compat-result small,
.compat-result em,
.compat-empty-result p {
  margin: 0;
  color: #aebbd0;
  font-style: normal;
}

.compat-empty-result button {
  width: fit-content;
  min-height: 36px;
  border: 0;
  border-radius: 7px;
  padding: 0 12px;
  color: #fff;
  background: #1f6bff;
}

.compatibility-tools {
  display: grid;
  gap: 12px;
  margin-bottom: 18px;
}

.compatibility-tools label {
  display: grid;
  gap: 7px;
  color: #dbe7f7;
}

.compatibility-tools input {
  min-height: 42px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  padding: 0 14px;
  color: #f8fafc;
  background: rgba(8, 19, 31, 0.72);
}

.compat-category-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.compat-category-list button {
  min-height: 34px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 999px;
  padding: 0 12px;
  color: #dbe7f7;
  background: rgba(15, 33, 50, 0.78);
}

.compat-category-list small {
  margin-left: 6px;
  color: #91a0b5;
}

.compat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}

.compat-card {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 10px;
  padding: 16px;
  color: #dbe7f7;
  background: rgba(15, 33, 50, 0.82);
}

.compat-card-media {
  height: 150px;
  margin: -16px -16px 2px;
  overflow: hidden;
  border-radius: 10px 10px 0 0;
  background: #071421;
}

.compat-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.compat-card-head,
.compat-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.compat-card-head span {
  border-radius: 999px;
  padding: 5px 9px;
  color: #9fc2ff;
  background: rgba(30, 98, 220, 0.16);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.compat-card-head b {
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 11px;
}

.compat-card-head .ok {
  color: #bbf7d0;
  background: rgba(34, 197, 94, 0.18);
}

.compat-card-head .no {
  color: #fecaca;
  background: rgba(239, 68, 68, 0.18);
}

.compat-card-head .check {
  color: #fde68a;
  background: rgba(250, 204, 21, 0.14);
}

.compat-card h3 {
  margin: 0;
  color: #f8fafc;
  font-size: 20px;
}

.compat-card p,
.compat-card small,
.compat-card em {
  margin: 0;
  color: #aebbd0;
}

.compat-card em {
  font-size: 12px;
  font-style: normal;
}

.compat-actions button {
  min-height: 34px;
  border: 0;
  border-radius: 6px;
  padding: 0 12px;
  color: #fff;
  background: #1f6bff;
}

.compat-actions button:last-child {
  color: #ff9b87;
  background: rgba(239, 99, 72, 0.16);
}

.compatibility-dialog {
  width: min(780px, calc(100vw - 24px));
}

.compat-form-guide {
  display: grid;
  gap: 4px;
  margin-bottom: 16px;
  border: 1px solid rgba(31, 107, 255, 0.22);
  border-radius: 10px;
  padding: 13px 14px;
  color: #dbeafe;
  background: rgba(31, 107, 255, 0.09);
}

.compat-form-guide p {
  margin: 0;
  color: #aebbd0;
  line-height: 1.45;
}

.compat-image-preview {
  display: grid;
  grid-template-columns: minmax(180px, 240px) 92px 1fr;
  gap: 14px;
  align-items: center;
  margin-top: 16px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 10px;
  padding: 12px;
  color: #dbe7f7;
  background: rgba(8, 19, 31, 0.46);
}

.compat-image-preview label {
  display: grid;
  gap: 7px;
}

.compat-image-preview input {
  max-width: 100%;
  color: #aebbd0;
}

.compat-image-preview img {
  width: 92px;
  height: 76px;
  border-radius: 8px;
  object-fit: cover;
}

.compat-image-preview p {
  margin: 4px 0 0;
  color: #aebbd0;
}

.triage-head-actions {
  display: flex;
  gap: 10px;
}

.triage-head-actions button {
  min-height: 42px;
  border-radius: 7px;
  padding: 0 16px;
}

.triage-whatsapp {
  border-color: rgba(34, 197, 94, 0.44) !important;
  color: #bbf7d0 !important;
  background: linear-gradient(145deg, rgba(20, 120, 70, 0.22), rgba(8, 65, 42, 0.28)) !important;
}

.triage-whatsapp:hover {
  filter: brightness(1.16);
}

.triage-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 16px;
}

.triage-main,
.triage-summary,
.triage-panel {
  display: grid;
  gap: 14px;
}

.triage-two-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.triage-panel,
.triage-summary {
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 10px;
  padding: 15px;
  color: #dbe7f7;
  background: rgba(15, 33, 50, 0.82);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.triage-panel h3,
.triage-summary h3 {
  margin: 0;
  color: #f8fafc;
}

.triage-device-grid,
.triage-physical-grid,
.triage-test-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.triage-device-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.triage-physical-layout {
  display: grid;
  grid-template-columns: minmax(110px, 1fr) 138px minmax(110px, 1fr);
  gap: 12px;
  align-items: center;
}

.triage-physical-layout > div:not(.triage-phone-preview) {
  display: grid;
  gap: 14px;
}

.triage-phone-preview {
  display: grid;
  place-items: center;
  min-height: 274px;
}

.triage-phone-preview span {
  position: relative;
  display: block;
  width: 112px;
  height: 242px;
  border: 4px solid #8291a6;
  border-radius: 23px;
  background: linear-gradient(145deg, #182536, #07111d);
  box-shadow:
    inset 0 0 0 3px #050a11,
    0 14px 24px rgba(0, 0, 0, 0.28);
}

.triage-phone-preview span::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 50%;
  width: 42px;
  height: 7px;
  border-radius: 999px;
  background: #03070c;
  transform: translateX(-50%);
}

.triage-panel label,
.triage-summary label {
  display: grid;
  gap: 6px;
  color: #cbd5e1;
  font-size: 12px;
}

.triage-panel input,
.triage-panel select,
.triage-panel textarea,
.triage-summary input {
  width: 100%;
  min-height: 36px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 6px;
  padding: 8px 10px;
  color: #f8fafc;
  background: rgba(8, 19, 31, 0.72);
}

.triage-secret-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
}

.triage-secret-field input {
  border-radius: 6px 0 0 6px;
}

.triage-secret-field button {
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-left: 0;
  border-radius: 0 6px 6px 0;
  padding: 0 10px;
  color: #dbeafe;
  background: rgba(31, 107, 255, 0.16);
}

.triage-sensitive-note {
  margin: 0;
  color: #91a0b5;
  font-size: 12px;
}

.triage-pattern-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 12px;
  align-items: start;
  border-top: 1px solid rgba(148, 163, 184, 0.12);
  padding-top: 12px;
}

.triage-pattern-section p {
  margin: 3px 0 0;
  color: #91a0b5;
  font-size: 12px;
}

.triage-pattern-actions {
  display: flex;
  gap: 7px;
}

.triage-pattern-actions button {
  border: 1px solid rgba(96, 165, 250, 0.3);
  border-radius: 6px;
  padding: 7px 10px;
  color: #bfdbfe;
  background: rgba(31, 107, 255, 0.12);
}

.triage-pattern {
  position: relative;
  grid-column: 1 / -1;
  width: min(100%, 270px);
  aspect-ratio: 1;
  margin: 3px auto 0;
  border: 1px solid rgba(96, 165, 250, 0.16);
  border-radius: 8px;
  background: rgba(5, 14, 25, 0.72);
  touch-action: none;
  user-select: none;
}

.triage-pattern svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.triage-pattern line {
  stroke: #22c55e;
  stroke-width: 7;
  stroke-linecap: round;
  opacity: 0.72;
}

.triage-pattern [data-pattern-node] {
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 3px solid #64748b;
  border-radius: 50%;
  padding: 0;
  transform: translate(-50%, -50%);
  background: #071421;
}

.triage-pattern [data-pattern-node] span {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #f8fafc;
}

.triage-pattern [data-pattern-node].selected {
  border-color: #22c55e;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.12);
}

.triage-pattern.masked::after {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #bfdbfe;
  font-size: 12px;
  font-weight: 700;
  pointer-events: none;
  content: "Padrao oculto";
  background: rgba(5, 14, 25, 0.7);
}

.triage-test-grid {
  gap: 7px 10px;
}

.triage-test-grid label {
  grid-template-columns: minmax(88px, 1fr) minmax(92px, 0.9fr);
  align-items: center;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 6px;
  padding-left: 9px;
  background: rgba(8, 19, 31, 0.38);
}

.triage-test-grid select {
  border: 0;
  border-left: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 0 6px 6px 0;
}

.triage-accessories {
  display: grid;
  gap: 10px;
  border-top: 1px solid rgba(148, 163, 184, 0.12);
  padding-top: 12px;
}

.triage-accessories div {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.triage-accessories label {
  display: flex;
  align-items: center;
  gap: 7px;
}

.triage-accessories input {
  width: 16px;
  min-height: 16px;
}

.triage-summary {
  align-self: start;
  position: sticky;
  top: 18px;
  min-height: calc(100vh - 74px);
  background: linear-gradient(180deg, rgba(15, 33, 50, 0.98), rgba(10, 25, 40, 0.94));
}

.triage-summary-head,
.triage-saved-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.triage-summary-head span {
  border-radius: 999px;
  padding: 5px 8px;
  color: #bbf7d0;
  background: rgba(34, 197, 94, 0.14);
  font-size: 11px;
  font-weight: 900;
}

.triage-summary p,
.triage-summary small {
  margin: 0;
  color: #91a0b5;
}

.triage-summary hr {
  width: 100%;
  border: 0;
  border-top: 1px solid rgba(148, 163, 184, 0.12);
}

.triage-summary b {
  color: #f8fafc;
}

.triage-saved-head button,
.triage-saved-list button {
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 6px;
  color: #dbe7f7;
  background: rgba(8, 19, 31, 0.72);
}

.triage-saved-head button {
  min-height: 32px;
  padding: 0 10px;
}

.triage-saved-list {
  display: grid;
  gap: 8px;
  max-height: 310px;
  overflow-y: auto;
  padding-right: 3px;
}

.triage-saved-list button {
  display: grid;
  gap: 4px;
  padding: 10px;
  text-align: left;
}

.triage-saved-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  align-items: stretch;
}

.triage-saved-item > button:first-child {
  position: relative;
  min-width: 0;
}

.triage-saved-item strong,
.triage-saved-item small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.triage-saved-item span {
  width: max-content;
  border-radius: 999px;
  padding: 3px 6px;
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}

.triage-saved-item span.done {
  color: #bbf7d0;
  background: rgba(34, 197, 94, 0.16);
}

.triage-saved-item span.draft {
  color: #fde68a;
  background: rgba(234, 179, 8, 0.14);
}

.triage-saved-item .triage-delete {
  align-self: stretch;
  padding: 0 8px;
  color: #fca5a5;
  background: rgba(239, 68, 68, 0.1);
  font-size: 11px;
  text-align: center;
}

.triage-saved-list small {
  font-size: 11px;
}

.triage-photo-panel {
  grid-template-columns: 1fr auto;
  align-items: center;
}

.triage-photo-panel p {
  margin: 4px 0 0;
  color: #91a0b5;
}

.triage-photo-upload,
.triage-export {
  min-height: 38px;
  border: 1px solid rgba(31, 107, 255, 0.42);
  border-radius: 7px;
  padding: 10px 12px;
  color: #dbeafe;
  background: rgba(31, 107, 255, 0.14);
  font-weight: 800;
}

.triage-photo-upload input {
  display: none;
}

.triage-photo-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
}

.triage-photo-grid figure {
  position: relative;
  margin: 0;
}

.triage-photo-grid img {
  width: 100%;
  height: 120px;
  border-radius: 7px;
  object-fit: cover;
}

.triage-photo-grid button {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: rgba(127, 29, 29, 0.86);
}

.triage-export {
  width: 100%;
  margin-top: 4px;
}

@media (max-width: 720px) {
  .compat-image-preview {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1200px) {
  .triage-layout,
  .triage-two-cols {
    grid-template-columns: 1fr;
  }

  .triage-summary {
    position: static;
  }
}

@media (max-width: 720px) {
  .triage-device-grid,
  .triage-physical-grid,
  .triage-test-grid {
    grid-template-columns: 1fr;
  }

  .triage-physical-layout {
    grid-template-columns: 1fr;
  }

  .triage-phone-preview {
    min-height: 210px;
  }

  .triage-phone-preview span {
    width: 88px;
    height: 188px;
  }
}

.order-totals p,
.order-totals strong {
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  padding: 12px 0;
}

.order-totals .discount {
  color: #22c55e;
}

.order-totals strong {
  font-size: 23px;
}

.order-panel footer {
  gap: 10px;
  margin-top: 18px;
}

.order-panel footer button {
  flex: 1;
  min-width: 0;
  padding-inline: 10px;
}

@media (max-width: 1200px) {
  body.official-open .board-shell {
    grid-template-columns: 260px 1fr;
  }

  body.official-open .order-panel {
    display: none;
  }

  body.official-open .tabs {
    grid-column: 2;
    padding-right: 24px;
  }

  .stock-filter-panel {
    grid-template-columns: 1fr;
  }
}

body.official-open,
body.official-open[data-tab-tone="dark"] {
  --page: #071421;
  --surface: #102132;
  --surface-soft: #0c1b2b;
  --text: #f8fafc;
  --muted: #91a0b5;
  background:
    radial-gradient(circle at 0 0, rgba(31, 107, 255, 0.12), transparent 30%),
    linear-gradient(135deg, #071421 0%, #06111d 100%);
}

body.official-open .toolbar-group.filters {
  position: static;
  transform: none;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--page);
}

body {
  margin: 0;
  color: var(--text);
  background: var(--page);
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: 14px;
  letter-spacing: 0;
}

body[data-tab-tone="dark"] {
  --page: #0f172a;
  --surface: #111827;
  --surface-soft: #1f2937;
  --line: #334155;
  --line-strong: #475569;
  --text: #e5edf7;
  --muted: #9aa7b8;
  --blue-dark: color-mix(in srgb, var(--blue) 42%, #ffffff);
  --blue-soft: color-mix(in srgb, var(--blue) 22%, #111827);
  --green-soft: rgba(0, 168, 107, 0.18);
  --red-soft: rgba(216, 58, 82, 0.16);
  --shadow: 0 14px 36px rgba(0, 0, 0, 0.28);
}

.portal-container {
  width: min(1392px, calc(100vw - 48px));
  margin: 0 auto;
}

.portal-header {
  background: #fff;
  border-bottom: 1px solid #e4e7ec;
}

:root {
  --portal-blue: #0757a6;
  --portal-green: #008d45;
}

body:not(.official-open) .tabs,
body:not(.official-open) .group-tabs,
body:not(.official-open) .toolbar,
body:not(.official-open) .metrics,
body:not(.official-open) .board {
  display: none;
}

body.official-open .portal-header,
body.official-open .portal-hero {
  display: none;
}

body.official-open {
  background: var(--page);
}

.portal-linkbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 39px;
  padding: 0 max(24px, calc((100vw - 1392px) / 2));
  background: #fff;
}

.portal-linkbar nav,
.social-links,
.masthead-grid,
.portal-header .top-actions {
  display: flex;
  align-items: center;
}

.portal-linkbar nav {
  gap: 38px;
}

.portal-linkbar a {
  color: #004a98;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-decoration: none;
}

.portal-masthead {
  min-height: 128px;
  color: #fff;
  background: var(--portal-blue);
}

.masthead-grid {
  min-height: 128px;
  justify-content: space-between;
  gap: 28px;
}

.state-brand {
  display: grid;
  justify-items: center;
  min-width: 172px;
  gap: 8px;
  font-size: 20px;
  font-weight: 850;
}

.state-crest {
  display: grid;
  place-items: center;
  width: 52px;
  height: 84px;
  border-radius: 0 0 24px 24px;
  color: #0757a6;
  background: #fff;
  font-weight: 950;
}

.main-brand {
  display: flex;
  align-items: center;
  gap: 22px;
  flex: 1;
}

.brand-symbol,
.portal-emblem {
  width: 72px;
  height: 72px;
  background:
    radial-gradient(circle, transparent 0 28px, currentColor 29px 31px, transparent 32px),
    repeating-linear-gradient(0deg, currentColor 0 2px, transparent 2px 6px),
    repeating-linear-gradient(90deg, currentColor 0 2px, transparent 2px 6px);
}

.brand-symbol {
  color: #fff;
}

.brand-symbol.has-image {
  background: none;
}

.main-brand h1 {
  color: #fff;
  font-size: 38px;
  font-weight: 450;
  line-height: 1;
}

.main-brand h1 span {
  font-weight: 950;
}

.main-brand p {
  margin: 8px 0 0;
  font-size: 16px;
}

.social-links {
  gap: 20px;
  font-size: 31px;
  font-weight: 900;
}

.portal-header > .brand {
  display: none;
}

.portal-header .top-actions {
  justify-content: flex-end;
  min-height: 82px;
  padding: 0 max(24px, calc((100vw - 1392px) / 2));
  border-bottom: 1px solid #e4e7ec;
  background: #fff;
}

.portal-header .top-actions::before {
  content: "⌂";
  margin-right: auto;
  color: #2f5ea6;
  font-size: 34px;
  font-weight: 900;
}

.portal-header .top-actions .ghost.compact:nth-of-type(n + 2),
.portal-header .top-actions .primary.small {
  display: none;
}

.login-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 170px;
  min-height: 40px;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: #008d45;
  font-weight: 950;
}

.portal-hero {
  padding: 31px 0 40px;
  background: #fff;
}

.portal-search-band {
  position: relative;
  display: flex;
  align-items: center;
  gap: 34px;
  min-height: 128px;
  padding: 16px 160px 16px 16px;
  border-radius: 4px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--portal-green) 72%, #ffffff), var(--portal-green));
}

.portal-emblem {
  flex: 0 0 auto;
  color: rgba(255, 255, 255, 0.72);
  width: 96px;
  height: 96px;
}

.portal-search {
  display: flex;
  align-items: center;
  gap: 14px;
  width: min(100%, 1208px);
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid #d0d5dd;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 1px 2px rgba(16, 24, 40, 0.08);
}

.portal-search span {
  color: #667085;
  font-size: 25px;
}

.portal-search input {
  width: 100%;
  height: 42px;
  border: 0;
  outline: 0;
  color: #344054;
  background: transparent;
  font-size: 16px;
}

.portal-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin: 20px 0 14px;
  color: var(--portal-green);
}

.portal-globe {
  font-size: 88px;
  line-height: 1;
}

.portal-title h2 {
  margin: 0;
  font-size: clamp(42px, 5vw, 70px);
  font-weight: 400;
  line-height: 1;
}

.portal-title strong {
  font-weight: 950;
}

.portal-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(190px, 1fr));
  gap: 22px;
}

.portal-card {
  position: relative;
  display: block;
  min-height: 260px;
  overflow: hidden;
  border: 0;
  border-radius: 34px;
  padding: 0;
  color: #fff;
  background:
    radial-gradient(circle at 34% 24%, color-mix(in srgb, var(--card-color, #002f86) 72%, #2b7cff) 0 18%, transparent 42%),
    linear-gradient(145deg, color-mix(in srgb, var(--card-color, #002f86) 78%, #001b4a), color-mix(in srgb, var(--card-color, #002f86) 88%, #020817));
  box-shadow: 0 18px 34px rgba(10, 24, 54, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  text-align: center;
  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease;
}

.portal-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 46px rgba(10, 24, 54, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.portal-card-icon {
  position: absolute;
  left: var(--icon-x, 50%);
  top: var(--icon-y, 36%);
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  border-radius: 24px;
  color: rgba(255, 255, 255, 0.94);
  font-size: 46px;
  font-weight: 950;
  line-height: 1;
  transform: translate(-50%, -50%);
  user-select: none;
}

.portal-card-icon img,
.card-preview img,
.brand-symbol img,
.state-crest img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.portal-card-title-pill {
  position: absolute;
  left: var(--title-x, 50%);
  top: var(--title-y, 82%);
  display: grid;
  place-items: center;
  width: min(78%, 260px);
  min-height: 54px;
  border-radius: 999px;
  padding: 10px 18px;
  color: color-mix(in srgb, var(--card-color, #002f86) 82%, #000);
  background: #fff;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.14);
  font-size: 17px;
  font-weight: 900;
  line-height: 1.12;
  overflow-wrap: anywhere;
  transform: translate(-50%, -50%);
}

.portal-card small {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 14px;
  overflow: hidden;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.7);
  font-size: 11px;
  font-weight: 800;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.portal-card-add {
  border: 2px dashed color-mix(in srgb, var(--portal-blue) 38%, #ffffff);
  color: var(--portal-blue);
  background: linear-gradient(145deg, #ffffff, #eef4ff);
}

.portal-card-add .portal-card-icon {
  left: 50%;
  top: 38%;
  color: var(--portal-blue);
}

.portal-card-add .portal-card-title-pill {
  color: var(--portal-blue);
}

.portal-card-movable {
  cursor: grab;
  touch-action: none;
}

.portal-card-movable:active {
  cursor: grabbing;
}

.portal-card-tools {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  gap: 6px;
  opacity: 0;
  transition: opacity 0.16s ease;
}

.portal-card:hover .portal-card-tools,
.portal-card:focus-visible .portal-card-tools {
  opacity: 1;
}

.card-tool {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  border: 1px solid #d0d5dd;
  border-radius: 999px;
  padding: 4px 8px;
  color: #008d45;
  background: #fff;
  font-size: 11px;
  font-weight: 900;
}

.official-panel-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 42px;
  margin: 40px auto 0;
  border: 0;
  border-radius: 999px;
  padding: 0 26px;
  color: #fff;
  background: var(--portal-blue);
  font-weight: 950;
  text-decoration: none;
}

.portal-edit {
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 999px;
  padding: 8px 12px;
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  font-size: 12px;
  font-weight: 900;
}

.portal-edit-header {
  position: absolute;
  right: 24px;
  bottom: 14px;
}

.portal-edit-band {
  position: absolute;
  right: 18px;
  top: 14px;
}

.portal-section-actions {
  display: flex;
  justify-content: flex-end;
  margin: -4px 0 12px;
}

.portal-edit-light {
  border-color: color-mix(in srgb, var(--portal-blue) 28%, #ffffff);
  color: var(--portal-blue);
  background: #fff;
  box-shadow: 0 6px 18px rgba(10, 24, 54, 0.08);
}

.masthead-grid,
.portal-title {
  position: relative;
}

.portal-title .portal-edit {
  position: absolute;
  right: 0;
  color: var(--portal-green);
  border-color: color-mix(in srgb, var(--portal-green) 38%, #ffffff);
  background: #fff;
}

.group-name,
.service-title strong {
  cursor: text;
}

body:not(.official-open) {
  min-height: 100vh;
  background:
    radial-gradient(circle at 46% 12%, rgba(27, 104, 255, 0.2), transparent 28%),
    radial-gradient(circle at 76% 54%, rgba(37, 99, 235, 0.16), transparent 31%),
    linear-gradient(135deg, #020817 0%, #071225 48%, #030712 100%);
}

body:not(.official-open) .portal-header {
  position: relative;
  z-index: 2;
  border: 0;
  color: #fff;
  background: transparent;
}

body:not(.official-open) .portal-linkbar {
  display: none;
}

body:not(.official-open) .portal-masthead {
  min-height: 112px;
  background: transparent;
}

body:not(.official-open) .masthead-grid {
  min-height: 112px;
  justify-content: flex-start;
}

body:not(.official-open) .state-brand {
  display: flex;
  align-items: center;
  justify-items: start;
  min-width: auto;
  color: rgba(255, 255, 255, 0.82);
  font-size: 14px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

body:not(.official-open) .state-crest {
  width: 48px;
  height: 64px;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(160deg, #1f6bff, #0b44d8);
  box-shadow: 0 18px 44px rgba(37, 99, 235, 0.28);
}

body:not(.official-open) .main-brand {
  max-width: 460px;
  flex: 0 1 auto;
  gap: 16px;
}

body:not(.official-open) .brand-symbol {
  color: #1f6bff;
}

body:not(.official-open) .main-brand h1 {
  margin: 0;
  font-size: clamp(30px, 3.1vw, 46px);
  font-weight: 900;
  font-style: italic;
  letter-spacing: 0;
}

body:not(.official-open) .main-brand h1 span:first-child {
  color: #fff;
}

body:not(.official-open) .main-brand h1 span:last-child {
  color: #1f6bff;
}

body:not(.official-open) .main-brand p {
  color: rgba(226, 232, 240, 0.76);
  font-size: 12px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
}

body:not(.official-open) .social-links {
  margin-left: auto;
  color: rgba(226, 232, 240, 0.74);
  font-size: 18px;
}

body:not(.official-open) .portal-header .top-actions {
  position: absolute;
  top: 26px;
  right: max(24px, calc((100vw - 1392px) / 2));
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

body:not(.official-open) .portal-header .top-actions::before,
body:not(.official-open) .portal-header .theme-picker,
body:not(.official-open) .portal-header .avatar {
  display: none;
}

body:not(.official-open) .portal-header .top-actions .ghost {
  border-color: rgba(148, 163, 184, 0.25);
  color: rgba(226, 232, 240, 0.9);
  background: rgba(15, 23, 42, 0.68);
}

body:not(.official-open) .portal-edit-header {
  right: auto;
  left: max(24px, calc((100vw - 1392px) / 2));
  bottom: -34px;
}

body:not(.official-open) .portal-hero {
  position: relative;
  min-height: calc(100vh - 112px);
  padding: 28px 0 54px;
  overflow: hidden;
  color: #fff;
  background:
    linear-gradient(90deg, rgba(2, 8, 23, 0) 0 50%, rgba(15, 23, 42, 0.35) 50%),
    transparent;
}

body:not(.official-open) .portal-hero::before {
  content: "";
  position: absolute;
  inset: 8% 44% auto auto;
  width: min(38vw, 560px);
  aspect-ratio: 0.62;
  border: 1px solid rgba(37, 99, 235, 0.28);
  border-radius: 46px;
  background:
    linear-gradient(145deg, rgba(59, 130, 246, 0.08), rgba(2, 6, 23, 0.16)),
    repeating-linear-gradient(90deg, rgba(59, 130, 246, 0.16) 0 1px, transparent 1px 18px);
  box-shadow: inset 0 0 90px rgba(37, 99, 235, 0.18), 0 0 90px rgba(37, 99, 235, 0.1);
  opacity: 0.76;
  transform: rotate(-18deg);
}

body:not(.official-open) .portal-hero .portal-container {
  position: relative;
  display: grid;
  grid-template-columns: minmax(360px, 0.95fr) minmax(460px, 0.8fr);
  gap: clamp(44px, 6vw, 92px);
  align-items: center;
  min-height: calc(100vh - 194px);
}

body:not(.official-open) .portal-hero .portal-container::after {
  content: "";
  grid-column: 2;
  grid-row: 1 / 7;
  align-self: stretch;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 0%, rgba(37, 99, 235, 0.18), transparent 34%),
    linear-gradient(145deg, rgba(15, 23, 42, 0.88), rgba(15, 23, 42, 0.66));
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.portal-copy {
  position: relative;
  z-index: 1;
  grid-column: 1;
  grid-row: 1 / 7;
}

.portal-copy h2 {
  max-width: 600px;
  margin: 0;
  color: #f8fafc;
  font-size: clamp(42px, 4.8vw, 70px);
  font-weight: 900;
  line-height: 1.14;
}

.portal-copy h2 strong {
  color: #1f6bff;
}

.portal-copy > p {
  max-width: 540px;
  margin: 22px 0 32px;
  color: rgba(226, 232, 240, 0.78);
  font-size: 20px;
  line-height: 1.5;
}

.portal-feature-list {
  display: grid;
  gap: 22px;
  max-width: 520px;
}

.portal-feature-list article,
.portal-security-card {
  display: grid;
  grid-template-columns: 68px 1fr;
  gap: 18px;
  align-items: center;
}

.portal-feature-list span,
.portal-security-card span {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border: 1px solid rgba(96, 165, 250, 0.24);
  border-radius: 16px;
  color: #1f6bff;
  background: rgba(15, 23, 42, 0.62);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  font-size: 30px;
  font-weight: 900;
}

.portal-feature-list strong,
.portal-security-card strong {
  color: #fff;
  font-size: 17px;
}

.portal-feature-list p,
.portal-security-card p {
  margin: 6px 0 0;
  color: rgba(203, 213, 225, 0.78);
  font-size: 15px;
  line-height: 1.35;
}

.portal-security-card {
  max-width: 420px;
  margin-top: 44px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 12px;
  padding: 16px 18px;
  background: rgba(15, 23, 42, 0.72);
}

.portal-device {
  position: absolute;
  right: -170px;
  top: 96px;
  width: 300px;
  height: 560px;
  border: 1px solid rgba(59, 130, 246, 0.28);
  border-radius: 42px;
  background:
    linear-gradient(145deg, rgba(59, 130, 246, 0.18), rgba(2, 6, 23, 0.1)),
    repeating-linear-gradient(0deg, rgba(37, 99, 235, 0.2) 0 2px, transparent 2px 28px);
  box-shadow: inset 0 0 58px rgba(37, 99, 235, 0.24), 0 28px 80px rgba(0, 0, 0, 0.34);
  opacity: 0.62;
  transform: rotate(-18deg);
}

body:not(.official-open) .portal-search-band,
body:not(.official-open) .portal-title,
body:not(.official-open) .portal-section-actions,
body:not(.official-open) .portal-cards,
body:not(.official-open) .official-panel-link {
  position: relative;
  z-index: 1;
  grid-column: 2;
}

body:not(.official-open) .portal-title {
  display: grid;
  justify-items: center;
  gap: 8px;
  margin: 72px 48px 10px;
  color: #f8fafc;
}

body:not(.official-open) .portal-title::before {
  content: "▣";
  display: grid;
  place-items: center;
  width: 86px;
  height: 86px;
  border-radius: 24px;
  color: #fff;
  background: radial-gradient(circle at 50% 20%, rgba(96, 165, 250, 0.42), rgba(30, 64, 175, 0.2));
  box-shadow: 0 18px 52px rgba(37, 99, 235, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  font-size: 32px;
}

body:not(.official-open) .portal-title .portal-globe {
  display: none;
}

body:not(.official-open) .portal-title h2 {
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 850;
  text-align: center;
}

body:not(.official-open) .portal-title h2 span,
body:not(.official-open) .portal-title h2 strong {
  color: inherit;
}

body:not(.official-open) .portal-title .portal-edit {
  position: absolute;
  top: -54px;
  right: 0;
  border-color: rgba(148, 163, 184, 0.24);
  color: rgba(226, 232, 240, 0.86);
  background: rgba(15, 23, 42, 0.7);
}

body:not(.official-open) .portal-title::after {
  content: "Escolha uma área para acessar o painel de gestão.";
  color: rgba(203, 213, 225, 0.72);
  font-size: 16px;
  font-weight: 500;
}

body:not(.official-open) .portal-search-band {
  min-height: auto;
  margin: 22px 48px 16px;
  padding: 0;
  border-radius: 0;
  background: transparent;
}

body:not(.official-open) .portal-emblem {
  display: none;
}

body:not(.official-open) .portal-search {
  min-height: 58px;
  border-color: rgba(148, 163, 184, 0.24);
  color: rgba(226, 232, 240, 0.88);
  background: rgba(15, 23, 42, 0.54);
  box-shadow: none;
}

body:not(.official-open) .portal-search input {
  color: #f8fafc;
}

body:not(.official-open) .portal-search input::placeholder {
  color: rgba(203, 213, 225, 0.56);
}

body:not(.official-open) .portal-edit-band {
  top: -42px;
  right: 0;
  border-color: rgba(148, 163, 184, 0.24);
  color: rgba(226, 232, 240, 0.86);
  background: rgba(15, 23, 42, 0.7);
}

body:not(.official-open) .portal-section-actions {
  margin: 0 48px 12px;
}

body:not(.official-open) .portal-edit-light {
  border-color: rgba(148, 163, 184, 0.24);
  color: rgba(226, 232, 240, 0.86);
  background: rgba(15, 23, 42, 0.7);
  box-shadow: none;
}

body:not(.official-open) .portal-cards {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0 48px;
  max-height: 380px;
  overflow: auto;
  padding-right: 4px;
}

body:not(.official-open) .portal-card {
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center;
  min-height: 72px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 10px;
  padding: 12px;
  background: rgba(15, 23, 42, 0.52);
  box-shadow: none;
  text-align: left;
}

body:not(.official-open) .portal-card:hover {
  transform: translateY(-2px);
  border-color: rgba(37, 99, 235, 0.64);
  background: rgba(30, 64, 175, 0.28);
}

body:not(.official-open) .portal-card-icon,
body:not(.official-open) .portal-card-title-pill,
body:not(.official-open) .portal-card small {
  position: static;
  transform: none;
}

body:not(.official-open) .portal-card-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  color: #60a5fa;
  background: rgba(37, 99, 235, 0.12);
  font-size: 22px;
}

body:not(.official-open) .portal-card-title-pill {
  width: auto;
  min-height: 0;
  padding: 0 0 0 12px;
  color: #f8fafc;
  background: transparent;
  box-shadow: none;
  font-size: 14px;
  justify-items: start;
}

body:not(.official-open) .portal-card small {
  grid-column: 2;
  margin: 4px 0 0 12px;
  color: rgba(203, 213, 225, 0.54);
}

body:not(.official-open) .portal-card-add {
  color: #60a5fa;
}

body:not(.official-open) .official-panel-link {
  width: auto;
  min-height: 62px;
  margin: 22px 48px 72px;
  border-radius: 8px;
  background: linear-gradient(90deg, #1f6bff, #1557ff);
  box-shadow: 0 18px 40px rgba(37, 99, 235, 0.28);
  font-size: 17px;
}

.group-name:hover,
.service-title strong:hover {
  color: var(--blue-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.toolbar .search {
  display: none;
}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid rgba(0, 115, 234, 0.35);
  outline-offset: 2px;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  padding: 10px 24px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
}

body[data-tab-tone="dark"] .topbar,
body[data-tab-tone="dark"] .tabs {
  background: rgba(17, 24, 39, 0.96);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  color: #fff;
  background: var(--blue);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0;
  box-shadow: 0 8px 20px rgba(0, 115, 234, 0.24);
}

.brand-copy {
  display: grid;
  gap: 2px;
}

h1 {
  margin: 0;
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: 0;
}

.brand-copy span {
  color: var(--muted);
  font-size: 12px;
}

.top-actions,
.toolbar-row,
.toolbar-group,
.tabs {
  display: flex;
  align-items: center;
}

.group-tabs {
  position: sticky;
  top: 49px;
  z-index: 17;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  overflow-x: auto;
}

.group-tabs[hidden] {
  display: none;
}

.group-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 14px;
  color: var(--text);
  background: var(--surface);
  font-weight: 850;
  white-space: nowrap;
}

.group-tab span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--group-color, var(--blue));
}

.group-tab.active {
  border-color: var(--group-color, var(--blue));
  color: var(--group-color, var(--blue));
  background: color-mix(in srgb, var(--group-color, var(--blue)) 10%, #ffffff);
}

.group-tab.add {
  color: var(--blue-dark);
  border-style: dashed;
}

.top-actions {
  gap: 8px;
}

.avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #fff;
  background: #344c8a;
  font-size: 12px;
  font-weight: 800;
}

.theme-picker {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 5px 8px 5px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.theme-picker input {
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 5px;
  padding: 0;
  background: transparent;
}

.theme-picker input::-webkit-color-swatch-wrapper {
  padding: 0;
}

.theme-picker input::-webkit-color-swatch {
  border: 1px solid var(--line);
  border-radius: 5px;
}

.board-shell {
  min-width: 0;
}

.tabs {
  position: sticky;
  top: 0;
  z-index: 18;
  gap: 4px;
  padding: 12px 24px 0;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
}

.tab-item {
  display: inline-flex;
  align-items: center;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
}

.tab-item.active {
  border-color: var(--line);
  background: var(--page);
}

.tab-item.dark {
  background: #111827;
}

.tab-item.dark .tab,
.tab-item.dark .tab-edit,
.tab-item.dark .tab-delete {
  color: #dbeafe;
}

.tab-item.light {
  background: transparent;
}

.tab {
  height: 36px;
  border: 0;
  border-radius: 8px 8px 0 0;
  padding: 0 14px;
  color: var(--muted);
  background: transparent;
  font-weight: 650;
}

.tab:hover {
  color: var(--text);
  background: var(--surface-soft);
}

.tab-item.active .tab {
  color: var(--blue-dark);
  background: transparent;
}

.tab-edit,
.tab-delete {
  display: grid;
  place-items: center;
  width: 28px;
  height: 34px;
  border: 0;
  border-radius: 6px;
  color: var(--muted);
  background: transparent;
  font-weight: 800;
}

.tab-edit:hover {
  color: var(--blue-dark);
  background: var(--blue-soft);
}

.tab-delete {
  color: var(--muted);
}

.tab-delete:hover {
  color: #fff;
  background: var(--red);
}

.tab-add {
  min-width: 38px;
  border: 1px solid var(--line);
  color: var(--blue-dark);
  background: var(--surface);
}

#toggleTabTone[aria-pressed="true"] {
  color: #dbeafe;
  border-color: #475569;
  background: #111827;
}

.toolbar {
  padding: 18px 24px 14px;
}

.toolbar-row {
  justify-content: space-between;
  gap: 16px;
}

.toolbar-group {
  flex-wrap: wrap;
  gap: 8px;
}

.toolbar-group.filters {
  justify-content: flex-end;
}

.realzito-widget {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 60;
  display: grid;
  justify-items: end;
  gap: 12px;
}

.realzito-orb {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border: 1px solid color-mix(in srgb, var(--blue) 62%, #fff);
  border-radius: 50%;
  color: #fff;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.9), transparent 19px),
    linear-gradient(145deg, var(--blue), var(--blue-dark));
  box-shadow: 0 18px 40px rgba(24, 32, 56, 0.24);
  cursor: grab;
  touch-action: none;
}

.realzito-orb:active {
  cursor: grabbing;
}

.realzito-orb.listening {
  box-shadow:
    0 18px 40px rgba(24, 32, 56, 0.24),
    0 0 0 8px color-mix(in srgb, var(--blue) 22%, transparent);
}

.realzito-orb span {
  font-size: 24px;
  font-weight: 900;
}

.realzito-chat {
  width: min(380px, calc(100vw - 32px));
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 22px 70px rgba(24, 32, 56, 0.24);
  overflow: hidden;
}

.realzito-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--blue-dark));
}

.realzito-head div {
  display: grid;
  gap: 2px;
}

.realzito-head span {
  font-size: 11px;
  font-weight: 800;
  opacity: 0.82;
  text-transform: uppercase;
}

.realzito-head strong {
  font-size: 20px;
  font-weight: 900;
}

.realzito-head .icon-button {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.14);
}

.realzito-messages {
  display: grid;
  gap: 8px;
  max-height: 260px;
  padding: 14px;
  overflow-y: auto;
}

.realzito-message {
  max-width: 88%;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--surface-soft);
}

.realzito-message.user {
  justify-self: end;
  color: #fff;
  background: var(--blue);
}

.realzito-message span {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.realzito-message p {
  margin: 0;
  line-height: 1.35;
}

.realzito-controls {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
  padding: 0 14px 14px;
}

.voice-mic.listening {
  background: var(--red);
  box-shadow: 0 0 0 4px var(--red-soft);
}

.voice-command {
  display: grid;
  gap: 6px;
}

.voice-command span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.voice-command input {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 10px;
  color: var(--text);
  background: var(--surface);
}

.voice-assistant-feedback {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border-top: 1px solid var(--line);
  background: var(--surface-soft);
}

.voice-assistant-feedback span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.voice-assistant-feedback strong {
  font-size: 13px;
}

.primary,
.ghost,
.danger,
.icon-button {
  min-height: 36px;
  border-radius: 6px;
  padding: 8px 12px;
  transition:
    background 0.16s ease,
    border-color 0.16s ease,
    color 0.16s ease,
    box-shadow 0.16s ease;
}

.primary {
  border: 1px solid var(--blue);
  color: #fff;
  background: var(--blue);
  font-weight: 700;
  box-shadow: 0 8px 18px rgba(0, 115, 234, 0.2);
}

.primary:hover {
  background: var(--blue-dark);
  border-color: var(--blue-dark);
}

.primary.small {
  min-height: 34px;
  padding: 7px 11px;
  color: var(--blue-dark);
  background: var(--blue-soft);
  box-shadow: none;
}

.ghost,
.icon-button {
  border: 1px solid var(--line);
  color: var(--text);
  background: var(--surface);
}

.ghost.compact {
  min-height: 32px;
  padding: 6px 10px;
}

.ghost:hover,
.icon-button:hover {
  border-color: var(--line-strong);
  background: var(--surface-soft);
}

.search {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 320px;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
}

.search span {
  color: var(--muted);
}

.search:focus-within {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0, 115, 234, 0.12);
}

.search input,
select {
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  outline: 0;
}

.search input {
  width: 100%;
  border: 0;
  background: transparent;
}

select {
  min-width: 120px;
  padding: 0 34px 0 10px;
}

.metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 12px;
  padding: 0 24px 18px;
}

.metrics article {
  position: relative;
  display: grid;
  gap: 7px;
  min-height: 72px;
  padding: 14px 16px 14px 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 4px 14px rgba(24, 32, 56, 0.04);
  overflow: hidden;
}

body[data-tab-tone="dark"] .metrics article,
body[data-tab-tone="dark"] .empty-state,
body[data-tab-tone="dark"] .group,
body[data-tab-tone="dark"] .task-dialog {
  background: var(--surface);
}

.metrics article::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--metric-color, var(--blue));
}

.metrics article[data-tone="open"] {
  --metric-color: var(--blue);
}

.metrics article[data-tone="budget"] {
  --metric-color: var(--green);
}

.metrics article[data-tone="late"] {
  --metric-color: var(--red);
}

.metrics article[data-tone="approved"] {
  --metric-color: var(--yellow);
}

.metrics span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.metrics strong {
  font-size: 24px;
  line-height: 1;
}

.board {
  padding: 0 24px 44px;
}

.empty-state {
  display: grid;
  gap: 12px;
  justify-items: start;
  max-width: 540px;
  padding: 28px;
  border: 1px dashed var(--line-strong);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.empty-state h2 {
  margin: 0;
  font-size: 20px;
}

.empty-state p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.group {
  margin-bottom: 22px;
  border-left: 4px solid var(--group-color);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.group-title {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 10px 14px 10px 12px;
  color: var(--text);
  border-bottom: 1px solid var(--line);
  background: #fbfcff;
}

body[data-tab-tone="dark"] .group-title,
body[data-tab-tone="dark"] .head,
body[data-tab-tone="dark"] .summary {
  background: #182235;
}

body[data-tab-tone="dark"] .table,
body[data-tab-tone="dark"] .cell,
body[data-tab-tone="dark"] .add-row,
body[data-tab-tone="dark"] .search,
body[data-tab-tone="dark"] select,
body[data-tab-tone="dark"] input,
body[data-tab-tone="dark"] textarea,
body[data-tab-tone="dark"] .ghost,
body[data-tab-tone="dark"] .icon-button,
body[data-tab-tone="dark"] .theme-picker {
  color: var(--text);
  background: var(--surface);
}

body[data-tab-tone="dark"] .search input {
  background: transparent;
}

body[data-tab-tone="dark"] .service-title strong {
  color: var(--text);
}

body[data-tab-tone="dark"] .status-started,
body[data-tab-tone="dark"] .priority-low,
body[data-tab-tone="dark"] .approval-pending {
  color: #e5edf7;
  background: #475569;
}

body[data-tab-tone="dark"] .done-check {
  color: var(--muted);
  background: #0f172a;
}

body[data-tab-tone="dark"] .selected-cell {
  background: color-mix(in srgb, var(--blue) 18%, #111827) !important;
}

.group-title .icon-button,
.group-title .checkbox {
  color: var(--group-color);
}

.group-badge {
  padding: 4px 8px;
  border: 1px solid color-mix(in srgb, var(--group-color) 45%, transparent);
  border-radius: 6px;
  color: var(--group-color);
  background: color-mix(in srgb, var(--group-color) 10%, #fff);
  font-size: 12px;
  font-weight: 800;
}

.client-balance {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 6px 8px 6px 12px;
  border: 1px solid color-mix(in srgb, var(--group-color) 30%, var(--line));
  border-radius: 8px;
  color: var(--text);
  background: color-mix(in srgb, var(--group-color) 8%, var(--surface));
  box-shadow: inset 3px 0 0 var(--group-color);
}

.client-balance span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.client-balance strong {
  font-size: 16px;
  font-weight: 900;
  white-space: nowrap;
}

.client-balance-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.client-balance-actions button {
  min-width: 30px;
  height: 28px;
  padding: 4px 8px;
  font-size: 12px;
}

.client-balance-actions button:not(:last-child) {
  width: 30px;
  padding: 0;
}

.group-copy {
  display: grid;
  gap: 3px;
  min-width: 160px;
}

.group-name {
  font-size: 18px;
  font-weight: 800;
}

.group-meta {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.group-tools {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.group-tools button {
  display: grid;
  place-items: center;
  min-width: 32px;
  height: 32px;
  padding: 0;
}

.table {
  display: grid;
  grid-template-columns: 42px 96px minmax(280px, 1.6fr) minmax(220px, 1.2fr) 140px 132px 132px 148px 140px minmax(170px, 1fr) 104px;
  border-left: 1px solid var(--line);
  background: var(--surface);
  overflow-x: auto;
}

.cell {
  min-height: 42px;
  padding: 9px 10px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.head {
  position: sticky;
  top: 0;
  z-index: 1;
  min-height: 38px;
  color: #475467;
  background: #f7f9fc;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.title-cell {
  justify-content: flex-start;
}

.service-title {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.service-title strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 14px;
  font-weight: 650;
  text-overflow: ellipsis;
}

.service-title small {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
}

.detail-cell {
  align-items: flex-start;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  white-space: normal;
}

.service-type {
  max-width: 100%;
  overflow: hidden;
  padding: 3px 7px;
  border-radius: 6px;
  color: var(--blue-dark);
  background: var(--blue-soft);
  font-size: 11px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-cell small {
  display: -webkit-box;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.checkbox {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border: 1px solid #aab4c4;
  border-radius: 4px;
  padding: 0;
  color: #fff;
  background: #fff;
  font-size: 12px;
  font-weight: 900;
}

.checkbox.selected {
  border-color: var(--blue);
  background: var(--blue);
}

.done-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 10px;
  color: var(--muted);
  background: #fff;
  font-size: 12px;
  font-weight: 800;
}

.done-check::before {
  content: "";
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border: 1px solid #aab4c4;
  border-radius: 4px;
  color: #fff;
  background: #fff;
}

.done-check.done {
  border-color: color-mix(in srgb, var(--green) 45%, var(--line));
  color: var(--green);
  background: var(--green-soft);
}

.done-check.done::before {
  content: "✓";
  border-color: var(--green);
  background: var(--green);
  font-size: 12px;
  line-height: 1;
}

.selected-cell {
  background: var(--blue-soft) !important;
}

.pill {
  min-height: 28px;
  justify-content: center;
  border: 0;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}

.status-started {
  color: #344054;
  background: #e4e7ec;
}

.status-progress {
  background: #5b8def;
}

.status-done,
.priority-high,
.approval-ok {
  background: var(--green);
}

.priority-normal,
.approval-review {
  background: var(--red);
}

.priority-low,
.approval-pending {
  color: #344054;
  background: #d0d5dd;
}

.due-late {
  color: var(--red);
  font-weight: 800;
}

.summary {
  background: #fbfcff;
  color: var(--muted);
  font-size: 12px;
}

.summary small {
  margin-left: 4px;
  color: var(--muted);
}

.bar {
  width: 100%;
  height: 10px;
  border-radius: 5px;
  background: #e4e7ec;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  border-radius: inherit;
  background: var(--green);
}

.add-row {
  justify-content: flex-start;
  color: var(--blue-dark);
  background: #fff;
  font-weight: 700;
}

.add-row:hover {
  background: var(--blue-soft);
}

.row-actions button {
  min-width: 34px;
  width: auto;
  height: 30px;
  padding: 0 8px;
}

.task-dialog {
  width: min(720px, calc(100vw - 32px));
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0;
  background: var(--surface);
  box-shadow: 0 22px 70px rgba(24, 32, 56, 0.24);
}

.portal-editor-dialog {
  width: min(1120px, calc(100vw - 28px));
}

.stock-dialog {
  width: min(780px, calc(100vw - 28px));
}

.stock-editor-preview {
  display: grid;
  gap: 8px;
  margin: 18px 0 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 10%, transparent), transparent 58%),
    var(--surface-soft);
}

.stock-editor-preview strong {
  font-size: 20px;
  line-height: 1.2;
}

.stock-editor-preview p {
  margin: 0;
  color: var(--muted);
  font-weight: 700;
}

.stock-editor-preview div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.stock-editor-preview div span {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 10px;
  color: var(--text);
  background: var(--surface);
  font-weight: 800;
}

.screen-type-badge {
  justify-self: start;
  border: 1px solid color-mix(in srgb, var(--primary) 45%, var(--line));
  border-radius: 999px;
  padding: 5px 9px;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.stock-brand-badge {
  justify-self: start;
  border: 1px solid rgba(80, 147, 255, 0.36);
  border-radius: 999px;
  padding: 5px 9px;
  color: #9fc2ff;
  background: rgba(30, 98, 220, 0.16);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.brand-tab {
  --group-color: #1f6fff;
}

.brand-tab small {
  display: inline-grid;
  min-width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 999px;
  padding: 0 7px;
  color: #bfceea;
  background: rgba(255, 255, 255, 0.08);
  font-size: 11px;
  font-weight: 900;
}

.brand-tab.active small {
  color: #fff;
  background: rgba(255, 255, 255, 0.2);
}

.inventory-empty-card {
  display: grid;
  align-content: center;
  min-height: 220px;
  border: 1px dashed rgba(148, 163, 184, 0.32);
  border-radius: 14px;
  padding: 24px;
  color: #d9e6ff;
  background: rgba(13, 31, 49, 0.66);
}

.inventory-empty-card p {
  margin: 8px 0 0;
  color: #8796ad;
}

.portal-editor-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  max-height: min(72vh, 760px);
  overflow: auto;
  padding-top: 18px;
}

.portal-editor-panel {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px;
  background: var(--surface-soft);
}

.portal-editor-panel.wide {
  grid-column: 1 / -1;
}

.portal-editor-panel h3,
.portal-editor-title-row h3 {
  margin: 0 0 14px;
  font-size: 15px;
  text-transform: uppercase;
}

.portal-editor-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.editor-hint {
  margin: -4px 0 14px;
  color: var(--muted);
  font-size: 13px;
}

.portal-card-editor-list {
  display: grid;
  gap: 12px;
}

.portal-card-editor {
  display: grid;
  grid-template-columns: minmax(150px, 220px) 1fr auto;
  gap: 14px;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  background: var(--surface);
}

.card-preview {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 154px;
  overflow: hidden;
  border: 0;
  border-radius: 24px;
  padding: 18px;
  color: #fff;
  background:
    radial-gradient(circle at 34% 24%, color-mix(in srgb, var(--card-color, #002f86) 72%, #2b7cff) 0 18%, transparent 42%),
    linear-gradient(145deg, color-mix(in srgb, var(--card-color, #002f86) 78%, #001b4a), color-mix(in srgb, var(--card-color, #002f86) 88%, #020817));
  text-align: center;
}

.card-preview span {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  color: #fff;
  font-size: 32px;
  font-weight: 950;
}

.card-preview strong {
  display: grid;
  place-items: center;
  width: min(88%, 170px);
  min-height: 38px;
  border-radius: 999px;
  padding: 8px 12px;
  color: color-mix(in srgb, var(--card-color, #002f86) 82%, #000);
  background: #fff;
  font-size: 13px;
}

.card-preview small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.card-fields {
  display: grid;
  grid-template-columns: 1fr 86px 86px 1fr;
  gap: 10px;
}

.card-fields label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.card-fields .wide {
  grid-column: 1 / -1;
}

.card-fields input,
.card-fields select {
  width: 100%;
}

.danger.compact {
  align-self: start;
  min-height: 32px;
  padding: 6px 10px;
}

.task-dialog::backdrop {
  background: rgba(25, 31, 48, 0.42);
  backdrop-filter: blur(2px);
}

.task-dialog form {
  padding: 22px;
}

.dialog-subtitle {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.balance-dialog {
  width: min(460px, calc(100vw - 32px));
}

.password-recovery-dialog {
  width: min(520px, calc(100vw - 32px));
}

.register-user-dialog {
  width: min(560px, calc(100vw - 32px));
}

.gmail-setup-dialog {
  width: min(620px, calc(100vw - 32px));
}

.gmail-setup-guide {
  display: grid;
  gap: 10px;
  margin: 14px 0 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px;
  background: var(--surface-soft);
}

.gmail-setup-guide strong {
  font-size: 14px;
}

.gmail-setup-guide p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.gmail-setup-guide div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dialog-hint {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.dialog-hint[data-tone="success"] {
  color: #17a865;
}

.dialog-hint[data-tone="warn"] {
  color: #b7791f;
}

.dialog-hint[data-tone="error"] {
  color: #d92d20;
}

.inline-field-action {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
}

.inline-field-action .ghost {
  align-self: stretch;
  white-space: nowrap;
}

.recovery-code-row input {
  font-weight: 900;
  letter-spacing: 0.08em;
}

.balance-current {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 18px 0 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--blue-soft);
}

.balance-current span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.balance-current strong {
  font-size: 22px;
  font-weight: 900;
}

.dialog-head,
.dialog-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  padding: 0;
}

.dialog-actions.split-actions {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 10px;
}

.dialog-actions .danger {
  border-color: rgba(239, 68, 68, 0.36);
  color: #ff9b87;
  background: rgba(239, 68, 68, 0.1);
}

.dialog-head {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.dialog-head h2 {
  margin: 0;
  font-size: 20px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding-top: 18px;
}

.form-grid label {
  display: grid;
  gap: 7px;
  color: #8ea2bd;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.form-grid input,
.form-grid select,
.form-grid textarea {
  width: 100%;
  border: 1px solid rgba(148, 163, 184, 0.28);
  padding: 0 10px;
  background: rgba(7, 18, 31, 0.92);
  color: #f8fafc;
  font-size: 14px;
  font-weight: 500;
  text-transform: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.form-grid input::placeholder,
.form-grid textarea::placeholder {
  color: #7f8fa6;
}

.form-grid input:focus,
.form-grid select:focus,
.form-grid textarea:focus {
  border-color: #2f8cff;
  background: rgba(10, 25, 43, 0.98);
  outline: none;
  box-shadow: 0 0 0 3px rgba(31, 107, 255, 0.2);
}

.form-grid select option {
  color: #f8fafc;
  background: #0b1728;
}

.form-grid input,
.form-grid select {
  height: 40px;
}

.form-grid textarea {
  min-height: 82px;
  padding: 10px;
  resize: vertical;
  line-height: 1.4;
}

.form-grid input[type="color"] {
  padding: 4px;
  background: rgba(7, 18, 31, 0.92);
}

.form-grid .wide {
  grid-column: 1 / -1;
}

.dialog-actions {
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

.task-triage-note {
  margin: 14px 0 0;
  border: 1px solid rgba(59, 130, 246, 0.24);
  border-radius: 6px;
  padding: 10px 12px;
  color: #bfdbfe;
  background: rgba(37, 99, 235, 0.08);
  font-size: 12px;
}

.task-triage-submit {
  border-color: rgba(96, 165, 250, 0.44);
  color: #bfdbfe;
  background: rgba(37, 99, 235, 0.12);
}

.destroy-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0;
  background: rgba(15, 23, 42, 0);
  transition:
    opacity 0.18s ease,
    background 0.18s ease;
}

.destroy-overlay.active {
  pointer-events: auto;
  opacity: 1;
  background: rgba(15, 23, 42, 0.18);
}

.destroy-stage {
  position: relative;
  width: min(680px, calc(100vw - 34px));
  height: 280px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(246, 248, 251, 0.9)),
    radial-gradient(circle at 80% 30%, var(--blue-soft), transparent 36%);
  box-shadow: 0 24px 80px rgba(24, 32, 56, 0.26);
  overflow: hidden;
}

.destroy-stage::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 52px;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(102, 112, 133, 0.28), transparent);
}

.destroy-target {
  position: absolute;
  top: 82px;
  right: 76px;
  z-index: 3;
  display: grid;
  gap: 5px;
  width: 210px;
  min-height: 78px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--red);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 32px rgba(24, 32, 56, 0.12);
}

.destroy-target span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.destroy-target strong {
  overflow: hidden;
  color: var(--text);
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dino-illustration {
  position: absolute;
  bottom: 45px;
  left: 0;
  z-index: 4;
  width: 210px;
  height: auto;
  fill: var(--blue);
  filter: drop-shadow(0 12px 18px rgba(24, 32, 56, 0.18));
  transform: translateX(-240px);
}

.dino-jaw {
  transform-origin: 226px 79px;
}

.dino-legs {
  fill: var(--blue-dark);
}

.dino-arm,
.dino-tail {
  fill: color-mix(in srgb, var(--blue) 84%, #111827);
}

.destroy-burst {
  position: absolute;
  top: 102px;
  right: 156px;
  z-index: 5;
  width: 64px;
  height: 64px;
  opacity: 0;
  transform: scale(0.6);
}

.destroy-burst span {
  position: absolute;
  top: 28px;
  left: 28px;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--red);
}

.destroy-burst span:nth-child(1) {
  transform: translate(-24px, -18px) rotate(18deg);
}

.destroy-burst span:nth-child(2) {
  transform: translate(22px, -14px) rotate(42deg);
}

.destroy-burst span:nth-child(3) {
  transform: translate(-10px, 24px) rotate(64deg);
  background: var(--orange);
}

.destroy-burst span:nth-child(4) {
  transform: translate(24px, 18px) rotate(12deg);
  background: var(--yellow);
}

#destroyMessage {
  position: absolute;
  right: 34px;
  bottom: 22px;
  left: 34px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  text-align: center;
}

.destroy-overlay.active .dino-illustration {
  animation: dino-grab 1.48s cubic-bezier(0.2, 0.84, 0.22, 1) both;
}

.destroy-overlay.active .dino-jaw {
  animation: dino-chomp 1.48s ease both;
}

.destroy-overlay.active .destroy-target {
  animation: target-snatch 1.48s ease both;
}

.destroy-overlay.active .destroy-burst {
  animation: target-burst 1.48s ease both;
}

@keyframes dino-grab {
  0% {
    transform: translateX(-240px) translateY(8px);
  }
  44% {
    transform: translateX(250px) translateY(0);
  }
  58% {
    transform: translateX(260px) translateY(0);
  }
  76% {
    transform: translateX(292px) translateY(3px);
  }
  100% {
    transform: translateX(760px) translateY(4px);
  }
}

@keyframes dino-chomp {
  0%,
  38%,
  100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(9deg);
  }
  61% {
    transform: rotate(-12deg);
  }
  68% {
    transform: rotate(0deg);
  }
}

@keyframes target-snatch {
  0%,
  42% {
    opacity: 1;
    transform: translateX(0) rotate(0deg) scale(1);
  }
  56% {
    opacity: 1;
    transform: translateX(-78px) rotate(-4deg) scale(0.94);
  }
  68% {
    opacity: 0;
    transform: translateX(-114px) rotate(8deg) scale(0.34);
  }
  100% {
    opacity: 0;
    transform: translateX(-114px) rotate(8deg) scale(0.34);
  }
}

@keyframes target-burst {
  0%,
  58% {
    opacity: 0;
    transform: scale(0.4);
  }
  66% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.6);
  }
}

@media (prefers-reduced-motion: reduce) {
  .destroy-overlay,
  .destroy-overlay.active .dino-illustration,
  .destroy-overlay.active .dino-jaw,
  .destroy-overlay.active .destroy-target,
  .destroy-overlay.active .destroy-burst {
    animation-duration: 0.01ms;
    transition-duration: 0.01ms;
  }
}

.destroy-overlay {
  display: block;
  place-items: initial;
  background: transparent;
}

.destroy-overlay.active {
  pointer-events: none;
  background: rgba(15, 23, 42, 0.06);
}

.destroy-stage {
  position: absolute;
  inset: 0;
  width: 100vw;
  height: 100vh;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.destroy-stage::after {
  top: 111px;
  bottom: auto;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(34, 197, 94, 0.34), transparent);
}

.destroy-target {
  position: fixed;
  top: var(--target-y, 220px);
  right: auto;
  left: var(--target-x, 58vw);
  z-index: 5;
  width: min(250px, calc(100vw - 48px));
  min-height: 64px;
  border-left-color: #22c55e;
}

.dino-illustration {
  position: fixed;
  top: 0;
  bottom: auto;
  left: 0;
  z-index: 6;
  width: 148px;
  fill: #22c55e;
  transform: translate(var(--dino-start-x, -150px), var(--dino-start-y, 72px)) scale(0.78);
  transform-origin: center bottom;
}

.dino-body,
.dino-jaw {
  fill: #22c55e;
}

.dino-legs {
  fill: #15803d;
}

.dino-arm,
.dino-tail {
  fill: #16a34a;
}

.dino-body,
.dino-tail,
.dino-arm,
.dino-legs path {
  transform-box: fill-box;
}

.dino-legs path:first-child {
  transform-origin: 70% 10%;
}

.dino-legs path:last-child {
  transform-origin: 28% 10%;
}

.destroy-burst {
  position: fixed;
  top: calc(var(--target-y, 220px) + 12px);
  right: auto;
  left: calc(var(--target-x, 58vw) + 86px);
  z-index: 7;
}

#destroyMessage {
  position: fixed;
  right: 24px;
  bottom: 20px;
  left: 24px;
  color: #166534;
}

.destroy-overlay.active .dino-illustration {
  animation: dino-walk-to-selection 1.72s cubic-bezier(0.2, 0.82, 0.18, 1) both;
}

.destroy-overlay.active .dino-body {
  animation: dino-body-step 0.24s ease-in-out infinite;
}

.destroy-overlay.active .dino-jaw {
  animation: none;
}

.destroy-overlay.active .dino-tail {
  animation: dino-tail-sway 0.32s ease-in-out infinite;
}

.destroy-overlay.active .dino-legs path:first-child {
  animation: dino-step-left 0.32s ease-in-out infinite;
}

.destroy-overlay.active .dino-legs path:last-child {
  animation: dino-step-right 0.32s ease-in-out infinite;
}

.destroy-overlay.active .destroy-target {
  animation: target-walked-away 1.72s ease both;
}

.destroy-overlay.active .destroy-burst {
  animation: dino-dust 1.72s ease both;
}

@keyframes dino-walk-to-selection {
  0% {
    transform: translate(var(--dino-start-x), var(--dino-start-y)) scale(0.78);
  }
  38% {
    transform: translate(var(--dino-mid-x), var(--dino-start-y)) scale(0.78);
  }
  62% {
    transform: translate(var(--dino-mid-x), calc(var(--dino-start-y) + 8px)) scale(0.78);
  }
  86% {
    transform: translate(var(--dino-target-x), var(--dino-target-y)) scale(0.78);
  }
  100% {
    transform: translate(calc(var(--dino-target-x) + 24px), var(--dino-target-y)) scale(0.78);
  }
}

@keyframes dino-body-step {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}

@keyframes dino-tail-sway {
  0%,
  100% {
    transform: rotate(-2deg);
  }
  50% {
    transform: rotate(5deg);
  }
}

@keyframes dino-step-left {
  0%,
  100% {
    transform: rotate(9deg) translateY(0);
  }
  50% {
    transform: rotate(-13deg) translateY(-4px);
  }
}

@keyframes dino-step-right {
  0%,
  100% {
    transform: rotate(-12deg) translateY(-3px);
  }
  50% {
    transform: rotate(10deg) translateY(0);
  }
}

@keyframes target-walked-away {
  0%,
  72% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
  86% {
    opacity: 1;
    transform: translateX(22px) scale(0.94);
  }
  100% {
    opacity: 0;
    transform: translateX(50px) scale(0.62);
  }
}

@keyframes dino-dust {
  0%,
  78% {
    opacity: 0;
    transform: scale(0.45);
  }
  88% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.45);
  }
}

@media (prefers-reduced-motion: reduce) {
  .destroy-overlay.active .dino-illustration,
  .destroy-overlay.active .dino-body,
  .destroy-overlay.active .dino-tail,
  .destroy-overlay.active .dino-legs path,
  .destroy-overlay.active .destroy-target,
  .destroy-overlay.active .destroy-burst {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
  }
}

.dino-eye {
  fill: #0f172a;
}

.destroy-overlay.active .dino-illustration {
  animation: dino-walk-shoot 2.95s cubic-bezier(0.2, 0.82, 0.18, 1) both;
}

.destroy-overlay.active .dino-body {
  animation: dino-hip-wiggle-shoot 2.95s ease-in-out both;
  transform-box: fill-box;
  transform-origin: 48% 76%;
}

.destroy-overlay.active .dino-tail {
  animation: dino-tail-shoot 2.95s ease-in-out both;
}

.destroy-overlay.active .dino-legs path:first-child {
  animation: dino-step-left-shoot 2.95s ease-in-out both;
}

.destroy-overlay.active .dino-legs path:last-child {
  animation: dino-step-right-shoot 2.95s ease-in-out both;
}

.destroy-overlay.active .dino-shooter-arm {
  animation: dino-aim-arm 2.95s ease both;
  transform-box: fill-box;
  transform-origin: 16% 50%;
}

.destroy-overlay.active .dino-shot {
  animation: dino-laser-shot 2.95s ease both;
}

.destroy-overlay.active .destroy-target {
  animation: target-shot-away 2.95s ease both;
}

.destroy-overlay.active .destroy-burst {
  animation: dino-shot-burst 2.95s ease both;
}

.dino-illustration {
  width: 205px;
}

.dino-green {
  fill: #8cc63f;
  stroke: #3f6d1f;
  stroke-width: 3;
}

.dino-green-dark {
  fill: #679b2d;
  stroke: #355f1c;
  stroke-width: 3;
}

.dino-belly,
.dino-snout,
.dino-toe {
  fill: #ffd98f;
  stroke: #a96a2b;
  stroke-width: 2.5;
}

.dino-plates,
.dino-spots,
.dino-brow {
  fill: #ee6b13;
  stroke: #9f3d0d;
  stroke-width: 2;
}

.dino-mouth {
  fill: #b91c3a;
  stroke: #5f1726;
  stroke-width: 2;
}

.dino-teeth {
  fill: #fff8df;
  stroke: #6b3d18;
  stroke-width: 1.4;
}

.dino-eye-white {
  fill: #ffffff;
  stroke: #355f1c;
  stroke-width: 2;
}

.dino-eye-iris {
  fill: #b93a10;
}

.dino-eye-dot {
  fill: #111827;
}

.dino-blaster {
  fill: #475467;
  stroke: #111827;
  stroke-width: 3;
}

.dino-blaster-dark {
  fill: #111827;
}

.dino-shot {
  position: fixed;
  top: var(--shot-y, 180px);
  left: var(--shot-x, 420px);
  z-index: 6;
  width: var(--shot-width, 120px);
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, #fff7ad, #facc15 32%, #f97316 68%, transparent);
  box-shadow:
    0 0 0 2px rgba(250, 204, 21, 0.22),
    0 0 16px rgba(249, 115, 22, 0.72);
  opacity: 0;
  transform: rotate(var(--shot-angle, 0deg)) scaleX(0);
  transform-origin: left center;
}

@keyframes dino-walk-shoot {
  0% {
    transform: translate(var(--dino-start-x), var(--dino-start-y)) scale(0.66);
  }
  35% {
    transform: translate(var(--dino-mid-x), var(--dino-start-y)) scale(0.66);
  }
  52% {
    transform: translate(var(--dino-target-x), var(--dino-target-y)) scale(0.66);
  }
  62% {
    transform: translate(calc(var(--dino-target-x) - 12px), var(--dino-target-y)) scale(0.66) rotate(-4deg);
  }
  70% {
    transform: translate(calc(var(--dino-target-x) + 12px), var(--dino-target-y)) scale(0.66) rotate(4deg);
  }
  78% {
    transform: translate(calc(var(--dino-target-x) - 9px), var(--dino-target-y)) scale(0.66) rotate(-3deg);
  }
  84%,
  100% {
    transform: translate(var(--dino-target-x), var(--dino-target-y)) scale(0.66) rotate(0deg);
  }
}

@keyframes dino-hip-wiggle-shoot {
  0%,
  52%,
  84%,
  100% {
    transform: rotate(0deg) translateY(0);
  }
  58% {
    transform: rotate(-8deg) translateX(-3px);
  }
  64% {
    transform: rotate(9deg) translateX(3px);
  }
  70% {
    transform: rotate(-7deg) translateX(-3px);
  }
  76% {
    transform: rotate(8deg) translateX(3px);
  }
}

@keyframes dino-tail-shoot {
  0%,
  52%,
  100% {
    transform: rotate(-2deg);
  }
  60% {
    transform: rotate(12deg);
  }
  68% {
    transform: rotate(-14deg);
  }
  76% {
    transform: rotate(10deg);
  }
}

@keyframes dino-step-left-shoot {
  0%,
  52% {
    transform: rotate(9deg) translateY(0);
  }
  26% {
    transform: rotate(-13deg) translateY(-4px);
  }
  58%,
  100% {
    transform: rotate(0deg) translateY(0);
  }
}

@keyframes dino-step-right-shoot {
  0%,
  52% {
    transform: rotate(-12deg) translateY(-3px);
  }
  26% {
    transform: rotate(10deg) translateY(0);
  }
  58%,
  100% {
    transform: rotate(0deg) translateY(0);
  }
}

@keyframes dino-aim-arm {
  0%,
  78% {
    transform: rotate(0deg);
  }
  84% {
    transform: rotate(-8deg);
  }
  100% {
    transform: rotate(-8deg);
  }
}

@keyframes dino-laser-shot {
  0%,
  82% {
    opacity: 0;
    transform: rotate(var(--shot-angle, 0deg)) scaleX(0);
  }
  86% {
    opacity: 1;
    transform: rotate(var(--shot-angle, 0deg)) scaleX(1);
  }
  91% {
    opacity: 0.9;
    transform: rotate(var(--shot-angle, 0deg)) scaleX(1);
  }
  96%,
  100% {
    opacity: 0;
    transform: rotate(var(--shot-angle, 0deg)) scaleX(0.35);
  }
}

@keyframes target-shot-away {
  0%,
  88% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
  94% {
    opacity: 1;
    transform: translateX(8px) scale(0.96) rotate(2deg);
  }
  100% {
    opacity: 0;
    transform: translateX(42px) scale(0.48) rotate(-8deg);
  }
}

@keyframes dino-shot-burst {
  0%,
  87% {
    opacity: 0;
    transform: scale(0.45);
  }
  91% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.45);
  }
}

@media (max-width: 1180px) {
  .toolbar-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .toolbar-group,
  .toolbar-row {
    width: 100%;
  }

  .toolbar-group.filters {
    justify-content: flex-start;
  }
}

@media (max-width: 900px) {
  .topbar,
  .top-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .top-actions,
  .toolbar-group {
    width: 100%;
  }

  .search {
    min-width: min(100%, 360px);
  }

  .board-shell {
    min-width: 0;
    overflow-x: auto;
  }

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

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

  .portal-editor-layout,
  .portal-card-editor,
  .card-fields {
    grid-template-columns: 1fr;
  }

  .portal-search-band {
    padding: 16px;
  }

  .portal-edit-band {
    position: static;
    width: fit-content;
    margin-left: auto;
  }

  body:not(.official-open) .portal-header .top-actions {
    position: static;
    margin: 0 18px 18px;
  }

  body:not(.official-open) .masthead-grid {
    align-items: flex-start;
    flex-direction: column;
    padding: 18px 0;
  }

  body:not(.official-open) .portal-hero .portal-container {
    grid-template-columns: 1fr;
    gap: 28px;
    min-height: auto;
  }

  body:not(.official-open) .portal-hero .portal-container::after,
  body:not(.official-open) .portal-copy,
  body:not(.official-open) .portal-search-band,
  body:not(.official-open) .portal-title,
  body:not(.official-open) .portal-section-actions,
  body:not(.official-open) .portal-cards,
  body:not(.official-open) .official-panel-link {
    grid-column: 1;
  }

  body:not(.official-open) .portal-hero .portal-container::after {
    grid-row: 2 / 8;
  }

  body:not(.official-open) .portal-copy {
    grid-row: 1;
  }

  body:not(.official-open) .portal-device {
    display: none;
  }

  body:not(.official-open) .portal-title,
  body:not(.official-open) .portal-search-band,
  body:not(.official-open) .portal-section-actions,
  body:not(.official-open) .portal-cards,
  body:not(.official-open) .official-panel-link {
    margin-left: 22px;
    margin-right: 22px;
  }

  body:not(.official-open) .portal-cards {
    grid-template-columns: 1fr;
    max-height: none;
  }
}

@media (max-width: 560px) {
  .topbar,
  .tabs,
  .toolbar,
  .metrics,
  .board {
    padding-left: 14px;
    padding-right: 14px;
  }

  .realzito-widget {
    right: 14px;
    bottom: 14px;
  }

  .realzito-chat {
    width: calc(100vw - 28px);
  }

  .realzito-controls {
    grid-template-columns: 1fr;
  }

  .voice-assistant-feedback {
    align-items: stretch;
  }

  .voice-assistant-feedback strong {
    text-align: left;
  }

  .metrics {
    grid-template-columns: 1fr;
  }
}

.portal-login-screen{
    position:fixed;
    overflow:visible;
}

.portal-login-left,
.portal-login-card{
    position:relative;
    z-index:1;
}

/* MASCOTE ANIMADO LOGIN */

.mascot-wrap{
  position:absolute;
  left: 600px;
  bottom: 500px;
  z-index:5;
  pointer-events:none;
  animation: mascotEntry .9s ease forwards;
}

.login-mascot{
  width:500px;
  max-width:32vw;
  transform-origin:center bottom;
  animation:
    mascotFloat 3.4s ease-in-out infinite,
    mascotGlow 2.8s ease-in-out infinite;
  filter:drop-shadow(0 22px 38px rgba(0,115,234,.38));
}

@keyframes mascotEntry{
  from{
    opacity:0;
    transform:translateY(35px) scale(.92);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

@keyframes mascotFloat{
  0%,100%{
    transform:translateY(0) rotate(-1.5deg);
  }
  50%{
    transform:translateY(-18px) rotate(1.5deg);
  }
}

@keyframes mascotGlow{
  0%,100%{
    filter:drop-shadow(0 22px 38px rgba(0,115,234,.38));
  }
  50%{
    filter:drop-shadow(0 30px 55px rgba(56,189,248,.75));
  }
}

.portal-login-screen{
  position:relative;
  overflow:hidden;
}

@media(max-width:900px){
  .mascot-wrap{
    display:none;
  }
}

/* Login moderno e selos de seguranca */
body:not(.official-open) .portal-login-screen {
  position: relative;
  grid-template-columns: minmax(520px, 1.08fr) minmax(380px, 500px);
  gap: clamp(34px, 6vw, 96px);
  min-height: 100vh;
  padding: clamp(34px, 5vw, 74px);
  background:
    radial-gradient(circle at 12% 12%, rgba(37, 99, 235, .34), transparent 30%),
    radial-gradient(circle at 82% 18%, rgba(56, 189, 248, .20), transparent 28%),
    radial-gradient(circle at 70% 84%, rgba(0, 200, 135, .10), transparent 30%),
    linear-gradient(135deg, #030916 0%, #07162d 48%, #020617 100%);
}

body:not(.official-open) .portal-login-screen::before {
  left: auto;
  right: -16vw;
  top: -18vh;
  width: 64vw;
  height: 64vw;
  border: 1px solid rgba(125, 190, 255, .18);
  background: radial-gradient(circle, rgba(49, 130, 255, .18), transparent 62%);
}

body:not(.official-open) .portal-login-screen::after {
  inset: 0;
  opacity: .62;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: linear-gradient(to bottom, black, transparent 88%);
}

body:not(.official-open) .portal-login-divider { display: none; }

body:not(.official-open) .portal-login-left {
  left: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 760px;
}

body:not(.official-open) .portal-login-brand {
  width: max-content;
  gap: 16px;
  padding: 12px 16px;
  border: 1px solid rgba(148, 190, 255, .18);
  border-radius: 22px;
  background: rgba(255,255,255,.055);
  backdrop-filter: blur(14px);
}

body:not(.official-open) .phone-logo {
  left: 0;
  width: 34px;
  height: 52px;
  border-width: 4px;
  border-color: #5aa8ff;
  box-shadow: 0 14px 32px rgba(49, 130, 255, .28);
}

body:not(.official-open) .portal-login-brand strong {
  font-size: 28px;
  letter-spacing: -.5px;
}

body:not(.official-open) .portal-login-brand small {
  letter-spacing: .32em;
  font-size: 10px;
}

body:not(.official-open) .portal-login-copy {
  margin-top: clamp(44px, 8vh, 86px);
}

body:not(.official-open) .portal-login-copy h2 {
  max-width: 650px;
  margin: 0;
  font-size: clamp(46px, 4.8vw, 70px);
  line-height: 1.02;
  letter-spacing: -2.2px;
}

body:not(.official-open) .portal-login-copy h2 strong {
  color: #68b8ff;
  text-shadow: 0 0 30px rgba(56, 189, 248, .25);
}

body:not(.official-open) .portal-login-copy p {
  max-width: 610px;
  margin: 24px 0 0;
  color: rgba(220, 234, 255, .82);
  font-size: 19px;
}

body:not(.official-open) .login-feature-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 700px;
  gap: 10px 18px;
  margin-top: 30px;
}

body:not(.official-open) .login-feature-list article,
body:not(.official-open) .login-safe-card {
  grid-template-columns: 34px 1fr;
  gap: 12px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
}

body:not(.official-open) .feature-icon {
  width: 34px;
  height: 34px;
  border-width: 1px;
  border-color: rgba(104, 184, 255, .24);
  border-radius: 12px;
  background: rgba(255,255,255,.055);
  opacity: .95;
}

body:not(.official-open) .feature-icon::before,
body:not(.official-open) .feature-icon::after {
  transform: scale(.66);
}

body:not(.official-open) .login-feature-list strong,
body:not(.official-open) .login-safe-card strong {
  font-size: 15px;
}

body:not(.official-open) .login-feature-list p,
body:not(.official-open) .login-safe-card p {
  font-size: 12px;
  line-height: 1.4;
  color: rgba(203, 213, 225, .72);
}

body:not(.official-open) .login-safe-card {
  max-width: 700px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(148, 190, 255, .14);
}

body:not(.official-open) .login-trust-seals {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 700px;
  margin-top: 22px;
}

body:not(.official-open) .login-trust-seals span {
  position: relative;
  min-height: 0;
  padding: 8px 12px 8px 30px;
  border: 1px solid rgba(148, 190, 255, .16);
  border-radius: 999px;
  color: #dbeafe;
  background: rgba(255,255,255,.05);
  font-size: 11px;
  font-weight: 800;
}

body:not(.official-open) .login-trust-seals span::after {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #1ecb8c;
  transform: translateY(-50%);
  box-shadow: 0 0 12px rgba(30, 203, 140, .44);
}

body:not(.official-open) .login-trust-seals strong {
  display: inline;
  margin: 0 5px 0 0;
  color: #fff;
  font-size: 11px;
  font-weight: 950;
}

body:not(.official-open) .phone-visual,
body:not(.official-open) .mascot-wrap {
  opacity: .12;
}

body:not(.official-open) .portal-login-card {
  align-self: center;
  width: min(100%, 500px);
  min-height: auto;
  margin: 0;
  padding: 28px;
  border: 1px solid rgba(180, 210, 255, .20);
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.04)),
    rgba(8, 20, 42, .82);
  backdrop-filter: blur(18px);
  box-shadow: 0 28px 70px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.08);
}

body:not(.official-open) .portal-login-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  border-radius: 30px 30px 0 0;
  background: linear-gradient(90deg, #3388ff, #57d7ff, #1ecb8c);
}

body:not(.official-open) .login-lock {
  width: 60px;
  height: 60px;
  margin-bottom: 14px;
  border-radius: 20px;
  background: radial-gradient(circle at 50% 40%, rgba(104, 184, 255, .28), rgba(21, 64, 140, .16) 56%, rgba(7, 18, 39, .50));
}

body:not(.official-open) .activation-top-button {
  margin: 0 auto 14px;
  border-color: rgba(104, 184, 255, .28);
  background: rgba(255,255,255,.045);
  box-shadow: none;
  font-size: 12px;
}

body:not(.official-open) .portal-login-card h2 {
  font-size: 28px;
}

body:not(.official-open) .portal-login-card > p {
  margin: 8px 0 22px;
  font-size: 14px;
}

body:not(.official-open) .login-field {
  margin-bottom: 14px;
  font-size: 13px;
}

body:not(.official-open) .login-field > div {
  min-height: 52px;
  margin-top: 8px;
  border: 1px solid rgba(148, 190, 255, .18);
  border-radius: 14px;
  background: rgba(5, 15, 33, .68);
  transition: border-color .18s ease, box-shadow .18s ease;
}

body:not(.official-open) .login-field > div:focus-within {
  border-color: rgba(104, 184, 255, .74);
  box-shadow: 0 0 0 4px rgba(51, 136, 255, .13);
}

body:not(.official-open) .login-field input[type="text"],
body:not(.official-open) .login-field input[type="password"] {
  height: 50px;
}

body:not(.official-open) .login-options {
  margin: 2px 0 18px;
  font-size: 13px;
}

body:not(.official-open) .login-feedback {
  margin: 0 0 12px;
  font-size: 13px;
}

body:not(.official-open) .login-primary {
  min-height: 54px;
  border-radius: 15px;
  background: linear-gradient(135deg, #3388ff, #0d61df);
  box-shadow: 0 14px 34px rgba(37, 99, 235, .30);
  font-size: 16px;
  font-weight: 900;
}

body:not(.official-open) .login-separator {
  margin: 18px 0;
  gap: 14px;
  color: rgba(219, 234, 254, .72);
}

body:not(.official-open) .login-code {
  min-height: 50px;
  border-radius: 14px;
  border-color: rgba(148, 190, 255, .20);
  background: rgba(255,255,255,.055);
  box-shadow: none;
  font-size: 15px;
  font-weight: 850;
}

body:not(.official-open) .login-cta-panel {
  margin-top: 14px;
  padding: 13px;
  border: 1px solid rgba(148, 190, 255, .14);
  border-radius: 18px;
  background: rgba(255,255,255,.035);
}

body:not(.official-open) .login-cta-panel p {
  margin: 0 0 10px;
  color: #aebfda;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

body:not(.official-open) .login-cta-panel > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

body:not(.official-open) .demo-tour-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  margin: 0;
  border-radius: 13px;
  text-align: center;
  text-decoration: none;
  font-size: 12px;
  font-weight: 900;
}

body:not(.official-open) .demo-tour-link-primary {
  color: #fff;
  background: linear-gradient(135deg, #2f82ff, #0d61df);
  box-shadow: 0 10px 24px rgba(37, 99, 235, .22);
}

body:not(.official-open) .demo-tour-link-secondary {
  color: #dbeafe;
  border: 1px solid rgba(104, 184, 255, .28);
  background: rgba(10, 36, 76, .82);
}

body:not(.official-open) .login-security-note {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 12px;
  padding: 10px 11px;
  border: 0;
  border-radius: 14px;
  color: #a8dcc9;
  background: rgba(30,203,140,.055);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.4;
}

body:not(.official-open) .login-security-note span {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, #1ecb8c, #57d7ff);
}

body:not(.official-open) .portal-login-card footer {
  margin-top: 18px;
  font-size: 11px;
}

@media (max-width: 1180px) {
  body:not(.official-open) .portal-login-screen {
    grid-template-columns: 1fr;
  }
  body:not(.official-open) .portal-login-left,
  body:not(.official-open) .portal-login-card {
    width: min(100%, 720px);
    margin-inline: auto;
  }
}

@media (max-width: 640px) {
  body:not(.official-open) .portal-login-screen {
    padding: 22px 14px 34px;
  }
  body:not(.official-open) .portal-login-copy h2 {
    font-size: 40px;
  }
  body:not(.official-open) .login-feature-list,
  body:not(.official-open) .login-trust-seals,
  body:not(.official-open) .login-cta-panel > div {
    grid-template-columns: 1fr;
  }
  body:not(.official-open) .portal-login-card {
    padding: 26px 18px;
    border-radius: 24px;
  }
}

/* High tech premium login - design140 */
body:not(.official-open) .portal-login-screen {
  grid-template-columns: minmax(500px, 1fr) minmax(380px, 440px);
  gap: clamp(56px, 8vw, 128px);
  min-height: 100vh;
  padding: 108px clamp(42px, 6vw, 92px) 52px;
  background:
    radial-gradient(circle at 18% 18%, rgba(35, 111, 255, .22), transparent 32%),
    radial-gradient(circle at 68% 18%, rgba(56, 189, 248, .08), transparent 30%),
    linear-gradient(135deg, #020611 0%, #071326 54%, #02040b 100%);
}

body:not(.official-open) .portal-login-screen::before {
  right: -18vw;
  top: -28vw;
  width: 70vw;
  height: 70vw;
  border: 1px solid rgba(95, 163, 255, .10);
  background: radial-gradient(circle, rgba(46, 116, 255, .14), transparent 58%);
}

body:not(.official-open) .portal-login-screen::after {
  opacity: .18;
  background-size: 84px 84px;
}

body:not(.official-open) .login-top-actions {
  left: 50%;
  right: auto;
  top: 26px;
  transform: translateX(-50%);
  gap: 8px;
  padding: 7px;
  border-color: rgba(115, 170, 255, .14);
  background: rgba(3, 10, 23, .72);
  box-shadow: 0 18px 42px rgba(0,0,0,.22);
}

body:not(.official-open) .login-top-actions > span {
  display: none;
}

body:not(.official-open) .login-top-link {
  min-width: 148px;
  min-height: 42px;
  padding: 0 18px;
  font-size: 13px;
}

body:not(.official-open) .login-top-link-tour {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(104, 184, 255, .20);
  box-shadow: none;
}

body:not(.official-open) .login-top-link-buy {
  color: #061225;
  border: 0;
  background: linear-gradient(135deg, #f8fafc, #b9dcff);
  box-shadow: 0 14px 34px rgba(104, 184, 255, .18);
}

body:not(.official-open) .mascot-wrap,
body:not(.official-open) .phone-visual,
body:not(.official-open) .login-feature-list,
body:not(.official-open) .login-safe-card,
body:not(.official-open) .login-trust-seals,
body:not(.official-open) .login-qualification-ticker {
  display: none;
}

body:not(.official-open) .portal-login-left {
  max-width: 720px;
  justify-content: center;
}

body:not(.official-open) .portal-login-brand {
  gap: 14px;
}

body:not(.official-open) .phone-logo {
  width: 30px;
  height: 46px;
  border-width: 3px;
  border-color: rgba(125, 190, 255, .72);
  box-shadow: none;
}

body:not(.official-open) .portal-login-brand strong {
  font-size: 24px;
}

body:not(.official-open) .portal-login-brand small {
  margin-top: 5px;
  color: rgba(203,213,225,.56);
  letter-spacing: .25em;
}

body:not(.official-open) .portal-login-copy {
  margin-top: clamp(54px, 8vh, 92px);
}

body:not(.official-open) .portal-login-copy h2 {
  max-width: 660px;
  font-size: clamp(52px, 5.2vw, 76px);
  line-height: .96;
  letter-spacing: -3px;
}

body:not(.official-open) .portal-login-copy h2 strong {
  color: #9ed4ff;
  text-shadow: none;
}

body:not(.official-open) .portal-login-copy p {
  max-width: 560px;
  margin-top: 24px;
  color: rgba(220, 234, 255, .68);
  font-size: 18px;
  line-height: 1.7;
}

body:not(.official-open) .login-product-showcase {
  max-width: 580px;
  margin-top: 38px;
}

body:not(.official-open) .showcase-panel {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body:not(.official-open) .showcase-panel::before {
  display: none;
}

body:not(.official-open) .showcase-header {
  display: none;
}

body:not(.official-open) .showcase-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  margin-top: 0;
  border: 1px solid rgba(115, 170, 255, .12);
  border-radius: 24px;
  background: rgba(255,255,255,.05);
}

body:not(.official-open) .showcase-grid article {
  padding: 22px 20px;
  border: 0;
  border-radius: 0;
  background: rgba(3, 10, 23, .38);
}

body:not(.official-open) .showcase-grid strong {
  color: #f8fafc;
  font-size: 34px;
  font-weight: 950;
}

body:not(.official-open) .showcase-line {
  grid-template-columns: 1.3fr .7fr 1.8fr .9fr;
  opacity: .56;
}

body:not(.official-open) .portal-login-card {
  width: min(100%, 440px);
  padding: 34px;
  border-radius: 28px;
  border: 1px solid rgba(160, 202, 255, .16);
  background:
    linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.028)),
    rgba(3, 10, 23, .84);
  box-shadow: 0 30px 90px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.07);
}

body:not(.official-open) .portal-login-card::before {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(158,212,255,.85), transparent);
}

body:not(.official-open) .activation-top-button {
  justify-content: flex-start;
  width: max-content;
  min-height: 34px;
  margin-bottom: 22px;
  padding: 7px 12px;
  border-radius: 999px;
  border-color: rgba(115, 170, 255, .16);
  color: rgba(219,234,254,.78);
  background: rgba(255,255,255,.035);
}

body:not(.official-open) .activation-top-button span {
  transform: scale(.82);
}

body:not(.official-open) .portal-login-card h2 {
  font-size: 31px;
  line-height: 1.1;
}

body:not(.official-open) .portal-login-card > p {
  margin: 8px 0 26px;
  color: rgba(203,213,225,.58);
}

body:not(.official-open) .login-field > div {
  min-height: 54px;
  border-color: rgba(115, 170, 255, .12);
  border-radius: 16px;
  background: rgba(255,255,255,.04);
}

body:not(.official-open) .login-field > div:focus-within {
  border-color: rgba(158, 212, 255, .52);
  box-shadow: 0 0 0 4px rgba(46, 116, 255, .10);
}

body:not(.official-open) .login-primary {
  color: #061225;
  background: linear-gradient(135deg, #f8fafc, #c8e4ff);
  box-shadow: 0 16px 40px rgba(158, 212, 255, .16);
}

body:not(.official-open) .login-separator {
  margin: 20px 0;
  color: rgba(203,213,225,.42);
}

body:not(.official-open) .login-code {
  border-color: rgba(115, 170, 255, .13);
  background: rgba(255,255,255,.028);
}

body:not(.official-open) .login-security-note {
  margin-top: 15px;
  color: rgba(191, 243, 220, .66);
}

body:not(.official-open) .portal-login-card footer {
  margin-top: 20px;
  color: rgba(148,163,184,.48);
}

@media (max-width: 1180px) {
  body:not(.official-open) .portal-login-screen {
    grid-template-columns: 1fr;
    padding-top: 116px;
  }
}

@media (max-width: 640px) {
  body:not(.official-open) .portal-login-screen {
    padding: 104px 16px 34px;
  }
  body:not(.official-open) .login-top-actions {
    left: 14px;
    right: 14px;
    transform: none;
  }
  body:not(.official-open) .login-top-link {
    min-width: 0;
    flex: 1;
  }
  body:not(.official-open) .showcase-grid {
    grid-template-columns: 1fr;
  }
}

/* Redesign sofisticado do login - versao clean */
body:not(.official-open) .portal-login-screen {
  grid-template-columns: minmax(520px, 1fr) minmax(380px, 460px);
  gap: clamp(56px, 7vw, 118px);
  padding: clamp(92px, 9vw, 118px) clamp(42px, 6vw, 86px) 98px;
  background:
    radial-gradient(circle at 18% 16%, rgba(46, 116, 255, .22), transparent 32%),
    radial-gradient(circle at 76% 74%, rgba(31, 203, 140, .10), transparent 34%),
    linear-gradient(135deg, #020713 0%, #071326 52%, #020711 100%);
}

body:not(.official-open) .login-top-actions {
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border: 1px solid rgba(145, 190, 255, .16);
  border-radius: 999px;
  background: rgba(4, 14, 30, .68);
  backdrop-filter: blur(18px);
  box-shadow: 0 18px 46px rgba(0,0,0,.26);
}

body:not(.official-open) .login-top-actions > span {
  padding: 0 8px 0 12px;
  color: rgba(203, 213, 225, .68);
  font-size: 12px;
  font-weight: 850;
}

body:not(.official-open) .login-top-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 17px;
  border-radius: 999px;
  color: #dbeafe;
  text-decoration: none;
  font-size: 13px;
  font-weight: 950;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

body:not(.official-open) .login-top-link:hover {
  transform: translateY(-1px);
}

body:not(.official-open) .login-top-link-tour {
  background: linear-gradient(135deg, rgba(49, 130, 255, .92), rgba(28, 100, 242, .92));
  color: #fff;
  box-shadow: 0 12px 26px rgba(37, 99, 235, .26);
}

body:not(.official-open) .login-top-link-buy {
  border: 1px solid rgba(104, 184, 255, .26);
  background: rgba(255,255,255,.04);
}

body:not(.official-open) .portal-login-screen::after {
  opacity: .28;
  background-size: 72px 72px;
}

body:not(.official-open) .mascot-wrap,
body:not(.official-open) .phone-visual,
body:not(.official-open) .login-feature-list,
body:not(.official-open) .login-safe-card {
  display: none;
}

body:not(.official-open) .portal-login-brand {
  padding: 0;
  border: 0;
  background: transparent;
  backdrop-filter: none;
}

body:not(.official-open) .portal-login-copy {
  margin-top: clamp(72px, 10vh, 120px);
}

body:not(.official-open) .portal-login-copy h2 {
  max-width: 690px;
  font-size: clamp(48px, 5.4vw, 78px);
  line-height: .98;
  letter-spacing: -2.8px;
}

body:not(.official-open) .portal-login-copy p {
  max-width: 570px;
  color: rgba(218, 230, 250, .72);
  font-size: 18px;
  line-height: 1.65;
}

body:not(.official-open) .login-product-showcase {
  max-width: 640px;
  margin-top: 34px;
}

body:not(.official-open) .showcase-panel {
  position: relative;
  overflow: hidden;
  padding: 22px;
  border: 1px solid rgba(145, 190, 255, .18);
  border-radius: 28px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.028)),
    rgba(5, 17, 38, .52);
  box-shadow: 0 28px 72px rgba(0,0,0,.26);
}

body:not(.official-open) .showcase-panel::before {
  content: "";
  position: absolute;
  inset: -80px -120px auto auto;
  width: 260px;
  height: 260px;
  border-radius: 999px;
  background: rgba(72, 164, 255, .18);
  filter: blur(34px);
}

body:not(.official-open) .showcase-header {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #dbeafe;
}

body:not(.official-open) .showcase-header span {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #1ecb8c;
  box-shadow: 0 0 18px rgba(30,203,140,.6);
}

body:not(.official-open) .showcase-header strong {
  font-size: 14px;
  letter-spacing: .02em;
}

body:not(.official-open) .showcase-header small {
  margin-left: auto;
  padding: 6px 10px;
  border-radius: 999px;
  color: #9dccff;
  background: rgba(82, 150, 255, .12);
  font-weight: 900;
}

body:not(.official-open) .showcase-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 22px;
}

body:not(.official-open) .showcase-grid article {
  padding: 16px;
  border: 1px solid rgba(145, 190, 255, .12);
  border-radius: 18px;
  background: rgba(255,255,255,.045);
}

body:not(.official-open) .showcase-grid small,
body:not(.official-open) .showcase-grid span {
  display: block;
  color: rgba(203,213,225,.62);
  font-size: 11px;
  font-weight: 800;
}

body:not(.official-open) .showcase-grid strong {
  display: block;
  margin: 5px 0 2px;
  color: #fff;
  font-size: 30px;
  line-height: 1;
}

body:not(.official-open) .showcase-line {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.8fr .8fr;
  gap: 8px;
  margin-top: 18px;
}

body:not(.official-open) .showcase-line i {
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, #2f82ff, #57d7ff);
  opacity: .75;
}

body:not(.official-open) .login-trust-seals {
  margin-top: 18px;
}

body:not(.official-open) .login-trust-seals span {
  padding: 7px 11px 7px 27px;
  border-color: rgba(145, 190, 255, .12);
  background: rgba(255,255,255,.035);
  color: rgba(219,234,254,.76);
}

body:not(.official-open) .portal-login-card {
  width: min(100%, 460px);
  padding: 30px;
  border-radius: 26px;
  border-color: rgba(170, 205, 255, .18);
  background:
    linear-gradient(180deg, rgba(255,255,255,.095), rgba(255,255,255,.035)),
    rgba(5, 14, 30, .88);
  box-shadow: 0 28px 80px rgba(0,0,0,.40);
}

body:not(.official-open) .login-lock {
  display: none;
}

body:not(.official-open) .activation-top-button {
  width: 100%;
  justify-content: center;
  min-height: 38px;
  margin: 0 0 18px;
  border-radius: 14px;
  color: #bcd8ff;
  background: rgba(49, 130, 255, .08);
}

body:not(.official-open) .portal-login-card h2 {
  text-align: left;
  font-size: 30px;
  letter-spacing: -.8px;
}

body:not(.official-open) .portal-login-card > p {
  text-align: left;
  margin-bottom: 24px;
  color: rgba(203,213,225,.64);
}

body:not(.official-open) .login-field > div {
  border-color: rgba(145, 190, 255, .14);
  background: rgba(255,255,255,.045);
}

body:not(.official-open) .login-primary {
  background: #f8fafc;
  color: #061225;
  box-shadow: 0 18px 42px rgba(248,250,252,.16);
}

body:not(.official-open) .login-primary span {
  color: #2563eb;
}

body:not(.official-open) .login-code {
  color: #dbeafe;
  background: rgba(255,255,255,.035);
}

body:not(.official-open) .login-cta-panel {
  padding: 0;
  border: 0;
  background: transparent;
}

body:not(.official-open) .login-cta-panel[hidden] {
  display: none;
}

body:not(.official-open) .login-cta-panel p {
  text-align: left;
  color: rgba(203,213,225,.58);
}

body:not(.official-open) .demo-tour-link-primary {
  background: rgba(49, 130, 255, .16);
  border: 1px solid rgba(104, 184, 255, .18);
  box-shadow: none;
}

body:not(.official-open) .demo-tour-link-secondary {
  background: transparent;
}

body:not(.official-open) .login-security-note {
  background: transparent;
  padding: 0;
  color: rgba(191, 243, 220, .72);
}

body:not(.official-open) .login-qualification-ticker {
  position: absolute;
  left: clamp(16px, 4vw, 56px);
  right: clamp(16px, 4vw, 56px);
  bottom: 18px;
  z-index: 7;
  overflow: hidden;
  border-radius: 26px;
  mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
}

body:not(.official-open) .login-qualification-ticker > div {
  display: flex;
  width: max-content;
  gap: 14px;
  padding: 8px 0;
  animation: loginTicker 38s linear infinite;
}

body:not(.official-open) .login-qualification-ticker article {
  position: relative;
  width: 292px;
  min-height: 82px;
  padding: 16px 18px 15px 48px;
  border: 1px solid rgba(104, 184, 255, .22);
  border-radius: 22px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.035)),
    rgba(5, 17, 38, .58);
  box-shadow: 0 18px 40px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.10), 0 0 22px rgba(49,130,255,.08);
  backdrop-filter: blur(16px);
  white-space: normal;
}

body:not(.official-open) .login-qualification-ticker article::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 20px;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, #1ecb8c, #57d7ff);
  box-shadow: 0 0 18px rgba(30, 203, 140, .48);
}

body:not(.official-open) .login-qualification-ticker article::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
  opacity: .32;
  pointer-events: none;
}

body:not(.official-open) .login-qualification-ticker strong {
  display: block;
  color: #f8fafc;
  font-size: 13px;
  font-weight: 950;
  letter-spacing: .01em;
}

body:not(.official-open) .login-qualification-ticker span {
  display: block;
  margin-top: 4px;
  color: rgba(203, 213, 225, .68);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.35;
}

@keyframes loginTicker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (max-width: 1180px) {
  body:not(.official-open) .portal-login-screen {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  body:not(.official-open) .portal-login-screen {
    padding: 108px 16px 86px;
  }
  body:not(.official-open) .login-top-actions {
    left: 14px;
    right: 14px;
    transform: none;
    justify-content: center;
    border-radius: 22px;
    flex-wrap: wrap;
  }
  body:not(.official-open) .login-top-actions > span {
    width: 100%;
    text-align: center;
    padding: 0 0 2px;
  }
  body:not(.official-open) .showcase-grid,
  body:not(.official-open) .login-cta-panel > div {
    grid-template-columns: 1fr;
  }
}

/* Overrides finais design140 */
body:not(.official-open) .login-qualification-ticker,
body:not(.official-open) .login-trust-seals,
body:not(.official-open) .login-feature-list,
body:not(.official-open) .login-safe-card,
body:not(.official-open) .phone-visual,
body:not(.official-open) .mascot-wrap {
  display: none !important;
}

body:not(.official-open) .login-top-actions {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
}

body:not(.official-open) .showcase-panel {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body:not(.official-open) .showcase-header {
  display: none !important;
}

body:not(.official-open) .showcase-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  overflow: hidden;
  border: 1px solid rgba(115, 170, 255, .12);
  border-radius: 24px;
  background: rgba(255,255,255,.05);
}

body:not(.official-open) .showcase-grid article {
  border: 0 !important;
  border-radius: 0 !important;
  background: rgba(3, 10, 23, .38) !important;
}

@media (max-width: 640px) {
  body:not(.official-open) .login-top-actions {
    left: 14px !important;
    right: 14px !important;
    transform: none !important;
  }

  body:not(.official-open) .showcase-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Aurora SaaS premium - design141 */
body:not(.official-open) {
  --spotlight-x: 50%;
  --spotlight-y: 42%;
  background: #030712;
}

body:not(.official-open) .portal-login-screen {
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 120%, rgba(13, 20, 38, .95), transparent 38%),
    linear-gradient(135deg, #02050d 0%, #061225 58%, #02040a 100%) !important;
}

body:not(.official-open) .portal-login-screen::before,
body:not(.official-open) .portal-login-screen::after {
  display: none !important;
}

/* Sidebar hover: manter todas as abas visiveis - design151 */
body.official-open.sidebar-collapsed .inventory-sidebar nav button,
body.official-open.sidebar-collapsed .inventory-sidebar:hover nav button,
body.official-open.sidebar-collapsed.sidebar-hovering .inventory-sidebar nav button,
body.official-open.sidebar-collapsed.sidebar-pinned .inventory-sidebar nav button {
  display: grid !important;
}

body.official-open.sidebar-collapsed .inventory-sidebar:hover nav button:not(.active),
body.official-open.sidebar-collapsed.sidebar-hovering .inventory-sidebar nav button:not(.active),
body.official-open.sidebar-collapsed.sidebar-pinned .inventory-sidebar nav button:not(.active) {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Icones Lucide - camada final anti-conflito */
body .login-lock {
  display: grid !important;
  place-items: center !important;
}

body .login-lock::before,
body .login-lock::after,
body .mail-icon::before,
body .mail-icon::after,
body .mini-lock-icon::before,
body .mini-lock-icon::after,
body .eye-icon::before,
body .eye-icon::after,
body .small-shield-icon::before,
body .topbar-cart-icon::before,
body .topbar-cart-icon::after,
body .topbar-order-icon::before,
body .topbar-order-icon::after,
body .topbar-calendar-icon::before,
body .topbar-calendar-icon::after,
body .notification-bell::before,
body .notification-bell::after {
  display: none !important;
}

body .login-lock .lucide {
  width: 34px !important;
  height: 34px !important;
  color: #fff !important;
}

body .mail-icon,
body .mini-lock-icon,
body .eye-icon,
body .topbar-cart-icon,
body .topbar-order-icon,
body .topbar-calendar-icon,
body .notification-bell {
  border: 0 !important;
  border-radius: 0 !important;
  transform: none !important;
}

body .portal-card .lucide,
body .portal-card [data-lucide] {
  width: 42px !important;
  height: 42px !important;
}

body .inventory-sidebar nav .lucide,
body .sidebar-toggle .lucide,
body .inventory-topbar-search .lucide,
body .toolbar .search .lucide {
  width: 20px !important;
  height: 20px !important;
}

/* Sidebar interna dock + hover expand - design149 */
body.official-open.sidebar-collapsed .board-shell {
  grid-template-columns: 72px minmax(680px, 1fr) 420px !important;
}

body.official-open.sidebar-collapsed:not(.checkout-visible) .board-shell {
  grid-template-columns: 72px minmax(680px, 1fr) !important;
}

body.official-open.sidebar-collapsed.sidebar-pinned .board-shell,
body.official-open.sidebar-collapsed:has(.inventory-sidebar:hover) .board-shell {
  grid-template-columns: 293px minmax(680px, 1fr) 420px !important;
}

body.official-open.sidebar-collapsed.sidebar-pinned:not(.checkout-visible) .board-shell,
body.official-open.sidebar-collapsed:not(.checkout-visible):has(.inventory-sidebar:hover) .board-shell {
  grid-template-columns: 293px minmax(680px, 1fr) !important;
}

body.official-open .inventory-sidebar {
  width: 293px;
  transition: width .22s ease, padding .22s ease, box-shadow .22s ease;
}

body.official-open.sidebar-collapsed .inventory-sidebar {
  z-index: 35;
  width: 72px !important;
  padding: 28px 8px 18px !important;
  overflow: hidden;
}

body.official-open.sidebar-collapsed.sidebar-pinned .inventory-sidebar,
body.official-open.sidebar-collapsed .inventory-sidebar:hover {
  width: 293px !important;
  padding: 28px 12px 18px !important;
  overflow: visible;
  box-shadow: 28px 0 70px rgba(0, 0, 0, .28);
}

body.official-open.sidebar-collapsed .inventory-brand {
  justify-content: center !important;
  margin: 0 0 34px !important;
}

body.official-open.sidebar-collapsed.sidebar-pinned .inventory-brand,
body.official-open.sidebar-collapsed .inventory-sidebar:hover .inventory-brand {
  justify-content: flex-start !important;
  margin: 0 18px 52px !important;
}

body.official-open.sidebar-collapsed .inventory-brand div,
body.official-open.sidebar-collapsed .side-label,
body.official-open.sidebar-collapsed .stock-summary,
body.official-open.sidebar-collapsed .technician-profile-copy,
body.official-open.sidebar-collapsed .technician-profile-chevron {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  display: block !important;
}

body.official-open.sidebar-collapsed.sidebar-pinned .inventory-brand div,
body.official-open.sidebar-collapsed .inventory-sidebar:hover .inventory-brand div,
body.official-open.sidebar-collapsed.sidebar-pinned .side-label,
body.official-open.sidebar-collapsed .inventory-sidebar:hover .side-label,
body.official-open.sidebar-collapsed.sidebar-pinned .stock-summary,
body.official-open.sidebar-collapsed .inventory-sidebar:hover .stock-summary,
body.official-open.sidebar-collapsed.sidebar-pinned .technician-profile-copy,
body.official-open.sidebar-collapsed .inventory-sidebar:hover .technician-profile-copy,
body.official-open.sidebar-collapsed.sidebar-pinned .technician-profile-chevron,
body.official-open.sidebar-collapsed .inventory-sidebar:hover .technician-profile-chevron {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

body.official-open.sidebar-collapsed .inventory-sidebar nav {
  gap: 8px;
}

body.official-open.sidebar-collapsed .inventory-sidebar nav button {
  grid-template-columns: 56px 1fr auto !important;
  width: 56px !important;
  min-height: 50px !important;
  overflow: hidden !important;
  padding: 0 !important;
  border-radius: 10px !important;
  color: transparent !important;
  white-space: nowrap !important;
  transition: width .22s ease, padding .22s ease, color .15s ease, background .18s ease;
}

body.official-open.sidebar-collapsed.sidebar-pinned .inventory-sidebar nav button,
body.official-open.sidebar-collapsed .inventory-sidebar:hover nav button {
  width: 100% !important;
  grid-template-columns: 34px 1fr auto !important;
  padding: 0 14px !important;
  color: #cbd5e1 !important;
}

body.official-open.sidebar-collapsed .inventory-sidebar nav button.active,
body.official-open.sidebar-collapsed .inventory-sidebar nav button:hover {
  color: transparent !important;
}

body.official-open.sidebar-collapsed.sidebar-pinned .inventory-sidebar nav button.active,
body.official-open.sidebar-collapsed .inventory-sidebar:hover nav button.active,
body.official-open.sidebar-collapsed.sidebar-pinned .inventory-sidebar nav button:hover,
body.official-open.sidebar-collapsed .inventory-sidebar:hover nav button:hover {
  color: #fff !important;
}

body.official-open.sidebar-collapsed .inventory-sidebar nav button > span:first-child,
body.official-open.sidebar-collapsed .inventory-sidebar nav button > svg:first-child {
  justify-self: center !important;
  width: 56px !important;
  color: #b8c4d8 !important;
}

body.official-open.sidebar-collapsed.sidebar-pinned .inventory-sidebar nav button > span:first-child,
body.official-open.sidebar-collapsed .inventory-sidebar:hover nav button > span:first-child,
body.official-open.sidebar-collapsed.sidebar-pinned .inventory-sidebar nav button > svg:first-child,
body.official-open.sidebar-collapsed .inventory-sidebar:hover nav button > svg:first-child {
  justify-self: start !important;
  width: 20px !important;
}

body.official-open.sidebar-collapsed .inventory-sidebar nav button small {
  display: none !important;
}

body.official-open.sidebar-collapsed.sidebar-pinned .inventory-sidebar nav button small,
body.official-open.sidebar-collapsed .inventory-sidebar:hover nav button small {
  display: inline-flex !important;
}

body.official-open.sidebar-collapsed .technician-profile-trigger {
  grid-template-columns: 1fr !important;
  justify-items: center !important;
  padding-inline: 0 !important;
}

body.official-open.sidebar-collapsed.sidebar-pinned .technician-profile-trigger,
body.official-open.sidebar-collapsed .inventory-sidebar:hover .technician-profile-trigger {
  grid-template-columns: 36px 1fr 18px !important;
  justify-items: stretch !important;
  padding: 8px 7px !important;
}

body.official-open.sidebar-pinned .sidebar-toggle {
  border-color: rgba(96, 165, 250, .48);
  color: #fff;
  background: rgba(31, 107, 255, .22);
}

/* Sidebar overlay limpa e recolhivel - design150 */
body.official-open .stock-summary {
  display: none !important;
}

body.official-open.sidebar-collapsed .board-shell {
  grid-template-columns: 0 minmax(680px, 1fr) 420px !important;
}

body.official-open.sidebar-collapsed:not(.checkout-visible) .board-shell {
  grid-template-columns: 0 minmax(680px, 1fr) !important;
}

body.official-open.sidebar-collapsed.sidebar-pinned .board-shell,
body.official-open.sidebar-collapsed:has(.inventory-sidebar:hover) .board-shell,
body.official-open.sidebar-collapsed.sidebar-hovering .board-shell {
  grid-template-columns: 0 minmax(680px, 1fr) 420px !important;
}

body.official-open.sidebar-collapsed.sidebar-pinned:not(.checkout-visible) .board-shell,
body.official-open.sidebar-collapsed:not(.checkout-visible):has(.inventory-sidebar:hover) .board-shell,
body.official-open.sidebar-collapsed.sidebar-hovering:not(.checkout-visible) .board-shell {
  grid-template-columns: 0 minmax(680px, 1fr) !important;
}

body.official-open.sidebar-collapsed .inventory-sidebar {
  position: fixed !important;
  inset: 0 auto 0 0 !important;
  width: 18px !important;
  max-width: 18px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-right: 1px solid rgba(96, 165, 250, .22) !important;
  background:
    linear-gradient(180deg, rgba(7, 20, 33, .98), rgba(6, 17, 29, .96)),
    rgba(7, 20, 33, .98) !important;
  box-shadow: 10px 0 28px rgba(0, 0, 0, .20) !important;
  cursor: pointer;
}

body.official-open.sidebar-collapsed .inventory-sidebar::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 5px;
  width: 4px;
  height: 72px;
  border-radius: 999px;
  background: linear-gradient(#38bdf8, #1f6bff);
  box-shadow: 0 0 18px rgba(56, 189, 248, .45);
  transform: translateY(-50%);
}

body.official-open.sidebar-collapsed.sidebar-pinned .inventory-sidebar,
body.official-open.sidebar-collapsed .inventory-sidebar:hover,
body.official-open.sidebar-collapsed.sidebar-hovering .inventory-sidebar {
  width: 293px !important;
  max-width: 293px !important;
  padding: 28px 12px 18px !important;
  overflow: visible !important;
  cursor: default;
  box-shadow: 32px 0 82px rgba(0, 0, 0, .38) !important;
}

body.official-open.sidebar-collapsed.sidebar-pinned .inventory-sidebar::after,
body.official-open.sidebar-collapsed .inventory-sidebar:hover::after,
body.official-open.sidebar-collapsed.sidebar-hovering .inventory-sidebar::after {
  display: none;
}

body.official-open.sidebar-collapsed .inventory-sidebar > * {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.official-open.sidebar-collapsed.sidebar-pinned .inventory-sidebar > *,
body.official-open.sidebar-collapsed .inventory-sidebar:hover > *,
body.official-open.sidebar-collapsed.sidebar-hovering .inventory-sidebar > * {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

body.official-open.sidebar-collapsed .inventory-sidebar nav button {
  color: #cbd5e1 !important;
  width: 100% !important;
  grid-template-columns: 34px 1fr auto !important;
  padding: 0 14px !important;
}

body.official-open.sidebar-collapsed .inventory-sidebar nav button.active,
body.official-open.sidebar-collapsed .inventory-sidebar nav button:hover {
  color: #fff !important;
}

body.official-open.sidebar-collapsed .inventory-sidebar nav button small {
  display: inline-flex !important;
}

body.official-open.sidebar-collapsed .inventory-topbar,
body.official-open.sidebar-collapsed .tabs,
body.official-open.sidebar-collapsed .group-tabs,
body.official-open.sidebar-collapsed .toolbar,
body.official-open.sidebar-collapsed .board {
  margin-left: 18px;
}

body.official-open.sidebar-collapsed.sidebar-pinned .inventory-topbar,
body.official-open.sidebar-collapsed.sidebar-pinned .tabs,
body.official-open.sidebar-collapsed.sidebar-pinned .group-tabs,
body.official-open.sidebar-collapsed.sidebar-pinned .toolbar,
body.official-open.sidebar-collapsed.sidebar-pinned .board {
  margin-left: 0;
}

/* Icones padronizados com Lucide - design147 final */
[data-lucide],
.lucide {
  width: 1.15em;
  height: 1.15em;
  flex: 0 0 auto;
  stroke: currentColor;
  vertical-align: -0.18em;
}

.login-lock {
  display: grid !important;
  place-items: center !important;
}

.login-lock::before,
.login-lock::after,
.mail-icon::before,
.mail-icon::after,
.mini-lock-icon::before,
.mini-lock-icon::after,
.eye-icon::before,
.eye-icon::after,
.small-shield-icon::before,
.topbar-cart-icon::before,
.topbar-cart-icon::after,
.topbar-order-icon::before,
.topbar-order-icon::after,
.topbar-calendar-icon::before,
.topbar-calendar-icon::after,
.notification-bell::before,
.notification-bell::after {
  display: none !important;
}

.login-lock .lucide {
  width: 34px !important;
  height: 34px !important;
  color: #ffffff !important;
  filter: drop-shadow(0 0 18px rgba(96, 165, 250, .65));
}

.mail-icon,
.mini-lock-icon,
.eye-icon {
  left: 18px !important;
  width: 21px !important;
  height: 21px !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: rgba(203, 213, 225, .78) !important;
}

.login-eye-button .eye-icon,
.eye-icon {
  left: auto !important;
  right: 18px !important;
  top: 18px !important;
}

.small-shield-icon,
.login-primary [data-lucide],
.login-primary .lucide {
  position: static !important;
  display: inline-block !important;
  width: 18px !important;
  height: 18px !important;
  border: 0 !important;
  color: currentColor !important;
}

.portal-card [data-lucide],
.portal-card .lucide,
.portal-card-icon .lucide {
  width: 42px !important;
  height: 42px !important;
  color: #ffffff !important;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .18));
}

.portal-card-add .portal-card-icon .lucide {
  width: 34px !important;
  height: 34px !important;
}

.inventory-sidebar nav span,
.inventory-sidebar nav .lucide,
.sidebar-toggle .lucide,
.inventory-topbar-search .lucide,
.toolbar .search .lucide,
.technician-profile-chevron.lucide {
  width: 20px !important;
  height: 20px !important;
  display: inline-block !important;
  color: currentColor !important;
}

.topbar-cart-icon,
.topbar-order-icon,
.topbar-calendar-icon,
.notification-bell {
  display: block !important;
  width: 26px !important;
  height: 26px !important;
  border: 0 !important;
  border-radius: 0 !important;
  transform: none !important;
  color: #38bdf8 !important;
  filter: drop-shadow(0 0 7px rgba(22, 137, 255, .34)) !important;
}

.notification-bell {
  color: #e2e8f0 !important;
}

/* Icones padronizados com Lucide - design147 */
[data-lucide],
.lucide {
  width: 1.15em;
  height: 1.15em;
  flex: 0 0 auto;
  stroke: currentColor;
  vertical-align: -0.18em;
}

.login-lock {
  display: grid !important;
  place-items: center !important;
}

.login-lock::before,
.login-lock::after,
.mail-icon::before,
.mail-icon::after,
.mini-lock-icon::before,
.mini-lock-icon::after,
.eye-icon::before,
.eye-icon::after,
.small-shield-icon::before,
.topbar-cart-icon::before,
.topbar-cart-icon::after,
.topbar-order-icon::before,
.topbar-order-icon::after,
.topbar-calendar-icon::before,
.topbar-calendar-icon::after,
.notification-bell::before,
.notification-bell::after {
  display: none !important;
}

.login-lock .lucide {
  width: 34px !important;
  height: 34px !important;
  color: #ffffff !important;
  filter: drop-shadow(0 0 18px rgba(96, 165, 250, .65));
}

.mail-icon,
.mini-lock-icon,
.eye-icon {
  left: 18px !important;
  width: 21px !important;
  height: 21px !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: rgba(203, 213, 225, .78) !important;
}

.login-eye-button .eye-icon,
.eye-icon {
  left: auto !important;
  right: 18px !important;
  top: 18px !important;
}

.small-shield-icon,
.login-primary [data-lucide] {
  position: static !important;
  display: inline-block !important;
  width: 18px !important;
  height: 18px !important;
  border: 0 !important;
  color: currentColor !important;
}

.portal-card [data-lucide],
.portal-card .lucide,
.portal-card-icon .lucide {
  width: 42px !important;
  height: 42px !important;
  color: #ffffff !important;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .18));
}

.portal-card-add .portal-card-icon .lucide {
  width: 34px !important;
  height: 34px !important;
}

.inventory-sidebar nav span,
.inventory-sidebar nav .lucide,
.sidebar-toggle .lucide,
.inventory-topbar-search .lucide,
.toolbar .search .lucide,
.technician-profile-chevron.lucide {
  width: 20px !important;
  height: 20px !important;
  display: inline-block !important;
  color: currentColor !important;
}

.topbar-cart-icon,
.topbar-order-icon,
.topbar-calendar-icon,
.notification-bell {
  display: block !important;
  width: 26px !important;
  height: 26px !important;
  border: 0 !important;
  border-radius: 0 !important;
  transform: none !important;
  color: #38bdf8 !important;
  filter: drop-shadow(0 0 7px rgba(22, 137, 255, .34)) !important;
}

.notification-bell {
  color: #e2e8f0 !important;
}

.login-aurora-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.login-aurora-bg {
  z-index: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 100%, rgba(7, 15, 32, .78), transparent 44%),
    linear-gradient(180deg, rgba(2, 6, 16, .15), rgba(2, 6, 16, .86));
}

.login-aurora-bg::after {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    linear-gradient(115deg, rgba(255,255,255,.035), transparent 32%, rgba(255,255,255,.018), transparent 70%),
    radial-gradient(circle at 50% 20%, rgba(255,255,255,.025), transparent 24%);
  filter: blur(18px);
  opacity: .52;
  transform: translateZ(0);
}

.aurora-orb {
  position: absolute;
  width: 48vw;
  height: 48vw;
  min-width: 520px;
  min-height: 520px;
  border-radius: 999px;
  filter: blur(72px);
  opacity: .52;
  mix-blend-mode: screen;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

.aurora-blue {
  left: -12vw;
  top: -16vw;
  background: radial-gradient(circle, rgba(31, 93, 255, .85), rgba(31, 93, 255, .30) 42%, transparent 70%);
  animation: auroraBlue 26s ease-in-out infinite alternate;
}

.aurora-purple {
  right: -16vw;
  top: 4vh;
  background: radial-gradient(circle, rgba(93, 40, 180, .80), rgba(93, 40, 180, .28) 44%, transparent 72%);
  animation: auroraPurple 32s ease-in-out infinite alternate;
}

.aurora-cyan {
  left: 36vw;
  bottom: -22vw;
  background: radial-gradient(circle, rgba(28, 211, 255, .62), rgba(28, 211, 255, .22) 42%, transparent 72%);
  animation: auroraCyan 30s ease-in-out infinite alternate;
}

.aurora-haze {
  position: absolute;
  inset: 7% 8% auto;
  height: 58%;
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 30% 42%, rgba(38, 106, 255, .18), transparent 42%),
    radial-gradient(ellipse at 72% 46%, rgba(111, 55, 190, .20), transparent 46%),
    radial-gradient(ellipse at 54% 64%, rgba(54, 213, 255, .10), transparent 44%);
  filter: blur(38px);
  opacity: .82;
  animation: auroraHaze 36s ease-in-out infinite alternate;
}

@keyframes auroraBlue {
  from { transform: translate3d(-2%, -1%, 0) scale(1); }
  to { transform: translate3d(8%, 5%, 0) scale(1.08); }
}

@keyframes auroraPurple {
  from { transform: translate3d(2%, -3%, 0) scale(1.02); }
  to { transform: translate3d(-8%, 8%, 0) scale(1.12); }
}

@keyframes auroraCyan {
  from { transform: translate3d(-5%, 3%, 0) scale(.96); }
  to { transform: translate3d(7%, -7%, 0) scale(1.08); }
}

@keyframes auroraHaze {
  from { transform: translate3d(-2%, 0, 0) rotate(-2deg) scale(1); }
  to { transform: translate3d(3%, 4%, 0) rotate(2deg) scale(1.05); }
}

body:not(.official-open) .portal-login-left,
body:not(.official-open) .portal-login-card,
body:not(.official-open) .login-top-actions {
  position: relative;
  z-index: 3;
}

body:not(.official-open) .portal-login-card {
  border-color: rgba(210, 230, 255, .18) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.105), rgba(255,255,255,.045)),
    rgba(5, 12, 28, .64) !important;
  backdrop-filter: blur(28px) saturate(1.18);
  box-shadow:
    0 34px 90px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.12),
    0 0 0 1px rgba(255,255,255,.035) !important;
}

body:not(.official-open) .portal-login-card::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,.11), transparent 26%, transparent 72%, rgba(86, 190, 255, .08));
}

body:not(.official-open) .login-field > div {
  background: rgba(255,255,255,.055) !important;
  border-color: rgba(220, 235, 255, .13) !important;
}

body:not(.official-open) .login-top-actions {
  background: rgba(4, 12, 28, .58) !important;
  border-color: rgba(215, 232, 255, .14) !important;
  backdrop-filter: blur(22px) saturate(1.15);
}

body:not(.official-open) .showcase-grid {
  background: rgba(255,255,255,.045) !important;
  border-color: rgba(210, 230, 255, .12) !important;
  backdrop-filter: blur(18px);
}

/* Identidade visual alinhada com a pagina de venda - design143 */
body:not(.official-open) .portal-login-screen {
  grid-template-columns: minmax(520px, 1.08fr) minmax(390px, 500px);
  gap: clamp(48px, 7vw, 104px);
  padding: 112px clamp(34px, 6vw, 86px) 52px;
}

body:not(.official-open) .login-top-actions {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  width: min(1120px, calc(100vw - 48px));
  justify-content: flex-end;
  padding: 12px 14px;
  border-radius: 22px;
}

body:not(.official-open) .login-top-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-right: auto;
  color: #f4f8ff;
  text-decoration: none;
}

body:not(.official-open) .login-top-brand span {
  display: grid;
  place-items: center;
  width: 39px;
  height: 39px;
  border-radius: 14px;
  background: linear-gradient(135deg, #3388ff, #57d7ff);
  color: #fff;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 1px;
  box-shadow: 0 10px 30px rgba(51, 136, 255, .30);
}

body:not(.official-open) .login-top-brand strong {
  font-size: 15px;
  font-weight: 900;
}

body:not(.official-open) .login-top-link {
  min-width: 0;
  min-height: 42px;
  padding: 0 16px;
}

body:not(.official-open) .login-top-link-tour {
  color: #d7e7ff;
  background: rgba(255,255,255,.06);
}

body:not(.official-open) .login-top-link-buy {
  color: #fff;
  background: linear-gradient(135deg, #2f82ff, #0e63df);
  box-shadow: 0 14px 34px rgba(36, 118, 242, .28);
}

body:not(.official-open) .portal-login-brand {
  display: none;
}

body:not(.official-open) .login-eyebrow {
  margin: 0 0 14px !important;
  color: #8bc7ff !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  letter-spacing: 2px;
}

body:not(.official-open) .portal-login-copy {
  margin-top: 0;
}

body:not(.official-open) .portal-login-copy h2 {
  max-width: 720px;
  font-size: clamp(44px, 5.4vw, 72px);
  line-height: 1.02;
  letter-spacing: -2.4px;
}

body:not(.official-open) .portal-login-copy p:not(.login-eyebrow) {
  max-width: 620px;
  color: #b8c7df;
}

body:not(.official-open) .login-product-showcase {
  max-width: 640px;
}

body:not(.official-open) .showcase-grid {
  border-radius: 22px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.028)),
    rgba(5,17,38,.52) !important;
}

body:not(.official-open) .showcase-grid article {
  padding: 19px 18px;
}

body:not(.official-open) .login-trust-seals {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  max-width: 640px;
  margin-top: 18px;
}

body:not(.official-open) .login-trust-seals span {
  min-height: 76px;
  padding: 14px 13px;
  border: 1px solid rgba(148,190,255,.16);
  border-radius: 18px;
  background: rgba(255,255,255,.055);
  color: #dbeafe;
  font-size: 12px;
}

body:not(.official-open) .login-trust-seals span::after {
  left: auto;
  right: 12px;
  top: 14px;
  transform: none;
}

body:not(.official-open) .login-trust-seals strong {
  display: block;
  margin: 0 0 10px;
  color: #fff;
  font-size: 13px;
}

body:not(.official-open) .portal-login-card {
  width: min(100%, 500px);
  padding: 32px;
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04)),
    rgba(6,16,34,.72) !important;
}

body:not(.official-open) .activation-top-button {
  justify-content: center;
  width: max-content;
  margin-left: 0;
}

body:not(.official-open) .portal-login-card h2,
body:not(.official-open) .portal-login-card > p {
  text-align: left;
}

body:not(.official-open) .login-security-note {
  padding: 12px;
  border-radius: 16px;
  background: rgba(30,203,140,.075);
}

@media (max-width: 920px) {
  body:not(.official-open) .portal-login-screen {
    grid-template-columns: 1fr;
  }

  body:not(.official-open) .login-trust-seals {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  body:not(.official-open) .portal-login-screen {
    padding: 118px 16px 36px;
  }

  body:not(.official-open) .login-top-actions {
    left: 12px !important;
    right: 12px !important;
    width: auto;
    transform: none !important;
    justify-content: center;
    flex-wrap: wrap;
  }

  body:not(.official-open) .login-top-brand {
    width: 100%;
    justify-content: center;
    margin: 0 0 4px;
  }

  body:not(.official-open) .login-trust-seals {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .aurora-orb,
  .aurora-haze {
    animation: none;
  }
}

/* Login com o mesmo fundo da pagina de venda - design142 */
body:not(.official-open) {
  background:
    radial-gradient(circle at 12% 12%, rgba(51, 136, 255, 0.28), transparent 30%),
    radial-gradient(circle at 86% 4%, rgba(87, 215, 255, 0.22), transparent 28%),
    linear-gradient(135deg, #041024 0%, #07142b 45%, #030814 100%) !important;
}

body:not(.official-open) .portal-login-screen {
  background:
    radial-gradient(circle at 12% 12%, rgba(51, 136, 255, 0.28), transparent 30%),
    radial-gradient(circle at 86% 4%, rgba(87, 215, 255, 0.22), transparent 28%),
    linear-gradient(135deg, #041024 0%, #07142b 45%, #030814 100%) !important;
}

body:not(.official-open) .portal-login-screen::after {
  content: "" !important;
  display: block !important;
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 1;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: linear-gradient(to bottom, black, transparent 80%);
}

body:not(.official-open) .login-aurora-bg {
  display: none !important;
}

body:not(.official-open) .portal-login-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04)),
    rgba(6, 16, 34, .72) !important;
  border-color: rgba(148, 190, 255, .22) !important;
  backdrop-filter: blur(18px) saturate(1.1);
}

body:not(.official-open) .login-top-actions {
  background: rgba(6, 16, 34, .72) !important;
  border-color: rgba(148, 190, 255, .18) !important;
  backdrop-filter: blur(18px);
}

/* Login redesenhado e sem particulas - design144 */
body:not(.official-open) {
  background:
    radial-gradient(circle at 13% 16%, rgba(45, 126, 255, .34), transparent 31%),
    radial-gradient(circle at 86% 6%, rgba(81, 216, 255, .22), transparent 29%),
    radial-gradient(circle at 54% 100%, rgba(55, 77, 210, .18), transparent 35%),
    linear-gradient(135deg, #041024 0%, #07142b 47%, #030814 100%) !important;
}

body:not(.official-open) .board-shell {
  min-height: 100vh;
  background: transparent !important;
  overflow: visible !important;
}

body:not(.official-open) .portal-login-screen {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.05fr) minmax(380px, 500px) !important;
  align-items: center !important;
  gap: clamp(36px, 6vw, 86px) !important;
  width: 100% !important;
  min-height: 100vh !important;
  padding: 112px clamp(24px, 6vw, 72px) 56px !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 13% 16%, rgba(45, 126, 255, .34), transparent 31%),
    radial-gradient(circle at 86% 6%, rgba(81, 216, 255, .22), transparent 29%),
    radial-gradient(circle at 54% 100%, rgba(55, 77, 210, .18), transparent 35%),
    linear-gradient(135deg, #041024 0%, #07142b 47%, #030814 100%) !important;
}

body:not(.official-open) .portal-login-screen::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  opacity: .72 !important;
  background-image:
    linear-gradient(rgba(255, 255, 255, .032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .032) 1px, transparent 1px) !important;
  background-size: 64px 64px !important;
  mask-image: linear-gradient(to bottom, black 0%, rgba(0,0,0,.72) 55%, transparent 100%) !important;
}

body:not(.official-open) .portal-login-screen::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: auto -15% -38% -15% !important;
  height: 52vh !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background: radial-gradient(ellipse at center, rgba(49, 146, 255, .24), transparent 68%) !important;
  filter: blur(18px) !important;
}

body:not(.official-open) .login-aurora-bg,
body:not(.official-open) .login-spotlight,
body:not(.official-open) #loginParticles,
body:not(.official-open) .mascot-wrap,
body:not(.official-open) .phone-visual,
body:not(.official-open) .login-feature-list,
body:not(.official-open) .login-safe-card,
body:not(.official-open) .login-qualification-ticker,
body:not(.official-open) .portal-login-divider {
  display: none !important;
}

body:not(.official-open) .login-top-actions {
  position: absolute !important;
  top: 22px !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  z-index: 5 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  width: min(1120px, calc(100vw - 48px)) !important;
  padding: 12px 14px !important;
  border: 1px solid rgba(148, 190, 255, .18) !important;
  border-radius: 22px !important;
  background: rgba(6, 16, 34, .72) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .26) !important;
  backdrop-filter: blur(18px) saturate(1.15) !important;
}

body:not(.official-open) .login-top-brand {
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;
  margin-right: auto !important;
  color: #f4f8ff !important;
  text-decoration: none !important;
}

body:not(.official-open) .login-top-brand span {
  display: grid !important;
  place-items: center !important;
  width: 39px !important;
  height: 39px !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #3388ff, #57d7ff) !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  letter-spacing: 1px !important;
  box-shadow: 0 12px 30px rgba(51, 136, 255, .32) !important;
}

body:not(.official-open) .login-top-brand strong {
  color: #f8fbff !important;
  font-size: 15px !important;
  font-weight: 900 !important;
}

body:not(.official-open) .login-top-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 42px !important;
  padding: 0 17px !important;
  border: 1px solid rgba(148, 190, 255, .23) !important;
  border-radius: 15px !important;
  color: #d7e7ff !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  text-decoration: none !important;
  background: rgba(255, 255, 255, .06) !important;
}

body:not(.official-open) .login-top-link-buy {
  color: #fff !important;
  border-color: rgba(75, 154, 255, .45) !important;
  background: linear-gradient(135deg, #2f82ff, #0e63df) !important;
  box-shadow: 0 14px 34px rgba(36, 118, 242, .28) !important;
}

body:not(.official-open) .portal-login-left,
body:not(.official-open) .portal-login-card {
  position: relative !important;
  z-index: 2 !important;
}

body:not(.official-open) .portal-login-left {
  left: auto !important;
  display: block !important;
  width: 100% !important;
  max-width: 720px !important;
  min-height: 0 !important;
  justify-self: end !important;
  color: #fff !important;
}

body:not(.official-open) .portal-login-brand {
  display: none !important;
}

body:not(.official-open) .portal-login-copy {
  margin: 0 !important;
}

body:not(.official-open) .login-eyebrow {
  margin: 0 0 14px !important;
  color: #8bc7ff !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  letter-spacing: 2.4px !important;
  text-transform: uppercase !important;
}

body:not(.official-open) .portal-login-copy h2 {
  margin: 0 !important;
  max-width: 700px !important;
  color: #fff !important;
  font-size: clamp(42px, 5vw, 70px) !important;
  line-height: 1.03 !important;
  letter-spacing: -2.4px !important;
}

body:not(.official-open) .portal-login-copy h2 strong {
  color: #9ed4ff !important;
}

body:not(.official-open) .portal-login-copy p:not(.login-eyebrow) {
  max-width: 600px !important;
  margin: 22px 0 0 !important;
  color: #b8c7df !important;
  font-size: 18px !important;
  line-height: 1.6 !important;
}

body:not(.official-open) .login-product-showcase {
  display: block !important;
  max-width: 620px !important;
  margin-top: 30px !important;
}

body:not(.official-open) .showcase-panel {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body:not(.official-open) .showcase-header {
  display: none !important;
}

body:not(.official-open) .showcase-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  overflow: hidden !important;
  border: 1px solid rgba(148, 190, 255, .16) !important;
  border-radius: 22px !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .028)),
    rgba(5, 17, 38, .52) !important;
  box-shadow: 0 28px 70px rgba(0, 0, 0, .22) !important;
  backdrop-filter: blur(12px) !important;
}

body:not(.official-open) .showcase-grid article {
  min-height: auto !important;
  padding: 18px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: rgba(3, 10, 23, .22) !important;
}

body:not(.official-open) .showcase-grid article + article {
  border-left: 1px solid rgba(148, 190, 255, .12) !important;
}

body:not(.official-open) .showcase-grid small,
body:not(.official-open) .showcase-grid span {
  color: #93a5bd !important;
  font-size: 11px !important;
  font-weight: 850 !important;
}

body:not(.official-open) .showcase-grid strong {
  display: block !important;
  margin: 4px 0 0 !important;
  color: #fff !important;
  font-size: 31px !important;
  line-height: 1 !important;
  letter-spacing: -.8px !important;
}

body:not(.official-open) .showcase-line {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 8px !important;
  margin-top: 14px !important;
}

body:not(.official-open) .showcase-line i {
  display: block !important;
  height: 5px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, rgba(47, 130, 255, .84), rgba(87, 215, 255, .54)) !important;
}

body:not(.official-open) .login-trust-seals {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
  max-width: 620px !important;
  margin-top: 16px !important;
}

body:not(.official-open) .login-trust-seals span {
  position: relative !important;
  min-height: 78px !important;
  padding: 14px 13px !important;
  border: 1px solid rgba(148, 190, 255, .16) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, .055) !important;
  color: #dbeafe !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}

body:not(.official-open) .login-trust-seals span::after {
  content: "" !important;
  position: absolute !important;
  top: 14px !important;
  right: 12px !important;
  left: auto !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 999px !important;
  background: #35e7a7 !important;
  box-shadow: 0 0 16px rgba(53, 231, 167, .62) !important;
  transform: none !important;
}

body:not(.official-open) .login-trust-seals strong {
  display: block !important;
  margin: 0 0 10px !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 950 !important;
}

body:not(.official-open) .portal-login-card {
  width: min(100%, 500px) !important;
  justify-self: start !important;
  padding: 32px !important;
  border: 1px solid rgba(148, 190, 255, .22) !important;
  border-radius: 28px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .04)),
    rgba(6, 16, 34, .76) !important;
  box-shadow: 0 34px 90px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .08) !important;
  backdrop-filter: blur(18px) saturate(1.1) !important;
  color: #fff !important;
}

body:not(.official-open) .login-lock {
  width: 58px !important;
  height: 58px !important;
  margin: 0 0 14px !important;
  border-radius: 20px !important;
  background:
    linear-gradient(135deg, rgba(58, 139, 255, .28), rgba(87, 215, 255, .12)),
    rgba(255, 255, 255, .06) !important;
  box-shadow: 0 18px 42px rgba(47, 130, 255, .22) !important;
}

body:not(.official-open) .login-lock::before,
body:not(.official-open) .login-lock::after {
  border-color: #fff !important;
}

body:not(.official-open) .activation-top-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: auto !important;
  min-height: 36px !important;
  margin: 0 0 18px !important;
  padding: 0 14px !important;
  border: 1px solid rgba(148, 190, 255, .22) !important;
  border-radius: 999px !important;
  color: #dcecff !important;
  background: rgba(255, 255, 255, .06) !important;
}

body:not(.official-open) .activation-top-button span {
  width: 16px !important;
  height: 16px !important;
}

body:not(.official-open) .portal-login-card h2 {
  margin: 0 !important;
  color: #fff !important;
  font-size: 31px !important;
  line-height: 1.1 !important;
  letter-spacing: -.7px !important;
  text-align: left !important;
}

body:not(.official-open) .portal-login-card > p {
  margin: 10px 0 24px !important;
  color: #aebbd0 !important;
  font-size: 15px !important;
  text-align: left !important;
}

body:not(.official-open) .activation-panel {
  margin: 0 0 22px !important;
  padding: 18px !important;
  border: 1px solid rgba(60, 138, 255, .36) !important;
  border-radius: 20px !important;
  background: rgba(10, 31, 67, .46) !important;
}

body:not(.official-open) .portal-login-card label {
  display: block !important;
  margin: 0 0 16px !important;
  color: #f5f8ff !important;
  font-size: 14px !important;
  font-weight: 850 !important;
}

body:not(.official-open) .portal-login-card input {
  width: 100% !important;
  min-height: 58px !important;
  margin-top: 8px !important;
  border: 1px solid rgba(148, 190, 255, .18) !important;
  border-radius: 16px !important;
  background: rgba(2, 10, 24, .48) !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04) !important;
}

body:not(.official-open) .portal-login-card input:focus {
  border-color: rgba(87, 215, 255, .55) !important;
  box-shadow: 0 0 0 4px rgba(87, 215, 255, .10) !important;
}

body:not(.official-open) .portal-login-card button.primary,
body:not(.official-open) .portal-login-card .primary {
  min-height: 52px !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, #2f82ff, #0e63df) !important;
  box-shadow: 0 18px 40px rgba(36, 118, 242, .26) !important;
}

body:not(.official-open) .login-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  margin: 4px 0 18px !important;
}

body:not(.official-open) .remember-option {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  margin: 0 !important;
  color: #cbd7eb !important;
}

body:not(.official-open) .remember-option input {
  width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  margin: 0 !important;
}

body:not(.official-open) .forgot-link {
  color: #6fb6ff !important;
  font-weight: 800 !important;
}

body:not(.official-open) .login-security-note {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  margin-top: 20px !important;
  padding: 12px !important;
  border: 1px solid rgba(53, 231, 167, .16) !important;
  border-radius: 16px !important;
  background: rgba(30, 203, 140, .075) !important;
  color: #b8f8dd !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
}

body:not(.official-open) .login-security-note::before {
  content: "" !important;
  flex: 0 0 auto !important;
  width: 10px !important;
  height: 10px !important;
  margin-top: 4px !important;
  border-radius: 999px !important;
  background: #35e7a7 !important;
  box-shadow: 0 0 16px rgba(53, 231, 167, .62) !important;
}

@media (max-width: 980px) {
  body:not(.official-open) .portal-login-screen {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    padding-top: 116px !important;
  }

  body:not(.official-open) .portal-login-left,
  body:not(.official-open) .portal-login-card {
    justify-self: center !important;
  }

  body:not(.official-open) .portal-login-left {
    max-width: 680px !important;
  }

  body:not(.official-open) .portal-login-copy {
    text-align: center !important;
  }

  body:not(.official-open) .portal-login-copy p:not(.login-eyebrow),
  body:not(.official-open) .login-product-showcase,
  body:not(.official-open) .login-trust-seals {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (max-width: 640px) {
  body:not(.official-open) .portal-login-screen {
    padding: 130px 16px 34px !important;
  }

  body:not(.official-open) .login-top-actions {
    top: 12px !important;
    width: calc(100vw - 24px) !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  body:not(.official-open) .login-top-brand {
    width: 100% !important;
    justify-content: center !important;
    margin: 0 !important;
  }

  body:not(.official-open) .login-top-link {
    flex: 1 1 0 !important;
    padding: 0 10px !important;
  }

  body:not(.official-open) .portal-login-copy h2 {
    font-size: clamp(36px, 12vw, 50px) !important;
    letter-spacing: -1.5px !important;
  }

  body:not(.official-open) .showcase-grid,
  body:not(.official-open) .login-trust-seals {
    grid-template-columns: 1fr !important;
  }

  body:not(.official-open) .showcase-grid article + article {
    border-left: 0 !important;
    border-top: 1px solid rgba(148, 190, 255, .12) !important;
  }

  body:not(.official-open) .portal-login-card {
    padding: 24px !important;
  }
}

/* Login com ativacao remanejada - design145 */
body:not(.official-open) .login-activation-aside {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 16px !important;
  max-width: 620px !important;
  margin-top: 16px !important;
  padding: 18px !important;
  border: 1px solid rgba(148, 190, 255, .16) !important;
  border-radius: 22px !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .028)),
    rgba(5, 17, 38, .48) !important;
  box-shadow: 0 26px 62px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .08) !important;
  backdrop-filter: blur(14px) !important;
}

body:not(.official-open) .login-activation-aside > div:first-child strong {
  display: block !important;
  margin-bottom: 6px !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 950 !important;
}

body:not(.official-open) .login-activation-aside > div:first-child p {
  margin: 0 !important;
  max-width: 470px !important;
  color: #b8c7df !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
}

body:not(.official-open) .login-activation-aside .activation-top-button {
  margin: 0 !important;
  white-space: nowrap !important;
  border-color: rgba(87, 215, 255, .32) !important;
  background: rgba(47, 130, 255, .14) !important;
}

body:not(.official-open) .login-activation-aside .activation-panel {
  grid-column: 1 / -1 !important;
  margin: 4px 0 0 !important;
  padding: 18px !important;
  border: 1px solid rgba(87, 215, 255, .25) !important;
  border-radius: 18px !important;
  background: rgba(2, 10, 24, .38) !important;
}

body:not(.official-open) .login-activation-aside .activation-panel > strong {
  display: block !important;
  margin-bottom: 6px !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 950 !important;
}

body:not(.official-open) .login-activation-aside .activation-panel p {
  margin: 0 0 14px !important;
  color: #aebbd0 !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
}

body:not(.official-open) .login-activation-aside .activation-panel label {
  display: block !important;
  margin: 0 0 12px !important;
  color: #f5f8ff !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: .4px !important;
  text-transform: uppercase !important;
}

body:not(.official-open) .login-activation-aside .activation-panel input {
  width: 100% !important;
  min-height: 50px !important;
  margin-top: 8px !important;
  padding: 0 14px !important;
  border: 1px solid rgba(148, 190, 255, .18) !important;
  border-radius: 14px !important;
  background: rgba(2, 10, 24, .48) !important;
  color: #fff !important;
}

body:not(.official-open) .login-activation-aside .activation-panel .login-code {
  width: 100% !important;
  min-height: 48px !important;
  border-radius: 14px !important;
  color: #fff !important;
  background: linear-gradient(135deg, #2f82ff, #0e63df) !important;
}

body:not(.official-open) .portal-login-card .activation-top-button,
body:not(.official-open) .portal-login-card .activation-panel,
body:not(.official-open) .portal-login-card footer,
body:not(.official-open) .portal-login-card .login-security-note {
  display: none !important;
}

body:not(.official-open) .portal-login-card {
  padding: 30px !important;
}

body:not(.official-open) .portal-login-card .login-lock {
  margin-bottom: 18px !important;
}

@media (max-width: 980px) {
  body:not(.official-open) .login-activation-aside {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (max-width: 640px) {
  body:not(.official-open) .login-activation-aside {
    grid-template-columns: 1fr !important;
    text-align: left !important;
  }

  body:not(.official-open) .login-activation-aside .activation-top-button {
    width: 100% !important;
  }
}

/* Fundo do login igual a pagina de venda - design146 */
body:not(.official-open) {
  background:
    radial-gradient(circle at 12% 12%, rgba(51, 136, 255, 0.28), transparent 30%),
    radial-gradient(circle at 86% 4%, rgba(87, 215, 255, 0.22), transparent 28%),
    linear-gradient(135deg, #041024 0%, #07142b 45%, #030814 100%) !important;
}

body:not(.official-open) .portal-login-screen {
  background:
    radial-gradient(circle at 12% 12%, rgba(51, 136, 255, 0.28), transparent 30%),
    radial-gradient(circle at 86% 4%, rgba(87, 215, 255, 0.22), transparent 28%),
    linear-gradient(135deg, #041024 0%, #07142b 45%, #030814 100%) !important;
}

body:not(.official-open) .portal-login-screen::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  opacity: 1 !important;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px) !important;
  background-size: 58px 58px !important;
  mask-image: linear-gradient(to bottom, black, transparent 80%) !important;
}

body:not(.official-open) .portal-login-screen::after {
  display: none !important;
}