/* ====== 90 二手教材 · 旧书青灰 + 芥末黄价签 ====== */
.utd{
  --bg:#f4f2e9; --bg2:#eae7d9; --card:#fff; --card2:#f9f7ee;
  --ink:#181a16; --sub:#43483d; --faint:#848a76; --line:#dddccc; --line2:#eceada;
  --teal:#4a6b78; --teal-d:#2f4b56; --teal-soft:#e0e8ec;
  --mustard:#c9a227; --mustard-d:#9a7a14; --rust:#a8492f;
  --shadow-sm:0 1px 2px rgba(24,26,22,.05),0 7px 18px rgba(24,26,22,.05);
  --shadow:0 2px 6px rgba(24,26,22,.07),0 22px 48px rgba(24,26,22,.10);
  --r:20px; --r-sm:13px;
  background:
    radial-gradient(700px 320px at 100% -6%, rgba(201,162,39,.16), transparent 62%),
    radial-gradient(520px 260px at -6% 22%, rgba(74,107,120,.09), transparent 66%),
    var(--bg);
}
:root[data-theme="dark"] .utd{
  --bg:#111310; --bg2:#181b17; --card:#1f231e; --card2:#262a24;
  --ink:#eeeee6; --sub:#b3b7a8; --faint:#7d8271; --line:#2f342b; --line2:#252a22;
  --teal:#93b4c0; --teal-d:#b4cfda; --teal-soft:rgba(147,180,192,.13);
  --mustard:#e0bc4e; --mustard-d:#eccf76;
}
.utd .tsk-h1 b{color:var(--mustard-d);}

.utd-hero{display:grid;grid-template-columns:minmax(0,1fr) 372px;gap:32px;padding:30px 0 24px;align-items:start;}

/* ---- 价签 ---- */
.utd-tag{
  position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:20px 22px 22px;box-shadow:var(--shadow);overflow:hidden;
}
.utd-tag::before{
  content:"";position:absolute;inset:0 0 auto 0;height:5px;border-radius:var(--r) var(--r) 0 0;
  background:linear-gradient(90deg,var(--teal),var(--mustard));
}
.utd-tag-top{display:flex;justify-content:space-between;align-items:center;padding:4px 0 8px;}
.utd-tag-top span{font-size:12px;font-weight:800;letter-spacing:.26em;color:var(--teal-d);}
.utd-tag-top em{
  font-style:normal;font:800 9px/1 var(--num,"Bahnschrift",monospace);letter-spacing:.18em;
  color:#3a2f05;background:var(--mustard);padding:4px 8px;border-radius:4px;
}
.utd-price{display:flex;align-items:baseline;gap:6px;padding:8px 0 10px;border-bottom:1px dashed var(--line);margin-bottom:10px;}
.utd-price small{font-size:11px;font-weight:800;color:var(--faint);}
.utd-price span{font:800 30px/1 var(--num,"Bahnschrift",monospace);color:var(--mustard-d);font-variant-numeric:tabular-nums;}

.utd-tag label{display:block;font-size:11.5px;font-weight:700;color:var(--faint);margin-top:9px;}
.utd-tag select,.utd-tag input{
  width:100%;height:36px;margin-top:4px;padding:0 10px;border:1.5px solid var(--line);border-radius:8px;
  background:var(--card2);color:var(--ink);font:700 13.5px/34px var(--num,"Bahnschrift",monospace);outline:none;
}
.utd-tag select{font-family:inherit;font-weight:700;}
.utd-tag input:focus,.utd-tag select:focus{border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-soft);}
.utd-grid2{display:grid;grid-template-columns:1fr 1fr;gap:2px 12px;}
.utd-tag .tsk-btn-main{background:linear-gradient(180deg,#5d8491,var(--teal-d));border:0;box-shadow:0 10px 22px rgba(74,107,120,.26);}
.utd-tag-foot{margin-top:10px;font-size:10.5px;color:var(--faint);text-align:center;}

/* ---- 结果 ---- */
.utd-result{margin-top:6px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:22px 24px;}
.utd-res-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:11px;}
.utd-res-card{background:var(--card2);border:1px solid var(--line2);border-radius:var(--r-sm);padding:15px 17px;}
.utd-res-card b{display:block;font:800 24px/1.15 var(--num,"Bahnschrift",monospace);color:var(--ink);font-variant-numeric:tabular-nums;}
.utd-res-card span{display:block;font-size:11.5px;color:var(--faint);font-weight:700;margin-top:5px;}
.utd-res-card i{display:block;font-style:normal;font-size:10.5px;color:var(--sub);margin-top:4px;line-height:1.5;}
.utd-res-card.utd-main{background:rgba(201,162,39,.15);border-color:rgba(201,162,39,.4);}
.utd-res-card.utd-main b{color:var(--mustard-d);}

.utd-cmp{margin-top:16px;display:grid;gap:8px;}
.utd-cmp-row{display:grid;grid-template-columns:72px 1fr 66px;gap:10px;align-items:center;}
.utd-cmp-row span{font-size:11px;font-weight:800;color:var(--faint);}
.utd-cmp-row b{text-align:right;font:800 12px/1.4 var(--num,"Bahnschrift",monospace);color:var(--sub);}
.utd-cmp-bar{height:13px;border-radius:99px;background:var(--line2);overflow:hidden;}
.utd-cmp-bar i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--teal),#7fa3af);transition:width .45s ease;}
.utd-cmp-bar.utd-low i{background:linear-gradient(90deg,#c0b8a0,#9d9377);}

.utd-alert{margin-top:14px;padding:12px 15px;border-radius:10px;background:var(--teal-soft);border:1px solid rgba(74,107,120,.26);font-size:12.5px;line-height:1.8;color:var(--sub);}
.utd-alert b{color:var(--teal-d);}
.utd-alert.is-warn{background:rgba(168,73,47,.09);border-color:rgba(168,73,47,.3);}
.utd-alert.is-warn b{color:var(--rust);}

/* ---- 表格 ---- */
.utd-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.utd-table{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;box-shadow:var(--shadow-sm);min-width:640px;}
.utd-table th,.utd-table td{padding:12px 15px;text-align:left;font-size:12.5px;line-height:1.7;border-bottom:1px solid var(--line2);vertical-align:top;}
.utd-table tr:last-child td{border-bottom:0;}
.utd-table thead th{background:var(--card2);font-weight:800;color:var(--teal-d);font-size:12px;}
.utd-table tbody tr:nth-child(even){background:var(--card2);}
.utd-strong{font-weight:800;color:var(--ink);white-space:nowrap;}
.utd-num{font:800 12.5px/1.5 var(--num,"Bahnschrift",monospace);color:var(--mustard-d);white-space:nowrap;}
.utd-lv{font-weight:800;color:var(--teal-d);white-space:nowrap;}

/* ---- 避坑 ---- */
.utd-tips{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:10px;}
.utd-tip{position:relative;background:var(--card);border:1px solid var(--line);border-left:4px solid var(--mustard);border-radius:var(--r-sm);padding:14px 17px;box-shadow:var(--shadow-sm);}
.utd-tip b{font-size:12.5px;font-weight:800;color:var(--ink);}
.utd-tip p{margin:5px 0 0;font-size:12px;line-height:1.75;color:var(--sub);}

@media (max-width:900px){
  .utd-hero{grid-template-columns:1fr;gap:22px;}
}
@media (max-width:520px){
  .utd-grid2{grid-template-columns:1fr;}
  .utd-cmp-row{grid-template-columns:60px 1fr 58px;}
}