.ddc-wrap{--lav:#e6dffa;--lav-d:#cfc3f3;--ink:#2b2150;--blue:#1d4ed8;max-width:860px;margin:24px auto;color:var(--ddc-text,#000);font-family:inherit}
.ddc-wrap *{box-sizing:border-box}
.ddc-lavender{background:var(--lav);border-radius:20px;padding:20px;display:flex;flex-direction:column;gap:18px;
  box-shadow:0 14px 30px rgba(76,56,150,.28),0 3px 8px rgba(76,56,150,.18),inset 0 1px 0 rgba(255,255,255,.7)}
.ddc-strip{margin:0}
.ddc-strip[hidden]{display:none}
.ddc-label{margin:0 0 8px;font-size:1.05rem;font-weight:700;color:var(--ink);letter-spacing:.01em}
.ddc-white{background:#fff;border-radius:14px;padding:16px;color:var(--ddc-text,#000);box-shadow:0 1px 3px rgba(76,56,150,.15)}
.ddc-title{margin:0 0 6px;font-size:1.15rem;color:var(--ddc-text,#000)}
.ddc-qtext{margin:0 0 12px;line-height:1.55}
.ddc-qimg{display:block;max-width:100%;height:auto;margin:0 auto 10px;border-radius:8px}
.ddc-marks{margin:0;font-size:.9rem;opacity:.7}
.ddc-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:10px}
.ddc-tool{background:#f3f0fc;border:1px solid var(--lav-d);color:var(--ink);border-radius:8px;padding:6px 12px;font-size:.9rem;cursor:pointer}
.ddc-tool.is-on{background:var(--ink);color:#fff;border-color:var(--ink)}
.ddc-swatches{display:inline-flex;gap:6px}
.ddc-sw{width:26px;height:26px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #bbb;cursor:pointer;padding:0}
.ddc-sw.is-on{box-shadow:0 0 0 2px var(--ink)}
.ddc-size{display:inline-flex;align-items:center;gap:6px;font-size:.9rem}
.ddc-range{width:90px}
.ddc-canvas-box{border:2px dashed var(--lav-d);border-radius:10px;background:#fff;overflow:hidden;
  background-image:linear-gradient(#f1eefb 1px,transparent 1px),linear-gradient(90deg,#f1eefb 1px,transparent 1px);background-size:28px 28px}
.ddc-canvas{display:block;width:100%;height:auto;aspect-ratio:4/3;touch-action:none;cursor:crosshair;background:transparent}
.ddc-actions{display:flex;gap:12px;margin-top:14px}
.ddc-btn{background:var(--blue);color:#fff;border:0;border-radius:10px;padding:11px 28px;font-size:1rem;font-weight:600;cursor:pointer;box-shadow:0 3px 8px rgba(29,78,216,.35)}
.ddc-btn:hover{background:#1e40af}
.ddc-btn:disabled{opacity:.6;cursor:wait}
.ddc-tool:focus-visible,.ddc-btn:focus-visible,.ddc-sw:focus-visible{outline:3px solid #f59e0b;outline-offset:2px}
.ddc-msg{margin:10px 0 0;min-height:1.2em;font-size:.92rem}
.ddc-msg.err{color:#b91c1c}
.ddc-score{display:flex;align-items:baseline;gap:8px;margin-bottom:8px}
.ddc-score b{font-size:2.4rem;color:var(--ink);line-height:1}
.ddc-score span{font-size:1.1rem;opacity:.7}
.ddc-sum{margin:0 0 12px;line-height:1.55}
.ddc-block{margin:14px 0 0}
.ddc-block h5{margin:0 0 6px;font-size:1rem;color:var(--ink)}
.ddc-block ul{margin:0;padding-left:20px}
.ddc-block li{margin:4px 0;line-height:1.5}
.ddc-block.miss h5{color:#b91c1c}
.ddc-block.good h5{color:#15803d}
.ddc-sol{display:block;max-width:100%;height:auto;margin-top:8px;border-radius:8px;border:1px solid var(--lav-d)}
@media(max-width:560px){.ddc-lavender{padding:12px;border-radius:16px}.ddc-white{padding:12px}.ddc-btn{flex:1}}

.ddc-top{display:flex;flex-wrap:wrap;gap:20px;align-items:center;margin-bottom:14px}
.ddc-gauge-wrap{text-align:center;flex:0 0 150px;margin:0 auto}
.ddc-gauge{width:150px;height:150px;display:block}
.ddc-grade{margin-top:2px;font-weight:700;color:var(--ink)}
.ddc-side{flex:1 1 240px;min-width:220px}
.ddc-side h5{margin:0 0 8px;font-size:1rem;color:var(--ink)}
.ddc-bar-row{display:flex;align-items:center;gap:10px;margin:8px 0}
.ddc-bar-name{flex:0 0 100px;font-size:.92rem}
.ddc-bar-track{flex:1;height:12px;background:#ece8fb;border-radius:8px;overflow:hidden}
.ddc-bar-fill{height:100%;border-radius:8px;transition:width 1s ease}
.ddc-bar-val{flex:0 0 30px;text-align:right;font-weight:600;font-size:.92rem}
@media(prefers-reduced-motion:reduce){.ddc-bar-fill{transition:none}}