:root{
  --bg:#071027;
  --card:#0f1a2b;
  --muted:#a9bed6;
  --accent:#0097ff;
  --accent-2:#006fb3;
  --success:#2bd88b;
  --danger:#ff4b4b;
  --glass: rgba(255,255,255,0.02);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, Roboto, Arial, sans-serif;
  background:linear-gradient(180deg,var(--bg), #041220 140%);
  color:var(--muted);
  -webkit-font-smoothing:antialiased;
}

.container{ max-width:1100px; margin:28px auto; padding:18px; }

.card{
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border:1px solid rgba(0,0,0,0.3);
  padding:16px; border-radius:12px; margin-bottom:14px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.6);
}

.header h1{ margin:0; color:var(--accent); font-size:26px; }
.subtitle{ margin:6px 0 0; color:#93bfe4; }

.section h2{ color:#cfe9ff; margin-top:0; }

.field{ margin:10px 0; display:block; }
.field span{ display:block; font-size:13px; color:#9fb7d8; margin-bottom:6px; }

input[type="text"], input[type="password"], textarea, select{
  width:100%; padding:10px 12px; border-radius:8px; border:1px solid rgba(255,255,255,0.04);
  background:var(--glass); color:var(--muted); outline:none;
}
input:focus, textarea:focus, select:focus{ box-shadow:0 0 0 6px rgba(0,151,255,0.06); border-color:var(--accent); }

.frage{ margin-bottom:12px; padding:12px; border-radius:8px; border:1px solid rgba(255,255,255,0.03); background: rgba(255,255,255,0.01); }
.frage p{ margin:0 0 8px 0; color:#dff1ff; font-weight:600; }
.frage label{ display:block; margin:6px 0; cursor:pointer; color:var(--muted); }
.frage input[type="radio"]{ margin-right:8px; accent-color:var(--accent); }

.actions{ text-align:right; margin-top:12px; }
.btn{ padding:10px 14px; border-radius:8px; border:none; cursor:pointer; font-weight:700; color:#fff; }
.btn.primary{ background:linear-gradient(90deg,var(--accent),var(--accent-2)); }
.btn.ghost{ background:transparent; border:1px solid rgba(255,255,255,0.06); color:var(--muted); padding:9px 12px; }
.btn.danger{ background:linear-gradient(90deg,var(--danger), #cc2b2b); }

.hidden{ display:none; }

.result-card{ border-left:4px solid rgba(0,151,255,0.16); padding:12px; margin-bottom:12px; background: linear-gradient(180deg, rgba(255,255,255,0.005), transparent); border-radius:8px;}
.result-meta{ display:flex; justify-content:space-between; gap:12px; align-items:flex-start; flex-wrap:wrap; }
.result-title{ color:var(--accent); margin:0; font-size:16px; }
.result-sub{ color:#9fb7d8; margin:4px 0 0 0; font-size:13px; }

.noteInput{ padding:8px 10px; border-radius:8px; border:1px solid rgba(0,151,255,0.07); background: rgba(255,255,255,0.012); color:var(--muted); width:100%; }

.kv{ color:#9fb7d8; font-size:13px; }

.footer{ text-align:center; margin-top:12px; color:#7697b8; font-size:12px; }

@media (max-width:720px){
  .actions{ text-align:center; }
  .btn{ width:100%; }
}