#subscriptionPanel{display:grid;gap:18px;align-content:start}.subscription-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.subscription-heading h3{margin:0}.subscription-heading p{margin:5px 0 0;color:#625b70;font-size:13px}.subscription-state{flex:none;padding:6px 10px;border-radius:999px;background:#e5f8ef;color:#17684a;font-size:11px;font-weight:850}.subscription-overview{display:grid;grid-template-columns:1fr 1fr;gap:10px}.subscription-overview>span{display:grid;gap:5px;padding:15px;border:1px solid #e2dbea;border-radius:15px;background:#faf8fd}.subscription-overview small{color:#61596e;font-weight:700}.subscription-overview b{font-size:18px;color:#392260}.subscription-members{display:grid;gap:10px}.subscription-member{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px;border:1px solid #e1d9ea;border-radius:16px;background:#fff}.subscription-member>div:first-child{display:flex;align-items:center;gap:11px;min-width:0}.subscription-member>div:first-child>span:last-child{display:grid;gap:3px;min-width:0}.subscription-member small{color:#5f586b;font-size:11px}.subscription-avatar{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:12px;background:#eee7ff;color:#6037cb;font-weight:900}.subscription-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:7px}.subscription-cancel{color:#9f263d}.subscription-member.is-ending{background:#fbf9fd}.subscription-warning{display:grid;gap:4px;padding:14px 15px;border:1px solid #e2ad59;border-radius:14px;background:#fff8e8;color:#563a0d}.subscription-warning span{font-size:12px;line-height:1.5}.subscription-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:3px}.subscription-footer small{max-width:280px;color:#5f586b;line-height:1.45}.subscription-live{min-height:18px;color:#5c5369;font-size:12px}.subscription-live.success{color:#17684a}.subscription-live.error{color:#a3263d}.subscription-empty{display:flex;align-items:center;flex-wrap:wrap;gap:10px}.subscription-empty p{flex-basis:100%;color:#5f586b}.subscription-loading{color:#5f586b}.subscription-dialog .modal-box{max-width:470px;border:1px solid #ded5e9;border-radius:22px}.subscription-dialog h3{font-size:22px}.subscription-dialog p{color:#554e61;line-height:1.6}@media(max-width:760px){.subscription-member{align-items:flex-start;flex-direction:column}.subscription-actions{width:100%;justify-content:flex-start}.subscription-footer{align-items:flex-start;flex-direction:column}}@media(max-width:600px){.subscription-overview{grid-template-columns:1fr}.subscription-heading{align-items:flex-start;flex-direction:column}.subscription-actions .btn,.subscription-footer .btn{width:100%}.subscription-dialog .modal-box{width:calc(100% - 24px);padding:20px}.subscription-dialog .modal-action{display:grid;grid-template-columns:1fr}}
.subscription-dialog[open]{display:grid;place-items:center;width:100%;max-width:none;height:100%;max-height:none;padding:20px;border:0;background:transparent;overflow:auto}.subscription-dialog::backdrop{background:#211b3270;backdrop-filter:blur(2px)}.subscription-dialog .modal-box{position:relative;z-index:1;width:min(470px,100%);padding:26px;background:#fff;box-shadow:0 18px 50px #211b3224}.subscription-dialog .modal-backdrop{position:fixed;inset:0;z-index:0}.subscription-dialog .modal-backdrop button{display:none}@media(max-width:600px){.subscription-dialog .modal-box{width:100%;padding:20px}}

.subscription-add{display:grid;gap:8px;padding:14px;border:1px solid #e1d9ea;border-radius:16px;background:#faf8fd}.subscription-add>label{font-size:12px;font-weight:850;color:#392260}.subscription-add>div{display:flex;gap:8px}.subscription-add select{min-width:0;flex:1;padding:10px 12px;border:1px solid #d9cfea;border-radius:11px;background:#fff;color:#2c2440}.subscription-add small{color:#6c6478;line-height:1.45}@media(max-width:600px){.subscription-add>div{align-items:stretch;flex-direction:column}.subscription-add .btn{width:100%}}