:root{
--brand:#111;
--brand2:#111;
--brand3:#111;
--bg:#fbfaf8;
--card:#fff;
--text:#1f2937;
--muted:#6b7280;
--border:#e7e3dc;
--ok:#00a870;
--warn:#ed7b2f;
--err:#d54941;
--accent-red:#e85d45;
--accent-amber:#d99728;
--accent-green:#2f9b72;
--accent-violet:#7a5cff;
--accent-rose:#d85a8f;
--surface:#fffdf9;
--surface-soft:#f7f3ec;
--glow:0 14px 40px rgba(31,41,55,.06)}
*{
box-sizing:border-box}
body{
margin:0;
background:var(--bg);
color:var(--text);
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif}
a{
text-decoration:none;
color:inherit}
.td-app{
min-height:100vh;
display:flex}
.td-sidebar{
position:fixed;
inset:0 auto 0 0;
width:248px;
background:var(--surface);
color:var(--text);
padding:20px 14px;
overflow:auto;
border-right:1px solid var(--border);
box-shadow:8px 0 28px rgba(31,41,55,.04)}
.td-logo{
display:flex;
gap:10px;
align-items:center;
padding:0 10px 22px;
color:var(--text);
font-weight:800;
font-size:18px}
.td-logo-mark{
width:36px;
height:36px;
border-radius:12px;
display:grid;
place-items:center;
color:#fff;
background:#1f2937;
box-shadow:0 8px 18px rgba(31,41,55,.14)}
.td-menu-title{
padding:18px 12px 8px;
color:#999;
font-size:12px;
font-weight:700;
letter-spacing:.08em}
.td-menu a{
display:flex;
align-items:center;
gap:10px;
padding:12px 13px;
border-radius:12px;
font-size:14px;
margin-bottom:6px;
color:#333;
border:1px solid transparent;
transition:background .18s,border-color .18s,color .18s,transform .18s}
.td-menu a:before{
content:"";
width:8px;
height:8px;
border-radius:50%;
background:#111;
flex:0 0 auto}
.td-menu a:nth-child(4n+1):before{
background:var(--accent-red)}
.td-menu a:nth-child(4n+2):before{
background:var(--accent-amber)}
.td-menu a:nth-child(4n+3):before{
background:var(--accent-green)}
.td-menu a:nth-child(4n):before{
background:var(--accent-violet)}
.td-menu a:hover,.td-menu a.active{
background:var(--surface-soft);
color:#111;
border-color:#ece3d6;
box-shadow:none;
transform:translateX(2px)}
.td-main{
flex:1;
margin-left:248px;
min-width:0}
.td-header{
position:sticky;
top:0;
z-index:10;
height:68px;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 30px;
background:rgba(255,253,249,.92);
border-bottom:1px solid var(--border)}
.td-page-title{
margin:0;
font-size:22px;
font-weight:800;
color:#374151}
.td-content{
padding:32px}
.td-grid{
display:grid;
grid-template-columns:repeat(12,minmax(0,1fr));
gap:20px}
.td-col-3{
grid-column:span 3}
.td-col-4{
grid-column:span 4}
.td-col-6{
grid-column:span 6}
.td-col-8{
grid-column:span 8}
.td-col-12{
grid-column:span 12}
.td-card{
background:var(--surface);
border:1px solid var(--border);
border-radius:18px;
box-shadow:var(--glow);
position:relative;
overflow:hidden}
.td-card:hover{
border-color:#ddd5c8;
box-shadow:0 18px 48px rgba(31,41,55,.08)}
.td-card-hd{
padding:18px 22px;
border-bottom:1px solid var(--border);
display:flex;
align-items:center;
justify-content:space-between;
gap:12px}
.td-card-title{
margin:0;
font-size:16px;
font-weight:800;
color:#243244}
.td-card-bd{
padding:22px}
.td-stat-num{
font-size:34px;
font-weight:900;
margin-top:8px;
color:#111}
.td-grid>.td-col-3:nth-of-type(2) .td-stat-num{
color:var(--accent-violet)}
.td-grid>.td-col-3:nth-of-type(3) .td-stat-num{
color:var(--accent-green)}
.td-grid>.td-col-3:nth-of-type(4) .td-stat-num{
color:var(--accent-amber)}
.td-grid>.td-col-3:nth-of-type(5) .td-stat-num{
color:var(--accent-rose)}
.td-muted{
color:var(--muted)}
.td-button{
border:1px solid var(--border);
background:#fffdf9;
color:var(--text);
border-radius:999px;
padding:10px 18px;
cursor:pointer;
display:inline-flex;
align-items:center;
justify-content:center;
gap:6px;
font-size:14px;
transition:transform .18s,box-shadow .18s,border-color .18s,background .18s,color .18s}
.td-button:hover{
border-color:#cfc6b8;
color:#111;
box-shadow:0 8px 18px rgba(31,41,55,.08);
transform:translateY(-1px)}
.td-button-primary{
background:#1f2937;
border-color:#1f2937;
color:#fff;
box-shadow:0 10px 22px rgba(31,41,55,.16)}
.td-button-primary:hover{
color:#fff;
transform:translateY(-1px)}
.td-button[href*="upload"],#signinBtn{
background:var(--accent-green);
border-color:var(--accent-green);
color:#fff}
.td-button[href*="ai-practice"],#askAi{
background:var(--accent-violet);
border-color:var(--accent-violet);
color:#fff}
.td-button[href*="points-mall"],[data-id]{
background:var(--accent-amber);
border-color:var(--accent-amber);
color:#fff}
#searchBtn,#downloadBtn,[data-claim]{
background:var(--accent-rose);
border-color:var(--accent-rose);
color:#fff}
.td-button[href*="upload"]:hover,#signinBtn:hover,.td-button[href*="ai-practice"]:hover,#askAi:hover,.td-button[href*="points-mall"]:hover,[data-id]:hover,#searchBtn:hover,#downloadBtn:hover,[data-claim]:hover{
color:#fff;
filter:brightness(.96)}
.td-button-block{
width:100%}
.td-input,.td-select,.td-textarea{
width:100%;
border:1px solid var(--border);
border-radius:12px;
padding:11px 13px;
outline:none;
background:#fffdf9;
color:var(--text)}
.td-input:focus,.td-select:focus,.td-textarea:focus{
border-color:#1f2937;
box-shadow:0 0 0 3px rgba(31,41,55,.08)}
.td-textarea{
min-height:110px;
resize:vertical}
.td-form-row{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:16px;
margin-bottom:16px}
.td-form-item{
margin-bottom:16px}
.td-form-item label{
display:block;
margin-bottom:8px;
font-weight:700;
font-size:13px}
.td-table{
width:100%;
border-collapse:collapse}
.td-table th,.td-table td{
padding:13px 12px;
border-bottom:1px solid var(--border);
text-align:left;
font-size:14px}
.td-table th{
color:var(--muted);
font-weight:700;
background:var(--surface-soft)}
.td-tag{
display:inline-flex;
padding:4px 9px;
border-radius:999px;
font-size:12px;
background:var(--surface-soft);
color:#374151;
font-weight:700}
.td-tag-success{
background:#e9f7f1;
color:var(--ok)}
.td-tag-warning{
background:#fff5df;
color:var(--warn)}
.td-tag-danger{
background:#fff0ec;
color:var(--err)}
.td-list{
display:grid;
gap:14px}
.td-list-item{
display:flex;
justify-content:space-between;
gap:18px;
padding:16px;
border:1px solid var(--border);
border-radius:16px;
background:#fffdf9;
transition:border-color .18s,transform .18s,box-shadow .18s}
.td-list-item:hover{
border-color:#ddd5c8;
box-shadow:0 10px 24px rgba(31,41,55,.06);
transform:translateY(-1px)}
.td-material-title{
font-size:16px;
font-weight:800;
margin-bottom:8px}
.td-toolbar{
display:flex;
gap:12px;
align-items:center;
flex-wrap:wrap;
margin-bottom:18px}
.td-toolbar .td-input,.td-toolbar .td-select{
max-width:220px}
.td-empty{
padding:46px 20px;
text-align:center;
color:#8f98aa}
.td-alert{
padding:13px 15px;
border-radius:14px;
background:#fff8e7;
color:#6f4e12;
border:1px solid var(--border);
margin-bottom:16px}
.td-goods{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:18px}
.td-goods-img{
width:100%;
height:160px;
object-fit:cover;
border-radius:14px;
background:var(--surface-soft)}
.td-goods-img-placeholder{display:flex!important;align-items:center;justify-content:center;background:var(--surface-soft)!important}
.td-price{
color:var(--accent-amber);
font-size:20px;
font-weight:900}
.td-action-row{
display:flex;
gap:12px;
flex-wrap:wrap}
.td-preview-wrap{
border:1px solid var(--border);
border-radius:16px;
overflow:hidden;
background:#fff;
min-height:520px}
.td-preview-frame{
width:100%;
height:520px;
border:0;
background:#fff}
.td-preview-image-wrap{
display:flex;
align-items:center;
justify-content:center;
padding:18px;
background:#fff}
.td-preview-image{
max-width:100%;
max-height:520px;
border-radius:12px;
display:block}
.td-toast{
position:fixed;
top:76px;
left:50%;
transform:translateX(-50%);
z-index:1000;
padding:12px 18px;
border-radius:12px;
background:#fffdf9;
border:1px solid var(--border);
box-shadow:0 12px 32px rgba(31,35,41,.16)}
.td-toast.success{
border-color:#bcebdc;
color:var(--ok)}
.td-toast.error{
border-color:#f5c7c3;
color:var(--err)}
.td-mobile-toggle{
display:none}
.hero-card{
background:#fff8e7;
color:#1f2937;
border-color:#eadfca}
.hero-card .td-muted{
color:#785f35}
.chart-wrap{
height:280px;
position:relative}
.chart-grid{
position:absolute;
inset:0;
background:linear-gradient(to top,#eee6da 1px,transparent 1px);
background-size:100% 25%}
.bar-chart{
position:absolute;
inset:18px 10px 34px;
display:flex;
align-items:flex-end;
gap:14px}
.bar-group{
flex:1;
display:flex;
align-items:flex-end;
justify-content:center;
gap:5px;
height:100%}
.bar{
width:12px;
border-radius:8px 8px 0 0;
min-height:4px}
.bar.upload{
background:#1f2937}
.bar.download{
background:var(--accent-amber)}
.bar-upload{
background:#1f2937;width:10px}
.bar-download{
background:var(--accent-amber);width:10px}
.bar-material-dl{
background:var(--accent-violet);width:10px}
.td-tag-upload{
background:#e9e9e9;color:#1f2937}
.td-tag-download{
background:rgba(217,151,40,.16);color:var(--accent-amber)}
.td-tag-material-dl{
background:rgba(122,92,255,.16);color:var(--accent-violet)}
.chart-labels{
position:absolute;
left:10px;
right:10px;
bottom:0;
display:flex;
justify-content:space-around;
color:#8a8174;
font-size:12px}
@media(max-width:900px){
.td-sidebar{
transform:translateX(-100%);
transition:.2s;
z-index:20}
.td-sidebar.open{
transform:translateX(0)}
.td-main{
margin-left:0}
.td-header{
padding:0 16px}
.td-content{
padding:16px}
.td-mobile-toggle{
display:inline-flex}
.td-col-3,.td-col-4,.td-col-6,.td-col-8{
grid-column:span 12}
.td-form-row{
grid-template-columns:1fr}
.td-goods{
grid-template-columns:repeat(2,minmax(0,1fr))}
.td-table-wrap{
overflow-x:auto}
}
@media(max-width:520px){
.td-goods{
grid-template-columns:1fr}
.td-list-item{
flex-direction:column}
.bar-chart{
gap:8px}
.bar{
 width:9px}
}
/* AI 答题 */
.td-timer-bar{
font-size:1.1rem;
font-weight:700;
text-align:center;
background:#fff8e7!important;
color:#785f35!important}
.td-options{
margin:12px 0 8px;
display:flex;
flex-direction:column;
gap:8px}
.td-option{
display:flex;
align-items:center;
gap:10px;
padding:10px 14px;
border:1px solid var(--border);
border-radius:12px;
cursor:pointer;
transition:background .15s,border-color .15s;
background:#fffdf9}
.td-option:hover{
background:#f7f3ec;
border-color:#ccc5b8}
.td-option input[type="radio"]{
width:18px;
height:18px;
accent-color:#1f2937;
margin:0;
flex:0 0 auto}
.td-option-label{
font-size:.92rem;
color:var(--text);
font-weight:500}

/* 上传区域美化 */
.td-upload-wrap{
position:relative;
border:2px dashed var(--border);
border-radius:16px;
transition:border-color .2s,background .2s,box-shadow .2s;
overflow:hidden;
cursor:pointer}
.td-upload-wrap:hover{
border-color:#b8b0a3;
background:#faf8f4}
.td-upload-wrap.dragover{
border-color:var(--accent-violet);
background:#f5f0ff;
box-shadow:0 0 0 4px rgba(122,92,255,.1)}
.td-upload-wrap.has-file{
border-style:solid;
border-color:#bcebdc;
background:#f6fdf9}
.td-upload-input{
position:absolute;
inset:0;
opacity:0;
cursor:pointer;
z-index:2}
.td-upload-box{
padding:36px 20px;
text-align:center;
pointer-events:none}
.td-upload-icon{
font-size:40px;
margin-bottom:10px;
opacity:.85}
.td-upload-text{
font-size:15px;
font-weight:600;
color:var(--text);
margin-bottom:6px}
.td-upload-hint{
font-size:12px;
color:var(--muted)}
.td-submit-btn{
width:100%;
padding:14px 24px;
font-size:16px;
font-weight:700;
border-radius:14px;
margin-top:8px}

.td-question-item{
border-left:4px solid var(--index-green, #2f9b72)}
.td-question-item[data-qidx]{
border-left-color:var(--accent, var(--index-violet, #7a5cff))}

/* 弹窗 */
.td-modal{
position:fixed;
inset:0;
background:rgba(0,0,0,.45);
z-index:1000;
display:flex;
align-items:center;
justify-content:center;
padding:20px}
.td-modal-content{
background:var(--card);
border-radius:16px;
width:100%;
max-height:90vh;
overflow:auto;
box-shadow:0 24px 60px rgba(0,0,0,.18)}
.td-modal-hd{
display:flex;
justify-content:space-between;
align-items:center;
padding:16px 20px;
border-bottom:1px solid var(--border)}
.td-modal-hd h3{
margin:0;
font-size:1.1rem}
.td-modal-close{
background:none;
border:none;
font-size:1.6rem;
cursor:pointer;
color:var(--muted);
line-height:1}
.td-modal-close:hover{
color:var(--text)}
.td-modal-bd{
padding:20px}
.td-loading{
display:flex;
align-items:center;
justify-content:center;
gap:10px;
padding:40px 20px;
color:var(--muted);
font-size:1rem}
.td-loading::before{
content:"";
width:20px;
height:20px;
border:2px solid var(--border);
border-top-color:var(--text);
border-radius:50%;
animation:td-spin 1s linear infinite}
@keyframes td-spin{
to{transform:rotate(360deg)}}
.td-alert-error{
background:#fff2f0;
border:1px solid #ffccc7;
color:#d54941;
padding:12px 16px;
border-radius:12px}
.td-button-sm{
padding:6px 12px;
font-size:.85rem;
border-radius:8px}
@keyframes spin{to{transform:rotate(360deg)}}
/* 充值页 */
.td-recharge-summary-card{background:linear-gradient(180deg,#1f2937,#2f3c4d);color:#fff}
.td-recharge-summary-card .td-card-bd{padding:28px}
.td-recharge-summary-label{font-size:.9rem;opacity:.72;margin-bottom:6px}
.td-recharge-summary-points{font-size:2.4rem;font-weight:900;line-height:1.1;margin-bottom:14px}
.td-recharge-summary-meta{font-size:.9rem;opacity:.82;margin-bottom:6px}
.td-recharge-summary-bonus{margin-top:16px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.12);font-size:.88rem;font-weight:700}
.td-recharge-presets{display:flex;gap:10px;flex-wrap:wrap}
.td-recharge-chip{border:1px solid var(--border);background:#fffdf9;color:var(--text);padding:10px 18px;border-radius:999px;font-size:.92rem;font-weight:700;cursor:pointer;transition:all .18s}
.td-recharge-chip:hover{border-color:#1f2937;background:#f7f3ec}
.td-recharge-chip.active{background:#1f2937;border-color:#1f2937;color:#fff}
.td-recharge-methods{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:16px}
.td-recharge-method-single{margin-bottom:16px}
.td-recharge-method{border:1px solid var(--border);background:#fffdf9;color:var(--text);padding:12px 16px;border-radius:14px;font-size:.92rem;font-weight:700;cursor:pointer;transition:all .18s;text-align:center}
.td-recharge-method:hover{border-color:#1f2937;background:#f7f3ec}
.td-recharge-method.active{background:#1f2937;border-color:#1f2937;color:#fff}
.td-recharge-preview{margin:12px 0 18px;padding:14px 16px;border-radius:12px;background:var(--surface-soft);font-size:.9rem;color:var(--muted)}
.td-recharge-cta{padding:14px!important;font-size:1rem!important}
.td-recharge-order-card{margin-top:4px}
.td-recharge-order-title{font-size:1.05rem;font-weight:800;margin-bottom:12px}
.td-recharge-order-meta{font-size:.9rem;color:var(--muted);margin-bottom:6px}
.td-recharge-qr{background:#fff;border:1px solid var(--border);border-radius:16px;padding:20px;display:inline-block;margin:16px 0 12px}
.td-recharge-status{margin-top:8px}