:root{ --ph-bg:#f3f4f6;--ph-card:#ffffff;--ph-border:#53AA97;--ph-text:#111827;--ph-muted:#6b7280;--ph-day:#ecfdf3;--ph-night:#eff6ff;--ph-current:#fbbf24;--accent-main:#55B39E;--accent-line:#53AA97;--accent-soft:#f4f6fb;} #ph-app{ padding:0px;border-radius:12px;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",sans-serif;color:var(--ph-text);} #ph-app *{ box-sizing:border-box;} .PreLine{ white-space:pre-line;} .ph-shell{ width:100%;max-width:780px;display:flex;flex-direction:column;gap:22px;margin:0 auto;} .ph-card{ width:100%;background:var(--ph-card);border-radius:10px;border:1px solid var(--ph-border);padding:18px 18px 18px;} .ph-header{ display:flex;flex-wrap:wrap;gap:8px 16px;align-items:flex-start;justify-content:space-between;margin-bottom:10px;} .ph-main-title{ text-align:center;font-size:24px;font-weight:500;padding:10px 0px;border-radius:8px;background:#F0F1F5;border:1px solid #5A5A5D;color:#000;align-items:center;transition:opacity .18s ease;margin-bottom:20px;} .ph-title-main{ font-size:17px;font-weight:400;color:var(--ph-text);} .ph-sub{ font-size:13px;color:var(--ph-muted);margin-top:2px;} .ph-status{ font-size:12px;color:var(--ph-muted);margin-top:4px;} .ph-current-badge{ font-size:12px;padding:8px 10px;border-radius:8px;background:rgba(251,191,36,0.12);border:1px solid rgba(251,191,36,0.6);color:#92400e;display:flex;align-items:center;gap:6px;transition:opacity .18s ease;width:100%;justify-content:flex-start;margin:10px 0px;} .ph-current-dot{ width:14px;height:14px;border-radius:999px;background:#f59e0b;flex-shrink:0;} .ph-current-text-wrap{ display:flex;flex-direction:column;gap:2px;} .ph-current-text-wrap > #ph-current-label{order:1;} .ph-current-text-wrap > #ph-current-text{order:2;} .ph-current-text-wrap > #ph-footer-left{order:3;} .ph-current-label{ font-size:16px;font-weight:500;text-transform:uppercase;letter-spacing:0.04em;opacity:.8;} .ph-current-main{ font-size:15px;} .ph-date-row{ display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:flex-start;margin-bottom:10px;font-size:12px;} .ph-date-group{ display:flex;flex-direction:column;gap:6px;flex:1;min-width:0;} .ph-date-label{ font-weight:400;color:var(--ph-muted);font-size:14px;} .ph-dt-shell{ display:flex;align-items:center;gap:8px;} .ph-dt-shell input[type="datetime-local"]{ border:1px solid var(--accent-line);background:#ffffff;border-radius:8px;padding:8px 12px;font-size:17px;font-weight:500;color:var(--ph-text);outline:none;appearance:none;width:100%;transition:border-color .15s ease, box-shadow .15s ease;} .ph-dt-shell input[type="datetime-local"]::-webkit-calendar-picker-indicator{ opacity:0.9;cursor:pointer;} .ph-dt-shell input[type="datetime-local"]:focus{ border-color:var(--accent-main);box-shadow:0 0 0 1px var(--accent-main);} .ph-today-btn{ appearance:none;border:1px solid var(--accent-line);background:#ffffff;border-radius:8px;padding:10px 40px;font-size:14px;font-weight:500;letter-spacing:.03em;color:var(--ph-text);cursor:pointer;-webkit-tap-highlight-color:transparent;white-space:nowrap;transition:background-color .15s ease, color .15s ease, box-shadow .15s ease, transform .1s ease;} .ph-today-btn:hover{ background:var(--accent-soft);} .ph-today-btn:active{ background:var(--accent-main);color:#f9fafb;transform:translateY(1px);} .ph-footer{ margin-top:6px;font-size:12px;color:var(--ph-muted);display:flex;justify-content:space-between;gap:6px;flex-wrap:wrap;} .ph-columns{ display:grid;grid-template-columns:1fr;gap:8px;margin-top:30px;} @media (min-width:600px){ .ph-columns{ grid-template-columns:1fr 1fr;} } .ph-column-title{ font-size:18px;font-weight:400;color:#0B0D10;margin:2px 4px 4px;} .ph-hour-list{ display:flex;flex-direction:column;gap:8px;} .ph-hour-item{ display:flex;align-items:center;justify-content:space-between;padding:5px 10px;border-radius:5px;background:#f9fafb;border:1px solid #e5e7eb;cursor:pointer;transition:background-color .15s ease, box-shadow .15s ease, transform .1s ease;} .ph-hour-item:hover{ background:#FEF8E4;} .ph-hour-item:active{ transform:translateY(1px);} .ph-hour-item-current{ background:linear-gradient(to right, rgba(251,191,36,0.16), rgba(255,251,235,1));box-shadow:0 0 0 1px rgba(251,191,36,0.9), 0 4px 10px rgba(15,23,42,0.08);} .ph-hour-left{ display:flex;align-items:center;gap:8px;min-width:0;} .ph-hour-index{ width:18px;text-align:right;font-size:16px;font-weight:400;color:#555555;flex-shrink:0;} .ph-planet-circle{ width:40px;height:40px;border-radius:999px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:#e5e7eb;overflow:hidden;} .ph-planet-circle img{ width:60px !important;height:60px !important;object-fit:contain;display:block;} .ph-planet-name{ font-size:14px;font-weight:500;color:#111827;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .ph-hour-right{ text-align:right;font-size:13px;line-height:1.25;flex-shrink:0;margin-left:8px;} .ph-hour-time-main{ font-weight:500;color:#111827;} .ph-hour-time-sub{ color:#555555;} .ph-hour-card{ padding:10px 12px;border-radius:8px;background:#f9fafb;border:1px solid #e5e7eb;font-size:13px;} .ph-hour-card-title{ font-weight:500;font-size:18px;margin-bottom:5px;color:#111827;} .ph-hour-card-body-row{ display:flex;justify-content:space-between;gap:6px;margin-bottom:2px;} .ph-hour-card-label{ color:#6b7280;} .ph-hour-card-value{ font-weight:500;color:#111827;text-align:right;} .ph-hour-card-hint{ color:#6b7280;font-style:italic;} #ph-hour-card-rows{ margin-top:15px;font-size:14px;line-height:1.5;} .ph-hour-extra-card{ margin-top:20px;margin-bottom:5px;padding:10px 12px;border-radius:8px;background:#ffffff;border:1px solid #e5e7eb;font-size:13px;} .ph-hour-extra-title{ font-weight:400;color:#111827;margin-bottom:2px;font-size:16px;} .ph-hour-extra-text{ color:#4b5563;line-height:1.4;font-size:15px;} .ph-info-tabs{ width:100%;display:flex;align-items:center;justify-content:space-between;gap:6px;padding:2px;border-radius:5px;background:var(--accent-soft);border:1px solid var(--accent-line);margin:15px 0 6px;} .ph-info-tab{ flex:1;border:none;border-radius:5px;padding:8px 10px;font-size:14px;font-weight:500;letter-spacing:.04em;background:transparent;color:#555555;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .15s ease, color .15s ease, box-shadow .15s ease, transform .1s ease;} .ph-info-tab-active{ background:var(--accent-main);color:#f9fafb;} .ph-info-tab:active{ transform:translateY(1px);} .ph-info-panel{ margin-top:4px;} .moon-blocks{ display:grid;grid-template-columns:1fr;gap:12px;margin-top:10px;} @media (min-width:600px){ .moon-blocks{ grid-template-columns:1fr 1fr;} } .moon-block{ border-radius:8px;border:1px solid #e5e7eb;background:#f9fafb;padding:10px 12px;} .moon-block-title{ font-size:16px;font-weight:500;margin-bottom:6px;color:#111827;} .moon-block-row{ font-size:14px;margin-bottom:4px;color:#111827;} .moon-block-label{ color:#6b7280;margin-right:4px;} .moon-block-value{ font-weight:500;} .moon-phase-icon-wrap{ text-align:left;margin:10px 0 10px;} .moon-phase-icon-wrap img{ width:140px;border-radius:999px;display:inline-block;} .ph-planets-section-title{ width:100%;text-align:center;margin:12px 0 4px;padding:4px;font-size:18px;font-weight:500;background:#DEE1E9;color:#000;} #moon-interpret-label, #moon-organs-label, #moon-surgery-label{ display:inline-block;} #moon-organs-label, #moon-surgery-label{ margin-top:12px;} .moon-block-value2{ font-weight:400;} .moon-block-label2{ color:#6b7280;margin-right:4px;font-size:16px;} .ph-zodiac-row{ display:grid;grid-template-columns:1fr;gap:12px;margin-top:16px;} @media (min-width:600px){ .ph-zodiac-row{ grid-template-columns:1fr 1fr;} } .ph-zodiac-card{ padding:12px 14px;} .zodiac-card-inner{ display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;} .zodiac-icon{ width:140px;overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:999px;background:#e5e7eb;} .zodiac-icon img{ width:100%;height:100%;object-fit:cover;display:block;} .zodiac-text-main{ font-size:20px;font-weight:500;color:#111827;} .zodiac-text-dates{ font-size:15px;color:#6b7280;margin-top:2px;}