/* 60 · AI穿搭建议 —— 靛青 × 暖橙「分层卡片」：温度带尺、层叠卡、AI 深卡 */
.aoa{
  --ink:#1e2a3d; --sub:#71809a; --card:#ffffff; --line:#e0e6ef;
  --pri:#3159a8; --pri-soft:#eaf0fc; --ok:#2f8166; --warn:#d1812c; --bad:#bd4f5e; --bg:#f4f7fc;
  --ao-font:"Segoe UI","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  --ao-num:"Bahnschrift","Segoe UI Variable Text",ui-monospace,monospace;
  color:var(--ink);background:var(--bg);font-family:var(--ao-font);
  font-size:14.5px;line-height:1.8;padding:28px 16px 62px;
}
:root[data-theme="dark"] .aoa{
  --ink:#e8eefb; --sub:#9dadc8; --card:#1a2434; --line:#2d3d55;
  --pri:#8fb0ff; --pri-soft:#23314d; --ok:#88d3b2; --warn:#e8b979; --bad:#f09aa6; --bg:#121926;
}
.aoa-wrap{max-width:1120px;margin:0 auto;}
.aoa *{box-sizing:border-box;}
.aoa h1,.aoa h2,.aoa h3{margin:0;}
.aoa b{color:var(--pri);font-weight:700;}
.aoa-hero{
  display:grid;grid-template-columns:minmax(0,1.55fr) 230px;gap:24px;align-items:center;
  background:linear-gradient(118deg,#1f3050,var(--card) 82%);border:1px solid var(--line);
  border-radius:20px;padding:30px 34px;box-shadow:0 12px 32px rgba(31,48,80,.14);
}
:root[data-theme="dark"] .aoa-hero{background:linear-gradient(118deg,#202c43,var(--card) 82%);}
.aoa-badge{font-size:12px;font-weight:700;letter-spacing:1.2px;color:#ffc98a;}
.aoa-hero h1{font-size:32px;line-height:1.3;font-weight:820;margin:12px 0 10px;letter-spacing:-.4px;}
.aoa-hero h1 em{display:block;font-style:normal;font-size:16px;font-weight:600;color:var(--sub);margin-top:6px;}
.aoa-hero p{margin:0;max-width:720px;line-height:1.9;color:var(--ink);}
.aoa-hero-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;}
.aoa-hero-meta span{font-size:11.5px;font-weight:650;color:#dce7ff;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:4px 11px;}
.aoa-thermo{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:14px;}
.aoa-thermo-bar{height:16px;border-radius:10px;background:linear-gradient(90deg,#4b7ec9,#8dc3d6 34%,#e8d18a 56%,#e29a58 78%,#d86653);position:relative;}
.aoa-thermo-bar i{position:absolute;top:-7px;left:52%;width:4px;height:30px;border-radius:3px;background:#fff;border:2px solid #1f3050;transition:left .4s;}
.aoa-thermo>span{display:block;font-size:10.5px;color:#d6e2f5;margin-top:9px;text-align:center;}
.aoa-card,.aoa-panel,.aoa-empty{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px 26px;margin-top:18px;box-shadow:0 2px 12px rgba(30,50,90,.06);}
.aoa-card-h,.aoa-h2{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px;border-bottom:1px solid var(--line);padding-bottom:11px;margin-bottom:18px;}
.aoa-card-h h2{font-size:19px;font-weight:750;}
.aoa-h2{font-size:17px;font-weight:750;}
.aoa-card-tip,.aoa-h2 span{font-size:12px;color:var(--sub);font-weight:500;}
.aoa-form{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.aoa-f{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:650;}
.aoa-f input,.aoa-f select,.aoa-ta{width:100%;font:500 14px var(--ao-font);color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:9px 11px;outline:none;transition:border-color .16s,box-shadow .16s;}
.aoa-f input{font-family:var(--ao-num);font-weight:700;}
.aoa-f input:hover,.aoa-f select:hover,.aoa-ta:hover{border-color:var(--pri);}
.aoa-f input:focus,.aoa-f select:focus,.aoa-ta:focus{border-color:var(--pri);box-shadow:0 0 0 3px var(--pri-soft);}
.aoa-num{display:flex;align-items:center;gap:8px;}
.aoa-num i{font-style:normal;font-size:11.5px;color:var(--sub);}
.aoa-wardrobe{margin-top:22px;border-top:1px dashed var(--line);padding-top:18px;}
.aoa-wardrobe h3{font-size:15px;margin-bottom:12px;display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;}
.aoa-wardrobe h3 span{font-size:12px;font-weight:500;color:var(--sub);}
.aoa-wardrobe-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;}
.aoa-item{display:flex;gap:8px;align-items:center;background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:8px 11px;cursor:pointer;font-size:12.5px;transition:border-color .16s,background .16s;}
.aoa-item:hover{border-color:var(--pri);}
.aoa-item input{width:16px;height:16px;accent-color:var(--pri);flex:none;}
.aoa-item em{font-style:normal;font-size:10px;color:var(--sub);margin-left:auto;}
.aoa-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;}
.aoa-btn{font:650 13.5px var(--ao-font);color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:9px;padding:9px 19px;cursor:pointer;transition:transform .15s,border-color .15s,box-shadow .15s,background .15s;}
.aoa-btn:hover:not(:disabled){transform:translateY(-1px);border-color:var(--pri);box-shadow:0 5px 14px rgba(49,89,168,.16);}
.aoa-btn:disabled{opacity:.5;cursor:not-allowed;}
.aoa-btn-main{background:var(--pri);border-color:var(--pri);color:#fff;}
.aoa-btn-ghost{background:transparent;color:var(--sub);}
.aoa-btn-ai{background:#d97a2c;border-color:#d97a2c;color:#fff;}
.aoa-msg{font-size:12.5px;color:var(--sub);margin:12px 0 0;min-height:18px;}
.aoa-empty{text-align:center;color:var(--sub);padding:42px 20px;}
.aoa-empty-ic{display:block;font-size:30px;}
.aoa-empty b{display:block;color:var(--ink);font-size:16px;}
.aoa-empty em{display:block;font-style:normal;font-size:13px;margin-top:6px;}
.aoa-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:18px;}
.aoa-kpi{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:3px;}
.aoa-kpi.is-hero{background:linear-gradient(135deg,var(--pri),#4a7ac6);border-color:transparent;color:#fff;}
.aoa-kpi .k{font-size:12px;color:var(--sub);}
.aoa-kpi.is-hero .k,.aoa-kpi.is-hero .s{color:#e3ecff;}
.aoa-kpi .v{font:800 26px/1.25 var(--ao-num);}
.aoa-kpi-txt{font-size:17px!important;font-family:var(--ao-font)!important;}
.aoa-kpi .s{font-size:11px;color:var(--sub);}
.aoa-band{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;}
.aoa-band>div{border:1px solid var(--line);border-radius:9px;background:var(--bg);padding:10px 8px;text-align:center;min-height:66px;}
.aoa-band>div.is-now{background:var(--pri);border-color:var(--pri);color:#fff;}
.aoa-band b{display:block;font-size:13px;}
.aoa-band span{font-size:10.5px;color:var(--sub);}
.aoa-band>div.is-now span{color:#e3ecff;}
.aoa-note{font-size:12.5px;color:var(--sub);background:var(--bg);border-radius:9px;padding:10px 14px;margin:14px 0 0;line-height:1.75;}
.aoa-layers{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;}
.aoa-layer{border:1px solid var(--line);border-left:4px solid var(--pri);border-radius:10px;background:var(--bg);padding:12px 14px;}
.aoa-layer.is-missing{border-left-color:var(--warn);}
.aoa-layer h3{font-size:13.5px;margin-bottom:5px;}
.aoa-layer p{margin:0;font-size:12.5px;line-height:1.7;color:var(--sub);}
.aoa-layer b{display:block;font-size:14px;margin-bottom:4px;}
.aoa-tips{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
.aoa-tips div{background:var(--bg);border-left:3px solid var(--warn);border-radius:0 9px 9px 0;padding:10px 13px;font-size:12.5px;line-height:1.7;}
.aoa-checklist{margin-top:14px;background:var(--pri-soft);border:1px dashed var(--pri);border-radius:10px;padding:14px 18px;font-size:14px;line-height:1.8;}
.aoa-tw{overflow:auto;}
.aoa-tb{width:100%;border-collapse:collapse;font-size:13px;min-width:620px;}
.aoa-tb th,.aoa-tb td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;}
.aoa-tb th{background:var(--bg);font-size:11.5px;color:var(--sub);}
.aoa-tb tbody tr:hover{background:var(--pri-soft);}
.aoa-ai{background:linear-gradient(120deg,#20304b,#314061);border-color:#314061;color:#fff;}
:root[data-theme="dark"] .aoa-ai{background:linear-gradient(120deg,#1b2740,#2a3755);}
.aoa-ai .aoa-h2,.aoa-ai .aoa-h2 span,.aoa-ai .aoa-msg{color:#e0e8f8;}
.aoa-ai .aoa-h2{border-bottom-color:rgba(255,255,255,.18);}
.aoa-ai-tip{font-size:12.5px;color:#d5e0f2;line-height:1.75;margin:0 0 14px;}
.aoa-ai-out{white-space:pre-wrap;background:var(--card);color:var(--ink);border-radius:10px;padding:16px 18px;font-size:13.5px;line-height:1.85;margin-top:14px;}
.aoa-ta{min-height:100px;resize:vertical;line-height:1.7;}
.aoa-final{margin-top:20px;}
@media (max-width:860px){
  .aoa{padding:18px 12px 48px;}
  .aoa-hero{grid-template-columns:1fr;padding:22px 18px;}
  .aoa-thermo{display:none;}
  .aoa-hero h1{font-size:26px;}
  .aoa-form,.aoa-wardrobe-grid,.aoa-kpis,.aoa-layers,.aoa-tips{grid-template-columns:1fr;}
  .aoa-band{grid-template-columns:repeat(3,1fr);}
  .aoa-card,.aoa-panel{padding:18px 16px;}
  .aoa-card-h,.aoa-h2{flex-direction:column;gap:3px;}
}