:root{
  --good:#2ecc71; --bad:#ff6b6b; --warn:#ffd166;
}
.onyxra-main{margin:20px 30px;display:grid;grid-template-columns:420px 1fr;gap:22px;}
@media(max-width:980px){.onyxra-main{grid-template-columns:1fr;}}
.onyxra-card{background:linear-gradient(180deg,var(--highlight-bg),var(--card-bg));border:1px solid var(--border-color);border-radius:22px;box-shadow:0 28px 70px var(--shadow-color);overflow:hidden;display:flex;flex-direction:column;}
.onyxra-card__head{display:flex;align-items:center;gap:12px;padding:18px 20px;border-bottom:1px solid var(--border-color);}
.onyxra-card__badge{width:44px;height:44px;border-radius:12px;background:var(--accent);color:#fff;display:grid;place-items:center;/* box-shadow: 0 10px 28px rgb(86 166 217 / 35%); */border-color: rgb(127 170 224 / 50%);box-shadow: 0 0 10px rgb(127 175 224 / 25%) inset;}
.onyxra-card__title{font-size:18px;font-weight:800;color:var(--text-bright);}
.onyxra-summary{padding:20px;display:grid;gap:14px;}
.onyxra-section-title{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--text-bright);}
.onyxra-list{list-style:none;margin:0;padding:0;display:grid;gap:10px;}
.onyxra-item{display:flex;gap:10px;align-items:flex-start;background:var(--highlight-bg);border:1px solid var(--border-color);padding:12px;border-radius:12px;line-height:1.45;}
.onyxra-item .onyxra-ico{flex:0 0 18px;margin-top:2px;}
.onyxra-item.good .onyxra-ico{color:var(--good);}
.onyxra-item.bad .onyxra-ico{color:var(--bad);}
.onyxra-item.warn .onyxra-ico{color:var(--warn);}
.onyxra-muted{color:var(--text-light);font-size:12px;}
.onyxra-content{padding:20px;display:flex;flex-direction:column;gap:16px;}
.onyxra-scroll{background:var(--secondary-bg);border:1px solid var(--border-color);border-radius:16px;padding:18px;line-height:1.65;}
.onyxra-consent{display: inline;gap:10px;align-items:flex-start;font-size:14px;color:var(--text-light);}
.onyxra-actions{margin-top:auto;display:flex;gap:12px;justify-content:flex-end;align-items:center;padding-top:16px;border-top:1px solid var(--border-color);}
.onyxra-btn{background:var(--button-bg);color:var(--button-text);padding:12px 18px;border-radius:12px;font-weight:800;border:none;cursor:pointer;}
.onyxra-btn[disabled]{opacity:.6;cursor:not-allowed;}
.onyxra-link{color:var(--link-color);text-decoration:none;font-size:14px;padding:10px 12px;border-radius:10px;border:1px solid var(--border-color);}
.onyxra-link:hover{text-decoration:underline;}
.ico{width:18px;height:18px;color:currentColor;}

  .bar.active-4{background:var(--accent);border-color:var(--accent)} .strength{margin-top:8px;display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
  .bar{height:6px;border-radius:999px;background:#2c2c2c;border:1px solid var(--panel-border);transition:background .2s,border-color .2s}
 .bar.active-1{background:#b45309;border-color:#b45309}
 .bar.active-2{background:#eab308;border-color:#eab308}
 .bar.active-3{background:#22c55e;border-color:#22c55e}

	
	/* Only style if label has text (non-empty) */
label.error[for="username"]:not(:empty),
label.error[for="email"]:not(:empty),
label.error[for="email2"]:not(:empty),
label.error[for="password"]:not(:empty),
label.error[for="password2"]:not(:empty) {
  --err:#ff3b3b;
  --err-soft:#ff6f61;
  --text:#fff;
  --bg:rgba(255,59,59,.10);
  --bg2:rgba(255,59,59,.06);
  --shadow: 0 8px 24px rgba(255,59,59,.18);
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 12px 10px 40px;
  border:1px solid color-mix(in oklab, var(--err) 65%, #000);
  border-left-width:4px;
  border-left-color: var(--err);
  border-radius:14px;
  background:
    linear-gradient(180deg,var(--bg),var(--bg2)),
    #2a2a2a;
  color:var(--text);
  font:600 13px/1.3 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  box-shadow: var(--shadow), inset 0 0 0 1px rgba(255,255,255,.03);
  position:relative;
  letter-spacing:.1px;
  -webkit-font-smoothing:antialiased;
  animation: slideIn .24s ease-out, glow 2.4s ease-in-out infinite;
}

/* Warning icon */
label.error[for="username"]:not(:empty)::before,
label.error[for="email"]:not(:empty)::before,
label.error[for="email2"]:not(:empty)::before,
label.error[for="password"]:not(:empty)::before,
label.error[for="password2"]:not(:empty)::before {
  content:"";
  position:absolute;
  left:12px; top:50%;
  translate:0 -50%;
  width:18px; height:18px;
  background-color: var(--err);
  -webkit-mask: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
    <path fill='%23fff' d='M12 2 1 21h22L12 2zm1 6v7h-2V8h2zm0 9v2h-2v-2h2z'/>\
  </svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
    <path fill='%23fff' d='M12 2 1 21h22L12 2zm1 6v7h-2V8h2zm0 9v2h-2v-2h2z'/>\
  </svg>") no-repeat center / contain;
  filter: drop-shadow(0 0 6px rgba(255,59,59,.45));
}

/* Speech arrow */
label.error[for="username"]:not(:empty)::after,
label.error[for="email"]:not(:empty)::after,
label.error[for="email2"]:not(:empty)::after,
label.error[for="password"]:not(:empty)::after,
label.error[for="password2"]:not(:empty)::after {
  content:"";
  position:absolute;
  left:26px; top:-5px;
  width:10px; height:10px;
  background: linear-gradient(180deg,var(--bg),var(--bg2)), #2a2a2a;
  border-left:1px solid color-mix(in oklab, var(--err) 65%, #000);
  border-top:1px solid color-mix(in oklab, var(--err) 65%, #000);
  transform: rotate(45deg);
  border-top-left-radius:2px;
}

/* Animations */
@keyframes slideIn { from { opacity:0; translate:0 6px } to { opacity:1; translate:0 0 } }
@keyframes glow {
  0%,100% { box-shadow: 0 0 0 0 rgba(255,59,59,.0), inset 0 0 0 1px rgba(255,255,255,.03) }
  50% { box-shadow: 0 0 0 3px rgba(255,59,59,.15), inset 0 0 0 1px rgba(255,255,255,.03) }
}

	
.input-error {
    border: 2px solid red !important;
    background-color: #ffe6e6 !important;
    color: red !important;
}

.input-error::placeholder {
    color: #ff4d4d !important;
}


	/* Only style if label has text (non-empty) */
label.error[for="username"]:not(:empty),
label.error[for="email"]:not(:empty),
label.error[for="email2"]:not(:empty),
label.error[for="password"]:not(:empty),
label.error[for="password2"]:not(:empty) {
  --err:#ff3b3b;
  --err-soft:#ff6f61;
  --text:#fff;
  --bg:rgba(255,59,59,.10);
  --bg2:rgba(255,59,59,.06);
  --shadow: 0 8px 24px rgba(255,59,59,.18);
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 12px 10px 40px;
  border:1px solid color-mix(in oklab, var(--err) 65%, #000);
  border-left-width:4px;
  border-left-color: var(--err);
  border-radius:14px;
  background:
    linear-gradient(180deg,var(--bg),var(--bg2)),
    #2a2a2a;
  color:var(--text);
  font:600 13px/1.3 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  box-shadow: var(--shadow), inset 0 0 0 1px rgba(255,255,255,.03);
  position:relative;
  letter-spacing:.1px;
  -webkit-font-smoothing:antialiased;
  animation: slideIn .24s ease-out, glow 2.4s ease-in-out infinite;
}

/* Warning icon */
label.error[for="username"]:not(:empty)::before,
label.error[for="email"]:not(:empty)::before,
label.error[for="email2"]:not(:empty)::before,
label.error[for="password"]:not(:empty)::before,
label.error[for="password2"]:not(:empty)::before {
  content:"";
  position:absolute;
  left:12px; top:50%;
  translate:0 -50%;
  width:18px; height:18px;
  background-color: var(--err);
  -webkit-mask: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
    <path fill='%23fff' d='M12 2 1 21h22L12 2zm1 6v7h-2V8h2zm0 9v2h-2v-2h2z'/>\
  </svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
    <path fill='%23fff' d='M12 2 1 21h22L12 2zm1 6v7h-2V8h2zm0 9v2h-2v-2h2z'/>\
  </svg>") no-repeat center / contain;
  filter: drop-shadow(0 0 6px rgba(255,59,59,.45));
}

/* Speech arrow */
label.error[for="username"]:not(:empty)::after,
label.error[for="email"]:not(:empty)::after,
label.error[for="email2"]:not(:empty)::after,
label.error[for="password"]:not(:empty)::after,
label.error[for="password2"]:not(:empty)::after {
  content:"";
  position:absolute;
  left:26px; top:-5px;
  width:10px; height:10px;
  background: linear-gradient(180deg,var(--bg),var(--bg2)), #2a2a2a;
  border-left:1px solid color-mix(in oklab, var(--err) 65%, #000);
  border-top:1px solid color-mix(in oklab, var(--err) 65%, #000);
  transform: rotate(45deg);
  border-top-left-radius:2px;
}

/* Animations */
@keyframes slideIn { from { opacity:0; translate:0 6px } to { opacity:1; translate:0 0 } }
@keyframes glow {
  0%,100% { box-shadow: 0 0 0 0 rgba(255,59,59,.0), inset 0 0 0 1px rgba(255,255,255,.03) }
  50% { box-shadow: 0 0 0 3px rgba(255,59,59,.15), inset 0 0 0 1px rgba(255,255,255,.03) }
}

	
.input-error {
    border: 2px solid red !important;
    background-color: #ffe6e6 !important;
    color: red !important;
}

.input-error::placeholder {
    color: #ff4d4d !important;
}