:root {
    color-scheme: dark;
    --bg: #0a0b0e;
    --surface: #111318;
    --surface2: #181c24;
    --surface3: #1e2330;
    --border: rgba(255,255,255,0.06);
    --border-accent: rgba(255,255,255,0.12);
    --gold: #c8962e;
    --gold-light: #f0b845;
    --gold-dim: rgba(200,150,46,0.15);
    --text: #e8eaf0;
    --text-muted: #6b7280;
    --text-dim: #9ca3af;
    --red: #e05252;
    --red-dim: rgba(224,82,82,0.15);
    --green: #4caf82;
    --green-dim: rgba(76,175,130,0.15);
    --blue: #5b9bd5;
    --blue-dim: rgba(91,155,213,0.15);
    --purple: #9b7fe8;
    --purple-dim: rgba(155,127,232,0.15);
    --orange: #e07d40;
    --orange-dim: rgba(224,125,64,0.15);
    --teal: #3eb8c0;
    --teal-dim: rgba(62,184,192,0.15);
    --radius: 10px;
    --radius-lg: 16px;
  }

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

  /* Remove browser spinner arrows on all number inputs — they look bad on dark theme */
  input[type="number"]::-webkit-outer-spin-button,
  input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
  input[type="number"] { -moz-appearance: textfield; }

  body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* Sleek modern scrollbars */
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  ::-webkit-scrollbar-track {
    background: transparent;
  }
  ::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.15);
    border-radius: 4px;
    transition: background 0.2s;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.25);
  }

  /* ── Liquid glass utility ── */
  .liquid-glass {
    background: rgba(17,19,24,0.45);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: inset 0 1px 1px rgba(255,255,255,0.08), 0 8px 32px rgba(0,0,0,0.3);
    position: relative;
    overflow: hidden;
  }
  .liquid-glass::before {
    content: '';
    position: absolute; inset: 0;
    border-radius: inherit; padding: 1.4px;
    background: linear-gradient(180deg,
      rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%,
      rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%,
      rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
  }

  /* Background texture removed for cleaner look */

  .app {
    position: relative;
    z-index: 1;
    width: 100%;
    min-height: 100vh;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
  }
  .app-content {
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
    padding: 0 32px;
    flex: 1;
    box-sizing: border-box;
  }
  @keyframes appLoad {
    from { opacity: 0; transform: translateY(6px); filter: blur(4px); }
    to   { opacity: 1; transform: translateY(0);  filter: blur(0); }
  }
  @keyframes slideDown {
    from { opacity: 0; transform: translateY(-100%); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* Header */
  .header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    margin-bottom: 0;
    padding: 24px 32px 16px;
    border-bottom: none;
  }
  .header-center {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .header-controls {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    position: relative;
    z-index: 500;
  }
  .header-controls-row {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  /* Header icon button (shared style for vol, bell, profile) */
  .header-icon-btn {
    width: 34px; height: 34px; border-radius: 8px;
    border: 1px solid var(--border-accent); background: var(--surface);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--text-muted);
    transition: all 0.15s; position: relative;
    gap: 0; padding: 0;
  }
  .header-icon-btn:hover { border-color: var(--gold); color: var(--gold); }
  .header-icon-btn .header-profile-dot {
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--text-muted); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Rajdhani', sans-serif; font-size: 10px; font-weight: 700;
    color: var(--bg); text-transform: uppercase;
  }
  .header-icon-btn .header-profile-name { display: none; }

  .logo {
    display: flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
  }

  .logo-img {
    height: 44px;
    width: auto;
    display: block;
    filter: drop-shadow(0 2px 10px rgba(0,0,0,0.3));
    /* Blend out the grey checkerboard background */

    background: transparent;
  }

  /* Wrapper to ensure blending works against dark bg */
  .logo-img-wrap {
    background: var(--bg);
    border-radius: 4px;
    display: flex;
    align-items: center;
  }

  .logo-tools-text {
    font-family: 'Rajdhani', sans-serif;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--text-dim);
    opacity: 0.6;
    margin-top: 6px;
    padding-left: 2px;
    border-left: 1px solid rgba(255,255,255,0.1);
    margin-left: 2px;
    padding-left: 8px;
    line-height: 1;
  }

  .header-right {
    font-size: 10px;
    color: var(--text-muted);
    letter-spacing: 0.3px;
    font-variant-numeric: tabular-nums;
    text-align: right;
    opacity: 0.6;
  }

  /* Add button */
  .btn-add {
    display: flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, var(--gold), var(--gold-light));
    color: #0a0b0e;
    border: none;
    padding: 10px 20px;
    border-radius: var(--radius);
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.8px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    text-transform: uppercase;
    box-shadow: 0 4px 14px rgba(200,150,46,0.3);
  }

  .btn-add:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(200,150,46,0.4);
    filter: brightness(1.1);
  }

  .btn-add:active { transform: translateY(1px); box-shadow: 0 2px 8px rgba(200,150,46,0.3); }

  /* Toolbar */
  .toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    gap: 12px;
    flex-wrap: wrap;
  }

  .toolbar-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }

  .filter-btn, .filter-btn-is {
    padding: 5px 12px;
    border-radius: 20px;
    border: 1px solid var(--border-accent);
    background: var(--surface);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    letter-spacing: 0.3px;
  }

  .filter-btn:hover, .filter-btn-is:hover { border-color: var(--gold); color: var(--gold); }
  .filter-btn.active, .filter-btn-is.active { border-color: var(--gold); background: var(--gold-dim); color: var(--gold-light); transition: all 0.15s ease; }

  .search-input {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 7px 12px 7px 32px;
    color: var(--text);
    font-size: 12px;
    outline: none;
    width: 180px;
    transition: border-color 0.2s;
    position: relative;
  }

  .search-wrap {
    position: relative;
    display: flex;
    align-items: center;
  }

  .search-wrap svg {
    position: absolute;
    left: 10px;
    color: var(--text-muted);
    pointer-events: none;
  }

  .search-input:focus { border-color: var(--gold); }
  .search-input::placeholder { color: var(--text-muted); }

  /* ============ SECTIONS LAYOUT ============ */
  .sections-container { display: flex; flex-direction: column; gap: 24px; }

  .section-block {}

  .section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
  }

  .section-label {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
  }

  .section-count {
    font-family: 'Rajdhani', sans-serif;
    font-size: 11px;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 10px;
  }

  .section-line {
    flex: 1;
    height: 1px;
    background: var(--border);
  }

  /* Section colors */
  .sec-expired  .section-label { color: var(--red); }
  .sec-expired  .section-count { background: var(--red-dim); color: var(--red); }
  .sec-expired  .section-header { border-color: rgba(224,82,82,0.2); }

  .sec-urgent   .section-label { color: var(--orange); }
  .sec-urgent   .section-count { background: var(--orange-dim); color: var(--orange); }
  .sec-urgent   .section-header { border-color: rgba(224,125,64,0.2); }

  .sec-warn4    .section-label { color: var(--purple); }
  .sec-warn4    .section-count { background: var(--purple-dim); color: var(--purple); }
  .sec-warn4    .section-header { border-color: rgba(155,127,232,0.2); }

  .sec-active   .section-label { color: var(--text-dim); }
  .sec-active   .section-count { background: rgba(255,255,255,0.05); color: var(--text-muted); }

  /* Grid */
  .grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
  }

  /* Large grid for urgent items — 2 columns on wide, 1 on small */
  .grid-large {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 12px;
  }

  /* Compact list for stable items */
  .grid-compact {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .card {
    background: rgba(17,19,24,0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color 0.3s ease, transform 0.3s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s ease;
    position: relative;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  }
  .card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(160deg, rgba(255,255,255,0.04) 0%, transparent 60%);
    pointer-events: none;
  }

  .card.pers-active-card {
    background: rgba(224,82,82,0.06);
    border-color: rgba(224,82,82,0.3);
  }

  .card.pers-active-card:hover {
    border-color: rgba(224,82,82,0.5);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(224,82,82,0.15);
  }

  .card:not(.pers-active-card):hover {
    border-color: rgba(255,255,255,0.18);
    transform: translateY(-3px);
    box-shadow: 0 12px 36px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.05);
  }

  /* ============ COMPACT CARD ============ */
  .card.card-compact {
    border-radius: var(--radius);
  }

  .card.card-compact .card-body {
    padding: 10px 12px;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    height: auto;
  }

  .card.card-compact .card-accent { display: none; }

  .card.card-compact .cat-icon {
    width: 30px; height: 30px; font-size: 15px;
    border-radius: 6px; flex-shrink: 0;
  }
  .card.card-compact .cat-icon.icon-skin-arma,
  .card.card-compact .cat-icon.icon-costum {
    width: 30px; height: 60px; padding: 0;
  }

  .compact-left {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; gap: 2px;
  }

  .compact-title {
    display: flex; align-items: center; gap: 6px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px; font-weight: 600; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  .compact-sub {
    display: flex; align-items: center; gap: 6px;
    font-size: 11px; color: var(--text-muted);
    flex-wrap: wrap;
  }

  .compact-sub .card-account-name {
    font-size: 11px; font-weight: 600; color: var(--gold-light);
  }

  .compact-timer {
    font-family: 'Rajdhani', sans-serif;
    font-size: 15px; font-weight: 700;
    white-space: nowrap; flex-shrink: 0;
  }

  .compact-actions {
    display: flex; gap: 5px; flex-shrink: 0;
  }

  .compact-actions .btn-action {
    padding: 4px 8px;
    font-size: 10px;
    flex: none;
    white-space: nowrap;
  }

  /* Left accent stripe on compact */
  .card.card-compact { border-left-width: 3px; }
  .card.card-compact.accent-stripe-skin-arma  { border-left-color: var(--blue); }
  .card.card-compact.accent-stripe-costum     { border-left-color: var(--purple); }
  .card.card-compact.accent-stripe-frizura    { border-left-color: var(--teal); }
  .card.card-compact.accent-stripe-atac-auto  { border-left-color: var(--red); }
  .card.card-compact.accent-stripe-manusa     { border-left-color: var(--orange); }
  .card.card-compact.accent-stripe-insotitor  { border-left-color: var(--green); }

  .card-accent {
    height: 2px;
    width: 100%;
  }

  .card-body {
    padding: 14px;
  }

  .card-header {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
  }

  .cat-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
    padding: 0;
  }
  .cat-icon img {
    width: 100%; height: 100%; object-fit: contain;
  }
  .cat-icon.icon-skin-arma,
  .cat-icon.icon-costum {
    width: 36px;
    height: 72px;
    border-radius: 8px;
    padding: 0;
  }

  .card-info { flex: 1; min-width: 0; }

  .card-name {
    font-family: 'Rajdhani', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
  }

  /* Account name row - prominent */
  .card-account-row {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 5px;
    padding: 4px 7px;
    background: rgba(255,255,255,0.04);
    border-radius: 5px;
    border-left: 2px solid var(--gold);
  }

  .card-account-row svg { flex-shrink: 0; color: var(--gold); }

  .card-account-name {
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--gold-light);
    letter-spacing: 0.3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .card-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
  }

  .card-category {
    font-size: 10px;
    font-weight: 500;
    padding: 2px 7px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  /* Warning card - under 24h */
  .card.warning-card {
    border-color: rgba(224,125,64,0.4);
    box-shadow: 0 0 0 1px rgba(224,125,64,0.12);
  }
  .card.warning-card:hover { border-color: rgba(224,125,64,0.65); }

  /* Urgency badge on card */
  .urgency-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(224,125,64,0.18);
    border: 1px solid rgba(224,125,64,0.4);
    border-radius: 10px;
    padding: 2px 7px;
    font-size: 10px;
    font-weight: 600;
    color: var(--orange);
    letter-spacing: 0.3px;
    text-transform: uppercase;
  }
  .urgency-badge.expired-badge {
    background: var(--red-dim);
    border-color: rgba(224,82,82,0.4);
    color: var(--red);
  }

  /* Notification bell + panel */
  .notif-bell-wrap { position: relative; user-select: none; -webkit-user-select: none; }
  .notif-bell {
    position: relative;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid var(--border-accent);
    background: var(--surface);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s;
    color: var(--text-muted);
  }
  .notif-bell:hover { border-color: var(--gold); color: var(--gold); background: rgba(200,150,46,0.06); }
  .notif-bell:active { transform: scale(0.95); }
  .notif-bell .badge {
    position: absolute;
    top: -5px; right: -5px;
    min-width: 16px; height: 16px;
    background: var(--orange);
    border-radius: 8px;
    font-size: 9px; font-weight: 700;
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    padding: 0 3px;
    border: 2px solid var(--bg);
  }

  /* Notification panel dropdown */
  .notif-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 360px;
    max-height: 480px;
    background: rgba(13,15,20,0.94);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 56px rgba(0,0,0,0.65), inset 0 1px 0 rgba(255,255,255,0.06);
    z-index: 9999;
    overflow: hidden;
    flex-direction: column;
    display: flex;
    opacity: 0;
    transform: translateY(-8px) scale(0.97);
    pointer-events: none;
    visibility: hidden;
    transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.16,1,0.3,1), visibility 0.22s;
    user-select: none;
    -webkit-user-select: none;
  }
  .notif-panel.open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
    visibility: visible;
  }

  .notif-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
  }
  .notif-panel-title {
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text);
  }
  .notif-clear-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 11px;
    cursor: pointer;
    padding: 3px 8px;
    border-radius: 4px;
    transition: all 0.15s;
    font-family: 'Inter', sans-serif;
  }
  .notif-clear-btn:hover { color: var(--red); background: var(--red-dim); }

  /* Pinned section (expiring items) */
  .notif-panel-pinned { flex-shrink: 0; }
  .notif-panel-pinned:empty { display: none; }
  .notif-pinned-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px 4px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--orange);
  }
  .notif-pinned-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    border-bottom: 1px solid rgba(224,125,64,0.1);
    background: rgba(224,125,64,0.05);
    transition: background 0.15s;
  }
  .notif-pinned-item:hover { background: rgba(224,125,64,0.1); }
  .notif-pinned-item:last-child { border-bottom: 1px solid var(--border); }

  /* 6/7 Finalizat variant */
  .notif-pinned-header--sz { color: var(--green); }
  .notif-pinned-item--sz {
    background: rgba(52,199,89,0.05);
    border-bottom-color: rgba(52,199,89,0.1);
  }
  .notif-pinned-item--sz:hover { background: rgba(52,199,89,0.09); }
  .notif-pinned-icon--sz {
    background: rgba(52,199,89,0.15);
    color: var(--green);
    font-size: 12px; font-weight: 700;
  }
  .notif-pinned-time--sz { color: var(--green); font-size: 10px; }

  /* Depersonalizare variant */
  .notif-pinned-header--deperss { color: var(--purple); }
  .notif-pinned-item--deperss {
    background: rgba(155,127,232,0.05);
    border-bottom-color: rgba(155,127,232,0.1);
  }
  .notif-pinned-item--deperss:hover { background: rgba(155,127,232,0.09); }
  .notif-pinned-icon--deperss { background: var(--purple-dim); }
  .notif-pinned-time--deperss { color: var(--purple); }
  .notif-pinned-icon {
    width: 28px; height: 28px;
    border-radius: 6px;
    background: var(--orange-dim);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
  }
  .notif-pinned-body { flex: 1; min-width: 0; }
  .notif-pinned-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .notif-pinned-name .notif-account { color: var(--text-muted); font-weight: 400; }
  .notif-pinned-time {
    font-family: 'Rajdhani', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--orange);
    flex-shrink: 0;
  }

  /* Notification list */
  .notif-panel-list {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .notif-panel-list::-webkit-scrollbar { width: 4px; }
  .notif-panel-list::-webkit-scrollbar-thumb { background: var(--border-accent); border-radius: 2px; }

  .notif-empty {
    padding: 30px 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 12px;
  }

  .notif-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    transition: background 0.15s;
  }
  .notif-item:hover { background: rgba(255,255,255,0.02); }
  .notif-item-icon {
    width: 28px; height: 28px;
    border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
  }
  .notif-item-icon.type-success { background: var(--green-dim); }
  .notif-item-icon.type-error { background: var(--red-dim); }
  .notif-item-icon.type-info { background: var(--blue-dim); }
  .notif-item-icon.type-warning { background: var(--orange-dim); }
  .notif-item-icon.type-deperss { background: var(--purple-dim); }
  .notif-item-body { flex: 1; min-width: 0; }
  .notif-item-msg {
    font-size: 12px;
    color: var(--text);
    line-height: 1.4;
  }
  .notif-item-time {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 2px;
  }
  .notif-item-dismiss {
    background: none; border: none; color: var(--text-muted); cursor: pointer;
    font-size: 11px; padding: 2px 4px; border-radius: 4px; opacity: 0;
    transition: opacity 0.15s, color 0.15s, background 0.15s;
    flex-shrink: 0; align-self: center;
  }
  .notif-item:hover .notif-item-dismiss { opacity: 1; }
  .notif-item-dismiss:hover { color: var(--red); background: rgba(255,80,80,0.1); }

  /* Urgency banner (legacy, kept for compatibility) */
  .urgency-banner { display: none; }

  /* Timer */
  .timer-section {
    margin-top: 10px;
  }

  .timer-label {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
  }

  .timer-display {
    font-family: 'Rajdhani', sans-serif;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 1;
  }

  .timer-display.expired {
    color: var(--red);
  }

  .timer-display.warning {
    color: var(--orange);
  }

  .timer-display.ok {
    color: var(--text);
  }

  /* Progress bar */
  .progress-bar {
    margin-top: 8px;
    height: 3px;
    background: var(--surface3);
    border-radius: 2px;
    overflow: hidden;
  }

  .progress-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 1s linear;
  }

  /* Card actions */
  .card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
  }

  /* For items with 3 buttons (deperss + rein + sterge) keep them even */
  .card-actions .btn-action {
    flex: 1 1 calc(50% - 3px);
    min-width: 0;
  }

  /* Full-width single button */
  .card-actions .btn-action:only-child,
  .card-actions .btn-action.btn-full {
    flex: 1 1 100%;
  }

  /* Snooze badge on card */
  .snooze-badge {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 10px; font-weight: 600;
    padding: 2px 7px; border-radius: 10px;
    text-transform: uppercase; letter-spacing: 0.4px;
    background: rgba(200,150,46,0.12);
    border: 1px solid rgba(200,150,46,0.35);
    color: var(--gold-light);
  }
  .btn-action {
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid var(--border-accent);
    background: var(--surface2);
    color: var(--text-dim);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    letter-spacing: 0.3px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-family: 'Inter', sans-serif;
  }

  .btn-action:hover {
    border-color: var(--gold);
    color: var(--gold-light);
    background: var(--gold-dim);
  }

  .btn-action.danger:hover {
    border-color: var(--red);
    color: var(--red);
    background: var(--red-dim);
  }

  .btn-action.feed:hover {
    border-color: var(--green);
    color: var(--green);
    background: var(--green-dim);
  }

  /* Empty state */
  .empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
  }

  .empty-state-icon { font-size: 40px; margin-bottom: 12px; opacity: 0.4; }
  .empty-state-title { font-family: 'Rajdhani', sans-serif; font-size: 18px; color: var(--text-dim); margin-bottom: 6px; }
  .empty-state-sub { font-size: 12px; }

  /* ======== MODAL ======== */
  .modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.16,1,0.3,1);
  }

  .modal-overlay.open {
    opacity: 1;
    pointer-events: all;
  }

  .modal {
    background: rgba(12,14,18,0.7);
    backdrop-filter: blur(32px);
    -webkit-backdrop-filter: blur(32px);
    border: 1px solid rgba(255,255,255,0.06);
    box-shadow: 0 40px 100px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.06);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 420px;
    padding: 24px;
    transform: translateY(16px) scale(0.96);
    transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), opacity 0.3s ease;
    opacity: 0;
    margin: 16px;
    position: relative;
    overflow: hidden;
  }
  .modal::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(160deg,
      rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.03) 40%,
      rgba(255,255,255,0) 70%,
      rgba(255,255,255,0.05) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
  }

  .modal-overlay.open .modal {
    opacity: 1;
  }

  .modal-overlay.open .modal {
    transform: translateY(0) scale(1);
  }

  .modal-title img { filter: invert(1); }
  .modal-title {
    font-family: 'Rajdhani', sans-serif;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--gold-light);
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .form-group {
    margin-bottom: 14px;
  }

  .form-label {
    display: block;
    font-size: 10.5px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: 6px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
  }

  .form-input, .form-select {
    width: 100%;
    background: var(--surface3);
    border: 1px solid var(--border-accent);
    border-radius: var(--radius);
    padding: 9px 12px;
    color: var(--text);
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    outline: none;
    transition: border-color 0.2s;
    appearance: none;
  }

  .form-input:focus, .form-select:focus {
    border-color: var(--gold);
  }

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

  .form-select option {
    background: var(--surface2);
    color: var(--text);
  }

  .duration-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
  }

  .duration-col label {
    display: block;
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 4px;
  }

  .modal-actions {
    display: flex;
    gap: 8px;
    margin-top: 20px;
  }

  /* Profile modal */
  .profile-modal-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--text-muted);
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    letter-spacing: .5px;
    text-shadow: 0 1px 3px rgba(0,0,0,.3);
    transition: background .2s;
  }

  .profile-logout-row {
    margin-top: 12px;
    text-align: center;
    border-top: 1px solid rgba(255,255,255,0.05);
    padding-top: 12px;
  }
  .profile-logout-btn {
    font-size: 11px;
    color: var(--text-muted);
    text-decoration: none;
    transition: color .15s;
    letter-spacing: 0.2px;
  }
  .profile-logout-btn:hover { color: var(--red); }

  .color-picker-compact {
    position: relative;
    display: inline-block;
  }

  .color-picker-current {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid rgba(255,255,255,.1);
    transition: all .2s;
  }

  .color-picker-current:hover {
    border-color: rgba(255,255,255,.3);
    box-shadow: 0 0 10px rgba(255,255,255,.08);
  }

  .color-picker-dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) scale(0.95);
    background: rgba(13,15,20,0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius);
    padding: 10px;
    padding-top: 18px;
    opacity: 0;
    pointer-events: none;
    transition: all .2s cubic-bezier(0.16,1,0.3,1);
    z-index: 10;
    box-shadow: 0 16px 40px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,0.05);
  }

  .color-picker-compact:hover .color-picker-dropdown,
  .color-picker-dropdown.pinned {
    opacity: 1;
    pointer-events: all;
    transform: translateX(-50%) scale(1);
  }

  .color-swatch-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 5px;
  }

  .color-swatch {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all .15s;
    position: relative;
    padding: 0;
    outline: none;
  }

  .color-swatch:hover {
    transform: scale(1.2);
    border-color: rgba(255,255,255,.3);
  }

  .color-swatch.selected {
    border-color: rgba(255,255,255,.6);
    box-shadow: 0 0 6px rgba(255,255,255,.15);
  }

  .color-swatch.selected::after {
    content: '✓';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,.5);
  }

  .btn-primary {
    flex: 1;
    padding: 10px;
    background: var(--gold);
    border: none;
    border-radius: var(--radius);
    color: #0a0b0e;
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.15s;
  }

  .btn-primary:hover {
    background: var(--gold-light);
  }

  .btn-secondary {
    padding: 10px 16px;
    background: transparent;
    border: 1px solid var(--border-accent);
    border-radius: var(--radius);
    color: var(--text-muted);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s;
  }

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

  /* Category colors */
  .cat-skin-arma    { background: var(--blue-dim);   color: var(--blue);   }
  .cat-costum       { background: var(--purple-dim); color: var(--purple); }
  .cat-frizura      { background: var(--teal-dim);   color: var(--teal);   }
  .cat-atac-auto    { background: var(--red-dim);    color: var(--red);    }
  .cat-manusa       { background: var(--orange-dim); color: var(--orange); }
  .cat-insotitor    { background: var(--green-dim);  color: var(--green);  }

  .accent-skin-arma { background: linear-gradient(90deg, var(--blue), transparent); }
  .accent-costum    { background: linear-gradient(90deg, var(--purple), transparent); }
  .accent-frizura   { background: linear-gradient(90deg, var(--teal), transparent); }
  .accent-atac-auto { background: linear-gradient(90deg, var(--red), transparent); }
  .accent-manusa    { background: linear-gradient(90deg, var(--orange), transparent); }
  .accent-insotitor { background: linear-gradient(90deg, var(--green), transparent); }

  .icon-skin-arma    { background: transparent; }
  .icon-costum       { background: transparent; }
  .icon-frizura      { background: transparent; }
  .icon-atac-auto    { background: transparent; }
  .icon-manusa       { background: transparent; }
  .icon-insotitor    { background: transparent; }

  .fill-skin-arma  { background: var(--blue); }
  .fill-costum     { background: var(--purple); }
  .fill-frizura    { background: var(--teal); }
  .fill-atac-auto  { background: var(--red); }
  .fill-manusa     { background: var(--orange); }
  .fill-insotitor  { background: var(--green); }

  /* Stats bar */
  .stats-bar {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
    padding: 12px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    flex-wrap: wrap;
  }

  .stat-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
  }

  .stat-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
  }

  .stat-count {
    font-family: 'Rajdhani', sans-serif;
    font-size: 15px;
    font-weight: 700;
    margin-right: 2px;
  }

  /* Scrollbar */
  /* Global smooth interactions */
  button, input, select, textarea, a {
    transition: border-color 0.15s ease, background-color 0.15s ease,
                color 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease;
  }
  button:active { transform: scale(0.97); }

  ::-webkit-scrollbar { width: 4px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: var(--surface3); border-radius: 2px; }

  /* Category selector visual */
  .cat-selector {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }

  .cat-option {
    padding: 8px 6px;
    border-radius: 7px;
    border: 1px solid var(--border);
    background: var(--surface3);
    cursor: pointer;
    text-align: center;
    font-size: 11px;
    font-weight: 500;
    transition: all 0.15s;
    color: var(--text-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
  }

  .cat-option .cat-opt-icon { font-size: 16px; display: flex; align-items: center; justify-content: center; margin-bottom: 3px; line-height: 0; height: 40px; }
  .cat-option .cat-opt-icon img { width: 22px; height: 22px; object-fit: contain; }
  .cat-option[data-cat="skin-arma"] .cat-opt-icon img,
  .cat-option[data-cat="costum"] .cat-opt-icon img { width: 22px; height: 40px; }

  .cat-option:hover { border-color: var(--border-accent); color: var(--text); }
  .cat-option.selected { border-color: currentColor; }
  .cat-option.sel-skin-arma  { border-color: var(--blue);   background: var(--blue-dim);   color: var(--blue); }
  .cat-option.sel-costum     { border-color: var(--purple); background: var(--purple-dim); color: var(--purple); }
  .cat-option.sel-frizura    { border-color: var(--teal);   background: var(--teal-dim);   color: var(--teal); }
  .cat-option.sel-atac-auto  { border-color: var(--red);    background: var(--red-dim);    color: var(--red); }
  .cat-option.sel-manusa     { border-color: var(--orange); background: var(--orange-dim); color: var(--orange); }
  .cat-option.sel-insotitor  { border-color: var(--green);  background: var(--green-dim);  color: var(--green); }

  .hidden { display: none !important; }

  /* Toast */
  .toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: var(--surface2);
    border: 1px solid var(--border-accent);
    border-left: 3px solid var(--gold);
    border-radius: var(--radius);
    padding: 12px 16px;
    font-size: 13px;
    z-index: 200;
    transform: translateY(60px);
    opacity: 0;
    transition: all 0.3s ease;
    max-width: 280px;
  }

  .toast.show {
    transform: translateY(0);
    opacity: 1;
  }

  .toast.success { border-left-color: var(--green); }
  .toast.error   { border-left-color: var(--red); }

  /* ===== PERSONALIZATION ===== */
  .pers-badge {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 10px; font-weight: 600;
    padding: 2px 7px; border-radius: 10px;
    text-transform: uppercase; letter-spacing: 0.4px;
  }
  .pers-badge.is-pers {
    background: rgba(224,82,82,0.15);
    border: 1px solid rgba(224,82,82,0.4);
    color: var(--red);
  }
  .pers-badge.is-pers-red {
    background: rgba(224,82,82,0.15);
    border: 1px solid rgba(224,82,82,0.4);
    color: var(--red);
  }
  .pers-badge.is-deperss {
    background: rgba(76,175,130,0.15);
    border: 1px solid rgba(76,175,130,0.35);
    color: var(--green);
  }

  .deperss-timer {
    margin-top: 6px;
    display: flex; align-items: center; gap: 6px;
    padding: 5px 8px;
    background: rgba(224,82,82,0.06);
    border: 1px solid rgba(224,82,82,0.2);
    border-radius: 6px;
    font-size: 11px; color: var(--red);
  }
  .deperss-timer span { font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 13px; }

  .card-body {
    padding: 14px;
    display: flex;
    flex-direction: column;
    height: calc(100% - 2px); /* account for accent bar */
  }

  .card-header { margin-bottom: 12px; }
  .timer-section { flex: 1; }

  .btn-action.pers-btn:hover {
    border-color: var(--blue); color: var(--blue); background: var(--blue-dim);
  }
  .btn-action.deperss-btn:hover {
    border-color: var(--green); color: var(--green); background: var(--green-dim);
  }
  .btn-action:disabled {
    opacity: 0.4; cursor: default;
  }
  .btn-action:disabled:hover {
    border-color: var(--border-accent); color: var(--text-dim); background: var(--surface2);
  }

  /* 4-day warning card */
  .card.warn4-card {
    border-color: rgba(155,127,232,0.35);
    box-shadow: 0 0 0 1px rgba(155,127,232,0.1);
  }

  /* ===== ALERT MODALS ===== */
  .alert-modal { max-width: 400px; }
  .alert-icon { display:flex; justify-content:center; align-items:center; margin-bottom:12px; color:var(--text-muted); }
  .alert-title {
    font-family: 'Rajdhani', sans-serif; font-size: 20px; font-weight: 700;
    text-align: center; margin-bottom: 6px;
  }
  .alert-body { font-size: 13px; color: var(--text-dim); text-align: center; line-height: 1.6; margin-bottom: 20px; }
  .alert-item-name { color: var(--text); font-weight: 600; }
  .btn-primary.alert-ok { background: var(--orange); }
  .btn-primary.alert-ok:hover { background: #f09050; }
  .btn-primary.alert-ok4 { background: var(--purple); }
  .btn-primary.alert-ok4:hover { background: #b08af4; }

  /* ---- MAIN TABS ---- */
  .main-tabs {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    position: sticky;
    top: 0;
    z-index: 400;
    background: var(--bg);
    margin: 0 -32px;
    padding: 10px 32px;
    border-bottom: 1px solid var(--border);
    width: calc(100% + 64px);
  }
  .main-tab {
    padding: 6px 16px;
    border: 1px solid transparent;
    border-radius: 20px;
    background: transparent;
    color: var(--text-muted);
    font-family: 'Inter', sans-serif;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: color 0.18s, background 0.18s, border-color 0.18s, box-shadow 0.18s;
    white-space: nowrap;
    position: relative;
  }
  .main-tab:hover {
    color: var(--text);
    background: rgba(255,255,255,0.055);
    border-color: rgba(255,255,255,0.07);
  }
  .main-tab:active { transform: scale(0.97); }
  .main-tab.active {
    color: var(--gold-light);
    background: rgba(200,150,46,0.1);
    border-color: rgba(200,150,46,0.22);
    box-shadow: 0 0 16px rgba(200,150,46,0.09), inset 0 1px 0 rgba(200,150,46,0.08);
  }
  .main-tab--admin {
    margin-left: auto;
    color: var(--text-muted);
    border-color: transparent;
    opacity: 0.45;
    font-size: 11px;
    letter-spacing: 0.3px;
  }
  .main-tab--admin:hover {
    color: var(--text-dim);
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.07);
    opacity: 0.8;
  }
  .main-tab--admin.active {
    color: var(--text-dim);
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.08);
    opacity: 1;
    box-shadow: none;
  }
  .secret-tab-header {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 20px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1px;
    color: var(--red);
  }
  .accent-secret  { background: linear-gradient(180deg, var(--red), rgba(224,82,82,0.4)); }
  .icon-secret    { background: rgba(224,82,82,0.1); border-color: rgba(224,82,82,0.2); }
  .cat-secret     { background: rgba(224,82,82,0.12); color: var(--red); border: 1px solid rgba(224,82,82,0.25); }
  .fill-secret    { background: linear-gradient(90deg, var(--red), #f07070); }
  .secret-img-placeholder {
    width: 42px; height: 42px; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(224,82,82,0.08); color: rgba(224,82,82,0.4);
  }
  .tab-page {
    display: none;
    width: 100%;
    padding: 20px 0 0;
    box-sizing: border-box;
  }
  .tab-page.active {
    display: block;
    animation: tabFadeIn 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  @keyframes tabFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* ---- INVENTORY MANAGER ---- */
  .inv-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 20px; gap: 12px; flex-wrap: wrap;
    width: 100%;
  }
  .inv-search-wrap { position: relative; display: flex; align-items: center; }
  .inv-search-wrap svg { position: absolute; left: 10px; color: var(--text-muted); pointer-events: none; }
  .inv-search { 
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 7px 12px 7px 32px;
    color: var(--text); font-size: 12px; outline: none; width: 200px;
    transition: border-color 0.2s;
  }
  .inv-search:focus { border-color: var(--gold); }
  .inv-search::placeholder { color: var(--text-muted); }

  .inv-grid {
    display: grid;
    --inv-size: 220px;
    grid-template-columns: repeat(auto-fill, minmax(var(--inv-size), 1fr));
    gap: 12px;
    justify-content: start;
    width: 100%;
    flex: 1;
  }

  .inv-zoom-control {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 6px 14px;
    border-radius: 20px;
  }
  .inv-zoom-range {
    -webkit-appearance: none;
    width: 100px;
    height: 4px;
    background: var(--surface3);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
  }
  .inv-zoom-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    background: var(--gold);
    border-radius: 50%;
    transition: transform 0.1s;
  }
  .inv-zoom-range::-webkit-slider-thumb:hover { transform: scale(1.2); }
  .inv-zoom-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.15s;
    opacity: 0.5;
  }
  .inv-zoom-btn:hover { color: var(--gold); background: var(--gold-dim); opacity: 1; }
  .inv-zoom-btn:active { transform: scale(0.9); }

  .inv-zoom-val { display: none; }

  @media (max-width: 600px)  { .inv-grid { grid-template-columns: repeat(2, 1fr); } }

  /* Inventory item card */
  .inv-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, opacity 0.15s ease;
    cursor: pointer;
    position: relative;
  }

  /* Drag handle */
  .inv-drag-handle {
    position: absolute;
    top: 7px; right: 7px;
    width: 22px; height: 22px;
    border-radius: 5px;
    background: rgba(0,0,0,0.35);
    display: flex; align-items: center; justify-content: center;
    opacity: 0;
    transition: opacity 0.15s;
    cursor: grab;
    z-index: 2;
    pointer-events: auto;
    color: var(--text-muted);
    font-size: 11px;
    letter-spacing: -1px;
  }
  .inv-card:hover .inv-drag-handle { opacity: 1; }
  .inv-drag-handle:active { cursor: grabbing; }

  /* Dragging state — keep space in grid but hide visually */
  .inv-card.dragging {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: none !important;
  }

  /* Smooth FLIP hint for non-dragging cards */
  .inv-card {
    will-change: transform;
  }

  /* Placeholder that appears where card will be dropped */
  .inv-drop-placeholder {
    background: rgba(200,150,46,0.06);
    border: 2px dashed rgba(200,150,46,0.4);
    border-radius: var(--radius-lg);
    transition: all 0.15s ease;
    pointer-events: none;
  }

  /* Drop target indicator */
  .inv-card.drag-over-before::before,
  .inv-card.drag-over-after::after {
    content: '';
    position: absolute;
    left: -8px; right: -8px;
    height: 3px;
    background: var(--gold);
    border-radius: 2px;
    box-shadow: 0 0 8px var(--gold);
    z-index: 10;
  }
  .inv-card.drag-over-before::before { top: -5px; }
  .inv-card.drag-over-after::after  { bottom: -5px; }
  .inv-card:hover {
    border-color: var(--border-accent);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.3);
  }
  .inv-card-img {
    width: 100%; height: calc(var(--inv-size) * 0.4);
    min-height: 60px;
    max-height: 160px;
    object-fit: contain;
    background: var(--surface2);
    display: flex; align-items: center; justify-content: center;
    font-size: calc(var(--inv-size) * 0.15); color: var(--text-muted);
    border-bottom: 1px solid var(--border);
  }
  .inv-card-img img { width: 100%; height: 100%; object-fit: contain; padding: 5px; }
  .inv-card-img--placeholder { display:flex; align-items:center; justify-content:center; color:var(--text-muted); opacity:0.4; }
  .inv-card-body { padding: 8px 10px; }
  .inv-card-name {
    font-family: 'Rajdhani', sans-serif;
    font-size: clamp(10px, calc(var(--inv-size) * 0.065), 14px);
    font-weight: 700; color: var(--text);
    margin-bottom: 5px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .inv-accounts-label {
    font-size: 10px; font-weight: 500; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 5px;
  }
  .inv-account-pills { display: flex; flex-wrap: wrap; gap: 4px; }
  .inv-account-pill {
    display: inline-flex; align-items: center; gap: 4px;
    background: var(--surface3);
    border: 1px solid var(--border-accent);
    border-radius: 20px;
    padding: 2px 8px;
    font-size: 11px; color: var(--gold-light); font-weight: 500;
  }
  .inv-card-actions {
    display: flex; gap: 5px; margin-top: 10px;
  }
  .inv-btn {
    flex: 1; padding: 6px 8px;
    border-radius: 6px; border: 1px solid var(--border-accent);
    background: var(--surface2); color: var(--text-muted);
    font-size: 11px; font-weight: 500; cursor: pointer;
    transition: all 0.15s;
    display: flex; align-items: center; justify-content: center; gap: 4px;
    font-family: 'Inter', sans-serif;
  }
  .inv-btn:hover { border-color: var(--gold); color: var(--gold-light); background: var(--gold-dim); }
  .inv-btn.danger:hover { border-color: var(--red); color: var(--red); background: var(--red-dim); }

  /* Inv detail modal */
  .inv-detail-img {
    width: 100%; max-height: 200px;
    object-fit: contain;
    background: var(--surface3);
    border-radius: var(--radius);
    display: flex; align-items: center; justify-content: center;
    font-size: 48px; margin-bottom: 14px;
    overflow: hidden;
  }
  .inv-detail-img img { width: 100%; max-height: 200px; object-fit: contain; padding: 8px; }

  .inv-accounts-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
  .inv-account-row {
    display: flex; align-items: center; justify-content: space-between;
    background: var(--surface3); border: 1px solid var(--border);
    border-radius: 6px; padding: 7px 10px; gap: 8px;
  }
  .inv-account-row-name {
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px; font-weight: 600; color: var(--gold-light);
    flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .inv-depot-qty {
    display: flex; align-items: center; gap: 4px; flex-shrink: 0;
  }
  .inv-depot-qty-btn {
    width: 22px; height: 22px; border-radius: 4px;
    border: 1px solid var(--border-accent); background: var(--surface2);
    color: var(--text-muted); font-size: 14px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    line-height: 1; transition: all 0.12s; padding: 0;
  }
  .inv-depot-qty-btn:hover { border-color: var(--gold); color: var(--gold-light); background: var(--gold-dim); }
  .inv-depot-qty-input {
    width: 52px; text-align: center;
    background: var(--surface2); border: 1px solid var(--border-accent); border-radius: 5px;
    color: var(--text); font-family: 'Rajdhani', sans-serif; font-size: 15px; font-weight: 700;
    padding: 2px 4px; outline: none; transition: border-color 0.15s;
  }
  .inv-depot-qty-input:focus { border-color: var(--gold); }
  .inv-depot-qty-val {
    font-family: 'Rajdhani', sans-serif; font-size: 15px; font-weight: 700;
    color: var(--text); min-width: 28px; text-align: center;
  }
  .inv-depot-qty-label { font-size: 10px; color: var(--text-muted); }
  .inv-account-row-edit {
    background: none; border: none; color: var(--text-muted);
    cursor: pointer; font-size: 12px; padding: 2px 4px;
    border-radius: 4px; transition: all 0.15s; flex-shrink: 0;
  }
  .inv-account-row-edit:hover { color: var(--blue); background: rgba(100,160,255,0.1); }
  .inv-account-row-del {
    background: none; border: none; color: var(--text-muted);
    cursor: pointer; font-size: 13px; padding: 2px 4px;
    border-radius: 4px; transition: all 0.15s; flex-shrink: 0;
  }
  .inv-account-row-del:hover { color: var(--red); background: var(--red-dim); }

  .inv-add-account-row {
    display: flex; gap: 6px; margin-bottom: 4px;
  }
  .inv-add-account-row input { flex: 1; }

  /* Image upload area */
  .img-upload-area {
    width: 100%; height: 90px;
    border: 2px dashed var(--border-accent);
    border-radius: var(--radius);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 4px; cursor: pointer;
    transition: all 0.15s;
    background: var(--surface3);
    font-size: 11px; color: var(--text-muted);
    position: relative; overflow: hidden;
  }
  .img-upload-area:hover { border-color: var(--gold); color: var(--gold); }
  .img-upload-area input[type=file] {
    position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%;
  }
  .img-upload-area .upload-icon { font-size: 20px; }
  .img-preview {
    width: 100%; height: 90px;
    object-fit: contain; border-radius: var(--radius);
    background: var(--surface3);
  }

  /* ---- EXPIRY CORNER REMINDER ---- */
  #expiryCornerReminder {
    position: fixed; bottom: 60px; left: 16px; z-index: 900;
    display: flex; flex-direction: column; gap: 6px;
    max-width: 220px; pointer-events: none;
  }
  .ecr-chip {
    background: rgba(15,16,20,0.92); border: 1px solid rgba(220,40,40,0.45);
    border-radius: 8px; padding: 7px 11px;
    display: flex; align-items: center; gap: 8px;
    pointer-events: auto; cursor: default;
    animation: ecr-in 0.25s ease-out both;
  }
  .ecr-chip.ecr-urgent { border-color: rgba(220,40,40,0.75); background: rgba(40,10,10,0.95); }
  .ecr-chip-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
  .ecr-chip-dot.urgent { background: var(--red); }
  .ecr-chip-dot.warn   { background: var(--orange); }
  .ecr-chip-text { font-size: 11px; line-height: 1.4; color: var(--text-dim); }
  .ecr-chip-name { font-weight: 600; color: var(--text-light); }
  .ecr-chip-time { color: var(--red); font-weight: 700; }
  .ecr-chip-time.warn { color: var(--orange); }
  .ecr-more { font-size: 10px; color: var(--text-muted); padding: 3px 11px; }
  @keyframes ecr-in { from { opacity:0; transform:translateX(-8px); } to { opacity:1; transform:translateX(0); } }
  .ecr-chip.ecr-missed { border-color:rgba(200,150,46,0.45); background:rgba(30,22,8,0.95); }
  .ecr-missed-label { color:var(--gold) !important; font-weight:700; }
  .ecr-chip-dismiss {
    background:none; border:none; color:var(--text-muted); cursor:pointer;
    font-size:11px; padding:0 0 0 4px; line-height:1; flex-shrink:0;
    transition:color .15s;
  }
  .ecr-chip-dismiss:hover { color:var(--text); }

  /* ---- FOOTER STATUS BAR ---- */
  .footer-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 32px;
    margin-top: auto;
    border-top: 1px solid rgba(255,255,255,0.06);
    font-size: 11px;
    color: var(--text-muted);
    width: 100%;
    box-sizing: border-box;
    background: var(--bg);
    position: relative;
    z-index: 50;
  }
  .footer-status-left { display: flex; align-items: center; gap: 12px; flex: 1; }
  .footer-status-right { font-family: 'Rajdhani', sans-serif; letter-spacing: 0.5px; flex: 1; text-align: right; }
  .footer-status-center { flex: 0 0 auto; }
  .footer-firebase-btn {
    background: none; border: none; cursor: pointer;
    font-family: 'Inter', sans-serif; font-size: 11px;
    color: var(--text-muted); padding: 6px 8px; margin: -6px -8px; transition: color 0.15s;
  }
  .footer-firebase-btn:hover { color: var(--gold); }
  .footer-changelog-btn { opacity: 0.7; }
  .footer-changelog-btn:hover { opacity: 1; color: var(--text-dim); }
  .footer-status-right { display: flex; align-items: center; gap: 12px; justify-content: flex-end; }
  .footer-online-wrap { position: relative; }
  .footer-online-btn::before {
    content: ''; display: inline-block; width: 6px; height: 6px;
    border-radius: 50%; background: var(--green); box-shadow: 0 0 4px var(--green);
    vertical-align: middle; margin-right: 4px;
    animation: conn-pulse 2s ease-in-out infinite;
  }
  .online-users-panel {
    display: none; position: absolute; bottom: calc(100% + 8px); right: 0;
    background: var(--surface2); border: 1px solid var(--border-accent);
    border-radius: var(--radius-md); min-width: 160px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.45); z-index: 200;
    padding: 6px 0;
  }
  .online-users-panel.open { display: block; }
  .ou-row {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 12px; font-size: 12px;
  }
  .ou-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
  .ou-name { color: var(--text); }
  .ou-anon { color: var(--text-muted); font-style: italic; }
  .ou-empty { padding: 7px 12px; font-size: 11px; color: var(--text-muted); font-style: italic; }

  /* ---- CHANGELOG MODAL ---- */
  .changelog-modal {
    max-width: 460px;
    max-height: 78vh;
    overflow-y: auto;
    width: 94vw;
  }
  .changelog-list { display: flex; flex-direction: column; gap: 0; margin-top: 4px; }
  .changelog-entry {
    padding: 13px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
  }
  .changelog-entry:last-child { border-bottom: none; }
  .changelog-meta {
    display: flex; align-items: center; gap: 8px; margin-bottom: 7px;
  }
  .changelog-version {
    font-family: 'Rajdhani', sans-serif;
    font-size: 13px; font-weight: 700;
    color: var(--gold-light); letter-spacing: 0.3px;
  }
  .changelog-tag {
    font-size: 10px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.5px;
    padding: 2px 7px; border-radius: 4px;
  }
  .tag-feature { background: rgba(80,160,100,0.15); color: #6ec67e; }
  .tag-fix     { background: rgba(224,82,82,0.12);  color: #e07070; }
  .tag-ui      { background: rgba(90,130,200,0.15); color: #7aa5d8; }
  .changelog-item {
    font-size: 12px; color: var(--text-dim);
    line-height: 1.55; padding-left: 14px;
    position: relative;
  }
  .changelog-item + .changelog-item { margin-top: 5px; }
  .changelog-item::before {
    content: ''; position: absolute; left: 1px; top: 7px;
    width: 4px; height: 4px; border-radius: 50%;
    background: rgba(255,255,255,0.18);
  }

  /* ---- CONNECTION STATUS ---- */
  .conn-pill {
    display: flex; align-items: center; gap: 6px;
    padding: 4px 10px 4px 8px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.07);
    background: rgba(255,255,255,0.03);
    transition: all 0.4s;
    cursor: default; white-space: nowrap;
  }
  .conn-dot {
    width: 6px; height: 6px; border-radius: 50%;
    flex-shrink: 0; transition: background 0.4s, box-shadow 0.4s;
  }
  .conn-pill #connLabel { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }

  .conn-pill.connected   { border-color: rgba(52,211,153,0.2); }
  .conn-pill.connected   .conn-dot { background: #34d399; box-shadow: 0 0 6px rgba(52,211,153,0.6); animation: conn-pulse 2.4s ease-in-out infinite; }
  .conn-pill.connected   #connLabel { color: #34d399; }

  .conn-pill.connecting  { border-color: rgba(200,150,46,0.2); }
  .conn-pill.connecting  .conn-dot { background: var(--gold-light); animation: conn-blink 0.8s ease-in-out infinite; }
  .conn-pill.connecting  #connLabel { color: var(--gold-light); }

  .conn-pill.offline     { border-color: rgba(255,255,255,0.05); }
  .conn-pill.offline     .conn-dot { background: rgba(255,255,255,0.2); }
  .conn-pill.offline     #connLabel { color: rgba(255,255,255,0.25); }

  .conn-pill.local       { border-color: rgba(255,255,255,0.05); }
  .conn-pill.local       .conn-dot { background: rgba(255,255,255,0.15); }
  .conn-pill.local       #connLabel { color: rgba(255,255,255,0.2); }

  @keyframes conn-pulse { 0%,100%{opacity:1;box-shadow:0 0 6px rgba(52,211,153,0.6)} 50%{opacity:0.6;box-shadow:0 0 2px rgba(52,211,153,0.2)} }
  @keyframes conn-blink { 0%,100%{opacity:1} 50%{opacity:0.2} }
  @keyframes pulse-red { from { opacity:1; } to { opacity:0.35; } }

  /* ---- FIREBASE SETUP MODAL ---- */
  .setup-step {
    display: flex; gap: 12px; margin-bottom: 14px;
    align-items: flex-start;
  }
  .setup-step-num {
    width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
    background: var(--gold-dim); border: 1px solid rgba(200,150,46,0.4);
    color: var(--gold-light); font-size: 11px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    margin-top: 1px;
  }
  .setup-step-body { flex: 1; font-size: 12px; color: var(--text-dim); line-height: 1.6; }
  .setup-step-body strong { color: var(--text); }
  .setup-step-body code {
    background: var(--surface3); border: 1px solid var(--border-accent);
    border-radius: 4px; padding: 1px 5px; font-size: 11px;
    color: var(--teal); font-family: monospace;
  }
  .setup-divider {
    height: 1px; background: var(--border); margin: 16px 0;
  }

  /* ---- GENDER BADGE & TOGGLE ---- */
  .gender-badge {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 10px; font-weight: 700;
    padding: 2px 6px 2px 5px; border-radius: 10px;
    text-transform: uppercase; letter-spacing: 0.5px;
    flex-shrink: 0;
  }
  .gender-badge img { display: block; flex-shrink: 0; }
  .gender-badge.F {
    background: rgba(236,100,166,0.15);
    border: 1px solid rgba(236,100,166,0.4);
    color: #ec64a6;
  }
  .gender-badge.M {
    background: rgba(91,155,213,0.15);
    border: 1px solid rgba(91,155,213,0.4);
    color: var(--blue);
  }

  .form-slide {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    margin-bottom: 0;
    transition: max-height 0.25s ease, opacity 0.2s ease, margin-bottom 0.25s ease;
  }
  .form-slide.slide-visible {
    max-height: 80px;
    opacity: 1;
    margin-bottom: 14px;
  }
  #szImageGroup.slide-visible {
    max-height: 160px;
  }

  .gender-toggle {
    display: flex; gap: 6px;
  }
  .gender-btn {
    flex: 1; padding: 8px 12px;
    border-radius: 7px; border: 1px solid var(--border-accent);
    background: var(--surface3); color: var(--text-muted);
    font-family: 'Rajdhani', sans-serif; font-size: 14px; font-weight: 700;
    cursor: pointer; transition: all 0.15s; letter-spacing: 0.5px;
    display: flex; align-items: center; justify-content: center; gap: 5px;
  }
  .gender-btn:hover { border-color: var(--border-accent); color: var(--text); }
  .gender-btn.sel-F {
    border-color: #ec64a6; background: rgba(236,100,166,0.12); color: #ec64a6;
  }
  .gender-btn.sel-M {
    border-color: var(--blue); background: var(--blue-dim); color: var(--blue);
  }
  .expiry-widget {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    margin-bottom: 16px;
    overflow: hidden;
    transition: border-color 0.2s ease;
  }

  .expiry-widget-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    cursor: pointer;
    user-select: none;
    transition: background .15s;
  }

  .expiry-widget-header:hover {
    background: rgba(255,255,255,.02);
  }

  .expiry-widget-title {
    font-family: 'Rajdhani', sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-dim);
    flex: 1;
  }

  .sidebar-total-badge {
    font-family: 'Rajdhani', sans-serif;
    font-size: 13px;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: 10px;
    background: var(--gold-dim);
    border: 1px solid rgba(200,150,46,0.3);
    color: var(--gold-light);
  }

  .sidebar-cat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 14px;
    border-bottom: 1px solid var(--border);
    transition: background 0.12s;
    cursor: pointer;
  }

  .sidebar-cat-row:last-child { border-bottom: none; }
  .sidebar-cat-row:hover { background: rgba(255,255,255,0.03); }

  .sidebar-cat-left {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .sidebar-cat-icon {
    width: 24px; height: 24px;
    border-radius: 5px;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
  }

  .sidebar-cat-name {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-dim);
  }

  .sidebar-cat-count {
    font-family: 'Rajdhani', sans-serif;
    font-size: 15px;
    font-weight: 700;
  }

  /* Urgency threshold rows */
  .sidebar-cat-row.has-expired  .sidebar-cat-count { color: var(--red); }
  .sidebar-cat-row.has-urgent   .sidebar-cat-count { color: var(--orange); }
  .sidebar-cat-row.has-warn     .sidebar-cat-count { color: var(--gold-light); }
  .sidebar-cat-row.has-ok       .sidebar-cat-count { color: var(--text-muted); }

  .sidebar-empty {
    padding: 20px 14px;
    text-align: center;
    font-size: 11px;
    color: var(--text-muted);
  }

  .sidebar-chevron {
    transition: transform .2s ease;
    opacity: .4;
    flex-shrink: 0;
  }

  .expiry-widget.collapsed .sidebar-chevron {
    transform: rotate(-90deg);
  }


  .expiry-widget .sidebar-body {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    transition: max-height .25s ease, opacity .2s ease, padding .25s ease;
  }

  .expiry-widget.collapsed .sidebar-body {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-top-color: transparent;
  }

  .expiry-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: all .15s;
  }

  .expiry-chip:hover {
    border-color: rgba(255,255,255,.15);
    background: var(--surface3);
  }

  .expiry-chip.active {
    border-color: rgba(200,150,46,.4);
    background: rgba(200,150,46,.08);
    box-shadow: 0 0 8px rgba(200,150,46,.1);
  }

  .expiry-chip-count {
    font-family: 'Rajdhani', sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
  }

  .expiry-chip-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-dim);
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .expiry-chip-time {
    font-family: 'Rajdhani', sans-serif;
    font-size: 11px;
    color: var(--text-muted);
    opacity: .7;
  }

  /* Threshold dot */
  .sidebar-dot {
    width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
    margin-left: 4px;
  }

  @media (max-width: 900px) {
    .expiry-widget .sidebar-body { gap: 6px; }
  }

  @media (max-width: 600px) {
    .grid { grid-template-columns: 1fr; }
    .stats-bar { gap: 10px; }
  }

  
  /* ============ SPAWN TAB v2 ============ */
  .spawn-layout { display:flex; gap:20px; align-items:flex-start; flex-wrap:wrap; padding:2px 0; justify-content:center; }
  .spawn-section-title {
    font-family:'Rajdhani',sans-serif; font-size:11px; font-weight:700;
    text-transform:uppercase; letter-spacing:1px; color:var(--text-muted);
    margin-bottom:8px; padding-bottom:5px; border-bottom:1px solid var(--border);
    display:flex; align-items:center; justify-content:space-between;
  }
  .spawn-popout-btn {
    background:none; border:1px solid var(--border); border-radius:4px;
    padding:1px 5px; font-size:11px; color:var(--text-muted);
    cursor:pointer; line-height:1.4; text-transform:none;
    font-family:'Inter',sans-serif; font-weight:400;
    transition:all 0.15s ease; flex-shrink:0;
  }
  .spawn-popout-btn:hover { border-color:var(--gold); color:var(--gold-light); }
  /* Fullscreen pop-out */
  .spawn-fullscreen-overlay {
    position:fixed; inset:0; z-index:8000;
    background:var(--bg);
    display:flex; flex-direction:column;
    opacity:0; transform:scale(0.97);
    transition:opacity .2s ease, transform .2s ease;
  }
  .spawn-fullscreen-overlay.open { opacity:1; transform:scale(1); }
  .spawn-fullscreen-bar {
    display:flex; align-items:center; justify-content:space-between;
    padding:12px 20px; background:var(--surface);
    border-bottom:1px solid var(--border-accent);
    flex-shrink:0;
  }
  .spawn-fullscreen-title {
    font-family:'Rajdhani',sans-serif; font-size:18px; font-weight:700;
    text-transform:uppercase; letter-spacing:1px; color:var(--gold-light);
  }
  .spawn-fullscreen-close {
    background:none; border:1px solid var(--border); border-radius:6px;
    color:var(--text-muted); cursor:pointer; font-size:18px; line-height:1;
    padding:4px 10px; transition:all .15s;
  }
  .spawn-fullscreen-close:hover { color:var(--text); border-color:var(--red); background:var(--red-dim); }
  .spawn-fullscreen-body {
    flex:1; overflow:auto; display:flex;
    align-items:center; justify-content:center; padding:20px;
  }
  .spawn-popout-placeholder {
    padding:24px; text-align:center; color:var(--text-muted); font-size:12px;
    border:1px dashed var(--border); border-radius:8px; margin:8px 0;
    font-family:'Rajdhani',sans-serif; letter-spacing:0.5px;
  }
  .spawn-map-wrap.spawn-map-fullscreen {
    width:auto; max-width:90vw; max-height:85vh;
  }
  .spawn-map-wrap.spawn-map-fullscreen .spawn-map-img {
    width:auto !important; max-width:90vw !important; max-height:85vh !important; object-fit:contain;
  }
  .spawn-map-wrap {
    position:relative; display:inline-block; flex-shrink:0;
    border:1px solid var(--border); border-radius:var(--radius); overflow:hidden;
    user-select:none;
  }
  .spawn-map-img { display:block; width:460px; height:auto; }
  /* Map dots: squares aligned with the blue dungeon tile markers on the map */
  .spawn-room-dot {
    position:absolute; transform:translate(-50%,-50%);
    border-radius:2px; cursor:default;
    display:flex; align-items:center; justify-content:center;
    font-family:'Rajdhani',sans-serif; font-weight:700;
    color:rgba(220,230,255,0.82); line-height:1; pointer-events:none;
    background:rgba(20,25,40,0.72); border:1px solid rgba(180,200,255,0.18);
    box-sizing:border-box;
    font-size: calc(12px * var(--dot-scale, 1));
    width:  calc(26px * var(--dot-scale, 1));
    height: calc(26px * var(--dot-scale, 1));
    transition: width .2s, height .2s, font-size .2s, border-color .15s, box-shadow .15s;
  }
  .spawn-room-dot.boss {
    color:var(--orange); cursor:pointer; pointer-events:auto;
    font-size: calc(19px * var(--dot-scale, 1));
    width:  calc(30px * var(--dot-scale, 1));
    height: calc(30px * var(--dot-scale, 1));
    background:rgba(10,11,14,0.82);
    border:1.5px solid rgba(224,125,64,0.55);
    border-radius:2px;
    transition:border-color .12s, box-shadow .12s, width .2s, height .2s, font-size .2s;
  }
  .spawn-room-dot.boss-f { color:var(--gold-light); border-color:rgba(200,150,46,0.7); width:calc(17px * var(--dot-scale,1)); height:calc(22px * var(--dot-scale,1)); font-size:calc(19px * var(--dot-scale,1)); }
  .spawn-room-dot.boss:hover { border-color:var(--orange); box-shadow:0 0 10px rgba(224,125,64,0.6); }

  /* Active find — same size as boss square, only color/glow changes */
  .spawn-room-dot.has-data {
    font-size:calc(19px * var(--dot-scale,1)); font-weight:900;
    border:2px solid var(--green) !important; color:var(--green) !important;
    background:rgba(10,11,14,0.92) !important;
    box-shadow:0 0 0 3px rgba(76,175,130,0.2), 0 0 14px rgba(76,175,130,0.5);
    animation: dot-pulse-sef 2s ease-in-out infinite;
    z-index:5;
  }
  .spawn-room-dot.has-data-gen {
    font-size:calc(19px * var(--dot-scale,1)); font-weight:900;
    border:2px solid #4a9eff !important; color:#4a9eff !important;
    background:rgba(10,11,14,0.92) !important;
    box-shadow:0 0 0 3px rgba(74,158,255,0.2), 0 0 14px rgba(74,158,255,0.5);
    animation: dot-pulse-gen 2s ease-in-out infinite;
    z-index:5;
  }
  @keyframes dot-pulse-sef {
    0%,100% { box-shadow:0 0 0 3px rgba(76,175,130,0.2), 0 0 14px rgba(76,175,130,0.5); }
    50%      { box-shadow:0 0 0 5px rgba(76,175,130,0.35), 0 0 22px rgba(76,175,130,0.7); }
  }
  @keyframes dot-pulse-gen {
    0%,100% { box-shadow:0 0 0 3px rgba(74,158,255,0.2), 0 0 14px rgba(74,158,255,0.5); }
    50%      { box-shadow:0 0 0 5px rgba(74,158,255,0.35), 0 0 22px rgba(74,158,255,0.7); }
  }
  .spawn-room-dot.has-data-dead {
    border-color:var(--red); color:var(--red);
    box-shadow:0 0 6px rgba(224,82,82,0.3); opacity:0.55;
    animation: none;
  }

  /* ── Mixed room states (sef + gen in same room) ── */
  /* Equal sef & gen → purple/mov */
  .spawn-room-dot.has-data-mixed-equal {
    font-size:calc(19px * var(--dot-scale,1)); font-weight:900;
    border:2px solid #b388ff !important; color:#ce93d8 !important;
    background:rgba(156,39,176,0.18) !important;
    box-shadow:0 0 0 3px rgba(179,136,255,0.2), 0 0 14px rgba(179,136,255,0.5);
    animation: dot-pulse-mixed-equal 2s ease-in-out infinite;
    z-index:5;
  }
  @keyframes dot-pulse-mixed-equal {
    0%,100% { box-shadow:0 0 0 3px rgba(179,136,255,0.2), 0 0 14px rgba(179,136,255,0.5); }
    50%      { box-shadow:0 0 0 5px rgba(179,136,255,0.35), 0 0 22px rgba(179,136,255,0.7); }
  }

  /* More sef than gen → gold with flame effects */
  .spawn-room-dot.has-data-mixed-sef {
    font-size:calc(19px * var(--dot-scale,1)); font-weight:900;
    border:2px solid #ffd54f !important; color:#ffb300 !important;
    background:rgba(255,183,0,0.15) !important;
    box-shadow:0 0 0 3px rgba(255,183,0,0.25), 0 0 16px rgba(255,140,0,0.5), 0 0 30px rgba(255,80,0,0.2);
    animation: dot-pulse-flames 1.2s ease-in-out infinite;
    z-index:5;
  }
  @keyframes dot-pulse-flames {
    0%   { box-shadow:0 0 0 3px rgba(255,183,0,0.25), 0 0 16px rgba(255,140,0,0.5), 0 0 30px rgba(255,80,0,0.15); border-color:#ffd54f; }
    25%  { box-shadow:0 0 0 4px rgba(255,140,0,0.35), 0 0 22px rgba(255,100,0,0.6), 0 0 40px rgba(255,50,0,0.25); border-color:#ffb300; }
    50%  { box-shadow:0 0 0 5px rgba(255,120,0,0.4), 0 0 28px rgba(255,80,0,0.7), 0 0 50px rgba(255,30,0,0.3); border-color:#ff8f00; }
    75%  { box-shadow:0 0 0 4px rgba(255,160,0,0.3), 0 0 20px rgba(255,120,0,0.55), 0 0 35px rgba(255,60,0,0.2); border-color:#ffb300; }
    100% { box-shadow:0 0 0 3px rgba(255,183,0,0.25), 0 0 16px rgba(255,140,0,0.5), 0 0 30px rgba(255,80,0,0.15); border-color:#ffd54f; }
  }
  /* Flame particle pseudo-element */
  .spawn-room-dot.has-data-mixed-sef::before {
    content:''; position:absolute; inset:-6px; border-radius:4px;
    background: radial-gradient(ellipse at 50% 100%, rgba(255,140,0,0.25) 0%, rgba(255,80,0,0.08) 50%, transparent 70%);
    animation: flame-flicker 0.8s ease-in-out infinite alternate;
    pointer-events:none; z-index:-1;
  }
  @keyframes flame-flicker {
    0%   { opacity:0.6; transform:scaleY(1) scaleX(1); }
    50%  { opacity:1; transform:scaleY(1.2) scaleX(0.9); }
    100% { opacity:0.7; transform:scaleY(0.95) scaleX(1.05); }
  }

  /* More gen than sef → burgundy */
  .spawn-room-dot.has-data-mixed-gen {
    font-size:calc(19px * var(--dot-scale,1)); font-weight:900;
    border:2px solid #c62828 !important; color:#ef5350 !important;
    background:rgba(136,14,79,0.22) !important;
    box-shadow:0 0 0 3px rgba(198,40,40,0.2), 0 0 14px rgba(136,14,79,0.5);
    animation: dot-pulse-burgundy 2s ease-in-out infinite;
    z-index:5;
  }
  @keyframes dot-pulse-burgundy {
    0%,100% { box-shadow:0 0 0 3px rgba(198,40,40,0.2), 0 0 14px rgba(136,14,79,0.5); }
    50%      { box-shadow:0 0 0 5px rgba(198,40,40,0.35), 0 0 22px rgba(136,14,79,0.7); }
  }

  /* ── Royal room: 3+ sef, 0 gen → precious diamond/gold ── */
  .spawn-room-dot.has-data-royal {
    font-size:calc(19px * var(--dot-scale,1)); font-weight:900;
    border:3px solid #ffd700 !important; color:#fff8e1 !important;
    background: linear-gradient(135deg, rgba(255,215,0,0.25) 0%, rgba(255,140,0,0.18) 40%, rgba(255,215,0,0.3) 100%) !important;
    box-shadow:
      0 0 0 4px rgba(255,215,0,0.35),
      0 0 22px rgba(255,215,0,0.6),
      0 0 45px rgba(255,140,0,0.3),
      0 0 70px rgba(255,80,0,0.15),
      inset 0 0 14px rgba(255,215,0,0.2);
    animation: dot-pulse-royal 2s ease-in-out infinite;
    z-index:6; overflow:visible;
  }
  .spawn-room-dot.has-data-royal::before {
    content:''; position:absolute; inset:-8px; border-radius:4px;
    background: radial-gradient(ellipse at 50% 100%, rgba(255,140,0,0.3) 0%, rgba(255,80,0,0.12) 50%, transparent 70%);
    animation: royal-flame-flicker 0.8s ease-in-out infinite alternate;
    pointer-events:none; z-index:-1;
  }
  @keyframes royal-flame-flicker {
    0%   { opacity:0.5; transform:scaleY(1) scaleX(1); }
    50%  { opacity:1; transform:scaleY(1.3) scaleX(0.85); }
    100% { opacity:0.6; transform:scaleY(0.9) scaleX(1.1); }
  }
  @keyframes dot-pulse-royal {
    0%,100% {
      box-shadow: 0 0 0 4px rgba(255,215,0,0.35), 0 0 22px rgba(255,215,0,0.6), 0 0 45px rgba(255,140,0,0.3), 0 0 70px rgba(255,80,0,0.15), inset 0 0 14px rgba(255,215,0,0.2);
      border-color:#ffd700;
    }
    25% {
      box-shadow: 0 0 0 6px rgba(255,215,0,0.45), 0 0 32px rgba(255,200,0,0.75), 0 0 60px rgba(255,120,0,0.4), 0 0 85px rgba(255,60,0,0.2), inset 0 0 18px rgba(255,215,0,0.25);
      border-color:#ffec6e;
    }
    50% {
      box-shadow: 0 0 0 5px rgba(255,190,0,0.4), 0 0 28px rgba(255,180,0,0.65), 0 0 50px rgba(255,100,0,0.35), 0 0 75px rgba(255,50,0,0.18), inset 0 0 16px rgba(255,215,0,0.22);
      border-color:#ffc107;
    }
    75% {
      box-shadow: 0 0 0 7px rgba(255,215,0,0.5), 0 0 35px rgba(255,210,0,0.8), 0 0 65px rgba(255,140,0,0.45), 0 0 90px rgba(255,70,0,0.22), inset 0 0 20px rgba(255,215,0,0.28);
      border-color:#ffe04a;
    }
  }

  /* Crown above the room */
  .spawn-royal-crown {
    position:absolute; left:50%; top:-18px; transform:translateX(-50%);
    font-size:16px; line-height:1; pointer-events:none; z-index:12;
    animation: royal-crown-float 2s ease-in-out infinite;
    filter: drop-shadow(0 0 4px rgba(255,215,0,0.7)) drop-shadow(0 0 8px rgba(255,170,0,0.4));
  }
  @keyframes royal-crown-float {
    0%,100% { transform:translateX(-50%) translateY(0); }
    50%     { transform:translateX(-50%) translateY(-3px); }
  }

  /* Reward intensity — sef-heavy rooms glow brighter, gen-heavy rooms dim */
  .spawn-room-dot.reward-low {
    box-shadow: 0 0 6px rgba(76,175,130,.35), inset 0 0 3px rgba(76,175,130,.1);
  }
  .spawn-room-dot.reward-med {
    box-shadow: 0 0 12px rgba(76,175,130,.5), 0 0 24px rgba(76,175,130,.2), inset 0 0 5px rgba(76,175,130,.15);
    border-color: rgba(76,175,130,.7) !important;
  }
  .spawn-room-dot.reward-high {
    box-shadow: 0 0 16px rgba(76,220,140,.6), 0 0 32px rgba(76,175,130,.3), inset 0 0 8px rgba(76,220,140,.2);
    border-color: rgba(76,220,140,.85) !important;
    animation: reward-pulse 2s ease-in-out infinite;
  }
  @keyframes reward-pulse {
    0%,100% { box-shadow: 0 0 16px rgba(76,220,140,.6), 0 0 32px rgba(76,175,130,.3); }
    50% { box-shadow: 0 0 22px rgba(76,220,140,.8), 0 0 40px rgba(76,175,130,.4); }
  }
  .spawn-room-dot.reward-bad {
    opacity:1; filter:none;
    box-shadow: 0 0 0 3px rgba(74,158,255,0.2), 0 0 14px rgba(74,158,255,0.5);
  }
  .spawn-room-dot.reward-bad-high {
    opacity:1; filter:none;
    box-shadow: 0 0 0 3px rgba(74,158,255,0.25), 0 0 18px rgba(74,158,255,0.6);
  }

  /* Gen Fals indicator on map rooms 18 / F */
  .spawn-room-dot.has-genfals {
    box-shadow: 0 0 8px rgba(224,82,82,0.5), 0 0 16px rgba(224,82,82,0.25) !important;
  }
  .spawn-gf-indicator {
    position:absolute; left:50%; transform:translateX(-50%);
    font-family:'Rajdhani',sans-serif; font-size:8px; font-weight:700;
    color:var(--red); background:rgba(224,82,82,0.15);
    border:1px solid rgba(224,82,82,0.4); border-radius:3px;
    padding:0 3px; white-space:nowrap; pointer-events:none; z-index:14;
    line-height:1.3; letter-spacing:0.3px;
    animation: gf-pulse 1.5s ease-in-out infinite;
  }
  /* When badge is present, GF indicator goes below it; otherwise below the dot */
  .spawn-room-dot:not(:has(.spawn-room-badge)) > .spawn-gf-indicator {
    top:100%; margin-top:2px;
  }
  .spawn-room-dot:has(.spawn-room-badge) > .spawn-gf-indicator {
    top:calc(100% + 17px);
  }
  @keyframes gf-pulse {
    0%,100% { opacity:1; }
    50% { opacity:0.6; }
  }

  /* ── Map pins (hidden/ascuns markers) ── */
  .spawn-pin {
    position:absolute; transform:translate(-50%,-100%);
    pointer-events:auto; cursor:pointer; z-index:20;
    filter:drop-shadow(0 2px 4px rgba(0,0,0,0.5));
    transition:transform 0.15s ease;
  }
  .spawn-pin:hover { transform:translate(-50%,-100%) scale(1.15); }
  .spawn-pin-dead { opacity:0.4; filter:grayscale(1); }
  .spawn-pin-label {
    position:absolute; left:50%; top:100%; transform:translateX(-50%);
    font-family:'Rajdhani',sans-serif; font-size:9px; font-weight:700;
    color:var(--red); background:rgba(10,11,14,0.9);
    border:1px solid rgba(224,82,82,0.5); border-radius:3px;
    padding:0 3px; white-space:nowrap; line-height:1.4;
  }

  /* Pin button in gheata table */
  .spawn-pin-btn {
    background:none; border:1px solid rgba(255,255,255,0.15); border-radius:4px;
    color:var(--text-muted); cursor:pointer; padding:2px 5px;
    display:inline-flex; align-items:center; justify-content:center;
    transition:all 0.15s ease;
  }
  .spawn-pin-btn:hover { border-color:rgba(255,255,255,.4); color:var(--text); }
  .spawn-pin-btn.pin-active {
    border-color:currentColor;
    background:rgba(255,255,255,0.06);
  }
  .spawn-pin-btn.pin-placing {
    color:var(--orange); border-color:var(--orange);
    background:rgba(224,125,64,0.15);
    animation:pin-blink 0.8s ease-in-out infinite;
  }
  @keyframes pin-blink {
    0%,100% { opacity:1; }
    50% { opacity:0.5; }
  }

  /* Gheata state: hidden/ascuns */
  .st-hidden { color:var(--red); font-weight:600; }

  /* Sparkle particles around royal room */
  .spawn-royal-sparkle {
    position:absolute; inset:-14px; pointer-events:none; z-index:7; overflow:visible;
  }
  .spawn-royal-sparkle::before,
  .spawn-royal-sparkle::after {
    content:'✦'; position:absolute; font-size:11px; color:#ffd700;
    filter: drop-shadow(0 0 3px rgba(255,215,0,0.8));
    animation: sparkle-twinkle 1.2s ease-in-out infinite;
  }
  .spawn-royal-sparkle::before { top:-8px; right:-10px; animation-delay:0s; }
  .spawn-royal-sparkle::after  { bottom:-6px; left:-10px; animation-delay:0.5s; }
  @keyframes sparkle-twinkle {
    0%,100% { opacity:0.2; transform:scale(0.6) rotate(0deg); }
    50%     { opacity:1; transform:scale(1.3) rotate(20deg); }
  }

  /* Royal overrides ALL reward classes */
  .spawn-room-dot.has-data-royal.reward-low,
  .spawn-room-dot.has-data-royal.reward-med,
  .spawn-room-dot.has-data-royal.reward-high,
  .spawn-room-dot.has-data-royal.reward-bad,
  .spawn-room-dot.has-data-royal.reward-bad-high {
    border-color: #ffd700 !important;
    opacity: 1 !important;
    filter: none !important;
  }

  /* Badge style for royal */
  .spawn-room-dot.has-data-royal .spawn-room-badge {
    font-size:9px; padding:1px 5px;
    border-color:rgba(255,215,0,0.4);
    background:rgba(10,11,14,0.95);
  }

  /* CH highlight for royal in tables */
  .spawn-ch-label.ch-highlight-royal {
    background: linear-gradient(90deg, rgba(255,215,0,0.15), rgba(255,170,0,0.1)) !important;
    color:#ffd700 !important;
    border-left:3px solid #ffd700 !important;
  }

  /* Mixed room badges get bigger too */
  .spawn-room-dot.has-data-mixed-equal .spawn-room-badge,
  .spawn-room-dot.has-data-mixed-sef .spawn-room-badge,
  .spawn-room-dot.has-data-mixed-gen .spawn-room-badge {
    font-size:9px; padding:1px 5px;
    border-color:rgba(255,255,255,0.2);
  }

  /* Individual CH badge colors under room dots */
  .spawn-badge-prefix { color:rgba(180,190,210,0.5); margin-right:1px; font-size:7px; }
  .spawn-badge-ch { margin:0 1px; }
  .spawn-badge-ch.badge-sef { color:var(--green); }
  .spawn-badge-ch.badge-gen { color:#4a9eff; }
  .spawn-badge-ch.badge-dead { color:var(--red); opacity:0.6; }

  /* CH highlight for mixed rooms in tables */
  .spawn-ch-label.ch-highlight-mixed-equal { background:rgba(179,136,255,0.2)!important; color:#ce93d8!important; border-left:3px solid #b388ff!important; }
  .spawn-ch-label.ch-highlight-mixed-sef { background:rgba(255,183,0,0.15)!important; color:#ffb300!important; border-left:3px solid #ffd54f!important; }
  .spawn-ch-label.ch-highlight-mixed-gen { background:rgba(136,14,79,0.18)!important; color:#ef5350!important; border-left:3px solid #c62828!important; }

  /* Cam tags for mixed rooms in tables */
  .spawn-cam-tag.tag-mixed-equal { background:rgba(179,136,255,0.15); color:#ce93d8; border-color:rgba(179,136,255,0.3); }
  .spawn-cam-tag.tag-mixed-sef-gold { background:rgba(255,183,0,0.12); color:#ffb300; border-color:rgba(255,183,0,0.3); }
  .spawn-cam-tag.tag-mixed-gen-burgundy { background:rgba(136,14,79,0.15); color:#ef5350; border-color:rgba(198,40,40,0.3); }

  .spawn-room-badge {
    position:absolute; transform:translate(-50%,0); top:calc(100% + 3px); left:50%;
    font-family:'Rajdhani',sans-serif; font-size:8px; font-weight:700;
    background:rgba(10,11,14,0.95); border-radius:3px; padding:1px 4px;
    white-space:nowrap; pointer-events:none; z-index:10;
    border:1px solid rgba(255,255,255,0.12); letter-spacing:0.3px;
  }
  .spawn-room-dot.has-data .spawn-room-badge,
  .spawn-room-dot.has-data-gen .spawn-room-badge {
    font-size:9px; padding:1px 5px;
    border-color:rgba(255,255,255,0.2);
  }
  .spawn-popover {
    position:fixed; z-index:5000;
    background:var(--surface2); border:1px solid var(--border-accent);
    border-radius:var(--radius-lg); padding:14px 16px; width:220px;
    box-shadow:0 8px 32px rgba(0,0,0,0.55);
    opacity:0; pointer-events:none; transform:translateY(6px) scale(0.96);
    transition:opacity 0.2s ease, transform 0.2s cubic-bezier(0.16,1,0.3,1);
  }
  .spawn-popover.open { opacity:1; pointer-events:all; transform:translateY(0) scale(1); }
  .spawn-popover-title {
    font-family:'Rajdhani',sans-serif; font-size:14px; font-weight:700;
    color:var(--gold-light); margin-bottom:12px;
    display:flex; justify-content:space-between; align-items:center;
  }
  .spawn-popover-close { background:none; border:none; color:var(--text-muted); cursor:pointer; font-size:16px; line-height:1; padding:0 2px; }
  .spawn-popover-close:hover { color:var(--text); }
  .spawn-pop-label { font-size:10px; text-transform:uppercase; letter-spacing:0.4px; color:var(--text-muted); margin-bottom:5px; }
  .spawn-pop-btns { display:flex; gap:5px; flex-wrap:wrap; margin-bottom:12px; }
  .spawn-pop-btn {
    padding:4px 9px; border-radius:5px;
    border:1px solid var(--border-accent); background:var(--surface3);
    color:var(--text-dim); font-size:11px; font-weight:600;
    cursor:pointer; transition:all .12s; font-family:'Rajdhani',sans-serif;
  }
  .spawn-pop-btn:hover { border-color:var(--gold); color:var(--gold-light); }
  .spawn-pop-btn.active-sef { border-color:var(--green); background:rgba(76,175,130,0.18); color:var(--green); }
  .spawn-pop-btn.active-gen { border-color:#4a9eff; background:rgba(74,158,255,0.18); color:#4a9eff; }
  .spawn-pop-btn.active-ch  { border-color:var(--blue); background:rgba(91,155,213,0.18); color:var(--blue); }
  .spawn-pop-btn.btn-clear  { border-color:var(--red); color:var(--red); width:100%; background:var(--surface3); }
  .spawn-pop-btn.btn-clear:hover { background:var(--red-dim); }
  .spawn-tables-col { display:flex; flex-direction:column; gap:18px; }
  .spawn-table { width:100%; border-collapse:collapse; font-size:14px; min-width:260px; }
  .spawn-table th {
    background:var(--surface2); color:var(--text-muted);
    font-family:'Rajdhani',sans-serif; font-size:13px; font-weight:700;
    text-transform:uppercase; letter-spacing:0.4px;
    padding:8px 10px; border:1px solid var(--border); white-space:nowrap;
  }
  .spawn-table td { border:1px solid var(--border); padding:7px 10px; vertical-align:middle; background:var(--surface); word-break:break-word; transition:background 0.15s ease, filter 0.15s ease; }
  .spawn-table tr:nth-child(even) td { background:var(--surface2); }
  .spawn-ch-label {
    font-family:'Rajdhani',sans-serif; font-size:15px; font-weight:700;
    color:var(--text-dim); text-align:center; white-space:nowrap;
    padding:7px 12px !important; width:52px;
    transition:color .15s ease;
  }
  .spawn-ch-label:hover { color:var(--gold-light); }
  .spawn-state-cell {
    text-align:center; cursor:pointer; user-select:none; white-space:nowrap;
    font-family:'Rajdhani',sans-serif; font-size:14px; font-weight:600;
    letter-spacing:0.3px; transition:background .15s ease,color .15s ease,filter .15s ease;
    min-width:70px; padding:7px 10px !important;
  }
  .spawn-state-cell:hover { filter:brightness(1.2); }
  /* Dead icon — red tint matching --red (#e05252) */
  .spawn-dead-icon { width:14px; height:14px; object-fit:contain; vertical-align:middle; margin-right:2px; filter:brightness(0) invert(44%) sepia(72%) saturate(600%) hue-rotate(314deg) brightness(1.1) contrast(90%); }
  .spawn-sef-icon { width:22px; height:22px; object-fit:contain; vertical-align:middle; margin-right:3px; }
  .spawn-state-cell.st-empty { color:var(--text-muted); }
  .spawn-state-cell.st-sef  { background:rgba(76,175,130,0.18)!important; color:var(--green)!important; border-color:rgba(76,175,130,0.35)!important; }
  .spawn-state-cell.st-gen  { background:rgba(74,158,255,0.18)!important; color:#4a9eff!important; border-color:rgba(74,158,255,0.35)!important; }
  .spawn-cameras-cell { font-family:'Rajdhani',sans-serif; font-size:19px; color:var(--text-dim); padding:6px 8px !important; vertical-align:middle; line-height:1.6; }
  .spawn-cam-tag {
    display:inline-flex; align-items:center; justify-content:center;
    margin:2px 3px; padding:3px 8px;
    border-radius:4px; font-size:19px; font-weight:700;
    background:rgba(76,175,130,0.15); color:var(--green);
    border:1px solid rgba(76,175,130,0.3);
    line-height:1; transition:opacity .2s ease, transform .2s ease;
  }
  .spawn-cam-tag.tag-gen { background:rgba(74,158,255,0.15); color:#4a9eff; border-color:rgba(74,158,255,0.3); }
  .spawn-cam-tag.tag-dead { opacity:0.4; text-decoration:line-through; }

  .spawn-gf-btn {
    display:inline-flex; align-items:center; justify-content:center;
    width:28px; height:24px; margin:0 2px;
    border-radius:5px; border:1px solid var(--border-accent);
    background:var(--surface3); color:var(--text-dim);
    font-family:"Rajdhani",sans-serif; font-size:12px; font-weight:700;
    cursor:pointer; transition:all .12s; user-select:none; font-size:19px;
  }
  .spawn-gf-btn:hover { border-color:var(--gold); color:var(--gold-light); }
  .spawn-gf-btn.gf-active {
    background:rgba(200,150,46,0.22); border-color:var(--gold-light);
    color:var(--gold-light); box-shadow:0 0 6px rgba(200,150,46,0.3);
  }

  /* Gen Fals map picker */
  .gf-picker {
    position:fixed; z-index:10000; background:var(--surface); border:1px solid var(--border-accent);
    border-radius:8px; padding:10px 12px; min-width:160px;
    box-shadow:0 8px 24px rgba(0,0,0,0.5);
    opacity:0; pointer-events:none; transform:scale(0.95);
    transition:opacity 0.15s ease, transform 0.15s cubic-bezier(0.16,1,0.3,1);
  }
  .gf-picker.open { opacity:1; pointer-events:all; transform:scale(1); }
  .gf-picker-title {
    font-size:11px; font-weight:600; color:var(--gold); margin-bottom:8px;
    text-transform:uppercase; letter-spacing:0.5px;
  }
  .gf-picker-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; }
  .gf-picker-btn {
    padding:5px 0; border:1px solid var(--border); border-radius:6px;
    background:var(--surface2); color:var(--text-muted); font-size:11px;
    font-family:'Inter',sans-serif; font-weight:500; cursor:pointer;
    transition:all 0.15s;
  }
  .gf-picker-btn:hover { border-color:var(--gold); color:var(--gold-light); }
  .gf-picker-btn.gf-active {
    background:rgba(200,150,46,0.22); border-color:var(--gold-light);
    color:var(--gold-light); box-shadow:0 0 6px rgba(200,150,46,0.3);
  }

  .spawn-input {
    background:var(--surface3); border:1px solid var(--border); border-radius:4px;
    padding:3px 6px; color:var(--text); font-size:11px;
    font-family:'Inter',sans-serif; outline:none; width:100%; box-sizing:border-box;
    transition:border-color .15s;
  }
  .spawn-input:focus { border-color:var(--gold); }
  .spawn-input::placeholder { color:var(--text-muted); }
  .spawn-table-hint { font-size:10px; color:var(--text-muted); margin-top:6px; text-align:center; line-height:1.4; }
  .spawn-header-row {
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:20px; padding:8px 16px; gap:12px; flex-wrap:wrap;
    max-width:600px; margin-left:auto; margin-right:auto;
    background:rgba(255,255,255,0.02); border-radius:10px;
    border:1px solid rgba(255,255,255,0.05);
  }
  .spawn-header-left, .spawn-header-center, .spawn-header-right {
    display:flex; align-items:center; gap:8px;
  }
  .spawn-header-left { flex:1; min-width:0; }
  .spawn-header-center { flex:0 0 auto; }
  .spawn-header-right { flex:1; justify-content:flex-end; min-width:0; gap:4px; }
  .spawn-state-cell.st-notfound { background:rgba(255,120,0,0.15)!important; color:#ff8c00!important; border-color:rgba(255,120,0,0.35)!important; }
  .spawn-state-cell.st-dead { background:rgba(224,82,82,0.18)!important; color:var(--red)!important; border-color:rgba(224,82,82,0.35)!important; }
  .spawn-state-cell.st-going { background:rgba(200,150,46,0.12)!important; border-color:rgba(200,150,46,0.3)!important; }
  .spawn-going-tag {
    position:absolute; bottom:100%; left:50%; transform:translateX(-50%); margin-bottom:2px;
    font-size:9px; font-weight:700; white-space:nowrap; letter-spacing:.3px;
    text-shadow:0 1px 4px rgba(0,0,0,.9), 0 0 6px rgba(0,0,0,.6);
    padding:1px 5px; border-radius:3px; background:rgba(0,0,0,.55);
    border:1px solid rgba(255,255,255,.1); z-index:15;
    animation: goingPulseText 2s ease-in-out infinite;
  }
  @keyframes goingPulseText { 0%,100%{opacity:.85} 50%{opacity:1} }
  .spawn-room-dot.has-data-going {
    animation: goingPulse 1.5s ease-in-out infinite;
    border-color:rgba(0,230,180,.8);
    background:rgba(0,230,180,.25)!important;
    color:#00e6b4!important;
  }
  @keyframes goingPulse {
    0%,100% { box-shadow:0 0 8px rgba(0,230,180,.4), inset 0 0 4px rgba(0,230,180,.15); }
    50% { box-shadow:0 0 18px rgba(0,230,180,.7), inset 0 0 8px rgba(0,230,180,.3); }
  }
  .spawn-badge-ch.badge-going { font-weight:700; }

  /* Map live clock (pop-out only) */
  .map-live-clock {
    position:absolute; top:3px; right:3px;
    background:rgba(10,12,18,.8); backdrop-filter:blur(6px);
    border:1px solid rgba(255,255,255,.08); border-radius:4px;
    padding:1px 8px; z-index:20; pointer-events:none;
    font-family:Rajdhani,sans-serif; font-size:12px; font-weight:600;
    color:var(--gold-light); letter-spacing:.5px;
  }

  /* Map CH status overlay */
  .map-ch-status {
    position:absolute; top:3px; left:3px;
    display:flex; flex-direction:column; gap:2px;
    background:rgba(10,12,18,.75); backdrop-filter:blur(6px);
    border:1px solid rgba(255,255,255,.08); border-radius:4px;
    padding:3px 6px; z-index:20; pointer-events:auto;
    font-family:Rajdhani,sans-serif; font-size:10px;
  }
  .mcs-row { display:flex; align-items:center; gap:3px; }
  .mcs-ch { padding:1px 4px; border-radius:3px; font-weight:700; font-size:10px; letter-spacing:.3px; pointer-events:none; }
  .mcs-remaining { background:rgba(255,120,0,.2); color:#ff8c00; border:1px solid rgba(255,120,0,.45); text-shadow:0 0 6px rgba(255,120,0,.5); pointer-events:auto !important; cursor:pointer; }
  .mcs-notfound { background:rgba(255,120,0,.12); color:#cc7000; border:1px solid rgba(255,120,0,.3); text-decoration:line-through; opacity:.6; }
  .mcs-dead { background:rgba(80,80,80,.2); color:#555; border:1px solid rgba(80,80,80,.3); text-decoration:line-through; opacity:.5; }
  .mcs-assigned { background:rgba(76,175,130,.12); color:var(--green); border:1px solid rgba(76,175,130,.25); opacity:.6; }

  .spawn-ch-label.ch-highlight-gen { background:rgba(74,158,255,0.22)!important; color:#4a9eff!important; border-left:3px solid #4a9eff!important; }
  .spawn-ch-label.ch-highlight-sef { background:rgba(76,175,130,0.2)!important; color:var(--green)!important; border-left:3px solid var(--green)!important; }
  .spawn-ch-label.ch-highlight-notfound { background:rgba(255,120,0,0.12)!important; color:#ff8c00!important; border-left:3px solid #ff8c00!important; }
  .spawn-ch-label.ch-highlight-dead { background:rgba(224,82,82,0.15)!important; color:var(--red)!important; border-left:3px solid var(--red)!important; text-decoration:line-through; }
  .spawn-pop-btn.disabled { opacity:0.25; pointer-events:none; cursor:not-allowed; }

  /* CH grid (1 row × 6) */
  .spawn-grid-label {
    display:flex; justify-content:space-between; align-items:center;
    font-size:10px; text-transform:uppercase; letter-spacing:0.5px;
    margin-bottom:6px;
  }
  .sgrid-lbl-sef { color:var(--green); font-weight:700; font-size:11px; }
  .sgrid-lbl-gen { color:#4a9eff;      font-weight:700; font-size:11px; }
  .spawn-ch-grid {
    display:grid; grid-template-columns:repeat(6,1fr); gap:4px;
    margin-bottom:10px;
  }
  .scb {
    padding:7px 0;
    border-radius:5px;
    border:1.5px solid var(--scb-border, rgba(76,175,130,0.35));
    background:var(--scb-bg, rgba(76,175,130,0.07));
    color:var(--scb-color, var(--green));
    font-family:'Rajdhani',sans-serif; font-size:13px; font-weight:700;
    cursor:pointer; text-align:center;
    transition:background 0.1s ease, border-color 0.1s ease, transform 0.1s ease, opacity 0.1s ease;
  }
  .scb:hover:not(.scb-disabled) {
    background:var(--scb-bg-hover, rgba(76,175,130,0.22));
    border-color:var(--scb-color, var(--green));
    transform:scale(1.08);
  }
  .scb.scb-disabled { opacity:0.22; pointer-events:none; cursor:not-allowed; }
  /* Gen theme applied to grid via parent */
  .spawn-ch-grid.gen-mode .scb {
    --scb-border: rgba(74,158,255,0.35);
    --scb-bg: rgba(74,158,255,0.07);
    --scb-color: #4a9eff;
    --scb-bg-hover: rgba(74,158,255,0.22);
  }
  .spawn-entry-list { margin-bottom:10px; max-height:120px; overflow-y:auto; }
  .spawn-entry-item { display:flex; align-items:center; justify-content:space-between; padding:3px 7px; margin:2px 0; border-radius:4px; font-size:11px; font-family:'Rajdhani',sans-serif; font-weight:600; }
  .spawn-entry-item.entry-sef { background:rgba(76,175,130,0.15); color:var(--green); border:1px solid rgba(76,175,130,0.3); }
  .spawn-entry-item.entry-gen { background:rgba(74,158,255,0.15); color:#4a9eff; border:1px solid rgba(74,158,255,0.3); }
  .spawn-entry-item.entry-dead { opacity:0.5; text-decoration:line-through; }
  .spawn-entry-del { background:none; border:none; color:var(--red); cursor:pointer; font-size:13px; padding:0 3px; line-height:1; }
  .spawn-entry-del:hover { color:#ff6b6b; }
  .spawn-pop-add { width:100%; padding:5px; border-radius:5px; border:1px solid var(--green); background:rgba(76,175,130,0.12); color:var(--green); font-size:11px; font-weight:700; cursor:pointer; font-family:'Rajdhani',sans-serif; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:10px; transition:all .12s; }
  .spawn-pop-add:hover { background:rgba(76,175,130,0.25); }
  .spawn-pop-add:disabled { opacity:0.25; pointer-events:none; }
  .spawn-timer-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .spawn-timer-input { background:var(--surface3); border:1px solid var(--border); border-radius:4px; padding:4px 6px; color:var(--text); font-size:13px; font-family:'Rajdhani',sans-serif; font-weight:600; outline:none; width:46px; text-align:center; }
  .spawn-timer-input:focus { border-color:var(--gold); }

  .spawn-ch-clickable { transition:background .12s, color .12s, border-color .12s; }
  .spawn-ch-clickable:hover { color:var(--gold-light)!important; background:rgba(200,150,46,0.1)!important; }
  .spawn-ch-clickable:active { transform:scale(0.96); }
  .spawn-ch-clickable.ch-flash-ok { color:var(--green)!important; background:rgba(76,175,130,0.15)!important; border-color:rgba(76,175,130,0.4)!important; }
  .spawn-ch-clickable.ch-beaten,
  .spawn-ch-clickable.ch-beaten:hover { opacity:.32; text-decoration:line-through; color:var(--text-muted)!important; background:transparent!important; }
  .ch-beaten-cell { opacity:.32; pointer-events:none; }
  .ts-cd { display:none; }
  .spawn-timer-lbl { font-size:10px; color:var(--text-muted); font-family:'Rajdhani',sans-serif; text-transform:uppercase; }

  /* ── Spawn Clock Widget ── */
  /* Spawn Clock Widget — minimal */
  .spawn-clock-widget {
    display:flex; align-items:center; gap:8px;
  }
  .spawn-clock-label {
    font-family:'Rajdhani',sans-serif; font-size:10px; font-weight:600;
    text-transform:uppercase; letter-spacing:1px;
    color:var(--text-muted);
  }
  .spawn-clock-inputs { display:flex; align-items:center; gap:3px; }
  .spawn-clock-inp {
    background:transparent;
    border:none;
    border-bottom:1.5px solid var(--border);
    border-radius:0;
    padding:2px 0;
    width:32px; text-align:center;
    color:var(--text);
    font-family:'Rajdhani',sans-serif;
    font-size:15px; font-weight:600; outline:none;
    transition:border-color .15s;
    -moz-appearance:textfield;
  }
  .spawn-clock-inp::-webkit-outer-spin-button,
  .spawn-clock-inp::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
  .spawn-clock-inp:focus { border-color:var(--gold); }
  .spawn-clock-inp::placeholder { color:var(--text-muted); }
  .spawn-clock-sep {
    font-family:'Rajdhani',sans-serif; font-size:14px; font-weight:600;
    color:var(--text-muted); line-height:1;
  }
  .spawn-clock-set {
    background:none; border:1px solid var(--border); border-radius:4px;
    padding:3px 9px; font-family:'Rajdhani',sans-serif; font-size:11px; font-weight:700;
    color:var(--text-muted); cursor:pointer; letter-spacing:0.5px;
    transition:all .15s; margin-left:2px; text-transform:uppercase;
  }
  .spawn-clock-set:hover { border-color:var(--gold); color:var(--gold-light); }
  .spawn-clock-clear {
    background:none; border:none; padding:2px 5px;
    font-size:11px; color:var(--text-muted); cursor:pointer;
    transition:color .15s; line-height:1;
  }
  .spawn-clock-clear:hover { color:var(--red); }
  .spawn-timer-display {
    font-family:'Rajdhani',sans-serif; font-size:12px; font-weight:600;
    color:var(--text-muted); letter-spacing:0.5px;
    padding:4px 10px; border-radius:6px;
    background:rgba(255,255,255,0.03);
  }
  .spawn-timer-display:empty { display:none; }
  .spawn-timer-display.active { color:var(--green); background:rgba(76,175,130,0.08); }
  .spawn-timer-display.warning { color:var(--orange); background:rgba(224,125,64,0.08); animation:warning-pulse .8s ease-in-out infinite alternate; }
  @keyframes warning-pulse { from{opacity:1} to{opacity:.5} }
  @keyframes dotFb {
    from { opacity:1; transform:translateX(-50%) translateY(0); }
    to   { opacity:0; transform:translateX(-50%) translateY(-14px); }
  }
  .spawn-cam-tag.tag-dead { opacity:0.45; text-decoration:line-through; }
  .spawn-room-dot.has-data-dead { border-color:var(--red) !important; color:var(--red) !important; box-shadow:0 0 6px rgba(224,82,82,0.3); opacity:0.6; animation:none; }

  /* ── Spawn subtle buttons ── */
  .spawn-subtle-btn {
    background: none; border: none; cursor: pointer;
    font-family: 'Rajdhani', sans-serif; font-size: 11px; font-weight: 600;
    color: var(--text-muted); padding: 4px 8px; border-radius: 6px;
    transition: color 0.15s, background 0.15s;
    letter-spacing: 0.3px; opacity: 0.6;
  }
  .spawn-subtle-btn:hover { color: var(--text); opacity: 1; }
  .spawn-reset-btn:hover { color: var(--red); }

  /* ── Volume control (header) ── */
  .vol-control {
    position: relative;
  }
  .vol-btn {
    width: 34px; height: 34px; border-radius: 8px;
    border: 1px solid var(--border-accent); background: var(--surface);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--text-muted);
    transition: all 0.15s;
  }
  .vol-btn:hover { border-color: var(--gold); color: var(--gold); }
  .vol-btn.muted { color: var(--red); border-color: var(--red-dim); }
  .vol-popup {
    position: absolute; top: 100%; right: 0; margin-top: 8px;
    display: flex; flex-direction: column; gap: 0;
    background: rgba(13,15,20,0.94);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px; padding: 14px 16px; min-width: 210px;
    opacity: 0; visibility: hidden; transform: translateY(-6px) scale(0.97);
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s cubic-bezier(0.16,1,0.3,1);
    z-index: 10000; white-space: nowrap;
    box-shadow: 0 20px 48px rgba(0,0,0,0.65), inset 0 1px 0 rgba(255,255,255,0.06);
  }
  .vol-popup-title {
    font-family: 'Rajdhani', sans-serif; font-size: 10px; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--text-muted); margin-bottom: 12px;
  }
  .vol-group {
    display: flex; flex-direction: column; gap: 6px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
  }
  .vol-group:last-child { border-bottom: none; padding-bottom: 0; }
  .vol-group:first-of-type { padding-top: 0; }
  .vol-group-row {
    display: flex; align-items: center; justify-content: space-between;
  }
  .vol-label {
    font-family: 'Rajdhani', sans-serif; font-size: 12px; font-weight: 600;
    color: var(--text-secondary);
  }
  .vol-control.open .vol-popup {
    opacity: 1; visibility: visible; transform: translateY(0) scale(1);
  }
  .vol-slider {
    -webkit-appearance: none; appearance: none;
    width: 100%; height: 3px; border-radius: 2px;
    background: var(--border); outline: none; cursor: pointer;
  }
  .vol-slider::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--gold); border: none; cursor: pointer;
    box-shadow: 0 0 0 3px rgba(200,150,46,0.15);
    transition: box-shadow 0.15s, transform 0.15s;
  }
  .vol-slider::-moz-range-thumb {
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--gold); border: none; cursor: pointer;
  }
  .vol-slider:hover::-webkit-slider-thumb {
    box-shadow: 0 0 0 5px rgba(200,150,46,0.25);
    transform: scale(1.1);
  }
  .vol-val {
    font-family: 'Rajdhani', sans-serif; font-size: 11px; font-weight: 700;
    color: var(--gold); min-width: 30px; text-align: right;
  }
  .vol-master-group {
    padding-bottom: 12px;
  }
  .vol-label--master {
    font-family: 'Rajdhani', sans-serif; font-size: 13px; font-weight: 700;
    color: var(--text);
  }
  .vol-divider {
    height: 1px; background: var(--border); margin: 0 0 8px;
  }
  .vol-channels { display: flex; flex-direction: column; gap: 0; }
  .vol-channels-toggle {
    display: flex; align-items: center; gap: 6px;
    width: 100%; margin-top: 10px; padding: 3px 0; border: none; background: none;
    color: rgba(255,255,255,0.18); cursor: pointer;
    transition: color 0.15s;
  }
  .vol-channels-toggle:hover { color: rgba(255,255,255,0.38); }
  .vol-toggle-line { flex: 1; height: 1px; background: currentColor; }
  .vol-toggle-chevron { flex-shrink: 0; transition: transform 0.2s; }
  .vol-channels-toggle.open .vol-toggle-chevron { transform: rotate(180deg); }
  .vol-slider--master { accent-color: var(--gold); }

  /* ── 6/7 Bonus Category ── */

  /* Cat icon — text badge */
  .sz-cat-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 5px;
    background: rgba(200,150,46,0.15); border: 1px solid rgba(200,150,46,0.35);
    color: var(--gold); font-family: 'Rajdhani', sans-serif;
    font-size: 9px; font-weight: 800; letter-spacing: 0.02em;
  }

  /* Card accent strip */
  .accent-sase-sapte { background: var(--gold); }

  /* Cat icon container in card */
  .icon-sase-sapte {
    width: 54px; height: 54px; border-radius: 10px;
    background: rgba(200,150,46,0.08); border: 1px solid rgba(200,150,46,0.2);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; flex-shrink: 0;
  }

  /* Item image inside card */
  .sz-card-img {
    width: 100%; height: 100%; object-fit: contain;
  }

  /* Placeholder when no image */
  .sz-card-img-placeholder {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
    color: var(--gold); font-family: 'Rajdhani', sans-serif;
    font-size: 13px; font-weight: 800; letter-spacing: 0.04em;
  }

  /* Category badge */
  .cat-sase-sapte {
    background: rgba(200,150,46,0.12); border: 1px solid rgba(200,150,46,0.3);
    color: var(--gold);
  }

  /* Progress bar fill */
  .fill-sase-sapte { background: var(--gold); }

  /* Done state row inside card */
  .sz-done-state {
    display: flex; align-items: center; gap: 6px;
    font-family: 'Rajdhani', sans-serif; font-size: 13px; font-weight: 700;
    color: var(--green); padding: 10px 0 4px;
  }

  /* Finalizeaza button */
  .btn-action.sz-done-btn {
    border-color: rgba(52,199,89,0.3);
    color: var(--green);
  }
  .btn-action.sz-done-btn:hover {
    background: rgba(52,199,89,0.08);
    border-color: var(--green);
  }

  /* Done badge in card-meta */
  .sz-done-badge {
    background: rgba(52,199,89,0.12); border-color: rgba(52,199,89,0.3);
    color: var(--green);
  }

  /* Card done state — subtle green tint */
  .sz-done-card { background: rgba(52,199,89,0.03); }

  /* ── Image paste area in addModal ── */
  .sz-paste-area {
    border: 1px dashed var(--border-accent);
    border-radius: var(--radius);
    min-height: 80px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    overflow: hidden; position: relative;
  }
  .sz-paste-area:focus-within,
  .sz-paste-area:hover { border-color: var(--gold); background: rgba(200,150,46,0.04); }

  .sz-paste-hint {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    color: var(--text-muted); font-size: 12px; padding: 16px;
    text-align: center;
  }
  .sz-paste-hint svg { opacity: 0.45; }

  .sz-paste-preview {
    max-width: 100%; max-height: 120px; object-fit: contain;
    display: none; padding: 8px;
  }

  /* Form label hint */
  .form-label-hint {
    font-size: 9px; font-weight: 600; letter-spacing: 0.08em;
    color: var(--text-muted); margin-left: 6px;
    background: var(--surface2); border: 1px solid var(--border);
    border-radius: 4px; padding: 1px 5px;
  }

  /* ── Spawn alarm overlay ── */
  .spawn-alarm-overlay {
    position:fixed; inset:0; z-index:99999;
    display:flex; align-items:center; justify-content:center;
    background:rgba(0,0,0,0.55); backdrop-filter:blur(4px);
    animation: alarm-bg-flash 0.6s ease-in-out infinite alternate;
  }
  @keyframes alarm-bg-flash {
    from { background:rgba(0,0,0,0.55); }
    to   { background:rgba(180,30,30,0.22); }
  }
  .spawn-alarm-box {
    background:var(--surface2);
    border:2px solid var(--red);
    border-radius:var(--radius-lg);
    padding:32px 40px;
    text-align:center;
    box-shadow:0 0 60px rgba(224,82,82,0.45), 0 16px 48px rgba(0,0,0,0.7);
    max-width:380px; width:90%;
    animation: alarm-box-pulse 0.6s ease-in-out infinite alternate;
  }
  @keyframes alarm-box-pulse {
    from { box-shadow:0 0 40px rgba(224,82,82,0.35), 0 16px 48px rgba(0,0,0,0.7); }
    to   { box-shadow:0 0 80px rgba(224,82,82,0.65), 0 16px 48px rgba(0,0,0,0.7); }
  }
  .spawn-alarm-icon {
    font-size:48px; line-height:1; margin-bottom:14px;
    animation: alarm-shake 0.3s ease-in-out infinite;
  }
  @keyframes alarm-shake {
    0%,100% { transform:rotate(-6deg); }
    50%     { transform:rotate(6deg); }
  }
  .spawn-alarm-title {
    font-family:'Rajdhani',sans-serif; font-size:26px; font-weight:700;
    color:var(--red); letter-spacing:1px; margin-bottom:6px;
  }
  .spawn-alarm-sub {
    font-size:14px; color:var(--text-dim); margin-bottom:24px; line-height:1.5;
  }
  .spawn-alarm-confirm {
    background:linear-gradient(135deg,var(--red),#f07070);
    border:none; border-radius:8px;
    padding:12px 32px; font-family:'Rajdhani',sans-serif;
    font-size:17px; font-weight:700; color:#fff;
    cursor:pointer; letter-spacing:0.5px;
    transition:filter .12s, transform .1s;
  }
  .spawn-alarm-confirm:hover { filter:brightness(1.15); transform:scale(1.03); }
  .spawn-alarm-confirm:active { transform:scale(0.97); }
  .spawn-alarm-dismiss {
    display:block; margin-top:12px;
    background:none; border:none;
    font-size:12px; color:var(--text-muted); cursor:pointer;
    text-decoration:underline; padding:4px;
  }
  .spawn-alarm-dismiss:hover { color:var(--text-dim); }
  .spawn-alarm-countdown {
    font-family:'Rajdhani',sans-serif; font-size:13px;
    color:var(--text-muted); margin-top:8px;
  }

  /* ── Alerte tab ── */
  .alerta-rep-btn, .alerta-day-btn {
    padding:6px 13px; border-radius:7px;
    border:1.5px solid var(--border-accent);
    background:var(--surface3); color:var(--text-dim);
    font-family:'Rajdhani',sans-serif; font-size:13px; font-weight:700;
    cursor:pointer; transition:all .12s;
  }
  .alerta-rep-btn:hover, .alerta-day-btn:hover { border-color:var(--gold); color:var(--gold-light); }
  .alerta-rep-btn.active { background:rgba(200,150,46,.18); border-color:var(--gold-light); color:var(--gold-light); }
  .alerta-day-btn.active { background:rgba(76,175,130,.18); border-color:var(--green); color:var(--green); }
  .alerta-card {
    background:var(--surface2); border:1px solid var(--border-accent);
    border-radius:12px; padding:14px 16px; margin-bottom:10px;
    display:flex; align-items:center; gap:12px;
    transition: opacity .2s;
  }
  .alerta-card.disabled { opacity:.45; }
  .alerta-card-info { flex:1; min-width:0; }
  .alerta-card-name { font-family:'Rajdhani',sans-serif; font-size:16px; font-weight:700; color:var(--text); }
  .alerta-card-detail { font-size:12px; color:var(--text-muted); margin-top:2px; }
  .alerta-card-next { font-size:11px; color:var(--green); margin-top:3px; font-family:'Rajdhani',sans-serif; }
  .alerta-toggle {
    position:relative; width:40px; height:22px; flex-shrink:0;
  }
  .alerta-toggle input { opacity:0; width:0; height:0; }
  .alerta-toggle-slider {
    position:absolute; inset:0; border-radius:11px;
    background:var(--surface3); border:1px solid var(--border-accent);
    cursor:pointer; transition:background .2s;
  }
  .alerta-toggle-slider:before {
    content:''; position:absolute;
    width:16px; height:16px; border-radius:50%;
    background:#fff; left:2px; top:2px;
    transition:transform .2s;
  }
  .alerta-toggle input:checked + .alerta-toggle-slider { background:var(--green); border-color:var(--green); }
  .alerta-toggle input:checked + .alerta-toggle-slider:before { transform:translateX(18px); }
  .alerta-del-btn {
    background:none; border:none; color:var(--text-muted);
    cursor:pointer; font-size:16px; padding:4px; border-radius:4px;
    transition:color .12s;
  }
  .alerta-del-btn:hover { color:var(--red); }


  /* ── Alerte tab cards ────────────────────────── */
  .alerta-card {
    background:var(--surface2); border:1px solid var(--border);
    border-radius:10px; padding:14px 16px; margin-bottom:10px;
    transition:border-color .15s;
  }
  .alerta-card:hover { border-color:var(--border-accent); }
  .alerta-card-top { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
  .alerta-card-info { flex:1; min-width:0; }
  .alerta-card-name { font-family:'Rajdhani',sans-serif; font-size:16px; font-weight:700; color:var(--text); margin-bottom:3px; }
  .alerta-card-meta { font-size:12px; color:var(--text-muted); margin-bottom:3px; }
  .alerta-card-msg  { font-size:12px; color:var(--text-dim); font-style:italic; }
  .alerta-card-actions { display:flex; align-items:center; gap:8px; flex-shrink:0; }
  .alerta-countdown { font-size:11px; white-space:nowrap; }
  .alerta-btn-edit, .alerta-btn-del {
    background:none; border:none; cursor:pointer; font-size:15px;
    opacity:0.5; transition:opacity .12s; padding:2px;
  }
  .alerta-btn-edit:hover, .alerta-btn-del:hover { opacity:1; }
  .alerta-global-badge {
    display:inline-block; font-size:10px; font-weight:700; letter-spacing:0.05em;
    padding:1px 6px; border-radius:4px; background:rgba(200,150,46,0.15);
    border:1px solid rgba(200,150,46,0.3); color:var(--gold-light);
    font-family:'Rajdhani',sans-serif; vertical-align:middle; margin-left:4px;
  }
  /* Toggle switch */
  .alerta-toggle { position:relative; display:inline-block; width:36px; height:20px; flex-shrink:0; }
  .alerta-toggle input { opacity:0; width:0; height:0; }
  .alerta-toggle span {
    position:absolute; inset:0; background:var(--surface3); border-radius:20px;
    cursor:pointer; transition:background .2s;
  }
  .alerta-toggle span::after {
    content:''; position:absolute; left:3px; top:3px;
    width:14px; height:14px; border-radius:50%; background:#fff; transition:transform .2s;
  }
  .alerta-toggle input:checked + span { background:var(--green); }
  .alerta-toggle input:checked + span::after { transform:translateX(16px); }
  /* Form hide/show custom row fix */
  #alertaCustomRow { display:none; }


  .al-lbl { font-size:11px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.4px; margin-bottom:5px; }
  .al-inp { width:100%; box-sizing:border-box; padding:8px 10px; border-radius:7px; border:1px solid var(--border-accent); background:var(--surface3); color:var(--text); font-size:13px; outline:none; transition:border-color .2s, box-shadow .2s; }
  .al-inp:focus { border-color:var(--gold); box-shadow:0 0 0 2px rgba(200,150,46,0.15); }

  /* ── Section headers (Alarme / Remindere) ─────── */
  .al-section-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 14px; border-radius:10px; margin-bottom:16px;
    border:1px solid var(--border);
  }
  .al-section-header--alarm {
    background:rgba(224,82,82,0.06); border-color:rgba(224,82,82,0.2);
    margin-top:0;
  }
  .al-section-header--reminder {
    background:rgba(76,175,130,0.06); border-color:rgba(76,175,130,0.2);
    margin-top:0;
  }
  /* ── 2-column layout for Alarme/Remindere ── */
  .al-two-col {
    display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start;
  }
  .al-col { min-width: 0; }
  @media (max-width: 700px) {
    .al-two-col { grid-template-columns: 1fr; }
  }
  .al-section-header-left {
    display:flex; align-items:center; gap:8px;
    font-family:'Rajdhani',sans-serif; font-size:14px; font-weight:700;
    text-transform:uppercase; letter-spacing:1px;
  }
  .al-section-header--alarm .al-section-header-left { color:rgba(224,82,82,0.9); }
  .al-section-header--reminder .al-section-header-left { color:rgba(76,175,130,0.9); }

  /* ── Remindere ─────────────────────────────────── */
  .reminder-card {
    background:var(--surface2); border:1px solid var(--border);
    border-radius:10px; padding:14px 16px 0; margin-bottom:10px;
    overflow:hidden; transition:border-color .15s;
  }
  .reminder-card:hover { border-color:var(--border-accent); }
  .reminder-card.reminder-finished {
    border-color:rgba(224,125,64,0.45);
    background:rgba(224,125,64,0.05);
    padding-bottom:14px;
  }
  .reminder-card .alerta-card-top { padding-bottom:14px; }
  .reminder-name {
    font-family:'Rajdhani',sans-serif; font-size:16px; font-weight:700;
    color:var(--text); margin-bottom:3px;
  }
  .reminder-countdown {
    font-size:13px; font-family:'Rajdhani',sans-serif; font-weight:600;
    color:var(--green); white-space:nowrap; min-width:80px; text-align:right;
  }
  .reminder-done-badge {
    font-size:11px; font-weight:700; font-family:'Rajdhani',sans-serif;
    text-transform:uppercase; letter-spacing:.5px;
    color:var(--orange); background:rgba(224,125,64,0.12);
    border:1px solid rgba(224,125,64,0.3); border-radius:5px;
    padding:3px 8px; white-space:nowrap;
  }
  .reminder-global-badge {
    font-size:10px; font-weight:600; font-family:'Rajdhani',sans-serif;
    text-transform:uppercase; letter-spacing:.4px;
    color:var(--gold); background:rgba(200,150,46,0.1);
    border:1px solid rgba(200,150,46,0.25); border-radius:4px;
    padding:1px 6px; vertical-align:middle; margin-left:4px;
  }
  .reminder-btn-reset {
    font-size:11px; font-weight:600; font-family:'Rajdhani',sans-serif;
    text-transform:uppercase; letter-spacing:.4px; white-space:nowrap;
    background:rgba(76,175,130,0.1); border:1px solid rgba(76,175,130,0.3);
    color:var(--green); border-radius:6px; padding:4px 10px; cursor:pointer;
    transition:background .15s, border-color .15s;
  }
  .reminder-btn-reset:hover { background:rgba(76,175,130,0.2); border-color:var(--green); }
  .reminder-finished .reminder-btn-reset {
    background:rgba(224,125,64,0.12); border-color:rgba(224,125,64,0.4); color:var(--orange);
  }
  .reminder-finished .reminder-btn-reset:hover { background:rgba(224,125,64,0.22); border-color:var(--orange); }
  .reminder-btn-edit, .reminder-btn-del {
    background:none; border:none; cursor:pointer; font-size:15px;
    opacity:0.45; transition:opacity .12s; padding:2px;
  }
  .reminder-btn-edit:hover, .reminder-btn-del:hover { opacity:1; }

  /* ── Reminder pause button ── */
  .reminder-btn-pause {
    display:flex; align-items:center; justify-content:center;
    width:26px; height:26px; border-radius:6px; cursor:pointer;
    background:rgba(100,140,220,0.1); border:1px solid rgba(100,140,220,0.3);
    color:rgba(100,140,220,0.9); transition:background .15s, border-color .15s;
    flex-shrink:0;
  }
  .reminder-btn-pause:hover { background:rgba(100,140,220,0.2); border-color:rgba(100,140,220,0.6); }
  .reminder-paused .reminder-btn-pause {
    background:rgba(76,175,130,0.1); border-color:rgba(76,175,130,0.3); color:var(--green);
  }
  .reminder-paused-badge {
    font-size:10px; font-weight:700; font-family:'Rajdhani',sans-serif;
    text-transform:uppercase; letter-spacing:.4px;
    color:rgba(100,140,220,0.9); background:rgba(100,140,220,0.1);
    border:1px solid rgba(100,140,220,0.3); border-radius:4px;
    padding:1px 6px; vertical-align:middle; margin-left:4px;
  }
  .reminder-countdown--paused { color:rgba(100,140,220,0.8); }

  /* ── Reminder progress strip (bottom of card) ── */
  .reminder-progress-wrap {
    height:3px; background:rgba(255,255,255,0.05);
  }
  .reminder-progress-fill {
    height:100%; background:var(--green);
    transition:width 1s linear;
  }
  .reminder-paused .reminder-progress-fill { background:rgba(100,140,220,0.5); }

  /* ── Form open animation ── */
  @keyframes al-form-in {
    from { opacity:0; transform:translateY(-14px) scale(0.98); }
    to   { opacity:1; transform:translateY(0) scale(1); }
  }
  .al-form--open { animation: al-form-in 0.38s cubic-bezier(0.16,1,0.3,1) both; }

  /* ── Alert auto-dismiss progress bar ── */
  .alerta-auto-dismiss-bar {
    width:100%; height:3px; background:rgba(255,255,255,0.1);
    border-radius:2px; margin:12px 0 4px; overflow:hidden;
  }
  .alerta-auto-dismiss-fill {
    height:100%; width:100%; background:var(--gold-light);
    border-radius:2px; transition:width .2s linear;
  }
  .alerta-auto-dismiss-label {
    font-size:11px; color:var(--text-muted); text-align:center; margin-bottom:10px;
  }

  /* ── Missed notification ── */
  .notif-item-icon.type-missed {
    background:rgba(224,82,82,0.18); color:#e05252;
    border:1px solid rgba(224,82,82,0.35); font-weight:800; font-size:14px;
  }
  .notif-item.notif-item--missed {
    border-left:3px solid rgba(224,82,82,0.6);
    background:rgba(224,82,82,0.04);
  }

  /* ── Spawn type badge (header) ── */
  .spawn-type-badge {
    display:inline-flex; align-items:baseline; gap:6px;
    font-size:11px; font-weight:600; font-family:'Rajdhani',sans-serif;
    padding:5px 14px; border-radius:6px;
    border:1px solid var(--border); background:var(--surface);
    transition:all 0.3s ease; cursor:default; white-space:nowrap;
    letter-spacing:0.4px; text-transform:uppercase;
    line-height:1;
  }
  .spawn-type-badge.type-simplu {
    border-color:rgba(91,155,213,0.25); color:rgba(91,155,213,0.85);
  }
  .spawn-type-badge.type-dublu {
    border-color:rgba(224,125,64,0.3); color:var(--orange);
  }
  .spawn-type-sep {
    width:1px; height:10px; background:var(--border-accent); opacity:0.4;
    display:none; align-self:center;
  }
  .spawn-type-timer {
    font-size:11px; font-weight:600;
    font-variant-numeric:tabular-nums; color:var(--text-muted);
  }
  .spawn-type-timer.active { color:var(--green); }
  .spawn-type-timer.warning { color:var(--orange); animation:timerPulse 1.5s ease-in-out infinite; }
  @keyframes timerPulse { 0%,100%{opacity:1;} 50%{opacity:0.5;} }

  /* ── Spawn type toggle (spawn tab) ── */
  .spawn-type-toggle {
    display:flex; gap:2px; border-radius:8px;
    background:rgba(255,255,255,0.03); padding:2px;
  }
  .spawn-type-btn {
    padding:5px 16px; border:none; border-radius:6px;
    background:transparent; color:var(--text-muted);
    font-family:'Rajdhani',sans-serif; font-size:11px; font-weight:700;
    cursor:pointer; transition:all 0.2s; letter-spacing:0.5px;
    text-transform:uppercase;
  }
  .spawn-type-btn:hover { color:var(--text); }
  .spawn-type-btn.active[data-stype="simplu"] {
    background:rgba(91,155,213,0.15); color:var(--blue);
    box-shadow:0 1px 4px rgba(91,155,213,0.15);
  }
  .spawn-type-btn.active[data-stype="dublu"] {
    background:rgba(224,125,64,0.15); color:var(--orange);
    box-shadow:0 1px 4px rgba(224,125,64,0.15);
  }

  /* ── Spawn context menu ── */
  .spawn-ctx-menu {
    position:fixed; z-index:9000; background:var(--surface2);
    border:1px solid var(--border-accent); border-radius:8px;
    padding:6px 0; min-width:160px;
    box-shadow:0 8px 32px rgba(0,0,0,0.6);
    animation:ctxMenuIn .12s ease-out both;
  }
  @keyframes ctxMenuIn { from { opacity:0; transform:scale(0.95) translateY(-4px); } to { opacity:1; transform:scale(1) translateY(0); } }
  .spawn-ctx-title {
    padding:6px 14px 4px; font-family:'Rajdhani',sans-serif; font-size:12px;
    font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.5px;
    border-bottom:1px solid var(--border); margin-bottom:4px;
  }
  .spawn-ctx-item {
    display:block; width:100%; padding:7px 14px; border:none; background:none;
    color:var(--text); font-size:13px; font-family:'Inter',sans-serif;
    text-align:left; cursor:pointer; transition:background .1s;
  }
  .spawn-ctx-item:hover { background:rgba(255,255,255,0.06); }
  .spawn-ctx-danger { color:var(--red); }
  .spawn-ctx-danger:hover { background:var(--red-dim); }
  .spawn-ctx-disabled { color:var(--text-muted); cursor:default; font-style:italic; font-size:12px; }
  .spawn-ctx-disabled:hover { background:none; }

  /* ══════════════════════════════════════════════════════════════
     ENHANCED UI — smooth, clean, minimalist animations
     ══════════════════════════════════════════════════════════════ */

  /* ── Global easing & transitions ── */
  * { -webkit-tap-highlight-color:transparent; }

  /* tab transition handled by premium animation system */
  .tab-page { animation:none; }

  /* Active tab — no text-shadow for cleaner look */

  /* ── Card system ── */
  .card {
    transition:border-color 0.2s ease, transform 0.25s cubic-bezier(0.16,1,0.3,1), box-shadow 0.2s ease;
  }
  .card:hover {
    transform:translateY(-1px);
    box-shadow:0 6px 20px rgba(0,0,0,0.25);
  }

  /* Inv card */
  .inv-card {
    transition:border-color 0.2s ease, transform 0.2s cubic-bezier(0.16,1,0.3,1), box-shadow 0.2s ease;
  }
  .inv-card:hover {
    transform:translateY(-1px);
    box-shadow:0 6px 20px rgba(0,0,0,0.25);
  }

  /* ── Button system ── */
  .btn-primary, .btn-secondary, .btn-add, .btn-action, .inv-btn, .filter-btn, .filter-btn-is {
    transition:all 0.2s cubic-bezier(0.16,1,0.3,1);
  }
  .btn-primary:active, .btn-secondary:active, .btn-add:active { transform:scale(0.96); }
  .btn-action:active, .inv-btn:active { transform:scale(0.95); }
  .filter-btn:active, .filter-btn-is:active { transform:scale(0.95); }

  /* Primary button hover — subtle lift only */
  .btn-primary:hover {
    transform:translateY(-1px);
  }

  /* ── Input focus ── */
  .form-input, .form-select, .inv-search, .search-input, .al-inp, .spawn-input, .spawn-timer-input, .spawn-clock-inp {
    transition:border-color 0.2s ease, box-shadow 0.25s ease, background-color 0.2s ease;
  }
  .form-input:focus, .form-select:focus, .inv-search:focus, .search-input:focus, .al-inp:focus, .spawn-input:focus {
    box-shadow:0 0 0 3px rgba(200,150,46,0.1);
  }

  /* ── Modal ── */
  .modal-overlay { transition:opacity 0.25s ease; }
  .modal-overlay.open .modal {
    animation:modalSlideUp 0.35s cubic-bezier(0.16,1,0.3,1) both;
  }
  @keyframes modalSlideUp {
    from { opacity:0; transform:translateY(20px) scale(0.96); }
    to   { opacity:1; transform:translateY(0) scale(1); }
  }
  .modal-overlay:not(.open) .modal {
    transition:transform 0.2s ease, opacity 0.2s ease;
  }

  /* ── Toast ── */
  .toast {
    transition:all 0.35s cubic-bezier(0.16,1,0.3,1);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
  }
  .toast.show {
    box-shadow:0 8px 28px rgba(0,0,0,0.4);
  }

  /* ── Spawn table ── */
  .spawn-table tbody tr {
    transition:background 0.15s ease;
  }
  .spawn-table tbody tr:hover td {
    background:rgba(200,150,46,0.04) !important;
  }

  /* Gheata table: right-click clear visual hint */
  .spawn-ch-label[data-addch],
  .spawn-state-cell[data-spa="gheata-status"],
  .spawn-cameras-cell[data-clearch] {
    transition:background 0.15s ease, color 0.15s ease, transform 0.1s ease;
  }

  /* ── GF buttons ── */
  .spawn-gf-btn { transition:all 0.15s cubic-bezier(0.16,1,0.3,1); }
  .spawn-gf-btn:active { transform:scale(0.88); }
  .spawn-gf-btn.gf-active {
    animation:gfActivate 0.3s cubic-bezier(0.16,1,0.3,1);
  }
  @keyframes gfActivate {
    0% { transform:scale(0.85); }
    50% { transform:scale(1.1); }
    100% { transform:scale(1); }
  }

  /* ── Map dots ── */
  .spawn-room-dot.has-data, .spawn-room-dot.has-data-gen, .spawn-room-dot.has-data-royal {
    transition:transform 0.2s cubic-bezier(0.16,1,0.3,1), box-shadow 0.2s ease;
  }
  .spawn-room-dot.has-data:hover, .spawn-room-dot.has-data-gen:hover, .spawn-room-dot.has-data-royal:hover {
    transform:translate(-50%,-50%) scale(1.18);
  }
  .spawn-room-dot.boss {
    transition:border-color 0.15s ease, box-shadow 0.2s ease, transform 0.15s ease;
  }
  .spawn-room-dot.boss:hover {
    transform:translate(-50%,-50%) scale(1.1);
  }

  /* ── Popover open animation ── */
  .spawn-popover {
    transition:opacity 0.15s ease, transform 0.15s ease;
    transform-origin:top left;
  }
  .spawn-popover.open {
    animation:popoverIn 0.2s cubic-bezier(0.16,1,0.3,1) both;
  }
  @keyframes popoverIn {
    from { opacity:0; transform:scale(0.92) translateY(-4px); }
    to   { opacity:1; transform:scale(1) translateY(0); }
  }

  /* ── Context menu ── */
  @keyframes ctxMenuIn {
    from { opacity:0; transform:scale(0.93) translateY(-4px); }
    to   { opacity:1; transform:scale(1) translateY(0); }
  }

  /* ── Stats bar ── */
  .stats-bar {
    transition:all 0.3s ease;
  }

  /* ── Header ── */
  .header { transition:box-shadow 0.3s ease; }


  /* ── Alerte cards ── */
  .alerta-card {
    transition:border-color 0.2s ease, transform 0.2s cubic-bezier(0.16,1,0.3,1), box-shadow 0.2s ease;
  }
  .alerta-card:hover {
    transform:translateY(-1px);
    box-shadow:0 4px 16px rgba(0,0,0,0.2);
  }

  /* ── Alerte toggle switch smooth ── */
  .alerta-toggle span { transition:background 0.25s ease; }
  .alerta-toggle span::after { transition:transform 0.25s cubic-bezier(0.16,1,0.3,1); }

  /* ── Inventory detail accounts ── */
  .inv-account-row {
    transition:border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
  }
  .inv-account-row:hover {
    border-color:var(--border-accent);
    background:rgba(255,255,255,0.02);
  }

  /* inventory card stagger handled by premium animation system below */

  /* ── Filter pills ── */
  .filter-btn {
    transition:all 0.2s cubic-bezier(0.16,1,0.3,1);
  }
  .filter-btn.active {
    box-shadow:0 0 0 1px rgba(200,150,46,0.2), 0 2px 8px rgba(200,150,46,0.15);
  }

  /* ── Spawn popout placeholder pulse ── */
  .spawn-popout-placeholder {
    animation:placeholderPulse 2.5s ease-in-out infinite;
  }
  @keyframes placeholderPulse {
    0%,100% { border-color:var(--border); opacity:0.7; }
    50%     { border-color:rgba(200,150,46,0.3); opacity:1; }
  }

  /* ── Spawn cam tag hover ── */
  .spawn-cam-tag {
    transition:transform 0.1s ease, box-shadow 0.15s ease;
    cursor:default;
  }

  /* ── Spawn section titles ── */
  .spawn-section-title {
    transition:color 0.2s ease;
  }

  /* ── Popout button glow when active ── */
  .spawn-popout-btn {
    transition:all 0.2s cubic-bezier(0.16,1,0.3,1);
  }

  /* ── Scrollbar ── */
  ::-webkit-scrollbar { width:5px; height:5px; }
  ::-webkit-scrollbar-track { background:transparent; }
  ::-webkit-scrollbar-thumb {
    background:rgba(255,255,255,0.08);
    border-radius:3px;
    transition:background 0.2s;
  }
  ::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,0.16); }

  /* ── Selection ── */
  ::selection { background:rgba(200,150,46,0.3); color:var(--text); }

  /* ── Subtle border glow on focus-within for sections ── */
  .expiry-widget:hover {
    border-color:rgba(255,255,255,0.1);
  }

  /* ── Smooth number badge pop ── */
  .sidebar-total-badge {
    transition:transform 0.2s cubic-bezier(0.16,1,0.3,1);
  }

  /* ── Gheata add popover animation ── */
  #gheataEntryPop {
    animation:gheataPopIn 0.2s cubic-bezier(0.16,1,0.3,1) both;
  }
  @keyframes gheataPopIn {
    from { opacity:0; transform:scale(0.92) translateY(-6px); }
    to   { opacity:1; transform:scale(1) translateY(0); }
  }

  /* ── Smooth page load ── */
  .main-tabs {
    animation:appLoad 0.3s ease-out 0.1s both;
  }

  /* ── Reduced motion ── */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration:0.01ms !important;
      animation-iteration-count:1 !important;
      transition-duration:0.01ms !important;
    }
  }

  /* ── Spawn History ──────────────────────────────────────────────── */
  .sh-empty {
    text-align:center; color:var(--text-muted); font-size:13px;
    padding:48px 16px; font-family:'Rajdhani',sans-serif;
  }

  /* Legend */
  .sh-legend {
    display:flex; flex-wrap:wrap; align-items:center; gap:12px;
    padding:8px 16px 10px; border-bottom:1px solid var(--border);
    font-family:'Rajdhani',sans-serif;
  }
  .sh-legend-item {
    display:flex; align-items:center; gap:5px;
    font-size:13px; font-weight:600; color:var(--text-dim); white-space:nowrap;
  }
  .sh-legend-sep {
    width:1px; height:14px; background:var(--border-accent); opacity:.4;
  }
  .sh-legend-dot {
    width:10px; height:10px; border-radius:2px; flex-shrink:0;
  }
  .sh-legend-dot-sef { background:rgba(76,175,130,.8); }
  .sh-legend-dot-gen { background:rgba(74,158,255,.75); }

  /* Close button */
  .sh-close-btn {
    width:28px; height:28px; border-radius:5px;
    border:1px solid var(--border); background:transparent;
    color:var(--text-muted); cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:all .12s; padding:0;
  }
  .sh-close-btn:hover {
    border-color:var(--red); color:var(--red);
    background:rgba(224,82,82,.06);
  }

  /* History rows */
  .sh-row {
    display:flex; align-items:center; gap:10px;
    padding:9px 16px; border-bottom:1px solid var(--border);
    font-family:'Rajdhani',sans-serif; transition:background .1s;
  }
  .sh-row:last-child { border-bottom:none; }
  .sh-row:hover { background:rgba(255,255,255,.02); }

  .sh-left {
    display:flex; align-items:center; gap:6px;
    flex-shrink:0; min-width:160px;
  }
  .sh-date {
    font-size:12px; font-weight:600; color:var(--text-dim);
    letter-spacing:.2px; white-space:nowrap;
  }
  .sh-badge {
    font-size:10px; font-weight:800; padding:2px 6px;
    border-radius:3px; letter-spacing:.3px; line-height:1.4;
  }
  .sh-badge-type {
    background:rgba(91,155,213,.12); color:var(--blue);
    border:1px solid rgba(91,155,213,.2);
  }
  .sh-badge-type-dublu {
    background:rgba(224,125,64,.12); color:var(--orange);
    border:1px solid rgba(224,125,64,.2);
  }
  .sh-badge-sef {
    background:rgba(76,175,130,.08); color:var(--green);
    border:1px solid rgba(76,175,130,.15);
  }
  .sh-badge-gen {
    background:rgba(74,158,255,.08); color:#4a9eff;
    border:1px solid rgba(74,158,255,.15);
  }

  /* Date filter */
  .sh-date-filter {
    display:flex; align-items:center; gap:8px;
    padding:6px 10px; margin-bottom:4px;
    background:var(--surface2); border-radius:6px;
    border:1px solid var(--border);
    flex-shrink:0;
  }
  .sh-df-label {
    font-size:11px; font-weight:600; color:var(--text-muted);
    text-transform:uppercase; letter-spacing:.4px; white-space:nowrap;
  }
  .sh-df-input {
    background:var(--surface); border:1px solid var(--border);
    border-radius:4px; color:var(--text); padding:3px 6px;
    font-size:12px; font-family:inherit;
    color-scheme:dark;
  }
  .sh-df-input:focus { border-color:var(--gold); outline:none; }
  .sh-df-sep { color:var(--text-dim); font-size:12px; }
  .sh-df-clear {
    background:none; border:1px solid var(--border); border-radius:4px;
    color:var(--text-muted); font-size:10px; font-weight:600;
    padding:3px 8px; cursor:pointer; text-transform:uppercase;
    letter-spacing:.3px; transition:all .15s;
  }
  .sh-df-clear:hover { border-color:var(--gold); color:var(--gold-light); }

  /* Room chips */
  .sh-chips {
    flex:1; display:grid; grid-template-columns:repeat(6, 1fr); gap:4px;
    min-width:0; overflow:hidden;
  }
  .sh-chip {
    font-size:11px; font-weight:700; padding:2px 7px;
    border-radius:3px; white-space:nowrap; line-height:1.5;
  }
  .sh-chip small {
    font-weight:500; opacity:.6; margin-left:2px; font-size:10px;
  }
  .sh-chip-sef {
    background:rgba(76,175,130,.1); color:var(--green);
    border:1px solid rgba(76,175,130,.18);
  }
  .sh-chip-gen {
    background:rgba(74,158,255,.1); color:#4a9eff;
    border:1px solid rgba(74,158,255,.18);
  }
  .sh-chip-empty { opacity:.15; text-align:center; border:1px solid transparent; }
  .sh-chip-dead { opacity:.4; text-decoration:line-through; }
  .sh-chip-hidden {
    border-color:rgba(224,82,82,.3) !important;
    background:rgba(224,82,82,.1) !important;
    opacity:.6;
  }
  .sh-hidden-icon { font-size:9px; margin-left:2px; }
  .sh-badge-hidden {
    background:rgba(224,82,82,.1); color:var(--red);
    border:1px solid rgba(224,82,82,.2);
  }
  .sh-muted { color:var(--text-muted); font-size:11px; }

  /* Action buttons */
  .sh-right { display:flex; gap:4px; flex-shrink:0; }
  .sh-btn {
    width:26px; height:26px; border-radius:5px;
    border:1px solid var(--border); background:transparent;
    color:var(--text-muted); cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:all .12s; padding:0;
    font-family:'Rajdhani',sans-serif;
  }
  .sh-btn svg { width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; }
  .sh-btn:hover { border-color:var(--text-dim); color:var(--text); }
  .sh-btn-del:hover { border-color:var(--red); color:var(--red); background:rgba(224,82,82,.06); }
  .sh-btn-restore:hover { border-color:var(--green); color:var(--green); background:rgba(76,175,130,.06); }

  /* Tab buttons */
  .spawn-hist-tab-btn {
    font-size:11px; font-weight:600; padding:3px 10px;
    border-radius:4px; border:1px solid var(--border);
    background:transparent; color:var(--text-muted);
    cursor:pointer; transition:all .15s;
    font-family:'Rajdhani',sans-serif;
  }
  .spawn-hist-tab-btn:hover { border-color:var(--gold); color:var(--gold-light); }
  .spawn-hist-tab-btn.active {
    background:rgba(255,200,60,.08); color:var(--gold-light);
    border-color:rgba(255,200,60,.35);
  }
  .spawn-hist-tab-btn--debug { color:var(--red) !important; border-color:rgba(224,82,82,.3) !important; }
  .spawn-hist-tab-btn--debug:hover { border-color:var(--red) !important; }
  .spawn-hist-tab-btn--debug.active {
    background:rgba(224,82,82,.08) !important; color:var(--red) !important;
    border-color:rgba(224,82,82,.4) !important;
  }

  /* ── Type log (admin debug) ─────────────────────────────────────── */
  .type-log-header {
    font-size:11px; font-weight:600; color:var(--text-muted);
    text-transform:uppercase; letter-spacing:.4px;
    padding:8px 12px 6px;
  }
  .type-log-entry {
    display:flex; align-items:center; gap:8px;
    padding:5px 12px; border-bottom:1px solid var(--border);
    font-size:12px;
  }
  .type-log-entry:last-child { border-bottom:none; }
  .type-log-ts {
    color:var(--text-muted); font-family:'Rajdhani',sans-serif;
    font-size:11px; min-width:110px;
  }
  .type-log-arrow {
    color:var(--text-dim); font-size:11px; flex-shrink:0;
  }
  .type-log-reason {
    color:var(--text-dim); font-size:11px; font-style:italic;
  }

  /* ── Checklist tab ──────────────────────────────────────────────── */
  .cl-page { max-width:680px; margin:0 auto; padding:0 4px; }
  .cl-page-header { display:flex; justify-content:flex-end; margin-bottom:20px; }
  .cl-new-btn {
    background:var(--surface2); border:1px solid var(--border-accent);
    color:var(--text-dim); border-radius:var(--radius); padding:7px 14px;
    font-size:12px; font-weight:600; cursor:pointer; transition:border-color .15s, color .15s;
  }
  .cl-new-btn:hover { border-color:var(--gold); color:var(--gold); }
  .cl-list { display:flex; flex-direction:column; gap:14px; }
  .cl-empty { color:var(--text-muted); font-size:13px; text-align:center; padding:40px 0; }
  .cl-card {
    background:var(--surface2); border:1px solid var(--border-accent);
    border-radius:var(--radius-lg); overflow:hidden; transition:border-color .2s;
  }
  .cl-card--done { border-color:rgba(76,175,130,.25); }
  .cl-card-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 14px; gap:10px;
  }
  .cl-card-body {
    overflow:hidden;
    max-height:2000px;
    transition:max-height .32s cubic-bezier(0.4,0,0.2,1), opacity .25s ease;
    opacity:1;
    border-top:1px solid var(--border);
  }
  .cl-card-body--collapsed { max-height:0 !important; opacity:0; border-top-color:transparent; }
  .cl-collapse-btn {
    background:none; border:none; cursor:pointer; color:var(--text-muted);
    padding:2px 4px; flex-shrink:0; display:flex; align-items:center;
    transition:color .15s; border-radius:4px;
  }
  .cl-collapse-btn:hover { color:var(--text); }
  .cl-chevron {
    width:14px; height:14px; display:block;
    transition:transform .28s cubic-bezier(0.4,0,0.2,1);
    transform:rotate(180deg);
  }
  .cl-chevron--up { transform:rotate(0deg); }
  .cl-card-name {
    font-size:14px; font-weight:700; color:var(--text); flex:1;
    outline:none; border-radius:3px; padding:2px 4px; min-width:0;
    transition:background .15s;
  }
  .cl-card-name:focus { background:rgba(255,255,255,.05); }
  .cl-card-actions { display:flex; align-items:center; gap:8px; flex-shrink:0; }
  .cl-progress { font-size:11px; color:var(--text-muted); font-family:'Rajdhani',sans-serif; }
  .cl-progress--done { color:var(--green); }
  .cl-btn {
    background:none; border:1px solid var(--border-accent); border-radius:5px;
    font-size:11px; font-weight:600; cursor:pointer; padding:3px 8px;
    transition:border-color .15s, color .15s; color:var(--text-muted);
  }
  .cl-btn-reset:hover { border-color:var(--gold); color:var(--gold); }
  .cl-btn-del { font-size:13px; padding:2px 7px; }
  .cl-btn-del:hover { border-color:var(--red); color:var(--red); }
  .cl-tasks { padding:6px 0; }
  .cl-no-tasks { font-size:12px; color:var(--text-muted); padding:10px 16px; font-style:italic; }
  .cl-task {
    display:flex; align-items:center; justify-content:space-between;
    padding:6px 14px; gap:8px; transition:background .1s;
  }
  .cl-task:hover { background:rgba(255,255,255,.025); }
  .cl-task-label {
    display:flex; align-items:center; gap:10px; flex:1; cursor:pointer; min-width:0;
  }
  .cl-checkbox {
    width:16px; height:16px; border-radius:4px; border:1.5px solid var(--border-accent);
    flex-shrink:0; display:flex; align-items:center; justify-content:center;
    transition:background .18s, border-color .18s, transform .18s; cursor:pointer;
  }
  .cl-checkbox.checked { background:var(--green); border-color:var(--green); }
  .cl-checkbox.checked::after {
    content:''; display:block; width:4px; height:8px;
    border:2px solid #111; border-top:none; border-left:none;
    transform:rotate(45deg) translate(-1px,-1px);
  }
  .cl-task-name {
    font-size:13px; color:var(--text); flex:1; outline:none;
    border-radius:3px; padding:1px 4px; transition:background .15s, color .2s;
  }
  .cl-task-name:focus { background:rgba(255,255,255,.05); }
  .cl-task--done .cl-task-name { color:var(--text-muted); text-decoration:line-through; }
  .cl-task-del {
    background:none; border:none; color:var(--text-muted); cursor:pointer;
    font-size:14px; padding:0 2px; opacity:0; transition:opacity .15s, color .15s;
    flex-shrink:0;
  }
  .cl-task:hover .cl-task-del { opacity:1; }
  .cl-task-del:hover { color:var(--red); }
  .cl-add-task {
    width:100%; background:none; border:none; border-top:1px solid var(--border);
    color:var(--text-muted); font-size:12px; padding:9px 16px; text-align:left;
    cursor:pointer; transition:color .15s, background .15s;
  }
  .cl-add-task:hover { color:var(--text); background:rgba(255,255,255,.025); }

  /* ── Bell button ─────────────────────────────────────────────── */
  .cl-bell-btn {
    background:none; border:1px solid transparent; border-radius:5px;
    color:var(--text-muted); cursor:pointer; padding:3px 5px;
    display:flex; align-items:center; justify-content:center;
    transition:border-color .15s, color .15s;
  }
  .cl-bell-btn:hover { border-color:var(--border-accent); color:var(--text); }
  .cl-bell-btn--active { color:var(--gold); }
  .cl-bell-btn--active:hover { border-color:var(--gold); }
  .cl-bell-icon { width:14px; height:14px; display:block; }

  /* ── Reminder panel ──────────────────────────────────────────── */
  .cl-rp {
    overflow:hidden; max-height:0;
    transition:max-height .3s cubic-bezier(0.4,0,0.2,1), opacity .25s ease;
    opacity:0; border-bottom:1px solid transparent;
  }
  .cl-rp--open {
    max-height:300px; opacity:1;
    border-bottom-color:var(--border);
  }
  .cl-rp-inner {
    padding:10px 14px 12px; display:flex; flex-direction:column; gap:8px;
  }
  .cl-rp-row {
    display:flex; align-items:center; gap:10px;
    transition:opacity .2s, max-height .2s; overflow:hidden;
  }
  .cl-rp-row--hidden { max-height:0; opacity:0; pointer-events:none; margin:0; padding:0; }
  .cl-rp-label {
    font-size:11px; font-weight:600; color:var(--text-muted);
    text-transform:uppercase; letter-spacing:.04em; width:72px; flex-shrink:0;
  }
  .cl-rp-types { display:flex; gap:4px; flex-wrap:wrap; }
  .cl-rp-type {
    background:var(--surface); border:1px solid var(--border-accent);
    color:var(--text-muted); border-radius:5px; font-size:11px; font-weight:600;
    padding:3px 9px; cursor:pointer; transition:border-color .15s, color .15s, background .15s;
  }
  .cl-rp-type:hover { border-color:var(--gold); color:var(--gold); }
  .cl-rp-type.active { border-color:var(--gold); color:var(--gold); background:rgba(200,150,46,.1); }
  .cl-rp-time {
    background:var(--surface); border:1px solid var(--border-accent);
    color:var(--text); border-radius:5px; font-size:12px; padding:3px 8px;
    outline:none; transition:border-color .15s;
    color-scheme:dark;
  }
  .cl-rp-time:focus { border-color:var(--gold); }
  .cl-rp-select {
    background:var(--surface); border:1px solid var(--border-accent);
    color:var(--text); border-radius:5px; font-size:12px; padding:3px 8px;
    outline:none; cursor:pointer; transition:border-color .15s;
  }
  .cl-rp-select:focus { border-color:var(--gold); }
  .cl-rp-monthday {
    background:var(--surface); border:1px solid var(--border-accent);
    color:var(--text); border-radius:5px; font-size:12px; padding:3px 8px;
    outline:none; width:64px; transition:border-color .15s;
  }
  .cl-rp-monthday:focus { border-color:var(--gold); }
  .cl-rp-footer { display:flex; justify-content:flex-end; margin-top:2px; }
  .cl-rp-save {
    background:rgba(200,150,46,.12); border:1px solid var(--gold);
    color:var(--gold); border-radius:5px; font-size:11px; font-weight:700;
    padding:4px 14px; cursor:pointer; transition:background .15s;
  }
  .cl-rp-save:hover { background:rgba(200,150,46,.22); }

  /* ── Checklist reminder banner ───────────────────────────────── */
  .cl-reminder-banner {
    position:fixed; top:68px; left:50%; z-index:9100;
    transform:translateX(-50%) translateY(calc(-100% - 20px));
    min-width:280px; max-width:400px; width:calc(100% - 32px);
    background:var(--surface2); border:1px solid var(--gold);
    border-radius:var(--radius-lg); overflow:hidden;
    box-shadow:0 8px 32px rgba(0,0,0,.5);
    opacity:0; transition:transform .35s cubic-bezier(0.34,1.56,0.64,1), opacity .3s ease;
  }
  .cl-reminder-banner.cl-rb--visible {
    transform:translateX(-50%) translateY(0); opacity:1;
  }
  .cl-reminder-banner.cl-rb--out {
    transform:translateX(-50%) translateY(calc(-100% - 20px)); opacity:0;
    transition:transform .28s ease, opacity .28s ease;
  }
  .cl-rb-body {
    display:flex; align-items:center; gap:14px; padding:14px 16px;
  }
  .cl-rb-content { flex:1; min-width:0; }
  .cl-rb-label {
    font-size:10px; font-weight:700; color:var(--gold);
    text-transform:uppercase; letter-spacing:.06em; margin-bottom:3px;
  }
  .cl-rb-name {
    font-size:14px; font-weight:700; color:var(--text);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .cl-rb-ok {
    background:rgba(200,150,46,.12); border:1px solid var(--gold);
    color:var(--gold); border-radius:6px; font-size:12px; font-weight:700;
    padding:5px 16px; cursor:pointer; flex-shrink:0;
    transition:background .15s;
  }
  .cl-rb-ok:hover { background:rgba(200,150,46,.25); }
  .cl-rb-progress { height:3px; background:rgba(255,255,255,.06); }
  .cl-rb-bar {
    height:100%; width:100%; background:var(--gold);
    transition:width .08s linear;
  }

  /* ── Checklist animations ─────────────────────────────────────── */
  @keyframes cl-slide-in {
    from { opacity:0; transform:translateY(-8px); }
    to   { opacity:1; transform:translateY(0); }
  }
  @keyframes cl-slide-out {
    from { opacity:1; transform:translateX(0);    max-height:60px; }
    to   { opacity:0; transform:translateX(12px); max-height:0;    margin:0; padding:0; }
  }
  @keyframes cl-card-in {
    from { opacity:0; transform:translateY(-12px) scale(.98); }
    to   { opacity:1; transform:translateY(0)     scale(1); }
  }
  @keyframes cl-card-out {
    from { opacity:1; transform:scale(1);    max-height:800px; }
    to   { opacity:0; transform:scale(.97); max-height:0; margin:0; }
  }
  @keyframes cl-flash {
    0%   { background:transparent; }
    40%  { background:rgba(200,150,46,.12); }
    100% { background:transparent; }
  }
  @keyframes cl-check-pop {
    0%   { transform:scale(1); }
    40%  { transform:scale(1.25); }
    100% { transform:scale(1); }
  }
  .cl-card.cl-anim-in  { animation:cl-card-in  .28s cubic-bezier(0.34,1.56,0.64,1) both; }
  .cl-card.cl-anim-out { animation:cl-card-out .22s ease both; overflow:hidden; }
  .cl-task.cl-anim-in  { animation:cl-slide-in .22s cubic-bezier(0.34,1.56,0.64,1) both; }
  .cl-task.cl-anim-out { animation:cl-slide-out .2s ease both; overflow:hidden; pointer-events:none; }
  .cl-task.cl-anim-reset { animation:cl-flash .38s ease both; }
  .cl-checkbox.cl-anim-check { animation:cl-check-pop .2s ease both; }

  /* ── Probability stats ─────────────────────────────────────────── */
  .sp-prob-summary {
    display:flex; align-items:center; gap:6px;
    padding:8px 16px 10px; font-size:12px; font-weight:600;
    color:var(--text-muted); font-family:'Rajdhani',sans-serif;
  }
  .sp-dot { opacity:.3; }
  .sp-prob-legend { display:inline-flex; align-items:center; gap:3px; }

  .sp-prob-stats {
    display:flex; gap:12px; padding:6px 16px 12px;
  }
  .sp-stat-card {
    flex:1; background:var(--surface); border:1px solid var(--border);
    border-radius:var(--radius); padding:10px 14px; text-align:center;
  }
  .sp-stat-val {
    font-family:'Rajdhani',sans-serif; font-size:22px; font-weight:700; line-height:1.2;
  }
  .sp-stat-label {
    font-size:11px; color:var(--text-muted); font-weight:600; letter-spacing:.3px; margin-top:2px;
  }
  .sp-stat-sub {
    font-size:10px; color:var(--text-muted); opacity:.6; margin-top:2px;
  }

  .sp-prob-list { padding:0 16px; }
  .sp-prob-item {
    display:flex; align-items:center; gap:10px;
    padding:7px 0; border-bottom:1px solid var(--border);
    font-family:'Rajdhani',sans-serif; font-size:13px;
  }
  .sp-prob-item:last-child { border-bottom:none; }

  .sp-prob-room {
    width:32px; text-align:center; font-weight:800; font-size:14px;
    color:var(--text);
  }
  .sp-top1 .sp-prob-room { color:var(--gold-light); }
  .sp-top2 .sp-prob-room { color:var(--text); }
  .sp-top3 .sp-prob-room { color:var(--text-dim); }

  .sp-prob-bar-track {
    flex:1; display:flex; height:10px; border-radius:2px;
    background:var(--surface3); overflow:hidden;
  }
  .sp-prob-bar { height:100%; transition:width .3s; }
  .sp-bar-sef { background:rgba(76,175,130,.65); }
  .sp-bar-gen { background:rgba(74,158,255,.6); }
  .sp-top1 .sp-bar-sef { background:rgba(76,175,130,.85); }
  .sp-top1 .sp-bar-gen { background:rgba(74,158,255,.8); }

  .sp-prob-pct {
    width:42px; text-align:right; font-weight:700; font-size:12px;
    color:var(--text-dim);
  }
  .sp-top1 .sp-prob-pct { color:var(--gold-light); }

  .sp-prob-detail {
    width:60px; text-align:right; font-size:11px; font-weight:600;
    display:flex; align-items:center; justify-content:flex-end; gap:3px;
  }
  .sp-c-sef { color:var(--green); }
  .sp-c-gen { color:#4a9eff; }
  .sp-c-sep { color:var(--text-muted); opacity:.4; font-size:10px; }

  /* ── Spawn MMSS input validation transition ── */
  .spawn-mmss {
    transition:border-color .2s ease, color .2s ease, box-shadow .2s ease;
  }
  .spawn-mmss:focus {
    box-shadow:0 0 0 2px rgba(200,150,46,0.12);
  }

  /* ── CH label click flash ── */
  .spawn-ch-clickable {
    transition:background .15s ease, color .15s ease;
  }
  .spawn-ch-clickable:hover {
    color:var(--gold-light);
    background:rgba(200,150,46,0.06);
  }
  .spawn-ch-clickable.ch-flash-ok {
    background:rgba(76,175,130,0.15)!important;
    color:var(--green)!important;
  }

  /* ── Expiry widget transitions ── */

  /* ── Card hover lift ── */
  .inv-card {
    transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  }
  .inv-card:hover {
    transform:translateY(-1px);
    box-shadow:0 6px 20px rgba(0,0,0,0.25);
    border-color:rgba(255,255,255,0.08);
  }

  /* (tab-btn underline removed — using pill tabs) */

  /* ── Update card (bottom-right floating) ── */
  #updateBanner {
    position: fixed;
    bottom: 68px;
    right: 20px;
    z-index: 100000;
    width: 280px;
    background: var(--surface2, #13141a);
    border: 1px solid rgba(200,150,46,0.35);
    border-left: 3px solid var(--gold, #c8962e);
    border-radius: 10px;
    padding: 14px 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.55), 0 0 0 1px rgba(200,150,46,0.08);
    font-family: 'Inter', sans-serif;
    animation: updateCardIn .4s cubic-bezier(0.16,1,0.3,1) both;
  }
  @keyframes updateCardIn {
    from { opacity:0; transform:translateY(16px) scale(0.96); }
    to   { opacity:1; transform:translateY(0)    scale(1); }
  }
  .update-card-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 6px;
  }
  .update-card-title {
    font-size: 13px; font-weight: 700;
    color: var(--gold-light, #f0c850);
    font-family: 'Rajdhani', sans-serif;
    letter-spacing: 0.3px;
  }
  .update-card-dismiss {
    background: none; border: none; cursor: pointer;
    color: var(--text-muted, #888); font-size: 16px;
    line-height: 1; padding: 0; transition: color .15s;
  }
  .update-card-dismiss:hover { color: var(--text, #e0e0e0); }
  .update-card-versions {
    font-size: 11px; color: var(--text-dim, #aaa);
    margin-bottom: 12px; letter-spacing: 0.2px;
  }
  .update-card-versions strong { color: var(--text, #e0e0e0); font-weight: 600; }
  .update-card-reload {
    width: 100%;
    background: var(--gold, #c8962e); color: #000;
    border: none; border-radius: 6px;
    padding: 7px 0; font-size: 12px; font-weight: 700;
    cursor: pointer; font-family: 'Rajdhani', sans-serif;
    letter-spacing: 0.5px; text-transform: uppercase;
    transition: opacity .15s;
  }
  .update-card-reload:hover { opacity: .85; }

  /* ═══════════════════════════════════════════════
     SERVER STATUS MONITOR
     ═══════════════════════════════════════════════ */
  .ss-topbar {
    display:flex; align-items:center; justify-content:space-between;
    gap:12px; margin-bottom:12px; flex-wrap:wrap;
  }
  .ss-topbar-right { display:flex; align-items:center; gap:10px; }
  .ss-admin-controls {
    display:inline-flex; align-items:center; gap:8px;
  }
  .ss-server-select { display:flex; gap:10px; flex-wrap:wrap; }
  .ss-srv-label {
    font-size:11px; color:var(--text-dim); cursor:pointer;
    display:flex; align-items:center; gap:4px;
    padding:4px 8px; border-radius:5px;
    background:var(--surface2); border:1px solid var(--border-accent);
    transition:all .15s;
  }
  .ss-srv-label:hover { border-color:var(--gold); color:var(--gold-light); }
  .ss-srv-cb {
    accent-color:var(--gold);
    -webkit-appearance:none; appearance:none;
    width:14px; height:14px; border-radius:3px;
    border:1.5px solid var(--border-accent);
    background:var(--surface); cursor:pointer;
    display:inline-flex; align-items:center; justify-content:center;
    transition:all .15s; flex-shrink:0; position:relative;
  }
  .ss-srv-cb:checked {
    background:var(--gold); border-color:var(--gold);
  }
  .ss-srv-cb:checked::after {
    content:''; display:block; width:4px; height:7px;
    border:solid #0a0b0e; border-width:0 2px 2px 0;
    transform:rotate(45deg); margin-top:-1px;
  }
  .ss-srv-cb:hover { border-color:var(--gold); }
  .ss-dur-wrap { display:flex; align-items:center; gap:6px; }
  .ss-dur-label { font-size:11px; color:var(--text-muted); }
  .ss-dur-select {
    background:var(--surface2); color:var(--text-main); border:1px solid var(--border-accent);
    border-radius:6px; padding:4px 8px; font-size:12px; font-family:inherit;
  }
  .ss-status-wrap { display:flex; align-items:center; gap:6px; }
  .ss-status-dot {
    width:8px; height:8px; border-radius:50%;
    background:var(--text-muted); transition:background .3s;
  }
  .ss-status-text { font-size:11px; color:var(--text-muted); transition:color .3s; }
  .ss-status-text.ss-active-leader { color:#4caf82; }
  .ss-status-text.ss-active-other { color:#4a9eff; }
  .ss-status-text.ss-stopped { color:var(--text-muted); }
  .ss-btn {
    padding:7px 16px; border-radius:8px; border:1px solid; font-size:12px;
    font-family:'Rajdhani',sans-serif; font-weight:600; cursor:pointer;
    text-transform:uppercase; letter-spacing:.5px; transition:all .15s;
  }
  .ss-btn:disabled { opacity:.4; cursor:not-allowed; }
  .ss-btn-start {
    background:rgba(76,175,130,.12); color:#4caf82; border-color:rgba(76,175,130,.25);
  }
  .ss-btn-start:hover:not(:disabled) { background:rgba(76,175,130,.2); border-color:rgba(76,175,130,.4); }
  .ss-btn-stop {
    background:rgba(224,82,82,.12); color:var(--red); border-color:rgba(224,82,82,.25);
  }
  .ss-btn-stop:hover { background:rgba(224,82,82,.2); border-color:rgba(224,82,82,.4); }

  /* Grid */
  .ss-grid {
    display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
    gap:12px;
  }
  .ss-card {
    background:var(--surface2); border:1px solid var(--border-accent);
    border-radius:10px; padding:14px; transition:border-color .2s;
  }
  .ss-card:hover { border-color:rgba(200,150,46,.25); }
  .ss-card-header {
    display:flex; align-items:center; gap:8px; margin-bottom:12px;
    padding-bottom:10px; border-bottom:1px solid var(--border-accent);
  }
  .ss-card-title {
    font-family:'Rajdhani',sans-serif; font-size:15px; font-weight:700;
    color:var(--gold-light); letter-spacing:.5px; flex:1;
  }
  .ss-login-label { font-size:10px; color:var(--text-muted); }
  .ss-channels {
    display:flex; flex-direction:column; gap:4px;
  }
  .ss-ch {
    display:flex; align-items:center; gap:10px;
    padding:8px 12px; border-radius:6px;
    background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.04);
    transition:all .3s;
  }
  .ss-ch-online {
    background:rgba(76,175,130,.06); border-color:rgba(76,175,130,.15);
  }
  .ss-ch-offline {
    background:rgba(224,82,82,.04); border-color:rgba(224,82,82,.1);
  }
  .ss-ch-num {
    font-family:'Rajdhani',sans-serif; font-size:13px; font-weight:600;
    color:var(--text-dim); min-width:28px;
  }
  .ss-ch-time { font-size:9px; color:var(--text-muted); margin-left:auto; }

  /* Status dots */
  .ss-dot {
    width:8px; height:8px; border-radius:50%; flex-shrink:0;
    transition:background .3s, box-shadow .3s;
  }
  .ss-dot-online { background:#4caf82; box-shadow:0 0 6px rgba(76,175,130,.5); }
  .ss-dot-offline { background:#e05252; box-shadow:0 0 6px rgba(224,82,82,.3); }
  .ss-dot-unknown { background:var(--text-muted); opacity:.4; }
  .ss-ch-dot { width:6px; height:6px; }

  @keyframes ssPulse {
    0%,100% { box-shadow:0 0 4px rgba(76,175,130,.4); }
    50% { box-shadow:0 0 12px rgba(76,175,130,.8); }
  }
  .ss-dot-online { animation:ssPulse 2s ease-in-out infinite; }

  .ss-empty {
    text-align:center; padding:40px; color:var(--text-muted); font-size:13px;
  }

  /* Corner notifications (bottom-right) */
  .ss-corner-notifs {
    position:fixed; bottom:16px; right:16px; z-index:90000;
    display:flex; flex-direction:column-reverse; gap:8px;
    pointer-events:none;
  }
  .ss-corner-notif {
    display:flex; align-items:center; gap:8px;
    background:var(--surface2); border:1px solid rgba(76,175,130,.25);
    border-radius:8px; padding:10px 16px;
    font-size:12px; color:#4caf82;
    box-shadow:0 4px 16px rgba(0,0,0,.4);
    animation:ssCnSlideIn .3s ease both;
    pointer-events:auto;
  }
  .ss-cn-dot { width:6px; height:6px; flex-shrink:0; }
  .ss-cn-text { white-space:nowrap; }
  .ss-cn-fade { opacity:0; transition:opacity .4s; }
  @keyframes ssCnSlideIn {
    from { opacity:0; transform:translateX(20px); }
    to { opacity:1; transform:translateX(0); }
  }

  /* Admin */
  .ss-admin-section { display:flex; align-items:center; gap:8px; }
  .ss-pin-wrap { display:flex; align-items:center; gap:6px; }
  .ss-pin-input {
    width:90px; padding:5px 8px; border-radius:6px; font-size:12px;
    background:var(--surface2); border:1px solid var(--border-accent);
    color:var(--text-main); font-family:inherit; text-align:center;
    letter-spacing:2px;
  }
  .ss-pin-input:focus { border-color:var(--gold); outline:none; }
  .ss-btn-admin {
    background:rgba(200,150,46,.12); color:var(--gold); border-color:rgba(200,150,46,.25);
  }
  .ss-btn-admin:hover { background:rgba(200,150,46,.2); border-color:rgba(200,150,46,.4); }
  .ss-btn-admin-out {
    background:rgba(255,255,255,.04); color:var(--text-muted); border-color:var(--border-accent);
    font-size:10px !important; padding:4px 10px !important;
  }
  .ss-btn-admin-out:hover { color:var(--red); border-color:rgba(224,82,82,.3); }
  .ss-admin-badge {
    font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:1px;
    color:#4caf82; background:rgba(76,175,130,.1); border:1px solid rgba(76,175,130,.2);
    padding:3px 8px; border-radius:4px;
  }
  /* Volume control */
  .ss-vol-wrap {
    display:inline-flex; align-items:center; gap:6px;
    padding:5px 10px; margin-bottom:14px;
    background:var(--surface2); border:1px solid var(--border-accent);
    border-radius:6px; width:auto;
  }
  .ss-vol-icon { color:var(--text-muted); flex-shrink:0; }
  .ss-vol-slider {
    -webkit-appearance:none; appearance:none;
    width:80px; height:3px; border-radius:2px;
    background:var(--border-accent); outline:none;
  }
  .ss-vol-slider::-webkit-slider-thumb {
    -webkit-appearance:none; appearance:none;
    width:12px; height:12px; border-radius:50%;
    background:var(--gold); cursor:pointer;
    border:none; box-shadow:0 0 4px rgba(200,150,46,.3);
  }
  .ss-vol-slider::-moz-range-thumb {
    width:12px; height:12px; border-radius:50%;
    background:var(--gold); cursor:pointer; border:none;
  }
  .ss-vol-val { font-size:10px; color:var(--text-muted); min-width:28px; }
  .ss-vol-test {
    font-size:10px; padding:3px 8px; border-radius:4px;
    background:rgba(255,255,255,.04); border:1px solid var(--border-accent);
    color:var(--text-muted); cursor:pointer; font-family:inherit;
    transition:all .15s;
  }
  .ss-vol-test:hover { color:var(--gold); border-color:var(--gold); }

  .ss-admin-lock {
    cursor:pointer; color:var(--text-muted); opacity:.4;
    padding:4px; border-radius:4px; transition:all .2s;
    display:flex; align-items:center;
  }
  .ss-admin-lock:hover { opacity:.8; color:var(--gold); }
  .ss-pin-hidden { display:none !important; }

  /* ============ TRANSFER TRACKING ============ */
  .tf-info-bar {
    display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:20px;
  }
  .tf-info-item {
    background:var(--surface2);
    border:1px solid var(--border); border-left:2px solid rgba(200,150,46,0.25);
    border-radius:12px; padding:16px 18px;
    display:flex; flex-direction:column; gap:4px;
    transition:border-left-color .2s;
  }
  .tf-info-item:hover { border-left-color:var(--gold); }
  .tf-info-label {
    font-size:10px; text-transform:uppercase; letter-spacing:1px;
    color:var(--text-muted); font-weight:600;
  }
  .tf-info-value {
    font-size:16px; font-weight:700; color:var(--text);
    font-family:'Rajdhani',sans-serif; line-height:1.2;
  }
  .tf-info-value.tf-info-number { font-size:28px; font-weight:800; color:var(--gold-light); }
  .tf-info-sub { font-size:11px; color:var(--text-muted); margin-top:1px; }
  .tf-reset-btn {
    margin-top:6px; font-size:10px; font-weight:700; font-family:'Rajdhani',sans-serif;
    color:var(--text-muted); background:none; border:1px solid var(--border);
    border-radius:6px; padding:4px 10px; cursor:pointer; text-transform:uppercase;
    letter-spacing:0.5px; transition:all .15s; align-self:flex-start;
  }
  .tf-reset-btn:hover { border-color:var(--gold); color:var(--gold); }
  .tf-filter-bar {
    display:flex; align-items:center; gap:6px; flex-wrap:wrap;
    margin-bottom:16px;
  }
  .tf-filter-label {
    font-size:12px; color:var(--text-muted); font-weight:500;
    margin-right:4px;
  }
  .tf-filter-btn {
    padding:5px 12px; border-radius:6px; border:1px solid var(--border);
    background:var(--surface); color:var(--text-muted);
    font-family:'Rajdhani',sans-serif; font-size:12px; font-weight:600;
    cursor:pointer; transition:all .15s;
  }
  .tf-filter-btn:hover { border-color:var(--gold); color:var(--gold); }
  .tf-filter-btn.active {
    background:rgba(200,150,46,0.15); border-color:var(--gold);
    color:var(--gold);
  }
  .tf-section {
    background:var(--surface); border:1px solid var(--border);
    border-radius:12px; padding:16px 20px; margin-bottom:16px;
  }
  .tf-section-title {
    font-family:'Rajdhani',sans-serif; font-size:14px; font-weight:700;
    text-transform:uppercase; letter-spacing:0.8px;
    color:var(--text-dim); margin-bottom:14px;
  }
  .tf-table-wrap { overflow-x:auto; }
  .tf-table {
    width:100%; border-collapse:collapse;
    font-size:13px; font-family:'Inter',sans-serif;
  }
  .tf-table th {
    text-align:left; padding:8px 12px;
    font-size:11px; text-transform:uppercase; letter-spacing:0.5px;
    color:var(--text-muted); border-bottom:1px solid var(--border);
    font-weight:500;
  }
  .tf-table td {
    padding:10px 12px; border-bottom:1px solid rgba(255,255,255,0.04);
    color:var(--text);
  }
  .tf-table tbody tr:hover { background:rgba(200,150,46,0.04); }
  .tf-row--expanded { background:rgba(200,150,46,0.06) !important; }
  .tf-expand-icon { color:var(--text-muted); font-size:10px; text-align:right; width:20px; }
  .tf-detail-row td { padding:0 !important; border-bottom:1px solid var(--border); }
  .tf-detail { display:flex; flex-wrap:wrap; gap:4px 20px; padding:10px 14px; background:rgba(0,0,0,0.15); }
  .tf-detail-item { display:flex; flex-direction:column; min-width:100px; }
  .tf-detail-label { font-size:10px; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.4px; margin-bottom:2px; }
  .tf-detail-val { font-size:13px; color:var(--text); font-weight:500; }
  .tf-detail-delta--pos { color:#7ecf9a; }
  .tf-name, .tf-name-cell { font-weight:600; color:var(--gold-light); }
  .tf-name-after {
    font-weight:400; font-size:11px; color:var(--text-muted); font-style:italic;
  }
  .tf-matched-badge {
    display:inline-block; font-size:10px; font-weight:700;
    padding:1px 5px; border-radius:3px; margin-left:4px;
    font-family:'Rajdhani',sans-serif; letter-spacing:0.3px; cursor:default;
  }
  .tf-conf--high { background:rgba(76,175,130,0.15); color:#4caf82; border:1px solid rgba(76,175,130,0.3); }
  .tf-conf--mid  { background:rgba(200,150,46,0.15);  color:var(--gold); border:1px solid rgba(200,150,46,0.3); }
  .tf-conf--low  { background:rgba(220,40,40,0.12);   color:var(--red);  border:1px solid rgba(220,40,40,0.25); }
  .tf-server { font-weight:500; }
  .tf-from { color:var(--red, #e05252); }
  .tf-to { color:var(--green, #4caf82); }
  .tf-arrow {
    text-align:center; font-size:16px;
    color:var(--text-muted); padding:10px 4px;
  }
  .tf-champ {
    font-weight:600; color:var(--gold);
    font-family:'Rajdhani',sans-serif; font-size:14px;
  }
  .tf-rank { color:var(--text-muted); font-size:12px; }
  .tf-empty {
    text-align:center; padding:40px 20px;
  }
  .tf-empty-icon { font-size:36px; margin-bottom:12px; opacity:0.4; }
  .tf-empty-text {
    font-family:'Rajdhani',sans-serif; font-size:16px; font-weight:600;
    color:var(--text); margin-bottom:6px;
  }
  .tf-empty-sub {
    font-size:12px; color:var(--text-muted); max-width:320px; margin:0 auto;
  }
  .tf-history-entry {
    padding:10px 0; border-bottom:1px solid rgba(255,255,255,0.04);
  }
  .tf-history-entry:last-child { border-bottom:none; }
  .tf-history-date {
    font-family:'Rajdhani',sans-serif; font-weight:600; font-size:13px;
    color:var(--text-dim); margin-bottom:6px;
  }
  .tf-history-none {
    font-size:12px; color:var(--text-muted); font-style:italic;
  }
  .tf-history-list {
    display:flex; flex-direction:column; gap:4px;
  }
  .tf-history-item {
    font-size:12px; color:var(--text); padding:4px 0;
  }
  .tf-nc-list { display:flex; flex-direction:column; gap:0; border-radius:10px; overflow:hidden; border:1px solid var(--border); }
  .tf-nc-row {
    background:rgba(255,255,255,0.015); border-bottom:1px solid rgba(255,255,255,0.04);
    cursor:pointer; transition:background 0.15s;
  }
  .tf-nc-row:last-child { border-bottom:none; }
  .tf-nc-row:hover, .tf-nc-row--open { background:rgba(200,150,46,0.04); }
  .tf-nc-main {
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 14px; gap:12px;
  }
  .tf-nc-names { display:flex; align-items:center; gap:8px; flex:1; min-width:0; }
  .tf-nc-old { font-weight:600; color:var(--text-dim); font-size:13px; }
  .tf-nc-arrow { color:var(--text-muted); font-size:14px; flex-shrink:0; }
  .tf-nc-new { font-weight:700; color:var(--gold-light, #e8bc6a); font-size:13px; }
  .tf-nc-meta { display:flex; align-items:center; gap:8px; flex-shrink:0; }
  .tf-nc-srv { font-size:11px; color:var(--text-muted); }
  .tf-nc-chevron { font-size:11px; color:var(--text-muted); width:12px; text-align:center; }
  .tf-nc-details {
    display:flex; flex-wrap:wrap; gap:4px 20px;
    padding:8px 14px 12px; background:rgba(0,0,0,0.12);
    border-top:1px solid rgba(255,255,255,0.04);
  }
  .tf-champ-badge {
    display:inline-block; background:rgba(200,150,46,0.15);
    color:var(--gold); font-size:11px; font-weight:600;
    padding:1px 6px; border-radius:4px;
    font-family:'Rajdhani',sans-serif;
  }
  .tf-how { background:rgba(200,150,46,0.03); border-color:rgba(200,150,46,0.12); }
  .tf-how-grid {
    display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:16px;
  }
  .tf-how-step {
    display:flex; gap:12px; align-items:flex-start;
  }
  .tf-how-num {
    width:28px; height:28px; flex-shrink:0;
    background:rgba(200,150,46,0.15); color:var(--gold);
    border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-family:'Rajdhani',sans-serif; font-weight:700; font-size:14px;
  }
  .tf-how-desc {
    font-size:12px; color:var(--text-muted); line-height:1.5;
  }
  .tf-how-desc b { color:var(--text); font-weight:600; }

  /* ── Test Scrape section ── */
  .tf-test-section { border-color:rgba(100,140,220,0.15); }
  .tf-test-desc { font-size:12px; color:var(--text-muted); margin-bottom:14px; line-height:1.5; }
  .tf-test-btn { font-size:12px; padding:8px 18px; }
  .tf-test-btn:disabled { opacity:0.5; cursor:not-allowed; }
  .tf-test-meta { margin-top:16px; font-size:11px; color:var(--text-muted); margin-bottom:12px; }
  .tf-test-error { margin-top:12px; padding:10px 14px; background:rgba(220,40,40,0.1); border:1px solid rgba(220,40,40,0.25); border-radius:6px; font-size:12px; color:var(--red); }
  .tf-test-servers { display:flex; flex-direction:column; gap:12px; margin-top:4px; }
  .tf-test-server { border:1px solid var(--border); border-radius:8px; overflow:hidden; }
  .tf-test-srv-header { display:flex; align-items:center; gap:10px; padding:8px 14px; background:rgba(255,255,255,0.03); flex-wrap:wrap; }
  .tf-test-srv-name { font-family:'Rajdhani',sans-serif; font-weight:700; font-size:13px; color:var(--text); }
  .tf-test-srv-count { font-size:11px; color:var(--text-muted); margin-left:auto; }
  .tf-test-srv-update { font-size:11px; color:var(--text-muted); }
  .tf-test-srv-error { font-size:11px; color:var(--red); }
  .tf-test-players { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:0; }
  .tf-test-player { display:flex; align-items:center; gap:8px; padding:5px 14px; border-top:1px solid rgba(255,255,255,0.04); font-size:12px; }
  .tf-test-rank { font-size:11px; color:var(--text-muted); width:32px; flex-shrink:0; }
  .tf-test-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text); }
  .tf-test-cl { font-size:11px; color:var(--gold); font-weight:600; flex-shrink:0; }
  .tf-test-lvl { font-size:11px; color:var(--text-muted); flex-shrink:0; }

  /* ── Admin Trigger Scrape section ── */
  .tf-admin-section { border:none; padding:0; background:transparent; box-shadow:none; }
  .tf-section-title-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
  .tf-force-refresh-btn { font-size:11px; padding:5px 12px; }
  .tf-action-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:20px; }
  .tf-action-card--wide { grid-column:1 / -1; display:grid; grid-template-columns:auto 1fr; gap:20px; align-items:start; }
  .tf-scan-settings { display:flex; flex-direction:column; gap:8px; }
  .tf-scan-label { font-size:10px; text-transform:uppercase; letter-spacing:1px; color:var(--text-muted); font-weight:600; }
  .tf-scan-day-btns { display:flex; gap:4px; flex-wrap:wrap; }
  .tf-scan-day-btn { padding:5px 10px; border-radius:6px; background:var(--surface3); border:1px solid var(--border); font-size:11px; font-weight:700; color:var(--text-muted); cursor:pointer; transition:all .15s; font-family:'Rajdhani',sans-serif; }
  .tf-scan-day-btn:hover { border-color:var(--gold); color:var(--gold); }
  .tf-scan-day-btn.active { background:var(--gold-dim); border-color:var(--gold); color:var(--gold-light); }
  .tf-scan-next { display:flex; flex-direction:column; gap:6px; }
  .tf-scan-next-row { display:flex; flex-direction:column; gap:2px; padding:8px 12px; background:var(--surface3); border-radius:8px; border:1px solid var(--border); }
  .tf-scan-next-lbl { font-size:9px; text-transform:uppercase; letter-spacing:1px; color:var(--text-muted); font-weight:700; }
  .tf-scan-next-val { font-size:13px; font-weight:700; color:var(--gold); font-family:'Rajdhani',sans-serif; }
  .tf-action-card {
    background:var(--surface2); border:1px solid var(--border);
    border-top:2px solid rgba(200,150,46,0.3); border-radius:14px;
    padding:18px 20px; display:flex; flex-direction:column; gap:10px;
  }
  .tf-action-card-title {
    font-size:10px; text-transform:uppercase; letter-spacing:1.5px;
    color:var(--text-muted); font-weight:700;
  }
  .tf-action-card-btns { display:flex; gap:8px; }
  .tf-admin-btn {
    flex:1; padding:9px 16px; background:var(--surface);
    border:1px solid var(--border-accent); border-radius:8px;
    color:var(--text-dim); font-family:'Rajdhani',sans-serif;
    font-size:12px; font-weight:700; cursor:pointer;
    transition:all .15s; letter-spacing:0.3px;
  }
  .tf-admin-btn:hover:not(:disabled) { border-color:var(--gold); color:var(--gold); background:var(--gold-dim); }
  .tf-admin-btn:disabled { opacity:0.4; cursor:not-allowed; }
  .tf-admin-btn.full { flex:none; width:100%; padding:10px; font-size:13px; letter-spacing:0.5px; }
  .tf-scrape-history { display:flex; flex-direction:column; gap:3px; padding-top:2px; }
  .tf-scrape-hist-row { display:flex; align-items:center; gap:8px; }
  .tf-scrape-hist-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--text-muted); min-width:46px; }
  .tf-scrape-hist-val { font-size:11px; color:var(--text-dim); }
  .tf-scrape-hist-none { font-size:11px; color:var(--text-muted); font-style:italic; }
  .tf-trigger-status { font-size:11px; padding:7px 12px; border-radius:6px; }
  .tf-trigger-loading { color:var(--text-muted); background:rgba(255,255,255,0.03); }
  .tf-trigger-ok { color:#4caf82; background:rgba(76,175,130,0.07); border:1px solid rgba(76,175,130,0.15); }
  .tf-trigger-err { color:#e05252; background:rgba(220,40,40,0.07); border:1px solid rgba(220,40,40,0.15); }
  .tf-date-chips { display:flex; gap:6px; flex-wrap:wrap; }
  .tf-date-chip {
    padding:4px 10px; border-radius:6px; background:var(--surface3);
    border:1px solid var(--border); font-size:11px; font-weight:600;
    color:var(--text-muted); cursor:pointer; transition:all .15s;
    display:flex; align-items:center; gap:6px;
  }
  .tf-date-chip:hover { border-color:var(--gold); color:var(--text); }
  .tf-date-chip.active { background:var(--gold-dim); border-color:var(--gold); color:var(--gold-light); }
  .tf-date-chip-dots { display:flex; gap:2px; align-items:center; }
  .tf-date-chip-dot { width:5px; height:5px; border-radius:50%; background:var(--border-accent); }
  .tf-date-chip-dot.on { background:var(--gold); }
  .tf-date-chips-loading { font-size:11px; color:var(--text-muted); font-style:italic; }
  .tf-info-local { color:var(--gold); }
  @media (max-width:700px) { .tf-action-grid { grid-template-columns:1fr; } }
  /* ── Snapshot loader ── */
  .tf-snapshot-loader { display:flex; flex-direction:column; gap:8px; }
  .tf-snapshot-loader-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .tf-date-input {
    background:var(--card-bg); border:1px solid var(--border); border-radius:6px;
    color:var(--text); padding:6px 10px; font-size:13px; font-family:inherit;
  }
  .tf-date-input:focus { outline:none; border-color:var(--gold); }
  .tf-snapshot-or { font-size:12px; color:var(--text-muted); }
  .tf-link-btn { background:none; border:none; color:var(--gold); font-size:12px; cursor:pointer; padding:0; text-decoration:underline; }
  .tf-link-btn:hover { opacity:0.75; }

  /* ── Snapshot viewer ── */
  .ss-topbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
  .ss-topbar-info { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
  .ss-type-badge {
    font-size:10px; font-weight:700; letter-spacing:.8px; text-transform:uppercase;
    padding:2px 8px; border-radius:4px;
  }
  .ss-type-badge--before { background:rgba(200,150,46,0.15); color:var(--gold); border:1px solid rgba(200,150,46,0.3); }
  .ss-type-badge--after  { background:rgba(76,175,130,0.12); color:#4caf82; border:1px solid rgba(76,175,130,0.25); }
  .ss-topbar-date { font-size:12px; color:var(--text-muted); }
  .ss-topbar-cmp { font-size:11px; color:var(--text-muted); padding:2px 7px; border-radius:4px; background:rgba(255,255,255,0.04); border:1px solid var(--border); }
  .ss-topbar-cmp--btn { cursor:pointer; transition:background 0.15s, color 0.15s; }
  .ss-topbar-cmp--btn:hover { background:rgba(255,255,255,0.09); color:var(--text); }
  .ss-close-btn {
    background:none; border:1px solid var(--border); border-radius:5px;
    color:var(--text-muted); width:26px; height:26px; cursor:pointer;
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .ss-close-btn:hover { border-color:var(--red); color:var(--red); }
  .ss-legend { display:flex; gap:8px; margin-bottom:12px; flex-wrap:wrap; }
  .ss-legend-item { font-size:11px; font-weight:600; padding:4px 10px; border-radius:5px; cursor:pointer; transition:background .15s, border-color .15s; }
  .ss-legend--all { color:var(--text-muted); background:rgba(255,255,255,0.05); border:1px solid var(--border); }
  .ss-legend--all:hover, .ss-legend--all.ss-legend--active { color:var(--text); background:rgba(255,255,255,0.12); border-color:rgba(255,255,255,0.25); }
  .ss-legend--disparut { color:var(--red); background:rgba(220,40,40,0.08); border:1px solid rgba(220,40,40,0.2); }
  .ss-legend--disparut:hover, .ss-legend--disparut.ss-legend--active { background:rgba(220,40,40,0.22); border-color:var(--red); }
  .ss-legend--nou { color:#4caf82; background:rgba(76,175,130,0.08); border:1px solid rgba(76,175,130,0.2); }
  .ss-legend--nou:hover, .ss-legend--nou.ss-legend--active { background:rgba(76,175,130,0.22); border-color:#4caf82; }

  .ss-srv-tabs { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
  .ss-srv-tab {
    background:none; border:1px solid var(--border); border-radius:6px;
    color:var(--text-muted); font-size:12px; padding:5px 12px; cursor:pointer;
    transition:border-color .15s, color .15s, background .15s;
  }
  .ss-srv-tab:hover { border-color:var(--gold); color:var(--gold); }
  .ss-srv-tab.active { background:rgba(200,150,46,0.1); border-color:var(--gold); color:var(--gold); font-weight:600; }

  .ss-search-wrap { position:relative; margin-bottom:14px; }
  .ss-search-icon { position:absolute; left:10px; top:50%; transform:translateY(-50%); color:var(--text-muted); pointer-events:none; }
  .ss-search-input {
    width:100%; box-sizing:border-box; padding:8px 12px 8px 32px;
    background:var(--card-bg); border:1px solid var(--border); border-radius:7px;
    color:var(--text); font-size:13px; font-family:inherit; outline:none;
    transition:border-color .15s;
  }
  .ss-search-input:focus { border-color:var(--gold); }

  @keyframes ss-body-in {
    from { opacity:0; transform:translateY(6px); }
    to   { opacity:1; transform:translateY(0); }
  }
  .ss-body--anim { animation: ss-body-in 0.22s cubic-bezier(0.16,1,0.3,1) both; }

  .ss-srv-block { margin-bottom:20px; }
  .ss-srv-header { display:flex; align-items:center; gap:8px; margin-bottom:10px; flex-wrap:wrap; }
  .ss-srv-name { font-family:'Rajdhani',sans-serif; font-size:15px; font-weight:700; color:var(--text); }
  .ss-srv-badge { font-size:11px; font-weight:600; padding:2px 8px; border-radius:4px; }
  .ss-srv-badge--total { color:var(--text-muted); background:rgba(255,255,255,0.05); border:1px solid var(--border); }
  .ss-srv-badge--total:hover, .ss-srv-badge--total.ss-srv-badge--active { color:var(--text); background:rgba(255,255,255,0.1); border-color:rgba(255,255,255,0.2); }
  .ss-srv-badge--disparut { color:var(--red); background:rgba(220,40,40,0.08); border:1px solid rgba(220,40,40,0.2); }
  .ss-srv-badge--disparut:hover, .ss-srv-badge--disparut.ss-srv-badge--active { background:rgba(220,40,40,0.2); border-color:var(--red); }
  .ss-srv-badge--nou { color:#4caf82; background:rgba(76,175,130,0.08); border:1px solid rgba(76,175,130,0.2); }
  .ss-srv-badge--nou:hover, .ss-srv-badge--nou.ss-srv-badge--active { background:rgba(76,175,130,0.2); border-color:#4caf82; }

  .ss-player-list { display:flex; flex-direction:column; gap:2px; }
  .ss-player-row {
    display:grid; grid-template-columns:44px 1fr 64px 52px 18px;
    align-items:center; padding:6px 10px; border-radius:6px;
    font-size:13px; transition:background .1s;
  }
  .ss-player-chevron { font-size:9px; color:var(--text-muted); opacity:0.4; text-align:right; }
  .ss-player-row:hover { background:rgba(255,255,255,0.04); }
  .ss-player-row.ss-player--disparut { background:rgba(220,40,40,0.06); }
  .ss-player-row.ss-player--disparut:hover { background:rgba(220,40,40,0.1); }
  .ss-player-row.ss-player--nou { background:rgba(76,175,130,0.06); }
  .ss-player-row.ss-player--nou:hover { background:rgba(76,175,130,0.1); }
  .ss-player-rank { font-size:11px; color:var(--text-muted); font-weight:600; }
  .ss-player-name { font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .ss-player-row.ss-player--disparut .ss-player-name,
  .ss-player-row.ss-player--disparut .ss-player-rank,
  .ss-player-row.ss-player--disparut .ss-player-cl,
  .ss-player-row.ss-player--disparut .ss-player-lvl { color:var(--red); }
  .ss-player-row.ss-player--nou .ss-player-name,
  .ss-player-row.ss-player--nou .ss-player-rank,
  .ss-player-row.ss-player--nou .ss-player-cl,
  .ss-player-row.ss-player--nou .ss-player-lvl { color:#4caf82; }
  .ss-player-cl { font-size:12px; color:var(--text-muted); }
  .ss-player-lvl { font-size:12px; color:var(--text-muted); text-align:right; }
  .ss-player-name mark { background:rgba(200,150,46,0.3); color:var(--gold); border-radius:2px; padding:0 1px; }
  .ss-empty { font-size:13px; color:var(--text-muted); padding:12px 0; }

  /* ── Player expand + compare ── */
  .ss-player--expanded { background:rgba(255,255,255,0.07) !important; }
  .ss-player--pinned-a { outline:1px solid rgba(220,40,40,0.5); }
  .ss-player--pinned-b { outline:1px solid rgba(76,175,130,0.5); }
  .ss-player-detail {
    background:rgba(255,255,255,0.03); border:1px solid var(--border);
    border-top:none; border-radius:0 0 6px 6px;
    padding:10px 12px 12px; margin-bottom:2px;
  }
  .ss-detail-grid { display:flex; flex-wrap:wrap; gap:8px 20px; margin-bottom:8px; }
  .ss-detail-item { display:flex; flex-direction:column; gap:2px; }
  .ss-detail-label { font-size:10px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.5px; }
  .ss-detail-val { font-size:13px; font-weight:600; color:var(--text); }
  .ss-pin-btn {
    font-size:11px; font-weight:600; padding:4px 10px; border-radius:5px; cursor:pointer;
    background:rgba(200,150,46,0.08); border:1px solid rgba(200,150,46,0.3); color:var(--gold);
    transition:background .15s;
  }
  .ss-pin-btn:hover { background:rgba(200,150,46,0.18); }
  .ss-pin-btn.active { background:rgba(200,150,46,0.2); border-color:var(--gold); }

  /* ── Compare panel ── */
  .ss-compare-panel {
    background:rgba(255,255,255,0.03); border:1px solid var(--border);
    border-radius:8px; padding:14px 16px; margin-bottom:16px;
  }
  .ss-compare-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
  .ss-compare-title { font-size:12px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.6px; }
  .ss-compare-close { background:none; border:none; color:var(--text-muted); font-size:14px; cursor:pointer; line-height:1; }
  .ss-compare-close:hover { color:var(--red); }
  .ss-cmp-names { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:12px; }
  .ss-cmp-name-a, .ss-cmp-name-b { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
  .ss-cmp-pname { font-weight:700; color:var(--text); font-size:13px; }
  .ss-cmp-srv { font-size:11px; color:var(--text-dim); }
  .ss-cmp-badge { font-size:10px; font-weight:700; padding:2px 6px; border-radius:4px; }
  .ss-cmp-badge--d { background:rgba(220,40,40,0.15); color:var(--red); border:1px solid rgba(220,40,40,0.3); }
  .ss-cmp-badge--n { background:rgba(76,175,130,0.15); color:#4caf82; border:1px solid rgba(76,175,130,0.3); }
  .ss-cmp-row {
    display:grid; grid-template-columns:80px 1fr 60px 1fr;
    align-items:center; padding:5px 0; border-top:1px solid rgba(255,255,255,0.05);
    font-size:13px;
  }
  .ss-cmp-label { font-size:11px; color:var(--text-dim); font-weight:600; }
  .ss-cmp-av { color:var(--red); font-weight:600; }
  .ss-cmp-bv { color:#4caf82; font-weight:600; text-align:right; }
  .ss-cmp-delta { text-align:center; font-weight:700; font-size:12px; color:var(--text-muted); }
  .ss-cmp-delta.pos { color:#4caf82; }
  .ss-cmp-delta.neg { color:var(--red); }
  .ss-cmp-waiting { font-size:13px; color:var(--text-muted); }

  .tf-pagination { display:flex; align-items:center; gap:10px; margin-top:10px; }
  .tf-page-btn {
    background:var(--card-bg); border:1px solid var(--border); border-radius:5px;
    color:var(--text); width:28px; height:28px; font-size:16px; cursor:pointer;
    display:flex; align-items:center; justify-content:center; line-height:1;
  }
  .tf-page-btn:hover:not(:disabled) { border-color:var(--gold); color:var(--gold); }
  .tf-page-btn:disabled { opacity:0.3; cursor:not-allowed; }
  .tf-page-info { font-size:12px; color:var(--text-muted); min-width:50px; text-align:center; }

  /* ══════════════════════════════════════════════════════
     PREMIUM ANIMATION SYSTEM
     ══════════════════════════════════════════════════════ */

  :root {
    --spring: cubic-bezier(0.16, 1, 0.3, 1);
    --smooth: cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* ── Entrance keyframes ── */
  @keyframes enterUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes enterScale {
    from { opacity: 0; transform: translateY(-6px) scale(0.96); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes floatIcon {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-7px); }
  }
  @keyframes shineIn {
    from { transform: translateX(-100%) skewX(-15deg); }
    to   { transform: translateX(300%) skewX(-15deg); }
  }

  /* ── Tab page ── */
  .tab-page.active {
    animation: enterUp 0.28s var(--spring) both;
  }

  /* ── Card stagger — grid ── */
  .grid .card, .grid-large .card {
    animation: enterUp 0.35s var(--spring) both;
  }
  .grid .card:nth-child(1),  .grid-large .card:nth-child(1)  { animation-delay: 0.03s; }
  .grid .card:nth-child(2),  .grid-large .card:nth-child(2)  { animation-delay: 0.07s; }
  .grid .card:nth-child(3),  .grid-large .card:nth-child(3)  { animation-delay: 0.11s; }
  .grid .card:nth-child(4),  .grid-large .card:nth-child(4)  { animation-delay: 0.15s; }
  .grid .card:nth-child(5),  .grid-large .card:nth-child(5)  { animation-delay: 0.18s; }
  .grid .card:nth-child(6),  .grid-large .card:nth-child(6)  { animation-delay: 0.21s; }
  .grid .card:nth-child(7),  .grid-large .card:nth-child(7)  { animation-delay: 0.23s; }
  .grid .card:nth-child(n+8),.grid-large .card:nth-child(n+8){ animation-delay: 0.25s; }

  /* ── Card stagger — compact list ── */
  .grid-compact .card {
    animation: enterUp 0.28s var(--spring) both;
  }
  .grid-compact .card:nth-child(1)  { animation-delay: 0.02s; }
  .grid-compact .card:nth-child(2)  { animation-delay: 0.04s; }
  .grid-compact .card:nth-child(3)  { animation-delay: 0.07s; }
  .grid-compact .card:nth-child(4)  { animation-delay: 0.09s; }
  .grid-compact .card:nth-child(5)  { animation-delay: 0.11s; }
  .grid-compact .card:nth-child(6)  { animation-delay: 0.13s; }
  .grid-compact .card:nth-child(n+7){ animation-delay: 0.15s; }

  /* ── Card stagger — inventory ── */
  .inv-grid .inv-card {
    animation: enterUp 0.3s var(--spring) both;
  }
  .inv-grid .inv-card:nth-child(1)  { animation-delay: 0.03s; }
  .inv-grid .inv-card:nth-child(2)  { animation-delay: 0.06s; }
  .inv-grid .inv-card:nth-child(3)  { animation-delay: 0.10s; }
  .inv-grid .inv-card:nth-child(4)  { animation-delay: 0.13s; }
  .inv-grid .inv-card:nth-child(5)  { animation-delay: 0.16s; }
  .inv-grid .inv-card:nth-child(n+6){ animation-delay: 0.18s; }

  /* ── Card stagger — alerte ── */
  .alerta-card {
    animation: enterUp 0.32s var(--spring) both;
  }
  .alerta-card:nth-child(1)  { animation-delay: 0.04s; }
  .alerta-card:nth-child(2)  { animation-delay: 0.08s; }
  .alerta-card:nth-child(3)  { animation-delay: 0.12s; }
  .alerta-card:nth-child(n+4){ animation-delay: 0.16s; }

  /* ── Section blocks stagger ── */
  .sections-container .section-block {
    animation: enterUp 0.38s var(--spring) both;
  }
  .sections-container .section-block:nth-child(1) { animation-delay: 0.04s; }
  .sections-container .section-block:nth-child(2) { animation-delay: 0.09s; }
  .sections-container .section-block:nth-child(3) { animation-delay: 0.14s; }
  .sections-container .section-block:nth-child(4) { animation-delay: 0.18s; }
  .sections-container .section-block:nth-child(n+5){ animation-delay: 0.21s; }

  /* ── Stats bar items stagger ── */
  .stats-bar .stat-item {
    animation: enterUp 0.3s var(--spring) both;
  }
  .stats-bar .stat-item:nth-child(1) { animation-delay: 0.06s; }
  .stats-bar .stat-item:nth-child(2) { animation-delay: 0.10s; }
  .stats-bar .stat-item:nth-child(3) { animation-delay: 0.14s; }
  .stats-bar .stat-item:nth-child(4) { animation-delay: 0.17s; }
  .stats-bar .stat-item:nth-child(n+5){ animation-delay: 0.20s; }

  /* ── Header entrance ── */
  .logo {
    animation: enterUp 0.4s var(--spring) 0.05s both;
  }
  .header-center {
    animation: enterUp 0.4s var(--spring) 0.10s both;
  }
  .header-controls {
    animation: enterUp 0.4s var(--spring) 0.14s both;
  }

  /* ── Button shine sweep on hover ── */
  .btn-add, .btn-primary {
    position: relative;
    overflow: hidden;
  }
  .btn-add::after, .btn-primary::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.14), transparent);
    transform: translateX(-200%) skewX(-15deg);
    pointer-events: none;
  }
  .btn-add:hover::after, .btn-primary:hover::after {
    animation: shineIn 0.55s var(--smooth) both;
  }

  /* ── Empty state float ── */
  .empty-state-icon {
    display: inline-block;
    animation: floatIcon 3.2s ease-in-out infinite;
  }

  /* notif-panel uses transition (defined inline), no extra animation needed */

  /* ── Modal spring entrance ── */
  .modal-overlay.open .modal {
    animation: enterUp 0.32s var(--spring) both;
  }

  /* ── Input focus ring animated ── */
  @keyframes focusRingIn {
    from { box-shadow: 0 0 0 0 rgba(200,150,46,0); }
    to   { box-shadow: 0 0 0 3px rgba(200,150,46,0.11); }
  }
  .form-input:focus, .form-select:focus,
  .inv-search:focus, .search-input:focus, .al-inp:focus {
    animation: focusRingIn 0.2s ease forwards;
  }

  /* ── Expiry widget body open ── */
  .expiry-chip {
    animation: enterUp 0.3s var(--spring) both;
  }

  /* ── Transfer section blocks ── */
  .tf-section {
    animation: enterUp 0.35s var(--spring) both;
  }
  #transfersContent .tf-section:nth-child(1) { animation-delay: 0.04s; }
  #transfersContent .tf-section:nth-child(2) { animation-delay: 0.08s; }
  #transfersContent .tf-section:nth-child(3) { animation-delay: 0.12s; }
  #transfersContent .tf-section:nth-child(4) { animation-delay: 0.16s; }

  /* ── Spawn table rows stagger ── */
  .spawn-table tbody tr {
    animation: enterUp 0.25s var(--spring) both;
  }
  .spawn-table tbody tr:nth-child(1) { animation-delay: 0.02s; }
  .spawn-table tbody tr:nth-child(2) { animation-delay: 0.04s; }
  .spawn-table tbody tr:nth-child(3) { animation-delay: 0.06s; }
  .spawn-table tbody tr:nth-child(4) { animation-delay: 0.08s; }
  .spawn-table tbody tr:nth-child(5) { animation-delay: 0.10s; }
  .spawn-table tbody tr:nth-child(6) { animation-delay: 0.12s; }
  .spawn-table tbody tr:nth-child(n+7){ animation-delay: 0.13s; }

  /* ── Info bar items (transfers) ── */
  .tf-info-item {
    animation: enterUp 0.3s var(--spring) both;
  }
  .tf-info-bar .tf-info-item:nth-child(1) { animation-delay: 0.04s; }
  .tf-info-bar .tf-info-item:nth-child(2) { animation-delay: 0.08s; }
  .tf-info-bar .tf-info-item:nth-child(3) { animation-delay: 0.12s; }

  /* ── Disable re-render animations after initial load ── */
  body.app-ready .grid .card,
  body.app-ready .grid-large .card,
  body.app-ready .grid-compact .card,
  body.app-ready .inv-grid .inv-card,
  body.app-ready .alerta-card,
  body.app-ready .spawn-table tbody tr,
  body.app-ready .sections-container .section-block,
  body.app-ready .stats-bar .stat-item,
  body.app-ready .tf-section,
  body.app-ready .tf-info-item,
  body.app-ready .expiry-chip {
    animation: none;
  }

  /* ── Reduced motion override ── */
  @media (prefers-reduced-motion: reduce) {
    .btn-add::after, .btn-primary::after { display: none; }
    .empty-state-icon { animation: none; }
  }

  /* ── Drop Tracker ── */
  .drop-tracker-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; padding:6px 0; border-top:1px solid var(--border-accent); }
  .drop-form-panel { background:var(--surface2); border:1px solid var(--border-accent); border-radius:8px; padding:14px 16px; margin-bottom:10px; }
  .drop-form-row { display:flex; gap:8px; align-items:center; margin-bottom:8px; }
  .drop-form-name-readonly { font-size:13px; font-weight:600; color:var(--text); min-width:80px; padding:0 4px; }
  .drop-player-dot { width:22px; height:22px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; color:#fff; flex-shrink:0; line-height:1; }
  .drop-balance-table { width:100%; border-collapse:collapse; font-size:12px; margin-bottom:4px; }
  .drop-balance-table th { text-align:left; font-size:10px; text-transform:uppercase; letter-spacing:.8px; color:var(--text-muted); font-family:'Rajdhani',sans-serif; font-weight:600; padding:4px 8px; border-bottom:1px solid var(--border-accent); }
  .drop-balance-table td { padding:5px 8px; border-bottom:1px solid rgba(255,255,255,.04); vertical-align:middle; }
  .drop-balance-table tr:last-child td { border-bottom:none; }
  .drop-balance-table tr:hover td { background:rgba(255,255,255,.025); }
  .drop-surplus-pos { color:var(--green); font-weight:600; font-family:'Rajdhani',sans-serif; font-size:13px; }
  .drop-surplus-neg { color:var(--orange); font-weight:600; font-family:'Rajdhani',sans-serif; font-size:13px; }
  .drop-surplus-zero { color:var(--text-muted); font-family:'Rajdhani',sans-serif; font-size:13px; }
  .drop-edit-btn, .drop-del-btn { background:none; border:none; cursor:pointer; font-size:12px; color:var(--text-muted); padding:2px 4px; border-radius:4px; transition:color .15s; }
  .drop-edit-btn:hover { color:var(--gold-light); }
  .drop-del-btn:hover { color:var(--red); }
  .drop-edit-row-input { width:70px; font-size:12px; padding:2px 5px; background:var(--surface3); border:1px solid var(--border-accent); border-radius:4px; color:var(--text); text-align:center; }
  .drop-history-entry { padding:8px 4px; border-bottom:1px solid rgba(255,255,255,.05); font-size:12px; }
  .drop-history-entry:last-child { border-bottom:none; }
  .drop-hist-date { font-size:10px; color:var(--text-muted); font-family:'Rajdhani',sans-serif; font-weight:600; letter-spacing:.5px; }
  .dh-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:5px; }
  .dh-total { font-size:10px; color:var(--text-muted); font-family:'Rajdhani',sans-serif; font-weight:600; }
  .dh-players { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:5px; }
  .dh-player { display:inline-flex; align-items:center; gap:4px; background:rgba(255,255,255,.04); border-radius:6px; padding:3px 7px; }
  .dh-player-name { font-size:11px; color:var(--text); }
  .dh-player-keys { font-family:'Rajdhani',sans-serif; font-size:13px; font-weight:700; color:var(--gold-light); margin-left:1px; }
  .dh-transfers { display:flex; flex-direction:column; gap:3px; }
  .dh-transfer { display:inline-flex; align-items:center; gap:5px; font-size:11px; }
  .dh-transfer-from, .dh-transfer-to { color:var(--text); }
  .dh-transfer-arrow { color:var(--text-muted); font-size:10px; }
  .dh-transfer-amt { font-family:'Rajdhani',sans-serif; font-size:12px; font-weight:700; color:var(--gold-light); }
  .dh-no-transfer { font-size:11px; color:var(--text-muted); font-style:italic; }
  .drop-empty { text-align:center; color:var(--text-muted); font-size:12px; padding:10px 0; }
  .drop-balance-cards { display:flex; flex-wrap:wrap; gap:8px; padding:6px 0 10px; }
  .drop-balance-card { display:flex; align-items:center; gap:9px; background:var(--surface2); border:1px solid var(--border-accent); border-radius:10px; padding:9px 14px; }
  .drop-balance-card-info { display:flex; flex-direction:column; gap:1px; }
  .drop-balance-card-name { font-size:12px; font-weight:600; color:var(--text); line-height:1.3; }
  .drop-balance-card-num { font-family:'Rajdhani',sans-serif; font-size:16px; font-weight:700; line-height:1.2; }
  .drop-balance-card-label { font-size:10px; color:var(--text-muted); font-weight:400; font-family:'Inter',sans-serif; }
  .drop-balance-card-lastkeys { font-size:10px; color:var(--text-muted); }
  .drop-carry-group { background:var(--surface2); border:1px solid var(--border-accent); border-radius:10px; padding:8px 12px; margin-bottom:6px; }
  .drop-carry-group-dots { display:flex; align-items:center; gap:4px; margin-bottom:6px; }
  .drop-carry-group-names { font-size:10px; color:var(--text-muted); margin-left:3px; }
  .drop-carry-row { display:flex; align-items:center; gap:7px; padding:3px 0; }
  .drop-carry-name { font-size:12px; color:var(--text); flex:1; }
  .drop-group-details { margin-top:2px; }
  .drop-group-details summary { font-size:10px; color:var(--text-muted); cursor:pointer; padding:4px 0; letter-spacing:.8px; font-family:'Rajdhani',sans-serif; font-weight:600; text-transform:uppercase; user-select:none; }
  .drop-close-btn { background:none; border:none; cursor:pointer; font-size:18px; color:var(--text-muted); padding:0 2px; line-height:1; transition:color .15s; }
  .drop-close-btn:hover { color:var(--text); }
  .drop-session-panel { background:var(--surface2); border:1px solid var(--border-accent); border-radius:12px; padding:14px 16px; margin-bottom:10px; }
  .drop-session-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
  .drop-session-title { font-family:'Rajdhani',sans-serif; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--text-dim); }
  .drop-session-contribs { display:flex; flex-wrap:wrap; gap:6px; min-height:28px; margin-bottom:8px; }
  .drop-session-contrib { display:flex; align-items:center; gap:6px; background:rgba(255,255,255,.04); border-radius:8px; padding:5px 10px; }
  .drop-session-contrib-name { font-size:12px; color:var(--text); }
  .drop-session-contrib-keys { font-family:'Rajdhani',sans-serif; font-size:13px; font-weight:700; color:var(--gold-light); margin-left:2px; }
  .drop-session-waiting { font-size:11px; color:var(--text-muted); align-self:center; }
  .drop-session-my-row { display:flex; align-items:center; gap:8px; padding:8px 0; border-top:1px solid var(--border); }
  .drop-session-my-name { font-size:12px; font-weight:600; color:var(--text); flex:1; }
  .drop-session-my-keys { font-family:'Rajdhani',sans-serif; font-size:14px; font-weight:700; color:var(--gold-light); }
  .drop-session-edit-btn { font-size:10px !important; padding:2px 8px !important; }
  .drop-session-confirm-btn { font-size:11px !important; padding:4px 12px !important; }
  .drop-session-actions { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:8px; padding-top:8px; border-top:1px solid var(--border); }
  .drop-session-total { font-size:11px; color:var(--text-muted); }
  .drop-session-empty { display:flex; align-items:center; justify-content:space-between; padding:10px 4px; }
  .drop-session-empty span { font-size:12px; color:var(--text-muted); }
  /* ── Drop-in-Spawn compact panel ── */
  .dis-panel { background:var(--surface2); border:1px solid var(--border-accent); border-radius:10px; padding:10px 12px; margin-top:6px; }
  .dis-panel-result { border-color:rgba(200,150,46,0.2); }
  .dis-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
  .dis-title { font-family:'Rajdhani',sans-serif; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--text-dim); }
  .dis-close { font-size:16px !important; }
  .dis-my-row { display:flex; align-items:center; gap:7px; margin-bottom:7px; }
  .dis-my-name { font-size:12px; font-weight:600; color:var(--text); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .dis-my-keys { font-family:'Rajdhani',sans-serif; font-size:13px; font-weight:700; color:var(--gold-light); }
  .dis-edit-btn { font-size:10px !important; padding:2px 7px !important; flex-shrink:0; }
  .dis-keys-input { width:52px !important; text-align:center; flex-shrink:0; }
  .dis-keys-label { font-size:11px; color:var(--text-muted); flex-shrink:0; }
  .dis-confirm-btn { font-size:11px !important; padding:3px 10px !important; flex-shrink:0; }
  .dis-no-name { font-size:11px; color:var(--text-muted); padding:2px 0 6px; }
  .dis-others { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:7px; }
  .dis-chip { display:inline-flex; align-items:center; gap:4px; background:rgba(255,255,255,.04); border-radius:6px; padding:3px 8px; }
  .dis-chip-name { font-size:11px; color:var(--text); }
  .dis-chip-keys { font-family:'Rajdhani',sans-serif; font-size:12px; font-weight:700; color:var(--gold-light); margin-left:1px; }
  .dis-actions { display:flex; align-items:center; justify-content:space-between; gap:8px; padding-top:7px; border-top:1px solid var(--border); }
  .dis-total { font-size:11px; color:var(--text-muted); }
  .dis-distribute-btn { font-size:11px !important; padding:3px 12px !important; }
  .dis-my-confirmed { background:rgba(255,255,255,.03); border-radius:7px; padding:4px 6px; }
  .dis-my-transfers { margin-bottom:7px; }
  .dis-transfer-line { font-size:12px; color:var(--text); padding:3px 0; display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
  .dis-transfer-ok { font-size:12px; color:var(--green); font-weight:600; padding:3px 0 7px; }
  .dis-result-chips { display:flex; flex-wrap:wrap; gap:5px; padding-top:6px; border-top:1px solid var(--border); }
  .dis-result-chip { display:inline-flex; align-items:center; gap:4px; background:rgba(255,255,255,.04); border-radius:6px; padding:3px 8px; }
  .dis-chip-surplus { font-family:'Rajdhani',sans-serif; font-size:12px; font-weight:700; margin-left:1px; }
  .dis-chip-remove { background:none; border:none; cursor:pointer; font-size:10px; color:var(--text-muted); padding:0 0 0 3px; line-height:1; transition:color .15s; }
  .dis-chip-remove:hover { color:var(--red); }
  .dis-add-row { display:flex; align-items:center; gap:6px; margin-top:5px; flex-wrap:wrap; }
  .dis-add-open-btn { font-size:10px !important; padding:2px 8px !important; }
  .drop-result-panel { }
  .drop-result-my { display:flex; align-items:center; gap:10px; background:rgba(255,255,255,.04); border-radius:10px; padding:10px 14px; margin-bottom:10px; }
  .drop-result-my-info { display:flex; flex-direction:column; gap:2px; flex:1; }
  .drop-result-my-name { font-size:13px; font-weight:600; color:var(--text); }
  .drop-result-my-keys { font-size:11px; color:var(--text-muted); }
  .drop-result-my-balance { display:flex; flex-direction:column; align-items:flex-end; gap:1px; }
  .drop-result-my-label { font-size:10px; color:var(--text-muted); }
  .drop-result-transfers { margin-bottom:8px; }
  .drop-result-transfers-title { font-size:10px; text-transform:uppercase; letter-spacing:.8px; color:var(--text-muted); font-family:'Rajdhani',sans-serif; font-weight:600; margin-bottom:5px; }
  .drop-result-transfer-row { display:flex; align-items:center; gap:6px; padding:4px 0; font-size:12px; color:var(--text); border-bottom:1px solid rgba(255,255,255,.04); }
  .drop-result-transfer-row:last-child { border-bottom:none; }
  .drop-result-transfer-name { font-size:12px; color:var(--text); }
  .drop-result-transfer-arrow { color:var(--text-muted); font-size:11px; }
  .drop-result-transfer-amount { font-family:'Rajdhani',sans-serif; font-size:14px; font-weight:700; color:var(--gold-light); padding:0 2px; }
  .drop-result-all { display:flex; flex-direction:column; gap:0; border-top:1px solid var(--border); padding-top:8px; margin-top:4px; }
  .drop-result-row { display:flex; align-items:center; gap:8px; padding:4px 0; border-bottom:1px solid rgba(255,255,255,.04); }
  .drop-result-row:last-child { border-bottom:none; }
  .drop-result-row-name { font-size:12px; color:var(--text); flex:1; }
  .drop-result-row-keys { font-size:11px; color:var(--text-muted); }

  .scrape-notif {
    position:fixed; top:18px; right:18px; z-index:9999;
    background:#1a2a1e; border:1px solid #4caf82; border-radius:8px;
    padding:10px 16px; font-size:13px; color:#7ecf9a;
    box-shadow:0 4px 20px rgba(0,0,0,0.5);
    opacity:0; transform:translateY(-8px);
    transition:opacity 0.3s, transform 0.3s;
    pointer-events:none;
  }
  .scrape-notif--visible { opacity:1; transform:translateY(0); }

  /* ── Expiry Calendar ─────────────────────────────────────────── */
  .ec-modal { max-width: 540px; width: 100%; }

  .ec-modal-header {
    display: flex; align-items: center;
    justify-content: space-between; margin-bottom: 16px;
  }

  .ec-close-btn {
    background: none; border: 1px solid var(--border); color: var(--text-muted);
    border-radius: 6px; width: 28px; height: 28px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; transition: all 0.15s;
  }
  .ec-close-btn:hover { border-color: var(--border-accent); color: var(--text); }

  .ec-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }

  .ec-filter-btn {
    padding: 4px 11px; font-size: 11px; font-weight: 500; border-radius: 20px;
    border: 1px solid var(--border); background: none; color: var(--text-muted);
    cursor: pointer; transition: all 0.15s;
  }
  .ec-filter-btn.active { border-color: var(--gold); color: var(--gold); background: rgba(200,150,46,0.1); }
  .ec-filter-btn:hover:not(.active) { border-color: var(--border-accent); color: var(--text-dim); }

  .ec-nav {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 10px; padding: 0 2px;
  }

  .ec-nav-btn {
    background: none; border: 1px solid var(--border); color: var(--text-dim);
    border-radius: 6px; width: 30px; height: 30px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; transition: all 0.15s;
  }
  .ec-nav-btn:hover { border-color: var(--gold); color: var(--gold); }

  .ec-month-label { font-size: 15px; font-weight: 700; color: var(--text); }

  .ec-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin-bottom: 3px; }
  .ec-weekday {
    text-align: center; font-size: 10px; font-weight: 600;
    color: var(--text-muted); letter-spacing: 0.05em; padding: 4px 0;
  }

  .ec-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }

  .ec-cell {
    min-height: 54px; border-radius: 6px; border: 1px solid transparent;
    padding: 5px 3px 4px; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    transition: border-color 0.12s, background 0.12s;
  }
  .ec-cell--empty { cursor: default; background: none !important; border-color: transparent !important; }
  .ec-cell:hover:not(.ec-cell--empty) { border-color: var(--border-accent); background: rgba(255,255,255,0.025); }
  .ec-cell--today { background: rgba(200,150,46,0.06); border-color: rgba(200,150,46,0.2) !important; }
  .ec-cell--selected { background: rgba(200,150,46,0.12) !important; border-color: var(--gold) !important; }

  .ec-day-num { font-size: 12px; font-weight: 500; color: var(--text-muted); line-height: 1; }
  .ec-cell--today .ec-day-num { color: var(--gold-light); font-weight: 700; }
  .ec-cell--has-items .ec-day-num { color: var(--text); }
  .ec-cell--selected .ec-day-num { color: var(--gold-light); }

  .ec-dots { display: flex; gap: 3px; flex-wrap: wrap; justify-content: center; }
  .ec-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
  .ec-dot-more { font-size: 9px; color: var(--text-muted); line-height: 1; }

  .ec-count { font-size: 9px; color: var(--text-muted); font-weight: 600; line-height: 1; }
  .ec-cell--selected .ec-count { color: var(--gold); }

  .ec-day-panel { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 14px; transition: opacity 0.25s ease, transform 0.25s ease; }
  .ec-day-panel-title { font-size: 11px; color: var(--text-muted); margin-bottom: 10px; letter-spacing: 0.02em; }
  .ec-day-panel-title strong { color: var(--text-dim); }

  .ec-day-items { display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow-y: auto; }

  .ec-day-item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 11px; background: var(--surface);
    border: 1px solid var(--border); border-radius: 7px;
  }
  .ec-day-item-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
  .ec-day-item-info { flex: 1; min-width: 0; }
  .ec-day-item-name {
    font-size: 13px; font-weight: 500; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .ec-day-item-sub { font-size: 10px; color: var(--text-muted); margin-top: 2px; }
  .ec-day-item-time { font-size: 11px; font-weight: 600; white-space: nowrap; text-align: right; }
  .ec-day-empty { font-size: 13px; color: var(--text-muted); text-align: center; padding: 14px 0; }

  /* Calendar open button */
  .btn-calendar {
    display: flex; align-items: center; gap: 6px;
    padding: 7px 14px; font-size: 12px; font-weight: 600; font-family: inherit;
    border-radius: 7px; border: 1px solid var(--border-accent);
    background: none; color: var(--text-dim); cursor: pointer;
    letter-spacing: 0.02em; transition: all 0.15s;
  }
  .btn-calendar:hover { border-color: var(--gold); color: var(--gold); background: rgba(200,150,46,0.07); }

  /* Card expiry date label */
  .card-expiry-date { font-size: 10px; color: var(--text-muted); margin-top: 4px; letter-spacing: 0.02em; }

  /* -- Next Spawn Header Widget -- */
  .next-spawn-widget {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 8px 20px;
    font-family: "Inter", sans-serif;
    transition: all 0.3s ease;
    min-width: 160px;
    user-select: none;
    text-align: center;
  }



  .nsw-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .nsw-title {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    text-transform: uppercase;
    line-height: 1;
    margin-bottom: 3px;
  }

  .nsw-data {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: "Rajdhani", sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: #fff;
    line-height: 1;
  }

  #headerSpawnLabel {
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 800;
  }

  #headerSpawnLabel.type-simpla {
    color: #b0b0b0; /* Light Gray */
  }

  #headerSpawnLabel.type-dublu {
    color: var(--gold-light); /* Gold */
  }

  #headerSpawnTimer {
    color: #fff;
    font-size: 22px;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
  }

  /* Warning state: spawn is imminent */
  .next-spawn-widget.warning {
    border-color: rgba(224, 82, 82, 0.4);
    background: rgba(224, 82, 82, 0.08);
    box-shadow: 0 0 15px rgba(224, 82, 82, 0.1);
  }
  .next-spawn-widget.warning .nsw-title {
    color: var(--red);
    opacity: 0.8;
  }
  .next-spawn-widget.warning #headerSpawnTimer {
    color: var(--red);
    opacity: 1;
    animation: pulseRed 2s infinite;
  }

  @keyframes pulseRed {
    0% { opacity: 1; }
    50% { opacity: 0.6; }
    100% { opacity: 1; }
  }

  /* ============ TEAM MANAGEMENT ============ */
  .team-mgmt-header {
    background: linear-gradient(135deg, var(--surface2), var(--bg));
    border: 1px solid var(--border-accent);
    border-radius: var(--radius-lg);
    padding: 24px;
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 12px 32px rgba(0,0,0,0.2);
  }

  .team-info-main h2 {
    font-family: 'Rajdhani', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: var(--gold-light);
    margin-bottom: 8px;
    letter-spacing: 0.5px;
  }

  .team-meta-pills {
    display: flex;
    gap: 8px;
  }

  .team-pill {
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border);
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 11px;
    color: var(--text-muted);
    font-family: 'Inter', sans-serif;
  }

  .team-section {
    margin-bottom: 32px;
  }

  .section-title {
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-dim);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .section-title::after {
    content: '';
    height: 1px;
    flex: 1;
    background: linear-gradient(90deg, var(--border-accent), transparent);
  }

  /* Member List */
  .member-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 16px;
  }

  .member-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: all 0.2s;
    position: relative;
  }

  .member-card:hover {
    border-color: var(--border-accent);
    background: var(--surface2);
  }

  .member-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .member-avatar {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--surface3), var(--surface2));
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Rajdhani', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--gold);
    border: 1px solid var(--border-accent);
    position: relative;
  }

  .member-status-dot {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--surface);
    background: var(--text-muted);
  }

  .member-status-dot.online { background: var(--green); box-shadow: 0 0 8px var(--green); }

  .member-info {
    flex: 1;
    min-width: 0;
  }

  .member-name {
    font-family: 'Rajdhani', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 2px;
  }

  .member-role-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .role-owner { background: var(--gold-dim); color: var(--gold-light); border: 1px solid rgba(200,150,46,0.3); }
  .role-admin { background: var(--blue-dim); color: var(--blue); border: 1px solid rgba(91,155,213,0.3); }
  .role-member { background: rgba(255,255,255,0.05); color: var(--text-muted); border: 1px solid var(--border); }

  .member-actions-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s;
  }

  .member-actions-btn:hover {
    border-color: var(--gold);
    color: var(--gold);
    background: var(--gold-dim);
  }

  /* Permissions Grid */
  .perm-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
  }

  .perm-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  .perm-label {
    font-size: 11px;
    color: var(--text-dim);
  }

  /* Toggle Switch */
  .switch {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 18px;
  }

  .switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }

  .slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: var(--surface3);
    transition: .3s;
    border-radius: 34px;
    border: 1px solid var(--border);
  }

  .slider:before {
    position: absolute;
    content: "";
    height: 12px;
    width: 12px;
    left: 2px;
    bottom: 2px;
    background-color: var(--text-muted);
    transition: .3s;
    border-radius: 50%;
  }

  input:checked + .slider {
    background-color: var(--gold-dim);
    border-color: var(--gold);
  }

  input:checked + .slider:before {
    transform: translateX(16px);
    background-color: var(--gold-light);
  }

  input:disabled + .slider {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .member-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 4px;
  }

  .btn-kick {
    background: var(--red-dim);
    color: var(--red);
    border: 1px solid rgba(224,82,82,0.3);
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
  }

  .btn-kick:hover {
    background: var(--red);
    color: white;
  }

  /* Simple Member Row (for non-admins) */
  .member-row-simple {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 12px;
    margin-bottom: 10px;
    transition: all 0.2s;
  }
  
  .member-row-simple:hover {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.08);
  }

  .member-avatar-mini {
    width: 40px;
    height: 40px;
    background: var(--surface3);
    border: 1px solid var(--border);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 800;
    color: var(--text-muted);
    position: relative;
    flex-shrink: 0;
  }

/* ── Tweaks Tab ─────────────────────────────────────────────────────────── */

.tweaks-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 4px;
}

.tweaks-page-header {
  margin-bottom: 32px;
}

.tweaks-page-header h2 {
  font-family: 'Rajdhani', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 4px;
}

.tweaks-page-header p {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
}

.tweaks-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 20px;
}

.tweaks-section-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--text-muted);
  margin-bottom: 18px;
}

.tweaks-folder-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.tweaks-folder-path {
  flex: 1;
  padding: 11px 16px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text-muted);
  font-size: 13px;
  font-family: 'Inter', monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.2s, border-color 0.2s;
}

.tweaks-folder-path.has-value {
  color: var(--text);
  border-color: rgba(200,150,46,0.25);
}

.tweaks-current-res {
  display: none;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 24px;
  padding: 10px 14px;
  background: rgba(200,150,46,0.06);
  border: 1px solid rgba(200,150,46,0.15);
  border-radius: 8px;
}

.tweaks-current-res span {
  font-family: 'Rajdhani', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--gold);
}

.tweaks-presets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 20px;
  transition: opacity 0.25s;
}

.tweaks-presets--locked {
  opacity: 0.35;
  pointer-events: none;
}

.tweaks-preset-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 14px 10px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface2);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
}

.tweaks-preset-btn:hover {
  border-color: rgba(200,150,46,0.4);
  background: rgba(200,150,46,0.06);
  transform: translateY(-1px);
}

.tweaks-preset-btn:active { transform: scale(0.97); }

.tweaks-preset-btn--active {
  border-color: var(--gold) !important;
  background: rgba(200,150,46,0.1) !important;
}

.tweaks-preset-res {
  font-family: 'Rajdhani', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.3px;
}

.tweaks-preset-x {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0 2px;
}

.tweaks-preset-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-muted);
}

.tweaks-preset-btn--active .tweaks-preset-label {
  color: var(--gold);
}

.tweaks-custom-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.tweaks-custom-row label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-muted);
  white-space: nowrap;
}

.tweaks-custom-input {
  width: 80px;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  font-size: 14px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  text-align: center;
  outline: none;
  transition: border-color 0.2s;
}

.tweaks-custom-input:focus {
  border-color: rgba(200,150,46,0.4);
}

.tweaks-custom-sep {
  font-size: 16px;
  color: var(--text-muted);
  font-weight: 700;
}

.tweaks-no-support {
  padding: 40px 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.6;
}

.tweaks-no-support strong {
  display: block;
  color: var(--text);
  font-size: 15px;
  margin-bottom: 8px;
}

@media (max-width: 600px) {
  .tweaks-presets {
    grid-template-columns: repeat(2, 1fr);
  }
  .tweaks-folder-row {
    flex-direction: column;
    align-items: stretch;
  }
}