:root {
    --bg:        #0d0e10;
    --surface:   #14161a;
    --card:      #1b1e24;
    --border:    #2a2d35;
    --border2:   #363a44;
    --gold:      #c8a84b;
    --gold-dim:  #8a6f2e;
    --text:      #d4cfc8;
    --text-dim:  #7a7670;
    --text-mute: #4a4845;
    --danger:    #c0392b;
    --success:   #27ae60;
    --radius:    6px;

    /* WoW class colors */
    --warrior:      #c79c6e;
    --paladin:      #f58cba;
    --hunter:       #abd473;
    --rogue:        #fff569;
    --priest:       #ffffff;
    --shaman:       #0070de;
    --mage:         #69ccf0;
    --warlock:      #9482c9;
    --druid:        #ff7d0a;
  }

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

  body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }

  /* ── TOP BAR ─────────────────────────────────── */
  header {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 24px;
    height: 56px;
    position: sticky;
    top: 0;
    z-index: 100;
  }
  header h1 {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--gold);
    letter-spacing: 0.01em;
    white-space: nowrap;
  }
  .nav-tabs {
    display: flex;
    gap: 2px;
    flex: 1;
  }
  .nav-tab {
    padding: 6px 18px;
    border: none;
    background: none;
    color: var(--text-dim);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: var(--radius);
    transition: color .15s, background .15s;
  }
  .nav-tab:hover { color: var(--text); background: var(--card); }
  .nav-tab.active { color: var(--gold); background: var(--card); }

  .header-actions { display: flex; gap: 8px; margin-left: auto; }

  /* ── BUTTONS ─────────────────────────────────── */
  .btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px;
    border-radius: var(--radius);
    border: 1px solid var(--border2);
    background: var(--card);
    color: var(--text);
    font-family: 'Inter', sans-serif;
    font-size: 13px; font-weight: 600; letter-spacing: 0.04em;
    cursor: pointer; transition: all .15s; white-space: nowrap;
  }
  .btn:hover { border-color: var(--gold-dim); color: var(--gold); }
  .btn-gold {
    background: var(--gold); color: #1a1200;
    border-color: var(--gold); font-weight: 700;
  }
  .btn-gold:hover { background: #d4b45a; color: #1a1200; }
  .btn-sm { padding: 4px 10px; font-size: 12px; }
  .btn-danger { border-color: #5a2020; color: #e05050; }
  .btn-danger:hover { border-color: var(--danger); color: #ff6b6b; background: #2a1515; }
  .btn-ghost { background: none; border-color: transparent; }
  .btn-ghost:hover { background: var(--card); border-color: var(--border); color: var(--text); }

  /* ── LAYOUT ──────────────────────────────────── */
  .page { display: none; padding: 24px; max-width: 1438px; margin: 0 auto; width: 100%; }
  .page.active { display: block; flex: 1; }

  .section-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 16px;
  }
  .section-title {
    font-family: 'Inter', sans-serif;
    font-size: 13px; font-weight: 600;
    color: var(--gold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  /* ── CARDS ───────────────────────────────────── */
  .card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
  }

  /* ── ROSTER GROUPING ────────────────────────── */
  .roster-group-btns { display:flex; gap:2px; }
  .rgb {
    padding:4px 10px; border:1px solid var(--border2); background:var(--card);
    color:var(--text-dim); font-family:'Inter', sans-serif;
    font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
    cursor:pointer; border-radius:3px; transition:all .15s;
  }
  .rgb:hover { color:var(--text); border-color:var(--gold-dim); }
  .rgb.active { background:var(--gold); color:#1a1200; border-color:var(--gold); }
  .roster-group-label {
    grid-column: 1/-1;
    font-family:'Inter', sans-serif; font-size:11px; font-weight:700;
    letter-spacing:.1em; text-transform:uppercase; color:var(--text-mute);
    padding: 6px 0 4px; border-bottom:1px solid var(--border); margin-bottom:4px;
  }

  /* ── CANVAS ─────────────────────────────────── */
  .canvas-toolbar {
    display:flex; align-items:center; gap:8px; flex-wrap:wrap;
    padding:8px 12px; background:var(--card); border:1px solid var(--border);
    border-radius:var(--radius) var(--radius) 0 0; border-bottom:none;
    width:100%; box-sizing:border-box;
  }
  .canvas-tool-btn {
    padding:5px 12px; border:1px solid var(--border2); background:var(--surface);
    color:var(--text); font-family:'Inter', sans-serif;
    font-size:12px; font-weight:600; letter-spacing:.04em;
    cursor:pointer; border-radius:3px; transition:all .15s;
  }
  .canvas-tool-btn:hover { border-color:var(--gold-dim); color:var(--gold); }
  .canvas-wrap {
    border:1px solid var(--border); border-radius:0 0 var(--radius) var(--radius);
    background:var(--bg); overflow:hidden; position:relative;
    width:100%; box-sizing:border-box;
  }
  .pp-canvas-wrap { user-select: none; }
  .pp-canvas-wrap.is-zoomed { cursor: grab; }
  .pp-canvas-wrap.is-panning { cursor: grabbing; }
  .enc-canvas {
    position:relative; min-height:500px; width:1040px; /* 26 grids × 40px */
    transform-origin:top left;
    background-image: radial-gradient(circle, #2a2d35 1px, transparent 1px);
    background-size: 20px 20px;
  }
  .enc-canvas.grid-big {
    background-image:
      linear-gradient(var(--border) 1px, transparent 1px),
      linear-gradient(90deg, var(--border) 1px, transparent 1px);
    background-size: 40px 40px, 40px 40px;
  }
  .enc-canvas.grid-medium {
    background-image:
      linear-gradient(var(--border) 1px, transparent 1px),
      linear-gradient(90deg, var(--border) 1px, transparent 1px),
      linear-gradient(rgba(42,45,53,.6) 1px, transparent 1px),
      linear-gradient(90deg, rgba(42,45,53,.6) 1px, transparent 1px);
    background-size: 40px 40px, 40px 40px, 20px 20px, 20px 20px;
  }
  .enc-canvas.grid-small {
    background-image:
      linear-gradient(var(--border) 1px, transparent 1px),
      linear-gradient(90deg, var(--border) 1px, transparent 1px),
      linear-gradient(rgba(42,45,53,.6) 1px, transparent 1px),
      linear-gradient(90deg, rgba(42,45,53,.6) 1px, transparent 1px),
      linear-gradient(rgba(42,45,53,.4) 1px, transparent 1px),
      linear-gradient(90deg, rgba(42,45,53,.4) 1px, transparent 1px);
    background-size: 40px 40px, 40px 40px, 20px 20px, 20px 20px, 10px 10px, 10px 10px;
  }

  /* Canvas cell — no top bar, drag via entire body */
  .c-cell {
    position:absolute; min-width:20px; min-height:20px; /* 0.5 grid minimum */
    border:1px solid var(--border2); border-radius:var(--radius);
    background:var(--card); box-shadow:0 2px 8px rgba(0,0,0,.3);
    display:flex; flex-direction:column; overflow:hidden;
    user-select:none; cursor:move;
  }
  .c-cell:hover { border-color:var(--gold-dim); box-shadow:0 2px 12px rgba(0,0,0,.5); }
  .c-cell.selected { border-color:var(--gold) !important; box-shadow:0 0 0 1px var(--gold),0 0 6px rgba(200,168,75,.3) !important; }
  .c-cell.exclusive-conflict { border-color:#e53e3e !important; box-shadow:0 0 0 1px #e53e3e,0 0 8px rgba(229,62,62,.4) !important; }
  /* Cell whose {@…} reference the announcement editor caret is currently on —
     blue to match the {@cell} token colour in the editor. */
  .c-cell--ref-highlight { border-color:#8fd0ff !important; box-shadow:0 0 0 2px #8fd0ff,0 0 12px rgba(143,208,255,.55) !important; animation:refHighlightPulse 1.2s ease-in-out infinite; z-index:50; }
  @keyframes refHighlightPulse { 0%,100% { box-shadow:0 0 0 2px #8fd0ff,0 0 8px rgba(143,208,255,.4); } 50% { box-shadow:0 0 0 2px #8fd0ff,0 0 16px rgba(143,208,255,.7); } }
  .c-cell--mark { border-color:transparent; background:transparent !important; }
  .c-cell--mark:hover { border-color:var(--gold-dim); }
  #selectionBox {
    position:absolute; border:1px dashed var(--gold-dim); background:rgba(200,168,75,.06);
    pointer-events:none; display:none; z-index:500;
  }
  .uniform-resize-bar {
    display:none; align-items:center; gap:8px; flex-wrap:wrap;
    padding:6px 10px; background:var(--card); border:1px solid var(--gold-dim);
    border-radius:var(--radius); margin-bottom:4px; font-size:12px;
    width:100%; box-sizing:border-box;
  }
  .uniform-resize-bar.visible { display:flex; }
  .c-cell-body { flex:1; overflow:hidden; }

  /* Text cell */
  .c-text-display {
    font-family:'Barlow',sans-serif; font-size:14px;
    line-height:1.4; color:var(--text);
    white-space:pre-wrap; word-break:break-word;
    padding:6px 8px; height:100%; overflow:hidden;
  }
  .c-text-display b, .c-text-display strong { color:var(--gold); }
  .c-text-display svg { vertical-align:middle; display:inline; margin:0 1px; }

  /* Assignment cell */
  .c-assign-body {
    font-family:'Barlow',sans-serif; font-size:14px;
    display:flex; flex-direction:column;
    height:100%; overflow:hidden;
  }
  .c-assign-filters {
    display:flex; flex-wrap:wrap; gap:2px;
    padding:3px 6px; border-bottom:1px solid var(--border);
    flex-shrink:0;
  }
  .c-assign-player {
    flex:1; display:flex; align-items:center; gap:5px;
    padding:4px 8px; overflow:hidden;
  }
  .c-assign-name { font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }
  .c-assign-empty { color:var(--text-mute); font-style:italic; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .c-assign-excl {
    font-family:'Inter', sans-serif; font-size:9px; font-weight:700;
    letter-spacing:.06em; text-transform:uppercase;
    color:#e0a030; background:rgba(200,150,0,.15);
    padding:1px 4px; border-radius:2px; flex-shrink:0;
  }
  .c-assign-mimic-badge {
    font-family:'Inter', sans-serif; font-size:9px; font-weight:700;
    letter-spacing:.06em; text-transform:uppercase;
    color:#5b9bd5; background:rgba(91,155,213,.12);
    padding:1px 4px; border-radius:2px; flex-shrink:0;
    border:1px solid rgba(91,155,213,.3);
  }
  .c-assign-mimic-broken {
    color:#e0a030; background:rgba(200,150,0,.12); border-color:rgba(200,150,0,.3);
  }
  .mimic-suggestions {
    position:absolute; left:0; right:0; top:100%;
    z-index:50;
    background:var(--card);
    border:1px solid var(--border2);
    border-radius:var(--radius);
    margin-top:2px;
    max-height:180px;
    overflow-y:auto;
    box-shadow:0 8px 24px rgba(0,0,0,.6);
  }

  /* Image cell */
  .c-image-body { padding:0; display:flex; align-items:center; justify-content:center; background:#0a0a0c; }
  .c-image-body img { width:100%; height:100%; object-fit:contain; display:block; }
  .c-image-placeholder { color:var(--text-mute); font-size:12px; text-align:center; padding:16px; }

  /* Resize handle */
  .c-resize {
    position:absolute; bottom:0; right:0; width:14px; height:14px;
    cursor:se-resize; z-index:5;
  }
  .c-resize::after {
    content:''; position:absolute; right:3px; bottom:3px;
    width:7px; height:7px;
    border-right:2px solid var(--border2); border-bottom:2px solid var(--border2);
  }

  /* ── ENCOUNTER EDITOR LAYOUT (canvas + right panel) ── */
  .encounter-editor-layout { display:flex; gap:16px; align-items:flex-start; }
  .encounter-editor { flex:1; min-width:0; max-width:1042px; display:flex; flex-direction:column; gap:10px; }

  /* Cell property panel */
  .cell-panel {
    width: 280px;
    background: var(--card);
    border: 1px solid var(--gold-dim);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 100px);
    overflow-y: auto;

    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
  }
  .cell-panel--hidden { display:none; }
  .cell-panel-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 12px 8px; border-bottom:1px solid var(--border); flex-shrink:0;
  }
  .cell-panel-title {
    font-family:'Inter', sans-serif; font-size:12px; color:var(--gold);
    letter-spacing:.06em; text-transform:uppercase;
  }
  .cell-panel-body {
    padding:12px; flex:1; overflow-y:auto;
    display:flex; flex-direction:column; gap:10px;
  }
  .cell-panel-footer {
    padding:8px 12px; border-top:1px solid var(--border);
    display:flex; gap:8px; flex-shrink:0;
  }
  .cell-panel-footer:empty { display:none; }
  .cell-panel-section-label {
    font-family:'Inter', sans-serif; font-size:10px; font-weight:700;
    letter-spacing:.08em; text-transform:uppercase; color:var(--text-mute);
    margin-bottom:4px;
  }
  .cell-panel-layer-row { display:flex; gap:4px; }
  .cell-panel-layer-row .btn { flex:1; padding:3px 6px; font-size:11px; justify-content:center; }
  .cell-panel-divider { height:1px; background:var(--border); }
  .cell-panel-delete-group { padding-top:8px; border-top:1px solid var(--border); }

  /* Drag-to-canvas ghost */
  .cell-drag-ghost {
    position:fixed; pointer-events:none; z-index:500;
    opacity:.7; border:2px dashed var(--gold-dim); border-radius:var(--radius);
    background:var(--card); display:flex; align-items:center; justify-content:center;
    font-family:'Inter', sans-serif; font-size:11px; font-weight:700;
    letter-spacing:.06em; text-transform:uppercase; color:var(--gold);
    transform:translate(-50%,-50%);
  }

  /* ── ROSTER PAGE ─────────────────────────────── */
  .roster-layout { display: grid; grid-template-columns: 340px 1fr; gap: 20px; }

  .import-area textarea {
    width: 100%; height: 160px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-family: 'Inter', monospace;
    font-size: 12px;
    padding: 10px;
    resize: vertical;
    outline: none;
    transition: border-color .15s;
  }
  .import-area textarea:focus { border-color: var(--gold-dim); }
  .import-hint { color: var(--text-mute); font-size: 11px; margin-top: 6px; line-height: 1.5; }

  .roster-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 8px;
  }
  .player-card {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: border-color .15s;
  }
  .player-card:hover { border-color: var(--border2); }
  .player-card.dragging { opacity: .4; }
  .player-card.drag-over { border-color: var(--gold-dim); background: rgba(200,168,75,.08); }
  .class-dot {
    width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
  }
  .player-name { font-family: 'Barlow', sans-serif; font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .role-badge {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
    padding: 2px 5px; border-radius: 3px;
    text-transform: uppercase;
  }
  .role-Tank    { background: #1a2a3a; color: #5b9bd5; }
  .role-Healer  { background: #1a2e1a; color: #5bc45b; }
  .role-DPS     { background: #2e1a1a; color: #c45b5b; }
  .role-Support { background: #2a2a1a; color: #c4b45b; }

  /* ── ENCOUNTERS PAGE ─────────────────────────── */
  .encounters-layout { display: grid; grid-template-columns: 280px 1fr; gap: 20px; }

  .encounter-list { display: flex; flex-direction: column; gap: 6px; }
  .encounter-item {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color .15s;
    position: relative; overflow: hidden;
  }
  .encounter-item:hover { border-color: var(--border2); }
  .encounter-item.active { border-color: var(--gold-dim); }
  .encounter-item-name { flex: 1; font-weight: 500; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .encounter-item-stats { font-size: 10px; color: var(--text-mute); white-space: nowrap; flex-shrink: 0; }
  .encounter-item-actions {
    position: absolute; right: 0; top: 0; bottom: 0;
    display: flex; align-items: center; gap: 2px;
    padding: 0 8px 0 28px;
    background: linear-gradient(to right, transparent, var(--surface) 28px);
    opacity: 0; pointer-events: none;
    transition: opacity .15s;
  }
  .encounter-item:hover .encounter-item-actions { opacity: 1; pointer-events: auto; }
  .encounter-item-actions .btn-ghost { padding: 2px 6px; font-size: 11px; }

  .encounter-editor-header { display: flex; align-items: center; gap: 10px; }

  /* Accent color swatches (folders, cells) */
  .acc-swatches { display:flex; gap:4px; align-items:center; }
  .acc-swatch {
    width:18px; height:18px; border-radius:50%; cursor:pointer;
    border:2px solid transparent; transition:border-color .15s, transform .1s;
    flex-shrink:0;
  }
  .acc-swatch:hover { transform:scale(1.2); }
  .acc-swatch.active { border-color: #fff; }

  /* Icon cell picker */
  .icon-results-grid {
    display:grid; grid-template-columns:repeat(auto-fill, minmax(40px, 1fr)); gap:4px;
    max-height:260px; overflow-y:auto; padding:4px;
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  }
  .icon-results-msg { grid-column:1 / -1; color:var(--text-mute); font-size:12px; padding:10px; text-align:center; }
  .icon-tile {
    display:flex; align-items:center; justify-content:center; padding:2px; cursor:pointer;
    background:transparent; border:2px solid transparent; border-radius:6px; transition:border-color .1s, background .1s;
  }
  .icon-tile img { display:block; border-radius:3px; }
  .icon-tile:hover { background:var(--card); border-color:var(--border2); }
  .icon-tile.active { border-color:var(--gold); }
  /* In-client icons with no CDN thumbnail: show a "?" placeholder (still pickable; renders in-game). */
  .icon-tile--noimg { min-width:38px; min-height:38px; }
  .icon-tile--noimg::after { content:'?'; color:var(--text-mute); font-size:15px; font-weight:700; font-family:'Barlow Condensed',sans-serif; }

  /* Encounter editor accent color dropdown */
  .acc-dropdown { position:relative; }
  .acc-dropdown summary { list-style:none; }
  .acc-dropdown summary::-webkit-details-marker { display:none; }
  .acc-dropdown-trigger {
    display:flex; align-items:center; gap:6px; cursor:pointer; user-select:none;
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
    padding:3px 8px; color:var(--text-dim); font-size:12px;
  }
  .acc-dropdown-trigger:hover { border-color:var(--border2); color:var(--text); }
  .acc-chevron { opacity:.5; transition:transform .15s; flex-shrink:0; }
  .acc-dropdown[open] .acc-chevron { transform:rotate(180deg); }
  .acc-dropdown-menu {
    position:absolute; top:calc(100% + 4px); left:0; z-index:200;
    background:var(--surface); border:1px solid var(--border2); border-radius:var(--radius);
    padding:4px; min-width:100%; box-shadow:0 4px 12px rgba(0,0,0,.5);
  }
  .acc-option {
    display:flex; align-items:center; gap:8px; padding:5px 10px;
    border-radius:4px; cursor:pointer; color:var(--text-dim); font-size:12px; white-space:nowrap;
  }
  .acc-option:hover { background:var(--card); color:var(--text); }
  .acc-option.active { color:var(--text); }
  .acc-opt-dot, .acc-select-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
  .encounter-name-input {
    flex: 1;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-family: 'Inter', sans-serif;
    font-size: 16px; font-weight: 600;
    padding: 8px 12px;
    outline: none;
    transition: border-color .15s;
  }
  .encounter-name-input:focus { border-color: var(--gold-dim); }

  .filter-tag {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
    padding: 2px 6px; border-radius: 3px;
    text-transform: uppercase; user-select: none;
  }
  .filter-tag.role-Tank    { background: #1a2a3a; color: #5b9bd5; border: 1px solid #2a3a50; }
  .filter-tag.role-Healer  { background: #1a2e1a; color: #5bc45b; border: 1px solid #2a3e2a; }
  .filter-tag.role-DPS     { background: #2e1a1a; color: #c45b5b; border: 1px solid #3e2a2a; }
  .filter-tag.role-Support { background: #2a2a1a; color: #c4b45b; border: 1px solid #3a3a2a; }
  .filter-section-label {
    font-family: 'Inter', sans-serif;
    font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--text-dim);
    margin-bottom: 6px; margin-top: 12px;
  }
  .filter-chips { display: flex; flex-wrap: wrap; gap: 6px; }
  .filter-chip {
    padding: 4px 10px; border-radius: 20px;
    border: 1px solid var(--border2);
    font-family: 'Inter', sans-serif;
    font-size: 12px; font-weight: 600;
    cursor: pointer; transition: all .15s; user-select: none;
  }
  .filter-chip.selected { border-color: var(--gold); color: var(--gold); background: rgba(200,168,75,.12); }
  .filter-chip:not(.selected) { color: var(--text-dim); }
  .filter-chip:hover:not(.selected) { color: var(--text); }

  /* Player picker dropdown */
  .picker-overlay {
    position: fixed; inset: 0; z-index: 200;
    background: rgba(0,0,0,.5);
    display: flex; align-items: center; justify-content: center;
  }
  .picker-overlay.hidden { display: none; }
  .picker-modal {
    background: var(--card);
    border: 1px solid var(--border2);
    border-radius: 10px;
    padding: 16px;
    width: 360px; max-height: 480px;
    display: flex; flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,.7);
  }
  .picker-modal h3 {
    font-family: 'Inter', sans-serif;
    font-size: 13px; color: var(--gold);
    margin-bottom: 10px; letter-spacing: 0.06em;
  }
  .picker-search {
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-family: 'Inter', sans-serif;
    font-size: 13px; padding: 7px 10px;
    outline: none; transition: border-color .15s;
    margin-bottom: 10px;
  }
  .picker-search:focus { border-color: var(--gold-dim); }
  .picker-list { overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 4px; }
  .picker-player {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 10px;
    border-radius: var(--radius);
    cursor: pointer; transition: background .1s;
  }
  .picker-player:hover { background: var(--surface); }
  /* players can be assigned multiple times */
  .picker-show-all {
    text-align: center; font-size: 12px; color: var(--text-dim);
    padding: 6px; cursor: pointer; border-radius: 4px;
    transition: color .1s;
  }
  .picker-show-all:hover { color: var(--gold); }
  .picker-divider {
    font-size: 11px; color: var(--text-mute); text-align: center;
    padding: 4px 0; border-top: 1px solid var(--border);
    margin-top: 4px;
  }
  .picker-actions { display: flex; gap: 8px; margin-top: 12px; }

  /* ── RAID PLAN PAGE ──────────────────────────── */
  .raid-plan-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 20px; }
  .plan-main { min-width: 0; }

  /* Slim roster in raid plan */
  .plan-roster-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 3px;
    max-height: 260px; overflow-y: auto;
  }
  .plan-roster-player {
    display: flex; align-items: center; gap: 5px;
    padding: 3px 6px; border-radius: var(--radius);
    cursor: pointer; transition: background .1s;
    border: 1px solid transparent; min-width: 0;
  }
  .plan-roster-player:hover { background: var(--surface); }
  .plan-roster-player.dragging { cursor: grabbing; }
  .plan-roster-player.highlighted {
    background: rgba(200,168,75,.12);
    border-color: var(--gold-dim);
  }
  .plan-roster-name {
    font-size: 12px; font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  .plan-sidebar { display: flex; flex-direction: column; gap: 12px; }
  .plan-encounter-list { display: flex; flex-direction: column; gap: 4px; }
  .plan-enc-item {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: grab;
    transition: border-color .15s;
    user-select: none;
  }
  .plan-enc-item-name { flex: 1; font-size: 13px; font-weight: 500; }

  .plan-preview {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px 24px;
    color: var(--text);
    min-height: 300px;
    width: 100%;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
  }
  .pp-title {
    font-family: 'Inter', sans-serif; font-size: 17px; font-weight: 700;
    color: var(--gold); margin-bottom: 4px; letter-spacing: 0.04em;
  }
  .pp-subtitle { font-size: 11px; color: var(--text-mute); margin-bottom: 18px; }

  /* ── Encounter card ── */
  .pp-encounter {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 18px;
    border: 1px solid var(--border2);
    border-radius: var(--radius);
    overflow: hidden;
    background: #0d0e10; /* slightly darker than surface to stand out */
    box-shadow: 0 2px 12px rgba(0,0,0,.4);
  }
  .pp-enc-header {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 16px;
    background: linear-gradient(90deg, #1c1a10 0%, #141618 60%);
    border-bottom: 1px solid var(--gold-dim);
  }
  .pp-enc-num {
    font-family: 'Inter', sans-serif;
    font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
    color: #1a1200; background: var(--gold);
    padding: 2px 7px; border-radius: 3px; flex-shrink: 0;
  }
  .pp-enc-name {
    font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 700;
    color: var(--gold); letter-spacing: 0.05em; flex: 1;
  }
  .pp-enc-meta {
    font-family: 'Inter', sans-serif;
    font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
    color: var(--text-mute); text-transform: uppercase;
  }
  .copy-feedback { color: var(--success); font-size: 12px; opacity: 0; transition: opacity .3s; }
  .copy-feedback.show { opacity: 1; }

  /* ── FORM ELEMENTS ───────────────────────────── */
  input[type="text"] {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-family: 'Inter', sans-serif;
    font-size: 13px; padding: 7px 10px;
    outline: none; transition: border-color .15s;
  }
  input[type="text"]:focus { border-color: var(--gold-dim); }

  /* ── EMPTY STATES ────────────────────────────── */
  .empty-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-mute);
  }
  .empty-state .empty-icon { font-size: 32px; margin-bottom: 8px; }
  .empty-state p { font-size: 13px; line-height: 1.6; }
  .empty-state a { color: inherit; text-decoration: underline; text-decoration-color: var(--text-mute); }
  .empty-state a:hover { color: var(--gold); text-decoration-color: var(--gold); }

  /* ── DRAG GHOST ──────────────────────────────── */
  .dragging { opacity: .4; }
  .drag-over { border-color: var(--gold) !important; }
  .plan-enc-item.dragging { cursor: grabbing; }
  .c-assign-body.plan-drag-over { outline: 2px solid var(--gold); background: rgba(200,168,75,.12) !important; }

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

  .plan-ordered-list { display: flex; flex-direction: column; gap: 4px; min-height: 40px; }
  .plan-ordered-item {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 10px;
    border: 1px solid var(--border2);
    border-radius: var(--radius);
    cursor: grab;
  }
  .plan-ordered-item-name { flex: 1; font-size: 13px; font-weight: 500; }
  .plan-ordered-item .seq-num {
    font-family: 'Inter', sans-serif;
    font-weight: 700; font-size: 11px;
    color: var(--gold); width: 16px; text-align: center;
  }

/* ── IMAGE COPY SPINNER ─────────────────────────── */
@keyframes imgSpinner {
  0%   { transform: scale(1) rotate(0deg); }
  25%  { transform: scale(1.15) rotate(-5deg); }
  75%  { transform: scale(1.15) rotate(5deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* ── View-only (shared plan) mode ─────────────────────────────────────────── */
body.view-mode header,
body.view-mode #page-roster,
body.view-mode #page-encounters { display: none !important; }
body.view-mode #page-raidplan { display: block !important; max-width: 1158px !important; }
body.view-mode .plan-sidebar { display: none !important; }
body.view-mode .raid-plan-layout { grid-template-columns: 1fr !important; }
body.view-mode #btnAutoAssign,
body.view-mode #btnClearAssign,
body.view-mode #btnRosterEdit,
body.view-mode #btnCopyImage,
body.view-mode #btnExportAddon { display: none !important; }

#viewBanner {
  display: none;
  background: var(--surface);
  border-bottom: 1px solid var(--border2);
  padding: 8px 16px;
  font-size: 13px;
  color: var(--text-dim);
  align-items: center;
  gap: 12px;
}
body.view-mode #viewBanner { display: flex; }

@media (max-width: 768px) {
  body.view-mode #page-raidplan {
    padding-left: 0;
    padding-right: 0;
  }
  body.view-mode .plan-preview {
    padding-left: 8px;
    padding-right: 8px;
    border-radius: 0;
    border-left: none;
    border-right: none;
  }
}

#loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  background: var(--bg1);
  transition: opacity 0.3s ease;
}
#loading-overlay.fade-out {
  opacity: 0;
  pointer-events: none;
}
#loading-overlay .loading-title {
  font-family: 'Inter', sans-serif;
  font-size: 28px;
  color: var(--gold);
  margin: 0;
}
.loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border2);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position:  600px 0; }
}
.skeleton-block {
  background: linear-gradient(
    90deg,
    var(--surface) 25%,
    var(--border2) 50%,
    var(--surface) 75%
  );
  background-size: 1200px 100%;
  animation: shimmer 1.6s infinite linear;
  border-radius: 4px;
}

/* ── Site Footer ─────────────────────────────────────────────────────────── */
#site-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 24px;
  background: var(--surface);
  color: var(--text-mute);
  font-size: 0.75rem;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

/* ── Footer version link ──────────────────────────────────────────────────── */
#site-footer a {
  color: var(--text-mute);
  text-decoration: none;
  transition: color .15s;
}
#site-footer a:hover { color: var(--gold); }

/* ── Version page ─────────────────────────────────────────────────────────── */
.version-page { max-width: 680px; }
.version-entry {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin-bottom: 16px;
}
.version-entry-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.version-badge {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--gold);
  background: var(--bg);
  border: 1px solid var(--gold-dim);
  border-radius: 4px;
  padding: 2px 8px;
  white-space: nowrap;
}
.version-title {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  flex: 1;
}
.version-date {
  font-size: 11px;
  color: var(--text-mute);
  white-space: nowrap;
  margin-left: auto;
}
.version-notes {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.version-notes li {
  font-size: 13px;
  color: var(--text-dim);
  padding-left: 14px;
  position: relative;
}
.version-notes li::before {
  content: '–';
  position: absolute;
  left: 0;
  color: var(--gold-dim);
}

/* ── Encounter folders ───────────────────────────────────────────────────────── */
.folder-bar { margin-bottom:4px; }

.enc-folder-header {
  display:flex; align-items:center; gap:5px;
  padding:4px 6px; margin-top:6px;
  border-radius:var(--radius);
  border:1px solid var(--border);
  user-select:none; cursor:default;
  transition:border-color 0.1s;
}
.enc-folder-header:hover { border-color:var(--border2); }

.folder-chevron {
  font-size:9px; cursor:pointer; flex-shrink:0;
  transition:transform 0.15s; display:inline-block;
}
.enc-folder-header.collapsed .folder-chevron { transform:rotate(-90deg); }

.folder-header-name {
  font-size:12px; font-weight:600; color:var(--text-dim);
  cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.folder-count {
  font-size:10px; color:var(--text-mute); font-weight:400; flex-shrink:0;
}

.folder-header-actions {
  display:flex; align-items:center; gap:2px; margin-left:auto; flex-shrink:0;
}
.folder-acc-swatch {
  width:10px; height:10px; border-radius:50%; cursor:pointer; flex-shrink:0;
  border:1.5px solid transparent; transition:transform 0.1s, border-color 0.1s;
}
.folder-acc-swatch:hover { transform:scale(1.25); }
.folder-acc-swatch.active { border-color:#fff; transform:scale(1.2); }

.enc-folder-items {
  padding-left:8px; display:flex; flex-direction:column; gap:6px;
  margin-top:4px; margin-bottom:2px;
}
.enc-ungrouped-header {
  display:flex; align-items:center; gap:5px;
  padding:3px 4px; margin-top:8px;
  font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:0.06em; color:var(--text-mute);
  border-radius:var(--radius);
}
.drag-folder-over { background:var(--surface) !important; outline:1px dashed var(--gold-dim); }

/* ── LOGIN WALL ──────────────────────────────────────────────────────────────── */
.login-wall {
  position: fixed;
  top: 56px;
  left: 0; right: 0; bottom: 0;
  background: var(--bg);
  z-index: 90;
  overflow-y: auto;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.lw-container {
  max-width: 900px;
  width: 100%;
  padding: 52px 24px 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 52px;
}

.lw-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  max-width: 560px;
}

.lw-logo-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 4px;
}

.lw-app-name {
  font-family: 'Inter', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--gold);
  line-height: 1.2;
}

.lw-app-sub {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-mute);
  margin-top: 2px;
}

.lw-headline {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 44px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.1;
  letter-spacing: .01em;
  margin: 0;
}

.lw-desc {
  font-size: 15px;
  color: var(--text-dim);
  line-height: 1.65;
  max-width: 480px;
}

.lw-discord-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 30px;
  background: #5865F2;
  color: #fff;
  border-radius: var(--radius);
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: background .15s, transform .1s, box-shadow .15s;
  margin-top: 6px;
  box-shadow: 0 4px 20px rgba(88,101,242,.35);
}
.lw-discord-btn:hover {
  background: #4752c4;
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(88,101,242,.5);
}

.lw-note {
  font-size: 12px;
  color: var(--text-mute);
  margin-top: -4px;
}

.lw-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  width: 100%;
}

.lw-feature-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color .15s, transform .15s;
}
.lw-feature-card:hover {
  border-color: var(--border2);
  transform: translateY(-2px);
}

.lw-feature-preview {
  height: 120px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  line-height: 0;
}

.lw-feature-body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.lw-feature-icon { color: var(--gold); display: flex; }

.lw-feature-title {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.lw-feature-desc {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.55;
}

@media (max-width: 620px) {
  .lw-features { grid-template-columns: 1fr; }
  .lw-headline  { font-size: 32px; }
}

/* ── Chat announcement panel (encounter editor) ─────────────────────────────── */
.announce-panel {
  margin-top: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 10px 12px;
}
.announce-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.announce-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold);
}
.announce-mode {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 1px 7px;
  border-radius: 10px;
  color: var(--text-dim);
  border: 1px solid var(--border2);
}
/* Preview styled like the in-game chat frame: near-black backdrop, orange
   raid-chat text, each line spoken by the logged-in user. */
.announce-preview {
  background: #08090b;
  border: 1px solid #000;
  box-shadow: inset 0 0 0 1px var(--border);
  border-radius: var(--radius);
  padding: 9px 11px;
  min-height: 34px;
  font-size: 13px;
  line-height: 1.6;
}
.announce-line {
  white-space: pre-wrap;
  word-break: break-word;
  color: #ff7f00;                              /* WoW raid-chat orange */
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.9);
}
.announce-line + .announce-line { margin-top: 3px; }
.announce-speaker { color: #ff7f00; }
.announce-empty {
  color: var(--text-mute);
  font-style: italic;
  font-size: 12px;
}
/* Edit mode: a chat-styled input that looks like the raid-chat frame. A
   highlight backdrop (with the [name]: gutter + orange text) sits beneath a
   transparent textarea so the caret lands on real characters while the styling
   is fully live. Both layers share one grid cell so they always match size. */
.announce-editor {
  display: grid;
  margin-top: 8px;
  background: #08090b;
  border: 1px solid #000;
  box-shadow: inset 0 0 0 1px var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  --announce-gutter: 6ch;
}
.announce-editor > * { grid-area: 1 / 1; }
.announce-editor:focus-within { box-shadow: inset 0 0 0 1px var(--gold-dim); }
.announce-ebackdrop,
.announce-textarea {
  padding: 9px 11px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  line-height: 1.6;
  white-space: pre;
  overflow: hidden;
}
.announce-ebackdrop {
  pointer-events: none;
  overflow: hidden;                            /* scrolled programmatically */
}
.announce-eline { min-height: 1.6em; }
.announce-egutter { color: #ffb454; }          /* the speaker's name */
.announce-etoken { color: #ffd27f; }           /* {skull} raid-mark tokens */
.announce-eref   { color: #8fd0ff; }           /* {@cell} live assignment refs */
.announce-ebackdrop { color: #ff7f00; }        /* WoW raid-chat orange */
.announce-textarea {
  min-height: 96px;
  resize: vertical;
  border: 0;
  background: transparent;
  color: transparent;                          /* text shows via the backdrop */
  caret-color: #ff7f00;
  padding-left: calc(11px + var(--announce-gutter));
  overflow: auto;
}
.announce-textarea:focus { outline: none; }
.announce-textarea::placeholder { color: #5a6472; }
.announce-textarea::selection { background: rgba(255, 127, 0, 0.28); }
.announce-hint {
  margin-top: 7px;
  font-size: 11px;
  color: var(--text-mute);
  line-height: 1.5;
}