/* Account panel — shared by both sections, so it carries its own colours
   rather than inheriting from either stylesheet. Deliberately light in both:
   it is an overlay, and a single predictable look beats matching two themes. */

.oc-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(28, 25, 21, 0.5);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 16px;
  overflow-y: auto;
  font-family: "Noto Serif SC", "Songti SC", Georgia, serif;
  color: #1c1915;
}

.oc-panel {
  width: min(460px, 100%);
  margin: auto;
  background: #faf6ec;
  border-radius: 2px;
  border-top: 3px solid #a3322a;
  box-shadow: 0 24px 70px rgba(28, 25, 21, 0.35);
  overflow: hidden;
}

.oc-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 24px 24px 20px;
  border-bottom: 1px solid rgba(28, 25, 21, 0.14);
}
.oc-head img { width: 48px; height: 48px; border-radius: 2px; display: block; flex: none }
.oc-head .oc-fallback {
  width: 48px; height: 48px; border-radius: 2px; flex: none;
  background: #a3322a; color: #faf6ec;
  display: grid; place-items: center; font-size: 20px; font-weight: 700;
}
.oc-head h2 { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -0.01em }
.oc-head p { margin: 2px 0 0; font-size: 14px; color: #7b7265 }
.oc-head .oc-x {
  margin-left: auto; align-self: flex-start;
  border: 0; background: none; cursor: pointer;
  font-size: 22px; line-height: 1; color: #7b7265; padding: 0 2px;
}
.oc-head .oc-x:hover { color: #a3322a }

.oc-section { padding: 18px 24px }
.oc-section + .oc-section { border-top: 1px solid rgba(28, 25, 21, 0.14) }
.oc-section h3 {
  margin: 0 0 12px; font-size: 12px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: #a3322a;
}

.oc-row { display: flex; justify-content: space-between; gap: 16px; padding: 5px 0; font-size: 15px }
.oc-row dt { margin: 0; color: #7b7265 }
.oc-row dd { margin: 0; font-weight: 600; text-align: right; word-break: break-word }
.oc-row dd.oc-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; font-weight: 500 }

.oc-note { margin: 12px 0 0; font-size: 13px; line-height: 1.55; color: #7b7265 }

.oc-foot { padding: 18px 24px 22px; border-top: 1px solid rgba(28, 25, 21, 0.14) }
.oc-foot button {
  width: 100%; min-height: 48px; border-radius: 2px; cursor: pointer;
  border: 1px solid rgba(28, 25, 21, 0.34); background: transparent; color: #1c1915;
  font: inherit; font-size: 15px; font-weight: 600;
}
.oc-foot button:hover { border-color: #a3322a; color: #a3322a }
.oc-foot .oc-signout { border-color: transparent; background: #1c1915; color: #faf6ec }
.oc-foot .oc-signout:hover { background: #a3322a; color: #faf6ec }

.oc-loading { padding: 10px 0; font-size: 14px; color: #7b7265 }