:root{--blue:#e6f0ff;--primary:#0b63d1;--bg:#f4f6fb;--modal-bg: #fff}body,html,#root{height:100%;margin:0;padding:0;font-family:Inter,Arial,Helvetica,sans-serif;background:var(--bg)}.modal-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#00000047;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:1000}.modal{width:100%;height:100%;background:var(--modal-bg);border-radius:10px;box-shadow:0 8px 30px #00000026}.modal-header{padding:14px;background-color:#00cad8;color:#fff;z-index:-1;margin-bottom:25px}.modal-header span{margin-right:20px;font-size:30px}.legend{display:flex;gap:8px;align-items:center}.dot{width:10px;height:10px;border-radius:50%;display:inline-block;margin-right:6px}.dot.user{background:green}.dot.group{background:red}.modal-body{margin:auto;max-width:600px}.input-text{font-size:16px;font-weight:400}.text-input{width:100%;padding:12px;border:1px solid #ddd;margin-top:12px;box-sizing:border-box}.text{font-size:16px;margin-top:18px;font-weight:400}.top-add{display:flex;align-items:center;gap:8px;margin-top:8px}.top-add select{flex:1;padding:8px;border-radius:6px;border:1px solid #ddd}.blue-box{border:3px solid rgb(59,185,235);padding:18px 22px;min-height:50px;margin-top:20px;margin-bottom:20px}.hint{color:#666;font-size:14px}.link-btn{background:none;border:none;color:#0dc26d;margin-top:20px;cursor:pointer;text-decoration:underline}.schema-row{display:flex;gap:8px;align-items:center;margin-bottom:8px}.schema-row select{flex:1;padding:8px;border-radius:6px;border:1px solid #cfcfcf}.remove-btn{background:#fff;border:1px solid #ddd;padding:6px 8px;border-radius:6px;cursor:pointer}.seperate{display:flex;justify-content:flex-end}.modal-footer{display:flex;justify-content:flex-start;gap:8px;margin-top:20px}.primary-btn{color:#fff;background-color:#0dc26d;border:none;padding:10px 14px;border-radius:2px;cursor:pointer}.secondary-btn{background:#dddbdb;cursor:pointer;border:none;color:red;padding:10px 14px;border-radius:2px}@media(min-width:580px){.modal{padding:20px}}.app{background-color:#0000003a;width:100%;height:100%}.app-header{padding:14px;background-color:#00cad8;color:#fff;z-index:-1}.app-header span{margin-right:20px;font-size:30px}.center{display:flex;justify-content:center;padding:40px}.popup{padding:10px 16px;background-color:transparent;color:#fff;border:2px solid white;font-size:20px;cursor:pointer}