.invite-panel { color: #dce9f4; border: 1px solid #244854; border-radius: 14px; padding: 16px; background: linear-gradient(145deg, #102631, #09131e); }
.invite-panel h3, .invite-panel h4, .invite-panel p { margin: 0; }
.invite-head, .invite-card-head, .invite-list-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.invite-head h3 { font-size: 17px; color: #bcf6fc; }
.invite-head p, .invite-note, .invite-meta, .invite-created p { color: #9bafc2; font-size: 12px; line-height: 1.55; margin-top: 7px; }
.invite-panel button { min-height: 44px; padding: 9px 12px; border: 1px solid #397584; border-radius: 8px; color: #bef8fc; background: #163740; font: inherit; font-size: 12px; cursor: pointer; }
.invite-panel button:hover:not(:disabled) { background: #20525b; }
.invite-panel button:disabled { opacity: .5; cursor: default; }
.invite-panel button:focus-visible, .invite-panel input:focus-visible, .invite-panel select:focus-visible { outline: 2px solid #00f3ff; outline-offset: 3px; }
.invite-body { display: grid; gap: 16px; margin-top: 14px; }
.invite-form, .invite-created { background: #091824; border: 1px solid #2b465a; padding: 14px; border-radius: 10px; }
.invite-form h4 { margin-bottom: 12px; font-size: 14px; }
.invite-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.invite-form fieldset > button, .invite-created > button { margin-top: 12px; }
.invite-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.invite-field { display: grid; gap: 6px; min-width: 0; font-size: 12px; color: #b6c9d9; }
.invite-field input, .invite-field select { min-width: 0; width: 100%; box-sizing: border-box; min-height: 44px; padding: 10px; border-radius: 7px; border: 1px solid #36516a; background: #06131d; color: #ecf7ff; font: inherit; font-size: 16px; user-select: text; -webkit-user-select: text; }
.invite-code { margin-top: 8px; padding: 9px; color: #b4ffda; background: #07231f; border-radius: 7px; font-family: var(--mono, monospace); overflow-wrap: anywhere; user-select: text; -webkit-user-select: text; }
.invite-created { border-color: #388b71; }
.invite-created > strong { color: #acffdc; }
.invite-list { display: grid; gap: 12px; }
.invite-card { padding: 14px; border: 1px solid #304456; background: #0b1927; border-radius: 10px; }
.invite-card-head strong { overflow-wrap: anywhere; font-size: 14px; }
.invite-status { border-radius: 6px; padding: 4px 7px; font-size: 11px; background: #233342; color: #bccad4; white-space: nowrap; }
.invite-status.active { color: #b1ffcf; background: #183d30; }
.invite-status.expired, .invite-status.exhausted { color: #ffe2a3; background: #443c24; }
.invite-stats { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 10px; margin: 12px 0; }
.invite-stats dt { color: #93aabf; font-size: 11px; }
.invite-stats dd { margin: 4px 0 0; font-size: 13px; color: #ecf6ff; }
.invite-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.invite-panel .invite-disable { color: #ffc4cd; border-color: #734452; background: #34202c; }
.invite-error { color: #ffc0ce; background: #3a2030; padding: 12px; border-radius: 8px; font-size: 13px; line-height: 1.5; }
@media (max-width: 540px) { .invite-grid { grid-template-columns: 1fr; } .invite-panel { padding: 12px; } .invite-head { flex-wrap: wrap; } .invite-stats { grid-template-columns: 1fr 1fr; } .invite-stats > div:last-child { grid-column: 1 / -1; } }