/* =====================================================================
   PLAYPILE :: site/account.css - the sign-in button and its panel
   =====================================================================
   Deliberately self-contained: it owns nothing outside `.acc-*`, so the
   rest of the site's stylesheet can be rewritten underneath it without
   the account UI falling over. Colours are the site's own dark palette.
   ===================================================================== */

.acc-button {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 14px;
  background: #0f1f38; color: #f5f8fc;
  border: 1px solid #1f3557; border-radius: 999px;
  font: 600 13px/1 system-ui, sans-serif; letter-spacing: .3px;
  cursor: pointer; white-space: nowrap;
  transition: background .12s, border-color .12s;
}
.acc-button:hover { background: #15294a; border-color: #2b4a73; }
.acc-dot { width: 9px; height: 9px; border-radius: 50%; background: #5f7697; flex: none; }
.acc-name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; }

.acc-shade {
  position: fixed; inset: 0; background: rgba(4, 7, 12, .72);
  backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none; transition: opacity .16s; z-index: 900;
}
.acc-shade.on { opacity: 1; pointer-events: auto; }

.acc-panel {
  position: fixed; z-index: 901;
  left: 50%; top: 50%; transform: translate(-50%, -48%) scale(.98);
  width: min(420px, calc(100vw - 32px));
  max-height: min(82vh, 720px); overflow: auto;
  background: #0a1628; color: #f5f8fc;
  border: 1px solid #1f3557; border-radius: 16px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
  padding: 18px 20px 20px;
  opacity: 0; pointer-events: none; transition: opacity .16s, transform .16s;
  font: 400 14px/1.5 system-ui, sans-serif;
}
.acc-panel.on { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
.acc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.acc-head h2 { margin: 0; font: 800 18px/1 system-ui, sans-serif; letter-spacing: .4px; }
.acc-x {
  background: none; border: 0; color: #8b96a8; font-size: 24px; line-height: 1;
  cursor: pointer; padding: 0 4px;
}
.acc-x:hover { color: #f5f8fc; }

.acc-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.acc-tab {
  flex: 1; padding: 9px 10px; cursor: pointer;
  background: rgba(255, 255, 255, .05); color: #9fb0c4;
  border: 1px solid transparent; border-radius: 9px;
  font: 600 13px/1 system-ui, sans-serif;
}
.acc-tab.on { background: #22d37a; color: #03140a; border-color: #22d37a; }

.acc-form { display: flex; flex-direction: column; gap: 10px; }
.acc-field { display: flex; flex-direction: column; gap: 4px; }
.acc-field input {
  background: #081326; color: #f5f8fc;
  border: 1px solid #1f3557; border-radius: 9px;
  padding: 10px 12px; font: 400 14px system-ui, sans-serif;
}
.acc-field input:focus { outline: none; border-color: #22d37a; }
.acc-label { color: #8b96a8; font: 600 11px/1.4 system-ui, sans-serif; letter-spacing: 1px; text-transform: uppercase; }

.acc-btn {
  padding: 11px 16px; cursor: pointer;
  background: #22d37a; color: #03140a; border: 0; border-radius: 9px;
  font: 700 13px/1 system-ui, sans-serif; letter-spacing: .4px;
}
.acc-btn:hover { filter: brightness(1.07); }
.acc-btn.ghost { background: transparent; color: #cdd7e4; border: 1px solid #1f3557; }
.acc-btn.small { padding: 8px 12px; font-size: 12px; }
.acc-buttons { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

.acc-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.acc-small { color: #8b96a8; font-size: 12.5px; line-height: 1.55; margin: 6px 0 2px; }

.acc-list { margin-top: 14px; }
.acc-chip {
  display: inline-block; margin: 6px 6px 0 0; padding: 7px 12px; cursor: pointer;
  background: rgba(255, 255, 255, .05); color: #cdd7e4;
  border: 1px solid #1f3557; border-radius: 999px;
  font: 600 12px/1 system-ui, sans-serif;
}
.acc-chip:hover { border-color: #22d37a; color: #fff; }

.acc-code { margin-top: 16px; border-top: 1px solid #132745; padding-top: 12px; }
.acc-code textarea {
  width: 100%; margin-top: 6px; resize: vertical;
  background: #081326; color: #9fb0c4;
  border: 1px solid #1f3557; border-radius: 9px;
  padding: 8px 10px; font: 400 11px/1.4 ui-monospace, Consolas, monospace;
  word-break: break-all;
}

.acc-note { min-height: 18px; margin-top: 12px; font: 600 12px/1.4 system-ui, sans-serif; color: #8b96a8; }
.acc-note.good { color: #35d07f; }
.acc-note.bad { color: #ff6b8b; }

@media (max-width: 480px) {
  .acc-name { display: none; }
  .acc-button { padding: 0 10px; }
}

/* ---- 2026-10-14: picture, honest status pills, level line ------------- */
.acc-button { padding: 0 14px 0 5px; position: relative; }
.acc-button:has(.acc-dot) { padding-left: 14px; }
.acc-button .pp-av { display: block; border-radius: 50%; flex: none; }
.acc-mode { position: absolute; left: 24px; top: 24px; width: 9px; height: 9px; border-radius: 50%;
  border: 2px solid #0f1f38; }
.acc-mode.cloud { background: #22d37a; }
.acc-mode.local { background: #ffb15e; }

.acc-who { display: flex; align-items: center; gap: 12px; margin: 2px 0 12px; }
.acc-who > svg { border-radius: 14px; flex: none; }
.acc-who > div { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0; }
.acc-who b { font: 700 16px/1.2 system-ui, sans-serif; overflow-wrap: anywhere; }
.acc-who small { color: #8b96a8; font-size: 12px; overflow-wrap: anywhere; }
.acc-pill { display: inline-block; padding: 4px 9px; border-radius: 999px; font: 700 11px/1.2 system-ui, sans-serif;
  letter-spacing: .3px; background: rgba(255, 255, 255, .06); color: #a3b4cc; border: 1px solid #1f3557; }
.acc-pill.good { background: rgba(34, 211, 122, .12); color: #4fe39a; border-color: rgba(34, 211, 122, .4); }
.acc-pill.warn { background: rgba(255, 177, 94, .1); color: #ffc685; border-color: rgba(255, 177, 94, .35); }

.acc-level { display: block; padding: 10px 12px; margin-bottom: 4px; border-radius: 10px;
  background: #0f1f38; border: 1px solid #1f3557; color: #cdd7e4; font-size: 13px; }
.acc-level:hover { border-color: #22d37a; }
.acc-bar { display: block; height: 6px; margin: 7px 0 6px; border-radius: 99px; background: #081326; overflow: hidden; }
.acc-bar i { display: block; height: 100%; background: #22d37a; border-radius: 99px; }
.acc-more { color: #22d37a; font-weight: 600; font-size: 12px; }

.acc-avs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin: 4px 0 2px; }
.acc-av { padding: 3px; background: transparent; border: 2px solid transparent; border-radius: 12px; cursor: pointer;
  display: grid; place-items: center; }
.acc-av svg { width: 100%; height: auto; max-width: 40px; border-radius: 10px; }
.acc-av:hover { border-color: #2b4a73; }
.acc-av.on { border-color: #22d37a; }
.acc-av:focus-visible, .acc-tab:focus-visible, .acc-btn:focus-visible, .acc-chip:focus-visible { outline: 2px solid #22d37a; outline-offset: 2px; }

.acc-btn.wide { width: 100%; padding: 13px 16px; font-size: 14px; }
.acc-btn:disabled { opacity: .6; cursor: wait; }
.acc-chip { display: inline-flex; align-items: center; gap: 7px; padding: 4px 12px 4px 4px; }
.acc-chip svg { border-radius: 50%; }

.acc-edit, .acc-code { margin-top: 12px; border-top: 1px solid #132745; padding-top: 10px; }
.acc-edit summary, .acc-code summary { cursor: pointer; color: #cdd7e4; font: 600 13px/1.6 system-ui, sans-serif; }
.acc-edit summary:hover, .acc-code summary:hover { color: #22d37a; }
.acc-edit[open] summary, .acc-code[open] summary { margin-bottom: 8px; }
.acc-edit .acc-field { margin-bottom: 8px; }
.acc-edit .acc-field input { width: 100%; }