.player-badge.svelte-zgwvrc {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.05);
    border-left: 3px solid;
    border-radius: 4px;
    font-size: 13px;
    min-width: 120px;
    max-width: 200px;
    color: inherit;
    text-decoration: none;
    overflow: hidden;
  }

  button.player-badge.svelte-zgwvrc {
    border: none;
    border-left: 3px solid;
    cursor: pointer;
    transition: all 0.2s;
  }

  button.player-badge.svelte-zgwvrc:hover {
    background: rgba(255, 255, 255, 0.1);
  }

  button.player-badge.selected.svelte-zgwvrc {
    background: rgba(255, 215, 0, 0.2);
    box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.5);
  }

  .player-badge.online.svelte-zgwvrc {
    border-color: rgba(40, 167, 69, 0.5);
  }

  .player-badge.offline.svelte-zgwvrc {
    opacity: 0.6;
  }

  .faction-icon.svelte-zgwvrc {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex-shrink: 0;
  }

  .player-name.svelte-zgwvrc {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .player-card.svelte-6yb15x {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    border-left: 4px solid #666;
    transition: all 0.2s;
  }

  .player-card.mine.svelte-6yb15x {
    background: rgba(255, 215, 0, 0.05);
  }

  .player-card.player-pending.svelte-6yb15x {
    border-right: 3px solid #6b7280;
  }

  .player-card.player-declared.svelte-6yb15x {
    border-right: 3px solid #f59e0b;
  }

  .player-card.player-voted.svelte-6yb15x {
    border-right: 3px solid #22c55e;
  }

  .faction-icon.svelte-6yb15x {
    width: 48px;
    height: 48px;
    object-fit: contain;
    flex-shrink: 0;
  }

  .player-info.svelte-6yb15x {
    flex: 1;
    min-width: 0;
  }

  .player-name.svelte-6yb15x {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #fff;
  }

  .nickname.mine.svelte-6yb15x {
    color: #ffd700;
  }

  .player-faction.svelte-6yb15x {
    font-size: 0.85rem;
    color: #888;
    margin-top: 2px;
  }

  .status-dot.svelte-6yb15x {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  .status-dot.online.svelte-6yb15x {
    background: #22c55e;
  }

  .status-dot.offline.svelte-6yb15x {
    background: #6b7280;
  }

  .badge.svelte-6yb15x {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 3px;
    text-transform: uppercase;
  }

  .badge-speaker.svelte-6yb15x {
    background: rgba(255, 215, 0, 0.2);
    color: #ffd700;
  }

  .vote-badge.svelte-6yb15x {
    font-size: 11px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 4px;
    text-transform: uppercase;
  }

  .vote-pending.svelte-6yb15x {
    background: rgba(107, 114, 128, 0.2);
    color: #9ca3af;
  }

  .vote-declared.svelte-6yb15x {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
  }

  .vote-voted.svelte-6yb15x {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
  }

  .btn-remove.svelte-6yb15x {
    padding: 4px 12px;
    background: rgba(220, 53, 69, 0.2);
    color: #dc3545;
    border: 1px solid rgba(220, 53, 69, 0.3);
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
  }

  .btn-remove.svelte-6yb15x:hover {
    background: rgba(220, 53, 69, 0.3);
  }

  .btn-detach.svelte-6yb15x {
    padding: 4px 12px;
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
  }

  .btn-detach.svelte-6yb15x:hover {
    background: rgba(245, 158, 11, 0.3);
  }

  .btn-claim.svelte-6yb15x {
    padding: 4px 12px;
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
  }

  .btn-claim.svelte-6yb15x:hover {
    background: rgba(34, 197, 94, 0.3);
  }

  .outcome-badge.svelte-191wm61 {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-block;
  }

  .outcome-for.svelte-191wm61 {
    background: rgba(39, 174, 96, 0.2);
    color: #27ae60;
  }

  .outcome-against.svelte-191wm61 {
    background: rgba(231, 76, 60, 0.2);
    color: #e74c3c;
  }

  .outcome-elect.svelte-191wm61 {
    background: rgba(155, 89, 182, 0.2);
    color: #9b59b6;
  }

  .outcome-override.svelte-191wm61 {
    background: rgba(241, 196, 15, 0.2);
    color: #f1c40f;
  }

  .outcome-no-effect.svelte-191wm61 {
    background: rgba(127, 140, 141, 0.2);
    color: #7f8c8d;
  }

  .outcome-removed.svelte-191wm61 {
    background: rgba(231, 76, 60, 0.2);
    color: #e74c3c;
  }

  .outcome-default.svelte-191wm61 {
    background: rgba(255, 255, 255, 0.1);
    color: #aaa;
  }

  .outcome-neutral.svelte-191wm61 {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
  }

  .status.svelte-nu86r2 {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 500;
  }

  .online.svelte-nu86r2 {
    background: rgba(40, 167, 69, 0.3);
    color: #28a745;
  }

  .reconnecting.svelte-nu86r2 {
    background: rgba(255, 193, 7, 0.3);
    color: #ffc107;
  }

  .offline.svelte-nu86r2 {
    background: rgba(220, 53, 69, 0.3);
    color: #dc3545;
  }

  .vote-input.svelte-t62hoo {
    width: 70px;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    color: #fff;
    font-size: 16px;
    text-align: center;
  }

  .vote-input.svelte-t62hoo:focus {
    outline: none;
    border-color: #ffd700;
    box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.2);
  }

  .vote-input.svelte-t62hoo:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  /* Hide spinner arrows */
  .vote-input.svelte-t62hoo::-webkit-outer-spin-button,
  .vote-input.svelte-t62hoo::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  .vote-input[type=number].svelte-t62hoo {
    -moz-appearance: textfield;
  }

  .color-picker.svelte-181phd1 {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }

  .color-option.svelte-181phd1 {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .color-option.svelte-181phd1:hover:not(:disabled) {
    transform: scale(1.1);
  }

  .color-option.selected.svelte-181phd1 {
    border-color: #fff;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
  }

  .checkmark.svelte-181phd1 {
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  }

  .faction-picker.svelte-15fapt6 {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .faction-search.svelte-15fapt6 {
    padding: 10px 14px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    color: #fff;
    font-size: 14px;
  }

  .faction-search.svelte-15fapt6::placeholder {
    color: #666;
  }

  .faction-grid.svelte-15fapt6 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 8px;
    max-height: 300px;
    overflow-y: auto;
    padding: 4px;
  }

  .faction-option.svelte-15fapt6 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
  }

  .faction-option.svelte-15fapt6:hover {
    background: rgba(255, 255, 255, 0.1);
  }

  .faction-option.selected.svelte-15fapt6 {
    border-color: #ffd700;
    background: rgba(255, 215, 0, 0.1);
  }

  .faction-icon.svelte-15fapt6 {
    width: 48px;
    height: 48px;
    object-fit: contain;
  }

  .faction-name.svelte-15fapt6 {
    font-size: 11px;
    color: #ccc;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
  }

  .no-results.svelte-15fapt6 {
    text-align: center;
    color: #666;
    padding: 20px;
  }

  .lang-toggle.svelte-cnvwl2 {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    padding: 0.25rem 0.5rem;
    color: #888;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 0.25rem;
  }

  .lang-toggle.svelte-cnvwl2:hover {
    background: rgba(255, 255, 255, 0.15);
  }

  .lang-toggle.svelte-cnvwl2 span.active:where(.svelte-cnvwl2) {
    color: #ffd700;
    font-weight: 600;
  }

  .separator.svelte-cnvwl2 {
    color: #555;
  }

  .rule-viewer.svelte-1xt1fkg {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
  }

  .rule-header.svelte-1xt1fkg {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(255, 215, 0, 0.1);
    border-bottom: 1px solid rgba(255, 215, 0, 0.2);
    flex-shrink: 0;
  }

  .nav-buttons.svelte-1xt1fkg {
    display: flex;
    gap: 8px;
  }

  .nav-btn.svelte-1xt1fkg {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    color: #ccc;
    cursor: pointer;
    transition: all 0.2s;
  }

  .nav-btn.svelte-1xt1fkg:hover {
    background: rgba(255, 215, 0, 0.2);
    border-color: rgba(255, 215, 0, 0.4);
    color: #ffd700;
  }

  .rule-title.svelte-1xt1fkg {
    margin: 0;
    font-size: 1.25rem;
    color: #ffd700;
    font-weight: 600;
  }

  .rule-content.svelte-1xt1fkg {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
  }

  .section.svelte-1xt1fkg {
    margin-bottom: 24px;
  }

  .section.svelte-1xt1fkg:last-child {
    margin-bottom: 0;
  }

  .section-title.svelte-1xt1fkg {
    margin: 0 0 12px 0;
    font-size: 1rem;
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.9;
  }

  .content-list.svelte-1xt1fkg {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .content-item.svelte-1xt1fkg {
    position: relative;
    padding: 8px 0 8px 20px;
    color: #e0e0e0;
    font-size: 0.9rem;
    line-height: 1.6;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }

  .content-item.svelte-1xt1fkg::before {
    content: '';
    position: absolute;
    left: 0;
    top: 14px;
    width: 6px;
    height: 6px;
    background: rgba(255, 215, 0, 0.5);
    border-radius: 50%;
  }

  .content-item.svelte-1xt1fkg:last-child {
    border-bottom: none;
  }

  .rule-link.svelte-1xt1fkg {
    background: none;
    border: none;
    padding: 0;
    color: #4da6ff;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 2px;
    font-size: inherit;
    font-family: inherit;
    transition: color 0.2s;
  }

  .rule-link.svelte-1xt1fkg:hover {
    color: #ffd700;
    text-decoration-style: solid;
  }

  .related-section.svelte-1xt1fkg {
    padding-top: 16px;
    border-top: 1px solid rgba(255, 215, 0, 0.2);
  }

  .related-topics.svelte-1xt1fkg {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .related-topic.svelte-1xt1fkg {
    padding: 6px 12px;
    background: rgba(255, 215, 0, 0.15);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 16px;
    color: #ffd700;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
  }

  .related-topic.svelte-1xt1fkg:hover {
    background: rgba(255, 215, 0, 0.25);
    border-color: rgba(255, 215, 0, 0.5);
  }

  .agenda-text-formatted.svelte-1lfgpg5 {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 14px;
    margin-top: 1.5rem;
  }

  .agenda-text-formatted.compact.svelte-1lfgpg5 {
    gap: 0.25rem;
  }

  .agenda-segment.svelte-1lfgpg5 {
    line-height: 1.4;
    font-size: 14px;
  }

  .agenda-segment.svelte-1lfgpg5:not(:last-of-type) {
    margin-bottom: 0.2rem;
  }

  .keyword.svelte-1lfgpg5 {
    font-weight: 600;
    margin-right: 0.25rem;
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
  }

  .keyword-for.svelte-1lfgpg5 {
    color: #4ade80;
    background: rgba(74, 222, 128, 0.15);
  }

  .keyword-against.svelte-1lfgpg5 {
    color: #f87171;
    background: rgba(248, 113, 113, 0.15);
  }

  .keyword-elect.svelte-1lfgpg5 {
    color: #c084fc;
    background: rgba(192, 132, 252, 0.15);
  }

  .segment-content.svelte-1lfgpg5 {
    color: #ccc;
  }

  .compact.svelte-1lfgpg5 .keyword:where(.svelte-1lfgpg5) {
    padding: 0.05rem 0.2rem;
    font-size: 0.9em;
  }

  .compact.svelte-1lfgpg5 .segment-content:where(.svelte-1lfgpg5) {
    font-size: 0.9em;
  }

  .agenda-effect.svelte-vg8x6v {
    display: inline;
    line-height: 1.4;
    font-size: 14px;
  }

  .keyword.svelte-vg8x6v {
    font-weight: 600;
    margin-right: 0.25rem;
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
  }

  .keyword-for.svelte-vg8x6v {
    color: #4ade80;
    background: rgba(74, 222, 128, 0.15);
  }

  .keyword-against.svelte-vg8x6v {
    color: #f87171;
    background: rgba(248, 113, 113, 0.15);
  }

  .effect-content.svelte-vg8x6v {
    color: #ccc;
  }

  .turn-order-bar.svelte-1083qi {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    overflow-x: auto;
    white-space: nowrap;
    margin-bottom: 12px;
  }

  .turn-label.svelte-1083qi {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(148, 163, 184, 0.6);
    flex-shrink: 0;
  }

  .turn-players.svelte-1083qi {
    display: flex;
    gap: 6px;
  }

  .turn-slot.svelte-1083qi {
    position: relative;
    transition: opacity 0.2s;
    padding: 2px;
    border-radius: 8px;
  }

  .turn-slot.passed.svelte-1083qi {
    opacity: 0.35;
  }

  .turn-slot.current.svelte-1083qi {
    outline: 2px solid #ffd700;
    outline-offset: 1px;
  }

  .speaker-star.svelte-1083qi {
    position: absolute;
    top: -6px;
    right: -4px;
    font-size: 12px;
    color: #ffd700;
    text-shadow: 0 0 4px rgba(255, 215, 0, 0.5);
  }

  .vp-overlay.svelte-10ztevv {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 200;
    backdrop-filter: blur(2px);
  }

  .vp-modal.svelte-10ztevv {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 85vh;
    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
    border-top: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 20px 20px 0 0;
    z-index: 201;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: svelte-10ztevv-slideUp 0.25s ease-out;
  }

  @keyframes svelte-10ztevv-slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }

  .vp-header.svelte-10ztevv {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
    flex-shrink: 0;
  }

  .vp-header.svelte-10ztevv h3:where(.svelte-10ztevv) {
    color: #ffd700;
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
  }

  .header-actions.svelte-10ztevv {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .toggle-btn.svelte-10ztevv {
    padding: 6px 12px;
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 6px;
    color: #ffd700;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
  }

  .toggle-btn.svelte-10ztevv:hover {
    background: rgba(255, 215, 0, 0.2);
  }

  .close-btn.svelte-10ztevv {
    background: transparent;
    border: none;
    color: rgba(148, 163, 184, 0.7);
    padding: 6px;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
  }

  .close-btn.svelte-10ztevv:hover {
    color: rgba(148, 163, 184, 1);
    background: rgba(148, 163, 184, 0.1);
  }

  .close-btn.svelte-10ztevv svg:where(.svelte-10ztevv) {
    width: 20px;
    height: 20px;
  }

  .error-message.svelte-10ztevv {
    padding: 0.75rem 20px;
    background: rgba(220, 53, 69, 0.2);
    color: #ff6b6b;
    font-size: 0.85rem;
    flex-shrink: 0;
  }

  /* Scoring View */
  .scoring-view.svelte-10ztevv {
    overflow-y: auto;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .section.svelte-10ztevv {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .section-label.svelte-10ztevv {
    font-size: 12px;
    font-weight: 600;
    color: rgba(148, 163, 184, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  /* Player grid */
  .player-grid.svelte-10ztevv {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .player-option.svelte-10ztevv {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(148, 163, 184, 0.1);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
    color: inherit;
  }

  .player-option.svelte-10ztevv:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(148, 163, 184, 0.2);
  }

  .player-option.selected.svelte-10ztevv {
    background: rgba(255, 215, 0, 0.08);
    border-color: rgba(255, 215, 0, 0.4);
  }

  .player-vp-count.svelte-10ztevv {
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255, 215, 0, 0.6);
  }

  /* Bucket grid */
  .bucket-grid.svelte-10ztevv {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .bucket-btn.svelte-10ztevv {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(148, 163, 184, 0.1);
    border-left: 3px solid var(--bucket-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.95rem;
    font-weight: 500;
  }

  .bucket-btn.svelte-10ztevv:hover {
    background: rgba(255, 255, 255, 0.06);
  }

  .bucket-btn.selected.svelte-10ztevv {
    background: rgba(255, 215, 0, 0.08);
    border-color: rgba(255, 215, 0, 0.4);
    border-left-color: var(--bucket-color);
  }

  .bucket-btn.expanded.svelte-10ztevv {
    background: rgba(255, 255, 255, 0.06);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  .bucket-label.svelte-10ztevv {
    flex: 1;
    text-align: left;
  }

  .bucket-arrow.svelte-10ztevv {
    width: 16px;
    height: 16px;
    color: rgba(148, 163, 184, 0.5);
    transition: transform 0.2s;
  }

  .bucket-btn.expanded.svelte-10ztevv .bucket-arrow:where(.svelte-10ztevv) {
    transform: rotate(180deg);
  }

  .sub-options.svelte-10ztevv {
    display: flex;
    gap: 4px;
    padding: 8px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(148, 163, 184, 0.1);
    border-top: none;
    border-radius: 0 0 8px 8px;
    margin-top: -4px;
  }

  .sub-btn.svelte-10ztevv {
    flex: 1;
    padding: 10px 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-left: 2px solid var(--bucket-color);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.85rem;
    text-align: center;
  }

  .sub-btn.svelte-10ztevv:hover {
    background: rgba(255, 255, 255, 0.06);
  }

  .sub-btn.selected.svelte-10ztevv {
    background: rgba(255, 215, 0, 0.08);
    border-color: rgba(255, 215, 0, 0.4);
    border-left-color: var(--bucket-color);
    color: #ffd700;
  }

  /* Confirm section */
  .confirm-section.svelte-10ztevv {
    padding-top: 8px;
    border-top: 1px solid rgba(148, 163, 184, 0.1);
  }

  .desc-input.svelte-10ztevv {
    width: 100%;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
  }

  .desc-input.svelte-10ztevv:focus {
    border-color: rgba(255, 215, 0, 0.4);
  }

  .desc-input.svelte-10ztevv::placeholder {
    color: rgba(148, 163, 184, 0.4);
  }

  .points-row.svelte-10ztevv {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .points-label.svelte-10ztevv {
    font-size: 0.85rem;
    color: rgba(148, 163, 184, 0.7);
    white-space: nowrap;
  }

  .points-selector.svelte-10ztevv {
    display: flex;
    gap: 6px;
  }

  .points-btn.svelte-10ztevv {
    width: 40px;
    height: 36px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
  }

  .points-btn.svelte-10ztevv:hover {
    background: rgba(255, 255, 255, 0.1);
  }

  .points-btn.selected.svelte-10ztevv {
    background: rgba(255, 215, 0, 0.15);
    border-color: rgba(255, 215, 0, 0.5);
    color: #ffd700;
  }

  .submit-btn.svelte-10ztevv {
    width: 100%;
    padding: 14px;
    background: #ffd700;
    color: #1a1a2e;
    border: none;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 4px;
  }

  .submit-btn.svelte-10ztevv:hover:not(:disabled) {
    background: #ffed4a;
  }

  .submit-btn.svelte-10ztevv:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  /* Breakdown View */
  .breakdown-view.svelte-10ztevv {
    overflow-y: auto;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .no-entries.svelte-10ztevv {
    text-align: center;
    color: rgba(148, 163, 184, 0.5);
    font-size: 0.9rem;
    padding: 24px 0;
    margin: 0;
  }

  .breakdown-player.svelte-10ztevv {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    overflow: hidden;
  }

  .breakdown-player-header.svelte-10ztevv {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid rgba(148, 163, 184, 0.08);
  }

  .breakdown-total.svelte-10ztevv {
    font-size: 1rem;
    font-weight: 700;
    color: #ffd700;
  }

  .breakdown-entries.svelte-10ztevv {
    display: flex;
    flex-direction: column;
  }

  .breakdown-entry.svelte-10ztevv {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.05);
  }

  .breakdown-entry.svelte-10ztevv:last-child {
    border-bottom: none;
  }

  .entry-source.svelte-10ztevv {
    font-size: 0.8rem;
    color: rgba(148, 163, 184, 0.7);
    min-width: 80px;
  }

  .entry-desc.svelte-10ztevv {
    flex: 1;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .entry-points.svelte-10ztevv {
    font-size: 0.85rem;
    font-weight: 600;
    color: #ffd700;
    white-space: nowrap;
  }

  .entry-round.svelte-10ztevv {
    font-size: 0.75rem;
    color: rgba(148, 163, 184, 0.5);
    white-space: nowrap;
  }

  .entry-remove.svelte-10ztevv {
    background: transparent;
    border: none;
    color: rgba(239, 68, 68, 0.6);
    padding: 4px;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }

  .entry-remove.svelte-10ztevv:hover {
    color: rgba(239, 68, 68, 1);
    background: rgba(239, 68, 68, 0.1);
  }

  .entry-remove.svelte-10ztevv svg:where(.svelte-10ztevv) {
    width: 14px;
    height: 14px;
  }

  .home.svelte-et6md {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem;
    min-height: 100vh;
    position: relative;
  }

  .lang-toggle-container.svelte-et6md {
    position: absolute;
    top: 1rem;
    right: 1rem;
  }

  .hero.svelte-et6md {
    text-align: center;
    margin-bottom: 3rem;
  }

  h1.svelte-et6md {
    font-size: 2.5rem;
    color: #ffd700;
    margin-bottom: 0.5rem;
  }

  .subtitle.svelte-et6md {
    color: #aaa;
    font-size: 1.1rem;
  }

  .actions.svelte-et6md {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 800px;
  }

  .action-card.svelte-et6md {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 2rem;
    width: 300px;
    text-align: center;
  }

  .action-card.svelte-et6md h2:where(.svelte-et6md) {
    color: #fff;
    margin-bottom: 0.5rem;
  }

  .action-card.svelte-et6md p:where(.svelte-et6md) {
    color: #888;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
  }

  input.svelte-et6md {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 6px;
    background: rgba(0,0,0,0.3);
    color: #fff;
    font-size: 1rem;
    margin-bottom: 1rem;
    box-sizing: border-box;
  }

  input.svelte-et6md::placeholder {
    color: #666;
  }

  .btn.svelte-et6md {
    width: 100%;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s;
  }

  .btn.svelte-et6md:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .btn-primary.svelte-et6md {
    background: #ffd700;
    color: #1a1a2e;
    font-weight: 600;
  }

  .btn-primary.svelte-et6md:hover:not(:disabled) {
    background: #ffed4a;
  }

  .btn-secondary.svelte-et6md {
    background: rgba(255,255,255,0.1);
    color: #fff;
  }

  .btn-secondary.svelte-et6md:hover:not(:disabled) {
    background: rgba(255,255,255,0.2);
  }

  .error.svelte-et6md {
    margin-top: 1rem;
    padding: 1rem;
    background: rgba(220,53,69,0.2);
    border: 1px solid #dc3545;
    border-radius: 6px;
    color: #ff6b6b;
  }

  /* Import Modal Styles */
  .modal-overlay.svelte-et6md {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
  }

  .modal-content.svelte-et6md {
    background: #1a1a2e;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 2rem;
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
  }

  .modal-content.svelte-et6md h3:where(.svelte-et6md) {
    color: #ffd700;
    margin-bottom: 0.5rem;
  }

  .modal-hint.svelte-et6md {
    color: #888;
    font-size: 0.85rem;
    margin-bottom: 1rem;
    line-height: 1.5;
  }

  .import-textarea.svelte-et6md {
    width: 100%;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
    font-family: monospace;
    font-size: 0.9rem;
    resize: vertical;
    min-height: 200px;
    box-sizing: border-box;
  }

  .import-textarea.svelte-et6md::placeholder {
    color: #666;
  }

  .import-textarea.svelte-et6md:focus {
    outline: none;
    border-color: #ffd700;
  }

  .modal-error.svelte-et6md {
    margin-top: 1rem;
    padding: 0.75rem;
    background: rgba(220, 53, 69, 0.2);
    border: 1px solid rgba(220, 53, 69, 0.3);
    border-radius: 6px;
    color: #ff6b6b;
    font-size: 0.9rem;
  }

  .modal-actions.svelte-et6md {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    margin-top: 1.5rem;
  }

  .modal-actions.svelte-et6md .btn:where(.svelte-et6md) {
    width: auto;
    min-width: 100px;
  }

  .btn-link.svelte-et6md {
    background: transparent;
    color: #888;
    font-size: 0.85rem;
    padding: 0.5rem 0.75rem;
  }

  .btn-link.svelte-et6md:hover:not(:disabled) {
    color: #ffd700;
    background: transparent;
  }

  .modal-success.svelte-et6md {
    margin-top: 1rem;
    padding: 0.75rem;
    background: rgba(74, 222, 128, 0.2);
    border: 1px solid rgba(74, 222, 128, 0.3);
    border-radius: 6px;
    color: #4ade80;
    font-size: 0.9rem;
  }

  /* Auto-import overlay */
  .auto-import-overlay.svelte-et6md {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(26, 26, 46, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
  }

  .auto-import-content.svelte-et6md {
    text-align: center;
    color: #fff;
  }

  .auto-import-content.svelte-et6md p:where(.svelte-et6md) {
    margin-top: 1rem;
    color: #aaa;
  }

  .spinner.svelte-et6md {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 215, 0, 0.3);
    border-top-color: #ffd700;
    border-radius: 50%;
    animation: svelte-et6md-spin 1s linear infinite;
    margin: 0 auto;
  }

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

  .drawer-overlay.svelte-1i6q0d2 {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    backdrop-filter: blur(2px);
  }

  .drawer.svelte-1i6q0d2 {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px;
    max-width: 85vw;
    background: linear-gradient(to right, rgba(15, 23, 42, 0.98), rgba(15, 23, 42, 0.95));
    backdrop-filter: blur(10px);
    border-right: 1px solid rgba(148, 163, 184, 0.1);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
  }

  .drawer.open.svelte-1i6q0d2 {
    transform: translateX(0);
  }

  .drawer-header.svelte-1i6q0d2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
  }

  .session-header.svelte-1i6q0d2 {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .session-id-inline.svelte-1i6q0d2 {
    font-family: monospace;
    font-size: 13px;
    color: rgba(148, 163, 184, 0.7);
  }

  .copy-btn.svelte-1i6q0d2 {
    background: transparent;
    border: none;
    color: rgba(148, 163, 184, 0.6);
    padding: 6px;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .copy-btn.svelte-1i6q0d2:hover {
    color: rgba(148, 163, 184, 1);
    background: rgba(148, 163, 184, 0.1);
  }

  .copy-btn.svelte-1i6q0d2 svg:where(.svelte-1i6q0d2) {
    width: 16px;
    height: 16px;
  }

  .drawer-close.svelte-1i6q0d2 {
    background: transparent;
    border: none;
    color: rgba(148, 163, 184, 0.7);
    padding: 8px;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s;
  }

  .drawer-close.svelte-1i6q0d2:hover {
    color: rgba(148, 163, 184, 1);
    background: rgba(148, 163, 184, 0.1);
  }

  .drawer-close.svelte-1i6q0d2 svg:where(.svelte-1i6q0d2) {
    width: 20px;
    height: 20px;
  }

  .drawer-content.svelte-1i6q0d2 {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
  }

  .drawer-section.svelte-1i6q0d2 {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
  }

  .section-label.svelte-1i6q0d2 {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(148, 163, 184, 0.5);
    margin-bottom: 8px;
  }

  .drawer-item.svelte-1i6q0d2 {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    background: transparent;
    border: none;
    color: rgba(148, 163, 184, 0.9);
    font-size: 14px;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s;
  }

  .drawer-item.svelte-1i6q0d2:hover {
    background: rgba(148, 163, 184, 0.1);
    color: rgba(148, 163, 184, 1);
  }

  .drawer-item.warning.svelte-1i6q0d2 {
    color: rgba(251, 191, 36, 0.9);
  }

  .drawer-item.warning.svelte-1i6q0d2:hover {
    background: rgba(251, 191, 36, 0.1);
    color: rgba(251, 191, 36, 1);
  }

  .drawer-item.danger.svelte-1i6q0d2 {
    color: rgba(239, 68, 68, 0.9);
  }

  .drawer-item.danger.svelte-1i6q0d2:hover {
    background: rgba(239, 68, 68, 0.1);
    color: rgba(239, 68, 68, 1);
  }

  .drawer-icon.svelte-1i6q0d2 {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
  }

  .host-section.svelte-1i6q0d2 {
    background: rgba(96, 165, 250, 0.05);
  }

  .host-section.svelte-1i6q0d2 .section-label:where(.svelte-1i6q0d2) {
    color: rgba(96, 165, 250, 0.7);
  }

  .language-wrapper.svelte-1i6q0d2 {
    display: flex;
    justify-content: center;
    padding: 8px 0;
  }

  .drawer-footer.svelte-1i6q0d2 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px;
    border-top: 1px solid rgba(148, 163, 184, 0.1);
    color: rgba(148, 163, 184, 0.6);
    font-size: 13px;
  }

  .slot-card.svelte-ayrwwe {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    border-left: 4px solid #666;
    transition: all 0.2s;
  }

  .slot-card.svelte-ayrwwe:hover {
    background: rgba(255, 255, 255, 0.08);
  }

  .faction-icon.svelte-ayrwwe {
    width: 48px;
    height: 48px;
    object-fit: contain;
    flex-shrink: 0;
  }

  .slot-info.svelte-ayrwwe {
    flex: 1;
    min-width: 0;
  }

  .slot-name.svelte-ayrwwe {
    font-weight: 600;
    color: #fff;
  }

  .slot-faction.svelte-ayrwwe {
    font-size: 0.85rem;
    color: #888;
    margin-top: 2px;
  }

  .slot-color-indicator.svelte-ayrwwe {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, 0.2);
  }

  .claim-form.svelte-ayrwwe {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 200px;
  }

  .claim-row.svelte-ayrwwe {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }

  .nickname-input.svelte-ayrwwe {
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    color: #fff;
    font-size: 14px;
    width: 120px;
    flex-shrink: 0;
  }

  .nickname-input.svelte-ayrwwe:focus {
    outline: none;
    border-color: #4a90d9;
  }

  .color-picker-inline.svelte-ayrwwe {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
  }

  .color-option-mini.svelte-ayrwwe {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }

  .color-option-mini.svelte-ayrwwe:hover:not(:disabled) {
    transform: scale(1.15);
  }

  .color-option-mini.selected.svelte-ayrwwe {
    border-color: #fff;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5);
  }

  .color-option-mini.original.svelte-ayrwwe:not(.selected) {
    border-color: rgba(255, 255, 255, 0.3);
  }

  .color-option-mini.svelte-ayrwwe .checkmark:where(.svelte-ayrwwe) {
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  }

  .color-option-mini.svelte-ayrwwe:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .claim-actions.svelte-ayrwwe {
    display: flex;
    gap: 6px;
  }

  .btn-claim.svelte-ayrwwe {
    padding: 8px 16px;
    background: rgba(74, 144, 217, 0.2);
    color: #4a90d9;
    border: 1px solid rgba(74, 144, 217, 0.3);
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
  }

  .btn-claim.svelte-ayrwwe:hover:not(:disabled) {
    background: rgba(74, 144, 217, 0.3);
  }

  .btn-claim.svelte-ayrwwe:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .btn-confirm.svelte-ayrwwe {
    padding: 6px 12px;
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
  }

  .btn-confirm.svelte-ayrwwe:hover:not(:disabled) {
    background: rgba(34, 197, 94, 0.3);
  }

  .btn-confirm.svelte-ayrwwe:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .btn-cancel.svelte-ayrwwe {
    padding: 6px 12px;
    background: rgba(107, 114, 128, 0.2);
    color: #9ca3af;
    border: 1px solid rgba(107, 114, 128, 0.3);
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
  }

  .btn-cancel.svelte-ayrwwe:hover:not(:disabled) {
    background: rgba(107, 114, 128, 0.3);
  }

  .btn-cancel.svelte-ayrwwe:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .lobby-view.svelte-r4mllz {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  .lobby-header.svelte-r4mllz {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 1rem;
  }

  .header-info.svelte-r4mllz {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .player-count.svelte-r4mllz {
    color: #ffd700;
    font-size: 1.1rem;
    font-weight: 600;
  }

  .online-count.svelte-r4mllz {
    color: #28a745;
    font-size: 0.85rem;
  }

  .header-actions.svelte-r4mllz {
    display: flex;
    gap: 0.5rem;
  }

  .header-btn.svelte-r4mllz {
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    color: #ccc;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
  }

  .header-btn.svelte-r4mllz:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
  }

  .header-btn.active.svelte-r4mllz {
    background: rgba(255, 215, 0, 0.2);
    border-color: #ffd700;
    color: #ffd700;
  }

  .header-btn.btn-confirm.svelte-r4mllz {
    background: rgba(40, 167, 69, 0.2);
    border-color: rgba(40, 167, 69, 0.5);
    color: #28a745;
  }

  .header-btn.btn-confirm.svelte-r4mllz:hover {
    background: rgba(40, 167, 69, 0.3);
  }

  .error-message.svelte-r4mllz {
    padding: 1rem;
    background: rgba(220, 53, 69, 0.2);
    border: 1px solid rgba(220, 53, 69, 0.5);
    border-radius: 8px;
    color: #ff6b6b;
  }

  .players-section.svelte-r4mllz {
    min-height: 100px;
  }

  .empty-state.svelte-r4mllz {
    text-align: center;
    padding: 2rem;
    color: #666;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
  }

  .hint.svelte-r4mllz {
    font-size: 0.9rem;
    margin-top: 0.5rem;
  }

  .players-list.svelte-r4mllz {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .add-player-section.svelte-r4mllz {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.5rem;
  }

  /* (unused) .add-player-section h3 {
    color: #fff;
    margin: 0 0 1rem 0;
    font-size: 1.1rem;
  }*/

  .form-group.svelte-r4mllz {
    margin-bottom: 1rem;
  }

  .form-group.svelte-r4mllz label:where(.svelte-r4mllz) {
    display: block;
    margin-bottom: 0.5rem;
    color: #aaa;
    font-size: 0.9rem;
  }

  .form-group.svelte-r4mllz input[type="text"]:where(.svelte-r4mllz) {
    width: 100%;
    padding: 10px 14px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    color: #fff;
    font-size: 14px;
    box-sizing: border-box;
  }

  .form-group.svelte-r4mllz input:where(.svelte-r4mllz)::placeholder {
    color: #666;
  }

  .host-action.svelte-r4mllz {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
  }

  .btn-large.svelte-r4mllz {
    padding: 1rem 2rem;
    font-size: 1.1rem;
  }

  .btn.svelte-r4mllz {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s;
  }

  .btn.svelte-r4mllz:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .btn-primary.svelte-r4mllz {
    background: #ffd700;
    color: #1a1a2e;
    font-weight: 600;
  }

  .btn-primary.svelte-r4mllz:hover:not(:disabled) {
    background: #ffed4a;
  }

  .btn-secondary.svelte-r4mllz {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
  }

  .btn-secondary.svelte-r4mllz:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.2);
  }

  .btn-small.svelte-r4mllz {
    padding: 0.4rem 1rem;
    font-size: 0.85rem;
  }

  .btn-danger.svelte-r4mllz {
    background: rgba(220, 53, 69, 0.2);
    color: #dc3545;
    border: 1px solid rgba(220, 53, 69, 0.4);
  }

  .btn-danger.svelte-r4mllz:hover:not(:disabled) {
    background: rgba(220, 53, 69, 0.3);
  }

  /* (unused) .btn-success {
    background: #28a745;
    color: #fff;
    font-weight: 600;
  }*/

  /* (unused) .btn-success:hover:not(:disabled) {
    background: #2ecc71;
  }*/

  /* Modal styles */
  .modal-overlay.svelte-r4mllz {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
  }

  .modal.svelte-r4mllz {
    background: #1a1a2e;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .modal-header.svelte-r4mllz {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .modal-header.svelte-r4mllz h3:where(.svelte-r4mllz) {
    color: #ffd700;
    margin: 0;
  }

  .modal-close.svelte-r4mllz {
    background: none;
    border: none;
    color: #888;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
  }

  .modal-close.svelte-r4mllz:hover {
    color: #fff;
  }

  .modal-body.svelte-r4mllz {
    padding: 1.5rem;
    overflow-y: auto;
  }

  .modal-hint.svelte-r4mllz {
    color: #888;
    font-size: 0.9rem;
    margin-bottom: 1rem;
  }

  .speaker-options.svelte-r4mllz {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.75rem;
  }

  .speaker-option.svelte-r4mllz {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
  }

  .speaker-option.svelte-r4mllz:hover {
    background: rgba(255, 255, 255, 0.1);
  }

  .speaker-option.selected.svelte-r4mllz {
    border-color: #ffd700;
    background: rgba(255, 215, 0, 0.1);
  }

  .speaker-icon.svelte-r4mllz {
    width: 48px;
    height: 48px;
    object-fit: contain;
  }

  .speaker-name.svelte-r4mllz {
    color: #fff;
    font-size: 0.9rem;
    text-align: center;
  }

  .speaker-faction.svelte-r4mllz {
    color: #888;
    font-size: 0.75rem;
    text-align: center;
  }

  .modal-footer.svelte-r4mllz {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  /* Import lobby styles */
  .import-lobby.svelte-r4mllz .slots-section:where(.svelte-r4mllz) {
    margin-bottom: 1.5rem;
  }

  .section-title.svelte-r4mllz {
    color: #aaa;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
    letter-spacing: 0.5px;
  }

  .slots-list.svelte-r4mllz {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .waiting-message.svelte-r4mllz {
    color: #888;
    text-align: center;
    font-size: 0.95rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
  }
  /* Phase config */
  .phase-config.svelte-r4mllz {
    padding: 16px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    margin-bottom: 12px;
  }

  .phase-config-title.svelte-r4mllz {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 4px;
  }

  .phase-config-hint.svelte-r4mllz {
    font-size: 12px;
    color: rgba(148, 163, 184, 0.7);
    margin-bottom: 12px;
  }

  .phase-checkboxes.svelte-r4mllz {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .phase-checkbox.svelte-r4mllz {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
    transition: background 0.2s;
  }

  .phase-checkbox.svelte-r4mllz:hover {
    background: rgba(255, 255, 255, 0.08);
  }

  .phase-checkbox.svelte-r4mllz input[type="checkbox"]:where(.svelte-r4mllz) {
    accent-color: #ffd700;
  }

  .phase-checkbox.phase-disabled.svelte-r4mllz {
    opacity: 0.4;
    cursor: not-allowed;
  }

  .phase-checkbox.phase-disabled.svelte-r4mllz:hover {
    background: rgba(255, 255, 255, 0.05);
  }

  .phase-badge-soon.svelte-r4mllz {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(148, 163, 184, 0.4);
    flex-shrink: 0;
  }

  .planet-picker.svelte-a8i65w {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .planet-search.svelte-a8i65w {
    padding: 10px 14px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    color: #fff;
    font-size: 14px;
  }

  .planet-search.svelte-a8i65w::placeholder {
    color: #666;
  }

  /* Filter section */
  .filter-section.svelte-a8i65w {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
  }

  .filter-group.svelte-a8i65w {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .filter-label.svelte-a8i65w {
    font-size: 11px;
    color: #888;
    margin-right: 2px;
  }

  .filter-btn.svelte-a8i65w {
    padding: 4px 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.05);
    color: #aaa;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s;
  }

  .filter-btn.svelte-a8i65w:hover {
    background: rgba(255, 255, 255, 0.15);
  }

  /* Inactive (null) state - lower opacity */
  .filter-btn.inactive.svelte-a8i65w {
    opacity: 0.5;
  }

  /* Include (true) state */
  .filter-btn.include.svelte-a8i65w {
    border-color: #ffd700;
    color: #fff;
    opacity: 1;
  }

  /* Exclude (false) state */
  .filter-btn.exclude.svelte-a8i65w {
    opacity: 1;
    color: #ff6b6b;
  }

  /* Strikethrough for excluded */
  .strikethrough.svelte-a8i65w {
    text-decoration: line-through;
  }

  /* Legendary filter */
  .legendary-btn.include.svelte-a8i65w {
    background: rgba(255, 215, 0, 0.3);
    border-color: #ffd700;
    color: #ffd700;
  }
  .legendary-btn.exclude.svelte-a8i65w {
    background: rgba(255, 107, 107, 0.2);
    border-color: #ff6b6b;
  }

  /* Home filter */
  .home-btn.svelte-a8i65w {
    border-color: #f39c12;
  }
  .home-btn.include.svelte-a8i65w {
    background: rgba(243, 156, 18, 0.3);
    border-color: #f39c12;
    color: #f39c12;
  }
  .home-btn.exclude.svelte-a8i65w {
    background: rgba(255, 107, 107, 0.2);
    border-color: #ff6b6b;
  }

  /* Trait filter buttons */
  .trait-cultural.svelte-a8i65w {
    border-color: #3498db;
  }
  .trait-cultural.include.svelte-a8i65w {
    background: rgba(52, 152, 219, 0.3);
    border-color: #3498db;
    color: #3498db;
  }
  .trait-cultural.exclude.svelte-a8i65w {
    background: rgba(255, 107, 107, 0.2);
    border-color: #ff6b6b;
  }

  .trait-industrial.svelte-a8i65w {
    border-color: #27ae60;
  }
  .trait-industrial.include.svelte-a8i65w {
    background: rgba(39, 174, 96, 0.3);
    border-color: #27ae60;
    color: #27ae60;
  }
  .trait-industrial.exclude.svelte-a8i65w {
    background: rgba(255, 107, 107, 0.2);
    border-color: #ff6b6b;
  }

  .trait-hazardous.svelte-a8i65w {
    border-color: #e74c3c;
  }
  .trait-hazardous.include.svelte-a8i65w {
    background: rgba(231, 76, 60, 0.3);
    border-color: #e74c3c;
    color: #e74c3c;
  }
  .trait-hazardous.exclude.svelte-a8i65w {
    background: rgba(255, 107, 107, 0.2);
    border-color: #ff6b6b;
  }

  /* Tech filter buttons */
  .tech-red.svelte-a8i65w, .tech-blue.svelte-a8i65w, .tech-green.svelte-a8i65w, .tech-yellow.svelte-a8i65w {
    width: 20px;
    height: 20px;
    padding: 0;
    border-radius: 50%;
    position: relative;
  }

  .tech-red.svelte-a8i65w {
    border-color: #e74c3c;
    background: rgba(231, 76, 60, 0.2);
  }
  .tech-red.include.svelte-a8i65w {
    background: #e74c3c;
    border-color: #e74c3c;
  }
  .tech-red.exclude.svelte-a8i65w {
    background: rgba(255, 107, 107, 0.2);
    border-color: #ff6b6b;
  }
  .tech-red.exclude.svelte-a8i65w::after {
    content: '×';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ff6b6b;
    font-size: 14px;
    font-weight: bold;
  }

  .tech-blue.svelte-a8i65w {
    border-color: #3498db;
    background: rgba(52, 152, 219, 0.2);
  }
  .tech-blue.include.svelte-a8i65w {
    background: #3498db;
    border-color: #3498db;
  }
  .tech-blue.exclude.svelte-a8i65w {
    background: rgba(255, 107, 107, 0.2);
    border-color: #ff6b6b;
  }
  .tech-blue.exclude.svelte-a8i65w::after {
    content: '×';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ff6b6b;
    font-size: 14px;
    font-weight: bold;
  }

  .tech-green.svelte-a8i65w {
    border-color: #2ecc71;
    background: rgba(46, 204, 113, 0.2);
  }
  .tech-green.include.svelte-a8i65w {
    background: #2ecc71;
    border-color: #2ecc71;
  }
  .tech-green.exclude.svelte-a8i65w {
    background: rgba(255, 107, 107, 0.2);
    border-color: #ff6b6b;
  }
  .tech-green.exclude.svelte-a8i65w::after {
    content: '×';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ff6b6b;
    font-size: 14px;
    font-weight: bold;
  }

  .tech-yellow.svelte-a8i65w {
    border-color: #f1c40f;
    background: rgba(241, 196, 15, 0.2);
  }
  .tech-yellow.include.svelte-a8i65w {
    background: #f1c40f;
    border-color: #f1c40f;
  }
  .tech-yellow.exclude.svelte-a8i65w {
    background: rgba(255, 107, 107, 0.2);
    border-color: #ff6b6b;
  }
  .tech-yellow.exclude.svelte-a8i65w::after {
    content: '×';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ff6b6b;
    font-size: 14px;
    font-weight: bold;
  }

  .clear-btn.svelte-a8i65w {
    padding: 4px 10px;
    border: 1px solid rgba(255, 100, 100, 0.3);
    border-radius: 4px;
    background: rgba(255, 100, 100, 0.1);
    color: #ff6b6b;
    font-size: 11px;
    cursor: pointer;
    margin-left: auto;
  }

  .clear-btn.svelte-a8i65w:hover {
    background: rgba(255, 100, 100, 0.2);
  }

  .results-count.svelte-a8i65w {
    font-size: 12px;
    color: #888;
  }

  .planet-list.svelte-a8i65w {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 800px;
    overflow-y: auto;
    padding: 4px;
  }

  .planet-option.svelte-a8i65w {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
  }

  .planet-option.svelte-a8i65w:hover {
    background: rgba(255, 255, 255, 0.1);
  }

  .planet-option.selected.svelte-a8i65w {
    border-color: #ffd700;
    background: rgba(255, 215, 0, 0.1);
  }

  .planet-option.legendary.svelte-a8i65w {
    background: rgba(255, 215, 0, 0.05);
  }

  .planet-option.legendary.selected.svelte-a8i65w {
    background: rgba(255, 215, 0, 0.15);
  }

  .planet-main.svelte-a8i65w {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .planet-name.svelte-a8i65w {
    font-size: 14px;
    color: #fff;
    font-weight: 500;
  }

  .legendary-star.svelte-a8i65w {
    color: #ffd700;
    margin-left: 4px;
  }

  .home-icon.svelte-a8i65w {
    color: #f39c12;
    margin-left: 4px;
    font-size: 12px;
  }

  .planet-option.home-system.svelte-a8i65w {
    background: rgba(243, 156, 18, 0.05);
  }

  .planet-option.home-system.selected.svelte-a8i65w {
    background: rgba(243, 156, 18, 0.15);
  }

  .planet-option.detail-open.svelte-a8i65w {
    border-color: rgba(255, 255, 255, 0.3);
  }

  .planet-stats.svelte-a8i65w {
    font-size: 13px;
    font-weight: 600;
  }

  .resources.svelte-a8i65w {
    color: #f1c40f;
  }

  .influence.svelte-a8i65w {
    color: #3498db;
  }

  .planet-details.svelte-a8i65w {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 11px;
  }

  .traits.svelte-a8i65w {
    display: flex;
    gap: 2px;
  }

  .trait.svelte-a8i65w {
    width: 16px;
    height: 16px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: bold;
    color: #fff;
  }

  .trait-cultural.svelte-a8i65w {
    background: #3498db;
  }

  .trait-industrial.svelte-a8i65w {
    background: #27ae60;
  }

  .trait-hazardous.svelte-a8i65w {
    background: #e74c3c;
  }

  .tech-specialties.svelte-a8i65w {
    display: flex;
    gap: 2px;
  }

  .tech.svelte-a8i65w {
    width: 12px;
    height: 12px;
    border-radius: 50%;
  }

  .hex-id.svelte-a8i65w {
    color: #666;
    margin-left: auto;
  }

  .loading.svelte-a8i65w {
    text-align: center;
    color: #888;
    padding: 20px;
  }

  .no-results.svelte-a8i65w {
    text-align: center;
    color: #666;
    padding: 20px;
  }

  .selected-summary.svelte-a8i65w {
    padding: 10px 12px;
    background: rgba(255, 215, 0, 0.1);
    border-radius: 6px;
    font-size: 12px;
  }

  .selected-label.svelte-a8i65w {
    color: #ffd700;
    font-weight: 500;
  }

  .selected-list.svelte-a8i65w {
    color: #ccc;
    margin-left: 6px;
  }

  /* Planet effect detail panel */
  .planet-effect-detail.svelte-a8i65w {
    margin-top: 8px;
    padding: 10px;
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 6px;
  }

  .effect-card-name.svelte-a8i65w {
    font-size: 12px;
    font-weight: 600;
    color: #ffd700;
    margin-bottom: 6px;
  }

  .effect-text.svelte-a8i65w {
    font-size: 11px;
    color: #ccc;
    line-height: 1.4;
  }

  /* Special filters group */
  .special-filters.svelte-a8i65w {
    gap: 4px;
  }

  .rulebook-view.svelte-ic2j5a {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
  }

  .rulebook-header.svelte-ic2j5a {
    padding: 16px;
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid rgba(255, 215, 0, 0.2);
    flex-shrink: 0;
  }

  .header-top.svelte-ic2j5a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
  }

  .title.svelte-ic2j5a {
    margin: 0;
    font-size: 1.5rem;
    color: #ffd700;
    font-weight: 700;
  }

  .close-btn.svelte-ic2j5a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: #ccc;
    cursor: pointer;
    transition: all 0.2s;
  }

  .close-btn.svelte-ic2j5a:hover {
    background: rgba(255, 100, 100, 0.2);
    border-color: rgba(255, 100, 100, 0.4);
    color: #ff6b6b;
  }

  .search-container.svelte-ic2j5a {
    position: relative;
    display: flex;
    align-items: center;
  }

  .search-icon.svelte-ic2j5a {
    position: absolute;
    left: 12px;
    color: #888;
    pointer-events: none;
  }

  .search-input.svelte-ic2j5a {
    width: 100%;
    padding: 10px 40px 10px 40px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: #fff;
    font-size: 1rem;
    outline: none;
    transition: all 0.2s;
  }

  .search-input.svelte-ic2j5a::placeholder {
    color: #888;
  }

  .search-input.svelte-ic2j5a:focus {
    border-color: rgba(255, 215, 0, 0.5);
    background: rgba(255, 255, 255, 0.15);
  }

  .clear-btn.svelte-ic2j5a {
    position: absolute;
    right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: none;
    border: none;
    color: #888;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s;
  }

  .clear-btn.svelte-ic2j5a:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
  }

  .rulebook-content.svelte-ic2j5a {
    flex: 1;
    overflow-y: auto;
  }

  .loading-state.svelte-ic2j5a {
    padding: 40px 20px;
    text-align: center;
    color: #888;
  }

  .rules-list.svelte-ic2j5a {
    padding: 8px 16px;
  }

  .no-results.svelte-ic2j5a {
    padding: 40px 20px;
    text-align: center;
    color: #888;
  }

  .letter-group.svelte-ic2j5a {
    margin-bottom: 16px;
  }

  .letter-header.svelte-ic2j5a {
    padding: 8px 12px;
    background: rgba(255, 215, 0, 0.15);
    border-radius: 6px;
    color: #ffd700;
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: 8px;
  }

  .rules-in-group.svelte-ic2j5a {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .rule-item.svelte-ic2j5a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.05);
    border: none;
    border-radius: 6px;
    color: #e0e0e0;
    font-size: 0.95rem;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s;
  }

  .rule-item.svelte-ic2j5a:hover {
    background: rgba(255, 215, 0, 0.15);
    color: #fff;
  }

  .rule-item.svelte-ic2j5a:hover .arrow-icon:where(.svelte-ic2j5a) {
    color: #ffd700;
    transform: translateX(2px);
  }

  .rule-name.svelte-ic2j5a {
    flex: 1;
  }

  .arrow-icon.svelte-ic2j5a {
    color: #666;
    transition: all 0.2s;
    flex-shrink: 0;
  }

  .rulebook-footer.svelte-ic2j5a {
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.3);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
  }

  .stats.svelte-ic2j5a {
    color: #888;
    font-size: 0.85rem;
  }

  .bottom-nav.svelte-py6be7 {
    display: none; /* Hidden by default, shown only on mobile */
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 64px;
    background: linear-gradient(to top, rgba(15, 23, 42, 0.98), rgba(15, 23, 42, 0.95));
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(148, 163, 184, 0.1);
    z-index: 1000;
    justify-content: space-around;
    align-items: center;
    padding: 0 16px;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }

  /* Show only on mobile */
  @media (max-width: 768px) {
    .bottom-nav.svelte-py6be7 {
      display: flex;
    }
  }

  .nav-item.svelte-py6be7 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 16px;
    background: transparent;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    color: rgba(148, 163, 184, 0.7);
    transition: all 0.2s ease;
    min-width: 72px;
  }

  .nav-item.svelte-py6be7:hover {
    color: rgba(148, 163, 184, 1);
    background: rgba(148, 163, 184, 0.1);
  }

  .nav-item.svelte-py6be7:disabled {
    opacity: 0.35;
    cursor: not-allowed;
  }

  .nav-item.svelte-py6be7:disabled:hover {
    color: rgba(148, 163, 184, 0.7);
    background: transparent;
  }

  .nav-item.active.svelte-py6be7 {
    color: #60a5fa;
    background: rgba(96, 165, 250, 0.15);
  }

  .nav-icon.svelte-py6be7 {
    width: 24px;
    height: 24px;
  }

  .nav-label.svelte-py6be7 {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .nav-icon-wrapper.svelte-py6be7 {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .law-badge.svelte-py6be7 {
    position: absolute;
    top: -6px;
    right: -10px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: #60a5fa;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .hex-tile.svelte-1rfdg7l {
    cursor: pointer;
    transition: filter 0.2s ease;
  }

  .hex-tile.svelte-1rfdg7l:hover {
    filter: brightness(1.15);
  }

  .hex-tile.svelte-1rfdg7l:focus {
    outline: none;
  }

  .hex-tile.svelte-1rfdg7l:focus .hex-border:where(.svelte-1rfdg7l) {
    stroke: #ffd700;
    stroke-width: 3;
  }

  .hex-background.svelte-1rfdg7l {
    stroke: none;
  }

  .hex-border.svelte-1rfdg7l {
    fill: none;
    stroke: rgba(80, 100, 140, 0.5);
    stroke-width: 1;
    transition: stroke 0.2s ease, stroke-width 0.2s ease;
  }

  .hex-border.highlighted.svelte-1rfdg7l {
    stroke: #ffd700;
    stroke-width: 3;
  }

  /* Home border color is set dynamically via style attribute */

  .hex-home-glow.svelte-1rfdg7l {
    fill: none;
    stroke-width: 4;
    opacity: 0.5;
    filter: blur(2px);
  }

  .hex-highlight.svelte-1rfdg7l {
    fill: rgba(255, 215, 0, 0.25);
    stroke: none;
    pointer-events: none;
    animation: svelte-1rfdg7l-pulse 1.5s ease-in-out infinite;
  }

  @keyframes svelte-1rfdg7l-pulse {
    0%, 100% {
      opacity: 0.25;
    }
    50% {
      opacity: 0.45;
    }
  }

  .planet-name.svelte-1rfdg7l {
    font-size: 10px;
    fill: rgba(255, 255, 255, 0.95);
    text-anchor: middle;
    dominant-baseline: hanging;
    pointer-events: none;
    font-family: system-ui, -apple-system, sans-serif;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
  }

  .resource-text.svelte-1rfdg7l, .influence-text.svelte-1rfdg7l {
    font-size: 18px;
    font-weight: 700;
    text-anchor: middle;
    dominant-baseline: middle;
    pointer-events: none;
    font-family: system-ui, -apple-system, sans-serif;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
  }

  .tile-number.svelte-1rfdg7l {
    font-size: 11px;
    fill: rgba(255, 255, 255, 0.7);
    text-anchor: middle;
    dominant-baseline: middle;
    pointer-events: none;
    font-family: monospace;
    font-weight: 600;
  }

  .hex-tile.mecatol.svelte-1rfdg7l .hex-border:where(.svelte-1rfdg7l) {
    stroke: rgba(255, 215, 0, 0.6);
    stroke-width: 2;
  }

  /* (unused) .wormhole-symbol {
    font-size: 16px;
    font-weight: 700;
    text-anchor: middle;
    dominant-baseline: middle;
    pointer-events: none;
  }*/

  .anomaly-icon.svelte-1rfdg7l {
    pointer-events: none;
  }

  .anomaly-icon.svelte-1rfdg7l :where(.svelte-1rfdg7l) {
    pointer-events: none;
  }

  .anomaly-background.svelte-1rfdg7l {
    pointer-events: none;
  }

  .anomaly-background.svelte-1rfdg7l :where(.svelte-1rfdg7l) {
    pointer-events: none;
  }

  .hex-tile.hyperlane.svelte-1rfdg7l .hex-background:where(.svelte-1rfdg7l) {
    fill: #0a1628;
  }

  /* Empty hex styling */
  .hex-tile.empty.svelte-1rfdg7l {
    cursor: default;
  }

  .hex-tile.empty.svelte-1rfdg7l:hover {
    filter: none;
  }

  .hex-tile.empty.svelte-1rfdg7l .hex-border:where(.svelte-1rfdg7l) {
    stroke: rgba(60, 70, 90, 0.4);
  }

  /* Empty tiles use same dark background as normal tiles (set via style) */

  /* Home system styling - no special background, uses player color tint */

  /* (unused) .home-player-name {
    font-size: 9px;
    font-weight: 700;
    fill: #ffffff;
    text-anchor: middle;
    dominant-baseline: middle;
    pointer-events: none;
    font-family: system-ui, -apple-system, sans-serif;
    text-transform: uppercase;
  }*/

  .home-system-info.svelte-1rfdg7l image:where(.svelte-1rfdg7l) {
    pointer-events: none;
  }

  .hex-map-container.svelte-1xdpt0r {
    width: 100%;
    height: 100%;
    min-height: 300px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0d1421 0%, #1a2744 50%, #0d1421 100%);
    border-radius: 8px;
    overflow: hidden;
    user-select: none;
  }

  .hex-map-svg.svelte-1xdpt0r {
    width: 100%;
    height: 100%;
    display: block;
  }

  .no-map-message.svelte-1xdpt0r {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: rgba(148, 163, 184, 0.6);
    text-align: center;
    padding: 20px;
  }

  .no-map-icon.svelte-1xdpt0r {
    width: 48px;
    height: 48px;
    opacity: 0.5;
  }

  .no-map-message.svelte-1xdpt0r p:where(.svelte-1xdpt0r) {
    font-size: 1rem;
    margin: 0;
    color: rgba(148, 163, 184, 0.8);
  }

  .no-map-hint.svelte-1xdpt0r {
    font-size: 0.85rem;
    color: rgba(148, 163, 184, 0.5);
    max-width: 250px;
  }

  .loading-map.svelte-1xdpt0r {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(148, 163, 184, 0.6);
  }

  .map-controls.svelte-1xdpt0r {
    position: absolute;
    bottom: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 0, 0, 0.5);
    padding: 6px 10px;
    border-radius: 8px;
    backdrop-filter: blur(4px);
  }

  .zoom-btn.svelte-1xdpt0r {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .zoom-btn.svelte-1xdpt0r:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
  }

  .zoom-btn.svelte-1xdpt0r:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }

  .zoom-level.svelte-1xdpt0r {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.7);
    min-width: 36px;
    text-align: center;
  }

  .reset-btn.svelte-1xdpt0r {
    margin-left: 4px;
  }

  .clear-highlight-btn.svelte-1xdpt0r {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: rgba(255, 215, 0, 0.2);
    border: 1px solid rgba(255, 215, 0, 0.4);
    border-radius: 4px;
    color: #ffd700;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-left: 8px;
  }

  .clear-highlight-btn.svelte-1xdpt0r:hover {
    background: rgba(255, 215, 0, 0.3);
    border-color: rgba(255, 215, 0, 0.6);
  }

  .wormhole-indicator.svelte-1xdpt0r {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 28px;
    padding: 0 8px;
    background: color-mix(in srgb, var(--wormhole-color) 20%, transparent);
    border: 1px solid color-mix(in srgb, var(--wormhole-color) 50%, transparent);
    border-radius: 4px;
    color: var(--wormhole-color);
    cursor: pointer;
    transition: all 0.2s ease;
    margin-left: 8px;
    font-weight: bold;
  }

  .wormhole-indicator.svelte-1xdpt0r:hover {
    background: color-mix(in srgb, var(--wormhole-color) 30%, transparent);
    border-color: var(--wormhole-color);
  }

  .wormhole-symbol.svelte-1xdpt0r {
    font-size: 14px;
  }

  .wormhole-connections.svelte-1xdpt0r line:where(.svelte-1xdpt0r) {
    pointer-events: none;
  }

  /* Player view selector */
  .player-view-selector.svelte-1xdpt0r {
    position: relative;
    margin-left: 8px;
  }

  .player-view-btn.svelte-1xdpt0r {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 28px;
    min-width: 28px;
    padding: 0 8px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .player-view-btn.svelte-1xdpt0r:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
  }

  .player-view-btn.active.svelte-1xdpt0r {
    background: color-mix(in srgb, var(--player-color, #22c55e) 25%, transparent);
    border-color: var(--player-color, #22c55e);
  }

  .player-indicator.svelte-1xdpt0r {
    width: 10px;
    height: 10px;
    border-radius: 50%;
  }

  .player-name.svelte-1xdpt0r {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
  }

  .player-dropdown.svelte-1xdpt0r {
    position: absolute;
    bottom: 100%;
    right: 0;
    margin-bottom: 8px;
    background: rgba(0, 0, 0, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    padding: 4px;
    min-width: 140px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    z-index: 100;
  }

  .player-option.svelte-1xdpt0r {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    font-size: 12px;
    text-align: left;
    transition: background 0.15s ease;
  }

  .player-option.svelte-1xdpt0r:hover {
    background: rgba(255, 255, 255, 0.1);
  }

  .player-option.selected.svelte-1xdpt0r {
    background: rgba(255, 255, 255, 0.15);
  }

  .player-option.default-view.svelte-1xdpt0r {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 2px;
    padding-bottom: 10px;
  }

  .player-color.svelte-1xdpt0r {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  .compact-picker.svelte-b2um4t {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .search-row.svelte-b2um4t {
    display: flex;
    gap: 4px;
  }

  .search-input.svelte-b2um4t {
    flex: 1;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    color: #fff;
    font-size: 13px;
  }

  .search-input.svelte-b2um4t::placeholder {
    color: #666;
  }

  .clear-btn.svelte-b2um4t {
    padding: 0 10px;
    background: rgba(255, 100, 100, 0.2);
    border: 1px solid rgba(255, 100, 100, 0.3);
    border-radius: 6px;
    color: #ff6b6b;
    cursor: pointer;
    font-size: 16px;
  }

  .clear-btn.svelte-b2um4t:hover {
    background: rgba(255, 100, 100, 0.3);
  }

  .planet-list.svelte-b2um4t {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 250px;
    overflow-y: auto;
  }

  .planet-item.svelte-b2um4t {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    text-align: left;
    color: #fff;
    font-size: 12px;
    transition: all 0.15s;
  }

  .planet-item.svelte-b2um4t:hover {
    background: rgba(255, 255, 255, 0.1);
  }

  .planet-item.selected.svelte-b2um4t {
    border-color: #ffd700;
    background: rgba(255, 215, 0, 0.15);
  }

  .planet-item.legendary.svelte-b2um4t {
    background: rgba(255, 215, 0, 0.05);
  }

  /* Trait border colors */
  .planet-item.trait-cultural.svelte-b2um4t {
    border-left: 3px solid #4dabf7;
  }

  .planet-item.trait-industrial.svelte-b2um4t {
    border-left: 3px solid #51cf66;
  }

  .planet-item.trait-hazardous.svelte-b2um4t {
    border-left: 3px solid #ff6b6b;
  }

  .name.svelte-b2um4t {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .star.svelte-b2um4t {
    color: #ffd700;
    font-size: 10px;
  }

  .stats.svelte-b2um4t {
    font-weight: 600;
    font-size: 11px;
  }

  .r.svelte-b2um4t {
    color: #ffd43b;
  }

  .i.svelte-b2um4t {
    color: #74c0fc;
  }

  .loading.svelte-b2um4t {
    text-align: center;
    color: #888;
    font-size: 12px;
    padding: 16px;
  }

  .no-results.svelte-b2um4t {
    text-align: center;
    color: #666;
    font-size: 12px;
    margin: 8px 0;
  }

  .hint.svelte-b2um4t {
    text-align: center;
    color: #555;
    font-size: 11px;
    margin: 8px 0 0;
    font-style: italic;
  }

  .map-panel-fullscreen.svelte-1awywlw {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: #0d1421;
  }

  .close-btn.svelte-1awywlw {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 100;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: all 0.2s;
  }

  .close-btn.svelte-1awywlw:hover {
    background: rgba(255, 100, 100, 0.4);
    border-color: rgba(255, 100, 100, 0.6);
  }

  .map-fullscreen.svelte-1awywlw {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
  }

  /* Floating search widget */
  .search-widget.svelte-1awywlw {
    position: absolute;
    top: 80px;
    right: 16px;
    z-index: 50;
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    gap: 0;
  }

  .widget-toggle.svelte-1awywlw {
    width: 44px;
    height: 44px;
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: all 0.2s;
    flex-shrink: 0;
  }

  .widget-toggle.svelte-1awywlw:hover {
    background: rgba(0, 0, 0, 0.9);
    border-color: rgba(255, 255, 255, 0.4);
  }

  .toggle-icon.svelte-1awywlw {
    font-size: 16px;
  }

  .widget-content.svelte-1awywlw {
    width: 280px;
    max-height: calc(100vh - 120px);
    background: rgba(0, 0, 0, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 12px;
    margin-right: 8px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .widget-content.svelte-1awywlw h4:where(.svelte-1awywlw) {
    margin: 0;
    font-size: 11px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  /* Tile info */
  .tile-info.svelte-1awywlw {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .tile-header.svelte-1awywlw {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .tile-id.svelte-1awywlw {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
  }

  .home-badge.svelte-1awywlw {
    font-size: 9px;
    padding: 2px 6px;
    border-radius: 3px;
    color: #fff;
    text-transform: uppercase;
  }

  .planets-list.svelte-1awywlw {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .planet-item.svelte-1awywlw {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 8px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
  }

  .planet-name.svelte-1awywlw {
    font-size: 12px;
    color: #fff;
  }

  .planet-stats.svelte-1awywlw {
    display: flex;
    align-items: center;
    gap: 3px;
  }

  .resources.svelte-1awywlw {
    color: #ffd43b;
    font-weight: 600;
    font-size: 11px;
  }

  .influence.svelte-1awywlw {
    color: #74c0fc;
    font-weight: 600;
    font-size: 11px;
  }

  .separator.svelte-1awywlw {
    color: #666;
    font-size: 10px;
  }

  .trait.svelte-1awywlw {
    width: 14px;
    height: 14px;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    font-weight: bold;
    color: #fff;
    margin-left: 3px;
  }

  .tech-icon.svelte-1awywlw {
    width: 12px;
    height: 12px;
    margin-left: 2px;
    object-fit: contain;
  }

  .anomaly-info.svelte-1awywlw, .wormhole-info.svelte-1awywlw {
    padding: 6px 8px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
  }

  .anomaly-type.svelte-1awywlw {
    color: #f59f00;
    font-size: 12px;
    text-transform: capitalize;
  }

  .wormhole-type.svelte-1awywlw {
    color: #845ef7;
    font-size: 12px;
  }

  .empty-tile.svelte-1awywlw {
    color: #666;
    font-size: 11px;
    margin: 0;
  }

  /* Mobile responsive */
  @media (max-width: 600px) {
    .search-widget.svelte-1awywlw {
      top: auto;
      bottom: 80px;
      right: 8px;
    }

    .widget-content.svelte-1awywlw {
      width: 260px;
      max-height: 50vh;
    }

    .close-btn.svelte-1awywlw {
      top: 8px;
      right: 8px;
      width: 36px;
      height: 36px;
      font-size: 20px;
    }
  }

  .voting-view.svelte-1daqqze {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  .voting-header.svelte-1daqqze {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
  }

  .header-left.svelte-1daqqze {
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  .voting-header.svelte-1daqqze h2:where(.svelte-1daqqze) {
    color: #ffd700;
    margin: 0;
  }

  .law-counter-badge.svelte-1daqqze {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.75rem;
    background: rgba(52, 152, 219, 0.25);
    border: 1px solid rgba(52, 152, 219, 0.5);
    border-radius: 6px;
    color: #5dade2;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.05em;
  }

  .speaker-info.svelte-1daqqze {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #888;
  }

  .error-message.svelte-1daqqze {
    padding: 1rem;
    background: rgba(220, 53, 69, 0.2);
    border: 1px solid rgba(220, 53, 69, 0.5);
    border-radius: 8px;
    color: #ff6b6b;
  }

  .btn-danger.svelte-1daqqze {
    background: #dc3545;
    color: #fff;
  }

  .btn-danger.svelte-1daqqze:hover {
    background: #c82333;
  }

  /* Sections */
  .section.svelte-1daqqze {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.5rem;
  }

  .section.svelte-1daqqze h3:where(.svelte-1daqqze) {
    color: #fff;
    margin: 0 0 0.5rem 0;
    font-size: 1.1rem;
  }

  .section-hint.svelte-1daqqze {
    color: #666;
    font-size: 0.85rem;
    margin-bottom: 1rem;
  }

  /* Declaration */
  .player-declaration.svelte-1daqqze {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
  }

  .declared-info.svelte-1daqqze {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #888;
    font-size: 0.9rem;
  }

  .declared-votes.svelte-1daqqze {
    color: #ffd700;
    font-weight: 600;
  }

  .btn-edit-small.svelte-1daqqze {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #888;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s;
  }

  .btn-edit-small.svelte-1daqqze:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
  }

  .btn-cancel-small.svelte-1daqqze {
    background: rgba(255, 107, 107, 0.2);
    border: none;
    color: #ff6b6b;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s;
  }

  .btn-cancel-small.svelte-1daqqze:hover {
    background: rgba(255, 107, 107, 0.3);
  }

  .remaining-votes.svelte-1daqqze {
    color: #ffd700;
  }

  .declare-form.svelte-1daqqze {
    display: flex;
    gap: 0.5rem;
    align-items: center;
  }

  .vote-stepper.svelte-1daqqze {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .btn-step.svelte-1daqqze {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
    padding: 0;
  }

  .btn-step.svelte-1daqqze:hover {
    background: rgba(255, 255, 255, 0.15);
  }

  .btn-step.svelte-1daqqze:disabled {
    opacity: 0.3;
    cursor: not-allowed;
  }

  .inline-speaker-selector.svelte-1daqqze {
    margin-bottom: 1rem;
    padding: 0.75rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
  }

  .inline-speaker-label.svelte-1daqqze {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #94a3b8;
    margin: 0 0 0.5rem 0;
  }

  .inline-speaker-options.svelte-1daqqze {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
  }

  .inline-speaker-btn.svelte-1daqqze {
    padding: 0;
    background: transparent;
    border: 2px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    color: #fff;
    transition: border-color 0.15s;
  }

  .inline-speaker-btn.svelte-1daqqze:hover {
    border-color: rgba(255, 255, 255, 0.25);
  }

  .inline-speaker-btn.selected.svelte-1daqqze {
    border-color: #ffd700;
  }

  .speaker-action.svelte-1daqqze {
    margin-top: 1rem;
    text-align: center;
  }

  .hint.svelte-1daqqze {
    color: #888;
    font-size: 0.85rem;
  }

  .waiting-info.svelte-1daqqze {
    text-align: center;
    color: #888;
    padding: 1rem;
  }

  /* Round section */
  .round-section.svelte-1daqqze {
    background: rgba(255, 215, 0, 0.05);
    border: 1px solid rgba(255, 215, 0, 0.2);
    border-radius: 12px;
    padding: 1.5rem;
  }

  .round-header.svelte-1daqqze {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
  }

  .round-header.svelte-1daqqze h3:where(.svelte-1daqqze) {
    color: #ffd700;
    margin: 0;
  }

  .agenda-type-badge.svelte-1daqqze {
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
  }

  .agenda-type-badge.law.svelte-1daqqze {
    background: rgba(52, 152, 219, 0.3);
    color: #5dade2;
  }

  .agenda-type-badge.directive.svelte-1daqqze {
    background: rgba(241, 196, 15, 0.3);
    color: #f1c40f;
  }

  .agenda-type-badge.elect.svelte-1daqqze {
    background: rgba(155, 89, 182, 0.3);
    color: #bb8fce;
  }

  .agenda-card.svelte-1daqqze {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
  }

  .agenda-name.svelte-1daqqze {
    font-size: 1.2rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 1.2rem;
  }

  .agenda-text.svelte-1daqqze {
    color: #aaa;
    font-size: 0.9rem;
    line-height: 1.4;
  }

  /* Voting section */
  .voting-section.svelte-1daqqze {
    margin-top: 1rem;
  }

  .voting-section.svelte-1daqqze h3:where(.svelte-1daqqze) {
    color: #fff;
    margin-bottom: 1rem;
  }

  .player-vote-card.svelte-1daqqze {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 0.75rem;
  }

  .vote-card-header.svelte-1daqqze {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
  }

  .votes-remaining.svelte-1daqqze {
    color: #ffd700;
    font-size: 0.9rem;
    margin-left: auto;
  }

  .vote-card-body.svelte-1daqqze {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .quick-votes.svelte-1daqqze {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
  }

  .quick-vote-btn.svelte-1daqqze {
    padding: 0.4rem 0.8rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    color: #fff;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
  }

  .quick-vote-btn.svelte-1daqqze:hover {
    background: rgba(255, 255, 255, 0.2);
  }

  .quick-vote-btn.selected.svelte-1daqqze {
    background: #ffd700;
    color: #1a1a2e;
    border-color: #ffd700;
  }

  .quick-vote-btn.all-in.svelte-1daqqze {
    background: linear-gradient(
      135deg,
      rgba(255, 215, 0, 0.3) 0%,
      rgba(255, 180, 0, 0.4) 100%
    );
    color: #ffd700;
    border: 2px solid #ffd700;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.5rem 1rem;
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.3);
  }

  .quick-vote-btn.all-in.svelte-1daqqze:hover {
    background: linear-gradient(
      135deg,
      rgba(255, 215, 0, 0.4) 0%,
      rgba(255, 180, 0, 0.5) 100%
    );
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.5);
  }

  .quick-vote-btn.all-in.selected.svelte-1daqqze {
    background: linear-gradient(135deg, #ffd700 0%, #ffb800 100%);
    color: #1a1a2e;
    box-shadow: 0 0 16px rgba(255, 215, 0, 0.6);
  }

  /* Player election grid */
  .player-election-grid.svelte-1daqqze {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    width: 100%;
  }

  .player-election-grid.svelte-1daqqze .player-badge {
    min-width: auto;
    font-size: 12px;
    padding: 3px 8px;
    width: 100%;
    justify-content: center;
  }

  .player-election-grid.svelte-1daqqze .faction-icon {
    width: 16px;
    height: 16px;
  }

  /* Vote input row */
  .vote-input-row.svelte-1daqqze {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
  }

  .vote-count-input.svelte-1daqqze {
    width: 70px;
    padding: 0.5rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 600;
    text-align: center;
  }

  .vote-count-input.svelte-1daqqze:focus {
    outline: none;
    border-color: #ffd700;
    box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.2);
  }

  .vote-count-input.svelte-1daqqze::-webkit-inner-spin-button,
  .vote-count-input.svelte-1daqqze::-webkit-outer-spin-button {
    opacity: 1;
  }

  .vote-input-text.svelte-1daqqze {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    min-width: 120px;
  }

  .vote-input-hint.svelte-1daqqze {
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.8rem;
    font-style: italic;
    min-width: 120px;
  }

  .btn-vote-submit.svelte-1daqqze {
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #ffd700 0%, #ffb800 100%);
    border: none;
    border-radius: 4px;
    color: #1a1a2e;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
  }

  .btn-vote-submit.svelte-1daqqze:hover:not(:disabled) {
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.5);
    transform: translateY(-1px);
  }

  .btn-vote-submit.svelte-1daqqze:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  /* Quick vote hints (smaller buttons below input) */
  .quick-votes-hint.svelte-1daqqze {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
  }

  .quick-vote-hint-btn.svelte-1daqqze {
    padding: 0.25rem 0.5rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 3px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
  }

  .quick-vote-hint-btn.svelte-1daqqze:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
  }

  .quick-vote-hint-btn.all-in.svelte-1daqqze {
    color: #ffd700;
    border-color: rgba(255, 215, 0, 0.3);
  }

  .vote-section-divider.svelte-1daqqze {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 0.5rem 0;
  }

  /* Voted players section - edit option */
  .voted-players-section.svelte-1daqqze {
    margin-top: 1rem;
    padding: 1rem;
    background: rgba(40, 167, 69, 0.1);
    border: 1px solid rgba(40, 167, 69, 0.3);
    border-radius: 8px;
  }

  .voted-players-section.svelte-1daqqze h4:where(.svelte-1daqqze) {
    color: #28a745;
    margin: 0 0 0.75rem 0;
    font-size: 0.95rem;
  }

  .voted-player-card.svelte-1daqqze {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    margin-bottom: 0.5rem;
  }

  .voted-player-card.svelte-1daqqze:last-child {
    margin-bottom: 0;
  }

  .voted-status.svelte-1daqqze {
    color: #28a745;
    font-size: 0.9rem;
    font-weight: 500;
  }

  .btn-edit-vote.svelte-1daqqze {
    margin-left: auto;
    background: rgba(255, 193, 7, 0.2);
    border: 1px solid rgba(255, 193, 7, 0.4);
    color: #ffc107;
    padding: 0.4rem 0.8rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s;
  }

  .btn-edit-vote.svelte-1daqqze:hover:not(:disabled) {
    background: rgba(255, 193, 7, 0.3);
  }

  .btn-edit-vote.svelte-1daqqze:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .outcome-buttons.svelte-1daqqze {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
  }

  .outcome-btn.svelte-1daqqze {
    padding: 0.5rem 1rem;
    border: 2px solid transparent;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
  }

  .outcome-btn.outcome-for.svelte-1daqqze {
    background: #28a745;
    color: #fff;
  }

  .outcome-btn.outcome-for.svelte-1daqqze:hover {
    background: #218838;
  }

  .outcome-btn.outcome-for.selected.svelte-1daqqze {
    border-color: #fff;
    box-shadow: 0 0 8px rgba(40, 167, 69, 0.5);
  }

  .outcome-btn.outcome-against.svelte-1daqqze {
    background: #dc3545;
    color: #fff;
  }

  .outcome-btn.outcome-against.svelte-1daqqze:hover {
    background: #c82333;
  }

  .outcome-btn.outcome-against.selected.svelte-1daqqze {
    border-color: #fff;
    box-shadow: 0 0 8px rgba(220, 53, 69, 0.5);
  }

  .outcome-btn.outcome-elect.svelte-1daqqze {
    background: rgba(155, 89, 182, 0.3);
    color: #bb8fce;
  }

  .outcome-btn.outcome-elect.svelte-1daqqze:hover {
    background: rgba(155, 89, 182, 0.5);
  }

  .outcome-btn.outcome-elect.selected.svelte-1daqqze {
    border-color: #bb8fce;
    background: rgba(155, 89, 182, 0.6);
  }

  /* Strategy card election grid */
  .strategy-card-grid.svelte-1daqqze {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    width: 100%;
  }

  .strategy-card-btn.svelte-1daqqze {
    padding: 0.5rem 0.75rem;
    border: 2px solid var(--sc-border, #9b59b6);
    border-radius: 6px;
    background: var(--sc-bg, rgba(155, 89, 182, 0.3));
    color: var(--sc-text, #bb8fce);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
  }

  .strategy-card-btn.svelte-1daqqze:hover {
    filter: brightness(1.2);
    transform: translateY(-1px);
  }

  .strategy-card-btn.selected.svelte-1daqqze {
    border-width: 3px;
    box-shadow: 0 0 10px var(--sc-border, #9b59b6);
    filter: brightness(1.3);
  }

  /* Elect options grid for other types */
  .elect-options-grid.svelte-1daqqze {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    width: 100%;
  }

  .elect-options-grid.svelte-1daqqze .outcome-btn:where(.svelte-1daqqze) {
    width: 100%;
  }

  .outcome-btn.outcome-special.svelte-1daqqze {
    background: rgba(255, 255, 255, 0.1);
    color: #888;
  }

  .outcome-btn.outcome-special.svelte-1daqqze:hover {
    background: rgba(255, 255, 255, 0.2);
  }

  .outcome-btn.outcome-special.selected.svelte-1daqqze {
    border-color: #888;
    color: #fff;
  }

  /* Voting progress section - visible to all */
  .voting-progress-section.svelte-1daqqze {
    text-align: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    margin-top: 1rem;
  }

  .voting-progress-text.svelte-1daqqze {
    color: #888;
    font-size: 1rem;
    margin: 0;
  }

  .waiting-for-others.svelte-1daqqze {
    text-align: center;
    padding: 1.5rem;
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 12px;
    margin-top: 1rem;
  }

  .waiting-icon.svelte-1daqqze {
    font-size: 2rem;
    margin-bottom: 0.5rem;
  }

  .waiting-for-others.svelte-1daqqze p:where(.svelte-1daqqze) {
    color: #ffd700;
    margin: 0;
  }

  /* Mobile sticky status bar */
  .mobile-status-bar.svelte-1daqqze {
    display: none;
  }

  @media (max-width: 768px) {
    .inline-speaker-options.svelte-1daqqze {
      justify-content: space-evenly;
    }

    .mobile-status-bar.svelte-1daqqze {
      display: flex;
      flex-direction: column;
      position: fixed;
      bottom: 64px;
      bottom: calc(64px + env(safe-area-inset-bottom, 0px));
      left: 0;
      right: 0;
      background: rgba(10, 15, 30, 0.97);
      backdrop-filter: blur(12px);
      border-top: 1px solid rgba(255, 215, 0, 0.15);
      z-index: 900;
      padding: 5px 10px 6px;
      gap: 4px;
    }

    .mobile-status-top.svelte-1daqqze {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .mobile-phase-label.svelte-1daqqze {
      color: #ffd700;
      font-size: 0.65rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.6px;
    }

    .mobile-speaker-label.svelte-1daqqze {
      display: flex;
      align-items: center;
      gap: 4px;
      color: #e74c3c;
      font-size: 0.65rem;
      font-weight: 600;
    }

    .mobile-speaker-tag.svelte-1daqqze {
      background: rgba(231, 76, 60, 0.25);
      border: 1px solid rgba(231, 76, 60, 0.5);
      color: #e74c3c;
      font-size: 0.55rem;
      font-weight: 800;
      letter-spacing: 0.5px;
      padding: 1px 4px;
      border-radius: 3px;
      text-transform: uppercase;
    }

    .mobile-speaker-icon.svelte-1daqqze {
      width: 14px;
      height: 14px;
      object-fit: contain;
    }

    .mobile-players-row.svelte-1daqqze {
      display: grid;
      grid-template-columns: repeat(var(--player-cols, 3), 1fr);
      gap: 4px;
    }

    .mobile-chip.svelte-1daqqze {
      display: flex;
      align-items: center;
      gap: 3px;
      padding: 2px 4px;
      background: rgba(0, 0, 0, 0.4);
      border-radius: 4px;
      border: 1.5px solid #555;
      min-width: 0;
    }

    .mobile-chip.speaker.svelte-1daqqze {
      background: rgba(231, 76, 60, 0.15);
    }

    .mobile-chip.voted.svelte-1daqqze {
      background: rgba(40, 167, 69, 0.2);
      border-color: #28a745 !important;
    }

    .mobile-chip.waiting.svelte-1daqqze {
      opacity: 0.45;
    }

    .mobile-chip-icon.svelte-1daqqze {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .mobile-chip-img.svelte-1daqqze {
      width: 16px;
      height: 16px;
      object-fit: contain;
    }

    .mobile-chip-placeholder.svelte-1daqqze {
      font-size: 14px;
      line-height: 1;
    }

    .mobile-conn-dot.svelte-1daqqze {
      position: absolute;
      bottom: -1px;
      right: -2px;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: #dc3545;
      border: 1px solid rgba(0, 0, 0, 0.7);
    }

    .mobile-conn-dot.online.svelte-1daqqze {
      background: #28a745;
    }

    .mobile-chip-name.svelte-1daqqze {
      color: #ddd;
      font-size: 0.65rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      flex: 1;
      min-width: 0;
    }

    .mobile-chip-votes.svelte-1daqqze {
      color: #aaa;
      font-size: 0.62rem;
      font-family: monospace;
      font-weight: 600;
      flex-shrink: 0;
    }

    /* Hide large sections on mobile - shown in sticky bar instead */
    .voting-header.svelte-1daqqze {
      display: none;
    }

    .players-status.svelte-1daqqze {
      display: none;
    }

    /* Extra bottom padding for sticky bar + nav */
    .voting-view.svelte-1daqqze {
      padding-bottom: calc(64px + 72px + env(safe-area-inset-bottom, 0px));
    }
  }

  /* Players status - responsive grid */
  .players-status.svelte-1daqqze h3:where(.svelte-1daqqze) {
    margin-bottom: 1rem;
  }

  .players-grid.svelte-1daqqze {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
  }

  .players-grid.players-8.svelte-1daqqze {
    grid-template-columns: repeat(4, 1fr);
  }

  .player-status-chip.svelte-1daqqze {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 6px;
    border: 2px solid #666;
    min-width: 0;
  }

  .player-status-chip.speaker.svelte-1daqqze {
    background: rgba(231, 76, 60, 0.15);
  }

  .player-status-chip.waiting.svelte-1daqqze {
    opacity: 0.5;
    border-color: #444 !important;
  }

  .player-status-chip.voted.svelte-1daqqze {
    background: rgba(40, 167, 69, 0.2);
    border-color: #28a745 !important;
    box-shadow: 0 0 8px rgba(40, 167, 69, 0.3);
  }

  .player-status-chip.speaker.voted.svelte-1daqqze {
    background: linear-gradient(
      135deg,
      rgba(231, 76, 60, 0.15) 0%,
      rgba(40, 167, 69, 0.2) 100%
    );
  }

  .player-status-chip.speaker.waiting.svelte-1daqqze {
    opacity: 0.6;
  }

  .chip-faction.svelte-1daqqze {
    font-size: 1.1rem;
    flex-shrink: 0;
  }

  .chip-faction-img.svelte-1daqqze {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex-shrink: 0;
  }

  .chip-icon-wrapper.svelte-1daqqze {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .connection-dot.svelte-1daqqze {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #dc3545;
    border: 1.5px solid rgba(0, 0, 0, 0.6);
    box-shadow: 0 0 3px rgba(220, 53, 69, 0.5);
  }

  .connection-dot.online.svelte-1daqqze {
    background: #28a745;
    border-color: rgba(0, 0, 0, 0.6);
    box-shadow: 0 0 4px rgba(40, 167, 69, 0.6);
  }

  .chip-name.svelte-1daqqze {
    color: #fff;
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
  }

  .chip-votes.svelte-1daqqze {
    color: #888;
    font-size: 0.8rem;
    font-family: monospace;
    flex-shrink: 0;
  }

  /* Mobile: 2 columns, ultra compact */
  @media (max-width: 600px) {
    .players-grid.svelte-1daqqze,
    .players-grid.players-8.svelte-1daqqze {
      grid-template-columns: repeat(2, 1fr);
    }

    .player-status-chip.svelte-1daqqze {
      padding: 0.4rem 0.5rem;
      gap: 0.35rem;
    }

    .chip-faction.svelte-1daqqze {
      font-size: 1rem;
    }

    .chip-name.svelte-1daqqze {
      font-size: 0.75rem;
    }

    .chip-votes.svelte-1daqqze {
      font-size: 0.7rem;
    }

    .player-election-grid.svelte-1daqqze {
      grid-template-columns: repeat(2, 1fr);
    }

    .player-election-grid.svelte-1daqqze .player-badge {
      font-size: 11px;
      padding: 4px 6px;
    }

    .strategy-card-grid.svelte-1daqqze {
      grid-template-columns: repeat(2, 1fr);
    }

    .elect-options-grid.svelte-1daqqze {
      grid-template-columns: repeat(2, 1fr);
    }

    /* On mobile: hide Results heading and vote totals to save space */
    .results-section.svelte-1daqqze h3:where(.svelte-1daqqze) {
      display: none;
    }

    .vote-totals.svelte-1daqqze {
      display: none;
    }

    .speaker-next-actions.svelte-1daqqze {
      margin-top: 1rem;
      padding-top: 1rem;
    }

    .results-section.svelte-1daqqze {
      display: flex;
      flex-direction: column;
    }

    .results-section.svelte-1daqqze .breakdown-toggle:where(.svelte-1daqqze) {
      order: 3;
    }

    .results-section.svelte-1daqqze .votes-breakdown:where(.svelte-1daqqze) {
      order: 4;
    }

    .results-section.svelte-1daqqze .speaker-next-actions:where(.svelte-1daqqze) {
      order: 2;
    }
  }

  /* Results */
  .results-section.svelte-1daqqze {
    border-color: rgba(255, 215, 0, 0.3);
    background: rgba(255, 215, 0, 0.05);
  }

  .result-info.svelte-1daqqze {
    padding: 1rem;
    border-radius: 8px;
    text-align: center;
    margin-bottom: 1rem;
  }

  .result-info.abstained.svelte-1daqqze {
    background: rgba(255, 255, 255, 0.1);
    color: #888;
  }

  .result-info.tie.svelte-1daqqze {
    background: rgba(231, 76, 60, 0.2);
    color: #e74c3c;
  }

  .result-winner.svelte-1daqqze {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
  }

  .result-winner-for.svelte-1daqqze {
    background: rgba(40, 167, 69, 0.25);
  }

  .result-winner-against.svelte-1daqqze {
    background: rgba(231, 76, 60, 0.25);
  }

  .result-winner-elect.svelte-1daqqze {
    background: rgba(155, 89, 182, 0.25);
  }

  .winner-label.svelte-1daqqze {
    color: #ccc;
  }

  .vote-totals.svelte-1daqqze {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .total-row.svelte-1daqqze {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
  }

  .total-count.svelte-1daqqze {
    margin-left: auto;
    color: #fff;
    font-weight: 600;
  }

  /* Buttons */
  .btn.svelte-1daqqze {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 6px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
  }

  .btn.svelte-1daqqze:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .btn-declare.svelte-1daqqze {
    background: #3498db;
    color: #fff;
  }

  .btn-declare.svelte-1daqqze:hover:not(:disabled) {
    background: #5dade2;
  }

  .btn-vote.svelte-1daqqze {
    background: #ffd700;
    color: #1a1a2e;
    font-weight: 600;
    align-self: flex-start;
  }

  .btn-vote.svelte-1daqqze:hover:not(:disabled) {
    background: #ffed4a;
  }

  .btn-large.svelte-1daqqze {
    padding: 1rem 2rem;
    font-size: 1.1rem;
  }

  .btn-primary.svelte-1daqqze {
    background: #ffd700;
    color: #1a1a2e;
    font-weight: 600;
  }

  .btn-primary.svelte-1daqqze:hover:not(:disabled) {
    background: #ffed4a;
  }

  .btn-secondary.svelte-1daqqze {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
  }

  .btn-secondary.svelte-1daqqze:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.2);
  }

  /* Modal styles */
  .modal-overlay.svelte-1daqqze {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
  }

  .modal.svelte-1daqqze {
    background: #1a1a2e;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .modal-large.svelte-1daqqze {
    max-width: 700px;
    max-height: 85vh;
  }

  .modal-header.svelte-1daqqze {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .modal-header.svelte-1daqqze h3:where(.svelte-1daqqze) {
    color: #ffd700;
    margin: 0;
  }

  .modal-close.svelte-1daqqze {
    background: none;
    border: none;
    color: #888;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
  }

  .modal-close.svelte-1daqqze:hover {
    color: #fff;
  }

  .modal-body.svelte-1daqqze {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
  }

  .modal-footer.svelte-1daqqze {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  /* Agenda search and list */
  .agenda-search.svelte-1daqqze {
    margin-bottom: 1rem;
  }

  .search-input.svelte-1daqqze {
    width: 100%;
    padding: 10px 14px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    color: #fff;
    font-size: 14px;
    box-sizing: border-box;
  }

  .search-input.svelte-1daqqze::placeholder {
    color: #666;
  }

  .loading.svelte-1daqqze {
    text-align: center;
    color: #888;
    padding: 2rem;
  }

  .agenda-list.svelte-1daqqze {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    overflow-y: auto;
  }

  .agenda-option.svelte-1daqqze {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
    width: 100%;
  }

  .agenda-option.svelte-1daqqze:hover {
    background: rgba(255, 255, 255, 0.1);
  }

  .agenda-option.selected.svelte-1daqqze {
    border-color: #ffd700;
    background: rgba(255, 215, 0, 0.1);
  }

  .agenda-option-header.svelte-1daqqze {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .agenda-option-name.svelte-1daqqze {
    color: #fff;
    font-weight: 600;
  }

  .agenda-option-type.svelte-1daqqze {
    font-size: 0.75rem;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    text-transform: uppercase;
  }

  .agenda-option-type.law.svelte-1daqqze {
    background: rgba(52, 152, 219, 0.3);
    color: #5dade2;
  }

  .agenda-option-type.directive.svelte-1daqqze {
    background: rgba(241, 196, 15, 0.3);
    color: #f1c40f;
  }

  .agenda-option-type.elect.svelte-1daqqze {
    background: rgba(155, 89, 182, 0.3);
    color: #bb8fce;
  }

  .agenda-option-text.svelte-1daqqze {
    color: #aaa;
    font-size: 0.85rem;
    line-height: 1.4;
  }

  /* Speaker selection */
  .speaker-options.svelte-1daqqze {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .speaker-option.svelte-1daqqze {
    display: flex;
    align-items: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
  }

  .speaker-option.svelte-1daqqze:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
  }

  .speaker-option.selected.svelte-1daqqze {
    border-color: #ffd700;
    background: rgba(255, 215, 0, 0.15);
  }

  /* Speaker Action Section */
  .speaker-action-section.svelte-1daqqze {
    background: linear-gradient(
      135deg,
      rgba(255, 215, 0, 0.15),
      rgba(255, 165, 0, 0.1)
    );
    border: 2px solid rgba(255, 215, 0, 0.4);
    text-align: center;
    padding: 2rem;
  }

  .speaker-action-section.svelte-1daqqze h3:where(.svelte-1daqqze) {
    color: #ffd700;
    margin-bottom: 0.75rem;
  }

  .speaker-action-section.svelte-1daqqze p:where(.svelte-1daqqze) {
    color: #ccc;
    margin-bottom: 1rem;
  }

  .btn-large.svelte-1daqqze {
    padding: 1rem 2rem;
    font-size: 1.1rem;
  }

  /* Speaker Controls */
  .speaker-controls.svelte-1daqqze {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  .speaker-controls.svelte-1daqqze h4:where(.svelte-1daqqze) {
    color: #ffd700;
    margin-bottom: 0.75rem;
  }

  .tie-options.svelte-1daqqze {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
  }

  .btn-outcome.svelte-1daqqze {
    padding: 0.75rem 1.5rem;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
  }

  .btn-outcome.svelte-1daqqze:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: #ffd700;
  }

  .btn-outcome.svelte-1daqqze:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  /* Votes Breakdown - grouped by outcome */
  .votes-breakdown.svelte-1daqqze {
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .outcome-group.svelte-1daqqze {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    overflow: hidden;
  }

  .outcome-group-header.svelte-1daqqze {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.05);
  }

  .outcome-group-total.svelte-1daqqze {
    color: #888;
    font-size: 0.85rem;
    font-weight: 600;
  }

  .outcome-group-votes.svelte-1daqqze {
    padding: 0.5rem;
  }

  .vote-detail.svelte-1daqqze {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.4rem 0.5rem;
  }

  .vote-player-compact.svelte-1daqqze {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.5rem;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    border-left: 3px solid #666;
    font-size: 0.85rem;
    color: #fff;
    flex: 1;
  }

  .vote-faction-img.svelte-1daqqze {
    width: 16px;
    height: 16px;
    object-fit: contain;
  }

  .vote-player.svelte-1daqqze {
    color: #ccc;
    font-size: 0.85rem;
  }

  .vote-count.svelte-1daqqze {
    color: #ffd700;
    font-size: 0.9rem;
    font-weight: 600;
    font-family: monospace;
  }

  /* Override Modal */
  .override-options.svelte-1daqqze {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1rem;
  }

  .btn-override.svelte-1daqqze {
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
  }

  .btn-override.svelte-1daqqze:hover {
    background: rgba(255, 255, 255, 0.15);
  }

  .btn-override.danger.svelte-1daqqze {
    border-color: rgba(255, 107, 107, 0.4);
    color: #ff6b6b;
  }

  .btn-override.danger.svelte-1daqqze:hover {
    background: rgba(255, 107, 107, 0.15);
  }

  .btn-small.svelte-1daqqze {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
  }

  /* Vote step labels */
  .vote-step.svelte-1daqqze {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .vote-step-label.svelte-1daqqze {
    color: #888;
    font-size: 0.85rem;
    font-weight: 500;
  }

  /* History Side Panel */
  .history-side-panel.svelte-1daqqze {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 350px;
    background: #1a1a2e;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 900;
    display: flex;
  }

  .history-side-panel.open.svelte-1daqqze {
    transform: translateX(0);
  }

  .history-panel-content.svelte-1daqqze {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .history-panel-header.svelte-1daqqze {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.2);
  }

  .history-panel-header.svelte-1daqqze h3:where(.svelte-1daqqze) {
    color: #ccc;
    margin: 0;
    font-size: 1rem;
  }

  .history-close-btn.svelte-1daqqze {
    margin-left: auto;
    background: none;
    border: none;
    color: #888;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
  }

  .history-close-btn.svelte-1daqqze:hover {
    color: #fff;
  }

  .phase-count.svelte-1daqqze {
    color: #666;
    font-size: 0.8rem;
  }

  .phases-list.svelte-1daqqze {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .phase-card-panel.svelte-1daqqze {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    overflow: hidden;
  }

  .phase-header-panel.svelte-1daqqze {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.05);
  }

  .phase-title.svelte-1daqqze {
    color: #ffd700;
    font-weight: 600;
    font-size: 0.9rem;
  }

  .phase-duration.svelte-1daqqze {
    color: #888;
    font-size: 0.8rem;
    margin-left: auto;
  }

  .rounds-list-panel.svelte-1daqqze {
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .round-card-history.svelte-1daqqze {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    padding: 0.75rem;
    border-left: 3px solid #28a745;
    position: relative;
  }

  .round-card-history.rejected.svelte-1daqqze {
    border-left-color: #dc3545;
  }

  .round-card-history.passed-law.svelte-1daqqze {
    border-left-color: #3498db;
  }

  .law-marker.svelte-1daqqze {
    position: absolute;
    bottom: 4px;
    right: 6px;
    color: #3498db;
    font-size: 0.7rem;
    opacity: 0.8;
  }

  .history-edit-btn.svelte-1daqqze {
    margin-left: auto;
    background: rgba(255, 193, 7, 0.2);
    border: none;
    color: #ffc107;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
    opacity: 0.7;
    transition: all 0.2s;
  }

  .history-edit-btn.svelte-1daqqze:hover {
    opacity: 1;
    background: rgba(255, 193, 7, 0.3);
  }

  /* History modify modal */
  .modal-agenda-name.svelte-1daqqze {
    color: #ffd700;
    font-weight: 600;
    margin: 0 0 1rem 0;
  }

  .modify-options.svelte-1daqqze {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
  }

  .modify-option.svelte-1daqqze {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    cursor: pointer;
  }

  .modify-option.svelte-1daqqze:hover {
    background: rgba(255, 255, 255, 0.05);
  }

  .modify-option.svelte-1daqqze input[type="radio"]:where(.svelte-1daqqze) {
    accent-color: #ffd700;
  }

  .option-label.svelte-1daqqze {
    font-weight: 500;
  }

  .option-label.option-for.svelte-1daqqze {
    color: #28a745;
  }

  .option-label.option-against.svelte-1daqqze {
    color: #dc3545;
  }

  .option-label.option-special.svelte-1daqqze {
    color: #888;
  }

  .option-label.option-restore.svelte-1daqqze {
    color: #3498db;
  }

  .modify-reason.svelte-1daqqze {
    margin-bottom: 1.5rem;
  }

  .modify-reason.svelte-1daqqze label:where(.svelte-1daqqze) {
    display: block;
    color: #888;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
  }

  .modify-reason.svelte-1daqqze input:where(.svelte-1daqqze) {
    width: 100%;
    padding: 0.5rem;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    color: #fff;
    font-size: 0.9rem;
  }

  .modify-reason.svelte-1daqqze input:where(.svelte-1daqqze)::placeholder {
    color: #666;
  }

  .round-header-history.svelte-1daqqze {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
  }

  .round-number.svelte-1daqqze {
    color: #666;
    font-size: 0.75rem;
    font-weight: 600;
  }

  .agenda-name-history.svelte-1daqqze {
    color: #fff;
    font-weight: 500;
    flex: 1;
    min-width: 0;
  }

  .round-effect-history.svelte-1daqqze {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  .effect-plain.svelte-1daqqze {
    color: #ccc;
    font-size: 0.85rem;
  }

  .effect-elect.svelte-1daqqze {
    color: #bb8fce;
    font-size: 0.85rem;
  }

  .effect-overridden.svelte-1daqqze {
    color: #e74c3c;
    font-size: 0.85rem;
    font-weight: 500;
  }

  .effect-original.svelte-1daqqze {
    display: block;
    color: #95a5a6;
    font-size: 0.8rem;
    font-style: italic;
    margin-top: 4px;
  }

  .round-pending.svelte-1daqqze {
    color: #666;
    font-size: 0.85rem;
    font-style: italic;
    margin-top: 0.5rem;
  }

  .no-rounds.svelte-1daqqze {
    padding: 0.5rem 1rem;
    color: #666;
    font-size: 0.85rem;
  }

  .phase-duration.svelte-1daqqze {
    color: #888;
    font-size: 0.8rem;
  }

  .btn-override-inline.svelte-1daqqze {
    margin-top: 1rem;
    width: 100%;
  }

  /* Tie breaker buttons with full color */
  .tie-option-btn.svelte-1daqqze {
    padding: 1rem 2rem;
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 8px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
  }

  .tie-option-btn.tie-for.svelte-1daqqze {
    background: #28a745;
    color: #fff;
    border-color: #28a745;
  }

  .tie-option-btn.tie-for.svelte-1daqqze:hover:not(:disabled) {
    background: #218838;
    box-shadow: 0 0 12px rgba(40, 167, 69, 0.5);
  }

  .tie-option-btn.tie-against.svelte-1daqqze {
    background: #dc3545;
    color: #fff;
    border-color: #dc3545;
  }

  .tie-option-btn.tie-against.svelte-1daqqze:hover:not(:disabled) {
    background: #c82333;
    box-shadow: 0 0 12px rgba(220, 53, 69, 0.5);
  }

  .tie-option-btn.tie-elect.svelte-1daqqze {
    background: rgba(155, 89, 182, 0.6);
    color: #fff;
    border-color: #9b59b6;
  }

  .tie-option-btn.tie-elect.svelte-1daqqze:hover:not(:disabled) {
    background: rgba(155, 89, 182, 0.8);
    box-shadow: 0 0 12px rgba(155, 89, 182, 0.5);
  }

  /* Custom elect input for tie breaker */
  .custom-elect-section.svelte-1daqqze {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  .custom-elect-label.svelte-1daqqze {
    display: block;
    color: #888;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
  }

  .custom-elect-input.svelte-1daqqze {
    display: flex;
    gap: 0.5rem;
    align-items: center;
  }

  .elect-text-input.svelte-1daqqze {
    flex: 1;
    padding: 0.75rem 1rem;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    color: #fff;
    font-size: 1rem;
  }

  .elect-text-input.svelte-1daqqze:focus {
    outline: none;
    border-color: #9b59b6;
  }

  .elect-text-input.svelte-1daqqze::placeholder {
    color: #666;
  }

  /* Custom vote input for elect during voting */
  .elect-custom-vote.svelte-1daqqze {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    width: 100%;
    margin-top: 0.5rem;
  }

  .elect-vote-input.svelte-1daqqze {
    flex: 1;
    padding: 0.5rem 0.75rem;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(155, 89, 182, 0.3);
    border-radius: 6px;
    color: #fff;
    font-size: 0.9rem;
    min-width: 120px;
  }

  .elect-vote-input.svelte-1daqqze:focus {
    outline: none;
    border-color: #9b59b6;
  }

  .elect-vote-input.svelte-1daqqze::placeholder {
    color: #666;
  }

  /* Breakdown toggle button */
  .breakdown-toggle.svelte-1daqqze {
    margin-top: 1rem;
    text-align: center;
  }

  .breakdown-toggle.svelte-1daqqze .toggle-icon:where(.svelte-1daqqze) {
    margin-left: 0.5rem;
    font-size: 0.8rem;
  }

  /* Speaker next actions */
  .speaker-next-actions.svelte-1daqqze {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    justify-content: center;
    flex-wrap: nowrap;
  }

  .speaker-next-actions.svelte-1daqqze .btn:where(.svelte-1daqqze) {
    flex: 1;
    white-space: nowrap;
  }

  .speaker-next-actions.svelte-1daqqze .btn-primary:where(.svelte-1daqqze) {
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid #ffd70066;
    color: #ffd700;
    font-weight: 600;
  }
  .speaker-next-actions.svelte-1daqqze .btn-primary:where(.svelte-1daqqze):hover:not(:disabled) {
    background: rgba(255, 215, 0, 0.22);
  }

  .speaker-next-actions.svelte-1daqqze .btn-danger:where(.svelte-1daqqze) {
    background: rgba(231, 76, 60, 0.1);
    border: 1px solid #c0392b;
    color: #e57373;
  }
  .speaker-next-actions.svelte-1daqqze .btn-danger:where(.svelte-1daqqze):hover:not(:disabled) {
    background: rgba(231, 76, 60, 0.24);
  }

  /* Planets Side Panel */
  .planets-side-panel.svelte-1daqqze {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 380px;
    background: #1a1a2e;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 899;
    display: flex;
  }

  .planets-side-panel.open.svelte-1daqqze {
    transform: translateX(0);
  }

  /* Wider panel on larger screens */
  @media (min-width: 1200px) {
    .planets-side-panel.svelte-1daqqze {
      width: 450px;
    }
  }

  @media (min-width: 1600px) {
    .planets-side-panel.svelte-1daqqze {
      width: 520px;
    }
  }

  .planets-panel-content.svelte-1daqqze {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 1rem;
  }

  .planets-panel-header.svelte-1daqqze {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
  }

  .planets-panel-header.svelte-1daqqze h3:where(.svelte-1daqqze) {
    color: #2ecc71;
    margin: 0;
    font-size: 1.1rem;
  }

  .planets-close-btn.svelte-1daqqze {
    background: none;
    border: none;
    color: #888;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
  }

  .planets-close-btn.svelte-1daqqze:hover {
    color: #fff;
  }

  /* Planet Election Picker in voting */
  .planet-election-picker.svelte-1daqqze {
    width: 100%;
    max-height: 300px;
    overflow: hidden;
  }

  .planet-election-picker.svelte-1daqqze .planet-picker {
    gap: 8px;
  }

  .planet-election-picker.svelte-1daqqze .planet-list {
    max-height: 200px;
  }

  .selected-planet-vote.svelte-1daqqze {
    margin-top: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: rgba(46, 204, 113, 0.15);
    border: 1px solid rgba(46, 204, 113, 0.3);
    border-radius: 6px;
    color: #2ecc71;
    font-size: 0.9rem;
  }

  .selected-planet-vote.svelte-1daqqze strong:where(.svelte-1daqqze) {
    color: #fff;
  }

  /* Map Side Panel - fullscreen overlay */
  .map-side-panel.svelte-1daqqze {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background: #0d1421;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 900;
    display: flex;
  }

  .map-side-panel.open.svelte-1daqqze {
    transform: translateX(0);
  }

  /* Rulebook Side Panel */
  .rulebook-side-panel.svelte-1daqqze {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 420px;
    background: #1a1a2e;
    border-right: 1px solid rgba(255, 215, 0, 0.2);
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 899;
    display: flex;
  }

  .rulebook-side-panel.open.svelte-1daqqze {
    transform: translateX(0);
  }

  .rulebook-panel-content.svelte-1daqqze {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  /* Mobile styles */
  @media (max-width: 768px) {
    /* Vote declaration: 3-line stacked layout */
    .player-declaration.svelte-1daqqze {
      flex-direction: column;
      align-items: stretch;
      gap: 0.75rem;
      padding: 1rem;
    }

    .declare-form.svelte-1daqqze {
      flex-direction: column;
      align-items: stretch;
      gap: 0.75rem;
    }

    .declare-form.svelte-1daqqze .btn-declare:where(.svelte-1daqqze) {
      width: 100%;
    }

    .vote-stepper.svelte-1daqqze {
      justify-content: center;
      padding: 0.25rem 0;
    }

    .player-declaration.svelte-1daqqze .player-badge {
      font-size: 15px;
      padding: 8px 14px;
      min-width: unset;
      width: 100%;
      box-sizing: border-box;
    }

    .player-declaration.svelte-1daqqze .faction-icon {
      width: 26px;
      height: 26px;
    }

    /* Vote cards: clearer separation, more breathing room */
    .player-vote-card.svelte-1daqqze {
      padding: 1.25rem;
      border: 1px solid rgba(255, 255, 255, 0.1);
      margin-bottom: 1.25rem;
    }

    .vote-card-header.svelte-1daqqze {
      margin-bottom: 0.5rem;
    }

    .votes-remaining.svelte-1daqqze {
      font-size: 0.9rem;
    }

    /* Outcome buttons: pair up 2-per-row, larger tap targets */
    .outcome-buttons.svelte-1daqqze {
      gap: 0.6rem;
    }

    .outcome-btn.svelte-1daqqze {
      flex: 1 1 calc(50% - 0.3rem);
      padding: 0.875rem 0.5rem;
      font-size: 1rem;
      min-height: 52px;
    }

    /* Abstain/Rider: visually secondary via top margin */
    .outcome-btn.outcome-special.svelte-1daqqze {
      margin-top: 0.25rem;
      font-size: 0.9rem;
      min-height: 44px;
      opacity: 0.85;
    }

    /* Player election grid: bigger buttons on mobile */
    .player-election-grid.svelte-1daqqze {
      grid-template-columns: repeat(2, 1fr);
      gap: 0.6rem;
    }

    .player-election-grid.svelte-1daqqze .player-badge {
      font-size: 13px;
      padding: 8px 10px;
      min-height: 44px;
    }

    .player-election-grid.svelte-1daqqze .faction-icon {
      width: 20px;
      height: 20px;
    }

    /* Vote input row: stack vertically */
    .vote-input-row.svelte-1daqqze {
      flex-direction: column;
      align-items: stretch;
      gap: 0.6rem;
    }

    .vote-input-row.svelte-1daqqze .vote-input {
      width: 100%;
    }

    .btn-vote-submit.svelte-1daqqze {
      width: 100%;
      padding: 0.75rem;
      font-size: 1rem;
    }

    /* Make side panels full-screen on mobile */
    .history-side-panel.svelte-1daqqze,
    .planets-side-panel.svelte-1daqqze,
    .rulebook-side-panel.svelte-1daqqze {
      width: 100vw;
      max-width: 100vw;
    }

    /* Compact layout on mobile */
    .voting-view.svelte-1daqqze {
      gap: 0.75rem;
    }

    .section.svelte-1daqqze {
      padding: 0.875rem;
      border-radius: 8px;
    }

    .section.svelte-1daqqze h3:where(.svelte-1daqqze) {
      font-size: 0.95rem;
      margin-bottom: 0.75rem;
    }

    .player-vote-card.svelte-1daqqze {
      padding: 0.875rem !important;
      margin-bottom: 0.875rem !important;
    }

    .round-header.svelte-1daqqze {
      margin-bottom: 0.75rem;
    }

    .agenda-card.svelte-1daqqze {
      padding: 0.75rem;
    }

    /* Panels should have bottom padding for nav bar */
    .history-side-panel.open.svelte-1daqqze,
    .planets-side-panel.open.svelte-1daqqze,
    .rulebook-side-panel.open.svelte-1daqqze {
      padding-bottom: 64px;
    }

    /* Map panel is already fullscreen, no padding needed */
    .map-side-panel.open.svelte-1daqqze {
      padding-bottom: 0;
    }
  }

  .history-empty.svelte-1daqqze {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: rgba(148, 163, 184, 0.6);
    text-align: center;
    padding: 20px;
  }

  .history-empty.svelte-1daqqze p:where(.svelte-1daqqze) {
    font-size: 0.9rem;
    line-height: 1.5;
  }

  .history-view.svelte-1vnmqab {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  .history-header.svelte-1vnmqab {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .history-header.svelte-1vnmqab h2:where(.svelte-1vnmqab) {
    color: #ffd700;
    margin: 0;
  }

  .phase-count.svelte-1vnmqab {
    color: #888;
    font-size: 0.9rem;
  }

  .empty-state.svelte-1vnmqab {
    text-align: center;
    padding: 3rem;
    color: #666;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 12px;
  }

  .hint.svelte-1vnmqab {
    font-size: 0.9rem;
    margin-top: 0.5rem;
  }

  .phases-list.svelte-1vnmqab {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  .phase-card.svelte-1vnmqab {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    overflow: hidden;
  }

  .phase-header.svelte-1vnmqab {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .phase-header.svelte-1vnmqab h3:where(.svelte-1vnmqab) {
    color: #ffd700;
    margin: 0;
    font-size: 1.1rem;
  }

  .speaker-info.svelte-1vnmqab {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #888;
    font-size: 0.9rem;
  }

  .rounds-list.svelte-1vnmqab {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .round-card.svelte-1vnmqab {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    overflow: hidden;
    border-left: 3px solid #555;
  }

  .round-card.revealed.svelte-1vnmqab {
    border-left-color: #28a745;
  }

  .round-header.svelte-1vnmqab {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: rgba(0, 0, 0, 0.2);
  }

  .round-number.svelte-1vnmqab {
    color: #888;
    font-size: 0.85rem;
  }

  .agenda-name.svelte-1vnmqab {
    color: #fff;
    font-weight: 500;
  }

  .round-result.svelte-1vnmqab {
    padding: 1rem;
  }

  .result-badge.svelte-1vnmqab {
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-weight: 600;
    margin-bottom: 1rem;
  }

  .result-badge.abstained.svelte-1vnmqab {
    background: rgba(255, 255, 255, 0.1);
    color: #888;
  }

  .result-badge.tie.svelte-1vnmqab {
    background: rgba(231, 76, 60, 0.2);
    color: #e74c3c;
  }

  .result-winner.svelte-1vnmqab {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: rgba(40, 167, 69, 0.1);
    border-radius: 6px;
    margin-bottom: 1rem;
  }

  .winner-label.svelte-1vnmqab {
    color: #888;
  }

  .vote-totals.svelte-1vnmqab {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
  }

  .total-item.svelte-1vnmqab {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
  }

  .vote-count.svelte-1vnmqab {
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
  }

  .votes-details.svelte-1vnmqab {
    margin-top: 0.5rem;
  }

  .votes-details.svelte-1vnmqab summary:where(.svelte-1vnmqab) {
    cursor: pointer;
    color: #888;
    font-size: 0.85rem;
    padding: 0.5rem;
  }

  .votes-details.svelte-1vnmqab summary:where(.svelte-1vnmqab):hover {
    color: #aaa;
  }

  .votes-list.svelte-1vnmqab {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem 0;
  }

  .vote-item.svelte-1vnmqab {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 4px;
  }

  .vote-arrow.svelte-1vnmqab {
    color: #555;
    font-size: 0.9rem;
  }

  .round-pending.svelte-1vnmqab {
    padding: 1rem;
    color: #666;
    text-align: center;
  }

  .no-rounds.svelte-1vnmqab {
    padding: 1.5rem;
    color: #666;
    text-align: center;
  }

  .strategy-view.svelte-d6zsek {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .phase-title.svelte-d6zsek {
    color: #ffd700;
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
    text-align: center;
  }

  .error-message.svelte-d6zsek {
    padding: 0.75rem;
    background: rgba(220, 53, 69, 0.2);
    border: 1px solid rgba(220, 53, 69, 0.5);
    border-radius: 8px;
    color: #ff6b6b;
    font-size: 0.9rem;
  }

  .player-selector.svelte-d6zsek {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    padding: 12px;
  }

  .selector-label.svelte-d6zsek {
    font-size: 12px;
    color: rgba(148, 163, 184, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    display: block;
  }

  .selector-options.svelte-d6zsek {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .strategy-grid.svelte-d6zsek {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
  }

  .strategy-card.svelte-d6zsek {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    color: #fff;
    min-height: 120px;
  }

  .strategy-card.svelte-d6zsek:disabled {
    cursor: default;
  }

  .strategy-card.available.svelte-d6zsek {
    border-color: rgba(255, 215, 0, 0.3);
  }

  .strategy-card.available.svelte-d6zsek:hover {
    border-color: #ffd700;
    background: rgba(255, 215, 0, 0.08);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.15);
  }

  .strategy-card.picked.svelte-d6zsek {
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.05);
    opacity: 0.65;
  }

  .card-number.svelte-d6zsek {
    font-size: 1.75rem;
    font-weight: 700;
    color: #ffd700;
    line-height: 1;
  }

  .strategy-card.picked.svelte-d6zsek .card-number:where(.svelte-d6zsek) {
    color: rgba(255, 215, 0, 0.4);
  }

  .card-name.svelte-d6zsek {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.8);
  }

  .picked-by.svelte-d6zsek {
    margin-top: 4px;
  }

  .card-available.svelte-d6zsek {
    font-size: 0.75rem;
    color: rgba(148, 163, 184, 0.5);
    margin-top: 4px;
  }

  .strategy-status.svelte-d6zsek {
    text-align: center;
  }

  .all-picked.svelte-d6zsek {
    color: #28a745;
    font-weight: 600;
    margin: 0;
  }

  .picks-progress.svelte-d6zsek {
    color: rgba(148, 163, 184, 0.7);
    margin: 0;
    font-size: 0.9rem;
  }

  .btn.svelte-d6zsek {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s;
  }

  .btn-primary.svelte-d6zsek {
    background: #ffd700;
    color: #1a1a2e;
    font-weight: 600;
  }

  .btn-primary.svelte-d6zsek:hover {
    background: #ffed4a;
  }

  .btn-advance.svelte-d6zsek {
    align-self: center;
    padding: 0.75rem 2rem;
  }

  .action-view.svelte-1gw92jj {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .phase-title.svelte-1gw92jj {
    color: #ffd700;
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
    text-align: center;
  }

  .error-message.svelte-1gw92jj {
    padding: 0.75rem;
    background: rgba(220, 53, 69, 0.2);
    border: 1px solid rgba(220, 53, 69, 0.5);
    border-radius: 8px;
    color: #ff6b6b;
    font-size: 0.9rem;
  }

  .turn-indicator.svelte-1gw92jj {
    text-align: center;
    padding: 16px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
  }

  .current-turn.svelte-1gw92jj {
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
    margin: 0 0 12px 0;
  }

  .all-passed.svelte-1gw92jj {
    color: #28a745;
    font-weight: 600;
    font-size: 1.1rem;
    margin: 0;
  }

  .action-buttons.svelte-1gw92jj {
    display: flex;
    gap: 12px;
    justify-content: center;
  }

  .btn-action.svelte-1gw92jj {
    padding: 0.75rem 2rem;
    background: #ffd700;
    color: #1a1a2e;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
  }

  .btn-action.svelte-1gw92jj:hover:not(:disabled) {
    background: #ffed4a;
  }

  .btn-pass.svelte-1gw92jj {
    padding: 0.75rem 2rem;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
  }

  .btn-pass.svelte-1gw92jj:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
  }

  .btn-action.svelte-1gw92jj:disabled,
  .btn-pass.svelte-1gw92jj:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .passed-section.svelte-1gw92jj {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    flex-wrap: wrap;
  }

  .passed-label.svelte-1gw92jj {
    font-size: 0.8rem;
    color: rgba(148, 163, 184, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
  }

  .passed-list.svelte-1gw92jj {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    opacity: 0.5;
  }

  .card-usage.svelte-1gw92jj {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 16px;
  }

  .section-title.svelte-1gw92jj {
    font-size: 13px;
    font-weight: 600;
    color: rgba(148, 163, 184, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 12px 0;
  }

  .card-list.svelte-1gw92jj {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .card-item.svelte-1gw92jj {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    transition: opacity 0.2s;
  }

  .card-item.used.svelte-1gw92jj {
    opacity: 0.45;
  }

  .card-num.svelte-1gw92jj {
    font-size: 1.1rem;
    font-weight: 700;
    color: #ffd700;
    min-width: 24px;
    text-align: center;
  }

  .card-name.svelte-1gw92jj {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    min-width: 80px;
  }

  .used-badge.svelte-1gw92jj {
    margin-left: auto;
    font-size: 0.75rem;
    color: rgba(148, 163, 184, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .use-btn.svelte-1gw92jj {
    margin-left: auto;
    padding: 4px 10px;
    background: rgba(255, 215, 0, 0.15);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 6px;
    color: #ffd700;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
  }

  .use-btn.svelte-1gw92jj:hover {
    background: rgba(255, 215, 0, 0.25);
    border-color: #ffd700;
  }

  .btn.svelte-1gw92jj {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s;
  }

  .btn-primary.svelte-1gw92jj {
    background: #ffd700;
    color: #1a1a2e;
    font-weight: 600;
  }

  .btn-primary.svelte-1gw92jj:hover {
    background: #ffed4a;
  }

  .btn-advance.svelte-1gw92jj {
    align-self: center;
    padding: 0.75rem 2rem;
  }

  .status-view.svelte-12cbyev {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .phase-title.svelte-12cbyev {
    color: #ffd700;
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
    text-align: center;
  }

  .error-message.svelte-12cbyev {
    padding: 0.75rem;
    background: rgba(220, 53, 69, 0.2);
    border: 1px solid rgba(220, 53, 69, 0.5);
    border-radius: 8px;
    color: #ff6b6b;
    font-size: 0.9rem;
  }

  .section-title.svelte-12cbyev {
    font-size: 13px;
    font-weight: 600;
    color: rgba(148, 163, 184, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 12px 0;
  }

  .scoreboard.svelte-12cbyev {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 16px;
  }

  .score-list.svelte-12cbyev {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .score-row.svelte-12cbyev {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    transition: background 0.15s;
  }

  .score-row.clickable.svelte-12cbyev {
    cursor: pointer;
  }

  .score-row.clickable.svelte-12cbyev:hover {
    background: rgba(255, 215, 0, 0.06);
  }

  .score-rank.svelte-12cbyev {
    font-size: 0.85rem;
    font-weight: 700;
    color: rgba(148, 163, 184, 0.5);
    min-width: 24px;
  }

  .score-vp.svelte-12cbyev {
    font-size: 1rem;
    font-weight: 700;
    color: #ffd700;
    margin-left: auto;
    white-space: nowrap;
  }

  .score-bar-bg.svelte-12cbyev {
    width: 60px;
    height: 6px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
    overflow: hidden;
    flex-shrink: 0;
  }

  .score-bar-fill.svelte-12cbyev {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
  }

  .checklist.svelte-12cbyev {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 16px;
  }

  .checklist-items.svelte-12cbyev {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .checklist-items.svelte-12cbyev li:where(.svelte-12cbyev) {
    color: rgba(148, 163, 184, 0.7);
    font-size: 0.9rem;
    padding: 6px 0;
    padding-left: 24px;
    position: relative;
  }

  .checklist-items.svelte-12cbyev li:where(.svelte-12cbyev)::before {
    content: '○';
    position: absolute;
    left: 0;
    color: rgba(148, 163, 184, 0.4);
  }

  .btn.svelte-12cbyev {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s;
  }

  .btn-primary.svelte-12cbyev {
    background: #ffd700;
    color: #1a1a2e;
    font-weight: 600;
  }

  .btn-primary.svelte-12cbyev:hover {
    background: #ffed4a;
  }

  .btn-advance.svelte-12cbyev {
    align-self: center;
    padding: 0.75rem 2rem;
  }

  .status-buttons.svelte-12cbyev {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
  }

  .btn-voting.svelte-12cbyev {
    background: #ffd700;
    color: #1a1a2e;
    font-weight: 600;
    padding: 0.75rem 2rem;
    width: 100%;
    max-width: 300px;
  }

  .btn-voting.svelte-12cbyev:hover:not(:disabled) {
    background: #ffed4a;
  }

  .btn-next-round.svelte-12cbyev {
    background: transparent;
    color: rgba(148, 163, 184, 0.8);
    font-weight: 500;
    padding: 0.6rem 1.5rem;
    border: 1px solid rgba(148, 163, 184, 0.3);
    width: 100%;
    max-width: 300px;
  }

  .btn-next-round.svelte-12cbyev:hover:not(:disabled) {
    color: rgba(148, 163, 184, 1);
    border-color: rgba(148, 163, 184, 0.6);
    background: rgba(148, 163, 184, 0.05);
  }

  .btn.svelte-12cbyev:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .round-end-view.svelte-ybb5m0 {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .phase-title.svelte-ybb5m0 {
    color: #ffd700;
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
    text-align: center;
  }

  .round-number.svelte-ybb5m0 {
    text-align: center;
    color: rgba(148, 163, 184, 0.6);
    font-size: 0.9rem;
    margin: 0;
  }

  .error-message.svelte-ybb5m0 {
    padding: 0.75rem;
    background: rgba(220, 53, 69, 0.2);
    border: 1px solid rgba(220, 53, 69, 0.5);
    border-radius: 8px;
    color: #ff6b6b;
    font-size: 0.9rem;
  }

  .summary-section.svelte-ybb5m0 {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 16px;
  }

  .section-title.svelte-ybb5m0 {
    font-size: 13px;
    font-weight: 600;
    color: rgba(148, 163, 184, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 12px 0;
  }

  .picks-list.svelte-ybb5m0 {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .pick-row.svelte-ybb5m0 {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 6px;
  }

  .pick-card.svelte-ybb5m0 {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    min-width: 100px;
  }

  .standings-list.svelte-ybb5m0 {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .standing-row.svelte-ybb5m0 {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    transition: background 0.15s;
  }

  .standing-row.clickable.svelte-ybb5m0 {
    cursor: pointer;
  }

  .standing-row.clickable.svelte-ybb5m0:hover {
    background: rgba(255, 215, 0, 0.06);
  }

  .standing-rank.svelte-ybb5m0 {
    font-size: 0.85rem;
    font-weight: 700;
    color: rgba(148, 163, 184, 0.5);
    min-width: 24px;
  }

  .standing-vp.svelte-ybb5m0 {
    font-size: 1rem;
    font-weight: 700;
    color: #ffd700;
    margin-left: auto;
    white-space: nowrap;
  }

  .standing-bar-bg.svelte-ybb5m0 {
    width: 60px;
    height: 6px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
    overflow: hidden;
    flex-shrink: 0;
  }

  .standing-bar-fill.svelte-ybb5m0 {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
  }

  .btn.svelte-ybb5m0 {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s;
  }

  .btn.svelte-ybb5m0:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .btn-primary.svelte-ybb5m0 {
    background: #ffd700;
    color: #1a1a2e;
    font-weight: 600;
  }

  .btn-primary.svelte-ybb5m0:hover:not(:disabled) {
    background: #ffed4a;
  }

  .btn-next.svelte-ybb5m0 {
    align-self: center;
    padding: 1rem 2rem;
    font-size: 1.1rem;
  }

  /* Session Not Found */
  .session-not-found.svelte-1md5mwq {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 2rem;
  }

  .not-found-content.svelte-1md5mwq {
    text-align: center;
    max-width: 400px;
  }

  .not-found-content.svelte-1md5mwq h2:where(.svelte-1md5mwq) {
    color: #ffd700;
    margin: 0 0 1rem 0;
  }

  .not-found-content.svelte-1md5mwq p:where(.svelte-1md5mwq) {
    color: #888;
    margin: 0 0 1rem 0;
  }

  .error-detail.svelte-1md5mwq {
    font-size: 0.85rem;
    color: #ff6b6b;
    background: rgba(255, 107, 107, 0.1);
    padding: 0.5rem 1rem;
    border-radius: 6px;
    margin-bottom: 1.5rem !important;
  }

  .btn.svelte-1md5mwq {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s;
  }

  .btn-primary.svelte-1md5mwq {
    background: #ffd700;
    color: #1a1a2e;
    font-weight: 600;
  }

  .btn-primary.svelte-1md5mwq:hover {
    background: #ffed4a;
  }

  /* Session Layout */
  .session.svelte-1md5mwq {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }

  /* Unified Header */
  .session-header.svelte-1md5mwq {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    background: linear-gradient(to bottom, rgba(15, 23, 42, 0.98), rgba(15, 23, 42, 0.95));
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
    position: sticky;
    top: 0;
    z-index: 100;
  }

  .header-left.svelte-1md5mwq {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  .hamburger-btn.svelte-1md5mwq {
    background: none;
    border: none;
    color: rgba(148, 163, 184, 0.7);
    padding: 0.5rem;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .hamburger-btn.svelte-1md5mwq:hover {
    color: rgba(148, 163, 184, 1);
    background: rgba(148, 163, 184, 0.1);
  }

  .hamburger-btn.svelte-1md5mwq svg:where(.svelte-1md5mwq) {
    width: 24px;
    height: 24px;
  }

  /* Round/Phase indicator */
  .round-indicator.svelte-1md5mwq {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: 8px;
  }

  .round-badge.svelte-1md5mwq {
    font-size: 11px;
    font-weight: 600;
    color: #ffd700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .phase-badge.svelte-1md5mwq {
    font-size: 10px;
    color: rgba(148, 163, 184, 0.8);
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  /* Header Navigation */
  .header-nav.svelte-1md5mwq {
    display: none; /* Hidden on mobile */
  }

  @media (min-width: 769px) {
    .header-nav.svelte-1md5mwq {
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }
  }

  .nav-btn.svelte-1md5mwq {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    color: rgba(148, 163, 184, 0.7);
    transition: all 0.2s ease;
  }

  .nav-btn.svelte-1md5mwq:hover {
    color: rgba(148, 163, 184, 1);
    background: rgba(148, 163, 184, 0.1);
  }

  .nav-btn.active.svelte-1md5mwq {
    color: #60a5fa;
    background: rgba(96, 165, 250, 0.15);
  }

  .nav-btn.svelte-1md5mwq:disabled {
    opacity: 0.35;
    cursor: not-allowed;
  }

  .nav-btn.svelte-1md5mwq:disabled:hover {
    color: rgba(148, 163, 184, 0.7);
    background: transparent;
  }

  .nav-icon.svelte-1md5mwq {
    width: 18px;
    height: 18px;
  }

  .nav-label.svelte-1md5mwq {
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .nav-icon-wrapper.svelte-1md5mwq {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .law-badge.svelte-1md5mwq {
    position: absolute;
    top: -6px;
    right: -10px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: #60a5fa;
    color: #000;
    font-size: 10px;
    font-weight: 700;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .session-content.svelte-1md5mwq {
    flex: 1;
    padding: 0.5rem;
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
  }

  .phase-unknown.svelte-1md5mwq {
    color: #888;
    text-align: center;
    padding: 2rem;
  }

  /* Modal */
  .modal-overlay.svelte-1md5mwq {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
  }

  .modal-content.svelte-1md5mwq {
    background: #2a2a3e;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.5rem;
    max-width: 400px;
    width: 90%;
  }

  .modal-content.svelte-1md5mwq h3:where(.svelte-1md5mwq) {
    color: #fff;
    margin: 0 0 1rem 0;
    font-size: 1.25rem;
  }

  .modal-content.svelte-1md5mwq p:where(.svelte-1md5mwq) {
    color: #aaa;
    margin: 0 0 1.5rem 0;
    line-height: 1.5;
  }

  .modal-actions.svelte-1md5mwq {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
  }

  .btn-secondary.svelte-1md5mwq {
    background: rgba(255, 255, 255, 0.1);
    color: #ccc;
  }

  .btn-secondary.svelte-1md5mwq:hover {
    background: rgba(255, 255, 255, 0.15);
  }

  .btn-danger.svelte-1md5mwq {
    background: #e74c3c;
    color: #fff;
  }

  .btn-danger.svelte-1md5mwq:hover {
    background: #c0392b;
  }

  /* Settings modal */
  .settings-modal.svelte-1md5mwq {
    max-width: 500px;
  }

  /* Free slot modal */
  .free-slot-modal.svelte-1md5mwq {
    max-width: 480px;
  }

  .modal-hint.svelte-1md5mwq {
    color: #aaa;
    font-size: 0.9rem;
    margin: 0 0 1rem 0;
  }

  .modal-error.svelte-1md5mwq {
    color: #ff6b6b;
    font-size: 0.875rem;
    margin: 0 0 0.75rem 0;
  }

  .free-slot-list.svelte-1md5mwq {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    max-height: 360px;
    overflow-y: auto;
  }

  .free-slot-item.svelte-1md5mwq {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 8px;
    border-left: 3px solid #666;
  }

  .free-slot-icon.svelte-1md5mwq {
    width: 36px;
    height: 36px;
    object-fit: contain;
    flex-shrink: 0;
  }

  .free-slot-info.svelte-1md5mwq {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
  }

  .free-slot-name.svelte-1md5mwq {
    font-size: 0.9rem;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .free-slot-faction.svelte-1md5mwq {
    font-size: 0.75rem;
    color: #888;
  }

  .free-slot-status.svelte-1md5mwq {
    font-size: 0.75rem;
    color: #22c55e;
    flex-shrink: 0;
  }

  .free-slot-status.offline.svelte-1md5mwq {
    color: #6b7280;
  }

  .btn-detach.svelte-1md5mwq {
    padding: 4px 10px;
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
  }

  .btn-detach.svelte-1md5mwq:hover {
    background: rgba(245, 158, 11, 0.35);
  }

  .claim-slot-modal.svelte-1md5mwq {
    max-width: 420px;
  }

  .claim-slot-list.svelte-1md5mwq {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0.75rem 0;
    max-height: 300px;
    overflow-y: auto;
  }

  .claim-slot-option.svelte-1md5mwq {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-left: 3px solid #666;
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
    transition: background 0.2s;
    width: 100%;
  }

  .claim-slot-option.svelte-1md5mwq:hover {
    background: rgba(255, 255, 255, 0.1);
  }

  .badge-released.svelte-1md5mwq {
    padding: 3px 8px;
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
  }

  .settings-form.svelte-1md5mwq {
    margin-bottom: 1.5rem;
  }

  .settings-label.svelte-1md5mwq {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    color: #ccc;
    font-size: 0.9rem;
  }

  .settings-input.svelte-1md5mwq {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    padding: 0.75rem;
    color: #fff;
    font-size: 0.95rem;
  }

  .settings-input.svelte-1md5mwq:focus {
    outline: none;
    border-color: #ffd700;
  }

  .settings-hint.svelte-1md5mwq {
    color: #888;
    font-size: 0.8rem;
    margin-top: 0.5rem;
  }

  .btn-primary.svelte-1md5mwq {
    background: #ffd700;
    color: #1a1a2e;
    font-weight: 600;
  }

  .btn-primary.svelte-1md5mwq:hover {
    background: #ffed4a;
  }

  .btn-primary.svelte-1md5mwq:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  /* Speaker Selection */
  .speaker-options.svelte-1md5mwq {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
  }

  .speaker-option.svelte-1md5mwq {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    color: #fff;
  }

  .speaker-option.svelte-1md5mwq:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
  }

  .speaker-option.selected.svelte-1md5mwq {
    border-color: #ffd700;
    background: rgba(255, 215, 0, 0.15);
  }

  /* Host vote modal */
  .modal-large.svelte-1md5mwq {
    max-width: 500px;
  }

  .host-vote-section.svelte-1md5mwq {
    margin-bottom: 1.5rem;
  }

  .host-vote-label.svelte-1md5mwq {
    display: block;
    color: #ffd700;
    font-weight: 600;
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
  }

  .player-votes-left.svelte-1md5mwq {
    color: #888;
    font-size: 0.85rem;
    margin-left: auto;
  }

  .no-eligible-players.svelte-1md5mwq {
    color: #888;
    font-style: italic;
    padding: 1rem;
    text-align: center;
  }

  .outcome-buttons.svelte-1md5mwq {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
  }

  .outcome-btn.svelte-1md5mwq {
    padding: 0.5rem 1rem;
    border: 2px solid transparent;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
  }

  .outcome-btn.outcome-for.svelte-1md5mwq {
    background: #28a745;
    color: #fff;
  }

  .outcome-btn.outcome-for.svelte-1md5mwq:hover {
    background: #218838;
  }

  .outcome-btn.outcome-for.selected.svelte-1md5mwq {
    border-color: #fff;
    box-shadow: 0 0 8px rgba(40, 167, 69, 0.5);
  }

  .outcome-btn.outcome-against.svelte-1md5mwq {
    background: #dc3545;
    color: #fff;
  }

  .outcome-btn.outcome-against.svelte-1md5mwq:hover {
    background: #c82333;
  }

  .outcome-btn.outcome-against.selected.svelte-1md5mwq {
    border-color: #fff;
    box-shadow: 0 0 8px rgba(220, 53, 69, 0.5);
  }

  .outcome-btn.outcome-elect.svelte-1md5mwq {
    background: rgba(155, 89, 182, 0.3);
    color: #bb8fce;
  }

  .outcome-btn.outcome-elect.svelte-1md5mwq:hover {
    background: rgba(155, 89, 182, 0.5);
  }

  .outcome-btn.outcome-elect.selected.svelte-1md5mwq {
    border-color: #bb8fce;
    background: rgba(155, 89, 182, 0.6);
  }

  .outcome-btn.outcome-special.svelte-1md5mwq {
    background: rgba(255, 255, 255, 0.1);
    color: #888;
  }

  .outcome-btn.outcome-special.svelte-1md5mwq:hover {
    background: rgba(255, 255, 255, 0.2);
  }

  .outcome-btn.outcome-special.selected.svelte-1md5mwq {
    border-color: #888;
    color: #fff;
  }

  .host-vote-count-input.svelte-1md5mwq {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .quick-votes.svelte-1md5mwq {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
  }

  .quick-vote-btn.svelte-1md5mwq {
    padding: 0.4rem 0.8rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    color: #fff;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
  }

  .quick-vote-btn.svelte-1md5mwq:hover {
    background: rgba(255, 255, 255, 0.2);
  }

  .quick-vote-btn.selected.svelte-1md5mwq {
    background: #ffd700;
    color: #1a1a2e;
    border-color: #ffd700;
  }

  .quick-vote-btn.all-in.svelte-1md5mwq {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.3) 0%, rgba(255, 180, 0, 0.4) 100%);
    color: #ffd700;
    border: 2px solid #ffd700;
    font-weight: 700;
  }

  .host-vote-hint.svelte-1md5mwq {
    color: #888;
    font-size: 0.85rem;
    margin-top: 0.5rem;
  }

  .error-message.svelte-1md5mwq {
    padding: 0.75rem;
    background: rgba(220, 53, 69, 0.2);
    border: 1px solid rgba(220, 53, 69, 0.5);
    border-radius: 6px;
    color: #ff6b6b;
    margin-bottom: 1rem;
    font-size: 0.9rem;
  }

  /* Host vote notification toast */
  .host-vote-toast.svelte-1md5mwq {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, rgba(231, 76, 60, 0.9) 0%, rgba(192, 57, 43, 0.95) 100%);
    border: 2px solid #e74c3c;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(231, 76, 60, 0.4);
    z-index: 1000;
    max-width: 90%;
    animation: svelte-1md5mwq-slideUp 0.3s ease-out;
  }

  @keyframes svelte-1md5mwq-slideUp {
    from {
      opacity: 0;
      transform: translateX(-50%) translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }
  }

  .toast-icon.svelte-1md5mwq {
    font-size: 1.5rem;
  }

  .toast-content.svelte-1md5mwq {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }

  .toast-title.svelte-1md5mwq {
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
  }

  .toast-details.svelte-1md5mwq {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
  }

  .toast-player.svelte-1md5mwq {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    border-left: 3px solid #666;
    font-weight: 600;
  }

  .toast-remaining.svelte-1md5mwq {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
  }

  /* VP Floating Action Button */
  .vp-fab.svelte-1md5mwq {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #ffd700;
    color: #1a1a2e;
    border: none;
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.4);
    cursor: pointer;
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    transition: all 0.2s;
  }

  .vp-fab.svelte-1md5mwq:hover {
    background: #ffed4a;
    box-shadow: 0 6px 16px rgba(255, 215, 0, 0.5);
    transform: scale(1.05);
  }

  .vp-fab.svelte-1md5mwq:active {
    transform: scale(0.95);
  }

  .fab-label.svelte-1md5mwq {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: 1;
  }

  /* VP Scored Notification Toast */
  .vp-scored-toast.svelte-1md5mwq {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.9) 0%, rgba(218, 165, 32, 0.95) 100%);
    border: 2px solid #ffd700;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(255, 215, 0, 0.4);
    z-index: 1000;
    max-width: 90%;
    animation: svelte-1md5mwq-slideUp 0.3s ease-out;
    color: #1a1a2e;
  }

  .vp-scored-toast.svelte-1md5mwq .toast-title:where(.svelte-1md5mwq) {
    color: #1a1a2e;
    font-weight: 700;
  }

  .vp-scored-toast.svelte-1md5mwq .toast-details:where(.svelte-1md5mwq) {
    color: rgba(26, 26, 46, 0.8);
  }

  .vp-scored-toast.svelte-1md5mwq .toast-player:where(.svelte-1md5mwq) {
    color: #1a1a2e;
    background: rgba(0, 0, 0, 0.15);
  }

  .vp-scored-toast.svelte-1md5mwq .toast-remaining:where(.svelte-1md5mwq) {
    color: rgba(26, 26, 46, 0.7);
  }

  .test-container.svelte-11c712a {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
  }

  .test-card.svelte-11c712a {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    max-width: 500px;
    width: 100%;
  }

  h1.svelte-11c712a {
    margin: 0;
    font-size: 1.5rem;
    color: #fff;
  }

  .subtitle.svelte-11c712a {
    margin: 0.5rem 0 1.5rem;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.9rem;
  }

  .form.svelte-11c712a {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }

  .field.svelte-11c712a {
    text-align: left;
  }

  .field.svelte-11c712a label:where(.svelte-11c712a) {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
  }

  .use-default.svelte-11c712a {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    background: rgba(74, 158, 255, 0.2);
    border: 1px solid rgba(74, 158, 255, 0.4);
    color: #4a9eff;
    border-radius: 4px;
    cursor: pointer;
  }

  .use-default.svelte-11c712a:hover {
    background: rgba(74, 158, 255, 0.3);
  }

  .player-buttons.svelte-11c712a {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
  }

  .player-btn.svelte-11c712a {
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.7);
    border-radius: 6px;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.2s;
  }

  .player-btn.svelte-11c712a:hover {
    border-color: rgba(74, 158, 255, 0.5);
    background: rgba(74, 158, 255, 0.1);
  }

  .player-btn.active.svelte-11c712a {
    border-color: #4a9eff;
    background: rgba(74, 158, 255, 0.2);
    color: #fff;
  }

  textarea.svelte-11c712a {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(0, 0, 0, 0.2);
    color: #fff;
    border-radius: 6px;
    font-family: monospace;
    font-size: 0.85rem;
    resize: vertical;
    box-sizing: border-box;
  }

  textarea.svelte-11c712a::placeholder {
    color: rgba(255, 255, 255, 0.3);
  }

  textarea.svelte-11c712a:focus {
    outline: none;
    border-color: rgba(74, 158, 255, 0.5);
  }

  .create-btn.svelte-11c712a {
    width: 100%;
    padding: 0.875rem;
    background: #4a9eff;
    border: none;
    color: white;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s;
  }

  .create-btn.svelte-11c712a:hover {
    background: #3a8eef;
  }

  .home-btn.svelte-11c712a {
    width: 100%;
    padding: 0.75rem;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
  }

  .home-btn.svelte-11c712a:hover {
    border-color: rgba(255, 255, 255, 0.4);
    color: #fff;
  }

  .loading.svelte-11c712a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 2rem 0;
  }

  .spinner.svelte-11c712a {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top-color: #4a9eff;
    border-radius: 50%;
    animation: svelte-11c712a-spin 1s linear infinite;
  }

  @keyframes svelte-11c712a-spin {
    to { transform: rotate(360deg); }
  }

  .loading.svelte-11c712a p:where(.svelte-11c712a) {
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
  }

  .error.svelte-11c712a {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem 0;
  }

  .error.svelte-11c712a p:where(.svelte-11c712a) {
    margin: 0;
    color: rgba(255, 255, 255, 0.7);
  }

  .error-message.svelte-11c712a {
    color: #ff6b6b !important;
    font-family: monospace;
    padding: 0.75rem;
    background: rgba(255, 107, 107, 0.1);
    border-radius: 6px;
    text-align: left;
    word-break: break-word;
  }

  .error-buttons.svelte-11c712a {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.5rem;
  }

  .error-buttons.svelte-11c712a button:where(.svelte-11c712a) {
    flex: 1;
    padding: 0.75rem;
    border-radius: 6px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
  }

  .error-buttons.svelte-11c712a button:where(.svelte-11c712a):first-child {
    background: #4a9eff;
    border: none;
    color: white;
  }

  .error-buttons.svelte-11c712a button:where(.svelte-11c712a):first-child:hover {
    background: #3a8eef;
  }

  .error-buttons.svelte-11c712a button:where(.svelte-11c712a):last-child {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.7);
  }

  .error-buttons.svelte-11c712a button:where(.svelte-11c712a):last-child:hover {
    border-color: rgba(255, 255, 255, 0.4);
    color: #fff;
  }

  .control-panel.svelte-116majd {
    min-height: 100vh;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    color: #eee;
    padding: 24px;
    font-family: inherit;
  }

  header.svelte-116majd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
    border-bottom: 1px solid #2a3a5e;
    padding-bottom: 16px;
    flex-wrap: wrap;
    gap: 12px;
  }

  .header-title.svelte-116majd { display: flex; align-items: center; gap: 12px; }
  .crown.svelte-116majd { font-size: 28px; color: #ffd700; }
  h1.svelte-116majd { margin: 0; font-size: 22px; color: #ffd700; letter-spacing: 0.5px; }

  .header-meta.svelte-116majd { display: flex; align-items: center; gap: 14px; }
  .token-hint.svelte-116majd { font-size: 12px; color: #888; font-family: monospace; }

  .btn-logout.svelte-116majd {
    background: transparent; border: 1px solid #555; color: #aaa;
    padding: 6px 14px; border-radius: 6px; cursor: pointer; font-size: 13px;
    transition: border-color 0.2s, color 0.2s;
  }
  .btn-logout.svelte-116majd:hover { border-color: #e74c3c; color: #e74c3c; }

  .status-msg.svelte-116majd { text-align: center; padding: 40px; color: #aaa; font-size: 16px; }
  .status-msg.error.svelte-116majd { color: #e74c3c; }
  .status-msg.muted.svelte-116majd { color: #555; }

  .btn-retry.svelte-116majd {
    display: block; margin: 0 auto; padding: 10px 24px;
    background: #2a3a5e; border: 1px solid #3a5a8e; color: #eee;
    border-radius: 8px; cursor: pointer; font-size: 14px;
  }

  .sessions-count.svelte-116majd { font-size: 13px; color: #888; margin-bottom: 16px; }

  .sessions-list.svelte-116majd { display: flex; flex-direction: column; gap: 20px; max-width: 860px; }

  .session-card.svelte-116majd {
    background: rgba(255,255,255,0.04);
    border: 1px solid #2a3a5e;
    border-radius: 12px;
    overflow: hidden;
  }

  .session-header.svelte-116majd {
    display: flex; align-items: flex-start; justify-content: space-between;
    flex-wrap: wrap; gap: 10px;
    padding: 16px 20px 12px;
    border-bottom: 1px solid #1e2e4e;
  }

  .session-id-block.svelte-116majd { display: flex; flex-direction: column; gap: 2px; }
  .session-id.svelte-116majd { font-family: monospace; font-size: 14px; color: #ccc; }
  .session-date.svelte-116majd { font-size: 11px; color: #666; }

  .session-badges.svelte-116majd { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

  .phase-badge.svelte-116majd {
    padding: 3px 10px; border-radius: 12px; font-size: 11px;
    font-weight: 600; color: #fff; text-transform: uppercase; letter-spacing: 0.5px;
  }

  .ws-badge.svelte-116majd {
    font-size: 12px; color: #aaa; background: rgba(255,255,255,0.06);
    padding: 3px 8px; border-radius: 8px;
  }

  .host-badge.svelte-116majd {
    font-size: 12px; color: #888; padding: 3px 8px;
    border-radius: 8px; background: rgba(255,255,255,0.04);
  }
  .host-badge.online.svelte-116majd { color: #4caf50; }

  /* Clients */
  .clients-section.svelte-116majd { padding: 8px 12px; display: flex; flex-direction: column; gap: 6px; }

  .client-row.svelte-116majd {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 12px; border-radius: 8px;
    background: rgba(255,255,255,0.03);
    border: 1px solid transparent;
    transition: border-color 0.15s;
  }
  .client-row.is-host.svelte-116majd {
    border-color: #ffd70033;
    background: rgba(255, 215, 0, 0.04);
  }

  .client-info.svelte-116majd { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }

  .client-top.svelte-116majd { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

  .client-id.svelte-116majd { font-family: monospace; font-size: 12px; color: #999; }

  .host-tag.svelte-116majd {
    font-size: 10px; font-weight: 700; color: #ffd700;
    background: rgba(255,215,0,0.12); border: 1px solid #ffd70044;
    padding: 1px 6px; border-radius: 4px; letter-spacing: 0.5px;
  }

  .online-dot.svelte-116majd {
    width: 7px; height: 7px; border-radius: 50%;
    background: #555; flex-shrink: 0;
  }
  .online-dot.online.svelte-116majd { background: #4caf50; }

  .last-seen.svelte-116majd { font-size: 11px; color: #666; }

  .player-chips.svelte-116majd { display: flex; flex-wrap: wrap; gap: 6px; }

  .player-chip.svelte-116majd {
    display: flex; align-items: center; gap: 5px;
    padding: 3px 9px; border: 1px solid; border-radius: 16px;
    font-size: 12px; color: #ddd; background: rgba(255,255,255,0.04);
  }

  .faction-icon.svelte-116majd { width: 16px; height: 16px; object-fit: contain; border-radius: 50%; }

  .no-clients.svelte-116majd { font-size: 12px; color: #555; text-align: center; padding: 8px; }

  .spectators-section.svelte-116majd { margin-top: 4px; }
  .spectators-summary.svelte-116majd {
    font-size: 11px; color: #666; cursor: pointer; padding: 6px 12px;
    list-style: none; user-select: none;
  }
  .spectators-summary.svelte-116majd::-webkit-details-marker { display: none; }
  .spectators-summary.svelte-116majd::before { content: '▶ '; font-size: 9px; }
  details[open].svelte-116majd .spectators-summary:where(.svelte-116majd)::before { content: '▼ '; }
  .spectator-row.svelte-116majd { opacity: 0.75; }

  .sessions-count-row.svelte-116majd {
    display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
  }
  .sessions-count.svelte-116majd { font-size: 13px; color: #888; }

  .btn-end-all.svelte-116majd {
    padding: 5px 14px; border-radius: 6px; font-size: 12px; cursor: pointer;
    background: rgba(231, 76, 60, 0.08); border: 1px solid #c0392b66;
    color: #e57373; transition: background 0.2s; white-space: nowrap;
  }
  .btn-end-all.svelte-116majd:hover:not(:disabled) { background: rgba(231, 76, 60, 0.22); }
  .btn-end-all.svelte-116majd:disabled { opacity: 0.4; cursor: not-allowed; }

  .btn-set-host.svelte-116majd {
    flex-shrink: 0;
    padding: 5px 12px; border-radius: 6px; font-size: 12px; cursor: pointer;
    background: rgba(58, 123, 213, 0.12); border: 1px solid #3a7bd5;
    color: #7ab4f5; transition: background 0.2s; white-space: nowrap;
  }
  .btn-set-host.svelte-116majd:hover:not(:disabled) { background: rgba(58, 123, 213, 0.28); }
  .btn-set-host.svelte-116majd:disabled { opacity: 0.4; cursor: not-allowed; }

  /* Footer */
  .session-footer.svelte-116majd {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 12px 20px;
    border-top: 1px solid #1e2e4e;
    background: rgba(0,0,0,0.15);
  }

  .joined-msg.svelte-116majd { font-size: 12px; color: #4caf50; }

  .btn-join.svelte-116majd {
    padding: 6px 14px; border-radius: 7px; font-size: 12px; cursor: pointer;
    background: rgba(76, 175, 80, 0.15); border: 1px solid #4caf50;
    color: #81c784; text-decoration: none; display: inline-flex; align-items: center;
  }
  .btn-join.svelte-116majd:hover { background: rgba(76, 175, 80, 0.28); }

  .btn-take-host.svelte-116majd {
    padding: 6px 14px; border-radius: 7px; font-size: 13px; cursor: pointer;
    background: rgba(255, 215, 0, 0.1); border: 1px solid #ffd70066;
    color: #ffd700; transition: background 0.2s; white-space: nowrap;
  }
  .btn-take-host.svelte-116majd:hover:not(:disabled) { background: rgba(255, 215, 0, 0.22); }
  .btn-take-host.svelte-116majd:disabled { opacity: 0.4; cursor: not-allowed; }

  .btn-spectate.svelte-116majd {
    padding: 6px 14px; border-radius: 7px; font-size: 13px; cursor: pointer;
    background: rgba(100, 180, 255, 0.08); border: 1px solid #4a8ab566;
    color: #7ab4d5; text-decoration: none; display: inline-flex; align-items: center;
    transition: background 0.2s; white-space: nowrap;
  }
  .btn-spectate.svelte-116majd:hover { background: rgba(100, 180, 255, 0.2); }

  .btn-end.svelte-116majd {
    margin-left: auto; padding: 6px 16px; border-radius: 7px; font-size: 13px;
    cursor: pointer; background: rgba(231, 76, 60, 0.1);
    border: 1px solid #c0392b; color: #e57373; transition: background 0.2s;
  }
  .btn-end.svelte-116majd:hover:not(:disabled) { background: rgba(231, 76, 60, 0.24); }
  .btn-end.svelte-116majd:disabled { opacity: 0.4; cursor: not-allowed; }

  /* Stats bar */
  .stats-bar.svelte-116majd {
    display: flex; align-items: flex-start; gap: 24px; flex-wrap: wrap;
    background: rgba(255,255,255,0.03); border: 1px solid #2a3a5e;
    border-radius: 10px; padding: 12px 20px; margin-bottom: 20px;
    max-width: 860px;
  }

  .stats-server.svelte-116majd { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; min-width: 0; }

  .stats-label.svelte-116majd {
    font-size: 10px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase;
    color: #666; min-width: 48px; padding-top: 3px;
  }

  .stats-metrics.svelte-116majd { display: flex; gap: 20px; flex-wrap: wrap; }

  .stat-metric.svelte-116majd { display: flex; flex-direction: column; gap: 2px; }

  .stat-metric-name.svelte-116majd { font-size: 10px; color: #555; text-transform: uppercase; letter-spacing: 0.5px; }

  .stat-now.svelte-116majd {
    font-size: 15px; font-weight: 700; color: #aaa; font-variant-numeric: tabular-nums;
    line-height: 1.1;
  }

  .stat-sub.svelte-116majd { font-size: 10px; color: #555; }

  .stat-avgs.svelte-116majd { font-size: 10px; color: #555; }
  .stat-avgs.svelte-116majd b:where(.svelte-116majd) { font-weight: 600; color: #777; }

  .stat-now.stat-warn.svelte-116majd, .stat-avgs.svelte-116majd b.stat-warn:where(.svelte-116majd) { color: #e0a030; }
  .stat-now.stat-crit.svelte-116majd, .stat-avgs.svelte-116majd b.stat-crit:where(.svelte-116majd) { color: #e05050; }

  .stat-unavail.svelte-116majd { font-size: 11px; color: #555; font-style: italic; }

  .stats-divider.svelte-116majd {
    width: 1px; background: #2a3a5e; align-self: stretch; min-height: 40px;
    flex-shrink: 0;
  }

  .app-container.svelte-1n46o8q {
    min-height: 100vh;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    color: #eee;
  }
/* TI4 Silent Agenda - Global Styles */

/* =============================================================================
   CSS VARIABLES
   ============================================================================= */
:root {
    /* Player colors */
    --color-red: #e74c3c;
    --color-blue: #3498db;
    --color-green: #27ae60;
    --color-yellow: #f1c40f;
    --color-purple: #9b59b6;
    --color-orange: #e67e22;
    --color-pink: #ff69b4;
    --color-black: #2c3e50;

    /* Theme colors */
    --bg-dark: #1a1a2e;
    --bg-card: #16213e;
    --text-primary: #eee;
    --text-secondary: #aaa;
    --border-color: #0f3460;
    --accent: #e94560;
}

/* =============================================================================
   BASE STYLES
   ============================================================================= */
* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg-dark);
    color: var(--text-primary);
    min-height: 100vh;
}

#app {
    min-height: 100vh;
}

/* =============================================================================
   UTILITIES
   ============================================================================= */
.hidden {
    display: none !important;
}

/* =============================================================================
   BUTTONS
   ============================================================================= */
.btn {
    padding: 0.5rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--border-color);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s;
    font-size: 1rem;
}

.btn:hover:not(:disabled) {
    background: #1a4a8a;
    border-color: #1a4a8a;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
}

.btn-primary:hover:not(:disabled) {
    background: #c73e54;
    border-color: #c73e54;
}

.btn-secondary {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
}

.btn-secondary:hover:not(:disabled) {
    background: var(--border-color);
    color: var(--text-primary);
}

.btn-danger {
    background: #c0392b;
    border-color: #c0392b;
    color: white;
}

.btn-danger:hover:not(:disabled) {
    background: #a93226;
}

/* =============================================================================
   FORM CONTROLS
   ============================================================================= */
input, select, textarea {
    background: var(--bg-dark);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-radius: 8px;
    padding: 0.5rem;
    font-size: 1rem;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(233, 69, 96, 0.25);
}

input::placeholder {
    color: var(--text-secondary);
}

/* =============================================================================
   CARDS
   ============================================================================= */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1rem;
}

/* =============================================================================
   PLAYER COLORS (for dynamic styling)
   ============================================================================= */
[data-color="red"] { --player-color: var(--color-red); }
[data-color="blue"] { --player-color: var(--color-blue); }
[data-color="green"] { --player-color: var(--color-green); }
[data-color="yellow"] { --player-color: var(--color-yellow); }
[data-color="purple"] { --player-color: var(--color-purple); }
[data-color="orange"] { --player-color: var(--color-orange); }
[data-color="pink"] { --player-color: var(--color-pink); }
[data-color="black"] { --player-color: var(--color-black); }

/* =============================================================================
   STATUS INDICATORS
   ============================================================================= */
.status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.status-dot.online {
    background-color: #27ae60;
    box-shadow: 0 0 4px #27ae60;
}

.status-dot.offline {
    background-color: #7f8c8d;
}

/* =============================================================================
   OUTCOME BADGES
   ============================================================================= */
.outcome-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.outcome-badge.outcome-for { background: rgba(39, 174, 96, 0.2); color: #27ae60; }
.outcome-badge.outcome-against { background: rgba(231, 76, 60, 0.2); color: #e74c3c; }
.outcome-badge.outcome-elect { background: rgba(155, 89, 182, 0.2); color: #9b59b6; }
.outcome-badge.outcome-override { background: rgba(241, 196, 15, 0.2); color: #f1c40f; }

/* =============================================================================
   SCROLLBAR
   ============================================================================= */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-dark);
}

::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #1a4a8a;
}

/* =============================================================================
   TOAST NOTIFICATIONS
   ============================================================================= */
.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}

.toast {
    padding: 12px 20px;
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    animation: toast-in 0.3s ease;
    pointer-events: auto;
    max-width: 350px;
}

.toast-error { background: #c0392b; }
.toast-success { background: #27ae60; }
.toast-warning { background: #f39c12; color: #1a1a2e; }
.toast-info { background: #3498db; }

@keyframes toast-in {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}