/* île Beta Free Credits — additive. Uses the shared tokens/materials (design-system.css is untouched): graphite surface,
   warm-white text, DM Sans UI, the existing .account-* controls. */

.beta-tag {
  align-self: center; margin-left: 2px;
  font-family: 'DM Sans', sans-serif; font-size: 8px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(234,224,196,.55); border: .5px solid rgba(234,224,196,.22); border-radius: 10px;
  padding: 2px 6px; line-height: 1.2; white-space: nowrap;
}

.cr-balance { margin: 2px 0 8px; font-family: 'DM Sans', sans-serif; color: rgba(230,226,220,.85); }
.cr-balance-num { font-family: 'Spectral', serif; font-style: italic; font-weight: 300; font-size: 26px; color: rgba(234,224,196,.9); }
.cr-balance-unit { font-size: 12px; color: rgba(230,226,220,.5); }

.cr-note, .cr-req-amt { display: flex; flex-direction: column; gap: 4px; margin: 0 0 10px;
  font-family: 'DM Sans', sans-serif; font-size: 11px; color: rgba(230,226,220,.5); }
.cr-note[hidden] { display: none; }
.cr-note input, .cr-req-amt input {
  font-family: 'DM Sans', sans-serif; font-size: 12.5px; color: rgba(230,226,220,.85);
  background: rgba(255,255,255,.04); border: .5px solid rgba(255,255,255,.12); border-radius: 8px; padding: 7px 10px;
}
.cr-note input:focus, .cr-req-amt input:focus { outline: none; border-color: rgba(234,224,196,.35); }

.cr-req { padding: 10px 0; border-top: .5px solid rgba(255,255,255,.07); }
.cr-req:first-child { border-top: none; padding-top: 0; }
.cr-req-who { font-family: 'DM Sans', sans-serif; font-size: 12.5px; color: rgba(230,226,220,.8); word-break: break-word; }
.cr-req-meta { font-family: 'DM Sans', sans-serif; font-size: 10.5px; color: rgba(230,226,220,.38); margin: 2px 0 8px; }
.cr-req-btns { display: flex; gap: 8px; }
.cr-empty { font-family: 'DM Sans', sans-serif; font-size: 12px; color: rgba(230,226,220,.45); margin: 0; }

.credits-notice {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 480; max-width: calc(100vw - 32px);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center;
  background: rgba(26,25,22,.94); border: .5px solid rgba(234,224,196,.2); border-radius: 14px; padding: 10px 16px;
  font-family: 'DM Sans', sans-serif; font-size: 12.5px; color: rgba(230,226,220,.8); backdrop-filter: blur(20px);
}
.credits-notice[hidden] { display: none; }
.credits-notice-btn {
  font-family: 'DM Sans', sans-serif; font-size: 11px; cursor: pointer; border-radius: 16px; padding: 5px 12px;
  background: rgba(255,255,255,.05); border: .5px solid rgba(255,255,255,.14); color: rgba(230,226,220,.75);
}
.credits-notice-btn:hover { background: rgba(255,255,255,.1); color: rgba(230,226,220,.95); }


/* ── Account dashboard ───────────────────────────────────────────────────────────────────────────────────────────
   Same visual language as the Teacher tab: flat black ground (#0F0F0E), cream headings in Spectral italic, near-white body
   text, hairline rules, one terracotta accent, quiet pill controls, no glass/blur/glow. The Account modal keeps its element
   ids, focus handling and behaviour; this section only styles and arranges its existing parts. Scoped to .account-dash /
   .account-modal--dash, so no other surface changes. Every text colour is >= 7:1 on the ground (measured). */
.account-modal--dash { background: rgba(0,0,0,.82); }
.account-dash {
  --ac-cream: #EAE0C4; --ac-ink: rgba(236,232,226,.94); --ac-mute: rgba(236,232,226,.80);
  --ac-rule: rgba(230,226,220,.22); --ac-tc: #C4694A; --ac-tc-soft: #D4896D; --ac-rose: #E3A99B;
}
.account-modal-card.account-dash {
  max-width: 740px; padding: 30px 30px 26px; background: #0F0F0E; backdrop-filter: none; -webkit-backdrop-filter: none;
  border: .5px solid var(--ac-rule); border-radius: 14px;
}
.account-dash .account-modal-head { align-items: flex-start; gap: 16px; margin-bottom: 22px; }
.account-head-text { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.account-dash .account-modal-title { position: relative; display: inline-block; padding-bottom: 12px; font-family: 'Spectral', serif; font-style: italic; font-weight: 300; font-size: 34px; line-height: 1.1; color: var(--ac-cream); }
.account-dash .account-modal-title::after { content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: 56px; background: var(--ac-tc); opacity: .8; }
.account-head-sub { font-family: 'Spectral', serif; font-style: italic; font-weight: 300; font-size: 16px; line-height: 1.55; color: var(--ac-mute); }

/* buttons: the Teacher pill (.te-btn) — transparent, hairline border; primary = terracotta border + cream text */
.account-dash .account-action, .account-dash .account-modal-close {
  display: inline-flex; align-items: center; justify-content: center; text-align: center; height: 36px; padding: 0 18px; border-radius: 18px;
  font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 400; letter-spacing: .03em; text-transform: none; white-space: normal;
  color: var(--ac-ink); background: transparent; border: .5px solid rgba(255,255,255,.28);
}
.account-dash .account-modal-close { flex-shrink: 0; white-space: nowrap; }
.account-dash .account-action:hover:not(:disabled), .account-dash .account-modal-close:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.42); color: #fff; }
.account-dash .account-action:disabled { opacity: .72; cursor: default; }
.account-dash #creditsRequestBtn, .account-dash .cr-req [data-role="grant"], .account-dash #endYes {
  background: rgba(196,105,74,.12); border-color: rgba(196,105,74,.7); color: var(--ac-cream);
}
.account-dash #creditsRequestBtn:hover:not(:disabled), .account-dash .cr-req [data-role="grant"]:hover:not(:disabled), .account-dash #endYes:hover:not(:disabled) {
  background: rgba(196,105,74,.24); border-color: var(--ac-tc);
}
.account-dash .account-action.is-danger { color: var(--ac-rose); border-color: rgba(227,169,155,.55); }
.account-dash .account-action.is-danger:hover:not(:disabled) { background: rgba(227,169,155,.12); border-color: var(--ac-rose); color: #F3C4B8; }
.account-dash .account-btn-row { flex-direction: row; flex-wrap: wrap; }
.account-dash a.account-action { text-decoration: none; }

/* cards: transparent with a hairline, like the Teacher lists */
.account-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.account-card { min-width: 0; margin: 0; padding: 18px 18px 16px; background: transparent; border: .5px solid var(--ac-rule); border-radius: 12px; }
.account-card[hidden] { display: none; }
.account-card--wide { grid-column: 1 / -1; }
.account-card--credits { border-color: rgba(196,105,74,.55); }
.account-card--danger { border-color: rgba(227,169,155,.35); }
.account-dash .account-divider { display: none; }
.account-footer { display: flex; justify-content: flex-end; margin-top: 16px; }

/* text */
.account-dash .account-section-lbl { margin: 0 0 12px; font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 400; letter-spacing: .2em; text-transform: uppercase; color: var(--ac-mute); }
.account-dash .account-email { font-family: 'Spectral', serif; font-weight: 300; font-size: 20px; color: var(--ac-cream); word-break: break-word; }
.account-dash .account-status-line { font-family: 'Spectral', serif; font-style: italic; font-weight: 300; font-size: 15.5px; line-height: 1.6; color: var(--ac-mute); margin: 0 0 12px; }
.account-dash .end-confirm-msg { font-family: 'Spectral', serif; font-style: italic; font-size: 15.5px; color: var(--ac-ink); }

/* free credits */
.cr-hero { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; margin-bottom: 10px; }
.account-dash .cr-balance { margin: 0; }
.account-dash .cr-balance-num { font-family: 'Spectral', serif; font-style: italic; font-weight: 300; font-size: 56px; line-height: 1; color: var(--ac-cream); }
.account-dash .cr-balance-unit { font-family: 'DM Sans', sans-serif; font-size: 14px; color: var(--ac-mute); }
.account-dash #creditsState {
  margin: 0; padding: 6px 14px; border-radius: 16px; font-family: 'DM Sans', sans-serif; font-style: normal; font-size: 13px; line-height: 1.4;
  color: var(--ac-cream); background: rgba(196,105,74,.12); border: .5px solid rgba(196,105,74,.55);
}
.account-dash #creditsState[hidden] { display: none; }
.account-dash .cr-note, .account-dash .cr-req-amt { font-family: 'DM Sans', sans-serif; font-size: 13px; color: var(--ac-mute); max-width: 440px; }
.account-dash .cr-note input, .account-dash .cr-req-amt input {
  font-family: 'Spectral', serif; font-weight: 300; font-size: 17px; color: var(--ac-cream); background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.26); border-radius: 10px; padding: 9px 12px;
}
.account-dash .cr-note input:focus, .account-dash .cr-req-amt input:focus { outline: none; border-color: var(--ac-tc-soft); background: rgba(255,255,255,.06); }
.account-dash .cr-req { border-top: .5px solid var(--ac-rule); padding: 14px 0; }
.account-dash .cr-req:first-child { border-top: none; padding-top: 0; }
.account-dash .cr-req-who { font-family: 'Spectral', serif; font-size: 18px; font-weight: 300; color: var(--ac-cream); }
.account-dash .cr-req-meta { font-family: 'DM Sans', sans-serif; font-size: 12px; color: var(--ac-mute); margin: 3px 0 10px; }
.account-dash .cr-req-amt { flex-direction: row; align-items: center; gap: 10px; }
.account-dash .cr-req-amt input { width: 96px; }
.account-dash .cr-empty { font-family: 'Spectral', serif; font-style: italic; font-size: 15.5px; color: var(--ac-mute); }


/* Owner section: a compact summary in the Account dialog and a larger pop-up for the requests (scales to any number). */
.cr-owner-head { display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; margin-bottom: 12px; }
.account-dash .cr-owner-head .account-section-lbl { margin: 0; flex: 1 1 auto; }
.cr-owner-count { font-family: 'DM Sans', sans-serif; font-size: 12px; line-height: 1; padding: 6px 12px; border-radius: 14px; color: var(--ac-cream); background: rgba(196,105,74,.14); border: .5px solid rgba(196,105,74,.6); white-space: nowrap; }
.cr-owner-count[hidden], #creditsOwnerOpen[hidden], #creditsOwnerSummary[hidden] { display: none; }
.account-dash #creditsOwnerOpen { background: rgba(196,105,74,.12); border-color: rgba(196,105,74,.7); color: var(--ac-cream); }
.account-dash #creditsOwnerOpen:hover { background: rgba(196,105,74,.24); border-color: var(--ac-tc); }

.account-owner-pop { position: fixed; inset: 0; z-index: 3;   /* fixed (not absolute): the Account dialog scrolls on a phone, and the pop-up must stay on screen */
  display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(0,0,0,.74); }
.account-owner-pop[hidden] { display: none; }
.account-owner-panel {
  width: 100%; max-width: 880px; max-height: calc(100vh - 40px); box-sizing: border-box; display: flex; flex-direction: column;
  background: #0F0F0E; border: .5px solid var(--ac-rule); border-radius: 14px; padding: 24px 26px 20px;
}
.cr-pop-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.account-dash .cr-pop-head .account-section-lbl { margin: 0; flex: 1 1 auto; font-size: 12px; }
.account-dash #creditsOwnerList {
  flex: 1 1 auto; min-height: 120px; overflow-y: auto; overscroll-behavior: contain; padding-right: 8px;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.28) transparent; border-top: .5px solid var(--ac-rule);
}
.account-dash #creditsOwnerList::-webkit-scrollbar { width: 6px; }
.account-dash #creditsOwnerList::-webkit-scrollbar-thumb { background: rgba(255,255,255,.28); border-radius: 3px; }
/* one compact row per request: note + date on the left, amount and decision on the right */
.account-dash #creditsOwnerList .cr-req {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-rows: auto auto; column-gap: 16px; align-items: center;
  padding: 12px 0; border-top: .5px solid var(--ac-rule);
}
.account-dash #creditsOwnerList .cr-req:first-child { border-top: none; padding-top: 12px; }
.account-dash #creditsOwnerList .cr-req-who { grid-column: 1; grid-row: 1; }
.account-dash #creditsOwnerList .cr-req-meta { grid-column: 1; grid-row: 2; margin: 2px 0 0; }
.account-dash #creditsOwnerList .cr-req-amt { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
.account-dash #creditsOwnerList .cr-req-btns { grid-column: 3; grid-row: 1 / span 2; }
@media (max-width: 640px) {
  .account-owner-pop { padding: 10px; }
  .account-owner-panel { max-height: calc(100vh - 20px); padding: 18px 14px 14px; }
  .account-dash #creditsOwnerList .cr-req { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 8px; }
  .account-dash #creditsOwnerList .cr-req > * { grid-column: 1; grid-row: auto; }
}

/* keyboard focus */
.account-dash button:focus-visible, .account-dash input:focus-visible { outline: 2px solid rgba(234,224,196,.75); outline-offset: 2px; }

@media (max-width: 640px) {
  .account-modal { align-items: flex-start; padding: 10px; }
  .account-modal-card.account-dash { padding: 22px 16px 18px; max-height: calc(100vh - 20px); }
  .account-dash .account-modal-head { flex-wrap: wrap; }
  .account-dash .account-modal-title { font-size: 30px; }
  .account-grid { grid-template-columns: minmax(0, 1fr); }
  .account-card--wide { grid-column: auto; }
  .account-footer { justify-content: stretch; }
  .account-footer .account-action { width: 100%; }
}


/* ── Teacher applications (owner): same Teacher palette and pop-up as the credit requests ── */
.cr-owner-count[hidden], #tapOpen[hidden], #tapSummary[hidden] { display: none; }
.account-dash #tapOpen, .account-dash .tap-req [data-role="approve"] { background: rgba(196,105,74,.12); border-color: rgba(196,105,74,.7); color: var(--ac-cream); }
.account-dash #tapOpen:hover, .account-dash .tap-req [data-role="approve"]:hover:not(:disabled) { background: rgba(196,105,74,.24); border-color: var(--ac-tc); }
.account-dash #tapList {
  flex: 1 1 auto; min-height: 120px; overflow-y: auto; overscroll-behavior: contain; padding-right: 8px;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.28) transparent; border-top: .5px solid var(--ac-rule);
}
.account-dash #tapList::-webkit-scrollbar { width: 6px; }
.account-dash #tapList::-webkit-scrollbar-thumb { background: rgba(255,255,255,.28); border-radius: 3px; }
.account-dash .tap-req { padding: 14px 0; border-top: .5px solid var(--ac-rule); }
.account-dash .tap-req:first-child { border-top: none; }
.account-dash .tap-req-who { font-family: 'Spectral', serif; font-size: 18px; font-weight: 300; color: var(--ac-cream); overflow-wrap: anywhere; }
.account-dash .tap-req-meta { font-family: 'DM Sans', sans-serif; font-size: 12px; color: var(--ac-mute); margin: 3px 0 8px; }
.account-dash .tap-req-bio { font-family: 'Spectral', serif; font-weight: 300; font-size: 15.5px; line-height: 1.55; color: var(--ac-ink); white-space: pre-wrap; overflow-wrap: anywhere; margin: 0 0 12px; }
.account-dash .tap-req-bio.is-empty { font-style: italic; color: var(--ac-mute); }
.account-dash .tap-req-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.account-dash .tap-req-btns .is-danger { margin-left: auto; }
@media (max-width: 640px) { .account-dash .tap-req-btns .is-danger { margin-left: 0; } }