/* Minimal, clean UI */
.oot-wrapper{max-width:840px;margin:0 auto;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:#222;}
.oot-head{margin:16px 0}
.oot-title{margin:0 0 6px}
.oot-note{font-size:12px;color:#666;margin:0 0 10px}
.oot-card{background:#fff;border:1px solid #e5e5e5;border-radius:14px;padding:18px;box-shadow:0 1px 2px rgba(0,0,0,.04);margin:14px 0}
.oot-row{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0}
.oot-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.oot-input,.oot-select{padding:12px 14px;border:1px solid #ccc;border-radius:12px;min-width:240px;height:48px;line-height:26px;font-size:16px}
.oot-toggle input{margin-right:8px}
.oot-btn{display:inline-block;text-decoration:none;font-weight:600;padding:12px 16px;border-radius:999px;border:1px solid #ccc;background:#f7f7f7;cursor:pointer;user-select:none}
.oot-btn.primary{background:#111;color:#fff;border-color:#111}
.oot-btn.ghost{background:#fff}
.oot-btn.appointment{background:#fff;color:#000;border:2px solid #000} /* leesbare afspraakknop */
.oot-foot{margin:12px 4px;color:#666;font-size:12px}
.oot-calib-wrap{display:flex;justify-content:center;align-items:center;padding:16px;background:#fafafa;border:1px dashed #ddd;border-radius:12px;margin:10px 0}
.oot-calib-box{background:repeating-linear-gradient(45deg,#eee,#eee 10px,#f7f7f7 10px,#f7f7f7 20px);border:2px solid #333;border-radius:10px;cursor:ns-resize;box-shadow:inset 0 0 0 4px rgba(255,255,255,.6)}
.oot-canvas{display:block;margin:12px auto;border:1px solid #ddd;border-radius:12px;background:#fff}
.oot-canvas-wrap{position:relative;display:flex;justify-content:center;align-items:center}
.oot-feedback{position:absolute;right:16px;top:16px;font-size:28px;font-weight:700;opacity:0;transition:opacity .15s ease}
.oot-feedback.ok{color:#0a7a2a;opacity:1}
.oot-feedback.ko{color:#b00020;opacity:1}
/* Alerts */
.oot-alert{border:1px solid #e11; background:#fee; padding:12px; border-radius:10px; margin:10px 0}
.oot-ok{border:1px solid #0a7a2a; background:#eef9f1; color:#0a7a2a; padding:12px; border-radius:10px; margin:10px 0}
/* D-Pad */
.oot-dpad{display:grid;grid-template-rows:repeat(3,auto);gap:10px;justify-content:center;margin-top:8px}
.oot-dpad .row{display:grid;grid-template-columns:80px 160px 80px;gap:10px;align-items:center;justify-content:center}
.oot-btn.dir{border-radius:14px;background:#fff;border:2px solid #111;font-size:20px;line-height:1.2;height:52px;min-width:64px}
.oot-dpad .center{font-size:12px;color:#666;text-align:center}
/* Dots (color task) */
.oot-dot-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;margin:12px 0}
.oot-dot{width:26px;height:26px;border-radius:50%}
.oot-info{font-size:12px;color:#666;margin:6px 0}
@media (max-width:600px){
  .oot-wrapper{padding:0 8px}
  .oot-dpad .row{grid-template-columns:72px 1fr 72px}
  .oot-btn.dir{height:56px; font-size:22px}
  .oot-input,.oot-select{min-width:180px}
}