:root {
    --bg:        #0a0c0f;
    --bg2:       #0f1218;
    --bg3:       #141820;
    --bg4:       #1a2030;
    --border:    #2a3448;
    --border2:   #3a4a64;
    --gold:      #c8a84b;
    --gold2:     #e8c86b;
    --gold-dim:  #7a6228;
    --text:      #d4dae8;
    --text-dim:  #7a8aaa;
    --text-mute: #3a4a64;
    --red:       #c41e3a;
    --accent:    #4a6fa5;

    /* WoW class colors */
    --dk:    #C41E3A; --dh: #A330C9; --druid: #FF7C0A;
    --evo:   #33937F; --hunt: #AAD372; --mage: #69CCF0;
    --monk:  #00FCB8; --pal: #F48CBA; --priest: #FFFFFF;
    --rogue: #FFF468; --sham: #446AE3; --warr: #C79C6E; --lock: #9482C9;

    /* Parse colors */
    --parse-gold:   #E5CC80;
    --parse-pink:   #E268A8;
    --parse-orange: #FF8000;
    --parse-purple: #A335EE;
    --parse-blue:   #0070DD;
    --parse-green:  #1EFF00;
    --parse-grey:   #555555;
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }

  body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Rajdhani', sans-serif;
    font-size: 15px;
    min-height: 100vh;
    overflow-x: hidden;
  }

  /* ── BACKGROUND ── */
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
      radial-gradient(ellipse 80% 40% at 50% 0%, rgba(74,111,165,0.08) 0%, transparent 70%),
      radial-gradient(ellipse 40% 60% at 100% 50%, rgba(200,168,75,0.04) 0%, transparent 60%),
      repeating-linear-gradient(0deg, transparent, transparent 80px, rgba(42,52,72,0.15) 80px, rgba(42,52,72,0.15) 81px),
      repeating-linear-gradient(90deg, transparent, transparent 80px, rgba(42,52,72,0.15) 80px, rgba(42,52,72,0.15) 81px);
    pointer-events: none;
    z-index: 0;
  }

  /* ── LAYOUT ── */
  #app { position: relative; z-index: 1; }

  /* ── HEADER ── */
  header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 32px;
    height: 64px;
    background: linear-gradient(180deg, rgba(15,18,24,0.98) 0%, rgba(10,12,15,0.95) 100%);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(12px);
  }

  .logo {
    font-family: 'Cinzel', serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--gold);
    letter-spacing: 3px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .logo-icon {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }

  .logo span { color: var(--text-dim); font-weight: 400; font-size: 12px; letter-spacing: 6px; margin-left: 4px; }

  nav {
    display: flex; gap: 4px; flex-shrink: 1; min-width: 0;
    overflow-x: auto; scrollbar-width: none;
  }
  nav::-webkit-scrollbar { display: none; }

  .nav-btn {
    background: none;
    border: 1px solid transparent;
    color: var(--text-dim);
    font-family: 'Rajdhani', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 6px 13px;
    cursor: pointer;
    transition: all 0.2s;
    border-radius: 2px;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .pill-short-text, .account-icon { display: none; }

  /* Mid-width screens: compact the header so the full tab row fits before
     the hamburger breakpoint below takes over. Measured with all 8 tabs
     (incl. the officer-only Team Management tab) and a real guild badge:
     the uncompacted header only fits the row from ~1675px up, so anything
     narrower gets the icon-only account button, the short Invite pill, no
     logo subtitle, and a capped guild badge. */
  @media (max-width: 1700px) {
    .pill-full-text { display: none; }
    .pill-short-text { display: inline; }
    .account-battletag-text { display: none; }
    .account-icon { display: inline-block; }
    .logo span { display: none; }
    .guild-badge .guild-badge-name { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: middle; }
  }

  .nav-btn:hover { color: var(--text); border-color: var(--border2); }
  .nav-btn.active {
    color: var(--gold);
    border-color: var(--gold-dim);
    background: rgba(200,168,75,0.06);
  }

  /* Mobile hamburger nav -- hidden except at the mobile breakpoint below,
     where it replaces the .nav-btn row entirely. Fixed width (not sized to
     content) so the box doesn't grow/shrink depending on which tab name is
     currently selected -- a short label like "Loot" was making the whole
     menu (and the dropdown stretched to match it) too narrow to fit the
     longer item labels inside it, clipping them. */
  .mobile-nav-menu { display: none; position: relative; width: 200px; flex-shrink: 0; }

  .mobile-nav-toggle {
    display: flex; align-items: center; gap: 8px;
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--gold);
    font-family: 'Rajdhani', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 6px 12px;
    cursor: pointer;
    width: 100%;
  }
  .mobile-nav-toggle span:first-child { font-size: 15px; color: var(--text-dim); }

  .mobile-nav-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0; right: 0;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 16px 40px rgba(0,0,0,0.4);
    z-index: 200;
    display: none;
    overflow: hidden;
  }
  .mobile-nav-dropdown.open { display: block; }
  .mobile-nav-dropdown .dropdown-item.active { color: var(--gold); background: rgba(200,168,75,0.06); }

  .header-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

  .guild-badge {
    display: flex; align-items: center; gap: 8px;
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 6px 12px;
    font-size: 13px;
    color: var(--text-dim);
  }

  .guild-badge strong { color: var(--gold); font-weight: 600; }
  /* On more than one team, the badge opens the team menu. */
  .guild-badge-wrap { position: relative; }
  .guild-badge.switchable { cursor: pointer; }
  .guild-badge.switchable:hover { border-color: var(--gold-dim); }
  .guild-badge-caret { font-style: normal; font-size: 9px; color: var(--text-mute); }
  /* As wide as its longest line (at least the badge), never wider than the screen. */
  .account-dropdown.team-menu { left: 0; right: auto; min-width: 100%; width: max-content; max-width: calc(100vw - 24px); }
  .team-menu .team-menu-item { display: flex; align-items: flex-start; gap: 8px; } /* beats .dropdown-item's display: block */
  .team-menu .team-menu-item.active { color: var(--gold); background: rgba(200,168,75,0.06); }
  .team-menu-check { width: 12px; flex-shrink: 0; color: var(--gold); }
  .team-menu-name { display: flex; flex-direction: column; gap: 2px; } /* wraps only past the screen-width cap */
  .team-menu-guild { font-size: 11px; font-weight: 500; color: var(--text-mute); }
  /* Teams in more than one WoW version: a heading per version. */
  .team-menu-group { padding: 8px 14px 4px; font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text-mute); }
  .team-menu-group:not(:first-child) { border-top: 1px solid var(--border); margin-top: 4px; }
  .team-menu .team-menu-another { color: var(--text-dim); border-top: 1px solid var(--border); }
  .guild-badge-game { font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--gold); border: 1px solid var(--gold-dim); border-radius: 3px; padding: 1px 5px; white-space: nowrap; }
  .btn-link { background: none; border: none; color: var(--text-dim); font-size: 14px; cursor: pointer; padding: 6px; }
  .btn-link:hover { color: var(--gold); }
  /* A WoW version without the feature (M+, world rankings, WowAudit) hides it. */
  body[data-game]:not([data-game="retail"]) .retail-only { display: none !important; }

  .header-pill-btn {
    display: flex; align-items: center; gap: 6px;
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-dim);
    font-family: 'Rajdhani', sans-serif;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 12px;
    cursor: pointer;
    transition: all 0.15s;
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .header-pill-btn:hover { border-color: var(--border2); color: var(--text); }

  /* ── MAIN CONTENT ── */
  main { padding: 32px; max-width: 1600px; margin: 0 auto; }

  /* ── SETUP SCREEN ── */
  #setup-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 64px);
    padding: 48px 32px;
  }

  .setup-card {
    width: 100%;
    max-width: 640px;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 32px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(200,168,75,0.05);
  }

  .setup-header {
    padding: 32px 40px 24px;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(135deg, rgba(200,168,75,0.04) 0%, transparent 60%);
  }

  .setup-header h1 {
    font-family: 'Cinzel', serif;
    font-size: 28px;
    font-weight: 700;
    color: var(--gold);
    letter-spacing: 2px;
    margin-bottom: 8px;
  }

  .setup-header p { color: var(--text-dim); font-size: 16px; font-family: 'Rajdhani', sans-serif; font-weight: 500; line-height: 1.6; }

  .setup-body { padding: 32px 40px; }

  .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
  }

  .form-group { display: flex; flex-direction: column; gap: 6px; }
  .form-group.full { grid-column: 1 / -1; }

  .form-group label {
    font-size: 12px;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-dim);
  }

  .form-group .hint {
    font-size: 11px;
    color: var(--text-mute);
    font-family: 'Rajdhani', sans-serif; font-weight: 600;
    margin-top: 2px;
  }

  .form-group input, .form-group select {
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text);
    font-family: 'Rajdhani', sans-serif;
    font-size: 16px;
    font-weight: 500;
    padding: 10px 14px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    width: 100%;
  }

  .form-group input:focus, .form-group select:focus {
    border-color: var(--gold-dim);
    box-shadow: 0 0 0 2px rgba(200,168,75,0.08);
  }

  .form-group input::placeholder { color: var(--text-mute); }

  .form-group select option { background: var(--bg3); }

  .setup-footer {
    padding: 24px 40px;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .btn-primary {
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dim) 100%);
    border: none;
    border-radius: 4px;
    color: #0a0c0f;
    font-family: 'Rajdhani', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    padding: 12px 32px;
    cursor: pointer;
    transition: all 0.2s;
  }

  .btn-primary:hover { filter: brightness(1.1); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(200,168,75,0.2); }
  .btn-primary:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

  .guild-roster-panel {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 12px;
    margin-top: 10px;
    background: var(--bg2);
  }

  .guild-roster-results {
    max-height: 240px;
    overflow-y: auto;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .guild-roster-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 4px;
    cursor: pointer;
    background: var(--bg3);
    border: 1px solid transparent;
  }

  .guild-roster-row:hover { border-color: var(--border2); }

  .guild-roster-row-name {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    color: var(--text);
  }

  .guild-roster-row-meta {
    font-size: 12px;
    color: var(--text-dim);
    margin-left: 8px;
  }

  .guild-roster-row-tag {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-mute);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 2px 6px;
    white-space: nowrap;
  }

  .guild-roster-status {
    font-size: 12px;
    color: var(--text-dim);
    margin-top: 8px;
  }

  .btn-secondary {
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-dim);
    font-family: 'Rajdhani', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 10px 20px;
    cursor: pointer;
    transition: all 0.2s;
  }

  .btn-secondary:hover { border-color: var(--border2); color: var(--text); }

  .status-msg { font-size: 14px; font-family: 'Rajdhani', sans-serif; font-weight: 500; color: var(--text-dim); }
  .status-msg.error { color: #ff6b6b; }
  .status-msg.loading { color: var(--gold); }

  /* ── DASHBOARD ── */
  #dashboard { display: none; }

  /* ── TABS ── */
  .tab-content { display: none; }
  .tab-content.active { display: block; }

  /* ── SECTION HEADERS ── */
  .section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
  }

  .section-title {
    font-family: 'Cinzel', serif;
    font-size: 18px;
    color: var(--gold);
    letter-spacing: 2px;
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .section-title::before {
    content: '';
    display: block;
    width: 3px; height: 20px;
    background: linear-gradient(180deg, var(--gold), var(--gold-dim));
    border-radius: 2px;
  }

  /* ── STAT CARDS ── */
  .stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 32px;
  }

  .stat-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 20px 24px;
    position: relative;
    overflow: hidden;
    transition: border-color 0.2s;
  }

  .stat-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--gold), transparent);
  }

  .stat-card:hover { border-color: var(--border2); }

  .stat-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: 8px;
  }

  .stat-value {
    font-family: 'Rajdhani', sans-serif; font-weight: 600;
    font-size: 32px;
    color: var(--gold);
    line-height: 1;
    margin-bottom: 4px;
  }

  .stat-sub { font-size: 12px; color: var(--text-dim); }

  /* ── ROLE SECTION ── */
  .role-section { margin-bottom: 32px; }

  .role-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    padding: 8px 16px;
    background: var(--bg3);
    border-left: 3px solid var(--gold-dim);
    border-radius: 0 4px 4px 0;
  }

  .role-header h3 {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--text-dim);
  }

  .role-count {
    font-family: 'Rajdhani', sans-serif; font-weight: 600;
    font-size: 11px;
    color: var(--text-mute);
    margin-left: auto;
  }

  /* ── PLAYER GRID ── */
  .player-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 8px;
  }

  .player-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 14px 16px;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    overflow: hidden;
  }

  .player-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--class-color, var(--border));
    transition: width 0.2s;
  }

  .player-card:hover {
    border-color: var(--border2);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  }

  .player-card:hover::before { width: 4px; }

  .player-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--class-color, var(--text));
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .player-meta {
    font-size: 10px;
    color: var(--text-mute);
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow: hidden;
  }

  .player-class {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--text-dim);
    white-space: nowrap;
  }

  /* ── RAID BUFFS ── */
  .raid-buffs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 8px;
    margin-bottom: 32px;
  }

  .buff-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .buff-indicator {
    width: 10px; height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  .buff-indicator.covered { background: #1EFF00; box-shadow: 0 0 6px rgba(30,255,0,0.4); }
  .buff-indicator.missing { background: var(--text-mute); }

  .buff-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    flex: 1;
  }

  .buff-class {
    font-size: 10px;
    font-family: 'Rajdhani', sans-serif; font-weight: 600;
  }

  .plan-utility-label { font-size: 9px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text-mute); margin-top: 6px; }

  /* ── PROGRESS: boss kills (every version but Retail) ── */
  .progress-kills-raid { background: var(--bg2); border: 1px solid var(--border); border-radius: 6px; padding: 14px 16px; margin-bottom: 12px; }
  .progress-kills-name { font-family: 'Rajdhani', sans-serif; font-size: 18px; font-weight: 700; color: var(--text); margin-bottom: 10px; }
  .progress-kills-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
  .progress-kills-cell { background: var(--bg3); border: 1px solid var(--border); border-radius: 4px; padding: 8px 10px; }
  .progress-kills-cell.has-kills { border-color: var(--gold-dim); }
  .progress-kills-label { font-size: 11px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; }
  .progress-kills-count { font-family: 'Rajdhani', sans-serif; font-size: 22px; font-weight: 700; color: var(--text); }
  .progress-kills-cell.has-kills .progress-kills-count { color: var(--gold); }
  .progress-kills-bar { height: 4px; background: var(--bg4); border-radius: 2px; overflow: hidden; margin-top: 4px; }
  .progress-kills-bar > div { height: 100%; background: linear-gradient(90deg, var(--gold-dim), var(--gold)); }

  /* ── WCL SCORES TABLE ── */
  .scores-container {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
  }

  .scores-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--bg3);
  }

  .scores-toolbar-left { display: flex; align-items: center; gap: 12px; }

  .role-filter {
    display: flex;
    gap: 4px;
  }

  .filter-btn {
    background: none;
    border: 1px solid var(--border);
    border-radius: 3px;
    color: var(--text-dim);
    font-family: 'Rajdhani', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 4px 12px;
    cursor: pointer;
    transition: all 0.15s;
  }

  .filter-btn:hover { border-color: var(--border2); color: var(--text); }
  .filter-btn.active { border-color: var(--gold-dim); color: var(--gold); background: rgba(200,168,75,0.06); }

  /* A themed <select>, styled to sit alongside .filter-btn/.btn-secondary
     controls instead of looking like a stock browser dropdown. */
  .themed-select {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    background: var(--bg3)
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%237a8aaa' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
      no-repeat right 10px center;
    border: 1px solid var(--border);
    border-radius: 3px;
    color: var(--text-dim);
    font-family: 'Rajdhani', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 5px 26px 5px 12px;
    cursor: pointer;
    transition: all 0.15s;
  }
  .themed-select:hover  { border-color: var(--border2); color: var(--text); }
  .themed-select:focus  { outline: none; border-color: var(--gold-dim); }
  .themed-select option { background: var(--bg2); color: var(--text); }

  .raid-day-chip {
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 36px;
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-dim);
    font-family: 'Rajdhani', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.15s;
    user-select: none;
  }
  .raid-day-chip:hover { border-color: var(--border2); color: var(--text); }
  .raid-day-chip.active { border-color: var(--gold-dim); color: var(--gold); background: rgba(200,168,75,0.1); }

  .attendance-calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
  }

  .attendance-weekday-label {
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-mute);
    padding-bottom: 6px;
  }

  .attendance-day {
    position: relative;
    min-height: 108px;
    border: 1px solid var(--border);
    border-radius: 5px;
    background: var(--bg3);
    padding: 8px 10px;
    transition: all 0.15s;
  }

  .attendance-day.blank { background: transparent; border-color: transparent; }

  .attendance-day.raid-day { background: rgba(200,168,75,0.07); border-color: var(--gold-dim); cursor: pointer; }
  .attendance-day.raid-day:hover { background: rgba(200,168,75,0.14); }

  .attendance-day.unavailable { background: rgba(255,51,51,0.12); border-color: rgba(255,51,51,0.5); }
  .attendance-day.unavailable:hover { background: rgba(255,51,51,0.2); }

  .attendance-day.today { box-shadow: inset 0 0 0 2px var(--gold); }

  .attendance-day-num {
    font-family: 'Rajdhani', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-dim);
  }

  .attendance-day.raid-day .attendance-day-num,
  .attendance-day.unavailable .attendance-day-num { color: var(--text); }

  .attendance-day-tag {
    margin-top: 4px;
    font-size: 10px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-weight: 700;
  }
  .attendance-day.raid-day .attendance-day-tag    { color: var(--gold); }
  .attendance-day.unavailable .attendance-day-tag { color: #FF6666; }

  .attendance-day-count {
    position: absolute;
    bottom: 4px;
    right: 6px;
    font-size: 14px;
    font-weight: 700;
    color: #FF6666;
    background: rgba(196,30,58,0.15);
    border-radius: 4px;
    padding: 1px 6px;
    line-height: 1.4;
  }

  .attendance-day-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 1;
    color: var(--text-mute);
    background: rgba(255,51,51,0.12);
    border: 1px solid rgba(255,51,51,0.3);
    cursor: pointer;
    transition: all 0.15s;
    z-index: 2;
  }
  .attendance-day-remove:hover { background: rgba(255,51,51,0.3); color: #fff; }

  @media (max-width: 700px) {
    .attendance-day        { min-height: 64px; padding: 5px 6px; }
    .attendance-day-num     { font-size: 11px; }
    .attendance-day-tag     { font-size: 8px; }
    .attendance-day-count   { font-size: 12px; padding: 1px 4px; }
    .attendance-weekday-label { font-size: 9px; }
    .attendance-day-remove  { width: 14px; height: 14px; font-size: 10px; }
  }

  .fetch-btn {
    background: rgba(200,168,75,0.1);
    border: 1px solid var(--gold-dim);
    border-radius: 3px;
    color: var(--gold);
    font-family: 'Rajdhani', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 6px 16px;
    cursor: pointer;
    transition: all 0.15s;
  }

  .fetch-btn:hover { background: rgba(200,168,75,0.15); }
  .fetch-btn:disabled { opacity: 0.4; cursor: not-allowed; }

  .scores-table { width: 100%; border-collapse: collapse; }

  .scores-table th {
    background: var(--bg3);
    border-bottom: 1px solid var(--border);
    border-right: 1px solid var(--border);
    color: var(--text-dim);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 10px 14px;
    text-align: left;
    white-space: nowrap;
  }

  .scores-table td {
    border-bottom: 1px solid rgba(42,52,72,0.5);
    border-right: 1px solid rgba(42,52,72,0.3);
    padding: 10px 14px;
    font-family: 'Rajdhani', sans-serif; font-weight: 600;
    font-size: 13px;
    white-space: nowrap;
  }

  .scores-table tr:last-child td { border-bottom: none; }
  .scores-table tr:hover td { background: rgba(255,255,255,0.02); }

  .score-cell {
    text-align: center;
    font-weight: 600;
    border-radius: 3px;
  }

  .section-label-row td {
    background: var(--bg3) !important;
    color: var(--text-mute) !important;
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 4px !important;
    text-transform: uppercase !important;
    padding: 6px 14px !important;
    border-bottom: 1px solid var(--border) !important;
  }

  .sep-col { width: 8px; background: var(--bg3) !important; padding: 0 !important; border-right: 2px solid var(--border) !important; }

  .player-name-cell {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .class-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  /* ── PROGRESS BAR FOR SCORES ── */
  .score-bar {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .score-bar-fill {
    height: 4px;
    border-radius: 2px;
    flex: 1;
    background: var(--bg3);
    overflow: hidden;
  }

  .score-bar-fill-inner {
    height: 100%;
    border-radius: 2px;
    transition: width 0.6s ease;
  }

  /* ── LOADING STATE ── */
  .loading-overlay {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px;
    gap: 16px;
  }

  .spinner {
    width: 40px; height: 40px;
    border: 2px solid var(--border);
    border-top-color: var(--gold);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
  }

  @keyframes spin { to { transform: rotate(360deg); } }

  .loading-text {
    font-size: 13px;
    color: var(--text-dim);
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 600;
  }

  /* ── BOOT LOADING SCREEN ── */
  #boot-loading-screen {
    position: fixed;
    inset: 0;
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
  }
  .boot-loading-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
  }
  .boot-loading-title {
    font-family: 'Cinzel', serif;
    font-size: 26px;
    letter-spacing: 5px;
    color: var(--gold);
  }

  /* ── EMPTY STATE ── */
  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px;
    gap: 12px;
    color: var(--text-mute);
    text-align: center;
  }

  .empty-state-icon { font-size: 48px; opacity: 0.3; }

  .empty-state h3 { font-size: 16px; color: var(--text-dim); letter-spacing: 2px; }
  .empty-state p { font-size: 13px; max-width: 300px; line-height: 1.6; }

  /* ── PLAYER PROFILE MODAL ── */
  .modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.8);
    backdrop-filter: blur(4px);
    z-index: 200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 32px;
  }

  .modal-overlay.open { display: flex; }

  .modal {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 8px;
    width: 100%;
    max-width: 800px;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 40px 120px rgba(0,0,0,0.8);
    animation: modalIn 0.2s ease;
  }

  @keyframes modalIn {
    from { opacity: 0; transform: translateY(16px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }

  .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 28px;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    background: var(--bg2);
    z-index: 1;
  }

  .modal-player-name {
    font-family: 'Cinzel', serif;
    font-size: 24px;
    font-weight: 700;
  }

  .modal-close {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-dim);
    width: 32px; height: 32px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.15s;
  }

  .modal-close:hover { border-color: var(--border2); color: var(--text); }

  .modal-body { padding: 28px; }

  .profile-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 28px;
  }

  .profile-stat {
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 16px 20px;
    text-align: center;
  }

  .profile-stat-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: 8px;
  }

  .profile-stat-value {
    font-family: 'Rajdhani', sans-serif; font-weight: 600;
    font-size: 28px;
    font-weight: 600;
  }

  .boss-breakdown { }

  .boss-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(42,52,72,0.4);
  }

  .boss-row:last-child { border-bottom: none; }

  .boss-name {
    font-size: 13px;
    color: var(--text-dim);
    width: 200px;
    flex-shrink: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .boss-parse {
    font-family: 'Rajdhani', sans-serif; font-weight: 600;
    font-size: 15px;
    font-weight: 600;
    width: 48px;
    text-align: right;
    flex-shrink: 0;
  }

  .boss-bar {
    flex: 1;
    height: 6px;
    background: var(--bg3);
    border-radius: 3px;
    overflow: hidden;
  }

  .boss-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.6s ease;
  }

  /* ── TOAST ── */
  .toast {
    position: fixed;
    bottom: 32px;
    right: 32px;
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 14px 20px;
    font-size: 13px;
    color: var(--text);
    z-index: 300;
    transform: translateY(80px);
    opacity: 0;
    transition: all 0.3s ease;
    max-width: 320px;
  }

  .toast.show { transform: translateY(0); opacity: 1; }
  .toast.success { border-color: rgba(30,255,0,0.3); }
  .toast.error   { border-color: rgba(255,60,60,0.3); }

  /* ── PLANNER CHECKLIST ── */
  .checklist-role-group { margin-bottom: 20px; }

  .checklist-role-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--bg3);
    border-left: 3px solid var(--gold-dim);
    border-radius: 0 4px 4px 0;
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--text-dim);
    cursor: pointer;
    user-select: none;
  }

  .checklist-role-header:hover { background: var(--bg4); }

  .checklist-players {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 6px;
    padding: 0 4px;
  }

  .checklist-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
    user-select: none;
  }

  .checklist-item:hover { border-color: var(--border2); }

  .checklist-item.checked {
    border-color: var(--gold-dim);
    background: rgba(200,168,75,0.06);
  }

  .checklist-checkbox {
    width: 16px; height: 16px;
    border: 1px solid var(--border2);
    border-radius: 3px;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px;
    transition: all 0.15s;
  }

  .checklist-item.checked .checklist-checkbox {
    background: var(--gold);
    border-color: var(--gold);
    color: #000;
  }

  .checklist-name {
    font-size: 16px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Roster column cards */
  .plan-role-col { }
  .plan-role-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--text-mute);
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
  }

  .plan-player-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin-bottom: 5px;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
  }

  .plan-player-pill:hover { opacity: 0.7; }

  /* ── SCROLLBAR ── */
  ::-webkit-scrollbar { width: 6px; height: 6px; }
  ::-webkit-scrollbar-track { background: var(--bg); }
  ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
  ::-webkit-scrollbar-thumb:hover { background: var(--border2); }

  /* ── AUTH / LOGIN ── */
  #login-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 32px;
    background:
      radial-gradient(ellipse 80% 40% at 50% 0%, rgba(74,111,165,0.12) 0%, transparent 70%),
      radial-gradient(ellipse 60% 60% at 80% 80%, rgba(200,168,75,0.06) 0%, transparent 60%);
  }

  .login-card {
    width: 100%;
    max-width: 480px;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 40px 100px rgba(0,0,0,0.7), 0 0 0 1px rgba(200,168,75,0.08);
  }

  .login-hero {
    padding: 48px 40px 32px;
    text-align: center;
    background: linear-gradient(135deg, rgba(200,168,75,0.06) 0%, transparent 60%);
    border-bottom: 1px solid var(--border);
  }

  .login-logo {
    font-family: 'Cinzel', serif;
    font-size: 36px;
    font-weight: 700;
    color: var(--gold);
    letter-spacing: 4px;
    margin-bottom: 8px;
  }

  .login-tagline {
    font-size: 13px;
    color: var(--text-mute);
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 0;
  }

  .login-body {
    padding: 40px;
  }

  .login-body p {
    font-size: 16px;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 500;
    color: var(--text-dim);
    line-height: 1.7;
    margin-bottom: 28px;
    text-align: center;
  }

  .btn-bnet {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 14px 24px;
    background: linear-gradient(135deg, #0074e0, #0057a8);
    border: none;
    border-radius: 6px;
    color: #fff;
    font-family: 'Rajdhani', sans-serif;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
  }

  .btn-bnet:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0,116,224,0.3);
  }

  .btn-bnet svg { flex-shrink: 0; }

  .login-footer {
    padding: 20px 40px;
    border-top: 1px solid var(--border);
    text-align: center;
    font-family: 'Rajdhani', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-mute);
    line-height: 1.6;
  }
  .legal-links { margin-top: 10px; }
  .legal-links a { color: var(--text-mute); text-decoration: none; }
  .legal-links a:hover { color: var(--text-dim); text-decoration: underline; }

  /* ── ACCOUNT MENU ── */
  .account-menu {
    position: relative;
  }

  .account-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text);
    font-family: 'Rajdhani', sans-serif;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 12px;
    cursor: pointer;
    transition: all 0.15s;
  }

  .account-btn:hover { border-color: var(--border2); }

  .account-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 6px;
    min-width: 200px;
    box-shadow: 0 16px 40px rgba(0,0,0,0.4);
    z-index: 200;
    display: none;
    overflow: hidden;
  }

  .account-dropdown.open { display: block; }

  .account-dropdown-header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    font-size: 12px;
    color: var(--text-mute);
  }

  .account-dropdown-header strong {
    display: block;
    font-size: 14px;
    color: var(--gold);
    margin-bottom: 2px;
  }

  .dropdown-item {
    display: block;
    width: 100%;
    padding: 10px 16px;
    background: none;
    border: none;
    color: var(--text-dim);
    font-family: 'Rajdhani', sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s;
    letter-spacing: 1px;
  }

  .dropdown-item:hover { background: var(--bg3); color: var(--text); }
  .dropdown-item.danger:hover { background: rgba(196,30,58,0.1); color: #ff6b6b; }

  /* ── GUILD SETUP ── */
  #guild-setup-screen, #landing-choice-screen, #join-guild-screen {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 64px);
    padding: 48px 32px;
  }

  .guild-setup-steps {
    display: flex;
    gap: 8px;
    margin-bottom: 32px;
  }

  .step-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--border2);
    transition: background 0.2s;
  }

  .step-dot.active { background: var(--gold); }
  .step-dot.done   { background: var(--gold-dim); }

  /* ── AUTH ERROR BANNER ── */
  .auth-error-banner {
    background: rgba(196,30,58,0.1);
    border: 1px solid rgba(196,30,58,0.3);
    border-radius: 6px;
    padding: 12px 16px;
    font-size: 13px;
    color: #ff6b6b;
    margin-bottom: 20px;
    display: none;
  }

  /* ── RESPONSIVE ── */

  /* Tablet: 600–900px, and also tall/narrow windows (e.g. 1200x1900) where
     the full tab row runs out of room well before true mobile widths --
     swap it for the same hamburger + flyout used on mobile, rather than
     relying on nav's horizontal-scroll fallback (its scrollbar is hidden,
     so tabs past the edge were effectively invisible). Even with the
     compact header above, the 8-tab row needs ~1433px; this was 1300px
     back when the row was shorter. */
  @media (max-width: 1440px) {
    .guild-badge .guild-badge-name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: middle; }
    .nav-btn { display: none; }
    .mobile-nav-menu { display: block; }
    #main-nav { overflow: visible; } /* see the mobile breakpoint below for why */

    /* Roster tab's header (title + team name + flex legend + 3 buttons) is
       the widest of any tab's -- past the true-mobile breakpoint below,
       relying on the content to wrap itself produced a ragged, off-balance
       layout (title getting squeezed/wrapped, second button row left over
       from wherever the first row happened to run out of space). Force it
       onto its own clean row here instead, at the same breakpoint used for
       the nav hamburger above. */
    #roster-header { flex-wrap: wrap; row-gap: 12px; }
    #roster-header > .section-title { flex-shrink: 0; }
    #roster-header > .roster-header-controls { flex-basis: 100%; justify-content: flex-start; }
  }

  @media (max-width: 900px) {
    .stat-grid          { grid-template-columns: repeat(2, 1fr); }
    .form-row           { grid-template-columns: 1fr; }
    header              { padding: 0 12px; gap: 8px; }
    main                { padding: 20px 16px; }
    .profile-stats      { grid-template-columns: repeat(2, 1fr); }
    .scores-table th,
    .scores-table td    { padding: 8px 10px; font-size: 12px; }
    .guild-badge { max-width: 140px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    /* The badge sits near the right edge here: open the team menu leftward. */
    .account-dropdown.team-menu { left: auto; right: 0; }
  }

  /* Mobile: up to 600px */
  @media (max-width: 600px) {
    /* Header — stack nav below logo */
    header {
      flex-wrap: wrap;
      height: auto;
      padding: 12px 16px;
      gap: 10px;
    }

    .logo { font-size: 16px; }
    .logo span { display: none; }

    #main-nav {
      order: 3;
      width: 100%;
      /* The base `nav` rule sets overflow-x:auto for the desktop horizontal-
         scroll fallback, which per spec forces overflow-y to clip too --
         that silently hid the flyout dropdown below since it depends on
         overflowing the nav's own height. Not needed here since the
         .nav-btn row (the thing that used to need scrolling) is hidden
         at this width anyway. */
      overflow: visible;
    }

    /* Below the mobile breakpoint, the tab row becomes a hamburger + flyout
       instead of a horizontally-scrolling row -- easier to hit every tab
       with a thumb once there are this many of them. */
    .nav-btn { display: none; }
    .mobile-nav-menu { display: block; }

    .header-right { gap: 6px; }
    .guild-badge  { font-size: 11px; padding: 4px 8px; }
    /* The header wraps here and the badge starts its own row at the left edge. */
    .account-dropdown.team-menu { left: 0; right: auto; }

    /* Main layout */
    main { padding: 12px; }

    /* Setup card */
    .setup-card         { border-radius: 6px; }
    .setup-header       { padding: 20px 20px 16px; }
    .setup-header h1    { font-size: 20px; }
    .setup-body         { padding: 20px; }
    .setup-footer       { padding: 16px 20px; flex-direction: column; align-items: stretch; gap: 10px; }
    .setup-footer > div { justify-content: flex-end; }

    /* Stat grid — 2 columns on mobile */
    .stat-grid          { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .stat-value         { font-size: 24px; }

    /* Raid buffs — 2 columns on mobile */
    .raid-buffs-grid    { grid-template-columns: repeat(2, 1fr); gap: 6px; }
    .buff-name          { font-size: 12px; }

    /* Player grid — 2 columns on mobile */
    .player-grid        { grid-template-columns: repeat(2, 1fr); gap: 6px; }
    .player-card        { padding: 10px 12px; }
    .player-name        { font-size: 13px; }

    /* Section header */
    .section-header     { flex-wrap: wrap; gap: 8px; }
    .section-title      { font-size: 15px; }

    /* Profile modal */
    .modal              { max-height: 90vh; border-radius: 8px 8px 0 0; }
    .modal-overlay      { padding: 0; align-items: flex-end; }
    .modal-player-name  { font-size: 18px; }
    .modal-header       { padding: 16px 20px; }
    .modal-body         { padding: 16px 20px; }
    .profile-stats      { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .profile-stat       { padding: 10px 12px; }
    .profile-stat-value { font-size: 20px; }
    .boss-name          { font-size: 12px; width: 140px; }

    /* Scores table — horizontal scroll with sticky name col */
    .scores-container   { border-radius: 6px; }
    .scores-toolbar     { flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
    .role-filter        { flex-wrap: wrap; }
    .filter-btn         { font-size: 10px; padding: 3px 8px; }
    #scores-table-wrap  { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .scores-table       { min-width: 600px; }
    .scores-table th,
    .scores-table td    { padding: 7px 8px; font-size: 11px; }

    /* Checklist */
    .checklist-players  { grid-template-columns: repeat(2, 1fr); }
    .checklist-name     { font-size: 14px; }
    .checklist-item     { padding: 6px 10px; }
  }

  /* Raid Night responsive — stack columns on mobile */
  @media (max-width: 900px) {
    #tab-planner .planner-4col {
      grid-template-columns: 1fr 1fr !important;
    }
  }

  @media (max-width: 600px) {
    #tab-planner .planner-4col {
      grid-template-columns: 1fr !important;
    }
    #tab-planner .planner-4col > div {
      padding-top: 0 !important;
    }
    .plan-player-pill { font-size: 14px; padding: 6px 10px; }
    .plan-role-label  { font-size: 11px; }
  }

  /* Progress tab — boss list rows. Base rules mirror what used to be
     inline styles (moved to classes so the mobile override below can win
     without !important); dynamic per-row bits (border color) stay inline. */
  .progress-boss-row {
    background: var(--bg2); border: 1px solid var(--border); border-radius: 6px;
    padding: 12px 16px; display: flex; align-items: center; gap: 14px;
    cursor: pointer; transition: border-color 0.15s;
  }
  .progress-boss-rank   { font-size: 11px; color: var(--text-mute); width: 16px; flex-shrink: 0; }
  .progress-boss-icon   { width: 36px; height: 36px; border-radius: 4px; border: 1px solid var(--border); flex-shrink: 0; }
  .progress-boss-name   { flex: 1; min-width: 0; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 8px; }
  .progress-boss-name-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .progress-boss-region-pill {
    font-size: 13px; font-weight: 700; color: var(--gold); white-space: nowrap; flex-shrink: 0;
    background: rgba(200,168,75,0.12); border: 1px solid var(--gold-dim); border-radius: 3px; padding: 2px 8px;
  }
  .progress-boss-stats  { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
  .progress-boss-stat   { font-size: 16px; font-weight: 700; text-align: right; min-width: 70px; }
  .progress-boss-stat-label { font-size: 10px; font-weight: 500; color: var(--text-mute); text-transform: uppercase; letter-spacing: 1px; }

  @media (max-width: 600px) {
    /* Rank, region pill, guild count and avg pulls were all fighting for
       space on one line and overlapping -- drop the rank number (already
       implied by list order), shrink everything else, and let the stats
       wrap to their own line under the name instead of squeezing in. */
    .progress-boss-row   { flex-wrap: wrap; gap: 6px 10px; padding: 10px 12px; }
    .progress-boss-rank  { display: none; }
    .progress-boss-icon  { width: 28px; height: 28px; }
    .progress-boss-name  { font-size: 13px; gap: 6px; }
    .progress-boss-region-pill { font-size: 10px; padding: 1px 6px; }
    .progress-boss-stats { flex-basis: 100%; justify-content: flex-end; gap: 20px; }
    .progress-boss-stat  { font-size: 13px; min-width: 0; }
    .progress-boss-stat-label { font-size: 8px; }
  }

  /* Role-gated elements (e.g. the officer-only Team Management nav button).
     !important so it beats every display value the element's own rules set
     at any breakpoint -- see applyRolePermissions. */
  .role-hidden { display: none !important; }

  .form-group textarea {
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text);
    font-family: 'Rajdhani', sans-serif;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
    padding: 10px 14px;
    outline: none;
    resize: vertical;
    width: 100%;
  }
  .form-group textarea:focus { border-color: var(--gold-dim); box-shadow: 0 0 0 2px rgba(200,168,75,0.08); }
  .form-group textarea::placeholder { color: var(--text-mute); }

  /* Team Management -- Recruits */
  .recruit-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }

  .recruit-add-card { background: var(--bg2); border: 1px solid var(--border); border-radius: 6px; padding: 16px 18px; }
  .recruit-add-grid { display: grid; grid-template-columns: 1.3fr 1.2fr 1fr 1fr; gap: 12px; }
  .recruit-add-grid input[type="date"] { color-scheme: dark; } /* native calendar icon/popup match the dark theme */
  .recruit-add-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
  .recruit-lookup { font-size: 13px; color: var(--text-dim); flex: 1; min-width: 200px; }
  .recruit-lookup.found { color: var(--text); }
  .recruit-lookup.warn  { color: #ffb020; }

  .recruit-row {
    display: grid;
    grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.6fr) auto;
    gap: 14px;
    align-items: center;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 12px 16px;
    margin-bottom: 8px;
  }
  .recruit-row.closed    { opacity: 0.65; }
  .recruit-name-line { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
  .recruit-name  { font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 16px; }
  .recruit-realm { font-size: 13px; color: var(--text-dim); }
  .recruit-renamed { font-size: 12px; font-style: italic; color: var(--text-dim); cursor: help; }
  .recruit-badge {
    font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
    color: var(--gold); border: 1px solid var(--gold-dim); border-radius: 3px; padding: 1px 6px;
  }
  .recruit-sub   { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
  .recruit-links { display: flex; gap: 12px; margin-top: 4px; font-size: 12px; }
  .recruit-links a { color: var(--text-dim); text-decoration: none; } /* not --gold-dim: ~3:1 contrast at 12px, too faint */
  .recruit-links a:hover { color: var(--gold); text-decoration: underline; }
  .recruit-contact { font-size: 13px; color: var(--text); }
  .recruit-date-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .recruit-date-line .recruit-sub { margin-top: 0; }
  .recruit-date-input {
    color-scheme: dark; /* native calendar icon/popup match the dark theme */
    background: var(--bg3); border: 1px solid var(--border); border-radius: 4px; color: var(--text);
    font-family: 'Rajdhani', sans-serif; font-size: 13px; font-weight: 500; padding: 3px 6px; outline: none;
  }
  .recruit-date-input:hover, .recruit-date-input:focus { border-color: var(--gold-dim); }
  .recruit-spec-select {
    background: var(--bg3); border: 1px solid var(--border); border-radius: 3px; color: var(--text);
    font-family: inherit; font-size: 12px; padding: 1px 4px; outline: none; cursor: pointer;
  }
  .recruit-spec-select:hover, .recruit-spec-select:focus { border-color: var(--gold-dim); }
  .recruit-spec-select.changed { border-color: var(--gold); color: var(--gold); } /* unsaved pick */
  .recruit-spec-toolbar { display: flex; justify-content: flex-start; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
  .recruit-spec-toolbar:empty { display: none; }
  .recruit-spec-toolbar-note { font-size: 12px; color: var(--text-dim); margin-left: 4px; }
  .recruit-spec-hint {
    display: inline-block; margin-top: 4px; background: none; cursor: pointer;
    border: 1px dashed var(--gold-dim); border-radius: 3px; padding: 2px 8px;
    color: var(--gold); font-family: inherit; font-size: 12px;
  }
  .recruit-spec-hint:hover { background: rgba(200, 168, 75, 0.12); border-style: solid; }
  .recruit-status { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
  .recruit-status select, .recruit-notes input, .recruit-template-select {
    background: var(--bg3); border: 1px solid var(--border); border-radius: 4px; color: var(--text);
    font-family: 'Rajdhani', sans-serif; font-size: 14px; font-weight: 500; padding: 6px 8px; outline: none; width: 100%;
  }
  .recruit-status select:focus, .recruit-notes input:focus, .recruit-template-select:focus { border-color: var(--gold-dim); }
  .recruit-notes input::placeholder { color: var(--text-mute); }
  .recruit-actions { display: flex; align-items: center; gap: 8px; }
  .recruit-template-select { width: 150px; color: var(--text-dim); }
  .recruit-small-btn { padding: 4px 10px; font-size: 11px; letter-spacing: 1px; }
  .recruit-delete {
    background: none; border: 1px solid transparent; border-radius: 4px; color: var(--text-dim);
    cursor: pointer; font-size: 14px; padding: 4px 8px;
  }
  .recruit-delete:hover { color: #ff6b6b; border-color: rgba(196,30,58,0.4); }
  .recruit-empty-filter { font-size: 13px; color: var(--text-dim); padding: 20px 4px; }

  .recruit-templates { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--border); }
  .recruit-templates-header { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
  .template-card { background: var(--bg2); border: 1px solid var(--border); border-radius: 6px; padding: 12px 16px; margin-bottom: 8px; }
  .template-card-header { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
  .template-card-title  { font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 15px; color: var(--text); }
  .template-card-body {
    font-size: 13px; color: var(--text-dim); margin-top: 6px; white-space: pre-wrap; line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
  .template-count { font-size: 12px; color: var(--text-dim); margin-top: 6px; }
  .template-count.warn  { color: #ffb020; }
  .template-count.error { color: #ff6b6b; }

  .recruit-scores-note { font-size: 12px; color: var(--text-dim); padding: 10px 14px; }
  button.recruit-badge.clickable { background: none; cursor: pointer; font-family: inherit; }
  button.recruit-badge.clickable:hover { color: var(--gold2); border-color: var(--gold); }

  /* Team Management -- Applicants */
  .subtab-count {
    display: inline-block; min-width: 18px; margin-left: 6px; padding: 0 5px; border-radius: 9px;
    background: var(--gold); color: #0a0c0f; font-size: 11px; font-weight: 700; letter-spacing: 0; line-height: 18px;
  }
  .subtab-count:empty { display: none; }
  .applicant-toolbar-actions { display: flex; gap: 8px; }
  /* Every row shares the list's columns (subgrid), so dates, decisions, and
     buttons line up even though pending rows carry more buttons than decided
     ones -- a row sized on its own would shift. The first
     grid-template-columns on .applicant-row is the fallback without subgrid. */
  #applicant-list { display: grid; grid-template-columns: auto minmax(0, 1.8fr) minmax(0, 1.2fr) auto; column-gap: 14px; }
  #applicant-list > * { grid-column: 1 / -1; }
  .applicant-row { grid-template-columns: auto minmax(0, 1.8fr) minmax(0, 1.2fr) auto; grid-template-columns: subgrid; }
  .applicant-row.selected { border-color: var(--gold-dim); background: rgba(200,168,75,0.05); }
  .applicant-check { width: 16px; height: 16px; accent-color: var(--gold); cursor: pointer; margin: 0; }
  .recruit-badge.on-roster { color: #1EFF00; border-color: rgba(30,255,0,0.45); }
  .applicant-decision.resolved { color: var(--text-dim); }
  .applicant-decision.resolved.on-roster { color: #1EFF00; }

  .applicant-bulk-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    padding: 8px 16px; margin-bottom: 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg2);
  }
  .applicant-select-all { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text); cursor: pointer; }
  .applicant-select-all input { width: 16px; height: 16px; accent-color: var(--gold); margin: 0; cursor: pointer; }
  .applicant-bulk-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .applicant-clear-selection { background: none; border: none; color: var(--text-dim); font-size: 12px; cursor: pointer; text-decoration: underline; }
  .applicant-clear-selection:hover { color: var(--text); }
  .applicant-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
  .applicant-actions .btn-primary.recruit-small-btn { padding: 5px 12px; }
  .applicant-reject:hover { color: #ff6b6b; border-color: rgba(196,30,58,0.5); }
  .applicant-decision { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; margin-top: 3px; }
  .applicant-decision.promoted { color: #1EFF00; }
  .applicant-decision.rejected { color: #ff6b6b; }

  .applicant-setup-title { font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 16px; color: var(--text); margin-bottom: 4px; }
  .applicant-setup-intro { font-size: 15px; color: #fff; line-height: 1.5; margin: 6px 0 16px; }
  .applicant-setup-intro p { margin: 0 0 6px; }
  .applicant-step { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; font-size: 14px; color: var(--text); }
  .applicant-step-num {
    flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--gold-dim);
    color: var(--gold); font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center;
  }
  .applicant-email-row, .applicant-url-row { display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
  .applicant-email-row code {
    background: var(--bg3); border: 1px solid var(--border); border-radius: 4px; padding: 6px 10px;
    font-size: 13px; color: var(--gold2); word-break: break-all;
  }
  .applicant-url-row input {
    flex: 1; min-width: 220px; background: var(--bg3); border: 1px solid var(--border); border-radius: 4px; color: var(--text);
    font-family: 'Rajdhani', sans-serif; font-size: 14px; padding: 7px 10px; outline: none;
  }
  .applicant-url-row input:focus { border-color: var(--gold-dim); }
  .applicant-map-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }

  .application-qa { padding: 12px 0; border-top: 1px solid var(--border); }
  .application-qa:first-of-type { border-top: none; padding-top: 0; }
  .application-q { font-size: 12px; font-weight: 700; letter-spacing: 0.5px; color: var(--text-dim); margin-bottom: 4px; white-space: pre-wrap; }
  .application-a { font-size: 15px; color: var(--text); white-space: pre-wrap; word-break: break-word; line-height: 1.5; }
  .application-a a { color: var(--gold); }

  @media (max-width: 900px) {
    .recruit-add-grid { grid-template-columns: 1fr 1fr; }
    .recruit-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .recruit-notes, .recruit-actions { grid-column: span 1; }
  }
  @media (max-width: 900px) {
    #applicant-list { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); }
    .applicant-row { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); grid-template-columns: subgrid; }
    .applicant-actions { grid-column: 2 / -1; justify-content: flex-start; }
  }
  @media (max-width: 600px) {
    .recruit-add-grid { grid-template-columns: 1fr; }
    .recruit-row { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    #applicant-list { grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; }
    .applicant-row { grid-template-columns: auto minmax(0, 1fr); grid-template-columns: subgrid; gap: 10px; }
    .applicant-row > .recruit-contact, .applicant-row > .applicant-actions { grid-column: 2 / -1; }
    .recruit-template-select { flex: 1; width: auto; }
  }

  /* ── NEXT SEASON SURVEY ── */
  /* Raider banner (top of every dashboard tab) */
  .survey-banner {
    display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
    background: rgba(200,168,75,0.08); border: 1px solid var(--gold-dim); border-radius: 6px;
    padding: 12px 16px; margin-bottom: 18px;
  }
  .survey-banner.answered { background: var(--bg2); border-color: var(--border); }
  .survey-banner-text { font-size: 14px; color: var(--text); line-height: 1.4; }
  .survey-banner-text strong { color: var(--gold); }
  .survey-banner-actions { display: flex; align-items: center; gap: 8px; }
  .survey-banner-dismiss {
    background: none; border: none; color: var(--text-dim); font-size: 18px; line-height: 1; cursor: pointer; padding: 2px 6px;
  }
  .survey-banner-dismiss:hover { color: var(--text); }

  /* The survey form */
  .survey-intro { font-size: 17px; color: var(--text); line-height: 1.5; white-space: pre-wrap; margin-bottom: 20px; }
  .survey-intro a, .survey-ack-prompt a { color: var(--gold); }
  .survey-q { margin-bottom: 20px; }
  .survey-q-label { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
  .survey-item-prompt { white-space: pre-wrap; line-height: 1.45; }
  .survey-item-prompt a { color: var(--gold); }
  .survey-q-hint { font-size: 14px; color: var(--text-dim); margin: -2px 0 8px; line-height: 1.4; }
  .survey-req { color: #ff6b6b; }
  .survey-choice-row { display: flex; flex-wrap: wrap; gap: 8px; }
  .survey-choice {
    display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
    background: var(--bg3); border: 1px solid var(--border); border-radius: 4px;
    padding: 8px 12px; font-size: 16px; color: var(--text);
  }
  .survey-choice:hover { border-color: var(--gold-dim); }
  .survey-choice:has(input:checked) { border-color: var(--gold); color: var(--gold); }
  .survey-choice input { accent-color: var(--gold); margin: 0; }
  .survey-ack { background: var(--bg3); border: 1px solid var(--border); border-radius: 6px; padding: 12px 14px; }
  .survey-ack .survey-choice { background: var(--bg2); }
  .survey-ack-prompt { font-size: 16px; color: var(--text); line-height: 1.5; white-space: pre-wrap; margin-bottom: 12px; }
  .survey-scale { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .survey-scale-label { font-size: 14px; color: var(--text-dim); }
  .survey-dialog .modal-body { font-size: 15px; }
  .survey-dialog .form-group label { font-size: 13px; }
  .survey-dialog .season-toggle { font-size: 14px; }
  .survey-form-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
  .survey-form-actions .recruit-sub { margin: 0 auto 0 0; }

  /* Officer dashboard (Team Management > Next Season) */
  .season-header {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap;
    background: var(--bg2); border: 1px solid var(--border); border-radius: 6px; padding: 16px 18px; margin-bottom: 16px;
  }
  .season-title { font-family: 'Cinzel', serif; font-size: 20px; color: var(--gold); margin: 2px 0 4px; }
  .season-header-actions { display: flex; gap: 8px; flex-wrap: wrap; }
  .season-survey-select {
    background: var(--bg3); border: 1px solid var(--border); border-radius: 4px; color: var(--text-dim);
    font-family: 'Rajdhani', sans-serif; font-size: 13px; padding: 3px 6px; margin-bottom: 6px;
  }
  .season-stats { margin-bottom: 16px; }
  .season-stat-of { font-size: 18px; color: var(--text-dim); }
  .season-section { background: var(--bg2); border: 1px solid var(--border); border-radius: 6px; padding: 14px 18px; margin-bottom: 16px; }
  .season-section-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
  .season-section-title { font-size: 15px; font-weight: 700; color: var(--text); letter-spacing: 0.5px; }
  .season-chips { display: flex; flex-wrap: wrap; gap: 6px; }
  .season-chip {
    font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 14px;
    background: var(--bg3); border: 1px solid var(--border); border-radius: 12px; padding: 2px 10px;
  }
  .season-chips.muted .season-chip { opacity: 0.6; }
  .season-all-in { color: #1EFF00; font-size: 14px; }
  .season-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-dim); cursor: pointer; }
  .season-toggle input { accent-color: var(--gold); }
  .season-gaps {
    font-size: 13px; color: var(--text); background: rgba(255,107,107,0.08); border: 1px solid rgba(255,107,107,0.35);
    border-radius: 4px; padding: 8px 12px; margin-bottom: 12px; line-height: 1.5;
  }
  .season-gaps strong { color: #ff6b6b; }
  .season-gaps.ok { background: rgba(30,255,0,0.06); border-color: rgba(30,255,0,0.3); color: #1EFF00; }
  .season-role-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
  .season-role-card { background: var(--bg3); border: 1px solid var(--border); border-radius: 6px; padding: 12px 14px; }
  .season-role-card.short { border-color: rgba(255,107,107,0.5); }
  .season-role-count { font-family: 'Rajdhani', sans-serif; font-size: 26px; font-weight: 700; color: var(--text); margin: 2px 0 6px; }
  .season-role-list { font-size: 13px; line-height: 1.6; }
  .season-role-list .recruit-name { font-size: 14px; }
  .season-role-flex { font-size: 12px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); line-height: 1.6; }
  .season-role-flex .recruit-name { font-size: 13px; }
  .season-question { margin-bottom: 18px; }
  .season-question:last-child { margin-bottom: 0; }
  .season-question-prompt { font-size: 14px; color: var(--text); line-height: 1.4; margin-bottom: 8px; }
  .season-bars { display: flex; flex-direction: column; gap: 6px; max-width: 760px; }
  .season-bar { display: grid; grid-template-columns: minmax(90px, 260px) 1fr 32px; align-items: center; gap: 10px; font-size: 13px; }
  .season-bar-label { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .season-bar.flagged .season-bar-label { color: #ff9f43; }
  .season-bar-track { background: var(--bg3); border-radius: 3px; height: 12px; overflow: hidden; }
  .season-bar-track > div { background: linear-gradient(90deg, var(--gold-dim), var(--gold)); height: 100%; min-width: 2px; }
  .season-bar.flagged .season-bar-track > div { background: linear-gradient(90deg, #8a5a22, #ff9f43); }
  .season-bar-count { text-align: right; color: var(--text); font-weight: 700; }
  .season-flag { font-size: 13px; color: var(--text); padding: 4px 0; line-height: 1.5; }
  .season-flag strong { color: #ff9f43; }
  .season-response { border-top: 1px solid var(--border); padding: 12px 0; }
  .season-response:first-of-type { border-top: none; padding-top: 2px; }
  .season-response-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
  .season-status {
    font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
    border-radius: 3px; padding: 1px 6px; border: 1px solid;
  }
  .season-status.status-returning     { color: #1EFF00; border-color: rgba(30,255,0,0.4); }
  .season-status.status-unsure        { color: var(--gold); border-color: var(--gold-dim); }
  .season-status.status-not_returning { color: #ff6b6b; border-color: rgba(255,107,107,0.4); }
  .season-response-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; font-size: 13px; color: var(--text); line-height: 1.5; }
  .season-k { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-dim); margin-bottom: 2px; }
  .season-answer { font-size: 13px; color: var(--text); margin-top: 8px; line-height: 1.5; }
  .season-answer > div:last-child { white-space: pre-wrap; } /* keep line breaks in typed answers */
  .season-answer a { color: var(--gold); }
  .season-answer-q { font-size: 12px; color: var(--text-dim); margin-bottom: 2px; white-space: normal; }
  .season-answer-flag { color: #ff9f43; font-weight: 700; }

  /* Survey editor */
  .survey-editor-section { border-top: 1px solid var(--border); padding-top: 16px; margin-top: 18px; }
  .survey-editor-section .season-section-title { font-size: 18px; margin-bottom: 4px; }
  .survey-editor-note { font-size: 14px; color: var(--text-dim); margin-top: 6px; line-height: 1.4; }
  .survey-editor-item { background: var(--bg3); border: 1px solid var(--border); border-radius: 6px; padding: 14px 16px; margin-bottom: 12px; }
  .survey-editor-item .form-group input, .survey-editor-item .form-group select, .survey-editor-item .form-group textarea { background: var(--bg2); }
  .survey-editor-item-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
  .survey-editor-item-title { font-size: 16px; font-weight: 700; color: var(--text); }
  .survey-editor-item-tools { display: flex; align-items: center; gap: 6px; }
  .survey-editor-tag {
    font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
    color: var(--gold); border: 1px solid var(--gold-dim); border-radius: 3px; padding: 2px 8px;
  }
  .survey-editor-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; }
  .survey-editor-row.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .survey-editor-required { display: flex; align-items: flex-end; padding-bottom: 12px; }
  .survey-editor-prompt { margin-top: 10px; }
  .survey-editor-options { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; align-items: flex-start; }
  .survey-editor-sub { font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--text-dim); }
  .survey-editor-sub .recruit-sub { letter-spacing: 0; text-transform: none; font-weight: 500; }
  .survey-editor-option { display: flex; align-items: center; gap: 10px; width: 100%; }
  .survey-editor-option input[type="text"] {
    flex: 1; min-width: 0; background: var(--bg2); border: 1px solid var(--border); border-radius: 4px; color: var(--text);
    font-family: 'Rajdhani', sans-serif; font-size: 16px; font-weight: 500; padding: 8px 12px; outline: none;
  }
  .survey-editor-option input[type="text"]:focus { border-color: var(--gold-dim); }
  .survey-editor-icon {
    background: none; border: 1px solid var(--border); border-radius: 4px; color: var(--text-dim);
    cursor: pointer; font-size: 14px; line-height: 1; padding: 5px 9px;
  }
  .survey-editor-icon:hover:not(:disabled) { color: var(--text); border-color: var(--gold-dim); }
  .survey-editor-icon:disabled { opacity: 0.3; cursor: default; }
  .survey-editor-remove { background: none; border: none; color: #ff6b6b; font-size: 13px; cursor: pointer; padding: 4px 6px; }
  .survey-editor-remove:hover { text-decoration: underline; }
  .survey-editor-add { margin-top: 4px; max-width: 420px; }
  .survey-editor-add select { color: var(--gold); cursor: pointer; }

  @media (max-width: 900px) {
    .season-role-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .season-response-grid { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 600px) {
    .season-role-grid, .season-response-grid, .survey-editor-row, .survey-editor-row.three { grid-template-columns: 1fr; }
  }

  /* ── JOIN ORDER ── */
  .join-row {
    display: flex; align-items: center; gap: 14px; padding: 8px 4px;
    border-top: 1px solid var(--border);
  }
  .join-row:first-child { border-top: none; }
  .join-row.over-cap .join-num { color: var(--text-dim); }
  .join-row.left { opacity: 0.6; }
  .join-num { font-family: 'Rajdhani', sans-serif; font-size: 20px; font-weight: 700; color: var(--gold); min-width: 34px; text-align: right; }
  .join-main { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
  .join-tools { display: flex; align-items: center; gap: 6px; }
  .join-moveto {
    width: 56px; background: var(--bg3); border: 1px solid var(--border); border-radius: 4px; color: var(--text);
    font-family: 'Rajdhani', sans-serif; font-size: 14px; padding: 4px 6px; outline: none; text-align: center;
  }
  .join-moveto:focus { border-color: var(--gold-dim); }
  .join-cap {
    margin: 6px 0; padding: 6px 10px; border-radius: 4px; font-size: 12px; font-weight: 700; letter-spacing: 1px;
    text-transform: uppercase; color: var(--gold); background: rgba(200,168,75,0.08); border: 1px dashed var(--gold-dim);
  }
  .join-count { text-align: right; }
  .join-count .stat-value { font-size: 28px; }
  .join-add-chip { cursor: pointer; }
  .join-add-chip:hover { border-color: var(--gold-dim); }
  /* "#12" on Raid Night pills and checklist rows */
  .join-order-badge {
    margin-left: auto; flex-shrink: 0; font-family: 'Rajdhani', sans-serif; font-size: 11px; font-weight: 700;
    color: #fff; background: rgba(0,0,0,0.45); border-radius: 8px; padding: 1px 6px; line-height: 1.4;
  }
  .join-order-badge.over-cap { background: rgba(0,0,0,0.25); color: #ffd98a; }
  .join-order-badge + span { margin-left: 6px !important; } /* an "Out" tag after it */
  #planner-join-order-btn.active { border-color: var(--gold); color: var(--gold); }
  /* Raid Night header: the main buttons, with Show Order Joined on a row below */
  .planner-header-controls { display: flex; flex-direction: column; align-items: flex-end; }
  #planner-join-order-btn { margin-top: 8px; }
  @media (max-width: 600px) {
    .join-row { flex-wrap: wrap; }
    .join-tools { width: 100%; justify-content: flex-end; }
  }

  /* ── ROLES (Team Management) ── */
  .roles-legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; margin-bottom: 16px; }
  .roles-legend-item { display: flex; align-items: baseline; gap: 10px; font-size: 13px; color: var(--text-dim); line-height: 1.4; }
  .roles-legend-item .roles-badge { flex-shrink: 0; min-width: 64px; text-align: center; }
  .roles-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 4px; border-top: 1px solid var(--border); flex-wrap: wrap; }
  .roles-row:first-child { border-top: none; }
  .roles-main { min-width: 0; }
  .roles-name { font-size: 15px; font-weight: 700; color: var(--text); }
  .roles-chars { font-size: 13px; margin-top: 2px; font-family: 'Rajdhani', sans-serif; font-weight: 600; }
  .roles-none { color: var(--text-mute); font-weight: 500; }
  .roles-control { display: flex; align-items: center; gap: 8px; }
  .roles-select {
    background: var(--bg3); border: 1px solid var(--border); border-radius: 4px; color: var(--text);
    font-family: 'Rajdhani', sans-serif; font-size: 14px; font-weight: 600; padding: 5px 8px; cursor: pointer; outline: none;
  }
  .roles-select:focus, .roles-select:hover { border-color: var(--gold-dim); }
  .roles-badge {
    font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
    border: 1px solid var(--border); border-radius: 3px; padding: 2px 8px; color: var(--text-dim);
  }
  .roles-badge.role-owner   { color: var(--gold); border-color: var(--gold-dim); }
  .roles-badge.role-officer { color: #69CCF0; border-color: rgba(105,204,240,0.4); }
  .roles-badge.role-member  { color: var(--text); }
  @media (max-width: 700px) { .roles-legend { grid-template-columns: 1fr; } }

  /* A character Blizzard confirmed is on this player's Battle.net account */
  .bnet-verified { color: #3fa9ff; font-size: 11px; font-weight: 700; letter-spacing: 0.5px; cursor: help; }
  /* Guild Members > + Assign: a character to pick */
  .assign-option:hover { background: var(--bg4); }

  /* Create / Join Guild: the guilds your Battle.net characters are in */
  .my-guilds { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
  .my-guild { display: block; width: 100%; box-sizing: border-box; text-align: left; padding: 10px 14px; background: var(--bg3); border: 1px solid var(--border); border-radius: 6px; color: var(--text); font-family: 'Rajdhani', sans-serif; text-transform: none; letter-spacing: 0; }
  button.my-guild { cursor: pointer; }
  button.my-guild:hover:not(:disabled) { border-color: var(--gold-dim); }
  .my-guild.selected { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
  .my-guild:disabled { opacity: 0.55; cursor: not-allowed; }
  .my-guild-name { font-size: 16px; font-weight: 700; color: var(--text); }
  .my-guild-sub { font-size: 13px; color: var(--text-mute); margin-top: 2px; }
  .my-guild-note { font-size: 12px; color: var(--text-dim); margin-top: 4px; }
  .my-guild-team { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); font-size: 15px; }
  .my-guild-team .btn-primary { padding: 5px 16px; font-size: 12px; }
  .my-guild-joined { font-size: 12px; color: var(--text-mute); }
  .my-guilds-note { font-size: 13px; color: var(--text-mute); line-height: 1.5; }
  .my-guilds-note .btn-secondary { padding: 3px 10px; font-size: 12px; margin-left: 6px; }
  .my-guilds-manual { display: inline-block; margin-top: 10px; font-size: 13px; color: var(--gold-dim); }

  /* Add Character: name suggestions from Raider.io */
  .name-suggest-wrap { position: relative; }
  .name-suggest { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; margin-top: 2px; max-height: 260px; overflow-y: auto;
    background: var(--bg2); border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,0.45); }
  .name-suggest-item { display: flex; align-items: baseline; gap: 8px; width: 100%; padding: 8px 12px; background: none; border: 0;
    border-bottom: 1px solid var(--border); color: var(--text); font-family: 'Rajdhani', sans-serif; font-size: 14px; text-align: left; cursor: pointer; }
  .name-suggest-item:last-child { border-bottom: 0; }
  .name-suggest-item:hover, .name-suggest-item.active { background: var(--bg3); }
  .name-suggest-name { font-weight: 700; }
  .name-suggest-realm { color: var(--text-mute); font-size: 12px; }
  .name-suggest-item .recruit-badge { margin-left: auto; }
  .cm-role-label { color: var(--text-mute); font-weight: 400; letter-spacing: 0.5px; text-transform: none; }