.qd-wrapper { --qd-color: #ff8c00; max-width: 560px; }
.qd-card { border: 1px solid rgba(0,0,0,.08); border-radius: 16px; padding: 16px; box-shadow: 0 6px 18px rgba(0,0,0,.05); background: #fff; }
.qd-title { margin: 0 0 8px; font-weight: 700; }
.qd-controls { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.qd-btn { border: none; background: var(--qd-color); color: #fff; padding: 8px 12px; border-radius: 10px; cursor: pointer; font-weight: 600; }
.qd-btn:disabled{ opacity: .6; cursor: not-allowed; }
.qd-sep { opacity: .6; }
.qd-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; margin-bottom: 8px; }
.qd-form label { display: grid; gap: 4px; font-size: 12px; }
.qd-form input { border: 1px solid #ddd; border-radius: 10px; padding: 8px 10px; }
.qd-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0; font-size: 14px; }
.qd-compass { position: relative; width: 280px; height: 280px; margin: 12px auto; border-radius: 50%; border: 4px solid var(--qd-color); display: grid; place-items: center;
  background: radial-gradient(circle at 50% 50%, #fff 0%, #fafafa 60%, #f3f3f3 100%); }
.qd-dial { position: absolute; width: 95%; height: 95%; border-radius: 50%; border: 2px dashed rgba(0,0,0,.15); }
.qd-needle, .qd-qibla-arrow { position: absolute; width: 4px; height: 40%; top: 10%; left: calc(50% - 2px); transform-origin: 50% 90%; border-radius: 2px; }
.qd-needle { background: #222; }
.qd-qibla-arrow { background: var(--qd-color); box-shadow: 0 0 0 6px rgba(255,140,0,.12); }
.qd-hint { opacity: .8; font-size: 12px; margin-top: 8px; }
@media (max-width:480px){ .qd-form{ grid-template-columns: 1fr; } .qd-stats{ grid-template-columns: 1fr; } .qd-compass{ width: 220px; height: 220px; } }