/* Styles for I Ching tool */
.ts-iching{border:1px solid #eee;border-radius:12px;padding:12px;box-shadow:0 2px 10px rgba(0,0,0,.04);font-family:system-ui,Arial,Helvetica,sans-serif}
.tsic-head{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.tsic-actions{display:flex;flex-wrap:wrap;gap:8px}
.btn{background:#0a7;color:#fff;border:none;border-radius:10px;padding:8px 12px;cursor:pointer}
.btn.outline{background:#fff;border:1px solid #0a7;color:#0a7}
.btn:hover{opacity:.95}
.tip{color:#666;font-size:13px}
.tsic-wrap{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.panel{border:1px solid #f1f1f1;border-radius:10px;padding:10px}
.panel-title{font-weight:700;margin-bottom:8px}
.lines{list-style:none;margin:0;padding:0;display:flex;flex-direction:column-reverse;gap:6px;min-height:220px}
.lines li{border:1px dashed #ddd;border-radius:8px;padding:6px;min-height:30px;display:flex;align-items:center;justify-content:space-between}
.lines li .seg{height:8px;border-radius:6px;background:#333;flex:1}
.lines li .gap{width:10px}
.lines li .val{font-size:12px;color:#666;margin-left:10px}
.legend{display:flex;align-items:center;gap:8px;margin-top:8px;color:#666;font-size:12px}
.legend .seg{display:inline-block;width:28px;height:6px;border-radius:6px;background:#333}
.legend .seg.yin{background:linear-gradient(90deg,#333 0 42%,transparent 42% 58%,#333 58% 100%)}
.legend .seg.moving{background:#f39c12}
.hex-out{display:grid;grid-template-columns:1fr;gap:10px}
.hex .label{font-size:12px;color:#666;margin-bottom:4px}
.hex .name{font-size:18px;font-weight:700;margin-bottom:2px}
.hex .trigrams{color:#555;margin-bottom:6px}
.hex .summary{background:#f9fafb;border:1px solid #eef;padding:8px;border-radius:8px}
.hex .moving{margin-top:6px;font-size:13px;color:#444}
.copy-status{margin-left:8px;color:#0a7}
.seg.yin{background:linear-gradient(90deg,#333 0 40%,transparent 40% 60%,#333 60% 100%)}
.seg.yang{background:#333}
.seg.moving{background:#f39c12}
@media (max-width: 840px){ .tsic-wrap{grid-template-columns:1fr} }