/* Topbar gear dropdown + My Account / Settings modal popups. */

/* gear trigger is ALWAYS an icon-only square button (desktop + mobile) */
#menu-btn { padding: 8px; min-width: 40px; justify-content: center; }
#menu-btn .btn-ic { display: inline-flex; }
#menu-btn .btn-tx { display: none; }

/* ---- dropdown ---- */
.user-menu {
  position: fixed; top: 56px; right: 8px; z-index: 1200;
  min-width: 232px; max-width: calc(100vw - 16px);
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow); padding: 6px;
  opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity 0.12s ease, transform 0.12s ease;
}
.user-menu.show { opacity: 1; transform: translateY(0); pointer-events: auto; }

.um-head { padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.um-head-label { display: block; font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.07em; }
.um-head-email { display: block; font-size: 13px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }

.um-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--text); text-align: left;
  background: transparent; border: none; border-radius: 8px; padding: 9px 10px; cursor: pointer;
}
.um-item svg { color: var(--muted); flex-shrink: 0; }
.um-item:hover { background: var(--panel-2); }
.um-item:hover svg { color: var(--gold); }

/* ---- modal popups ---- */
.popup-backdrop {
  position: fixed; inset: 0; z-index: 1300;
  background: rgba(4, 6, 10, 0.62); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.popup-card {
  width: 100%; max-width: 420px; max-height: calc(100vh - 32px); overflow: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow);
}
.popup-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid var(--line);
}
.popup-title { margin: 0; font-size: 16px; font-weight: 800; }
.popup-x {
  font: inherit; font-size: 22px; line-height: 1; color: var(--muted);
  background: transparent; border: none; cursor: pointer; padding: 0 4px;
}
.popup-x:hover { color: var(--text); }
.popup-body { padding: 16px 18px 20px; }

/* My Account definition list */
.acct { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 10px 16px; align-items: baseline; }
.acct dt { color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.acct dd { margin: 0; font-size: 14px; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }

/* Settings rows */
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.set-row:last-child { border-bottom: none; }
.set-label { font-size: 13px; font-weight: 700; color: var(--text); }
.set-hint { font-size: 11px; font-weight: 500; color: var(--muted); margin-top: 3px; max-width: 230px; line-height: 1.35; }
.set-ctl { display: flex; align-items: center; gap: 8px; }

/* on/off switch */
.toggle { position: relative; display: inline-flex; cursor: pointer; }
.toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle-track {
  width: 40px; height: 22px; border-radius: 999px; background: var(--panel-2);
  border: 1px solid var(--line); transition: background 0.15s; display: inline-block;
}
.toggle-knob {
  position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--muted); transition: transform 0.15s, background 0.15s;
}
.toggle input:checked + .toggle-track { background: color-mix(in srgb, var(--gold) 35%, transparent); border-color: var(--gold-soft); }
.toggle input:checked + .toggle-track .toggle-knob { transform: translateX(18px); background: var(--gold); }

.sw-row { display: flex; gap: 5px; }
.sw {
  width: 22px; height: 22px; border-radius: 6px; cursor: pointer; padding: 0;
  border: 2px solid transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.sw.sel { border-color: var(--text); }
.set-picker {
  width: 30px; height: 26px; padding: 0; border: 1px solid var(--line);
  border-radius: 6px; background: var(--panel-2); cursor: pointer;
}

.deck-row { display: flex; gap: 6px; }
.deck-opt {
  font: inherit; font-size: 12px; font-weight: 700; color: var(--muted); cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px;
}
.deck-opt:hover { color: var(--text); }
.deck-opt.sel { color: #1a1406; background: var(--gold); border-color: var(--gold); }

@media (max-width: 640px) {
  .set-row { flex-direction: column; align-items: flex-start; gap: 8px; }
}