:root { color-scheme: dark; font-family: system-ui, Arial, sans-serif; }
body { margin: 0; background: radial-gradient(circle at 20% 0%, rgba(124,58,237,.32), transparent 34%), radial-gradient(circle at 85% 12%, rgba(236,72,153,.24), transparent 30%), linear-gradient(135deg, #06121f 0%, #111827 44%, #2e1065 100%); color: #f9fafb; padding-bottom: 120px; }
.top-nav { padding: 0 8px 0 0; margin: 0; display: flex; gap: 12px; justify-content: flex-end; background: linear-gradient(90deg, rgba(3,7,18,.92), rgba(49,46,129,.92), rgba(88,28,135,.92)); }
.top-nav a { padding: 0; margin: 0; color: #fde68a; font-weight: 800; }
.top-nav .telegram-btn { padding: 4px 10px; border-radius: 999px; background: #229ed9; color: #fff; text-decoration: none; }
.nav-button { width: auto; height: auto; padding: 4px 10px; border-radius: 999px; background: #f59e0b; color: #111827; font-size: inherit; }
.selected-bar { position: sticky; top: 0; z-index: 10; padding: 8px 12px; background: linear-gradient(90deg, rgba(17,24,39,.96), rgba(30,64,175,.88), rgba(126,34,206,.90)); border-bottom: 1px solid rgba(251,191,36,.35); color: #fde68a; font-weight: 800; text-align: center; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.selected-bar a { color: #fff; text-decoration: underline; text-underline-offset: 3px; font-weight: 1000; }
.swetest-panel { max-width: 840px; margin: 20px auto 0; padding: 0 16px; }
.paksha-tabs { max-width: 840px; margin: 20px auto 0; padding: 0 16px; }
.tab-buttons { display: flex; gap: 8px; width: 100%; }
.tab-button { flex: 1; width: 100%; padding: 8px 12px; height: auto; background: linear-gradient(135deg, #1f2937, #312e81); color: #f9fafb; border: 1px solid rgba(129,140,248,.45); pointer-events: none; cursor: default; display: grid; gap: 2px; place-items: center; }
.tab-button span { font-size: 16px; font-weight: 1000; line-height: 1.1; }
.tab-button small { font-size: 11px; font-weight: 900; opacity: .9; line-height: 1; }
.tab-button.active { background: linear-gradient(135deg, #f59e0b, #f472b6, #8b5cf6); color: #111827; border-color: #fde68a; box-shadow: 0 0 0 3px rgba(244,114,182,.24), 0 10px 28px rgba(139,92,246,.25); }
.tithi-progress { width: 100%; margin-top: 12px; }
.tithi-progress-title { color: #fbbf24; font-weight: 800; margin-bottom: 6px; text-align: center; }
.tithi-blocks { display: grid; grid-template-columns: repeat(15, minmax(0, 1fr)); gap: 4px; width: 100%; }
.tithi-block { position: relative; overflow: hidden; aspect-ratio: 1 / 1; min-height: 0; border: 1px solid #4b5563; border-radius: 999px; background: #374151; color: #f9fafb; display: grid; place-items: center; font-weight: 800; font-size: clamp(13px, 3.5vw, 20px); }
.tithi-block span { position: relative; z-index: 2; line-height: 1; }
.tithi-block i { position: absolute; inset: 0 auto 0 0; background: rgba(245, 158, 11, .45); z-index: 1; }
.tithi-block.active { border-color: #fbbf24; box-shadow: 0 0 0 2px rgba(251, 191, 36, .28); color: #111827; }
.daynight-tabs { display: flex; gap: 8px; width: 100%; margin-top: 12px; }
.daynight-button { flex: 1; width: 100%; min-height: 64px; padding: 6px; height: auto; background: linear-gradient(145deg, rgba(31,41,55,.96), rgba(49,46,129,.82)); color: #f9fafb; border: 1px solid rgba(129,140,248,.45); cursor: pointer; display: grid; gap: 5px; }
.daynight-label { font-weight: 900; }
.authority-line { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; color: #d1d5db; font-size: 11px; font-weight: 800; line-height: 1.1; }
.authority-line span:first-child { color: #fde68a; }
.authority-line span:last-child { color: #fecdd3; }
.daynight-button em { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; font-style: normal; }
.daynight-button b { position: relative; overflow: hidden; min-height: 14px; border-radius: 4px; background: #111827; border: 1px solid #4b5563; }
.daynight-button b::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, #f59e0b, #f472b6); }
.daynight-button b.filled::before { width: 100%; }
.daynight-button b.partial::before { width: var(--fill, 0%); }
.daynight-button.active { color: #fde68a; border-color: #f472b6; box-shadow: 0 0 0 3px rgba(244,114,182,.22), 0 12px 30px rgba(139,92,246,.22); }
.find-patchi-card { display: grid; gap: 4px; margin-top: 12px; padding: 12px; border-radius: 14px; border: 1px solid rgba(253,230,138,.40); background: linear-gradient(135deg, rgba(234,88,12,.82), rgba(219,39,119,.72), rgba(126,34,206,.76)); color: #fff; text-align: center; text-decoration: none; box-shadow: 0 16px 38px rgba(0,0,0,.24); }
.find-patchi-card small { color: #fde68a; font-weight: 1000; text-transform: uppercase; }
.find-patchi-card strong { font-size: clamp(22px, 6vw, 34px); color: #fff7ed; }
.find-patchi-card span { color: #e0f2fe; font-weight: 900; }
.telegram-alert-card { background: linear-gradient(135deg, rgba(34,158,217,.88), rgba(37,99,235,.78), rgba(126,34,206,.72)); border-color: rgba(186,230,253,.48); }
.telegram-alert-card small { color: #e0f2fe; }
.good-time-card { background: linear-gradient(135deg, rgba(22,163,74,.86), rgba(245,158,11,.76), rgba(126,34,206,.64)); border-color: rgba(253,230,138,.48); }
.front-hora-card { margin-top: 12px; padding: 10px; border: 1px solid rgba(251,191,36,.42); border-radius: 14px; background: linear-gradient(135deg, rgba(30,64,175,.92), rgba(126,34,206,.86), rgba(219,39,119,.68)); text-align: center; box-shadow: 0 16px 38px rgba(0,0,0,.28); }
.front-hora-link { display: block; color: inherit; text-decoration: none; }
.front-hora-title { color: #d1d5db; font-size: 11px; font-weight: 900; text-transform: uppercase; }
.front-hora-main { color: #fde68a; text-shadow: 0 2px 16px rgba(251,191,36,.25); font-size: clamp(22px, 6vw, 34px); font-weight: 1000; line-height: 1.15; margin-top: 4px; }
.front-hora-sub { color: #f9fafb; font-size: 12px; font-weight: 900; margin: 5px 0 7px; }
.front-hora-bar { height: 10px; overflow: hidden; border-radius: 999px; background: #111827; border: 1px solid #4b5563; }
.front-hora-bar i { display: block; height: 100%; background: linear-gradient(90deg, #22d3ee, #fbbf24, #f472b6); }
.front-dasa-card { margin-top: 12px; padding: 10px; border: 1px solid rgba(34,211,238,.42); border-radius: 14px; background: linear-gradient(135deg, rgba(6,95,70,.88), rgba(30,64,175,.86), rgba(126,34,206,.70)); text-align: center; box-shadow: 0 16px 38px rgba(0,0,0,.24); }
.front-dasa-link { display: block; color: inherit; text-decoration: none; }
.front-dasa-title { color: #d1fae5; font-size: 11px; font-weight: 900; text-transform: uppercase; }
.front-dasa-main { color: #fde68a; text-shadow: 0 2px 16px rgba(34,211,238,.22); font-size: clamp(20px, 5.4vw, 30px); font-weight: 1000; line-height: 1.15; margin-top: 4px; }
.front-dasa-sub { color: #f9fafb; font-size: 12px; font-weight: 900; margin-top: 6px; }
.front-panchangam-card { margin-top: 12px; padding: 10px; border: 1px solid rgba(251,191,36,.38); border-radius: 14px; background: linear-gradient(135deg, rgba(88,28,135,.88), rgba(14,116,144,.76), rgba(6,95,70,.62)); box-shadow: 0 16px 38px rgba(0,0,0,.24); }
.front-panchangam-link { display: block; color: inherit; text-decoration: none; }
.front-panchangam-title { color: #fde68a; text-align: center; font-size: 11px; font-weight: 1000; text-transform: uppercase; margin-bottom: 8px; }
.front-panchangam-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; text-align: center; }
.front-panchangam-grid span { display: grid; gap: 3px; padding: 8px 5px; border-radius: 12px; background: rgba(15,23,42,.48); font-weight: 1000; min-width: 0; }
.front-panchangam-grid b { color: #bae6fd; font-size: 10px; text-transform: uppercase; }
.front-panchangam-grid span { color: #f9fafb; font-size: 12px; overflow-wrap: anywhere; }
@media (max-width: 520px) { .front-panchangam-grid { grid-template-columns: repeat(2, 1fr); } .front-panchangam-grid span:last-child { grid-column: 1 / -1; } }
.samam-progress { width: 100%; margin-top: 12px; cursor: pointer; }
.samam-title { color: #fbbf24; font-weight: 900; text-align: center; margin-bottom: 6px; }
.samam-blocks { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; width: 100%; }
.samam-block { container-type: inline-size; position: relative; overflow: hidden; min-height: 104px; border: 1px solid rgba(129,140,248,.45); border-radius: 14px; background: linear-gradient(145deg, rgba(31,41,55,.98), rgba(49,46,129,.86)); color: #f9fafb; display: grid; place-items: stretch; font-weight: 900; box-shadow: 0 10px 24px rgba(0,0,0,.20); }
.samam-card-content { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(42px,.85fr) minmax(0,1.15fr); align-items: center; gap: 7px; width: 100%; height: 100%; padding: 10px 7px; line-height: 1.08; text-align: left; }
.samam-block::after { content: attr(data-bird-icon); position: absolute; right: -12px; bottom: -18px; font-size: clamp(62px, 12vw, 110px); line-height: 1; opacity: .13; z-index: 1; pointer-events: none; filter: grayscale(.15) drop-shadow(0 6px 16px rgba(0,0,0,.35)); }
.samam-block.active::after { opacity: .20; }
.samam-info { display: grid; gap: 4px; min-width: 0; }
.samam-block strong { font-size: 11px; }
.samam-block .samam-bird { display: grid; place-items: center; font-size: clamp(30px, 8vw, 58px); line-height: 1; filter: drop-shadow(0 3px 8px rgba(0,0,0,.35)); }
.samam-bird-img { width: clamp(48px, 8vw, 76px); height: clamp(58px, 9vw, 88px); object-fit: contain; object-position: center bottom; border-radius: 12px; filter: drop-shadow(0 8px 12px rgba(0,0,0,.38)); }
.samam-block .samam-bird-name { color: #fbbf24; font-size: 12px; font-weight: 1000; overflow-wrap: anywhere; }
.samam-block .samam-act { color: #f9fafb; font-size: 10px; font-weight: 900; overflow-wrap: anywhere; }
.samam-block .samam-time { justify-self: start; padding: 3px 6px; border-radius: 999px; background: rgba(2,6,23,.48); color: #bae6fd; font-size: 10px; font-weight: 1000; white-space: nowrap; }
.samam-block small { font-size: 9px; font-weight: 800; }
.samam-block i, .samam-block.filled::before { content: ''; position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #f59e0b, #f472b6); z-index: 1; }
.samam-block.filled::before { width: 100%; }
.samam-block.active { color: #111827; border-color: #fbbf24; box-shadow: 0 0 0 3px rgba(251, 191, 36, .28); }
.act-progress { width: 100%; margin-top: 12px; }
.act-title { color: #fbbf24; font-weight: 900; text-align: center; margin-bottom: 6px; }
.act-blocks { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; width: 100%; }
.act-block { position: relative; overflow: hidden; min-height: 34px; border: 1px solid #4b5563; border-radius: 7px; background: #374151; color: #f9fafb; display: grid; place-items: center; font-weight: 900; }
.act-block span { position: relative; z-index: 2; }
.act-block i, .act-block.filled::before { content: ''; position: absolute; inset: 0 auto 0 0; background: #f59e0b; z-index: 1; }
.act-block.filled::before { width: 100%; }
.act-block.active { color: #111827; border-color: #fbbf24; box-shadow: 0 0 0 3px rgba(251, 191, 36, .28); }
.act-block.adhikara-bird { border-left: 4px solid #fbbf24; }
.act-block.padu-bird { border-right: 4px solid #fb7185; }
.act-block.friend small:last-child { color: #bbf7d0; }
.act-block.enemy small:last-child { color: #fecdd3; }
.act-block.same small:last-child { color: #fde68a; }
.act-block.neutral small:last-child { color: #d1d5db; }
.act-block.active.friend small:last-child,
.act-block.active.enemy small:last-child,
.act-block.active.same small:last-child,
.act-block.active.neutral small:last-child { color: #111827; }
.act-detail-blocks .act-block { min-height: 74px; padding: 6px 3px; }
.act-detail-blocks .act-block span { display: grid; gap: 2px; line-height: 1.15; text-align: center; }
.act-detail-blocks .act-block strong { font-size: 12px; }
.act-detail-blocks .act-block small { font-size: 10px; font-weight: 800; }
.act-bubble-progress { width: 100%; margin-top: 12px; }
.bubble-title { color: #fbbf24; font-weight: 900; text-align: center; margin-bottom: 8px; }
.bubble-card-inner { position: relative; padding: 38px 8px 8px; border: 1px solid #4b5563; border-radius: 14px; background: #1f2937; }
.bubble-head { display: grid; place-items: center; margin-bottom: 8px; color: #fbbf24; font-weight: 900; text-align: center; }
.bubble-head b { color: #fbbf24; }
.bubble-adhikara, .bubble-padu { position: absolute; top: 8px; padding: 5px 8px; border-radius: 999px; font-size: 11px; font-weight: 1000; white-space: nowrap; }
.bubble-adhikara { left: 8px; background: rgba(34,197,94,.22); color: #bbf7d0; border: 1px solid rgba(34,197,94,.45); }
.bubble-padu { right: 8px; background: rgba(251,113,133,.22); color: #fecdd3; border: 1px solid rgba(251,113,133,.45); }
.bubble-track { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 58px; padding: 8px; border-radius: 14px; background: rgba(17,24,39,.72); }
.bubble-act-relations { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.bubble-act-relations > div { padding: 8px; border-radius: 12px; background: rgba(15,23,42,.62); text-align: center; }
.bubble-act-relations small { display: block; color: #d1d5db; font-size: 10px; font-weight: 1000; text-transform: uppercase; margin-bottom: 6px; }
.bubble-act-relations div div { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; }
.bubble-act-relations span { padding: 5px 7px; border-radius: 999px; font-size: 11px; font-weight: 1000; background: rgba(55,65,81,.8); }
.bubble-act-relations .friends span { color: #bbf7d0; border: 1px solid rgba(34,197,94,.5); }
.bubble-act-relations .enemies span { color: #fecdd3; border: 1px solid rgba(251,113,133,.5); }
.act-bubble { display: grid; place-items: center; border-radius: 999px; background: #374151; border: 1px solid #4b5563; color: #f9fafb; font-weight: 900; position: relative; z-index: 1; }
.act-bubble span { line-height: 1; filter: drop-shadow(0 1px 1px rgba(0,0,0,.45)); }
.act-bubble.filled { background: #f59e0b; color: #111827; border-color: #fbbf24; }
.act-bubble.active { background: #fbbf24; color: #111827; border-color: #fde68a; box-shadow: 0 0 0 4px rgba(251, 191, 36, .28); transform: scale(1.12); }
.act-bubble.b1 { width: 22px; height: 22px; font-size: 13px; }
.act-bubble.b2 { width: 28px; height: 28px; font-size: 16px; }
.act-bubble.b3 { width: 34px; height: 34px; font-size: 19px; }
.act-bubble.b4 { width: 42px; height: 42px; font-size: 24px; }
.act-bubble.b5 { width: 50px; height: 50px; font-size: 30px; }
.act-bubble.b6 { width: 46px; height: 46px; font-size: 27px; }
.act-bubble.b7 { width: 42px; height: 42px; font-size: 24px; }
.act-bubble.b8 { width: 38px; height: 38px; font-size: 21px; }
.act-bubble.b9 { width: 34px; height: 34px; font-size: 19px; }
.act-bubble.b10 { width: 30px; height: 30px; font-size: 17px; }
.act-bubble.b11 { width: 26px; height: 26px; font-size: 15px; }
.act-bubble.b12 { width: 22px; height: 22px; font-size: 13px; }
.predict-card { display: none; }
.predict-link, .score-link { display: block; color: inherit; text-decoration: none; }
.predict-title { padding: 8px 10px; background: #030712; color: #fbbf24; font-weight: 900; text-align: center; }
.predict-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; text-align: center; font-weight: 800; border-top: 1px solid #4b5563; }
.predict-row > div { display: grid; gap: 4px; padding: 10px 6px; background: rgba(17, 24, 39, .55); }
.predict-row small { color: #d1d5db; font-size: 10px; text-transform: uppercase; }
.predict-row small.relation-line { color: #fbbf24; font-size: 11px; text-transform: none; }
.predict-row strong { color: #f9fafb; font-size: 22px; line-height: 1.15; }
.predict-row.good { background: #22c55e; }
.predict-row.bad { background: #fb7185; }
.predict-row.neutral { background: #f59e0b; }
.score-card { margin-top: 12px; border: 1px solid #4b5563; border-radius: 14px; background: #1f2937; overflow: hidden; }
.score-title { padding: 8px 10px; background: #030712; color: #fbbf24; font-weight: 900; text-align: center; }
.score-meter { position: relative; height: 18px; margin: 10px 10px 4px; border-radius: 999px; overflow: hidden; background: linear-gradient(90deg, rgba(251,113,133,.25), #111827 48%, #111827 52%, rgba(34,197,94,.25)); border: 1px solid #4b5563; }
.score-meter span { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: #fbbf24; z-index: 2; }
.score-meter i { position: absolute; top: 0; bottom: 0; display: block; height: 100%; }
.score-meter.positive i { left: 50%; background: linear-gradient(90deg, #f59e0b, #22c55e); }
.score-meter.negative i { right: 50%; background: linear-gradient(90deg, #fb7185, #f59e0b); }
.score-scale { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; gap: 8px; padding: 0 12px 10px; color: #d1d5db; font-size: 11px; font-weight: 900; }
.score-scale span:first-child { text-align: left; color: #fecdd3; }
.score-scale b { text-align: center; color: #fbbf24; white-space: nowrap; }
.score-scale span:last-child { text-align: right; color: #bbf7d0; }
.score-explain { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: #4b5563; }
.score-explain .score-item { display: grid; grid-template-areas: 'label value' 'text text'; grid-template-columns: 1fr auto; align-items: center; gap: 6px 10px; padding: 12px; background: #111827; text-align: left; border-radius: 0; }
.score-explain b { grid-area: label; color: #fbbf24; font-size: 12px; }
.score-explain .score-value { grid-area: value; min-width: 48px; padding: 4px 8px; border-radius: 999px; text-align: center; font-size: 18px; font-weight: 1000; color: #111827; }
.score-value.plus { background: #22c55e; }
.score-value.minus { background: #fb7185; }
.score-value.zero { background: #fbbf24; }
.score-explain small { grid-area: text; color: #d1d5db; font-weight: 800; line-height: 1.25; display: block; }
@media (max-width: 520px) {
  .score-explain { grid-template-columns: 1fr; }
  .score-scale { font-size: 10px; gap: 4px; padding-left: 8px; padding-right: 8px; }
  .score-explain .score-item { grid-template-columns: 1fr minmax(52px, auto); }
  .paksha-tabs { padding-left: 4px; padding-right: 4px; }
  .weekday-tabs { gap: 2px; }
  .weekday-button { padding: 6px 1px; font-size: 9px; border-radius: 5px; }
}
.relation-card { margin-top: 12px; border: 1px solid rgba(251,191,36,.45); border-radius: 18px; background: linear-gradient(145deg,#111827,#1f2937); overflow: hidden; box-shadow: 0 14px 35px rgba(0,0,0,.28); }
.relation-link { display: block; color: inherit; text-decoration: none; }
.relation-title { padding: 10px 12px; background: #030712; color: #fbbf24; font-weight: 1000; text-align: center; letter-spacing: .02em; }
.relation-two-card { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px; overflow: hidden; }
.relation-two-card::before { content: attr(data-adhikara-icon); position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: clamp(120px, 32vw, 230px); line-height: 1; opacity: .16; z-index: 1; pointer-events: none; filter: grayscale(.06) drop-shadow(0 12px 28px rgba(0,0,0,.42)); }
.relation-two-card > * { position: relative; z-index: 2; }
.relation-panel { position: relative; border: 1px solid rgba(75,85,99,.85); border-radius: 16px; background: linear-gradient(145deg, rgba(3,7,18,.86), rgba(30,41,59,.70)); overflow: hidden; box-shadow: 0 12px 30px rgba(0,0,0,.22); }
.relation-panel::after { content: attr(data-bird-icon); position: absolute; right: -10px; bottom: -22px; font-size: clamp(74px, 18vw, 132px); line-height: 1; opacity: .22; z-index: 1; pointer-events: none; filter: grayscale(.08) drop-shadow(0 8px 18px rgba(0,0,0,.38)); }
.relation-panel > * { position: relative; z-index: 2; }
.relation-panel h3 { margin: 0; padding: 10px; display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; align-items: center; background: rgba(15,23,42,.92); }
.relation-panel h3 span { grid-row: span 2; font-size: 28px; line-height: 1; }
.relation-panel h3 b { color: #f8fafc; font-size: 13px; text-transform: uppercase; }
.relation-panel h3 small { color: #fbbf24; font-weight: 1000; }
.act-relation-panel { border-color: rgba(34,197,94,.55); }
.adhikara-relation-panel { border-color: rgba(251,191,36,.55); }
.relation-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: #4b5563; }
.relation-grid > div { padding: 12px 10px; text-align: center; display: grid; gap: 8px; min-height: 92px; align-content: start; }
.relation-grid small { font-size: 10px; text-transform: uppercase; font-weight: 1000; letter-spacing: .04em; }
.relation-grid div div { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.relation-grid span { padding: 7px 9px; border-radius: 999px; font-weight: 1000; background: rgba(15,23,42,.62); box-shadow: 0 4px 12px rgba(0,0,0,.18); }
.relation-grid .friends { background: linear-gradient(135deg, rgba(5,150,105,.18), rgba(34,197,94,.08)); border-right: 1px solid rgba(34,197,94,.22); }
.relation-grid .friends small::before { content: 'Positive · '; }
.relation-grid .friends small { color: #bbf7d0; }
.relation-grid .friends span { color: #052e16; background: linear-gradient(135deg, #bbf7d0, #22c55e); border: 1px solid rgba(187,247,208,.7); }
.relation-grid .enemies { background: linear-gradient(135deg, rgba(127,29,29,.22), rgba(251,113,133,.08)); }
.relation-grid .enemies small::before { content: 'Enemy · '; }
.relation-grid .enemies small { color: #fecdd3; }
.relation-grid .enemies span { color: #450a0a; background: linear-gradient(135deg, #fecdd3, #fb7185); border: 1px solid rgba(254,205,211,.7); }
.weekday-tabs { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; width: 100%; margin-top: 12px; }
.weekday-button { width: 100%; min-width: 0; padding: 8px 6px; height: auto; background: #374151; color: #f9fafb; border: 1px solid #4b5563; font-size: 12px; pointer-events: none; cursor: default; white-space: nowrap; overflow: hidden; text-overflow: clip; }
.weekday-button.active { background: #f59e0b; color: #111827; border-color: #fbbf24; box-shadow: 0 0 0 3px rgba(251, 191, 36, .28); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }
.container { max-width: 840px; margin: 0 auto; padding: 32px 16px; }
h1 { margin-bottom: 4px; }
.muted { color: #9ca3af; }
.card { background: #1f2937; border: 1px solid #374151; border-radius: 14px; padding: 20px; margin-top: 20px; }
.card-title-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.card-title-row h2 { margin: 0; }
.card-center-title { margin: 0 0 12px; text-align: center; color: #fbbf24; }
.small-toggle { padding: 5px 10px; height: auto; }
form { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; align-items: end; }
.front-footer { max-width: 840px; margin: 18px auto 132px; padding: 10px 16px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; color: #dbeafe; font-weight: 900; text-align: center; }
.front-footer b { color: #fde68a; padding: 5px 12px; border-radius: 999px; background: linear-gradient(135deg, rgba(30,64,175,.82), rgba(126,34,206,.72)); border: 1px solid rgba(251,191,36,.35); }
.front-footer small { flex-basis: 100%; color: #bae6fd; font-weight: 800; line-height: 1.4; }
.site-footer { max-width: 840px; margin: 20px auto 132px; padding: 16px; text-align: center; color: #cbd5e1; font-weight: 800; }
.site-footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 8px; }
.site-footer a { color: #fde68a; text-decoration: none; padding: 6px 10px; border-radius: 999px; background: linear-gradient(135deg, rgba(30,64,175,.48), rgba(126,34,206,.38)); border: 1px solid rgba(251,191,36,.22); }
.site-footer p { margin: 6px 0 0; color: #bae6fd; font-size: 12px; }
.raaga-page h1 { margin-top: 0; text-align: center; color: #fbbf24; }
.raaga-login { display: grid; gap: 12px; max-width: 360px; margin: 0 auto; }
.raaga-login input { width: 100%; height: 38px; }
.raaga-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.raaga-head small { display: block; color: #bae6fd; font-weight: 1000; text-transform: uppercase; }
.raaga-head strong { color: #fde68a; }
.raaga-help { padding: 10px; border-radius: 12px; background: rgba(15,23,42,.62); color: #e0f2fe; font-weight: 800; text-align: center; margin-bottom: 10px; }
.raaga-help code { color: #fde68a; }
#raaga-audio { width: 100%; margin: 8px 0 10px; }
.raaga-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.raaga-list { display: grid; gap: 8px; }
.raaga-track { width: 100%; min-height: 58px; padding: 10px; display: flex; justify-content: space-between; align-items: center; gap: 10px; text-align: left; border-radius: 14px; background: linear-gradient(135deg, rgba(30,64,175,.78), rgba(126,34,206,.62)); color: #f9fafb; border: 1px solid rgba(251,191,36,.25); }
.raaga-track span { display: grid; gap: 3px; min-width: 0; }
.raaga-track b { color: #fde68a; overflow-wrap: anywhere; }
.raaga-track small { color: #dbeafe; font-weight: 800; overflow-wrap: anywhere; }
.raaga-track em { color: #111827; background: #fbbf24; padding: 6px 9px; border-radius: 999px; font-style: normal; font-weight: 1000; white-space: nowrap; }
.raaga-page { border-color: rgba(255,255,255,.16); background: radial-gradient(circle at 18% 0%, rgba(255,255,255,.08), transparent 28%), linear-gradient(145deg, #020617, #0f172a 58%, #111827); box-shadow: 0 24px 60px rgba(0,0,0,.44); color: #fff; }
.raaga-head { padding: 12px; border-radius: 18px; background: linear-gradient(135deg, #020617, #111827); border: 1px solid rgba(255,255,255,.16); }
.raaga-head strong { display: block; font-size: clamp(26px, 7vw, 42px); line-height: 1; }
.raaga-head form { display: block; margin: 0; }
.raaga-head button { min-width: 88px; padding: 0 12px; }
.raaga-status { margin: 10px 0; padding: 9px 12px; border-radius: 999px; background: rgba(2,6,23,.40); border: 1px solid rgba(148,163,184,.20); text-align: center; font-weight: 900; }
.raaga-list.detailed { gap: 12px; }
.raaga-track-card { width: 100%; height: auto; min-height: 150px; padding: 0; display: grid; grid-template-columns: 82px minmax(0, 1fr) 68px; align-items: stretch; overflow: hidden; text-align: left; border-radius: 20px; background: linear-gradient(135deg, #030712, #111827 62%, #0f172a); color: #fff; border: 1px solid rgba(255,255,255,.14); box-shadow: 0 16px 38px rgba(0,0,0,.34); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.raaga-track-card:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.36); box-shadow: 0 20px 46px rgba(0,0,0,.46); background: linear-gradient(135deg, #020617, #1f2937 62%, #111827); }
.raaga-track-card.playing { border-color: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.18), 0 20px 46px rgba(0,0,0,.44); }
.raaga-art { display: grid; place-items: center; min-height: 100%; background: radial-gradient(circle, rgba(255,255,255,.10), rgba(2,6,23,.72)); color: #fff; font-size: 24px; font-weight: 1000; border-right: 1px solid rgba(255,255,255,.14); }
.raaga-card-body { display: grid; gap: 11px; min-width: 0; padding: 18px 16px; }
.raaga-card-top { display: flex; justify-content: space-between; gap: 10px; align-items: start; }
.raaga-card-top b { color: #fff; font-size: 17px; line-height: 1.18; overflow-wrap: anywhere; }
.raaga-card-top em { flex: none; color: #030712; background: #fff; padding: 4px 8px; border-radius: 999px; font-size: 10px; font-style: normal; font-weight: 1000; letter-spacing: .04em; }
.raaga-performer { color: #fff; font-weight: 900; overflow-wrap: anywhere; opacity: .86; }
.raaga-meta-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.raaga-meta-grid small { display: grid; gap: 2px; padding: 7px 6px; border-radius: 12px; background: rgba(255,255,255,.07); text-align: center; min-width: 0; border: 1px solid rgba(255,255,255,.08); }
.raaga-meta-grid b { color: #fff; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.raaga-meta-grid span { color: rgba(255,255,255,.68); font-size: 9px; font-weight: 1000; text-transform: uppercase; }
.raaga-file { color: #fff; font-size: 11px; font-weight: 800; overflow-wrap: anywhere; opacity: .72; }
.raaga-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.raaga-tags span { padding: 4px 7px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); color: #fff; font-size: 10px; font-weight: 1000; }
.raaga-play { display: grid; place-items: center; align-content: center; gap: 3px; min-height: 100%; background: #fff; color: #030712; border-left: 1px solid rgba(255,255,255,.20); }
.raaga-play strong { font-size: 20px; line-height: 1; }
.raaga-play small { font-size: 10px; font-weight: 1000; text-transform: uppercase; }
.raaga-track-card.playing .raaga-play { background: #e5e7eb; color: #030712; }
.raaga-track-card.playing .raaga-play small { font-size: 0; }
.raaga-track-card.playing .raaga-play small::after { content: 'Now'; font-size: 10px; }
@media (max-width: 620px) { .raaga-track-card { min-height: 170px; grid-template-columns: 62px minmax(0, 1fr); } .raaga-play { grid-column: 1 / -1; min-height: 48px; grid-template-columns: auto auto; } .raaga-meta-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .raaga-head, .raaga-actions { grid-template-columns: 1fr; display: grid; } .raaga-card-top { display: grid; } }
.lookup-panel { position: fixed; left: 50%; bottom: 8px; transform: translateX(-50%); width: min(760px, calc(100% - 16px)); z-index: 20; margin: 0; padding: 10px; box-shadow: 0 12px 36px rgba(0,0,0,.45); display: block; }
.lookup-toggle { width: 100%; font-size: 14px; padding: 6px 10px; }
#lookup-fields { display: none; margin-top: 8px; }
.lookup-panel.open #lookup-fields { display: block; }
.lookup-fields { display: none; grid-template-columns: min-content min-content min-content min-content min-content; gap: 6px; margin-top: 8px; align-items: end; justify-content: center; }
.lookup-panel.open .lookup-fields { display: grid; }
.lookup-place { grid-column: 1 / -1; width: 100%; }
label { display: grid; gap: 2px; font-weight: 600; font-size: 11px; }
input { box-sizing: border-box; height: 30px; padding: 3px 4px; border-radius: 6px; border: 1px solid #4b5563; background: #111827; color: #f9fafb; }
input[name="date"] { width: 8ch; }
input[name="time"] { width: 4ch; }
input[name="latitude"], input[name="longitude"] { width: 8ch; }
input[name="place"] { width: 100%; }
button { box-sizing: border-box; height: 30px; padding: 0; border: 0; border-radius: 7px; background: #f59e0b; color: #111827; font-weight: 800; cursor: pointer; }
#lookup-reset { width: 8ch; padding: 0; }
button:hover { background: #fbbf24; }
.warning { padding: 12px; border-radius: 8px; background: #7f1d1d; color: #fee2e2; margin: 12px 0; }
pre { overflow-x: auto; background: #030712; padding: 12px; border-radius: 8px; }
details { margin: 8px 0; }
summary { cursor: pointer; }
.dasa-current h2 { margin: 0 0 10px; color: #fbbf24; text-align: center; }
.dasa-current-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-bottom: 12px; }
.dasa-current-card, .dasa-star-card, .dasa-summary-card { border: 1px solid rgba(251,191,36,.35); border-radius: 16px; background: linear-gradient(135deg, rgba(30,64,175,.86), rgba(126,34,206,.72)); padding: 12px; box-shadow: 0 12px 30px rgba(0,0,0,.20); }
.dasa-current-card { display: grid; gap: 6px; text-align: center; }
.dasa-current-card small, .dasa-star-card small { color: #bae6fd; font-weight: 1000; text-transform: uppercase; }
.dasa-current-card strong, .dasa-star-card strong { color: #fde68a; font-size: 18px; }
.dasa-current-card em, .dasa-star-card span { color: #e5e7eb; font-style: normal; font-weight: 800; }
.dasa-current-card p { margin: 0; color: #dbeafe; font-size: 12px; font-weight: 800; }
.dasa-star-card { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; text-align: center; margin-bottom: 12px; }
.dasa-star-card .dasa-period-bar { grid-column: 1 / -1; }
.dasa-summary-card { margin-bottom: 12px; text-align: center; color: #fde68a; }
.dasa-tree-list { display: grid; gap: 16px; }
.dasa-main { position: relative; padding: 14px; border: 1px solid rgba(251,191,36,.44); border-left: 7px solid #fbbf24; border-radius: 20px; background: radial-gradient(circle at 0 0, rgba(251,191,36,.18), transparent 34%), linear-gradient(135deg, rgba(120,53,15,.72), rgba(30,64,175,.42)); box-shadow: 0 18px 44px rgba(0,0,0,.28); }
.dasa-main::before { content: 'MAHA'; position: absolute; right: 14px; top: 12px; color: rgba(253,230,138,.18); font-size: 40px; font-weight: 1000; letter-spacing: .08em; pointer-events: none; }
.dasa-tree-card { box-shadow: 0 10px 28px rgba(0,0,0,.18); }
.dasa-tree-card summary { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; cursor: pointer; }
.dasa-main > summary { min-height: 54px; padding: 10px 12px; border-radius: 15px; background: rgba(2,6,23,.34); color: #fff7ed; font-size: 18px; }
.dasa-tree-card summary em, .dasa-anthra-card em { color: #bae6fd; font-style: normal; font-size: 11px; font-weight: 1000; text-transform: uppercase; }
.dasa-main > summary em { color: #111827; background: #fbbf24; padding: 5px 9px; border-radius: 999px; }
.dasa-card-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 8px 0; }
.dasa-card-meta span { display: grid; gap: 2px; padding: 7px 8px; border-radius: 10px; background: rgba(15,23,42,.62); text-align: center; }
.dasa-card-meta small { color: #bae6fd; font-size: 10px; font-weight: 1000; text-transform: uppercase; }
.dasa-card-meta b { color: #f9fafb; font-size: 12px; }
.dasa-bhukti { position: relative; margin: 12px 0 0 28px; color: #d1d5db; padding: 11px; border: 1px solid rgba(34,211,238,.34); border-left: 6px solid #22d3ee; border-radius: 16px; background: linear-gradient(135deg, rgba(14,116,144,.36), rgba(15,23,42,.66)); }
.dasa-bhukti::before { content: ''; position: absolute; left: -24px; top: 24px; width: 18px; border-top: 2px solid rgba(34,211,238,.52); }
.dasa-bhukti > summary { padding: 8px 10px; border-radius: 12px; background: rgba(2,6,23,.38); }
.dasa-bhukti > summary em { color: #06202a; background: #67e8f9; padding: 4px 8px; border-radius: 999px; }
.dasa-anthra-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 9px; margin-top: 10px; padding-left: 10px; border-left: 2px dashed rgba(167,139,250,.32); }
.dasa-anthra-card { position: relative; display: grid; gap: 6px; padding: 10px; border: 1px solid rgba(167,139,250,.34); border-top: 4px solid #a78bfa; border-radius: 14px; background: linear-gradient(145deg, rgba(88,28,135,.28), rgba(17,24,39,.66)); }
.dasa-anthra-card::before { content: 'ANTHRA'; position: absolute; right: 8px; bottom: 6px; color: rgba(196,181,253,.12); font-size: 18px; font-weight: 1000; pointer-events: none; }
.dasa-anthra-card > div:first-child { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.dasa-anthra-card strong { color: #f5d0fe; }
.dasa-anthra-card em { color: #2e1065; background: #d8b4fe; padding: 3px 7px; border-radius: 999px; }
.dasa-period-bar { position: relative; height: 22px; border-radius: 999px; overflow: hidden; background: rgba(15,23,42,.75); border: 1px solid rgba(253,230,138,.25); margin: 6px 0; }
.dasa-period-bar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #22d3ee, #fbbf24, #f472b6); }
.dasa-period-bar span { position: relative; z-index: 2; display: grid; place-items: center; height: 100%; color: #fff; font-size: 11px; font-weight: 1000; text-shadow: 0 1px 2px #000; }
.active-dasa { border-color: #f59e0b; box-shadow: 0 0 0 3px rgba(251,191,36,.20), 0 16px 38px rgba(0,0,0,.28); }
.active-dasa > summary { color: #fbbf24; font-weight: 900; }
.dasa-current-card.level-1 { border-color: rgba(251,191,36,.55); background: linear-gradient(135deg, rgba(180,83,9,.80), rgba(30,64,175,.62)); }
.dasa-current-card.level-2 { border-color: rgba(34,211,238,.55); background: linear-gradient(135deg, rgba(14,116,144,.82), rgba(49,46,129,.66)); }
.dasa-current-card.level-3 { border-color: rgba(216,180,254,.55); background: linear-gradient(135deg, rgba(88,28,135,.82), rgba(219,39,119,.48)); }
.friend-villain-page h1 { margin-top: 0; text-align: center; color: #fbbf24; }
.fv-grid { display: grid; gap: 12px; margin-top: 14px; }
.fv-card { padding: 14px; border: 1px solid rgba(251,191,36,.35); border-radius: 14px; background: linear-gradient(135deg, rgba(31,41,55,.96), rgba(49,46,129,.78)); box-shadow: 0 12px 30px rgba(0,0,0,.22); }
.fv-card h2 { margin: 0 0 10px; color: #fde68a; }
.fv-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fv-cols div { display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; padding: 10px; border-radius: 12px; background: rgba(17,24,39,.65); }
.fv-cols b { flex-basis: 100%; color: #fbbf24; }
.fv-cols span { padding: 6px 9px; border-radius: 999px; background: #374151; font-weight: 900; }
.fv-card p { margin: 10px 0 0; color: #e5e7eb; font-weight: 700; line-height: 1.4; }
.prediction-page h1, .daynight-page h1, .samam-page h1, .act-page h1, .thithi-page h1, .info-page h1, .kyp-page h1 { margin-top: 0; text-align: center; color: #fbbf24; }
.kyp-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 12px; }
.kyp-form label:first-child { grid-column: 1 / -1; }
.kyp-form input { width: 100%; min-width: 0; }
.kyp-form input[name="date"] { width: 100%; min-width: 140px; }
.kyp-form input[name="time"] { width: 100%; min-width: 110px; }
.kyp-form button { min-height: 34px; }
.kyp-output { margin-top: 14px; }
.kyp-results { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.kyp-result-card { padding: 14px; border-radius: 16px; border: 1px solid rgba(253,230,138,.38); background: linear-gradient(135deg, rgba(30,64,175,.88), rgba(126,34,206,.74)); text-align: center; box-shadow: 0 14px 34px rgba(0,0,0,.22); }
.kyp-result-card small { color: #bae6fd; font-weight: 1000; text-transform: uppercase; }
.kyp-bird { margin: 8px 0 2px; color: #fde68a; font-size: clamp(32px, 10vw, 56px); font-weight: 1000; line-height: 1; }
.kyp-result-card strong { display: block; color: #f9fafb; font-size: 22px; }
.kyp-result-card p { color: #e0f2fe; font-weight: 900; }
.kyp-result-card em { color: #fde68a; font-style: normal; font-weight: 800; }
.kyp-note { text-align: center; }
@media (max-width: 620px) { .kyp-results { grid-template-columns: 1fr; } }
.thithi-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 7px; }
.thithi-list span { padding: 9px 10px; border-radius: 10px; background: rgba(17,24,39,.68); color: #f9fafb; font-weight: 900; }
.prediction-grid { display: grid; gap: 12px; margin-top: 14px; }
.prediction-rule-card { padding: 14px; border: 1px solid rgba(34,211,238,.35); border-radius: 14px; background: linear-gradient(135deg, rgba(31,41,55,.96), rgba(30,64,175,.72), rgba(126,34,206,.54)); box-shadow: 0 12px 30px rgba(0,0,0,.22); }
.prediction-rule-card h2 { margin: 0 0 10px; color: #fde68a; }
.prediction-rule-card p { color: #e5e7eb; font-weight: 700; line-height: 1.45; }
.rule-list { display: grid; gap: 7px; }
.rule-list span { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 9px 10px; border-radius: 10px; background: rgba(17,24,39,.68); }
.rule-list b { color: #f9fafb; }
.rule-list em { color: #fde68a; font-style: normal; font-weight: 900; text-align: right; }
@media (max-width: 520px) { .fv-cols { grid-template-columns: 1fr; } .rule-list span { grid-template-columns: 1fr; } .rule-list em { text-align: left; } }
.active-anthra { color: #fbbf24; font-weight: 800; border-radius: 6px; padding: 4px 6px; }
.rasi-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; margin-top: 10px; }
.rasi-info-grid div { padding: 10px; border-radius: 12px; background: linear-gradient(135deg, rgba(30,64,175,.72), rgba(126,34,206,.52)); border: 1px solid rgba(251,191,36,.25); text-align: center; }
.rasi-info-grid small { display: block; color: #bae6fd; font-weight: 1000; text-transform: uppercase; font-size: 10px; }
.rasi-info-grid b { color: #fde68a; }
.rasi-chart { display: grid; grid-template-columns: repeat(4, 1fr); aspect-ratio: 1 / 1; max-width: 680px; margin: 18px auto 0; padding: 8px; gap: 5px; border: 2px solid rgba(251,191,36,.65); border-radius: 22px; background: radial-gradient(circle at center, rgba(251,191,36,.16), transparent 38%), linear-gradient(135deg, rgba(2,6,23,.98), rgba(30,64,175,.55), rgba(88,28,135,.60)); box-shadow: 0 22px 56px rgba(0,0,0,.35); }
.rasi-cell { position: relative; overflow: hidden; border: 1px solid rgba(253,230,138,.42); padding: 8px; min-height: 96px; display: flex; flex-direction: column; justify-content: space-between; border-radius: 14px; background: linear-gradient(145deg, rgba(15,23,42,.88), rgba(49,46,129,.62)); box-shadow: inset 0 0 22px rgba(255,255,255,.035); }
.rasi-cell::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at top right, rgba(244,114,182,.18), transparent 42%); pointer-events: none; }
.rasi-empty { background: rgba(2,6,23,.42); border-color: rgba(148,163,184,.18); box-shadow: inset 0 0 40px rgba(251,191,36,.06); }
.rasi-empty::after { content: '☸'; color: rgba(251,191,36,.16); font-size: clamp(28px, 7vw, 62px); display: grid; place-items: center; height: 100%; }
.rasi-lagna-cell { border-color: #fde68a; box-shadow: 0 0 0 2px rgba(251,191,36,.25), 0 0 26px rgba(251,191,36,.22); }
.rasi-lagna-cell .rasi-sign::after { content: 'Lagna'; margin-left: 6px; padding: 2px 6px; border-radius: 999px; background: #fde68a; color: #111827; font-size: 9px; font-weight: 1000; }
.rasi-sign { position: relative; z-index: 2; color: #fde68a; font-weight: 1000; display: grid; gap: 1px; line-height: 1.05; }
.rasi-sign span { font-size: 18px; }
.rasi-sign small { color: #bae6fd; font-size: 10px; font-weight: 900; }
.rasi-planets { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 5px; align-items: end; }
.rasi-planets span { background: linear-gradient(135deg, rgba(251,191,36,.96), rgba(244,114,182,.86)); color: #111827; border-radius: 999px; padding: 4px 7px; font-weight: 1000; font-size: 12px; box-shadow: 0 3px 10px rgba(0,0,0,.24); }
.rasi-planets em { color: rgba(226,232,240,.35); font-style: normal; font-weight: 900; }
.rasi-meaning-section { margin-top: 18px; }
.rasi-meaning-section h2 { text-align: center; color: #fbbf24; margin: 0 0 12px; }
.rasi-table-wrap { overflow-x: auto; border-radius: 16px; border: 1px solid rgba(251,191,36,.28); background: linear-gradient(135deg, rgba(15,23,42,.94), rgba(30,64,175,.46)); box-shadow: 0 12px 28px rgba(0,0,0,.18); }
.rasi-nature-table { width: 100%; border-collapse: collapse; min-width: 860px; }
.rasi-nature-table th, .rasi-nature-table td { padding: 10px 12px; border-bottom: 1px solid rgba(148,163,184,.24); vertical-align: top; font-size: 13px; line-height: 1.35; }
.rasi-nature-table thead th { position: sticky; top: 0; background: linear-gradient(135deg, rgba(30,64,175,.98), rgba(126,34,206,.94)); color: #fde68a; text-transform: uppercase; font-size: 11px; letter-spacing: .04em; z-index: 1; }
.rasi-nature-table tbody th { color: #fde68a; white-space: nowrap; font-size: 15px; text-align: left; }
.rasi-nature-table td { color: #e5e7eb; font-weight: 750; }
.rasi-nature-table tr:nth-child(even) { background: rgba(255,255,255,.035); }
.rasi-nature-table tr:hover { background: rgba(251,191,36,.10); }
.panchangam-form { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.panchangam-container { padding-top: 18px; }
.panchangam-hero { display: grid; gap: 6px; padding: 18px; border: 1px solid rgba(251,191,36,.35); border-radius: 20px; background: linear-gradient(135deg, rgba(30,64,175,.92), rgba(126,34,206,.82), rgba(219,39,119,.55)); box-shadow: 0 18px 44px rgba(0,0,0,.28); text-align: center; }
.panchangam-hero h1 { margin: 0; color: #fde68a; font-size: clamp(30px, 9vw, 54px); line-height: 1; text-shadow: 0 2px 18px rgba(251,191,36,.22); }
.panchangam-hero p { margin: 4px 0 0; color: #f9fafb; font-weight: 1000; letter-spacing: .08em; text-transform: uppercase; }
.panchangam-hero small { color: #e0f2fe; font-weight: 900; }
.panchangam-output { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.panchangam-card { border: 1px solid rgba(129,140,248,.42); border-radius: 18px; background: linear-gradient(145deg, rgba(31,41,55,.97), rgba(49,46,129,.82)); padding: 13px; overflow: hidden; box-shadow: 0 14px 34px rgba(0,0,0,.22); }
.panchangam-card:nth-child(1) { background: linear-gradient(145deg, rgba(30,64,175,.92), rgba(6,95,70,.78)); }
.panchangam-card:nth-child(2) { background: linear-gradient(145deg, rgba(88,28,135,.92), rgba(14,116,144,.72)); }
.panchangam-card:nth-child(3) { background: linear-gradient(145deg, rgba(126,34,206,.88), rgba(234,88,12,.58)); }
.panchangam-card:nth-child(4) { background: linear-gradient(145deg, rgba(6,95,70,.88), rgba(37,99,235,.68)); }
.panchangam-card:nth-child(5) { grid-column: 1 / -1; background: linear-gradient(135deg, rgba(30,64,175,.88), rgba(126,34,206,.75), rgba(219,39,119,.58)); }
.panchangam-card-link { display: block; color: inherit; text-decoration: none; }
.panchangam-card-title { color: #fde68a; font-weight: 1000; text-align: center; margin-bottom: 7px; display: flex; align-items: center; justify-content: center; gap: 7px; text-transform: uppercase; font-size: 12px; letter-spacing: .06em; }
.panchangam-card-title span { font-size: 20px; line-height: 1; }
.panchangam-card-value { font-size: clamp(20px, 5.5vw, 30px); color: #fff7ed; font-weight: 1000; text-align: center; line-height: 1.15; text-shadow: 0 2px 16px rgba(0,0,0,.22); }
.panchangam-card-sub { color: #dbeafe; text-align: center; font-weight: 800; margin: 5px 0 11px; }
.panchangam-bar { position: relative; height: 24px; border: 1px solid rgba(253,230,138,.32); border-radius: 999px; overflow: hidden; background: rgba(17,24,39,.75); }
.panchangam-bar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #22d3ee, #fbbf24, #f472b6); }
.panchangam-bar span { position: relative; z-index: 2; display: grid; place-items: center; height: 100%; color: #f9fafb; font-weight: 1000; text-shadow: 0 1px 3px #000; }
.panchangam-blocks { display: grid; gap: 4px; margin-top: 11px; }
.panchangam-blocks.n12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.panchangam-blocks.n27, .panchangam-blocks.n30 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
.panchangam-blocks.n10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
.panchangam-block { position: relative; overflow: hidden; min-height: 26px; border: 1px solid rgba(226,232,240,.22); border-radius: 999px; background: rgba(15,23,42,.62); display: grid; place-items: center; font-size: 10px; font-weight: 1000; }
.panchangam-block span { position: relative; z-index: 2; }
.panchangam-block i, .panchangam-block.filled::before { content: ''; position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #f59e0b, #f472b6); z-index: 1; }
.panchangam-block.filled::before { width: 100%; }
.panchangam-block.active { color: #111827; border-color: #fde68a; box-shadow: 0 0 0 2px rgba(251, 191, 36, .28); }
.thithi-visual { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px auto 0; max-width: 760px; justify-content: center; align-items: start; }
.thithi-section { padding: 10px; border-radius: 14px; background: rgba(15,23,42,.48); border: 1px solid rgba(253,230,138,.22); text-align: center; }
.thithi-section.current { border-color: rgba(253,230,138,.55); box-shadow: 0 0 0 2px rgba(251,191,36,.16); }
.thithi-section-title { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 8px; color: #fde68a; font-weight: 1000; }
.thithi-section-title small { color: #e0f2fe; font-weight: 900; }
.thithi-moons { display: grid; grid-template-columns: repeat(5, minmax(32px, 44px)); gap: 5px; justify-content: center; }
.thithi-moon { position: relative; overflow: hidden; aspect-ratio: 1 / 1; min-width: 0; border-radius: 999px; border: 1px solid rgba(226,232,240,.22); background: rgba(2,6,23,.58); display: grid; place-items: center; }
.thithi-current-name { position: relative; overflow: hidden; display: flex; justify-content: space-between; gap: 8px; margin: 0 0 9px; padding: 7px 10px; border-radius: 999px; background: rgba(2,6,23,.62); border: 1px solid rgba(253,230,138,.25); color: #f9fafb; font-weight: 1000; }
.thithi-current-name span, .thithi-current-name b { position: relative; z-index: 2; }
.thithi-current-name b { color: #fde68a; }
.thithi-current-name i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, rgba(34,211,238,.45), rgba(251,191,36,.38), rgba(244,114,182,.35)); z-index: 1; }
.thithi-moon span { position: relative; z-index: 2; grid-area: 1 / 1; }
.thithi-moon span { font-size: clamp(17px, 4vw, 25px); line-height: 1; }
.thithi-moon i, .thithi-moon.filled::before { content: ''; position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, rgba(34,211,238,.55), rgba(251,191,36,.50)); z-index: 1; }
.thithi-moon.filled::before { width: 100%; }
.thithi-moon.active { border-color: #fde68a; box-shadow: 0 0 0 2px rgba(251,191,36,.35), 0 0 22px rgba(251,191,36,.22); transform: scale(1.08); }
.karanam-join { max-width: 420px; margin: 0 auto 10px; padding: 9px; border-radius: 14px; background: rgba(2,6,23,.45); border: 1px solid rgba(34,211,238,.28); text-align: center; }
.karanam-join-title { display: grid; justify-content: center; gap: 2px; color: #67e8f9; font-weight: 1000; margin-bottom: 7px; }
.karanam-join-title small { color: #dbeafe; font-weight: 900; }
.karanam-halves { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.karanam-half, .karanam-current { position: relative; overflow: hidden; border-radius: 14px; background: rgba(15,23,42,.72); border: 1px solid rgba(226,232,240,.20); min-height: 42px; display: grid; place-items: center; font-weight: 1000; }
.karanam-half span, .karanam-half b, .karanam-half small, .karanam-current span, .karanam-current b { position: relative; z-index: 2; }
.karanam-half span { display: grid; gap: 2px; line-height: 1.05; }
.karanam-half small { color: #dbeafe; font-size: 10px; font-weight: 900; }
.karanam-half i, .karanam-half.done::before, .karanam-current i { content: ''; position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, rgba(34,211,238,.55), rgba(251,191,36,.45)); z-index: 1; }
.karanam-half.done::before { width: 100%; }
.karanam-half.active { border-color: #67e8f9; box-shadow: 0 0 0 2px rgba(34,211,238,.18); }
.karanam-half.current { color: #111827; background: #fde68a; border-color: #fde68a; box-shadow: 0 0 0 3px rgba(251,191,36,.28), 0 0 24px rgba(34,211,238,.22); }
.karanam-half.current small { color: #1e3a8a; }
.karanam-current { grid-template-columns: 1fr auto; justify-items: stretch; padding: 0 10px; margin-top: 7px; color: #f9fafb; border-radius: 999px; }
.karanam-current b { color: #fde68a; }
@media (max-width: 520px) { .thithi-visual { grid-template-columns: 1fr; } }
.hora-output { display: grid; gap: 14px; }
.hora-current { text-align: center; }
.hora-current small, .hora-summary small, .hora-num small, .hora-planet small, .hora-time small, .hora-detail small { color: #d1d5db; font-weight: 800; }
.hora-current-planet { color: #fbbf24; font-size: clamp(28px, 8vw, 48px); font-weight: 1000; line-height: 1.1; margin: 8px 0; }
.hora-times { color: #f9fafb; font-weight: 900; margin-bottom: 8px; }
.hora-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 1px; padding: 0; overflow: hidden; }
.hora-summary > div { display: grid; gap: 5px; padding: 12px; background: #111827; text-align: center; }
.hora-summary b { color: #fbbf24; }
.hora-rows { display: grid; gap: 8px; }
.hora-row { display: grid; grid-template-columns: 72px 130px 120px 1fr; gap: 10px; align-items: center; padding: 10px; border: 1px solid #4b5563; border-radius: 12px; background: #111827; }
.hora-row.on { background: #fbbf24; color: #111827; border-color: #fde68a; box-shadow: 0 0 0 3px rgba(251,191,36,.28); }
.hora-row.on small, .hora-row.on b { color: #111827; }
.hora-num, .hora-planet, .hora-time, .hora-detail { display: grid; gap: 3px; }
.hora-num { color: #fbbf24; font-weight: 1000; text-align: center; }
.hora-planet { font-size: 18px; }
.hora-planet b { color: #fbbf24; }
.hora-detail { line-height: 1.25; }
@media (max-width: 620px) {
  .hora-row { grid-template-columns: 54px 1fr; gap: 6px; }
  .hora-time, .hora-detail { grid-column: 2; }
  .hora-row { padding: 8px; }
  .hora-planet { font-size: 16px; }
}
@container (max-width: 115px) { .samam-card-content { grid-template-columns: 1fr; align-content: center; justify-items: center; gap: 4px; padding: 7px 3px; text-align: center; } .samam-info { justify-items: center; gap: 2px; } .samam-block .samam-bird { font-size: clamp(24px, 55cqw, 40px); } .samam-bird-img { width: 44px; height: 54px; } .samam-block .samam-bird-name { font-size: 10px; } .samam-block .samam-act { font-size: 9px; } .samam-block .samam-time { justify-self: center; font-size: 9px; padding: 2px 5px; } }
@container (min-width: 170px) { .samam-card-content { grid-template-columns: 84px 1fr; padding: 12px; } .samam-block .samam-bird { font-size: 60px; } .samam-bird-img { width: 78px; height: 94px; } .samam-block .samam-bird-name { font-size: 14px; } .samam-block .samam-act, .samam-block .samam-time { font-size: 12px; } }
@media (max-width: 520px) { .samam-block { min-height: 96px; } .rasi-cell { min-height: 68px; padding: 5px; } .rasi-planets span { font-size: 11px; padding: 3px 5px; } .weekday-tabs { grid-template-columns: repeat(7, minmax(0, 1fr)); } .tithi-blocks { grid-template-columns: repeat(15, minmax(0, 1fr)); gap: 2px; } .act-blocks { grid-template-columns: 1fr; } .bubble-card-inner { padding-top: 64px; } .bubble-adhikara, .bubble-padu { top: 8px; font-size: 10px; max-width: calc(50% - 12px); overflow: hidden; text-overflow: ellipsis; } .bubble-head { margin-top: -22px; } .bubble-track { gap: 3px; overflow-x: auto; justify-content: flex-start; } .bubble-act-relations { grid-template-columns: 1fr; } .predict-row { grid-template-columns: 1fr; } .relation-two-card { grid-template-columns: 1fr; } .relation-grid { grid-template-columns: 1fr; } .panchangam-output { grid-template-columns: 1fr; } .panchangam-card:nth-child(5) { grid-column: auto; } .panchangam-blocks.n12, .panchangam-blocks.n27, .panchangam-blocks.n30 { grid-template-columns: repeat(5, 1fr); } }
.lab-controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.lab-card h2 { margin: 14px 0 8px; color: #fbbf24; }
.lab-buttons { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.lab-buttons.parts { grid-template-columns: repeat(6, 1fr); }
.lab-buttons button.active { background: #22c55e; color: #052e16; box-shadow: 0 0 0 3px rgba(34,197,94,.25); }
.lab-result h2 { margin-top: 0; color: #fbbf24; }
.lab-time { font-size: clamp(28px, 8vw, 48px); color: #fbbf24; font-weight: 1000; text-align: center; margin: 10px 0; }
@media (max-width: 520px) { .lab-buttons.parts { grid-template-columns: repeat(4, 1fr); } }
.img-hero { text-align: center; background: radial-gradient(circle at 50% 0%, rgba(253,230,138,.18), transparent 36%), linear-gradient(135deg, rgba(15,23,42,.96), rgba(88,28,135,.72), rgba(219,39,119,.42)); border-color: rgba(253,230,138,.32); }
.img-hero small { color: #fde68a; font-weight: 1000; text-transform: uppercase; }
.img-hero h1 { margin: 4px 0; color: #fff7ed; font-size: clamp(32px, 9vw, 58px); line-height: 1; }
.patchi-image-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.patchi-svg-card { overflow: hidden; border-radius: 26px; border: 1px solid rgba(253,230,138,.34); background: #020617; box-shadow: 0 24px 58px rgba(0,0,0,.42), inset 0 0 0 1px rgba(255,255,255,.05); }
.patchi-svg-card .svg-wrap { padding: 10px; background: radial-gradient(circle at 50% 25%, rgba(253,230,138,.18), transparent 36%), linear-gradient(145deg, rgba(30,64,175,.70), rgba(126,34,206,.48)); }
.patchi-svg-card svg { width: 100%; height: auto; display: block; border-radius: 20px; }
.patchi-svg-card.eat .svg-wrap { background: linear-gradient(145deg, rgba(6,95,70,.88), rgba(30,64,175,.52)); }
.patchi-svg-card.walk .svg-wrap { background: linear-gradient(145deg, rgba(14,116,144,.88), rgba(49,46,129,.60)); }
.patchi-svg-card.rule .svg-wrap { background: radial-gradient(circle at 50% 15%, rgba(253,230,138,.32), transparent 28%), linear-gradient(145deg, rgba(180,83,9,.88), rgba(126,34,206,.62)); }
.patchi-svg-card.sleep .svg-wrap { background: radial-gradient(circle at 30% 20%, rgba(147,197,253,.18), transparent 30%), linear-gradient(145deg, rgba(15,23,42,.96), rgba(49,46,129,.76)); }
.patchi-svg-card.death .svg-wrap { background: radial-gradient(circle at 50% 20%, rgba(251,113,133,.24), transparent 30%), linear-gradient(145deg, rgba(127,29,29,.90), rgba(31,41,55,.78)); }
.patchi-art { position: relative; overflow: hidden; min-height: 245px; border-radius: 26px; border: 1px solid rgba(253,230,138,.34); background: #020617; box-shadow: 0 24px 58px rgba(0,0,0,.42), inset 0 0 0 1px rgba(255,255,255,.05); isolation: isolate; }
.patchi-art::after { content: ''; position: absolute; inset: -2px; z-index: 0; background: radial-gradient(circle at 18% 12%, rgba(255,255,255,.22), transparent 20%), radial-gradient(circle at 82% 18%, rgba(253,230,138,.24), transparent 22%), radial-gradient(circle at 50% 100%, rgba(244,114,182,.26), transparent 38%); pointer-events: none; }
.art-sky { position: relative; z-index: 2; height: 182px; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 44%, rgba(255,255,255,.20), transparent 24%), linear-gradient(145deg, rgba(30,64,175,.65), rgba(126,34,206,.50)); }
.art-sky::after { content: ''; position: absolute; width: 170px; height: 170px; border-radius: 999px; background: conic-gradient(from 90deg, rgba(253,230,138,.28), rgba(34,211,238,.16), rgba(244,114,182,.22), rgba(253,230,138,.28)); filter: blur(8px); opacity: .7; }
.front-bird { --body:#6b7280; --face:#f8fafc; --accent:#111827; --beak:#f59e0b; position: relative; z-index: 3; width: 112px; height: 124px; border-radius: 52% 52% 46% 46%; background: radial-gradient(circle at 50% 34%, var(--face) 0 34%, transparent 35%), linear-gradient(145deg, color-mix(in srgb, var(--body), #fff 18%), var(--body)); box-shadow: inset 0 -18px 28px rgba(0,0,0,.16), 0 18px 28px rgba(0,0,0,.42); }
.bird-emoji { position:absolute; z-index:20; left:50%; top:48%; transform:translate(-50%,-50%); font-size:88px; line-height:1; filter:drop-shadow(0 14px 18px rgba(0,0,0,.55)); }
.front-bird::before { content:''; position:absolute; inset:10px 14px 34px; border-radius:50%; background: radial-gradient(circle at 32% 42%, var(--face) 0 25%, transparent 26%), radial-gradient(circle at 68% 42%, var(--face) 0 25%, transparent 26%); opacity:.95; }
.front-bird::after { content:''; position:absolute; left:50%; bottom:-12px; transform:translateX(-50%); width:78px; height:24px; border-radius:50%; background:rgba(0,0,0,.22); filter:blur(6px); }
.front-bird .eye { position:absolute; top:42px; width:26px; height:26px; border-radius:999px; background:#fff; z-index:4; box-shadow:0 0 0 3px rgba(0,0,0,.08); }
.front-bird .eye.left { left:27px; } .front-bird .eye.right { right:27px; }
.front-bird .eye i { position:absolute; inset:7px; border-radius:999px; background:#020617; box-shadow: inset 2px 2px 0 rgba(255,255,255,.45); }
.front-bird .brow { position:absolute; top:32px; width:28px; height:8px; border-radius:999px; background:rgba(2,6,23,.38); z-index:5; }
.front-bird .brow.left { left:24px; transform:rotate(12deg); } .front-bird .brow.right { right:24px; transform:rotate(-12deg); }
.front-bird .beak { position:absolute; z-index:5; left:50%; top:68px; transform:translateX(-50%); width:0; height:0; border-left:12px solid transparent; border-right:12px solid transparent; border-top:22px solid var(--beak); filter:drop-shadow(0 3px 2px rgba(0,0,0,.2)); }
.front-bird .wing { position:absolute; top:62px; width:30px; height:48px; border-radius:60% 40% 70% 40%; background:color-mix(in srgb, var(--body), #000 16%); z-index:2; opacity:.9; }
.front-bird .wing.left { left:-10px; transform:rotate(18deg); } .front-bird .wing.right { right:-10px; transform:scaleX(-1) rotate(18deg); }
.front-bird .plume, .front-bird .crest { position:absolute; z-index:6; display:none; }
.front-bird.vulture { --body:#5b4636; --face:#f1e0c5; --beak:#d97706; }
.front-bird.vulture .brow { height:10px; background:#4a2f22; }
.front-bird.owl { --body:#7c4a22; --face:#fff7ed; --beak:#f59e0b; border-radius:42% 42% 48% 48%; }
.front-bird.owl .crest { display:block; inset:-10px 8px auto; height:36px; background:linear-gradient(135deg, transparent 0 34%, var(--body) 35% 62%, transparent 63%), linear-gradient(-135deg, transparent 0 34%, var(--body) 35% 62%, transparent 63%); }
.front-bird.crow { --body:#111827; --face:#374151; --beak:#1f2937; }
.front-bird.crow .eye { background:#e5e7eb; }
.front-bird.cock { --body:#b91c1c; --face:#fee2e2; --beak:#facc15; }
.front-bird.cock .crest { display:block; left:36px; top:-24px; width:42px; height:34px; background:#ef4444; border-radius:50% 50% 45% 45%; box-shadow:-16px 8px 0 #dc2626, 16px 8px 0 #dc2626; }
.front-bird.peacock { --body:#0f766e; --face:#d1fae5; --beak:#f59e0b; }
.front-bird.peacock .plume { display:block; left:50%; top:-38px; width:110px; height:58px; transform:translateX(-50%); border-radius:999px 999px 0 0; background:radial-gradient(circle at 18% 45%, #22c55e 0 8%, transparent 9%), radial-gradient(circle at 38% 20%, #38bdf8 0 8%, transparent 9%), radial-gradient(circle at 62% 20%, #a78bfa 0 8%, transparent 9%), radial-gradient(circle at 82% 45%, #22c55e 0 8%, transparent 9%); opacity:.95; }
.front-bird .crown,.front-bird .sleep-moon,.front-bird .sleep-z,.front-bird .death-smoke,.front-bird .death-skull,.front-bird .bowl,.front-bird .feet { display:none; position:absolute; z-index:8; }
.front-bird.eat .bowl { display:block; left:50%; bottom:-6px; transform:translateX(-50%); font-size:34px; filter:drop-shadow(0 6px 8px rgba(0,0,0,.45)); }
.front-bird.walk .feet { display:flex; left:50%; bottom:-6px; transform:translateX(-50%); gap:16px; }
.front-bird.walk .feet i { display:block; width:22px; height:11px; border-radius:999px; background:#f59e0b; box-shadow:0 4px 0 rgba(0,0,0,.18); }
.front-bird.rule .crown { display:block; left:50%; top:-30px; transform:translateX(-50%) rotate(-7deg); font-size:46px; filter:drop-shadow(0 7px 8px rgba(0,0,0,.55)); }
.front-bird.sleep .sleep-moon { display:block; right:-10px; top:4px; color:#bfdbfe; font-size:34px; filter:drop-shadow(0 0 10px rgba(191,219,254,.55)); }
.front-bird.sleep .sleep-z { display:block; right:4px; top:36px; color:#fff; font-weight:1000; font-size:22px; }
.front-bird.sleep .eye i { height:4px; inset:11px 5px; border-radius:999px; }
.front-bird.death { filter:grayscale(.45); }
.front-bird.death .death-smoke { display:block; inset:-14px -18px; border-radius:50%; background:radial-gradient(circle, rgba(239,68,68,.22), transparent 62%); animation:none; }
.front-bird.death .death-skull { display:block; right:-10px; bottom:8px; font-size:30px; color:#fecdd3; filter:drop-shadow(0 6px 8px rgba(0,0,0,.45)); }
.patchi-art.eat { border-color: rgba(52,211,153,.42); } .patchi-art.walk { border-color: rgba(34,211,238,.42); } .patchi-art.rule { border-color: rgba(253,230,138,.58); } .patchi-art.sleep { border-color: rgba(129,140,248,.46); } .patchi-art.death { border-color: rgba(251,113,133,.48); }
.patchi-art.eat .art-sky { background:linear-gradient(145deg, rgba(6,95,70,.88), rgba(30,64,175,.52)); } .patchi-art.walk .art-sky { background:linear-gradient(145deg, rgba(14,116,144,.88), rgba(49,46,129,.60)); } .patchi-art.rule .art-sky { background:radial-gradient(circle at 50% 15%, rgba(253,230,138,.32), transparent 28%), linear-gradient(145deg, rgba(180,83,9,.88), rgba(126,34,206,.62)); } .patchi-art.sleep .art-sky { background:radial-gradient(circle at 30% 20%, rgba(147,197,253,.18), transparent 30%), linear-gradient(145deg, rgba(15,23,42,.96), rgba(49,46,129,.76)); } .patchi-art.death .art-sky { background:radial-gradient(circle at 50% 20%, rgba(251,113,133,.24), transparent 30%), linear-gradient(145deg, rgba(127,29,29,.90), rgba(31,41,55,.78)); }
.art-caption { position:relative; z-index:3; display:grid; gap:5px; padding:14px 10px 16px; text-align:center; background:linear-gradient(180deg, rgba(2,6,23,.50), rgba(2,6,23,.96)); }
.art-caption b { color:#fde68a; font-size:clamp(14px,1.5vw,18px); line-height:1; } .art-caption strong { color:#fff; font-size:clamp(12px,1.2vw,15px); line-height:1.15; }
@media (max-width: 900px) { .patchi-image-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .patchi-image-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap:10px; } .patchi-art { min-height:220px; border-radius:20px; } .art-sky { height:158px; } .front-bird { transform:scale(.86); } }
.good-time-hero { text-align: center; background: radial-gradient(circle at 50% 0%, rgba(253,230,138,.24), transparent 35%), linear-gradient(135deg, rgba(15,23,42,.96), rgba(22,163,74,.56), rgba(126,34,206,.52)); border-color: rgba(253,230,138,.32); }
.good-time-hero small { color:#fde68a; font-weight:1000; text-transform:uppercase; }
.good-time-hero h1 { margin:4px 0; color:#fff; font-size:clamp(34px,10vw,64px); line-height:1; }
.good-patchi-select { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; }
.good-patchi-select button,.good-controls button,.atcharam-filter button,.period-filter button,.element-filter button { min-height:48px; padding:10px; border-radius:16px; background:linear-gradient(135deg,rgba(30,64,175,.72),rgba(126,34,206,.52)); color:#fff; border:1px solid rgba(253,230,138,.24); font-weight:1000; }
.good-patchi-select button { display:grid; gap:5px; place-items:center; height:auto; font-size:30px; }
.good-patchi-select b { font-size:13px; }
.good-patchi-select button.active,.good-controls button.active,.atcharam-filter button.active,.period-filter button.active,.element-filter button.active { background:linear-gradient(135deg,#fbbf24,#22c55e); color:#111827; border-color:#fde68a; box-shadow:0 0 0 3px rgba(251,191,36,.22); }
.good-controls,.atcharam-filter,.period-filter,.element-filter { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; align-items:center; margin-top:10px; }
.period-filter,.element-filter { padding:10px; border-radius:18px; background:rgba(2,6,23,.24); border:1px solid rgba(186,230,253,.14); }
.period-filter button { min-width:118px; background:linear-gradient(135deg,rgba(14,116,144,.78),rgba(30,64,175,.62)); }
.period-filter button[data-period="day"] { background:linear-gradient(135deg,rgba(245,158,11,.88),rgba(22,163,74,.58)); }
.period-filter button[data-period="night"] { background:linear-gradient(135deg,rgba(49,46,129,.88),rgba(14,165,233,.50)); }
.period-filter button.active,.element-filter button.active { transform:translateY(-1px); }
.element-filter button[data-element="Fire"] { background:linear-gradient(135deg,rgba(220,38,38,.88),rgba(245,158,11,.66)); }
.element-filter button[data-element="Water"] { background:linear-gradient(135deg,rgba(14,165,233,.88),rgba(30,64,175,.66)); }
.element-filter button[data-element="Air"] { background:linear-gradient(135deg,rgba(20,184,166,.78),rgba(186,230,253,.35)); }
.element-filter button[data-element="Earth"] { background:linear-gradient(135deg,rgba(120,53,15,.88),rgba(34,197,94,.50)); }
.element-filter button[data-element="Space"] { background:linear-gradient(135deg,rgba(88,28,135,.88),rgba(236,72,153,.45)); }
.atcharam-note { padding:8px 10px; border-radius:999px; background:rgba(127,29,29,.35); color:#fecdd3; font-weight:900; border:1px solid rgba(251,113,133,.25); }
.good-results { display:grid; gap:12px; margin-top:14px; }
.good-time-result { display:grid; gap:10px; padding:14px; border-radius:18px; border:1px solid rgba(34,197,94,.38); background:linear-gradient(135deg,rgba(6,95,70,.58),rgba(30,64,175,.36)); box-shadow:0 16px 38px rgba(0,0,0,.24); }
.good-time-result.level-1 { border-color:rgba(253,230,138,.62); background:linear-gradient(135deg,rgba(180,83,9,.70),rgba(6,95,70,.50),rgba(30,64,175,.38)); }
.good-time-result small { color:#bbf7d0; font-weight:1000; text-transform:uppercase; }
.good-time-result h3 { margin:4px 0; color:#fde68a; font-size:clamp(20px,5vw,30px); }
.good-time-result p { margin:0; color:#fff; font-weight:900; }
.good-meta { display:flex; flex-wrap:wrap; gap:6px; }
.good-meta span { padding:6px 9px; border-radius:999px; background:rgba(2,6,23,.42); color:#e0f2fe; font-weight:900; }
.good-meta b { color:#fde68a; }
.good-time-result ul { margin:0; padding-left:20px; color:#d1fae5; font-weight:850; }
.telegram-hero { text-align: center; background: radial-gradient(circle at 50% 0%, rgba(34,158,217,.24), transparent 35%), linear-gradient(135deg, rgba(15,23,42,.96), rgba(37,99,235,.70), rgba(126,34,206,.52)); border-color: rgba(186,230,253,.32); }
.telegram-hero small { color: #bae6fd; font-weight: 1000; text-transform: uppercase; }
.telegram-hero h1 { margin: 4px 0; color: #fff; font-size: clamp(32px, 9vw, 58px); line-height: 1; }
.telegram-expect { max-width: 760px; margin: 10px auto 0; padding: 10px 12px; border-radius: 14px; background: rgba(2,6,23,.38); color: #e0f2fe; font-weight: 850; line-height: 1.45; border: 1px solid rgba(186,230,253,.18); }
.telegram-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.telegram-form label:nth-child(2) { grid-column: span 2; }
.telegram-form input { width: 100%; }
.telegram-form button, #subscribe-btn, .telegram-open-btn { min-height: 38px; padding: 8px 12px; border-radius: 999px; display: inline-grid; place-items: center; background: #229ed9; color: #fff; font-weight: 1000; text-decoration: none; }
.telegram-preview-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.telegram-preview-grid div { display: grid; gap: 5px; padding: 12px; border-radius: 14px; background: linear-gradient(135deg, rgba(30,64,175,.72), rgba(126,34,206,.48)); text-align: center; border: 1px solid rgba(186,230,253,.24); }
.telegram-preview-grid small { color: #bae6fd; font-weight: 1000; text-transform: uppercase; }
.telegram-preview-grid b { color: #fde68a; font-size: 18px; }
.telegram-preview-grid span, .telegram-sample { color: #e0f2fe; font-weight: 850; }
.telegram-time-box { margin-top: 12px; padding: 12px; border-radius: 16px; background: linear-gradient(135deg, rgba(2,6,23,.48), rgba(14,116,144,.22)); border: 1px solid rgba(34,211,238,.25); }
.telegram-time-box h3 { margin: 0 0 10px; color: #67e8f9; text-align: center; }
.telegram-time-box p { margin: 10px 0 0; color: #e0f2fe; font-weight: 850; line-height: 1.45; text-align: center; }
.consent-line { display: flex; grid-template-columns: auto 1fr; align-items: center; gap: 8px; margin-bottom: 12px; color: #e0f2fe; font-weight: 900; }
.consent-line input { width: auto; height: auto; }
.telegram-rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.telegram-rules label { display: flex; align-items: center; gap: 8px; padding: 12px; border-radius: 14px; background: rgba(2,6,23,.38); border: 1px solid rgba(186,230,253,.18); color: #e0f2fe; font-weight: 900; }
.telegram-rules input { width: auto; height: auto; }
.telegram-result { margin-top: 12px; text-align: center; }
.telegram-result code { color: #fde68a; }
.telegram-manage-actions, .telegram-top-actions { display: grid; gap: 10px; margin: 12px 0; }
.telegram-manage-actions { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.telegram-open-btn.edit-btn { background: #7c3aed; }
.danger-btn, .telegram-open-btn.danger-btn { background: #dc2626 !important; color: #fff !important; border: 1px solid rgba(254,205,211,.55); box-shadow: 0 10px 24px rgba(127,29,29,.30); }
.telegram-top-actions .danger-btn { width: min(320px, 100%); margin: 12px auto 0; min-height: 42px; padding: 8px 14px; border-radius: 999px; font-weight: 1000; }
@media (max-width: 520px) { .telegram-form label:nth-child(2) { grid-column: auto; } }
.suncalc-hero { text-align: center; background: linear-gradient(135deg, rgba(15,23,42,.96), rgba(30,64,175,.70), rgba(6,95,70,.52)); border-color: rgba(34,211,238,.30); }
.suncalc-hero small { color: #67e8f9; font-weight: 1000; text-transform: uppercase; }
.suncalc-hero h1 { margin: 4px 0; color: #fde68a; font-size: clamp(34px, 10vw, 62px); line-height: 1; }
.suncalc-hero p { color: #f9fafb; font-weight: 850; }
.suncalc-output { margin-top: 14px; }
.suncalc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.suncalc-grid div { display: grid; gap: 5px; padding: 12px; border-radius: 14px; background: linear-gradient(135deg, rgba(2,6,23,.80), rgba(30,64,175,.42)); border: 1px solid rgba(253,230,138,.22); text-align: center; }
.suncalc-grid small { color: #bae6fd; font-weight: 1000; text-transform: uppercase; }
.suncalc-grid b { color: #fde68a; font-size: 18px; }
.suncalc-explain p { line-height: 1.5; font-weight: 800; }
.weekday-search { grid-template-columns: repeat(7, 1fr); }
@media (max-width: 720px) { .weekday-search { grid-template-columns: repeat(2, 1fr); } }
/* Lab selection colors */
.lab-buttons button { background: #374151; color: #f9fafb; border: 1px solid #4b5563; min-height: 38px; }
.lab-buttons button:hover { background: #4b5563; }
.lab-buttons button.active { background: #fbbf24; color: #111827; border-color: #fde68a; box-shadow: 0 0 0 3px rgba(251,191,36,.30); }
.lab-buttons button.available:not(.active) { background: #065f46; color: #d1fae5; border-color: #22c55e; box-shadow: inset 0 0 0 2px rgba(34,197,94,.25); }
.lab-buttons button.not-available:not(.active) { opacity: .38; filter: grayscale(1); }
.lab-buttons.weekday-search button.active { background: #229ed9; color: #fff; border-color: #7dd3fc; }
/* H2Toe lab */
.h2toe-card { max-width: 520px; margin-left: auto; margin-right: auto; }
.h2toe-human { display: grid; grid-template-rows: repeat(12, 1fr); gap: 4px; height: 95vh; }
.h2toe-part { display: grid; grid-template-columns: 44px 1fr 120px; align-items: center; min-height: 0; height: 100%; border: 1px solid #4b5563; border-radius: 0; background: #111827; overflow: hidden; }
.h2toe-part.has-day { border-color: #fbbf24; background: linear-gradient(90deg, rgba(251,191,36,.18), #111827); }
.h2toe-num { display: grid; place-items: center; height: 100%; background: #030712; color: #fbbf24; font-weight: 1000; }
.h2toe-body { display: grid; gap: 2px; padding: 8px 10px; }
.h2toe-body strong { color: #f9fafb; font-size: 16px; }
.h2toe-body small { color: #cbd5e1; font-weight: 800; }
.h2toe-day { display: grid; gap: 2px; padding: 8px; text-align: center; }
.h2toe-day b { color: #fbbf24; }
.h2toe-day small { color: #d1d5db; font-weight: 800; }
.h2toe-part.p1 { border-radius: 0; }
.h2toe-part.p12 { border-radius: 0; }
@media (max-width: 520px) { .h2toe-part { grid-template-columns: 36px 1fr 86px; } .h2toe-body strong { font-size: 14px; } .h2toe-day { font-size: 12px; } }
.h2toe-sun-card { max-width: 520px; margin-left: auto; margin-right: auto; text-align: center; border-color: #fbbf24; }
.h2toe-sun-title { color: #fbbf24; font-weight: 1000; font-size: 18px; }
.h2toe-sun-value { margin-top: 6px; font-size: 22px; font-weight: 1000; color: #f9fafb; }
.h2toe-sun-sub { margin-top: 4px; color: #d1d5db; font-weight: 800; }
.h2toe-part.sun-here { border-color: #f59e0b; background: linear-gradient(90deg, rgba(245,158,11,.45), #111827); box-shadow: 0 0 0 3px rgba(251,191,36,.22); }
.h2toe-body em { display: inline-block; margin-top: 3px; color: #fbbf24; font-style: normal; font-weight: 1000; }
.h2toe-part.moon-here { border-color: #93c5fd; box-shadow: 0 0 0 3px rgba(147,197,253,.20); }
.h2toe-body em.moon-mark { color: #93c5fd; }
.h2toe-part.sun-here.moon-here { background: linear-gradient(90deg, rgba(245,158,11,.38), rgba(147,197,253,.22), #111827); }
.h2toe-part.lagna-here { border-color: #c084fc; box-shadow: 0 0 0 3px rgba(192,132,252,.20); }
.h2toe-body em.lagna-mark { color: #d8b4fe; }
.h2toe-part.sun-here.moon-here.lagna-here { background: linear-gradient(90deg, rgba(245,158,11,.34), rgba(147,197,253,.20), rgba(192,132,252,.22), #111827); }
.h2toe-part.sun-here.lagna-here:not(.moon-here) { background: linear-gradient(90deg, rgba(245,158,11,.34), rgba(192,132,252,.22), #111827); }
.h2toe-part.moon-here.lagna-here:not(.sun-here) { background: linear-gradient(90deg, rgba(147,197,253,.24), rgba(192,132,252,.22), #111827); }