.learncodes-codes-wrap { border:1px solid #e5e7eb; padding:24px; border-radius:12px; background:#fff; }
.learncodes-codes-row { display:flex; gap:12px; flex-wrap:wrap; margin-top:8px; }
.learncodes-codes-row input { flex:1 1 260px; min-height:44px; padding:10px 14px; border:1px solid #d0d5dd; border-radius:8px; }
.learncodes-codes-row button, .learncodes-course-code-button { min-height:44px; display:inline-flex; align-items:center; justify-content:center; padding:10px 16px; border-radius:8px; background:#0f766e; color:#fff; text-decoration:none; border:none; }
.learncodes-codes-message { margin-top:12px; }
.learncodes-codes-message.success { color:#0a7a35; }
.learncodes-codes-message.error { color:#b42318; }
.learncodes-codes-history { margin-top:24px; }
.learncodes-codes-history ul { list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.learncodes-codes-history li { border:1px solid #e5e7eb; padding:14px; border-radius:10px; }
.learncodes-course-tag { display:inline-block; margin:6px 6px 0 0; padding:4px 10px; border-radius:999px; background:#f1f5f9; }
.learncodes-course-code-box { margin:12px 0; }
.learncodes-course-code-button { 
    cursor:pointer;
    width: 100%;
    padding: 20px 10px;
}
.learncodes-course-code-button svg{
    width: 18px;
    height: 18px;
    margin: 0 8px;
}
.learncodes-modal[hidden] { display:none; }
.learncodes-modal { position:fixed; inset:0; z-index:100000; }
.learncodes-modal__backdrop { position:absolute; inset:0; background:rgba(0,0,0,.45); }
.learncodes-modal__dialog { position:relative; max-width:720px; margin:6vh auto; background:#fff; padding:24px; border-radius:12px; box-shadow:0 20px 40px rgba(0,0,0,.2); }
.learncodes-modal__close { position:absolute; top:10px; right:12px; background:none; border:none; font-size:24px; cursor:pointer; }
.learncodes-modal__title { margin:0 0 16px; font-size:22px; }
.learncodes-modal-notice { border:1px solid #f3d9a6; background:#fff8e8; color:#7a5c1f; padding:12px 14px; border-radius:8px; }
.learncodes-modal-form label { display:block; margin-bottom:8px; }
.learncodes-modal-form__row { display:flex; gap:12px; flex-wrap:wrap; }
.learncodes-modal-form__row input { flex:1 1 260px; min-height:44px; padding:10px 14px; border:1px solid #d0d5dd; border-radius:8px; }
.learncodes-modal-form__row button { min-height:44px; display:inline-flex; align-items:center; justify-content:center; padding:10px 16px; border-radius:8px; background:#0f766e; color:#fff; border:none; cursor:pointer; }
.learncodes-modal-form__message { margin-top:12px; }
.learncodes-modal-form__message.success { color:#0a7a35; }
.learncodes-modal-form__message.error { color:#b42318; }