.dac-wrap{
  width: 100%;

  --dac-radius: 16px;
  --dac-primary: linear-gradient(90deg,#2b7cff,#00d4ff);
  --dac-card-pad: 18px;
  --dac-row-gap: 10px;
  --dac-result-gap: var(--dac-result-gap);
  --dac-block-pad: 12px;
  --dac-align: left;
  --dac-font: ui-sans-serif, system-ui;
  --dac-label: rgba(255,255,255,.92);
  --dac-value: rgba(255,255,255,.86);
  --dac-muted: rgba(255,255,255,.62);
  --dac-bg: radial-gradient(1200px 600px at 10% 10%, rgba(86, 120, 255, .25), transparent 60%),
            radial-gradient(1000px 500px at 90% 20%, rgba(0, 212, 255, .18), transparent 55%),
            linear-gradient(180deg,#0b1020,#070915);
  font-family: var(--dac-font);
  padding: 0;
}

.dac-card{
  width: 100%;
  max-width: 100%;

  background: rgba(255,255,255,.06);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--dac-radius);
  padding: var(--dac-card-pad);
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
  position: relative;
  overflow: hidden;
}

.dac-wrap .dac-card:before{
  content:"";
  position:absolute; inset:-2px;
  background: var(--dac-bg);
  opacity: .85;
  z-index:-2;
}
.dac-wrap .dac-card:after{
  content:"";
  position:absolute; inset:0;
  background: rgba(0,0,0,.35);
  z-index:-1;
}

.dac-head{margin-bottom: 14px;}
.dac-title{font-size: 24px; line-height: 1.2; margin: 0; font-weight: 700; color: var(--dac-label);}
.dac-sub{font-size: 13px; margin-top: 4px; color: rgba(255,255,255,.72);}

.dac-row{display:flex; gap: var(--dac-row-gap); align-items:stretch; flex-wrap:wrap;}
.dac-input{
  flex: 1 1 260px;
  min-width: 220px;
  padding: 12px 12px;
  border-radius: calc(var(--dac-radius) - 2px);
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(10,14,28,.55);
  color: rgba(255,255,255,.92);
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.dac-input:focus{
  border-color: rgba(0,212,255,.35);
  box-shadow: inset 0 0 0 1px rgba(0,212,255,.25), 0 0 0 4px rgba(0,212,255,.09);
}

.dac-btn{
  flex: 0 0 auto;
  padding: 12px 14px;
  border-radius: calc(var(--dac-radius) - 2px);
  border: 0;
  cursor: pointer;
  color: #07101a;
  font-weight: 700;
  letter-spacing: .2px;
  background: var(--dac-primary);
  box-shadow: 0 10px 28px rgba(0,212,255,.14);
}
.dac-btn:disabled{
  opacity: .75;
  cursor: not-allowed;
}

.dac-hint{
  font-size: 12px;
  margin-top: 10px;
  color: var(--dac-muted);
}

.dac-result{
  margin-top: 14px;
  padding: var(--dac-block-pad);
  border-radius: calc(var(--dac-radius) - 4px);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: var(--dac-label);
  display: none;
}
.dac-result.is-visible{display:block;}
.dac-result .dac-err{color: rgba(255, 170, 170, .95);}
.dac-foot{margin-top: 12px;}
.dac-footnote{font-size: 11px; color: var(--dac-muted);}


.dac-result-grid{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--dac-result-gap);
}
.dac-block{
  grid-column: span 4;
  padding: 12px;
  border-radius: calc(var(--dac-radius) - 4px);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.14);
}
.dac-block-registrar{ grid-column: span 6; }

.dac-h2{
  font-size: 14px;
  font-weight: 800;
  margin: 0 0 6px 0;
  color: rgba(255,255,255,.92);
}
.dac-h3{
  font-size: 13px;
  font-weight: 800;
  margin: 0 0 6px 0;
  color: var(--dac-label);
}
.dac-val{
  font-size: 14px;
  color: rgba(255,255,255,.86);
  word-break: break-word;
}
.dac-source{
  grid-column: 1 / -1;
  font-size: 12px;
  color: var(--dac-muted);
  padding-left: 2px;
}

@media (max-width: 900px){
  .dac-block{ grid-column: span 6; }
  .dac-block-registrar{ grid-column: span 12; }
}
@media (max-width: 560px){
  .dac-block{ grid-column: span 12; }
}

.dac-answer{
  font-size: 16px;
  font-weight: 700;
  margin: 0;
  color: var(--dac-value);
  text-align: var(--dac-align);
  word-break: break-word;
}
.dac-result-grid, .dac-block, .dac-head, .dac-hint, .dac-source, .dac-footnote{
  text-align: var(--dac-align);
}