dialog.form-completion {
  box-sizing: border-box; position: fixed; inset: 0; margin: 0; width: 100%; max-width: none;
  height: 100%; max-height: none; border: 0; padding: 32px 24px;
  background: #f3faf7; color: #163831; text-align: center;
  font-family: inherit; overflow-y: auto;
}
dialog.form-completion[open] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
.form-completion::backdrop { background: #163831; }
.form-completion .completion-mark { display: grid; place-items: center; flex-shrink: 0; width: 80px; height: 80px; border-radius: 50%; background: #007c67; color: #fff; font-size: 44px; }
.form-completion :is(h1,p) { margin: 0; max-width: 600px; color: #163831; }
.form-completion h1 { font-size: 32px; line-height: 1.3; }
.form-completion .completion-message { font-size: 19px; line-height: 1.6; }
.form-completion .completion-brand { font-size: 15px; font-weight: 700; }
.form-completion .completion-next { color: #48635b; font-size: 16px; line-height: 1.5; }
.form-completion .completion-guide { display: inline-block; padding: 14px 22px; border-radius: 6px; background: #007c67; color: #fff; font-size: 17px; font-weight: 700; text-decoration: none; }
.form-completion .completion-guide:is(:hover,:focus-visible) { background: #005e4f; outline: 3px solid #e7ae28; outline-offset: 4px; }
@media(max-height:500px) { dialog.form-completion[open] { justify-content: flex-start; } }
dialog.form-completion { border-top:8px solid #007c67; background:#f6fafb; }
dialog.form-completion::after { content:''; position:fixed; bottom:0; left:0; right:0; height:12px; background:linear-gradient(90deg,#007c67 0 35%,#efba43 35% 68%,#3686ab 68%); }
.form-completion .completion-art { position:relative; flex-shrink:0; width:112px; height:112px; display:grid; place-items:center; background:#ffe5a1; border-radius:8px; box-shadow:-10px 10px 0 #ccebe3; transform:rotate(-5deg); margin-bottom:12px; animation:completion-arrive .5s ease-out; }
.form-completion .completion-art svg { width:68px; height:68px; color:#125a4c; stroke-width:1.6; }
.form-completion .completion-art .completion-mark { position:absolute; right:-12px; bottom:-8px; width:38px; height:38px; font-size:24px; border:3px solid #f6fafb; }
.form-completion .completion-brand { font-weight:800; color:#00715e; }
.form-completion .completion-welcome { color:#48635b; line-height:1.65; font-size:17px; max-width:540px; }
.form-completion h1 { font-size:36px; }
.form-completion .completion-next { font-size:14px; margin-top:8px; }
.form-completion .completion-guide { box-shadow:0 4px 0 #004d40; }
@keyframes completion-arrive { from {transform:translateY(12px) rotate(0);opacity:0} to {transform:translateY(0) rotate(-5deg);opacity:1} }
@media(max-width:450px) { .form-completion h1 {font-size:29px;} dialog.form-completion[open] {gap:14px;} }
@media(prefers-reduced-motion:reduce) { .form-completion .completion-art {animation:none;} }
.form-completion .completion-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; width:min(850px,100%); padding:0; margin:0; background:transparent; }
.form-completion .completion-actions a { display:flex; align-items:center; justify-content:center; gap:10px; padding:16px; min-height:76px; border:1px solid #007c67; border-radius:6px; font-size:16px; line-height:1.4; font-weight:700; text-decoration:none; box-shadow:none; }
.form-completion .completion-actions a svg { width:24px; height:24px; flex:0 0 auto; }
.form-completion .completion-teacher { color:#174c64; background:#e5f2fa; border-color:#3686ab!important; }
.form-completion .completion-assistant { color:#604408; background:#fff0c4; border-color:#bf8b1d!important; }
.form-completion .completion-actions a:is(:hover,:focus-visible) { outline:3px solid #e7ae28; outline-offset:3px; }
@media(max-width:650px) { dialog.form-completion[open] { justify-content:flex-start; padding:28px 20px 40px; } .form-completion .completion-actions { grid-template-columns:1fr; max-width:420px; } .form-completion .completion-actions a { min-height:58px; } }