/* "Mark as done" ticks and save codes on question bank pages */
.wwqb .wwqb-pick{position:relative}
.wwd-dot{display:none}
/* the tick and face sit on the marks line, so the title keeps the tile's full width */
.wwqb-pick.wwd-done .m{padding-right:34px}
.wwqb-pick.wwd-scored .m{padding-right:62px}
.wwqb-pick.wwd-done:not(:has(.m)){padding-bottom:38px}
.wwd-face{display:none}
.wwqb-pick.wwd-scored .wwd-face{display:block;position:absolute;right:36px;bottom:7px;font-size:20px;line-height:1}
.wwqb-pick.wwd-done .wwd-dot{display:flex;position:absolute;right:8px;bottom:8px;width:24px;height:24px;border-radius:50%;align-items:center;justify-content:center;color:#fff;font-size:14px;font-weight:700;box-shadow:0 0 0 2px #fff,0 1px 3px rgba(0,0,0,.25)}

.wwd-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px}
.wwd-row button{font:inherit;cursor:pointer}
.wwd-mark{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border:2px solid #16a34a;border-radius:999px;background:#fff;color:#166534;font-weight:600;font-size:14px}
.wwd-mark .box{width:16px;height:16px;border:2px solid #16a34a;border-radius:4px}
.wwd-mark:hover{background:#f0fdf4}
.wwd-is{display:inline-flex;align-items:center;padding:6px 14px;border-radius:999px;color:#fff;font-weight:700;font-size:14px}
.wwd-again,.wwd-undo{padding:5px 12px;border:1px solid #d1d5db;border-radius:999px;background:#fff;color:#374151;font-size:13px}
.wwd-again:hover,.wwd-undo:hover{border-color:#6b7280}

.wwd-panel{margin:14px 0 18px;display:grid;gap:10px}
.wwd-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px}
.wwd-title{font-weight:700;font-size:17px}
.wwd-count{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:15px}
.wwd-sub{color:#6b7280;font-size:13px}
.wwd-bar{display:inline-block;width:140px;height:10px;border-radius:999px;background:#e5e7eb;overflow:hidden}
.wwd-bar span{display:block;height:100%;background:#16a34a}
.wwd-key{display:flex;align-items:center;gap:8px;font-size:13px;color:#4b5563;flex:1 1 320px}
.wwd-grad{flex:0 0 70px;height:12px;border-radius:999px;background:linear-gradient(90deg,hsl(128,72%,38%),hsl(100,72%,38%) 17%,hsl(60,84%,43%) 33%,hsl(46,86%,44%) 50%,hsl(18,72%,38%) 75%,hsl(0,72%,38%))}
.wwd-key b.g{color:hsl(128,72%,30%)}.wwd-key b.y{color:hsl(46,80%,32%)}.wwd-key b.r{color:hsl(0,72%,40%)}
.wwd-warn{border:3px solid #f59e0b;background:#fffbeb;border-radius:12px;padding:14px 18px;color:#78350f;font-size:15px}
.wwd-warn-h{font-weight:800;font-size:18px;margin-bottom:4px;color:#92400e}
.wwd-warn p,.wwd-ok p{margin:6px 0}
.wwd-ok{border:2px solid #16a34a;background:#f0fdf4;border-radius:12px;padding:12px 18px;color:#14532d;font-size:14.5px}
.wwd-code{font-family:ui-monospace,Menlo,Consolas,monospace;letter-spacing:.06em;background:#fff;border:1px solid #86efac;border-radius:6px;padding:1px 6px}
.wwd-sync{color:#4b5563;font-size:13px;font-weight:400}
.wwd-acts{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:10px}
.wwd-btn{font:inherit;font-weight:600;font-size:15px;padding:8px 18px;border-radius:999px;border:0;cursor:pointer;color:#fff;background:linear-gradient(135deg,#0574b8,#7c3aed)}
.wwd-btn.ghost{background:#fff;color:#0574b8;border:2px solid #0574b8}
.wwd-link{font:inherit;font-size:13.5px;background:none;border:0;padding:0;color:#166534;text-decoration:underline;cursor:pointer}

.wwd-modal{position:fixed;inset:0;z-index:100000;background:rgba(17,24,39,.55);display:flex;align-items:center;justify-content:center;padding:16px}
.wwd-box{background:#fff;border-radius:14px;max-width:460px;width:100%;padding:20px 22px;box-shadow:0 20px 50px rgba(0,0,0,.3);font-size:15px;color:#1f2937}
.wwd-box h3{margin:0 0 8px;font-size:20px}
.wwd-big{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:28px;font-weight:700;letter-spacing:.08em;text-align:center;background:#f3f4f6;border-radius:10px;padding:12px 6px;margin:10px 0}
.wwd-in{width:100%;box-sizing:border-box;font:inherit;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:22px;letter-spacing:.08em;text-transform:uppercase;padding:10px 12px;border:2px solid #9ca3af;border-radius:10px}
.wwd-err{color:#b91c1c;margin:8px 0 0}
@media (max-width:600px){.wwd-warn-h{font-size:16px}.wwd-big{font-size:22px}}
@media print{.wwd-panel,.wwd-row,.wwd-dot{display:none!important}}
.wwd-enter{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:#374151;padding:4px 10px;border:1px dashed #9ca3af;border-radius:999px}
.wwd-enter input{width:52px;font:inherit;padding:3px 6px;border:1px solid #9ca3af;border-radius:6px;text-align:center}
.wwd-score{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border:1px solid #d1d5db;border-radius:999px;background:#fff;font-size:15px;font-weight:700;color:#1f2937}
.wwd-score span{font-weight:400;font-size:13px;color:#4b5563}
.wwd-key.faces{flex-basis:100%}
.wwd-save{font:inherit;font-size:13px;padding:3px 10px;border:1px solid #16a34a;border-radius:999px;background:#16a34a;color:#fff;cursor:pointer}
.wwd-panel{gap:6px;margin:10px 0 14px}
.wwd-top{gap:8px 14px}
.wwd-chip{font:inherit;font-size:13px;padding:4px 12px;border:1px solid #cbd5e1;border-radius:999px;background:#fff;color:#1f4f86;cursor:pointer}
.wwd-chip:hover{border-color:#64748b}
.wwd-chip.ok{border-color:#86efac;background:#f0fdf4;color:#14532d}
.wwd-chip .wwd-code{border:0;background:none;padding:0}
.wwd-keys{display:grid;gap:4px}
.wwd-keys[hidden]{display:none}
.wwd-note{font-size:13.5px;color:#78350f;background:#fffbeb;border-left:4px solid #f59e0b;border-radius:6px;padding:6px 10px}
.wwd-note.ok{color:#14532d;background:#f0fdf4;border-left-color:#16a34a}
.wwd-small{font-size:13px;color:#6b7280;margin:10px 0 0}