/* smd-frontend.css
   Styling (vollständig) - Neon Harmonized UI
*/

:root{
  --bg-nearblack: #0a0f18;
  --bg-midnavy: #f4f7fb;
  --accent-orange: #ff7b2d;
  --footer-orange: #ff9a4d;
  --white: #ffffff;
  --card-warm: #fbfeff;
  --violet-top: #8b42ff;
  --blue-bottom: #2d7bff;
  --menu-darkgray: #e6eefb;
  --footer-link-gray: #6b7280;
  --text-on-dark: #0a0f18;
  --neon-glow: 0 14px 50px rgba(45,123,255,0.08);
  --font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* Wrapper consistent with other DSMS components */
.smd-shortcode-wrap, .smd-wrap { font-family: var(--font-family); color: var(--text-on-dark); background: linear-gradient(180deg, var(--bg-midnavy), #ffffff); padding: 18px; box-sizing: border-box; }

/* Card */
.smd-card { background: linear-gradient(180deg, var(--card-warm), #ffffff); border-radius: 12px; padding: 20px; box-shadow: var(--neon-glow); border: 1px solid rgba(10,15,24,0.04); margin-bottom: 18px; }

/* Titles */
.smd-card h2 { margin:0 0 12px 0; font-size:20px; color:var(--text-on-dark); }

/* Layout row */
.smd-row { display:flex; gap:20px; align-items:flex-start; margin-bottom:14px; flex-wrap:wrap; }
.smd-label { width:240px; font-weight:700; color:var(--text-on-dark); }
.smd-controls { flex:1; min-width:260px; }

/* Inputs */
.ds-input, textarea.ds-input, select.ds-input, input.ds-input {
  display:block;
  width:100%;
  max-width:820px;
  padding:10px 12px;
  border-radius:8px;
  border:1px solid rgba(10,15,24,0.06);
  background:#ffffff;
  color:var(--text-on-dark);
  box-sizing:border-box;
  font-size:14px;
  transition: box-shadow .12s ease, border-color .12s ease;
}
.ds-input:focus, textarea.ds-input:focus, select.ds-input:focus { box-shadow: 0 8px 24px rgba(45,123,255,0.06); border-color: rgba(45,123,255,0.18); outline:none; }

/* Buttons */
.dsms-btn-neonline {
  background: linear-gradient(90deg, #ff3fb8, #1fd6ff);
  color:#02181c;
  padding:10px 16px;
  border-radius:10px;
  border:none;
  font-weight:700;
  cursor:pointer;
  box-shadow: 0 12px 36px rgba(31,214,255,0.06);
  transition: transform .12s ease, opacity .12s ease;
}
.dsms-btn-neonline:hover { transform: translateY(-3px); }
.dsms-btn-ghost {
  background:transparent;
  color:var(--text-on-dark);
  border:1px solid rgba(10,15,24,0.06);
  padding:8px 12px;
  border-radius:8px;
  cursor:pointer;
}
.dsms-btn-orange {
  background: linear-gradient(90deg, var(--accent-orange), var(--footer-orange));
  color:#071116;
  padding:9px 14px;
  border-radius:8px;
  border:none;
  cursor:pointer;
}

/* Radio */
.smd-radio { display:inline-flex; align-items:center; gap:8px; margin-right:12px; color:var(--text-on-dark); }
.smd-radio input { transform:translateY(1px); }

/* Progress */
#smd-progress-frontend { width:100%; height:14px; border-radius:10px; overflow:hidden; background:linear-gradient(90deg,#eef7ff,#f7fbff); border:1px solid rgba(10,15,24,0.03); }
#smd-progress-frontend::-webkit-progress-value { background: linear-gradient(90deg,#1fd6ff,#ff3fb8); }

/* Result Notices */
#smd-result-frontend.notice { padding:10px; border-radius:8px; margin-top:8px; font-size:14px; }
.notice.notice-success { background:#ecfdf5; color:#065f46; border-left:4px solid #10b981; }
.notice.notice-error { background:#fff1f2; color:#7f1d1d; border-left:4px solid #ef4444; }
.notice.notice-info { background:#eff8ff; color:#0b4a66; border-left:4px solid #2d7bff; }
.notice.notice-warning { background:#fff7ed; color:#663c00; border-left:4px solid #ff9a4d; }

/* Log scroll & table */
.smd-log-controls { display:flex; gap:12px; align-items:center; margin-bottom:8px; }
.smd-log-scroll { max-height:360px; overflow:auto; border:1px solid rgba(10,15,24,0.04); border-radius:8px; background:transparent; padding:6px; }

.neon-table { width:100%; border-collapse:collapse; margin:0; font-size:13px; background:transparent; }
.neon-table thead th { background: linear-gradient(180deg,#fbfdff,#f1f7ff); color:var(--text-on-dark); padding:10px 12px; text-align:left; font-weight:700; border-bottom:1px solid rgba(10,15,24,0.06); position:sticky; top:0; z-index:2; }
.neon-table tbody td { padding:10px 12px; border-bottom:1px solid rgba(10,15,24,0.04); color:var(--text-on-dark); vertical-align:middle; }
.neon-table tbody tr:nth-child(odd) { background: linear-gradient(90deg, rgba(45,123,255,0.02), transparent); }
.neon-table tbody tr:hover { background: rgba(45,123,255,0.03); transform: translateY(-1px); transition: all .12s ease; }

.dsms-small { color: var(--footer-link-gray); font-size:13px; margin-top:6px; display:block; }

@media (max-width:900px) {
  .smd-row { flex-direction:column; }
  .smd-label { width:100%; margin-bottom:6px; }
  .neon-table thead th, .neon-table tbody td { padding:8px; font-size:12px; }
}