/* ====== 78 校服尺码 · 亚麻米白 + 藏蓝 + 红线 ====== */
.sus{
  --bg:#f6f2ea; --bg2:#ece6d9; --card:#fffdf9; --card2:#faf6ee;
  --ink:#1b2230; --sub:#4a4a55; --faint:#8b8578; --line:#e0d9c9; --line2:#efe9dc;
  --navy:#2c3e63; --navy-d:#1c2a46; --navy-soft:#e4e9f2;
  --red:#b8574c; --red-soft:#f7e7e3;
  --shadow-sm:0 1px 2px rgba(27,34,48,.05),0 8px 20px rgba(27,34,48,.05);
  --shadow:0 3px 10px rgba(27,34,48,.07),0 24px 50px rgba(27,34,48,.10);
  --r:20px; --r-sm:13px;
  background:
    repeating-linear-gradient(0deg,rgba(44,62,99,.028) 0 1px,transparent 1px 22px),
    radial-gradient(740px 340px at 100% -12%, rgba(44,62,99,.08), transparent 60%),
    var(--bg);
}
:root[data-theme="dark"] .sus{
  --bg:#0f1216; --bg2:#151a20; --card:#1a1f26; --card2:#20262e;
  --ink:#e9eef4; --sub:#a8b1bd; --faint:#74808d; --line:#2c343e; --line2:#232a32;
  --navy:#8ba7cf; --navy-d:#b3cbe8; --navy-soft:rgba(139,167,207,.13);
  --red:#d98a7f; --red-soft:rgba(217,138,127,.12);
}

.sus-hero{display:grid;grid-template-columns:minmax(0,1fr) 356px;gap:30px;padding:30px 0 24px;align-items:start;}
.sus-hero-l .tsk-h1 b{color:var(--navy-d);}

/* 吊牌 */
.sus-tag{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:22px 22px 20px;text-align:left;}
.sus-tag-hole{position:absolute;top:14px;left:50%;transform:translateX(-50%);width:16px;height:16px;border-radius:50%;background:var(--bg);border:1.5px solid var(--line);box-shadow:0 1px 2px rgba(0,0,0,.06) inset;}
.sus-tag-hole::after{content:"";position:absolute;top:-9px;left:50%;transform:translateX(-50%);width:1.5px;height:9px;background:var(--line);}
.sus-tag-brand{margin:16px 0 8px;padding-bottom:9px;border-bottom:2px dashed var(--navy);font:800 10px/1 var(--num,"Bahnschrift",monospace);letter-spacing:.18em;color:var(--navy-d);text-align:center;}
.sus-tag label{display:block;font-size:11.5px;font-weight:700;color:var(--faint);margin-top:10px;}
.sus-tag input,.sus-tag select{width:100%;height:38px;margin-top:4px;padding:0 10px;border:1.5px solid var(--line);border-radius:9px;background:var(--card2);color:var(--ink);font:700 14px/38px var(--num,"Bahnschrift",monospace);outline:none;}
.sus-tag select{font-family:inherit;}
.sus-tag input:focus,.sus-tag select:focus{border-color:var(--navy);box-shadow:0 0 0 3px var(--navy-soft);}
.sus-tag .tsk-btn-main{background:var(--navy);border-color:var(--navy);}
.sus-tag .tsk-btn-main:hover{background:var(--navy-d);}
.sus-tag-foot{margin-top:12px;padding-top:9px;border-top:1px dashed var(--line);font-size:10.5px;line-height:1.6;color:var(--faint);}

/* 结果 */
.sus-result{margin:6px 0 26px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:22px 24px;}
.sus-main{display:grid;grid-template-columns:168px 1fr;gap:20px;align-items:center;}
.sus-size{position:relative;background:linear-gradient(160deg,var(--navy),var(--navy-d));color:#fff;border-radius:16px;padding:20px 18px;text-align:center;box-shadow:0 10px 26px rgba(28,42,70,.25);}
:root[data-theme="dark"] .sus-size{color:#10161f;}
.sus-size::before{content:"";position:absolute;top:9px;left:50%;transform:translateX(-50%);width:13px;height:13px;border-radius:50%;background:rgba(255,255,255,.32);}
.sus-size small{display:block;font-size:10px;font-weight:800;letter-spacing:.16em;opacity:.8;margin-top:10px;}
.sus-size b{display:block;font:800 52px/1.05 var(--num,"Bahnschrift",monospace);margin-top:4px;font-variant-numeric:tabular-nums;}
.sus-size em{display:block;font-style:normal;font-size:11px;font-weight:800;letter-spacing:.1em;margin-top:6px;opacity:.85;}
.sus-detail{display:grid;gap:8px;}
.sus-drow{display:grid;grid-template-columns:88px 1fr;gap:12px;align-items:baseline;padding:9px 14px;border-radius:9px;background:var(--card2);border:1px solid var(--line2);}
.sus-drow span{font-size:11px;font-weight:700;color:var(--faint);}
.sus-drow b{font-size:12.5px;font-weight:800;color:var(--ink);}
.sus-advice{margin-top:16px;padding:14px 17px;border-left:5px solid var(--red);border-radius:0 12px 12px 0;background:var(--red-soft);font-size:12.5px;line-height:1.85;color:var(--sub);}
.sus-advice b{color:var(--red);font-weight:800;}
:root[data-theme="dark"] .sus-advice b{color:var(--red);}

/* 三段表 */
.sus-charts{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px;}
.sus-chart{background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:var(--shadow-sm);overflow:hidden;}
.sus-chart header{display:flex;justify-content:space-between;align-items:baseline;padding:13px 16px;background:var(--navy-soft);border-bottom:1px solid var(--line);}
.sus-chart header b{font-size:13px;font-weight:800;color:var(--navy-d);}
.sus-chart header span{font-size:9.5px;font-weight:700;color:var(--faint);letter-spacing:.04em;}
.sus-table{width:100%;border-collapse:collapse;}
.sus-table th,.sus-table td{padding:10px 13px;font-size:11.5px;line-height:1.6;text-align:left;border-bottom:1px solid var(--line2);}
.sus-table thead th{font-size:10px;font-weight:800;color:var(--faint);letter-spacing:.05em;background:var(--card2);}
.sus-table tbody tr:last-child td{border-bottom:0;}
.sus-table tbody tr:hover td{background:var(--card2);}
.sus-code{font:800 12.5px/1 var(--num,"Bahnschrift",monospace);color:var(--navy-d);}
.sus-fit{color:var(--faint);}
.sus-scroll{overflow-x:auto;border-radius:var(--r-sm);box-shadow:var(--shadow-sm);}
.sus-table-wide{background:var(--card);border:1px solid var(--line);min-width:600px;}
.sus-table-wide thead th{background:var(--card2);}
.sus-em{font-weight:800;color:var(--navy-d);}

/* 体型提示 */
.sus-tips{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:10px;}
.sus-tip{background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);padding:15px 17px;box-shadow:var(--shadow-sm);border-top:3px solid var(--red);}
.sus-tip b{font-size:12.5px;font-weight:800;color:var(--ink);}
.sus-tip p{margin:5px 0 0;font-size:11.5px;line-height:1.78;color:var(--sub);}

.sus-list{margin:0;padding:0;list-style:none;display:grid;gap:7px;}
.sus-list li{position:relative;padding:11px 16px 11px 32px;background:var(--card);border:1px solid var(--line);border-radius:10px;font-size:12px;line-height:1.78;color:var(--sub);box-shadow:var(--shadow-sm);}
.sus-list li::before{content:"";position:absolute;left:14px;top:15px;width:6px;height:6px;border-radius:50%;background:var(--navy);}

@media (max-width:900px){
  .sus-hero{grid-template-columns:1fr;gap:22px;}
  .sus-main{grid-template-columns:1fr;}
  .sus-size b{font-size:46px;}
  .sus-charts{grid-template-columns:1fr;}
}