.vault-page { display: flex; min-height: 100vh; flex-direction: column; }
.submission-cover{display:block;width:100%;max-height:220px;object-fit:contain;margin:0 0 12px;background:var(--tad-gray,#e6e3e7)}
#detail-body img,.review-preview img{max-width:100%;height:auto}
.preview-notice{font-size:14px;padding:10px 12px;border-left:3px solid var(--tad-blue,#2850a3);background:var(--tad-gray,#e6e3e7)}
#account-actions .tad-button{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-height:34px;line-height:1.2}
.vault-main { padding-bottom: 80px; }
.vault-masthead { display: grid; padding: 42px 0 30px; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 28px; border-bottom: 2px solid var(--tad-ink); }
.vault-masthead h1 { margin: 9px 0; font: clamp(38px, 4.6vw, 60px)/1.08 CangErYuMo, sans-serif; }
.vault-masthead h1 em { color: var(--tad-red); font-style: normal; }
.vault-masthead p { max-width: 760px; margin: 0; color: var(--tad-muted); }
.vault-index-mark { display: flex; height: 120px; align-items: end; gap: 5px; border-bottom: 5px solid var(--tad-red); }
.vault-index-mark span { display: grid; width: 58px; place-items: center; color: #fff; background: var(--tad-blue); font: 32px CangErYuMo, sans-serif; }
.vault-index-mark span:nth-child(1) { height: 72px; }
.vault-index-mark span:nth-child(2) { height: 92px; color: var(--tad-ink); background: var(--tad-yellow); }
.vault-index-mark span:nth-child(3) { height: 112px; background: var(--tad-red); }
.vault-toolbar { display: flex; padding: 18px 0; align-items: center; justify-content: space-between; gap: 16px; }
.vault-toolbar h2 { margin: 0; font: 31px CangErYuMo, sans-serif; }
.vault-toolbar-actions { display: flex; gap: 8px; }
.ranking-preview { display: grid; padding: 20px 0 6px; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
.ranking-preview-card { min-width: 0; padding: 14px; border: 1px solid var(--tad-line); color: var(--tad-ink); background: #fff; text-decoration: none; transition: transform 160ms ease,border-color 160ms ease; }
.ranking-preview-card:hover { border-color: var(--tad-red); transform: translateY(-2px); }
.ranking-preview-card h3 { margin: 0 0 8px; color: var(--tad-red); font: 18px CangErYuMo,sans-serif; }
.ranking-preview-card ol { display: grid; margin: 0; padding: 0; gap: 4px; list-style: none; }
.ranking-preview-card li { display: flex; justify-content: space-between; gap: 8px; color: var(--tad-muted); font-size: 12px; }
.filter-toggle { display: none; }
.vault-results,.vault-detail-layout>*,.account-layout>* { min-width: 0; }
.archive-layout { display: grid; grid-template-columns: 270px minmax(0,1fr); gap: 32px; }
.vault-filters { align-self: start; padding: 20px; border: 1px solid var(--tad-line); background: #fff; }
.vault-filters header { display: flex; align-items: center; justify-content: space-between; }
.vault-filters fieldset { margin: 18px 0 0; padding: 14px 0 0; border: 0; border-top: 1px solid var(--tad-gray); }
.vault-filters legend { font-weight: 700; }
.vault-filters details { margin: 18px 0; padding-top: 13px; border-top: 1px solid var(--tad-gray); }
.vault-filters summary { cursor: pointer; }
.filter-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.filter-chips button { min-height: 32px; padding: 4px 10px; border: 1px solid var(--tad-line); background: #fff; }
.filter-chips button.active { border-color: var(--tad-red); color: #fff; background: var(--tad-red); }
.filter-checks { display: grid; margin: 8px 0; gap: 6px; }
.filter-checks label { display: flex; align-items: center; gap: 7px; }
.warning-master { margin: 10px 0 6px; color: var(--tad-ink); font-weight: 700; }
.filter-help { margin: 0 0 9px; color: var(--tad-muted); font-size: 11px; line-height: 1.5; }
.vault-results { min-width: 0; transition: opacity 140ms ease; }
.vault-results.loading { opacity: .58; }
.active-filter-list { display: flex; min-height: 32px; flex-wrap: wrap; gap: 6px; }
.active-filter-list button { padding: 3px 8px; border: 1px solid var(--tad-line); color: var(--tad-red); background: #fff; font-size: 12px; }
.result-pagination { display: flex; margin-top: 24px; align-items: center; justify-content: center; gap: 12px; }
.result-pagination span { color: var(--tad-muted); font-size: 12px; }
.vault-results-status { min-height: 24px; color: var(--tad-muted); }
.submission-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.submission-card { display: grid; min-height: 226px; grid-template-columns: 56px 1fr; border: 1px solid var(--tad-line); background: #fff; text-decoration: none; overflow: hidden; }
.submission-card:hover { border-color: var(--tad-blue); box-shadow: 0 10px 30px rgb(44 23 70 / 10%); }
.submission-code { display: grid; place-items: center; color: #fff; background: var(--tad-blue); font: 19px CangErYuMo, sans-serif; writing-mode: vertical-rl; }
.submission-card[data-category="module"] .submission-code, .submission-card[data-category="function"] .submission-code { background: var(--tad-red); }
.submission-card[data-category="reality"] .submission-code { color: var(--tad-ink); background: var(--tad-yellow); }
.submission-body { padding: 18px; }
.submission-body small { color: var(--tad-muted); }
.submission-body h3 { margin: 8px 0; font: 25px/1.25 CangErYuMo, sans-serif; }
.submission-body p { color: var(--tad-muted); }
.submission-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.submission-tags span { padding: 2px 6px; color: var(--tad-blue); background: #eef2fb; font-size: 11px; }
.submission-stats { margin-top: 16px; color: var(--tad-muted); font-size: 12px; }

.vault-content-header { padding: 44px 0 24px; border-bottom: 2px solid var(--tad-ink); }
.vault-content-header h1 { margin: 9px 0; font: 46px/1.15 CangErYuMo, sans-serif; }
.vault-detail-layout { display: grid; padding: 30px 0; grid-template-columns: minmax(0,1fr) 250px; gap: 34px; }
.vault-detail-actions { display: flex; margin-top: 24px; padding-top: 16px; flex-wrap: wrap; gap: 8px; border-top: 1px solid var(--tad-line); }
.vault-detail-body { line-height: 1.9; }
.vault-detail-body h1,.vault-detail-body h2,.vault-detail-body h3 { font-family: CangErYuMo, sans-serif; }
.vault-detail-body iframe { width: 100%; height: 620px; border: 1px solid var(--tad-line); }
.vault-meta { margin: 0; padding: 20px; background: #f1edf3; }
.vault-meta dt { color: var(--tad-muted); font-size: 11px; }
.vault-meta dd { margin: 0 0 14px; }
.comment-section { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--tad-line); }
.comment-section-header { display: flex; align-items: end; justify-content: space-between; gap: 16px; }
.comment-section-header h2 { margin: 0 0 12px; }
.compact-field { min-width: 128px; }
.comment-list { display: grid; gap: 8px; }
.comment { padding: 13px 15px; border-left: 4px solid var(--tad-blue); background: #fff; }
.comment.reply { margin-left: 28px; }
.comment-author { display: flex; align-items: center; gap: 10px; }
.comment-author > span:last-child { display: grid; gap: 1px; }
.comment-author a,.comment-author strong { color: var(--tad-ink); font-weight: 700; text-decoration: none; }
.comment-author a:hover { color: var(--tad-red); text-decoration: underline; }
.comment-avatar { position: relative; display: grid; width: 36px; height: 36px; flex: 0 0 36px; place-items: center; border: 1px solid var(--tad-blue); border-radius: 50%; color: #fff; background: var(--tad-ink); font: 16px CangErYuMo,sans-serif; overflow: hidden; }
.comment-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.comment small { color: var(--tad-muted); font-size: 11px; }
.comment > p { margin: 10px 0 0 46px; white-space: pre-wrap; }
.comment.deleted > p { color: var(--tad-muted); font-style: italic; }
.comment-actions { display: flex; margin: 8px 0 0 46px; gap: 7px; }
.comment-actions .tad-button { min-height: 30px; padding: 3px 9px; font-size: 12px; }
.comment-actions .tad-button.active { border-color: var(--tad-red); color: #fff; background: var(--tad-red); }
.comment-form { display: grid; margin-top: 14px; grid-template-columns: 1fr auto; align-items: end; gap: 8px; }
.comment-reply-context { grid-column: 1 / -1; display: flex; min-height: 38px; padding: 6px 9px; align-items: center; justify-content: space-between; border-left: 3px solid var(--tad-blue); background: #eef2fb; color: var(--tad-muted); font-size: 13px; }
.reward-action { position: relative; display: inline-flex; align-items: center; gap: 7px; border-color: color-mix(in srgb,var(--tad-red) 55%,#fff); color: var(--tad-red); overflow: visible; }
.reward-action img { width: 23px; height: 23px; object-fit: contain; transition: transform 220ms ease; }
.reward-action.active { color: #fff; background: var(--tad-red); }
.reward-action.active img { filter: brightness(0) invert(1); }
.reward-action.is-bursting img { animation: tad-reward-burst 420ms ease-out; }
.reward-action.is-bursting::after { position: absolute; inset: -7px; border: 2px solid var(--tad-red); border-radius: 50%; content: ''; pointer-events: none; animation: tad-reward-ring 420ms ease-out both; }
@keyframes tad-reward-burst { 0% { transform: scale(.78) rotate(-8deg); } 55% { transform: scale(1.28) rotate(5deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes tad-reward-ring { from { opacity: .8; transform: scale(.72); } to { opacity: 0; transform: scale(1.24); } }
@media (prefers-reduced-motion: reduce) { .reward-action img { transition: none; } .reward-action.is-bursting img,.reward-action.is-bursting::after { animation: none; } }

.vault-form-shell { padding: 36px 0 70px; }
.stepper { display: grid; margin: 24px 0 30px; grid-template-columns: repeat(3,1fr); }
.stepper button { min-height: 52px; border: 0; border-bottom: 3px solid var(--tad-line); color: var(--tad-muted); background: transparent; text-align: left; }
.stepper button.active { border-color: var(--tad-red); color: var(--tad-ink); }
.stepper button span { display: block; color: var(--tad-red); font: 10px Consolas,monospace; }
.submission-form { padding: 28px; border: 1px solid var(--tad-line); background: #fff; }
.submission-step { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.submission-step .full { grid-column: 1/-1; }
.form-navigation { display: flex; margin-top: 26px; justify-content: space-between; gap: 8px; }
.markdown-preview { min-height: 180px; max-height: 420px; padding: 18px; border: 1px solid var(--tad-line); background: var(--tad-surface); overflow: auto; }
.review-summary { display: grid; grid-template-columns: 180px 1fr; border-top: 1px solid var(--tad-line); }
.review-summary dt,.review-summary dd { margin: 0; padding: 10px; border-bottom: 1px solid var(--tad-line); }
.review-summary dt { color: var(--tad-muted); }
.tag-picker { position: relative; display: grid; gap: 8px; }
.tag-picker-selected { display: flex; min-height: 32px; flex-wrap: wrap; gap: 6px; }
.tag-token { display: inline-flex; min-height: 29px; padding: 3px 8px; align-items: center; gap: 7px; border: 1px solid var(--tad-blue); color: var(--tad-blue); background: #eef2fb; }
.tag-token button { padding: 0; border: 0; color: inherit; background: transparent; }
.tag-token.pending { border-style: dashed; color: var(--tad-warning); background: #fff8e7; }
.tag-suggestions { position: absolute; top: 100%; right: 0; left: 0; z-index: 20; display: grid; max-height: 240px; border: 1px solid var(--tad-line); background: #fff; box-shadow: var(--tad-shadow); overflow: auto; }
.tag-suggestions button { padding: 9px 11px; border: 0; border-bottom: 1px solid var(--tad-gray); color: var(--tad-ink); background: #fff; text-align: left; }
.tag-suggestions button:hover,.tag-suggestions button.active { color: #fff; background: var(--tad-red); }
.tag-picker-help { margin: 0; color: var(--tad-muted); font-size: 11px; }
.upload-state { color: var(--tad-muted); font-size: 12px; }

.account-layout { display: grid; padding: 30px 0; grid-template-columns: 240px minmax(0,1fr); gap: 30px; }
.account-summary { align-self: start; padding: 20px; border-left: 5px solid var(--tad-red); background: #fff; }
.account-summary h2 { margin: 0; font: 27px CangErYuMo,sans-serif; }
.account-list { display: grid; gap: 10px; }
.account-item { padding: 18px; border: 1px solid var(--tad-line); background: #fff; }
.account-item header { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.account-item h3 { margin: 0; font: 23px CangErYuMo,sans-serif; }
.account-item small { color: var(--tad-muted); }
.account-item-actions { display: flex; margin-top: 14px; flex-wrap: wrap; gap: 7px; }
.account-workspace { min-width: 0; }
.account-tabs { display: flex; margin-bottom: 22px; gap: 4px; border-bottom: 1px solid var(--tad-line); overflow-x: auto; }
.account-tabs button { min-height: 42px; padding: 8px 14px; border: 0; border-bottom: 3px solid transparent; color: var(--tad-muted); background: transparent; white-space: nowrap; }
.account-tabs button.active { border-color: var(--tad-red); color: var(--tad-ink); }
.account-avatar { display: grid; width: 76px; height: 76px; margin-bottom: 14px; place-items: center; border: 1px solid var(--tad-red); border-radius: 50%; color: #fff; background: var(--tad-ink); font: 32px CangErYuMo,sans-serif; overflow: hidden; }
.account-avatar.large { width: 112px; height: 112px; margin: 0; font-size: 44px; }
.account-avatar img { width: 100%; height: 100%; object-fit: cover; }
.account-form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.account-form { align-self: start; padding: 20px; border: 1px solid var(--tad-line); background: #fff; }
.account-form h3 { margin-top: 0; font: 23px CangErYuMo,sans-serif; }
.account-form .tad-field + .tad-field { margin-top: 14px; }
.tad-help { color: var(--tad-muted); font-size: 12px; }
.avatar-editor { display: grid; grid-template-columns: minmax(0,512px) minmax(190px,1fr); gap: 22px; }
.avatar-editor canvas { width: 100%; border: 1px solid var(--tad-line); background: var(--tad-gray); }
.avatar-controls { display: grid; align-content: start; gap: 14px; }
.public-profile-header { display: grid; padding: 48px 0 32px; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 25px; border-bottom: 2px solid var(--tad-ink); }
.public-profile-header h1 { margin: 6px 0; font: clamp(38px,5vw,58px)/1.1 CangErYuMo,sans-serif; }
.public-profile-header p { max-width: 720px; white-space: pre-wrap; }
.public-profile-header small { color: var(--tad-muted); }

.metrics-grid { display: grid; padding: 28px 0; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.metric-card { min-width: 0; padding: 22px; border: 1px solid var(--tad-line); background: #fff; }
.metric-card header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.metric-card h2 { margin: 0; font: 25px CangErYuMo,sans-serif; }
.metric-card header a { color: var(--tad-red); font-size: 12px; }
.metric-chart { display: grid; margin-top: 18px; grid-template-columns: minmax(0,140px) 1fr; align-items: center; gap: 18px; }
.metric-chart.number { display: block; }
.metric-chart.number > strong { color: var(--tad-red); font: 58px CangErYuMo,sans-serif; }
.metric-chart svg { width: 130px; height: 130px; transform: rotate(-90deg); }
.metric-list { display: grid; margin: 0; padding: 0; gap: 7px; list-style: none; }
.metric-list li { position: relative; display: flex; min-height: 30px; padding: 5px 8px; align-items: center; justify-content: space-between; gap: 12px; border-left: 3px solid var(--metric-color); background: linear-gradient(90deg,color-mix(in srgb,var(--metric-color) 14%,#fff) var(--metric-size),transparent var(--metric-size)); }
.activity-hero { position: relative; padding: 54px 0 34px; border-bottom: 4px solid var(--tad-red); }
.activity-hero::after { position: absolute; right: 0; bottom: -4px; width: 170px; height: 4px; background: var(--tad-blue); content: ""; }
.activity-hero h1 { margin: 8px 0 20px; color: var(--tad-ink); font: clamp(48px,7vw,82px)/1 CangErYuMo,sans-serif; }
.activity-hero h2 { margin: 0; color: var(--tad-red); font: 28px CangErYuMo,sans-serif; }
.activity-hero p { max-width: 760px; color: var(--tad-muted); }
.activity-hero time { font: 12px Consolas,monospace; }
.activity-rules { display: grid; padding: 24px 0; grid-template-columns: 180px 1fr; border-bottom: 1px solid var(--tad-line); }
.activity-rules h2 { margin: 0; font: 26px CangErYuMo,sans-serif; }
.activity-rules div { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.activity-rules p { margin: 0; color: var(--tad-muted); }
.activity-ranking { display: grid; padding: 20px 0 50px; gap: 10px; }
.activity-rank { display: grid; padding: 18px 20px; grid-template-columns: 70px minmax(0,1fr); border: 1px solid var(--tad-line); background: #fff; }
.activity-rank > strong { color: var(--tad-red); font: 38px CangErYuMo,sans-serif; }
.activity-rank h2 { display: inline; margin: 0 18px 0 0; font: 25px CangErYuMo,sans-serif; }
.activity-rank b { color: var(--tad-blue); }
.activity-rank p { color: var(--tad-muted); }
.activity-rank summary { cursor: pointer; color: var(--tad-red); }
.thanks-list { display: grid; padding: 32px 0 70px; gap: 16px; }
.thanks-section { padding: 24px 28px; border-left: 6px solid var(--tad-red); background: #fff; }
.thanks-section h2 { margin: 0 0 13px; color: var(--tad-red); font: 700 31px CangErYuMo,sans-serif; }
.thanks-section p { margin: 0; font-size: 17px; line-height: 2; }

@media (max-width: 900px) { .archive-layout { grid-template-columns: 1fr; } .ranking-preview { grid-template-columns: repeat(2,minmax(0,1fr)); } .filter-toggle { display: inline-flex; } .vault-filters { display: none; } .vault-filters.open { display: block; } .vault-detail-layout,.account-layout { grid-template-columns: 1fr; } .account-form-grid { grid-template-columns: 1fr; } .activity-rules { grid-template-columns: 1fr; gap: 15px; } }
@media (max-width: 650px) { .vault-masthead { grid-template-columns: 1fr; } .vault-index-mark { display: none; } .submission-grid,.metrics-grid,.ranking-preview { grid-template-columns: 1fr; } .vault-toolbar { align-items: flex-start; flex-direction: column; } .submission-step { grid-template-columns: 1fr; } .submission-step > * { grid-column: 1 !important; } .stepper button { font-size: 12px; } .comment-form { grid-template-columns: 1fr; } .avatar-editor,.public-profile-header { grid-template-columns: 1fr; } .activity-rules div { grid-template-columns: 1fr; } .metric-chart { grid-template-columns: 100px 1fr; } .metric-chart svg { width: 96px; height: 96px; } }