.service-action { border: 0; background: none; color: var(--gold2); padding: 8px 0; cursor: pointer; }
.service-action::after { content: " →"; }
.reading-section { max-width: 1100px; }
.reading-workspace { min-height: 340px; background: linear-gradient(145deg, rgba(31,25,20,.92), rgba(13,11,9,.96)); border: 1px solid var(--line); border-radius: 22px; padding: 30px; }
.reading-placeholder { text-align: center; padding: 75px 20px; color: var(--muted); }
.reading-placeholder > span { font-size: 38px; color: var(--gold); }
.reading-form { max-width: 680px; margin: auto; }
.reading-form textarea { min-height: 130px; resize: vertical; }
.reading-form input, .reading-form select, .reading-form textarea { width: 100%; margin-top: 7px; border: 1px solid var(--line); background: #0f0d0b; color: var(--text); border-radius: 10px; padding: 12px; outline: none; }
.reading-result h3 { font: 28px "Songti SC", serif; color: var(--gold2); }
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 25px 0; }
.pillar { text-align: center; padding: 17px 8px; border: 1px solid rgba(239,173,66,.16); background: rgba(239,173,66,.05); border-radius: 13px; }
.pillar strong { display: block; font: 27px "Songti SC", serif; color: var(--gold2); margin-top: 6px; }
.elements { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 18px 0; }
.element { text-align: center; padding: 12px 5px; background: #12100d; border-radius: 10px; }
.element b { display: block; font-size: 20px; }
.guidance { display: grid; gap: 8px; color: #d0c5b8; }
.guidance li { line-height: 1.7; }
.accuracy { margin-top: 22px; padding: 13px; border-left: 2px solid var(--gold); color: var(--muted); font-size: 11px; line-height: 1.7; }
.hex-lines { display: flex; flex-direction: column-reverse; gap: 9px; max-width: 280px; margin: 25px auto; }
.hex-line { height: 10px; background: var(--gold2); border-radius: 3px; position: relative; }
.hex-line.yin { background: linear-gradient(90deg, var(--gold2) 0 43%, transparent 43% 57%, var(--gold2) 57%); }
.hex-line.changing::after { content: "○"; position: absolute; right: -28px; top: -8px; color: var(--gold); }
.tarot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 25px 0; }
.tarot-card { min-height: 210px; border: 1px solid rgba(239,173,66,.25); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; justify-content: space-between; background: radial-gradient(circle at 50% 30%, #34200e, #12100d); }
.tarot-card.reversed { transform: rotate(180deg); }
.tarot-card.reversed > * { transform: rotate(180deg); }
.reading-history { display: grid; gap: 9px; margin-top: 20px; }
.history-item { padding: 13px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.history-item small { color: var(--muted); }
.locked-result { margin-top: 24px; padding: 20px; border: 1px solid rgba(239,173,66,.28); border-radius: 14px; background: linear-gradient(135deg,rgba(239,173,66,.08),rgba(18,16,13,.9)); display: grid; gap: 10px; }
.locked-result strong { color: var(--gold2); font-size: 17px; }
.locked-result span { color: var(--muted); font-size: 12px; }
.locked-result .primary { margin-top: 8px; width: fit-content; }
@media (max-width: 580px) { .pillars, .tarot-grid { grid-template-columns: 1fr; } .elements { grid-template-columns: repeat(5, 1fr); } }