:root {
  color-scheme: dark;
  --bg: #0b0d12;
  --panel: #131720;
  --panel-2: #181e29;
  --line: #293140;
  --text: #f4f6fa;
  --muted: #929db0;
  --accent: #7c8cff;
  --accent-strong: #94a0ff;
  --green: #48d39b;
  --amber: #ffbd69;
  --red: #ff6b7d;
  --radius: 18px;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 15% -10%, #1b2250 0, transparent 34%), var(--bg); color: var(--text); }
button, input, select { font: inherit; }
button { color: inherit; }
a { color: inherit; }

.topbar { max-width: 1240px; margin: 0 auto; padding: 38px 28px 24px; display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.topbar-actions { display: flex; align-items: center; gap: 16px; }
.topbar-actions form { margin: 0; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: clamp(30px, 4vw, 48px); letter-spacing: -0.04em; }
h2 { margin-bottom: 0; font-size: 25px; letter-spacing: -0.025em; }
h3 { margin-bottom: 0; }
.eyebrow { color: var(--accent-strong); font-size: 12px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; margin-bottom: 8px; }
.service-state { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 14px; padding-bottom: 7px; }
.service-state span { width: 9px; height: 9px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 5px rgb(255 189 105 / 12%); }
.service-state.online span { background: var(--green); box-shadow: 0 0 0 5px rgb(72 211 155 / 12%); }

main { max-width: 1240px; margin: 0 auto; padding: 0 28px 70px; }
.panel { background: linear-gradient(145deg, rgb(24 30 41 / 94%), rgb(17 21 29 / 96%)); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 25px 70px rgb(0 0 0 / 28%); }
.editor { padding: 28px; }
.section-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 25px; }
.form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: end; }
.field { min-width: 0; display: grid; gap: 8px; color: var(--muted); font-size: 13px; font-weight: 650; }
.field.wide { grid-column: span 2; }
.field.wide-2 { grid-column: span 2; }
.schedule-box { grid-column: 1 / -1; min-width: 0; margin: 2px 0 0; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: rgb(8 11 16 / 35%); }
.schedule-box legend { padding: 0 8px; color: var(--text); font-size: 14px; font-weight: 800; }
.schedule-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: end; }
.schedule-hint { margin: 14px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
input, select { width: 100%; min-width: 0; min-height: 46px; padding: 0 13px; color: var(--text); background: #0f131b; border: 1px solid #30394a; border-radius: 11px; outline: none; transition: border-color .18s, box-shadow .18s; }
input:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgb(124 140 255 / 15%); }
input::placeholder { color: #596477; }
.switch-field { min-height: 46px; display: flex; align-items: center; gap: 11px; color: #c8cfdb; font-size: 14px; cursor: pointer; }
.switch-field input { position: absolute; width: 1px; height: 1px; min-height: 0; opacity: 0; pointer-events: none; }
.switch { width: 38px; height: 22px; padding: 2px; border-radius: 999px; background: #394152; transition: background .2s; }
.switch::after { content: ""; display: block; width: 18px; height: 18px; border-radius: 50%; background: white; transition: transform .2s; }
.switch-field input:checked + .switch { background: var(--accent); }
.switch-field input:checked + .switch::after { transform: translateX(16px); }

.attendance-settings { margin-top: 22px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: rgb(8 11 16 / 35%); }
.attendance-settings summary { cursor: pointer; padding: 17px 18px; display: flex; justify-content: space-between; gap: 15px; font-weight: 750; list-style: none; }
.attendance-settings summary::-webkit-details-marker { display: none; }
.attendance-settings summary::after { content: "+"; font-size: 22px; color: var(--accent-strong); line-height: 16px; }
.attendance-settings[open] summary::after { content: "−"; }
.attendance-settings summary small { color: var(--muted); font-weight: 500; }
.details-body { border-top: 1px solid var(--line); padding: 20px 18px 18px; }
.attendance-enabled { margin-bottom: 8px; }
.policy-hint { color: var(--muted); font-size: 13px; line-height: 1.55; margin: 0 0 18px; }
.compact-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.compact-grid input { min-height: 42px; }
.form-actions { display: flex; justify-content: flex-end; align-items: center; gap: 16px; margin-top: 22px; }
.form-message { margin: 0 auto 0 0; color: var(--red); font-size: 14px; }
.button { min-height: 40px; border-radius: 10px; border: 1px solid transparent; padding: 0 15px; cursor: pointer; font-weight: 750; font-size: 13px; transition: transform .15s, border-color .15s, background .15s; }
.button:hover { transform: translateY(-1px); }
.button:disabled { opacity: .55; cursor: wait; transform: none; }
.button.primary { min-height: 46px; padding-inline: 22px; background: var(--accent); color: #090b10; }
.button.primary:hover { background: var(--accent-strong); }
.button.ghost { background: transparent; border-color: #3a4354; color: #cdd3de; }
.button.ghost:hover { border-color: #677288; }
.button.danger { background: transparent; border-color: rgb(255 107 125 / 35%); color: #ff91a0; }
.button.warning { background: transparent; border-color: rgb(255 189 105 / 35%); color: var(--amber); }
.button.warning:hover { border-color: rgb(255 189 105 / 70%); }
.button.success { background: rgb(72 211 155 / 12%); border-color: rgb(72 211 155 / 45%); color: var(--green); }
.button.success:hover { background: rgb(72 211 155 / 20%); border-color: rgb(72 211 155 / 75%); }
.hidden { display: none !important; }

.meetings-section { margin-top: 42px; }
.list-heading { margin-bottom: 18px; }
.meeting-count { display: grid; place-items: center; min-width: 42px; height: 32px; border-radius: 999px; color: var(--accent-strong); background: rgb(124 140 255 / 12%); border: 1px solid rgb(124 140 255 / 25%); font-weight: 800; }
.meeting-list { display: grid; gap: 13px; }
.meeting-card { padding: 20px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: center; border: 1px solid var(--line); border-radius: 15px; background: rgb(19 23 32 / 88%); }
.meeting-main { display: flex; min-width: 0; gap: 15px; }
.platform-mark { flex: 0 0 auto; width: 7px; border-radius: 99px; background: var(--accent); }
.platform-mark.mts-link { background: #ff3347; }
.platform-mark.vk-calls { background: #2489ff; }
.platform-mark.nextcloud-talk { background: #0082c9; }
.platform-mark.telemost { background: #ffcc00; }
.platform-mark.zoom { background: #5a67ff; }
.meeting-copy { min-width: 0; }
.meeting-title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.meeting-title-row h3 { font-size: 17px; }
.status-pill { border-radius: 999px; padding: 4px 8px; font-size: 10px; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); background: #242b37; }
.status-pill.live { color: var(--green); background: rgb(72 211 155 / 11%); }
.status-pill.warning { color: var(--amber); background: rgb(255 189 105 / 11%); }
.status-pill.error { color: var(--red); background: rgb(255 107 125 / 11%); }
.meeting-name { margin: 7px 0 5px; color: #c5ccd8; font-size: 13px; }
.meeting-url { display: block; max-width: 460px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 12px; text-decoration: none; }
.meeting-url:hover { color: var(--accent-strong); }
.meeting-times { margin-top: 9px; color: #8c97aa; font-size: 12px; }
.runtime-grid { display: grid; grid-template-columns: repeat(4, minmax(72px, 1fr)); gap: 8px; }
.runtime-grid div { min-height: 54px; padding: 8px 10px; border-radius: 10px; background: #0f131b; border: 1px solid #242b37; }
.runtime-grid span { display: block; color: var(--muted); font-size: 10px; margin-bottom: 4px; }
.runtime-grid strong { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-actions { display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
.card-actions .button { min-height: 35px; padding-inline: 10px; }
.runtime-note { grid-column: 1 / -1; margin: -9px 0 0; padding: 9px 11px; color: var(--amber); background: rgb(255 189 105 / 7%); border-radius: 9px; font-size: 12px; overflow-wrap: anywhere; }
.empty-state { padding: 46px 24px; text-align: center; border: 1px dashed #30394a; border-radius: 15px; color: var(--muted); }
.empty-state h3 { color: var(--text); margin-bottom: 7px; }
.empty-state p { max-width: 610px; margin: 0 auto; line-height: 1.55; }

.login-main { min-height: 100vh; max-width: none; display: grid; place-items: center; padding: 24px; }
.login-panel { width: min(100%, 430px); padding: 32px; }
.login-panel h1 { font-size: clamp(30px, 8vw, 42px); }
.login-copy { margin: 16px 0 26px; color: var(--muted); line-height: 1.55; }
.login-form { display: grid; gap: 18px; }
.login-form .button { width: 100%; margin-top: 2px; }
.login-message { min-height: 20px; }

@media (max-width: 1050px) {
  .compact-grid { grid-template-columns: repeat(3, 1fr); }
  .schedule-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .meeting-card { grid-template-columns: 1fr; }
  .card-actions { justify-content: flex-start; }
}
@media (max-width: 760px) {
  .topbar, main { padding-left: 18px; padding-right: 18px; }
  .topbar { align-items: flex-start; flex-direction: column; }
  .topbar-actions { width: 100%; justify-content: space-between; }
  .editor { padding: 20px 17px; }
  .form-grid, .compact-grid { grid-template-columns: 1fr; }
  .schedule-grid { grid-template-columns: 1fr; }
  .field.wide, .field.wide-2 { grid-column: auto; }
  .attendance-settings summary { flex-direction: column; }
  .attendance-settings summary::after { position: absolute; right: 34px; }
  .runtime-grid { grid-template-columns: repeat(2, 1fr); }
  .section-heading { align-items: flex-start; flex-wrap: wrap; }
}

.logs-dialog { width: min(980px, calc(100vw - 32px)); max-height: min(760px, calc(100vh - 32px)); padding: 0; color: var(--text); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 30px 100px rgb(0 0 0 / 55%); }
.logs-dialog::backdrop { background: rgb(3 5 8 / 75%); backdrop-filter: blur(4px); }
.logs-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 24px; border-bottom: 1px solid var(--line); }
.logs-heading .eyebrow { margin-bottom: 5px; }
.logs-content { min-height: 260px; max-height: 620px; margin: 0; padding: 20px 24px; overflow: auto; color: #cbd4e3; background: #090c12; font: 12px/1.65 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }

.captcha-dialog { width: min(560px, calc(100vw - 32px)); }
.captcha-dialog .logs-heading { align-items: flex-start; }
.captcha-dialog h2 { overflow-wrap: anywhere; }
.captcha-dialog .logs-heading .button { flex-shrink: 0; }
.captcha-form { padding: 22px 24px; }
.captcha-image { display: block; max-width: 100%; height: auto; margin: 0 auto 22px; border-radius: 10px; }
.captcha-screen { display: block; width: 100%; max-width: 520px; height: auto; aspect-ratio: 520 / 640; margin: 0 auto 18px; touch-action: none; user-select: none; -webkit-user-select: none; cursor: crosshair; }
.captcha-screen:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 3px; }
.captcha-remote-controls { min-width: 0; margin: 0 0 18px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; }
.captcha-remote-controls legend { padding-inline: 6px; color: var(--muted); font-size: 13px; }
.captcha-keys { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.captcha-keys .button { flex: 1 0 auto; min-height: 44px; }
.captcha-form .form-actions { flex-wrap: wrap; }
.captcha-feedback { flex: 1 1 220px; color: var(--muted); line-height: 1.5; overflow-wrap: anywhere; }
.captcha-feedback.error { color: var(--red); }
@media (max-width: 480px) {
  .captcha-form, .captcha-dialog .logs-heading { padding: 18px; }
  .captcha-form .form-actions .button { width: 100%; }
}

.manager-nav { display: flex; gap: 10px; margin-bottom: 24px; }
.manager-nav a { flex: 1; display: flex; justify-content: center; align-items: center; min-height: 48px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; text-align: center; text-decoration: none; color: var(--muted); font-weight: 750; }
.manager-nav a[aria-current="page"] { background: rgb(124 140 255 / 14%); border-color: var(--accent); color: var(--text); }
a:focus-visible, button:focus-visible, summary:focus-visible, .account-card:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 4px; }
.switch-field:focus-within .switch { outline: 2px solid var(--accent-strong); outline-offset: 3px; }
a.button { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.assignment-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; color: var(--muted); font-size: 13px; }
.account-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; margin-top: 14px; }
.account-choice { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; cursor: pointer; overflow-wrap: anywhere; }
.account-choice input { width: 18px; height: 18px; min-height: 18px; flex: 0 0 auto; accent-color: var(--accent); }
.profile-editors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.profile-editor { display: grid; align-content: start; gap: 12px; min-width: 0; padding: 15px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
.profile-editor .schedule-hint { margin: 0; }
.accounts-spoiler { grid-column: 1 / -1; min-width: 0; }
.accounts-spoiler > summary { cursor: pointer; padding-block: 10px; font-size: 14px; font-weight: 700; }
.accounts-spoiler[open] > summary { margin-bottom: 12px; }
.account-manager-link, .ready-link { display: inline-block; margin-top: 12px; color: var(--accent-strong); font-size: 13px; line-height: 1.5; }
.participant-list { grid-column: 1 / -1; display: grid; gap: 12px; min-width: 0; }
.participant-row { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--line); background: rgb(8 11 16 / 40%); border-radius: 12px; min-width: 0; }
.participant-row h4 { margin: 0; font-size: 15px; overflow-wrap: anywhere; }
.participant-name { margin: 0; color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.empty-participants { grid-column: 1 / -1; margin: 0; }
.participant-row .runtime-note { margin: 0; }
.participant-row .card-actions { justify-content: flex-start; }
.action-message { grid-column: 1 / -1; overflow-wrap: anywhere; }
.action-message:empty, .authorization-error:empty { display: none; }
.account-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; padding: 20px; border: 1px solid var(--line); border-radius: 15px; background: rgb(19 23 32 / 88%); min-width: 0; scroll-margin-top: 20px; }
.account-card.highlighted { border-color: var(--accent); }
.account-card h3 { overflow-wrap: anywhere; }
.account-usage { grid-column: 1 / -1; margin: 0; overflow-wrap: anywhere; }
.account-profile-list { grid-column: 1 / -1; display: grid; gap: 12px; min-width: 0; }
.account-profile { display: grid; gap: 14px; min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: rgb(8 11 16 / 40%); }
.account-profile h4 { margin: 0; font-size: 14px; }
.profile-display-name { margin: 8px 0; overflow-wrap: anywhere; }
.account-profile .schedule-hint { margin: 0; }
.account-profile .authorization-list:empty { display: none; }
.authorization-list { grid-column: 1 / -1; display: grid; gap: 12px; min-width: 0; }
.authorization-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px; background: #0f131b; border: 1px solid var(--line); border-radius: 12px; min-width: 0; }
.authorization-copy { min-width: 0; }
.authorization-copy .meeting-url { margin-bottom: 10px; }
.authorization-copy .status-pill { display: inline-block; }
.authorization-error { margin-top: 10px; font-size: 12px; overflow-wrap: anywhere; }
.authorization-row .card-actions { flex-shrink: 0; max-width: 55%; }
#account-action-message:not(:empty) { margin-bottom: 18px; }
@media (max-width: 1050px) {
  .meeting-card { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .manager-nav { gap: 8px; }
  .manager-nav a { font-size: 13px; padding-inline: 8px; }
  .account-card { grid-template-columns: minmax(0, 1fr); padding: 17px; }
  .profile-editors { grid-template-columns: minmax(0, 1fr); }
  .account-profile { padding: 12px; }
  .authorization-row { flex-direction: column; align-items: stretch; }
  .authorization-row .card-actions { max-width: none; justify-content: flex-start; }
  .participant-row { padding: 12px; }
  .meeting-card { padding: 16px; }
  .meeting-card > .card-actions .button, .participant-row .button, .account-card .button { min-height: 42px; }
  .form-actions { flex-wrap: wrap; }
  .form-message { flex-basis: 100%; }
}