@import "https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@500;700;800&family=Schoolbell&display=swap";:root{color:#eaf1ff;background-color:#102c64;font-family:Nunito Sans,sans-serif}*{box-sizing:border-box}body{background:radial-gradient(circle at 10% 10%,#689aff42,#0000 34%),radial-gradient(circle at 90% 14%,#ff799833,#0000 28%),radial-gradient(circle at 82% 88%,#ffd04a2e,#0000 32%),radial-gradient(circle at 18% 84%,#54dfb629,#0000 30%),linear-gradient(#11397f,#0e2f6a 55%,#0a234f);min-height:100vh;margin:0}h1,h2,h3{color:#f3f7ff;letter-spacing:.02em;font-family:Schoolbell,cursive}.page{background:radial-gradient(circle at 12% 14%,#ffffff14,#0000 22%),radial-gradient(circle at 84% 80%,#ffffff12,#0000 24%),repeating-radial-gradient(circle,#ffffff08 0 1px,#0000 1px 24px);place-items:center;min-height:100svh;padding:20px;animation:22s linear infinite chalkDust;display:grid;position:relative;overflow:hidden}.page:before,.page:after{content:"";z-index:0;filter:blur(6px);border-radius:40% 60% 55% 45%;position:absolute}.page:before{background:radial-gradient(circle at 30% 40%,#61a0ff42,#0000 64%),radial-gradient(circle at 70% 60%,#ff89a42e,#0000 68%);width:380px;height:320px;animation:10s ease-in-out infinite chalkFloatA;top:-90px;left:-120px}.page:after{background:radial-gradient(circle at 40% 45%,#5dbcff3d,#0000 68%),radial-gradient(circle at 66% 55%,#ffd6612e,#0000 70%);width:420px;height:340px;animation:12s ease-in-out infinite chalkFloatB;bottom:-120px;right:-170px}.panel{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:1;background:linear-gradient(145deg,#123678a6,#0b265b94),repeating-linear-gradient(-12deg,#ffffff0a 0 3px,#0000 3px 26px);border:2px solid #a9c7ff99;border-radius:24px;width:min(980px,100%);padding:24px;position:relative;box-shadow:0 24px 56px #08143880}.panel:before,.panel:after{content:"";pointer-events:none;z-index:-1;opacity:.55;position:absolute}.panel:before{border-bottom:3px solid #ddeaff85;border-left:3px solid #ddeaff85;width:120px;height:120px;animation:8s ease-in-out infinite toolDriftA;top:22px;right:-34px;transform:rotate(45deg)}.panel:after{border:3px dashed #ffbe788c;border-radius:10px;width:150px;height:40px;animation:10s ease-in-out infinite toolDriftB;bottom:48px;left:-54px;transform:rotate(-18deg)}.login-panel{width:min(640px,100%)}.eyebrow{text-transform:uppercase;letter-spacing:.12em;color:#dce7ff;margin:0 0 8px;font-size:.72rem;font-weight:800}h1,h2,h3,p{margin-top:0}h1,h2,h3{color:#f4f8ff;text-shadow:0 1px #ffffff29,0 0 16px #98c5ff33}.sample-config{background:#0b2a60a3;border:2px dashed #a8c9ffb3;border-radius:14px;margin-top:14px;padding:12px}.sample-config pre{white-space:pre-wrap;color:#e8efff;margin:0;font-size:.88rem}.topbar{justify-content:space-between;align-items:flex-start;gap:16px;display:flex}.topbar-brand{text-align:center;flex:1}.topbar-actions{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.badge{color:#e5eeff;background:#0e3270bd;border:2px solid #a1c1ffb3;border-radius:999px;padding:7px 12px;font-size:.78rem;font-weight:700;display:inline-block}.badge.online{color:#0f2b77;background:#d8e6ff;border-color:#8fb0ff}.badge.offline{color:#8a1223;background:#ffd9e2;border-color:#f08ca7}.muted{color:#bfccf3}.role-picker{margin-top:20px}.role-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;display:grid}.role-card{text-align:left;color:#eef4ff;cursor:pointer;background:linear-gradient(145deg,#164290c7,#103274c7);border:2px solid #9ec2ff9e;border-radius:18px;padding:18px;transition:transform .14s,box-shadow .2s}.role-card:hover{transform:translateY(-2px);box-shadow:0 14px 24px #081e4e6b}.workflow{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#0a2c6694;border:2px solid #a2c2ff94;border-radius:18px;margin-top:20px;padding:18px}label{color:#e5efff;margin-bottom:12px;font-weight:800;display:block}input,textarea{color:#123163;background:#f2f8fff5;border:2px solid #9bc1ff;border-radius:12px;width:100%;margin-top:8px;padding:11px 12px;font:600 .98rem/1.4 Nunito Sans,sans-serif}textarea{resize:vertical}input:focus,textarea:focus{border-color:#6497f0;outline:3px solid #7eaeff4d}.actions{flex-wrap:wrap;gap:10px;display:flex}button{cursor:pointer;border:none;border-radius:12px;padding:10px 16px;font:800 .97rem/1 Nunito Sans,sans-serif;transition:transform .14s,opacity .2s,box-shadow .2s}button:disabled{opacity:.55;cursor:not-allowed}button:hover:enabled{transform:translateY(-1px)}.primary{color:#eef4ff;background:linear-gradient(115deg,#4e84ff,#3d62e8 45%,#8a57ff 80%,#ff6aa0 100%);box-shadow:0 10px 18px #24398466}.ghost{color:#e8efff;background:#0e3270bd;border:2px solid #a0bfff9e}.status{color:#deebff;margin-top:12px}.status.error{color:#ff9db4}.queue-list{margin:14px 0 0;padding-left:18px}.queue-list li{margin-bottom:10px}.queue-list span{color:#bfd0f5;font-size:.9rem;display:block}.modal-layer{z-index:1000;background:#0814268f;place-items:center;padding:16px;display:grid;position:fixed;inset:0}.modal{color:#1f2a52;background:linear-gradient(165deg,#fffce9,#fff6cb);border:2px solid #f6d168;border-radius:20px;width:min(560px,100%);padding:20px;animation:1.45s ease-in-out infinite pulse;box-shadow:0 18px 44px #0d1f3c66}.modal-eyebrow{color:#7b4f00}.modal-title{color:#1d2863;text-shadow:none}.modal-meta{color:#283b6f;font-weight:700}.modal-note{color:#40548c}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.015)}to{transform:scale(1)}}@keyframes chalkFloatA{0%{transform:translateY(0)translate(0)rotate(0)}50%{transform:translateY(-16px)translate(10px)rotate(4deg)}to{transform:translateY(0)translate(0)rotate(0)}}@keyframes chalkFloatB{0%{transform:translateY(0)translate(0)rotate(0)}50%{transform:translateY(14px)translate(-12px)rotate(-4deg)}to{transform:translateY(0)translate(0)rotate(0)}}@keyframes chalkDust{0%{background-position:0 0,0 0,0 0}to{background-position:60px -32px,-48px 24px,120px -64px}}@keyframes toolDriftA{0%{transform:rotate(45deg)translateY(0)}50%{transform:rotate(50deg)translateY(-8px)}to{transform:rotate(45deg)translateY(0)}}@keyframes toolDriftB{0%{transform:rotate(-18deg)translateY(0)}50%{transform:rotate(-14deg)translateY(9px)}to{transform:rotate(-18deg)translateY(0)}}@media (width<=900px){.role-grid{grid-template-columns:1fr}.topbar{flex-direction:column}}@media (width<=680px){.page{padding:12px}.panel{border-radius:16px;padding:16px}.actions{flex-direction:column}button{width:100%}.badge{text-align:center;width:100%}.panel:before,.panel:after{opacity:.3}}