:root {
  --daily-bg: #050f1a;
  --daily-panel: rgba(4, 17, 29, .9);
  --daily-panel-strong: rgba(3, 14, 24, .96);
  --daily-ivory: #ead9bd;
  --daily-gold: #c9a36a;
  --daily-gold-bright: #e8c890;
  --daily-muted: #8e9baa;
  --daily-line: rgba(201, 163, 106, .52);
  --daily-line-cool: rgba(132, 161, 187, .22);
  --daily-positive: #83c9b4;
}

* { box-sizing: border-box; }
.daily-credit-page { min-height: 100vh; margin: 0; color: #d8dee5; background: var(--daily-bg); font-family: "Noto Serif SC", "Songti SC", serif; }
.daily-credit-page #bg-layer { position: fixed; z-index: -3; inset: 0; background: url("../art/v10/daily-credit/daily-credit-castle-v1-1920.webp") center top / cover no-repeat; }
.daily-credit-page #bg-overlay { position: fixed; z-index: -2; inset: 0; background: linear-gradient(180deg, rgba(2, 9, 16, .42), rgba(2, 10, 18, .73) 45%, rgba(2, 8, 14, .94)), radial-gradient(circle at 73% 12%, rgba(72, 110, 139, .13), transparent 32%); }

.daily-credit-nav { position: sticky; z-index: 40; top: 0; display: grid; grid-template-columns: minmax(360px, 1fr) auto minmax(190px, 1fr); align-items: center; min-height: 72px; padding: 0 clamp(20px, 3.2vw, 52px); border-bottom: 1px solid rgba(201, 163, 106, .3); background: rgba(2, 11, 20, .9); backdrop-filter: blur(18px); }
.daily-credit-brand { display: flex; align-items: center; gap: 14px; min-width: 0; color: var(--daily-ivory); }
.daily-credit-brand img { width: 46px; height: 46px; border: 1px solid var(--daily-line); border-radius: 50%; }
.daily-credit-brand strong { font-size: 22px; font-weight: 500; letter-spacing: .12em; white-space: nowrap; }
.daily-credit-brand > span { width: 1px; height: 27px; background: var(--daily-line); }
.daily-credit-brand small { color: var(--daily-muted); font-size: 12px; letter-spacing: .09em; white-space: nowrap; }
.daily-credit-nav nav { display: flex; gap: clamp(24px, 3.7vw, 54px); }
.daily-credit-nav nav a, .daily-credit-user { color: var(--daily-ivory); font-size: 14px; letter-spacing: .14em; transition: color .2s; }
.daily-credit-nav nav a:hover, .daily-credit-user:hover { color: var(--daily-gold-bright); }
.daily-credit-user { justify-self: end; overflow: hidden; max-width: 180px; text-overflow: ellipsis; white-space: nowrap; }

.daily-credit-shell { width: min(1460px, calc(100% - 56px)); margin: 0 auto; padding: 26px 0 54px; }
.daily-credit-heading { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 28px; padding: 0 10px 20px; border-bottom: 1px solid var(--daily-line-cool); }
.daily-credit-heading a { display: inline-block; margin-bottom: 12px; color: var(--daily-gold); font-size: 11px; letter-spacing: .12em; }
.daily-credit-heading h1 { color: var(--daily-ivory); font-size: clamp(38px, 4vw, 58px); font-weight: 500; line-height: 1; letter-spacing: .12em; }
.daily-credit-heading p { margin-top: 14px; color: var(--daily-muted); font-size: 13px; letter-spacing: .08em; }
.daily-credit-account { display: grid; grid-template-columns: auto auto auto 1px auto auto auto; align-items: baseline; gap: 10px; padding-bottom: 8px; }
.daily-credit-account span { color: var(--daily-muted); font-size: 12px; letter-spacing: .08em; }
.daily-credit-account strong { color: var(--daily-ivory); font: 31px/1 Georgia, serif; }
.daily-credit-account small { color: var(--daily-gold); font-size: 11px; }
.daily-credit-account i { align-self: stretch; margin: 0 12px; background: var(--daily-line-cool); }

.daily-credit-main { display: grid; grid-template-columns: minmax(210px, .7fr) minmax(600px, 2.2fr) minmax(245px, .85fr); min-height: 484px; margin-top: 14px; border: 1px solid var(--daily-line); background: linear-gradient(135deg, rgba(4, 20, 34, .94), rgba(2, 12, 22, .91)); box-shadow: 0 24px 70px rgba(0, 0, 0, .3), inset 0 1px rgba(255, 255, 255, .03); }
.daily-credit-crest { display: grid; place-items: center; padding: 28px 12px; border-right: 1px solid var(--daily-line-cool); }
.daily-credit-crest img { width: min(100%, 310px); filter: drop-shadow(0 20px 28px rgba(0, 0, 0, .48)); }
.daily-credit-workflow { min-width: 0; padding: 30px clamp(24px, 3vw, 46px); }
.daily-credit-section-title { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; }
.daily-credit-section-title > span { height: 1px; background: linear-gradient(90deg, transparent, var(--daily-line)); }
.daily-credit-section-title > span:last-child { background: linear-gradient(90deg, var(--daily-line), transparent); }
.daily-credit-section-title h2 { color: var(--daily-ivory); font-size: 20px; font-weight: 500; letter-spacing: .12em; white-space: nowrap; }
.daily-credit-section-title h2 strong { margin-left: 10px; color: var(--daily-gold); font: 22px Georgia, serif; }

.daily-credit-steps { display: grid; grid-template-columns: repeat(3, 1fr); margin: 36px 0 0; padding: 0; list-style: none; }
.daily-credit-steps li { position: relative; display: grid; grid-template-rows: 132px minmax(120px, auto) 42px 24px; justify-items: center; padding: 0 20px; text-align: center; }
.daily-credit-steps li + li::before { position: absolute; top: 66px; right: 50%; width: 100%; height: 1px; background: var(--daily-line); content: ""; transform: translateX(-50%); }
.daily-credit-steps img { z-index: 1; width: 132px; height: 132px; object-fit: contain; filter: saturate(.55) brightness(.72); transition: filter .25s, transform .25s; }
.daily-credit-steps li.completed img { filter: drop-shadow(0 8px 18px rgba(201, 163, 106, .22)); transform: translateY(-2px); }
.daily-credit-steps small { color: var(--daily-gold); font-size: 10px; letter-spacing: .12em; }
.daily-credit-steps h3 { margin-top: 6px; color: var(--daily-ivory); font-size: 20px; font-weight: 500; letter-spacing: .09em; }
.daily-credit-steps p { margin-top: 9px; color: var(--daily-muted); font-size: 12px; line-height: 1.8; }
.daily-credit-action { display: inline-flex; min-width: 126px; min-height: 39px; align-items: center; justify-content: center; border: 1px solid var(--daily-gold); border-radius: 5px; padding: 7px 18px; color: var(--daily-ivory); background: rgba(8, 20, 31, .74); font: 13px/1.2 inherit; letter-spacing: .09em; cursor: pointer; transition: filter .2s, background .2s; }
.daily-credit-action:hover { filter: brightness(1.14); background: rgba(43, 34, 24, .62); }
.daily-credit-action:disabled { border-color: var(--daily-line-cool); color: var(--daily-muted); background: rgba(8, 16, 24, .5); cursor: default; filter: none; }
.daily-credit-state { align-self: end; color: var(--daily-muted); font-size: 11px; }
.daily-credit-steps li.completed .daily-credit-state { color: var(--daily-positive); }

.daily-credit-friend { display: flex; flex-direction: column; align-items: center; margin: 20px; border: 1px solid var(--daily-line); padding: 22px 19px 18px; text-align: center; background: rgba(5, 17, 28, .72); }
.daily-credit-friend > img { width: 148px; height: 148px; object-fit: contain; filter: saturate(.72) brightness(.86); }
.daily-credit-friend > span { margin-top: 7px; color: var(--daily-gold); font-size: 10px; letter-spacing: .18em; }
.daily-credit-friend h2 { margin-top: 9px; color: var(--daily-ivory); font-size: 20px; font-weight: 500; }
.daily-credit-friend > strong { margin-top: 8px; color: var(--daily-gold-bright); font: 38px Georgia, serif; }
.daily-credit-friend > strong small { font: 12px inherit; }
.daily-credit-friend p { margin: 12px 0 16px; color: var(--daily-muted); font-size: 11px; line-height: 1.8; }
.daily-credit-friend b { margin-top: 9px; color: var(--daily-muted); font-size: 11px; font-weight: 400; }
.daily-credit-friend[data-completed="true"] > img { filter: drop-shadow(0 8px 20px rgba(201, 163, 106, .2)); }
.daily-credit-friend[data-completed="true"] b { color: var(--daily-positive); }

.daily-credit-lower { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(290px, .9fr); gap: 14px; margin-top: 14px; }
.daily-credit-history, .daily-credit-reward { border: 1px solid var(--daily-line); background: var(--daily-panel); }
.daily-credit-history { padding: 20px 24px 22px; }
.daily-credit-history h2 { color: var(--daily-ivory); font-size: 17px; font-weight: 500; letter-spacing: .1em; }
.daily-credit-history-list { display: grid; grid-template-columns: repeat(7, 1fr); margin-top: 14px; border-top: 1px solid var(--daily-line-cool); border-bottom: 1px solid var(--daily-line-cool); }
.daily-credit-day { display: grid; min-height: 112px; place-items: center; gap: 5px; padding: 10px 5px; color: var(--daily-muted); text-align: center; }
.daily-credit-day + .daily-credit-day { border-left: 1px solid var(--daily-line-cool); }
.daily-credit-day.today { color: var(--daily-ivory); background: rgba(201, 163, 106, .08); box-shadow: inset 0 0 0 1px var(--daily-gold); }
.daily-credit-day time { font: 14px Georgia, serif; }
.daily-credit-day i { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid #596677; border-radius: 50%; font-style: normal; }
.daily-credit-day.completed i { border-color: var(--daily-gold); color: var(--daily-gold-bright); }
.daily-credit-day small { font-size: 10px; }
.daily-credit-day em { color: var(--daily-gold); font-size: 9px; font-style: normal; }
.daily-credit-reward { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 177px; padding: 20px; text-align: center; }
.daily-credit-reward > span { color: var(--daily-ivory); font-size: 13px; letter-spacing: .08em; }
.daily-credit-reward > strong { margin-top: 10px; color: var(--daily-gold-bright); font: 48px Georgia, serif; }
.daily-credit-reward > strong small { font: 13px inherit; }
.daily-credit-reward p { margin-top: 6px; color: var(--daily-muted); font-size: 11px; }
.daily-credit-reward[data-completed="true"] { background: radial-gradient(circle, rgba(201, 163, 106, .16), transparent 64%), var(--daily-panel); }
.daily-credit-reward[data-completed="true"] p { color: var(--daily-positive); }

.daily-credit-error { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; margin-top: 14px; border: 1px solid rgba(220, 108, 93, .45); padding: 13px 16px; color: #f0c1bb; background: rgba(80, 20, 20, .58); }
.daily-credit-error span { color: #caa7a2; font-size: 12px; }
.daily-credit-error button { border: 1px solid currentColor; padding: 7px 13px; color: inherit; background: transparent; cursor: pointer; }

.daily-credit-welcome { width: min(520px, calc(100% - 30px)); border: 0; padding: 0; color: #d8dee5; background: transparent; }
.daily-credit-welcome::backdrop { background: rgba(1, 7, 13, .84); backdrop-filter: blur(10px); }
.daily-credit-welcome > div { position: relative; display: flex; flex-direction: column; align-items: center; border: 1px solid var(--daily-line); padding: 28px 34px 32px; overflow: hidden; text-align: center; background: radial-gradient(circle at 50% 25%, rgba(201, 163, 106, .14), transparent 42%), #061522; box-shadow: 0 30px 100px #000c; }
.daily-credit-welcome > div > button:first-child { position: absolute; z-index: 2; top: 10px; right: 13px; border: 0; color: var(--daily-muted); background: transparent; font-size: 27px; cursor: pointer; }
.daily-credit-welcome img { width: 190px; height: 190px; object-fit: contain; filter: drop-shadow(0 16px 24px rgba(0, 0, 0, .4)); }
.daily-credit-welcome span { color: var(--daily-gold); font-size: 11px; letter-spacing: .13em; }
.daily-credit-welcome h2 { margin-top: 8px; color: var(--daily-ivory); font-size: 25px; font-weight: 500; letter-spacing: .12em; }
.daily-credit-welcome strong { margin: 8px 0 4px; color: var(--daily-gold-bright); font: 48px Georgia, serif; }
.daily-credit-welcome strong small { font: 14px inherit; }
.daily-credit-welcome p { margin-bottom: 18px; color: var(--daily-muted); font-size: 12px; }

@media (max-width: 1120px) {
  .daily-credit-nav { grid-template-columns: 1fr auto; }.daily-credit-nav nav { display: none; }.daily-credit-brand small { display: none; }
  .daily-credit-main { grid-template-columns: 190px 1fr; }.daily-credit-friend { grid-column: 1 / -1; display: grid; grid-template-columns: 120px 1fr auto; align-items: center; gap: 6px 18px; text-align: left; }.daily-credit-friend > img { grid-row: 1 / 6; width: 120px; height: 120px; }.daily-credit-friend > span, .daily-credit-friend h2, .daily-credit-friend > strong, .daily-credit-friend p { margin: 0; }.daily-credit-friend .daily-credit-action { grid-column: 3; grid-row: 2 / 4; }.daily-credit-friend b { grid-column: 3; text-align: center; }
}

@media (max-width: 760px) {
  .daily-credit-nav { min-height: 64px; padding: 0 14px; }.daily-credit-brand img { width: 40px; height: 40px; }.daily-credit-brand strong { font-size: 17px; }.daily-credit-brand > span { display: none; }.daily-credit-user { max-width: 100px; font-size: 12px; }
  .daily-credit-shell { width: min(100% - 22px, 1460px); padding-top: 18px; }.daily-credit-heading { grid-template-columns: 1fr; padding: 0 4px 16px; }.daily-credit-heading h1 { font-size: 42px; }.daily-credit-account { grid-template-columns: auto auto auto 1px auto auto auto; justify-content: start; }.daily-credit-account strong { font-size: 25px; }.daily-credit-account i { margin: 0 5px; }
  .daily-credit-main { display: block; min-height: 0; }.daily-credit-crest { min-height: 178px; border-right: 0; border-bottom: 1px solid var(--daily-line-cool); }.daily-credit-crest img { width: 188px; }.daily-credit-workflow { padding: 22px 16px; }.daily-credit-section-title { gap: 10px; }.daily-credit-section-title h2 { font-size: 17px; }.daily-credit-section-title h2 strong { font-size: 18px; }
  .daily-credit-steps { display: block; margin-top: 16px; }.daily-credit-steps li { grid-template-columns: 78px 1fr 112px; grid-template-rows: auto auto; align-items: center; justify-items: start; gap: 4px 13px; min-height: 116px; padding: 12px 0; text-align: left; }.daily-credit-steps li + li { border-top: 1px solid var(--daily-line-cool); }.daily-credit-steps li + li::before { display: none; }.daily-credit-steps img { grid-row: 1 / 3; width: 78px; height: 78px; }.daily-credit-steps h3 { font-size: 18px; }.daily-credit-steps p { margin-top: 5px; font-size: 11px; line-height: 1.6; }.daily-credit-steps .daily-credit-action { grid-column: 3; grid-row: 1; width: 112px; min-width: 0; }.daily-credit-state { grid-column: 3; grid-row: 2; justify-self: center; align-self: start; }
  .daily-credit-friend { display: grid; grid-template-columns: 82px 1fr 108px; gap: 4px 12px; margin: 0 14px 14px; padding: 14px; text-align: left; }.daily-credit-friend > img { width: 82px; height: 82px; }.daily-credit-friend h2 { font-size: 17px; }.daily-credit-friend > strong { font-size: 29px; }.daily-credit-friend p { display: none; }.daily-credit-friend .daily-credit-action { grid-column: 3; width: 108px; min-width: 0; }.daily-credit-friend b { grid-column: 3; }
  .daily-credit-lower { grid-template-columns: 1fr; }.daily-credit-history { padding: 17px 12px; overflow: hidden; }.daily-credit-history-list { overflow-x: auto; grid-template-columns: repeat(7, minmax(78px, 1fr)); }.daily-credit-day { min-height: 105px; }.daily-credit-reward { min-height: 142px; }.daily-credit-reward > strong { font-size: 41px; }
  .daily-credit-error { grid-template-columns: 1fr auto; }.daily-credit-error span { grid-column: 1 / -1; grid-row: 2; }
  .daily-credit-welcome > div { padding: 24px 20px 28px; }.daily-credit-welcome img { width: 160px; height: 160px; }
}

@media (prefers-reduced-motion: reduce) {
  .daily-credit-nav a, .daily-credit-steps img, .daily-credit-action { transition: none; }
}