:root {
  --credit-bg: #06111d;
  --credit-surface: rgba(6, 22, 36, .9);
  --credit-surface-strong: rgba(5, 18, 31, .96);
  --credit-ivory: #ead9bd;
  --credit-gold: #c9a36a;
  --credit-gold-bright: #e5c38a;
  --credit-muted: #8e9baa;
  --credit-line: rgba(201, 163, 106, .45);
  --credit-line-cool: rgba(132, 161, 187, .25);
  --credit-positive: #83c9b4;
  --credit-pending: #d9a35b;
  --credit-radius: 14px;
}

.credit-page { min-height: 100vh; color: #d8dee5; background: var(--credit-bg); font-family: "Noto Serif SC", "Songti SC", serif; }
.credit-page #bg-layer { background-image: url("../bg-castle-user.jpg"); background-position: center 44%; filter: saturate(.72) brightness(.58) contrast(1.1); transform: scale(1.04); }
.credit-page #bg-overlay { background: linear-gradient(180deg, rgba(2, 12, 22, .46), rgba(3, 12, 22, .66) 42%, rgba(2, 9, 16, .9)), radial-gradient(circle at 50% 19%, rgba(22, 63, 91, .24), transparent 42%); }

.credit-nav { position: sticky; top: 0; z-index: 40; display: grid; grid-template-columns: minmax(370px, 1fr) auto minmax(300px, 1fr); align-items: center; min-height: 78px; padding: 0 clamp(24px, 3.4vw, 54px); border-bottom: 1px solid rgba(201, 163, 106, .26); background: rgba(3, 13, 23, .86); backdrop-filter: blur(20px); }
.credit-brand { display: flex; align-items: center; gap: 15px; min-width: 0; color: var(--credit-ivory); }
.credit-brand img { width: 52px; height: 52px; border: 1px solid rgba(201, 163, 106, .55); border-radius: 50%; }
.credit-brand strong { font-size: 25px; font-weight: 500; letter-spacing: .12em; white-space: nowrap; }
.credit-brand > span { width: 1px; height: 28px; background: var(--credit-line); }
.credit-brand small { color: var(--credit-muted); font-size: 13px; letter-spacing: .09em; white-space: nowrap; }
.credit-nav nav { display: flex; align-items: center; gap: clamp(30px, 4.5vw, 66px); }
.credit-nav nav a { color: var(--credit-ivory); font-size: 16px; letter-spacing: .18em; transition: color .2s; }
.credit-nav nav a:hover, .credit-user a:hover { color: var(--credit-gold-bright); }
.credit-user { justify-self: end; display: flex; align-items: center; gap: 14px; }
.credit-user > img { width: 43px; height: 43px; border: 1px solid var(--credit-line); border-radius: 50%; object-fit: cover; }
.credit-user > a:last-child { max-width: 140px; overflow: hidden; color: var(--credit-ivory); text-overflow: ellipsis; white-space: nowrap; }
.credit-bell { position: relative; display: grid; width: 38px; height: 38px; place-items: center; margin-right: 10px; }
.credit-bell img { width: 24px; height: 24px; object-fit: contain; }
.credit-bell i { position: absolute; right: 3px; top: 1px; width: 7px; height: 7px; border-radius: 50%; background: var(--credit-pending); box-shadow: 0 0 10px var(--credit-pending); }

.credit-shell { position: relative; z-index: 1; width: min(1320px, calc(100% - 48px)); margin: 0 auto; padding: 30px 0 55px; }
.credit-heading { display: flex; align-items: flex-end; justify-content: space-between; margin: 0 2px 18px; }
.credit-heading > div { display: flex; align-items: baseline; gap: 24px; }
.credit-heading h1 { color: var(--credit-ivory); font-size: 31px; font-weight: 500; letter-spacing: .16em; }
.credit-heading p { color: var(--credit-muted); font-size: 14px; letter-spacing: .08em; }
.credit-rules-link { display: inline-flex; gap: 8px; align-items: center; border: 0; border-bottom: 1px solid rgba(201, 163, 106, .4); padding: 7px 2px; color: var(--credit-gold); background: transparent; font: 14px/1 inherit; cursor: pointer; }
.credit-rules-link span { display: grid; width: 21px; height: 21px; place-items: center; border: 1px solid var(--credit-gold); border-radius: 50%; }

.credit-panel { border: 1px solid var(--credit-line); border-radius: var(--credit-radius); background: linear-gradient(135deg, rgba(7, 28, 46, .92), rgba(4, 17, 29, .94)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03), 0 16px 50px rgba(0, 0, 0, .25); backdrop-filter: blur(16px); }
.credit-summary-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 10px; }
.credit-balance-card { display: grid; grid-template-columns: 52% 48%; min-height: 305px; overflow: hidden; padding: 30px 36px; }
.credit-balance-card::after { position: absolute; inset: 0; background: radial-gradient(circle at 78% 49%, rgba(60, 133, 170, .16), transparent 35%); content: ""; pointer-events: none; }
.credit-balance-copy { z-index: 2; display: flex; flex-direction: column; min-width: 0; }
.credit-panel h2 { color: var(--credit-ivory); font-size: 18px; font-weight: 500; letter-spacing: .12em; }
.credit-balance { display: flex; align-items: baseline; gap: 15px; margin-top: 10px; color: var(--credit-ivory); }
.credit-balance strong { font: 500 clamp(47px, 4.8vw, 68px)/1.02 Georgia, "Times New Roman", serif; letter-spacing: .06em; }
.credit-balance span { color: var(--credit-gold); font-size: 16px; }
.credit-pulse { display: flex; margin-top: 19px; }
.credit-pulse > div { min-width: 148px; }
.credit-pulse > div + div { border-left: 1px solid var(--credit-line-cool); padding-left: 48px; }
.credit-pulse dt, .credit-lifetime dt { margin-bottom: 5px; color: var(--credit-muted); font-size: 13px; letter-spacing: .12em; }
.credit-pulse dd { font: 30px/1.2 Georgia, serif; }
.positive { color: var(--credit-positive); }.pending { color: var(--credit-pending); }
.positive::before { content: "+"; }
.credit-progress, .credit-student-progress { height: 5px; margin-top: 14px; overflow: hidden; border: 1px solid rgba(139, 159, 175, .28); border-radius: 999px; background: rgba(3, 8, 14, .62); }
.credit-progress i, .credit-student-progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #6dbca8, #9ed9cb); transition: width .55s ease; }
.credit-progress-note { margin-top: 8px; color: var(--credit-muted); font-size: 12px; }
.credit-actions { display: flex; gap: 18px; margin-top: auto; padding-top: 12px; }
.credit-button { display: inline-flex; min-height: 42px; flex: 1; align-items: center; justify-content: center; gap: 26px; border: 1px solid var(--credit-gold); border-radius: 9px; color: var(--credit-ivory); background: rgba(7, 15, 24, .62); font: 14px/1.2 inherit; letter-spacing: .12em; cursor: pointer; }
.credit-button.primary { color: #14202c; background: linear-gradient(135deg, #d2aa6d, #aa7b3e); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 8px 22px rgba(139, 94, 37, .22); }
.credit-button:hover { filter: brightness(1.09); }
.credit-coin-wrap { z-index: 1; display: grid; align-items: center; justify-items: center; }
.credit-coin-wrap .credit-coin-art { width: min(310px, 100%); filter: drop-shadow(0 18px 24px rgba(0,0,0,.45)); }

.credit-student-card { position: relative; min-height: 305px; padding: 30px 32px; overflow: hidden; }
.credit-student-card .credit-flourish { position: absolute; top: 36px; right: 42px; width: 55%; height: 18px; opacity: .5; background: url("../art/v8/credits/credit-divider-flourish-v1-512.png") center/contain no-repeat; }
.credit-student-id { display: block; margin-top: 25px; color: var(--credit-ivory); font: 31px/1.2 Georgia, serif; letter-spacing: .1em; }
.credit-student-role { margin-top: 12px; color: var(--credit-gold-bright); font-size: 18px; letter-spacing: .12em; }
.credit-student-progress { margin-top: 18px; }
.credit-student-progress i { width: 0; background: linear-gradient(90deg, #d3a55f, #efc680); }
.credit-lifetime { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 25px; padding-top: 20px; border-top: 1px solid var(--credit-line-cool); }
.credit-lifetime > div + div { border-left: 1px solid var(--credit-line-cool); padding-left: 22px; }
.credit-lifetime dd { color: var(--credit-ivory); font: 24px/1.2 Georgia, serif; white-space: nowrap; }

.credit-daily-entry { display: grid; grid-template-columns: 92px minmax(280px, 1fr) auto 142px; align-items: center; gap: 24px; min-height: 126px; margin-top: 10px; padding: 14px 24px 14px 18px; overflow: hidden; transition: border-color .2s, transform .2s, filter .2s; }
.credit-daily-entry::after { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(201, 163, 106, .12), transparent 32%, rgba(75, 128, 153, .08)); content: ""; pointer-events: none; }
.credit-daily-entry:hover { border-color: rgba(229, 195, 138, .78); filter: brightness(1.07); transform: translateY(-1px); }
.credit-daily-entry > * { position: relative; z-index: 1; }
.credit-daily-entry > img { width: 92px; height: 92px; object-fit: contain; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .38)); }
.credit-daily-entry > div > span { color: var(--credit-gold); font: 10px/1.2 Georgia, serif; letter-spacing: .2em; }
.credit-daily-entry h2 { margin-top: 7px; font-size: 21px; }
.credit-daily-entry p { margin-top: 7px; color: var(--credit-muted); font-size: 12px; }
.credit-daily-entry dl { display: grid; grid-template-columns: repeat(3, minmax(90px, 1fr)); }
.credit-daily-entry dl > div { min-width: 100px; padding: 4px 20px; border-left: 1px solid var(--credit-line-cool); text-align: center; }
.credit-daily-entry dt { color: var(--credit-muted); font-size: 11px; letter-spacing: .08em; }
.credit-daily-entry dd { margin-top: 6px; color: var(--credit-ivory); font: 22px/1 Georgia, serif; white-space: nowrap; }
.credit-daily-entry > strong { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; gap: 20px; border: 1px solid var(--credit-gold); border-radius: 8px; padding: 0 16px; color: #14202c; background: linear-gradient(135deg, #d2aa6d, #aa7b3e); font-size: 13px; font-weight: 500; letter-spacing: .1em; white-space: nowrap; }
.credit-story-entry { display:grid; grid-template-columns:76px minmax(0,1fr) 142px; align-items:center; gap:22px; min-height:104px; margin-top:10px; padding:13px 24px 13px 18px; overflow:hidden; background:linear-gradient(120deg,rgba(35,31,45,.94),rgba(19,31,38,.93)); transition:border-color .2s,transform .2s,filter .2s; }
.credit-story-entry:hover { border-color:rgba(190,163,211,.78); filter:brightness(1.06); transform:translateY(-1px); }
.credit-story-entry > img { width:76px; height:76px; object-fit:contain; }
.credit-story-entry > div > span { color:#c8aed7; font:10px/1.2 Georgia,serif; letter-spacing:.2em; }
.credit-story-entry h2 { margin-top:6px; font-size:19px; }.credit-story-entry p{margin-top:6px;color:var(--credit-muted);font-size:12px;}
.credit-story-entry > strong { display:inline-flex; min-height:42px; align-items:center; justify-content:center; gap:18px; border:1px solid rgba(190,163,211,.6); border-radius:8px; color:var(--credit-ivory); font-size:13px; font-weight:500; letter-spacing:.1em; }

.credit-detail-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 10px; margin-top: 10px; }
.credit-ledger { min-height: 398px; padding: 20px 24px; }
.credit-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.credit-panel-head form { display: flex; min-height: 39px; align-items: stretch; overflow: hidden; border: 1px solid var(--credit-line-cool); border-radius: 9px; background: rgba(2, 13, 23, .72); }
.credit-panel-head select, .credit-panel-head input { border: 0; outline: 0; color: #aab4be; background: transparent; font: 13px/1.2 inherit; }
.credit-panel-head select { width: 130px; height: 100%; padding: 0 12px; border-right: 1px solid var(--credit-line-cool); cursor: pointer; }
.credit-search { display: flex; align-items: center; padding: 0 10px; }
.credit-search span { color: var(--credit-gold); font-size: 20px; }.credit-search input { width: 0; padding: 0; transition: width .2s, padding .2s; }.credit-search:focus-within input { width: 120px; padding-left: 8px; }
.credit-tabs { display: inline-grid; grid-template-columns: repeat(4, 1fr); margin-top: 13px; overflow: hidden; border: 1px solid var(--credit-line-cool); border-radius: 8px; }
.credit-tabs button { min-width: 84px; border: 0; border-right: 1px solid var(--credit-line-cool); padding: 8px 18px; color: var(--credit-muted); background: rgba(3, 14, 25, .4); font: 13px/1.2 inherit; cursor: pointer; }
.credit-tabs button:last-child { border-right: 0; }.credit-tabs button.active { color: var(--credit-gold-bright); box-shadow: inset 0 0 0 1px var(--credit-gold); background: rgba(173, 124, 62, .1); }
.credit-entry-list { min-height: 246px; margin-top: 10px; border: 1px solid var(--credit-line-cool); border-radius: 8px; overflow: hidden; }
.credit-entry { display: grid; grid-template-columns: minmax(220px, 1.5fr) minmax(90px, .55fr) 128px 80px 84px; align-items: center; min-height: 47px; padding: 6px 14px; border-bottom: 1px solid rgba(132,161,187,.16); }
.credit-entry:last-child { border-bottom: 0; }
.credit-entry-title { display: flex; align-items: center; min-width: 0; gap: 12px; color: var(--credit-ivory); }
.credit-entry-title img { width: 27px; height: 27px; object-fit: contain; }.credit-entry-title strong { overflow: hidden; font-size: 13px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.credit-entry > span { color: var(--credit-muted); font-size: 12px; }.credit-entry time { color: var(--credit-muted); font-size: 11px; }
.credit-entry .credit-amount { color: var(--credit-ivory); font: 20px/1 Georgia, serif; }.credit-entry .credit-amount.income { color: var(--credit-positive); }.credit-entry .credit-amount.expense { color: var(--credit-pending); }
.credit-entry-status { display: flex; align-items: center; gap: 7px; justify-self: end; white-space: nowrap; }.credit-entry-status i { width: 6px; height: 6px; border-radius: 50%; background: #727b83; }.credit-entry-status.pending i { background: var(--credit-pending); }.credit-entry-status.completed i { background: var(--credit-positive); }
.credit-loading, .credit-empty { display: grid; min-height: 246px; place-items: center; color: var(--credit-muted); font-size: 13px; }
.credit-pagination { display: flex; min-height: 42px; align-items: center; gap: 8px; padding-top: 11px; }.credit-pagination button { display: grid; min-width: 29px; height: 29px; place-items: center; border: 0; color: var(--credit-muted); background: transparent; cursor: pointer; }.credit-pagination button.current { border: 1px solid var(--credit-gold); color: var(--credit-ivory); }.credit-pagination button:disabled { opacity: .35; cursor: default; }.credit-pagination > div { display: flex; gap: 5px; }.credit-pagination > span { margin-left: auto; color: var(--credit-gold); font-size: 12px; }

.credit-side { display: grid; gap: 10px; grid-template-rows: 166px 145px 67px; }
.credit-trend { padding: 18px 22px; }.credit-trend .credit-panel-head p { color: var(--credit-muted); font-size: 12px; }.credit-trend .credit-panel-head strong { margin-left: 7px; color: var(--credit-positive); font: 20px Georgia, serif; }.credit-chart { height: 102px; margin-top: 5px; }
.credit-chart svg { width: 100%; height: 100%; overflow: visible; }.credit-chart text { fill: #8493a1; font: 9px system-ui, sans-serif; }.credit-chart .grid { stroke: rgba(132,161,187,.18); stroke-dasharray: 3 3; }.credit-chart .line { fill: none; stroke: #70d6d2; stroke-width: 2; filter: drop-shadow(0 0 5px rgba(69,220,214,.35)); }.credit-chart .area { fill: url(#creditArea); }.credit-chart circle { fill: #d8ffff; stroke: #59c8c6; stroke-width: 1.5; }
.credit-shortcuts { padding: 17px 21px; }.credit-shortcuts > div { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 11px; }.credit-shortcuts a, .credit-shortcuts button { display: flex; min-width: 0; flex-direction: column; align-items: center; gap: 3px; border: 0; border-right: 1px solid var(--credit-line-cool); color: var(--credit-ivory); background: transparent; font: 12px/1.2 inherit; letter-spacing: .08em; cursor: pointer; }.credit-shortcuts :last-child { border-right: 0; }.credit-shortcuts img { width: 42px; height: 42px; object-fit: contain; }.credit-shortcuts span { color: var(--credit-gold); }
.credit-pending-notice { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 12px; padding: 10px 17px; }.credit-pending-notice img { width: 32px; height: 32px; }.credit-pending-notice strong { color: var(--credit-ivory); font-size: 13px; font-weight: 500; }.credit-pending-notice span { color: var(--credit-muted); font-size: 11px; }
.credit-error { margin-top: 10px; border: 1px solid rgba(220, 108, 93, .45); border-radius: 10px; padding: 12px 16px; color: #f0c1bb; background: rgba(100, 25, 22, .38); }

.credit-rules { width: min(520px, calc(100% - 32px)); border: 0; padding: 0; color: #d8dee5; background: transparent; }.credit-rules::backdrop { background: rgba(1, 7, 13, .82); backdrop-filter: blur(8px); }.credit-rules-inner { position: relative; border: 1px solid var(--credit-line); border-radius: 16px; padding: 34px 38px; overflow: hidden; text-align: center; background: #071827; box-shadow: 0 30px 90px #000b; }.credit-rules-inner > img { width: 82px; height: 82px; margin: 0 auto 8px; object-fit: contain; }.credit-rules h2 { color: var(--credit-ivory); font-size: 25px; font-weight: 500; letter-spacing: .16em; }.credit-rules p, .credit-rules li { color: #9ca8b4; font-size: 13px; line-height: 1.9; text-align: left; }.credit-rules p { margin-top: 16px; }.credit-rules ul { margin: 10px 0 23px; padding-left: 20px; }.credit-rules .credit-button { width: 190px; margin: auto; }.credit-rules-close { position: absolute; top: 12px; right: 16px; border: 0; color: var(--credit-muted); background: transparent; font-size: 27px; cursor: pointer; }

@media (max-width: 1050px) {
  .credit-nav { grid-template-columns: 1fr auto; }.credit-nav nav { display: none; }.credit-brand small { display: none; }
  .credit-summary-grid, .credit-detail-grid { grid-template-columns: 1fr; }.credit-side { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; }.credit-pending-notice { grid-column: 1 / -1; }
  .credit-daily-entry { grid-template-columns: 78px 1fr 134px; }.credit-daily-entry > img { width: 78px; height: 78px; }.credit-daily-entry dl { grid-column: 1 / -1; grid-row: 2; }.credit-daily-entry dl > div:first-child { border-left: 0; }
}
@media (max-width: 680px) {
  .credit-nav { min-height: 64px; padding: 0 14px; }.credit-brand { gap: 9px; }.credit-brand img { width: 40px; height: 40px; }.credit-brand strong { font-size: 17px; }.credit-brand > span { display: none; }.credit-user { gap: 8px; }.credit-user > img { width: 36px; height: 36px; }.credit-user > a:last-child { display: none; }.credit-bell { margin-right: 0; }
  .credit-shell { width: min(100% - 24px, 1320px); padding-top: 20px; }.credit-heading { align-items: center; }.credit-heading > div { display: block; }.credit-heading h1 { font-size: 25px; }.credit-heading p { margin-top: 5px; font-size: 12px; }.credit-rules-link { font-size: 12px; }
  .credit-balance-card { grid-template-columns: 1fr; padding: 24px 20px; }.credit-coin-wrap { grid-row: 1; height: 150px; }.credit-coin-wrap .credit-coin-art { width: 175px; }.credit-balance { justify-content: center; }.credit-balance-copy h2 { text-align: center; }.credit-balance strong { font-size: 48px; }.credit-pulse { justify-content: center; }.credit-pulse > div { min-width: 0; width: 45%; text-align: center; }.credit-pulse > div + div { padding-left: 0; }.credit-actions { flex-direction: column; }.credit-button { min-height: 46px; }
  .credit-student-card { padding: 24px 20px; }.credit-student-card .credit-flourish { display: none; }.credit-student-id { font-size: 25px; }.credit-lifetime > div + div { padding-left: 12px; }.credit-lifetime dd { font-size: 19px; }
  .credit-daily-entry { grid-template-columns: 66px 1fr; gap: 12px; padding: 14px; }.credit-daily-entry > img { width: 66px; height: 66px; }.credit-daily-entry h2 { font-size: 17px; }.credit-daily-entry p { line-height: 1.6; }.credit-daily-entry dl { grid-column: 1 / -1; }.credit-daily-entry dl > div { min-width: 0; padding: 3px 7px; }.credit-daily-entry dd { font-size: 18px; }.credit-daily-entry > strong { grid-column: 1 / -1; width: 100%; }
  .credit-story-entry{grid-template-columns:64px 1fr;padding:14px;gap:12px}.credit-story-entry>img{width:64px;height:64px}.credit-story-entry>strong{grid-column:1/-1;width:100%}
  .credit-ledger { padding: 18px 12px; }.credit-panel-head { align-items: flex-start; flex-direction: column; }.credit-panel-head form { width: 100%; }.credit-panel-head select { flex: 1; }.credit-search { flex: 1; }.credit-search input, .credit-search:focus-within input { width: 100%; padding-left: 8px; }.credit-tabs { display: grid; width: 100%; }.credit-tabs button { min-width: 0; padding: 10px 4px; }
  .credit-entry { grid-template-columns: 1fr auto; gap: 5px 10px; padding: 10px 12px; }.credit-entry > span:not(.credit-amount), .credit-entry time { padding-left: 39px; }.credit-entry > span:nth-child(2) { grid-column: 1; grid-row: 2; }.credit-entry time { grid-column: 1; grid-row: 3; }.credit-entry .credit-amount { grid-column: 2; grid-row: 1; }.credit-entry-status { grid-column: 2; grid-row: 2 / 4; }.credit-pagination > span { display: none; }
  .credit-side { grid-template-columns: 1fr; }.credit-pending-notice { grid-column: auto; }.credit-trend { min-height: 190px; }.credit-trend .credit-panel-head { flex-direction: row; }.credit-shortcuts { min-height: 150px; }
  .credit-rules-inner { padding: 28px 22px; }
}

@media (prefers-reduced-motion: reduce) { .credit-progress i, .credit-student-progress i, .credit-search input, .credit-daily-entry { transition: none; } }