:root {
      --bg: #070a0b;
      --panel: #101515;
      --line: rgba(36, 200, 255, .24);
      --text: #fff8ec;
      --muted: #b89f8c;
      --orange: #24c8ff;
      --orange-2: #ffb14a;
      --ok: #35d07f;
      --danger: #ff4d5f;
    }
    * { box-sizing: border-box; }
    body {
      margin: 0;
      min-height: 100vh;
      background:
        radial-gradient(circle at 15% 0%, rgba(36,200,255,.18), transparent 32rem),
        radial-gradient(circle at 92% 12%, rgba(34,211,238,.09), transparent 30rem),
        var(--bg);
      color: var(--text);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }
    .wrap { width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 42px 0 64px; }
    .top { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-bottom: 20px; }
    .brand { display: flex; align-items: center; gap: 14px; font-size: clamp(1.6rem, 4vw, 2.7rem); font-weight: 950; }
    .brand-icon { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(145deg, var(--orange), #e8fbff); color: #150901; box-shadow: 0 0 36px rgba(36,200,255,.28); }
    .subtitle { margin-top: 6px; color: var(--muted); font-weight: 750; }
    .card {
      background: linear-gradient(180deg, rgba(20,27,27,.94), rgba(8,13,13,.96));
      border: 1px solid var(--line);
      border-radius: 18px;
      overflow: hidden;
      box-shadow: 0 24px 70px rgba(0,0,0,.32);
    }
    .card-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px; border-bottom: 1px solid rgba(36,200,255,.16); }
    .card-head h1, .card-head h2 { margin: 0; font-size: 1rem; letter-spacing: .12em; text-transform: uppercase; color: #ffe4c0; }
    .card-body { padding: 20px; }
    .fields { display: grid; gap: 15px; }
    .portal-grid { display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 18px; align-items: start; }
    .booking-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 360px;
      gap: 18px;
      align-items: start;
    }
    .booking-head-copy {
      margin: 8px 0 0;
      color: var(--muted);
      font-size: .9rem;
      font-weight: 750;
      letter-spacing: 0;
      text-transform: none;
    }
    .booking-date-field {
      display: grid;
      grid-template-columns: minmax(280px, 360px) auto;
      align-items: center;
      gap: 8px;
    }
    .booking-date-toolbar {
      display: grid;
      gap: 10px;
      width: 100%;
    }
    .booking-date-nav {
      width: 100%;
      display: grid;
      grid-template-columns: 1fr 1.35fr 1fr;
      align-items: center;
      gap: 8px;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
    }
    .booking-date-nav .button-small {
      width: 100%;
      min-height: 40px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      border: 1px solid rgba(36,200,255,.16);
      border-radius: 10px;
      background: rgba(0,0,0,.22);
      color: #ffe4c0;
      font-size: .86rem;
      font-weight: 950;
      text-decoration: none;
      box-shadow: none;
      transition: transform .16s ease, border-color .16s ease, background .16s ease, color .16s ease;
    }
    .booking-date-nav .button-small:hover {
      transform: translateY(-1px);
      border-color: rgba(36,200,255,.42);
      background: linear-gradient(135deg, rgba(36,200,255,.18), rgba(255,188,89,.08));
      color: #fff6e8;
    }
    .booking-date-nav .today {
      color: #170901;
      background: linear-gradient(135deg, var(--orange), var(--orange-2));
      border-color: rgba(255,198,142,.34);
    }
    .booking-date-form {
      display: grid;
      gap: 8px;
      margin-bottom: 18px;
    }
    .booking-show-field {
      display: grid;
      gap: 8px;
      margin-bottom: 18px;
      padding: 14px;
      border: 1px solid rgba(36,200,255,.16);
      border-radius: 14px;
      background: rgba(0,0,0,.18);
    }
    .booking-merge-toggle {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 18px;
      padding: 12px 14px;
      border: 1px solid rgba(36,200,255,.14);
      border-radius: 14px;
      background: rgba(0,0,0,.16);
    }
    .booking-merge-toggle strong {
      display: block;
      color: var(--text);
      font-size: .94rem;
    }
    .booking-merge-toggle span {
      display: block;
      margin-top: 2px;
      color: var(--muted);
      font-size: .8rem;
      font-weight: 750;
    }
    .merged-booking-list {
      display: none;
      gap: 10px;
      margin-bottom: 18px;
    }
    .bookings-merged .slot-grid {
      display: none;
    }
    .bookings-merged .merged-booking-list {
      display: grid;
    }
    .merged-booking-card {
      display: grid;
      grid-template-columns: minmax(100px, auto) minmax(0, 1fr);
      gap: 14px;
      align-items: start;
      padding: 14px;
      border: 1px solid rgba(36,200,255,.16);
      border-radius: 14px;
      background: linear-gradient(135deg, rgba(36,200,255,.11), rgba(34,211,238,.035)), rgba(0,0,0,.2);
    }
    .merged-booking-card.mine {
      border-color: rgba(36,200,255,.36);
    }
    .merged-booking-card .booking-list-time {
      padding: 8px 10px;
      border: 1px solid rgba(36,200,255,.18);
      border-radius: 10px;
      background: rgba(36,200,255,.08);
    }
    .merged-booking-main {
      min-width: 0;
      display: grid;
      gap: 7px;
    }
    .merged-booking-titles {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }
    .merged-booking-titles span {
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      padding: 5px 8px;
      border: 1px solid rgba(36,200,255,.18);
      border-radius: 999px;
      color: #ffe4c0;
      background: rgba(36,200,255,.09);
      font-size: .78rem;
      font-weight: 900;
    }
    .booking-date-field input {
      width: 100%;
      max-width: none;
    }
    .booking-date-field button,
    .slot-action button {
      border: 0;
      border-radius: 11px;
      padding: 10px 12px;
      background: linear-gradient(135deg, var(--orange), var(--orange-2));
      color: #170901;
      font-weight: 950;
    }
    .booking-date-field button {
      min-width: 74px;
      white-space: nowrap;
    }
    .booking-day-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      margin: 8px 0 16px;
      padding: 14px;
      border: 1px solid rgba(36,200,255,.16);
      border-radius: 14px;
      background: rgba(0,0,0,.2);
    }
    .booking-day-title span {
      display: block;
      color: var(--muted);
      font-weight: 850;
      text-transform: uppercase;
      letter-spacing: .08em;
      font-size: .75rem;
    }
    .booking-day-title strong {
      display: block;
      margin-top: 3px;
      color: var(--text);
      font-size: 1.3rem;
      line-height: 1.1;
    }
    .slot-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: 12px;
    }
    .slot-card {
      min-height: 116px;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 12px;
      align-items: start;
      padding: 14px;
      border: 1px solid rgba(36,200,255,.16);
      border-radius: 14px;
      background: rgba(0,0,0,.22);
      position: relative;
      overflow: hidden;
    }
    .slot-card::after {
      content: "";
      position: absolute;
      inset: auto 12px 0;
      height: 2px;
      border-radius: 999px 999px 0 0;
      background: rgba(255,255,255,.12);
    }
    .slot-card.open::after { background: linear-gradient(90deg, var(--orange), var(--orange-2)); }
    .slot-card.booked::after { background: linear-gradient(90deg, #35d07f, #20c7e6); }
    .slot-card.mine {
      border-color: rgba(36,200,255,.42);
      background: linear-gradient(135deg, rgba(36,200,255,.14), rgba(34,211,238,.06));
    }
    .slot-card.past {
      opacity: .52;
    }
    .slot-time {
      min-width: 58px;
      padding: 8px 9px;
      border: 1px solid rgba(36,200,255,.18);
      border-radius: 10px;
      color: #ffd79b;
      background: rgba(36,200,255,.08);
      font-weight: 950;
      text-align: center;
    }
    .slot-main {
      min-width: 0;
      display: grid;
      gap: 5px;
    }
    .slot-main strong {
      color: var(--text);
      font-size: .98rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .slot-main span {
      color: var(--muted);
      font-size: .84rem;
      font-weight: 750;
    }
    .slot-action {
      grid-column: 1 / -1;
      justify-self: end;
      margin-top: 6px;
    }
    .slot-action button.danger,
    .button-small.danger {
      background: rgba(255,77,95,.12);
      border: 1px solid rgba(255,77,95,.32);
      color: #ffd3d8;
    }
    .booking-side {
      display: grid;
      gap: 18px;
    }
    .booking-list {
      display: grid;
      gap: 12px;
    }
    .booking-list-item {
      display: grid;
      gap: 8px;
      padding: 14px;
      border: 1px solid rgba(36,200,255,.15);
      border-radius: 14px;
      background: rgba(0,0,0,.22);
    }
    .booking-list-item.mine {
      background: linear-gradient(135deg, rgba(36,200,255,.12), rgba(0,0,0,.22));
    }
    .booking-list-time {
      color: #ffd79b;
      font-size: .78rem;
      font-weight: 950;
      letter-spacing: .08em;
      text-transform: uppercase;
    }
    .booking-list-title {
      color: var(--text);
      font-size: 1rem;
      font-weight: 950;
      line-height: 1.25;
    }
    .booking-list-dj {
      width: fit-content;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      color: #d9fbff;
      font-size: .82rem;
      font-weight: 900;
      text-decoration: none;
    }
    .booking-list-dj:hover {
      color: var(--orange-2);
      text-decoration: none;
    }
    .row { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; margin: 0; }
    .row > * { width: auto; max-width: none; padding: 0; }
    label { display: block; color: var(--muted); font-weight: 850; margin: 0 0 8px; font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; }
    input {
      width: 100%;
      border: 1px solid rgba(36,200,255,.20);
      background: rgba(0,0,0,.30);
      color: var(--text);
      border-radius: 12px;
      padding: 13px 14px;
      font: inherit;
      outline: none;
    }
    input:focus { border-color: rgba(36,200,255,.72); box-shadow: 0 0 0 4px rgba(36,200,255,.12); }
    input[type="file"] {
      padding: 11px 12px;
      cursor: pointer;
    }
    input[type="file"]::file-selector-button {
      margin-right: 12px;
      border: 0;
      border-radius: 10px;
      padding: 9px 12px;
      background: linear-gradient(135deg, var(--orange), var(--orange-2));
      color: #160900;
      font-weight: 950;
      cursor: pointer;
    }
    .upload-note {
      margin-top: 7px;
      color: var(--muted);
      font-size: .82rem;
      font-weight: 750;
      line-height: 1.45;
    }
    .avatar-gallery {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
      gap: 12px;
      margin-top: 12px;
    }
    .avatar-library {
      margin-top: 22px;
      padding-top: 20px;
      border-top: 1px solid rgba(36,200,255,.14);
    }
    .avatar-tile {
      display: grid;
      gap: 9px;
      padding: 10px;
      border: 1px solid rgba(36,200,255,.18);
      border-radius: 14px;
      background: rgba(0,0,0,.22);
    }
    .avatar-tile.active {
      border-color: rgba(36,200,255,.76);
      box-shadow: 0 0 0 3px rgba(36,200,255,.13);
    }
    .avatar-preview {
      width: 100%;
      aspect-ratio: 1;
      border-radius: 12px;
      object-fit: cover;
      background: linear-gradient(145deg, #e8fbff, #24c8ff 54%, #7a35ff);
    }
    .avatar-actions {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 7px;
    }
    .avatar-actions form { margin: 0; }
    .avatar-actions button {
      width: 100%;
      min-height: 34px;
      padding: 7px 9px;
      border-radius: 10px;
      box-shadow: none;
      font-size: .82rem;
    }
    .avatar-actions .delete-avatar {
      width: 38px;
      background: rgba(255,77,95,.12);
      border: 1px solid rgba(255,77,95,.3);
      color: #d9e1ff;
    }
    .avatar-actions .current-avatar {
      background: rgba(53,208,127,.13);
      border: 1px solid rgba(53,208,127,.35);
      color: #c9ffe0;
      cursor: default;
    }
    .bio-editor {
      border: 1px solid rgba(36,200,255,.18);
      border-radius: 16px;
      overflow: hidden;
      background:
        radial-gradient(circle at 12% 0%, rgba(36,200,255,.12), transparent 18rem),
        rgba(0,0,0,.18);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
    }
    .bio-toolbar {
      display: grid;
      grid-template-columns: auto 1fr auto;
      gap: 10px;
      align-items: center;
      padding: 10px;
      border-bottom: 1px solid rgba(36,200,255,.13);
      background: rgba(255,255,255,.032);
    }
    .bio-toolbar-group {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      align-items: center;
    }
    .bio-toolbar select {
      min-height: 36px;
      border: 1px solid rgba(255,255,255,.1);
      border-radius: 10px;
      padding: 0 34px 0 10px;
      color: var(--text);
      background-color: rgba(0,0,0,.2);
      font-weight: 850;
      outline: 0;
    }
    .bio-toolbar button {
      width: 36px;
      height: 34px;
      border-radius: 10px;
      border: 1px solid rgba(255,255,255,.1);
      background: rgba(255,255,255,.055);
      color: var(--text);
      display: grid;
      place-items: center;
      padding: 0;
      box-shadow: none;
      transition: transform .16s ease, border-color .16s ease, color .16s ease, background .16s ease;
    }
    .bio-toolbar button:hover,
    .bio-toolbar button.active {
      background: rgba(36,200,255,.12);
      border-color: rgba(255, 153, 38, .55);
      color: var(--gold);
    }
    .bio-toolbar button:hover {
      transform: translateY(-1px);
    }
    .bio-canvas {
      min-height: 260px;
      max-height: 520px;
      overflow: auto;
      padding: 18px;
      outline: 0;
      color: var(--text);
      line-height: 1.7;
      font-size: 1rem;
    }
    .bio-canvas:empty::before {
      content: attr(data-placeholder);
      color: var(--muted);
    }
    .bio-canvas h2,
    .bio-canvas h3 {
      margin: .2rem 0 .55rem;
      color: #fff4e8;
      line-height: 1.15;
    }
    .bio-canvas h2 { font-size: 1.45rem; }
    .bio-canvas h3 { font-size: 1.16rem; }
    .bio-canvas p {
      margin: 0 0 .85rem;
    }
    .bio-canvas blockquote {
      margin: .8rem 0;
      padding: .7rem .9rem;
      border-left: 3px solid var(--orange);
      border-radius: 0 12px 12px 0;
      color: #d9e1ff;
      background: rgba(36,200,255,.09);
      font-weight: 850;
    }
    .bio-canvas ul,
    .bio-canvas ol {
      margin: .65rem 0 .85rem 1.35rem;
      padding: 0;
    }
    .bio-canvas a {
      color: var(--gold);
      font-weight: 900;
    }
    .bio-editor-foot {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 9px 12px;
      border-top: 1px solid rgba(36,200,255,.12);
      color: var(--muted);
      background: rgba(0,0,0,.18);
      font-size: .78rem;
      font-weight: 850;
    }
    .bio-editor-foot strong {
      color: #ffe2bc;
    }
    button {
      border: 0;
      border-radius: 12px;
      background: linear-gradient(135deg, var(--orange), var(--orange-2));
      color: #160900;
      font-weight: 950;
      padding: 12px 16px;
      cursor: pointer;
      box-shadow: 0 12px 28px rgba(36,200,255,.20);
    }
    button.secondary { background: #202829; color: var(--text); border: 1px solid rgba(255,255,255,.08); box-shadow: none; }
    .flash { margin-bottom: 16px; padding: 13px 15px; border-radius: 14px; font-weight: 850; border: 1px solid rgba(255,255,255,.08); }
    .flash.ok { background: rgba(53,208,127,.12); color: #d8ffe8; }
    .flash.bad { background: rgba(255,77,95,.12); color: #d9e1ff; }
    .login:not(.brand-login) { max-width: 430px; margin: 12vh auto; }
    .profile-head {
      display: grid;
      grid-template-columns: 96px 1fr;
      gap: 18px;
      align-items: center;
      margin-bottom: 20px;
      padding: 14px;
      border: 1px solid rgba(36,200,255,.14);
      border-radius: 16px;
      background: linear-gradient(135deg, rgba(36,200,255,.08), rgba(255,255,255,.025));
    }
    .avatar { width: 96px; height: 96px; border-radius: 50%; border: 3px solid var(--orange); background: linear-gradient(145deg, #e8fbff, #24c8ff 54%, #7a35ff); overflow: hidden; display: grid; place-items: center; color: #160900; font-size: 1.8rem; box-shadow: 0 16px 38px rgba(36,200,255,.22); }
    .avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .profile-head .name {
      color: var(--text);
      font-size: 1.65rem;
      font-weight: 950;
      line-height: 1.05;
      text-shadow: 0 2px 20px rgba(36,200,255,.18);
    }
    .profile-head .meta {
      color: #d8c7b8;
      font-weight: 850;
      margin-top: 7px;
    }
    .profile-hero {
      position: relative;
      overflow: hidden;
      border-radius: 22px;
      padding: clamp(22px, 4vw, 34px);
      margin-bottom: 18px;
      border: 1px solid rgba(36,200,255,.28);
      background:
        linear-gradient(135deg, rgba(36,200,255,.28), rgba(12,18,18,.86) 44%, rgba(20,45,50,.78)),
        radial-gradient(circle at 88% 10%, rgba(34,211,238,.18), transparent 22rem);
      box-shadow: 0 26px 76px rgba(0,0,0,.34);
    }
    .profile-hero::after {
      content: "";
      position: absolute;
      inset: auto 24px 0 24px;
      height: 3px;
      border-radius: 999px 999px 0 0;
      background: linear-gradient(90deg, var(--orange), #e8fbff, #22d3ee);
      opacity: .9;
    }
    .profile-identity { position: relative; display: grid; grid-template-columns: 124px 1fr; gap: 22px; align-items: center; z-index: 1; }
    .profile-hero .avatar { width: 124px; height: 124px; }
    .eyebrow { display: inline-flex; align-items: center; gap: 8px; color: #ffe1b7; font-weight: 950; font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 10px; }
    .profile-title { font-size: clamp(2rem, 5vw, 4rem); line-height: 1; font-weight: 1000; margin: 0; }
    .show-title { color: var(--orange-2); font-size: clamp(1.05rem, 2vw, 1.35rem); font-weight: 950; margin-top: 10px; }
    .profile-line { color: #d9c7b7; font-size: 1rem; line-height: 1.55; font-weight: 700; margin-top: 8px; max-width: 58ch; }
    .profile-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
    .tag { display: inline-flex; align-items: center; gap: 7px; border-radius: 999px; padding: 8px 11px; background: rgba(0,0,0,.24); border: 1px solid rgba(255,255,255,.10); color: #ffe7c7; font-weight: 850; }
    .dashboard-stack { display: grid; gap: 18px; }
    .session-panel {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 18px;
      align-items: center;
      padding: 18px;
      border-radius: 18px;
      border: 1px solid rgba(36,200,255,.18);
      background: linear-gradient(135deg, rgba(36,200,255,.10), rgba(255,255,255,.025));
    }
    .session-title { font-size: 1.18rem; font-weight: 950; color: var(--text); }
    .session-sub { color: var(--muted); font-weight: 750; margin-top: 5px; }
    .session-live { display: inline-flex; align-items: center; gap: 8px; color: #c9ffe0; font-weight: 950; text-transform: uppercase; font-size: .78rem; letter-spacing: .08em; }
    .session-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 7px rgba(53,208,127,.13), 0 0 20px rgba(53,208,127,.48); }
    .session-track { margin-top: 12px; color: #d9e1ff; font-weight: 900; overflow-wrap: anywhere; }
    .session-badges, .stat-strip { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
    .stat-strip { margin-top: 0; }
    .dashboard-stat {
      flex: 1 1 145px;
      padding: 14px;
      border-radius: 15px;
      border: 1px solid rgba(255,255,255,.08);
      background: rgba(0,0,0,.18);
    }
    .dashboard-stat-value { color: var(--text); font-size: 1.35rem; font-weight: 1000; line-height: 1; }
    .dashboard-stat-label { color: var(--muted); font-size: .82rem; font-weight: 850; margin-top: 7px; text-transform: uppercase; letter-spacing: .08em; }
    .history-mini { display: grid; gap: 10px; }
    .history-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 12px 0;
      border-bottom: 1px solid rgba(255,255,255,.07);
    }
    .history-row:last-child { border-bottom: 0; }
    .history-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
    .history-cover { width: 48px; height: 48px; flex: 0 0 48px; border-radius: 11px; border: 1px solid rgba(36,200,255,.22); background: rgba(36,200,255,.12); object-fit: cover; display: grid; place-items: center; color: #ffc06f; overflow: hidden; }
    .history-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .history-title { color: var(--text); font-weight: 950; overflow-wrap: anywhere; }
    .history-artist { color: var(--muted); font-weight: 750; margin-top: 3px; }
    .history-time { color: #c9b8a8; font-weight: 850; white-space: nowrap; }
    .dj-tabs {
      display: flex;
      gap: 10px;
      margin: 0 0 18px;
      padding: 8px;
      border: 1px solid rgba(36,200,255,.18);
      border-radius: 18px;
      background: rgba(0,0,0,.24);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
    }
    .dj-tabs.nav-tabs { border-bottom: 1px solid rgba(36,200,255,.18); }
    .dj-tabs .nav-item { flex: 1 1 0; }
    .dj-tabs .nav-link {
      width: 100%;
      min-height: 48px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      border: 1px solid transparent;
      border-radius: 13px;
      color: var(--muted);
      background: transparent;
      font-weight: 950;
      letter-spacing: .02em;
      transition: color .16s ease, background .16s ease, border-color .16s ease, transform .16s ease;
    }
    .dj-tabs .nav-link:hover {
      color: #ffe4c0;
      border-color: rgba(36,200,255,.24);
      background: rgba(36,200,255,.08);
    }
    .dj-tabs .nav-link.active {
      color: #160900;
      border-color: rgba(36,200,255,.8);
      background: linear-gradient(135deg, var(--orange), var(--orange-2));
      box-shadow: 0 14px 30px rgba(36,200,255,.2);
    }
    .dj-tab-content .tab-pane { outline: none; }
    .on-air {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin: 0 0 18px;
      padding: 15px 17px;
      border: 1px solid rgba(53,208,127,.38);
      border-radius: 16px;
      background: linear-gradient(135deg, rgba(53,208,127,.18), rgba(36,200,255,.12));
      box-shadow: 0 18px 46px rgba(53,208,127,.08);
    }
    .on-air-title { display: flex; align-items: center; gap: 10px; font-size: 1.02rem; font-weight: 950; color: #d8ffe8; }
    .on-air-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 7px rgba(53,208,127,.14), 0 0 22px rgba(53,208,127,.55); animation: live-pulse 1.5s ease-out infinite; }
    .on-air-track { color: #ffe3bd; font-weight: 850; text-align: right; overflow-wrap: anywhere; }
    @keyframes live-pulse {
      0% { transform: scale(.9); }
      70%, 100% { transform: scale(1.12); }
    }
    .pill { display: inline-flex; align-items: center; gap: 7px; border-radius: 999px; padding: 7px 10px; font-weight: 900; font-size: .78rem; border: 1px solid rgba(255,255,255,.12); }
    .pill.ok { color: #c9ffe0; background: rgba(53,208,127,.13); border-color: rgba(53,208,127,.35); }
    .pill.bad { color: #d9e1ff; background: rgba(255,77,95,.13); border-color: rgba(255,77,95,.35); }
    .toggle-card {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 14px;
      align-items: center;
      padding: 14px;
      border: 1px solid rgba(36,200,255,.18);
      border-radius: 14px;
      background: rgba(36,200,255,.07);
    }
    .toggle-copy { min-width: 0; }
    .toggle-title { color: var(--text); font-weight: 950; }
    .toggle-sub { color: var(--muted); font-weight: 700; margin-top: 3px; line-height: 1.45; }
    .toggle-status { grid-column: 1 / -1; min-height: 18px; color: var(--muted); font-size: .86rem; font-weight: 850; }
    .toggle-status:empty { display: none; }
    .toggle-status.ok { color: #9ff5bf; }
    .toggle-status.bad { color: #ffb6bd; }
    .switch { position: relative; width: 58px; height: 32px; flex: 0 0 auto; }
    .switch input { position: absolute; opacity: 0; inset: 0; }
    .slider { position: absolute; inset: 0; border-radius: 999px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.12); cursor: pointer; transition: .18s ease; }
    .slider::after { content: ""; position: absolute; width: 24px; height: 24px; left: 3px; top: 3px; border-radius: 50%; background: #f3e8d6; transition: .18s ease; }
    .switch input:checked + .slider { background: linear-gradient(135deg, rgba(53,208,127,.92), rgba(36,200,255,.85)); border-color: rgba(53,208,127,.48); }
    .switch input:checked + .slider::after { transform: translateX(26px); }
    .hint { color: var(--muted); line-height: 1.55; font-weight: 650; }
    .actions { display: flex; justify-content: flex-end; gap: 10px; align-items: center; }
    .connection-list { display: grid; gap: 12px; }
    .connection-item {
      display: grid;
      grid-template-columns: 136px 1fr;
      gap: 12px;
      align-items: center;
      padding: 13px 14px;
      border: 1px solid rgba(36,200,255,.16);
      border-radius: 13px;
      background: rgba(0,0,0,.22);
    }
    .connection-label {
      color: var(--muted);
      font-size: .78rem;
      font-weight: 900;
      letter-spacing: .08em;
      text-transform: uppercase;
    }
    .connection-value {
      color: var(--text);
      font-weight: 900;
      overflow-wrap: anywhere;
    }
    .connection-note {
      margin: 14px 0 0;
      color: var(--muted);
      line-height: 1.6;
      font-weight: 700;
    }
    .copy-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
    .mini {
      padding: 10px 12px;
      border-radius: 11px;
      background: rgba(36,200,255,.10);
      border: 1px solid rgba(36,200,255,.22);
      color: #ffe2bd;
      font-weight: 850;
      text-align: center;
    }
    .requests-list { display: grid; gap: 12px; }
    .requests-chat-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(360px, .92fr);
      gap: 18px;
      align-items: stretch;
    }
    .requests-chat-grid > .card {
      min-width: 0;
      height: 100%;
    }
    .requests-chat-grid .requests-panel,
    .requests-chat-grid .dj-chat-panel {
      display: flex;
      flex-direction: column;
    }
    .requests-chat-grid .requests-panel .card-body,
    .requests-chat-grid .dj-chat-panel .card-body {
      flex: 1 1 auto;
    }
    .requests-panel .requests-list {
      grid-template-columns: 1fr;
    }
    .request-card {
      border: 1px solid rgba(36,200,255,.16);
      border-radius: 14px;
      padding: 13px;
      background: rgba(0,0,0,.22);
    }
    .request-top { display: flex; justify-content: space-between; gap: 10px; align-items: center; margin-bottom: 8px; }
    .request-type { color: #ffe2bd; font-weight: 950; text-transform: uppercase; font-size: .78rem; letter-spacing: .08em; }
    .request-time { color: var(--muted); font-size: .82rem; font-weight: 750; }
    .request-title { color: var(--text); font-weight: 950; line-height: 1.35; }
    .request-msg { color: #d9c7b7; font-weight: 700; line-height: 1.5; margin-top: 6px; overflow-wrap: anywhere; }
    .request-footer { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 12px; }
    .request-name { color: var(--muted); font-weight: 850; }
    .button-small { padding: 8px 10px; border-radius: 10px; font-size: .86rem; box-shadow: none; }
    .button-small.danger { background: rgba(255,77,95,.16); border-color: rgba(255,77,95,.38); color: #ffd6dc; }
    .poll-panel,
    #requests-pane > .dj-chat-panel { margin-top: 18px; }
    .poll-panel { margin-top: 18px; }
    .poll-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .85fr); gap: 18px; align-items: start; }
    .poll-builder { display: grid; gap: 14px; }
    .poll-builder label { display: block; margin: 0 0 7px; color: var(--muted); font-size: .78rem; font-weight: 950; text-transform: uppercase; letter-spacing: .08em; }
    .poll-builder input,
    .poll-builder select {
      width: 100%;
      min-height: 44px;
      border: 1px solid rgba(36,200,255,.20);
      border-radius: 12px;
      background: rgba(0,0,0,.34);
      color: var(--text);
      padding: 0 13px;
      font-weight: 850;
      outline: none;
    }
    .poll-builder select { color-scheme: dark; }
    .poll-option-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .poll-form-status {
      border: 1px solid rgba(255,77,95,.32);
      border-radius: 12px;
      background: rgba(255,77,95,.12);
      color: #d9e1ff;
      padding: 10px 12px;
      font-weight: 850;
      line-height: 1.4;
    }
    .poll-live-box { border: 1px solid rgba(36,200,255,.18); border-radius: 18px; padding: 16px; background: linear-gradient(145deg, rgba(36,200,255,.08), rgba(10,14,14,.78)); min-height: 100%; }
    .poll-question { color: #fff6e8; font-size: 1.05rem; font-weight: 950; line-height: 1.35; margin-bottom: 14px; }
    .poll-countdown {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin: -4px 0 14px;
      padding: 8px 10px;
      border-radius: 999px;
      background: rgba(36,200,255,.12);
      border: 1px solid rgba(36,200,255,.24);
      color: #ffe2bd;
      font-size: .86rem;
      font-weight: 900;
    }
    .poll-results { display: grid; gap: 12px; }
    .poll-result-top { display: flex; justify-content: space-between; gap: 12px; color: #ffe1bc; font-weight: 900; font-size: .9rem; margin-bottom: 6px; }
    .poll-result-top strong { color: var(--muted); font-size: .82rem; white-space: nowrap; }
    .poll-bar { height: 10px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
    .poll-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--orange), #ffd66b); box-shadow: 0 0 18px rgba(36,200,255,.35); }
    .poll-close-form { margin-top: 16px; display: flex; justify-content: flex-end; }
    .poll-history-box { grid-column: 1 / -1; margin-top: 2px; padding-top: 16px; border-top: 1px solid rgba(36,200,255,.16); }
    .poll-history-title { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; color: #ffe2bd; font-size: .82rem; font-weight: 950; letter-spacing: .08em; text-transform: uppercase; }
    .poll-history-list { display: grid; gap: 12px; }
    .poll-history-item { border: 1px solid rgba(36,200,255,.14); border-radius: 16px; background: rgba(0,0,0,.24); overflow: hidden; }
    .poll-history-item[open] { border-color: rgba(36,200,255,.30); background: linear-gradient(145deg, rgba(36,200,255,.08), rgba(0,0,0,.28)); }
    .poll-history-summary {
      list-style: none;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto auto;
      align-items: center;
      gap: 12px;
      padding: 13px 14px;
      cursor: pointer;
    }
    .poll-history-summary::-webkit-details-marker { display: none; }
    .poll-history-chevron { color: var(--orange); transition: transform .18s ease; }
    .poll-history-item[open] .poll-history-chevron { transform: rotate(90deg); }
    .poll-history-question { color: #fff6e8; font-weight: 950; line-height: 1.3; }
    .poll-history-meta { color: var(--muted); font-size: .78rem; font-weight: 850; white-space: nowrap; }
    .poll-history-status { justify-self: end; }
    .poll-history-options { display: grid; gap: 8px; padding: 0 14px 14px; }
    .poll-history-row { display: grid; gap: 5px; }
    .poll-history-label { display: flex; justify-content: space-between; gap: 10px; color: #dbc4ad; font-size: .82rem; font-weight: 850; }
    .dj-chat-log { height: 360px; overflow: auto; display: grid; align-content: start; gap: 10px; padding: 12px; border: 1px solid rgba(36,200,255,.16); border-radius: 18px; background: rgba(0,0,0,.22); scrollbar-width: thin; scrollbar-color: var(--orange) rgba(255,255,255,.04); }
    .requests-chat-grid .dj-chat-log { height: 420px; }
    .dj-chat-log::-webkit-scrollbar { width: 9px; }
    .dj-chat-log::-webkit-scrollbar-track { background: rgba(255,255,255,.035); border-radius: 999px; }
    .dj-chat-log::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--orange), var(--orange-2)); border-radius: 999px; }
    .dj-chat-message { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 10px; align-items: start; padding: 11px; border: 1px solid rgba(255,255,255,.07); border-radius: 16px; background: rgba(255,255,255,.035); }
    .dj-chat-message.dj { border-color: rgba(36,200,255,.28); background: rgba(36,200,255,.08); }
    .dj-chat-avatar { width: 42px; height: 42px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--orange); color: #050505; font-weight: 950; }
    .dj-chat-avatar img { width: 100%; height: 100%; object-fit: cover; }
    .dj-chat-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--muted); font-size: .8rem; font-weight: 850; }
    .dj-chat-meta strong { color: #fff2df; font-size: .9rem; }
    .dj-chat-text { color: var(--text); font-weight: 750; line-height: 1.45; overflow-wrap: anywhere; margin-top: 3px; }
    .dj-chat-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 12px; }
    .dj-chat-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
    .dj-chat-name,
    .dj-chat-input { width: 100%; border: 1px solid rgba(36,200,255,.22); border-radius: 14px; background: rgba(0,0,0,.38); color: var(--text); padding: 12px 13px; font-weight: 850; outline: 0; }
    .chat-status { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-weight: 900; font-size: .82rem; }
    .chat-status::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #74716d; }
    .chat-status.online::before { background: var(--ok); box-shadow: 0 0 16px rgba(53,208,127,.5); }
    .empty-state { color: var(--muted); font-weight: 750; line-height: 1.55; padding: 14px; border: 1px dashed rgba(36,200,255,.22); border-radius: 14px; background: rgba(0,0,0,.16); }
    @media (max-width: 980px) {
      .portal-grid { grid-template-columns: 1fr; }
      .booking-layout { grid-template-columns: 1fr; }
      .requests-chat-grid { grid-template-columns: 1fr; }
      .requests-panel .requests-list { grid-template-columns: 1fr; }
    }
    @media (max-width: 680px) {
      .top { align-items: flex-start; flex-direction: column; }
      .dj-tabs { gap: 6px; padding: 6px; }
      .dj-tabs .nav-link { min-height: 44px; padding: 8px; font-size: .86rem; }
      .booking-date-field { grid-template-columns: 1fr; }
      .poll-layout,
      .poll-option-grid,
      .dj-chat-form,
      .dj-chat-row { grid-template-columns: 1fr; }
      .poll-history-box { grid-column: auto; }
      .poll-history-summary { grid-template-columns: auto minmax(0, 1fr); }
      .poll-history-meta,
      .poll-history-status { grid-column: 2; justify-self: start; }
      .dj-chat-log { height: 320px; }
      .row { grid-template-columns: 1fr; }
      .on-air { align-items: flex-start; flex-direction: column; }
      .on-air-track { text-align: left; }
      .connection-item { grid-template-columns: 1fr; gap: 5px; }
      .copy-grid { grid-template-columns: 1fr; }
      .profile-head { grid-template-columns: 72px 1fr; }
      .avatar { width: 72px; height: 72px; }
      .profile-identity { grid-template-columns: 1fr; }
      .profile-hero .avatar { width: 96px; height: 96px; }
      .dashboard-grid, .session-panel { grid-template-columns: 1fr; }
      .slot-grid { grid-template-columns: 1fr; }
      .booking-day-title { align-items: flex-start; flex-direction: column; }
    }