.ef-card{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;background:var(--bg);border:1.5px solid var(--border);border-radius:var(--radius-sm);margin-bottom:10px;transition:border-color var(--transition)}
.ef-card:hover{border-color:var(--primary)}
.ef-card-icon{font-size:1.3rem;width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:var(--card);border-radius:8px;flex-shrink:0}
.ef-card-content{flex:1;min-width:0}
.ef-card-label{font-size:.72rem;font-weight:700;color:var(--subtext);text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px}
.ef-card-value{font-size:1.05rem;font-weight:700;color:var(--text);word-break:break-all;line-height:1.4}
.ef-summary{margin-top:10px;font-size:.9rem;color:var(--subtext);line-height:1.5}
.ef-mono{font-family:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace;font-size:.9rem!important}
.ef-input{font-size:1.1rem!important;font-weight:600!important}
.ef-calc-btn{flex:1}


/* ============================================================
   EXPANDED FORM CALCULATOR — Enhanced Styles
   ============================================================ */

.ef-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ef-presets {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.ef-preset-label {
  font-size: .72rem;
  font-weight: 700;
  color: var(--subtext);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-right: 4px;
}

.ef-preset {
  padding: 5px 12px;
  border-radius: 6px;
  font-size: .75rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s ease;
  background: var(--bg);
  color: var(--subtext);
  border: 1.5px solid var(--border);
  font-family: var(--system-fonts);
}

.ef-preset:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  transform: translateY(-1px);
}

.ef-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.ef-label {
  font-size: .82rem;
  font-weight: 600;
  color: var(--subtext);
}

.ef-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

[data-theme="dark"] .ef-preset { background: var(--card); }

@media (max-width: 480px) {
  .ef-preset-label { display: none; }
}
