.ec {
  --ec-ink: #08070d;
  --ec-panel: #100e18;
  --ec-panel-2: #151222;
  --ec-line: rgba(226, 202, 151, .22);
  --ec-gold: #e3c47c;
  --ec-gold-bright: #f4d992;
  --ec-ivory: #f7f0e5;
  --ec-muted: #b9afc4;
  --ec-violet: #a58ed7;
  --ec-blue: #8bb4d6;
  color: var(--ec-ivory);
  margin: 0 auto 3rem;
  width: min(100%, 1180px);
}

.ec *, .ec *::before, .ec *::after { box-sizing: border-box; }
.ec button, .ec input, .ec select { font: inherit; }
.ec button, .ec a { -webkit-tap-highlight-color: transparent; }
.ec h2, .ec h3, .ec h4, .ec p { margin-top: 0; }
.ec h2, .ec h3 { color: var(--ec-ivory); font-family: "Cormorant Garamond", Georgia, serif; }
.ec-kicker { color: var(--ec-gold); display: block; font-size: .72rem; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; }

.ec-hero {
  border: 1px solid rgba(227, 196, 124, .28);
  border-radius: 28px;
  box-shadow: 0 28px 80px rgba(0, 0, 0, .42);
  min-height: 510px;
  overflow: hidden;
  position: relative;
}

.ec-hero > img { height: 100%; inset: 0; object-fit: cover; position: absolute; width: 100%; }
.ec-hero-veil { background: linear-gradient(90deg, rgba(5, 5, 12, .95) 0%, rgba(5, 5, 12, .82) 35%, rgba(5, 5, 12, .2) 68%, rgba(5, 5, 12, .14) 100%), linear-gradient(0deg, rgba(5, 5, 12, .8), transparent 45%); inset: 0; position: absolute; }
.ec-hero-copy { display: flex; flex-direction: column; justify-content: center; min-height: 510px; padding: clamp(2rem, 6vw, 5rem); position: relative; width: min(610px, 63%); z-index: 1; }
.ec-hero-copy h2 { font-size: clamp(2.7rem, 6vw, 5rem); font-weight: 600; letter-spacing: -.035em; line-height: .94; margin: .75rem 0 1.1rem; text-wrap: balance; }
.ec-hero-copy p { color: #d8d0dc; font-size: 1.05rem; line-height: 1.65; max-width: 540px; }
.ec-hero-points { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: .7rem; }
.ec-hero-points span { backdrop-filter: blur(8px); background: rgba(9, 8, 16, .56); border: 1px solid rgba(227, 196, 124, .3); border-radius: 999px; color: #eee5d8; font-size: .76rem; font-weight: 700; padding: .55rem .8rem; }
.ec-hero-points span::before { color: var(--ec-gold); content: "✦"; margin-right: .42rem; }

.ec-body { padding: clamp(1.1rem, 3vw, 2.5rem) 0 0; }
.ec-form {
  background: radial-gradient(circle at 90% 0%, rgba(112, 76, 158, .13), transparent 34%), linear-gradient(145deg, #12101a, #0c0b12);
  border: 1px solid var(--ec-line);
  border-radius: 24px;
  box-shadow: 0 20px 55px rgba(0, 0, 0, .22);
  overflow: hidden;
  padding: clamp(1.25rem, 4vw, 2.5rem);
  position: relative;
}
.ec-form-head { align-items: center; display: grid; gap: 1.3rem; grid-template-columns: 82px 1fr; margin-bottom: 1.8rem; }
.ec-form-head h2 { font-size: clamp(2rem, 4vw, 3.1rem); line-height: 1; margin: .4rem 0 .55rem; }
.ec-form-head p { color: var(--ec-muted); line-height: 1.6; margin: 0; max-width: 760px; }
.ec-form-orbit { align-items: center; border: 1px solid rgba(227, 196, 124, .36); border-radius: 50%; display: flex; height: 74px; justify-content: center; position: relative; width: 74px; }
.ec-form-orbit::before, .ec-form-orbit::after { border: 1px solid rgba(165, 142, 215, .25); border-radius: 50%; content: ""; inset: 8px; position: absolute; }
.ec-form-orbit::after { border-left-color: transparent; inset: -5px; transform: rotate(35deg); }
.ec-form-orbit i { background: var(--ec-gold); border-radius: 50%; box-shadow: 0 0 14px rgba(227, 196, 124, .7); height: 5px; position: absolute; right: 1px; top: 27px; width: 5px; }
.ec-form-orbit b { color: var(--ec-gold-bright); font-size: 1.8rem; font-weight: 400; }

.ec-fields { display: grid; gap: .85rem; grid-template-columns: 1fr 1fr 1.55fr; }
.ec-fields label { display: grid; gap: .5rem; }
.ec-fields label > span { color: #dfd6e2; font-size: .76rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ec-fields input, .ec-fields select { appearance: none; background: #09080e; border: 1px solid rgba(199, 184, 213, .2); border-radius: 12px; color: var(--ec-ivory); min-height: 54px; outline: none; padding: 0 .95rem; width: 100%; }
.ec-fields select { background-image: linear-gradient(45deg, transparent 50%, var(--ec-gold) 50%), linear-gradient(135deg, var(--ec-gold) 50%, transparent 50%); background-position: calc(100% - 18px) 23px, calc(100% - 13px) 23px; background-repeat: no-repeat; background-size: 5px 5px; padding-right: 2.6rem; }
.ec-fields input:focus, .ec-fields select:focus { border-color: var(--ec-gold); box-shadow: 0 0 0 3px rgba(227, 196, 124, .1); }
.ec-fields input:disabled { color: #706b78; opacity: .62; }
.ec-fields input::-webkit-calendar-picker-indicator { filter: invert(85%) sepia(15%) saturate(680%); }

.ec-no-time { align-items: flex-start; background: rgba(6, 6, 10, .36); border: 1px solid rgba(199, 184, 213, .14); border-radius: 14px; cursor: pointer; display: flex; gap: .75rem; margin: 1rem 0 1.25rem; padding: .85rem 1rem; }
.ec-no-time input { accent-color: var(--ec-gold); height: 18px; margin: .12rem 0 0; width: 18px; }
.ec-no-time span { display: grid; gap: .2rem; }
.ec-no-time b { color: var(--ec-ivory); font-size: .9rem; }
.ec-no-time small { color: var(--ec-muted); line-height: 1.45; }
.ec-submit { align-items: center; background: linear-gradient(135deg, #dec078, #f0d99b); border: 0; border-radius: 12px; color: #17110a; cursor: pointer; display: flex; font-weight: 900; gap: .72rem; justify-content: center; min-height: 56px; padding: 0 1.25rem; transition: transform .2s ease, box-shadow .2s ease; width: 100%; }
.ec-submit:hover { box-shadow: 0 10px 30px rgba(227, 196, 124, .2); transform: translateY(-2px); }
.ec-submit > span { font-size: 1.25rem; }
.ec-submit i { font-style: normal; margin-left: auto; }
.ec-submit:disabled { cursor: wait; opacity: .72; transform: none; }
.ec-form-note { color: #81798a; font-size: .73rem; line-height: 1.45; margin: .72rem 0 0; text-align: center; }
.ec-error { background: rgba(171, 68, 68, .12); border: 1px solid rgba(225, 110, 110, .34); border-radius: 10px; color: #f1b9b9; margin: 1rem 0 0; padding: .85rem 1rem; }
.ec-loader { align-items: center; backdrop-filter: blur(5px); background: rgba(9, 8, 14, .9); display: none; flex-direction: column; gap: .75rem; inset: 0; justify-content: center; position: absolute; z-index: 4; }
.ec-form.is-loading .ec-loader { display: flex; }
.ec-loader i { border: 2px solid rgba(227, 196, 124, .2); border-radius: 50%; border-top-color: var(--ec-gold); height: 46px; width: 46px; animation: ec-spin .85s linear infinite; }
.ec-loader span { color: var(--ec-gold-bright); font-weight: 800; }
@keyframes ec-spin { to { transform: rotate(1turn); } }

.ec-result { background: linear-gradient(155deg, rgba(20, 17, 30, .98), rgba(8, 7, 13, .99)); border: 1px solid rgba(227, 196, 124, .27); border-radius: 26px; box-shadow: 0 30px 80px rgba(0, 0, 0, .35); margin-top: 1.4rem; overflow: hidden; padding: clamp(1.15rem, 4vw, 2.5rem); }
.ec-result:focus { outline: none; }
.ec-result-head { align-items: center; display: flex; gap: 1.5rem; justify-content: space-between; }
.ec-result-head h2 { font-size: clamp(2.25rem, 5vw, 3.8rem); line-height: .98; margin: .45rem 0 .65rem; }
.ec-result-head p { color: var(--ec-muted); margin: 0; }
.ec-result-seal { align-items: center; border: 1px solid rgba(227, 196, 124, .42); border-radius: 50%; display: flex; flex: 0 0 92px; flex-direction: column; height: 92px; justify-content: center; position: relative; }
.ec-result-seal::after { border: 1px solid rgba(165, 142, 215, .22); border-radius: 50%; content: ""; inset: 7px; position: absolute; }
.ec-result-seal i { background: var(--ec-gold); border-radius: 50%; height: 5px; position: absolute; right: -3px; top: 40px; width: 5px; }
.ec-result-seal b { color: var(--ec-gold-bright); font: 600 2rem/1 "Cormorant Garamond", Georgia, serif; }
.ec-result-seal small { color: var(--ec-muted); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; }
.ec-precision { align-items: flex-start; background: rgba(142, 119, 183, .1); border: 1px solid rgba(165, 142, 215, .26); border-radius: 14px; display: flex; gap: .8rem; margin-top: 1.2rem; padding: .9rem 1rem; }
.ec-precision > span { align-items: center; border: 1px solid rgba(165, 142, 215, .45); border-radius: 50%; color: var(--ec-violet); display: flex; flex: 0 0 30px; height: 30px; justify-content: center; }
.ec-precision strong { color: #e2d9ec; }
.ec-precision p { color: var(--ec-muted); font-size: .87rem; line-height: 1.55; margin: .25rem 0 0; }

.ec-timeline { display: flex; gap: .4rem; margin: 2rem -.5rem 1.4rem; overflow-x: auto; padding: 0 .5rem 1rem; position: relative; scrollbar-color: rgba(227, 196, 124, .35) transparent; scrollbar-width: thin; }
.ec-timeline-track { background: linear-gradient(90deg, transparent, rgba(227, 196, 124, .32) 8%, rgba(165, 142, 215, .32) 92%, transparent); height: 1px; left: 2.5rem; position: absolute; right: 2.5rem; top: 20px; }
.ec-timeline-item { background: transparent; border: 0; color: var(--ec-muted); cursor: pointer; flex: 0 0 132px; padding: 0 .25rem; position: relative; text-align: left; }
.ec-eclipse-dot { align-items: center; background: #0e0c15; border: 1px solid rgba(227, 196, 124, .35); border-radius: 50%; display: flex; height: 39px; justify-content: center; margin-bottom: .72rem; position: relative; transition: transform .2s ease, border-color .2s ease; width: 39px; }
.ec-eclipse-dot i { background: var(--ec-gold); border-radius: 50%; height: 10px; width: 10px; }
.ec-timeline-item.is-lunar .ec-eclipse-dot i { background: var(--ec-violet); box-shadow: inset 4px 0 0 #0e0c15; }
.ec-timeline-item small { display: block; font-size: .64rem; height: 2.4em; line-height: 1.2; }
.ec-timeline-item strong { color: #e5ddec; display: block; font-size: .9rem; margin-top: .2rem; }
.ec-timeline-item em { color: #777080; display: block; font-size: .68rem; font-style: normal; }
.ec-timeline-item:hover .ec-eclipse-dot, .ec-timeline-item.is-active .ec-eclipse-dot { border-color: var(--ec-gold-bright); box-shadow: 0 0 0 5px rgba(227, 196, 124, .08); transform: scale(1.06); }
.ec-timeline-item.is-active small { color: var(--ec-gold); }
.ec-timeline-item.is-active strong { color: #fff8ec; }

.ec-panel[hidden] { display: none !important; }
.ec-panel { animation: ec-rise .36s ease both; }
@keyframes ec-rise { from { opacity: 0; transform: translateY(8px); } }
.ec-panel-head { align-items: center; background: linear-gradient(100deg, rgba(227, 196, 124, .08), rgba(165, 142, 215, .05)); border: 1px solid var(--ec-line); border-radius: 18px; display: grid; gap: 1rem; grid-template-columns: 64px 1fr auto; padding: 1rem 1.1rem; }
.ec-type-mark { align-items: center; border: 1px solid rgba(227, 196, 124, .36); border-radius: 50%; display: flex; height: 56px; justify-content: center; position: relative; width: 56px; }
.ec-type-mark i { border: 1px solid rgba(227, 196, 124, .2); border-radius: 50%; inset: 6px; position: absolute; }
.ec-type-mark b { color: var(--ec-gold-bright); font-size: 1.5rem; font-weight: 400; }
.ec-panel.is-lunar .ec-type-mark { border-color: rgba(165, 142, 215, .46); }
.ec-panel.is-lunar .ec-type-mark b { color: #c6b5eb; }
.ec-panel-head span { color: var(--ec-gold); font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.ec-panel-head h3 { font-size: clamp(1.8rem, 4vw, 2.65rem); line-height: 1; margin: .25rem 0 .3rem; }
.ec-panel-head p { color: var(--ec-muted); font-size: .82rem; margin: 0; }
.ec-days { border: 1px solid rgba(227, 196, 124, .25); border-radius: 999px; color: #e8ddc8; font-size: .74rem; padding: .55rem .75rem; white-space: nowrap; }

.ec-overview { align-items: center; display: grid; gap: clamp(1rem, 4vw, 3rem); grid-template-columns: minmax(290px, 390px) 1fr; padding: clamp(1.25rem, 4vw, 2.6rem) 0; }
.ec-wheel { margin: auto; max-width: 390px; width: 100%; }
.ec-wheel-svg { display: block; filter: drop-shadow(0 20px 28px rgba(0, 0, 0, .32)); height: auto; overflow: visible; width: 100%; }
.ec-wheel-bg { fill: #0a0910; stroke: rgba(227, 196, 124, .2); stroke-width: 1; }
.ec-wheel-ring { fill: none; stroke: rgba(227, 196, 124, .5); stroke-width: 1; }
.ec-wheel-ring.is-inner { stroke: rgba(199, 184, 213, .18); }
.ec-wheel-core { fill: rgba(22, 18, 31, .94); stroke: rgba(227, 196, 124, .24); }
.ec-wheel-sector { stroke: rgba(227, 196, 124, .22); stroke-width: .8; }
.ec-wheel-sign { fill: #cfc3da; font-family: Georgia, serif; font-size: 14px; text-anchor: middle; }
.ec-wheel-house { stroke: rgba(174, 156, 190, .2); stroke-width: .65; }
.ec-wheel-house.is-asc { stroke: var(--ec-gold); stroke-width: 1.2; }
.ec-wheel-house.is-muted { stroke-dasharray: 2 5; }
.ec-wheel-house-num { fill: #746c7d; font-family: Arial, sans-serif; font-size: 7px; text-anchor: middle; }
.ec-wheel-ray { stroke: var(--ec-gold-bright); stroke-width: 1.2; }
.ec-wheel-eclipse-halo { fill: rgba(227, 196, 124, .12); stroke: rgba(227, 196, 124, .32); }
.ec-wheel-eclipse { fill: var(--ec-gold-bright); filter: drop-shadow(0 0 7px rgba(244, 217, 146, .88)); }
.ec-panel.is-lunar .ec-wheel-ray { stroke: #b9a1e8; }
.ec-panel.is-lunar .ec-wheel-eclipse { fill: #c2afea; }
.ec-wheel-center { fill: var(--ec-gold-bright); font-family: Georgia, serif; font-size: 28px; text-anchor: middle; }
.ec-panel.is-lunar .ec-wheel-center { fill: #c2afea; }
.ec-wheel-degree { fill: #a79cab; font-family: Arial, sans-serif; font-size: 8px; text-anchor: middle; }

.ec-reading { color: #d7ceda; line-height: 1.68; }
.ec-facts { display: grid; gap: .7rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 1.1rem; }
.ec-facts span { background: rgba(5, 5, 9, .36); border-left: 2px solid var(--ec-gold); border-radius: 0 10px 10px 0; display: grid; gap: .22rem; min-height: 70px; padding: .72rem .85rem; }
.ec-panel.is-lunar .ec-facts span { border-left-color: var(--ec-violet); }
.ec-facts small { color: #918797; font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.ec-facts b { color: var(--ec-ivory); font-size: .9rem; line-height: 1.35; }
.ec-reading p { margin-bottom: .85rem; }
.ec-reading .ec-lead { color: #f0e8dc; font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.35rem; line-height: 1.4; }
.ec-reading strong { color: #f2dca4; }
.ec-penumbral { border-top: 1px solid rgba(165, 142, 215, .18); color: #a99db4; font-size: .79rem; padding-top: .75rem; }

.ec-guidance { display: grid; gap: .8rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ec-guidance section { align-items: flex-start; background: rgba(11, 9, 16, .58); border: 1px solid rgba(199, 184, 213, .15); border-radius: 15px; display: flex; gap: .8rem; padding: 1rem; }
.ec-guidance section > span { align-items: center; border: 1px solid rgba(227, 196, 124, .38); border-radius: 50%; color: var(--ec-gold); display: flex; flex: 0 0 32px; height: 32px; justify-content: center; }
.ec-guidance small { color: var(--ec-gold); display: block; font-size: .66rem; font-weight: 800; letter-spacing: .1em; margin-bottom: .35rem; text-transform: uppercase; }
.ec-guidance p { color: #d7ceda; line-height: 1.55; margin: 0; }

.ec-contacts { border-top: 1px solid var(--ec-line); margin-top: 1.5rem; padding-top: 1.35rem; }
.ec-contacts > header { margin-bottom: .85rem; }
.ec-contact-list { display: grid; gap: .7rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ec-contact-list article { align-items: flex-start; background: rgba(6, 5, 10, .45); border: 1px solid rgba(199, 184, 213, .14); border-radius: 14px; display: flex; gap: .8rem; padding: .9rem; }
.ec-aspect-glyph { align-items: center; border: 1px solid rgba(227, 196, 124, .32); border-radius: 50%; color: var(--ec-gold); display: flex; flex: 0 0 38px; font-family: Georgia, serif; height: 38px; justify-content: center; }
.ec-contact-list small { color: #94899c; font-size: .66rem; letter-spacing: .07em; text-transform: uppercase; }
.ec-contact-list h4 { color: #f3e9d9; font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.25rem; margin: .1rem 0 .2rem; }
.ec-contact-list p { color: #bfb5c5; font-size: .8rem; line-height: 1.45; margin: 0; }
.ec-no-contacts { background: rgba(6, 5, 10, .4); border: 1px dashed rgba(199, 184, 213, .2); border-radius: 13px; color: var(--ec-muted); line-height: 1.55; margin: 0; padding: 1rem; }
.ec-actions { align-items: center; display: flex; gap: 1rem; justify-content: flex-end; margin-top: 1.25rem; }
.ec-actions button { align-items: center; background: transparent; border: 1px solid rgba(227, 196, 124, .44); border-radius: 999px; color: var(--ec-gold-bright); cursor: pointer; display: flex; font-weight: 800; gap: .5rem; min-height: 43px; padding: 0 1rem; }
.ec-actions button:hover { background: rgba(227, 196, 124, .09); }
.ec-actions a { color: #a69baa; font-size: .82rem; text-decoration: underline; text-underline-offset: 3px; }
.ec-share-status { color: #b7d3bd; font-size: .78rem; margin: .65rem 0 0; min-height: 1.2em; text-align: right; }

.ec-method { background: radial-gradient(circle at 10% 20%, rgba(227, 196, 124, .08), transparent 33%), #0d0c13; border: 1px solid var(--ec-line); border-radius: 22px; display: grid; gap: clamp(1.5rem, 5vw, 4rem); grid-template-columns: 1fr 1fr; margin-top: 1.4rem; padding: clamp(1.3rem, 4vw, 2.5rem); }
.ec-method h2 { font-size: clamp(2rem, 4vw, 3.1rem); line-height: 1; margin: .4rem 0 .7rem; }
.ec-method > div p { color: var(--ec-muted); line-height: 1.6; }
.ec-method > div a { color: var(--ec-gold); font-size: .8rem; }
.ec-method ol { display: grid; gap: .8rem; list-style: none; margin: 0; padding: 0; }
.ec-method li { align-items: flex-start; display: flex; gap: .85rem; }
.ec-method li > b { align-items: center; border: 1px solid rgba(227, 196, 124, .35); border-radius: 50%; color: var(--ec-gold); display: flex; flex: 0 0 34px; height: 34px; justify-content: center; }
.ec-method li span { display: grid; gap: .2rem; }
.ec-method li strong { color: #ece3d7; }
.ec-method li small { color: #9c92a2; line-height: 1.45; }
.ec-disclaimer { color: #716a78; font-size: .69rem; line-height: 1.5; margin: .8rem auto 0; max-width: 800px; text-align: center; }

@media (max-width: 860px) {
  .ec-hero, .ec-hero-copy { min-height: 470px; }
  .ec-hero-copy { width: 70%; }
  .ec-fields { grid-template-columns: 1fr 1fr; }
  .ec-city { grid-column: 1 / -1; }
  .ec-overview { grid-template-columns: 320px 1fr; }
  .ec-contact-list { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .ec { margin-bottom: 2rem; }
  .ec-hero { border-radius: 19px; min-height: 500px; }
  .ec-hero > img { object-position: 65% center; }
  .ec-hero-veil { background: linear-gradient(0deg, rgba(5, 5, 12, .97) 0%, rgba(5, 5, 12, .83) 51%, rgba(5, 5, 12, .18) 100%); }
  .ec-hero-copy { justify-content: flex-end; min-height: 500px; padding: 1.4rem; width: 100%; }
  .ec-hero-copy h2 { font-size: clamp(2.45rem, 12vw, 3.6rem); max-width: 540px; }
  .ec-hero-copy p { font-size: .94rem; line-height: 1.5; }
  .ec-hero-points { gap: .4rem; }
  .ec-hero-points span { font-size: .68rem; padding: .45rem .6rem; }
  .ec-form, .ec-result, .ec-method { border-radius: 18px; }
  .ec-form-head { align-items: start; grid-template-columns: 52px 1fr; }
  .ec-form-orbit { height: 48px; width: 48px; }
  .ec-form-orbit b { font-size: 1.2rem; }
  .ec-form-orbit i { right: -1px; top: 17px; }
  .ec-fields { grid-template-columns: 1fr; }
  .ec-city { grid-column: auto; }
  .ec-result-head { align-items: flex-start; }
  .ec-result-seal { display: none; }
  .ec-timeline { margin-top: 1.4rem; }
  .ec-timeline-item { flex-basis: 112px; }
  .ec-panel-head { grid-template-columns: 52px 1fr; }
  .ec-type-mark { height: 48px; width: 48px; }
  .ec-days { grid-column: 1 / -1; justify-self: start; margin-left: 62px; }
  .ec-overview { gap: .8rem; grid-template-columns: 1fr; }
  .ec-wheel { max-width: 330px; }
  .ec-facts, .ec-guidance { grid-template-columns: 1fr; }
  .ec-actions { align-items: stretch; flex-direction: column; }
  .ec-actions button { justify-content: center; width: 100%; }
  .ec-actions a { text-align: center; }
  .ec-share-status { text-align: center; }
  .ec-method { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .ec *, .ec *::before, .ec *::after { animation-duration: .01ms !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}