/*
 * Shared mobile safety layer.
 * Keeps every page inside the device viewport while letting wide data tables
 * scroll inside their own panel instead of widening the whole document.
 */
html{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%
}
body{
  width:100%;
  max-width:100%;
  overflow-x:hidden
}
img,svg,canvas,video{
  max-width:100%;
  height:auto
}
header,main,footer,
.content,.form-card,.identity,.table-card,
.reference-page,.reference-card,
.ancient-page,.ancient-card,.ancient-results,
.atta-prediction-page,.atta-prediction-card,.atta-prediction-results,
.ephemeris-page,.ephemeris-card,.ephemeris-results,
.transit-page,.transit-card,.transit-results,
.mundane-page,.mundane-card,.mundane-results,
.zodiac-page,.zodiac-results,.zodiac-charts,
.dashboard-shell,.stats-table-card,
.auth-layout,.auth-brand,.auth-card,
.mobile-shell,.pricing-shell{
  min-width:0;
  max-width:100%
}
.table-card,
.comparison-table,
.ephemeris-table-wrap,
.transit-table-wrap,
.atta-table-card,
.zodiac-table-scroll,
.stats-table-card,
.eclipse-panel,
.reference-card{
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-inline:contain
}
.page-links,.wheels,.comparison-tables,.zodiac-table-grid,.zodiac-chart-grid,
.ancient-grid,.mundane-grid,.stats-grid,.pricing-plans{
  max-width:100%
}

@media(max-width:900px){
  header{
    width:100%;
    padding:24px clamp(14px,4vw,28px) 18px
  }
  main{
    width:100%;
    padding:20px clamp(12px,4vw,28px) 44px
  }
  h1{
    overflow-wrap:anywhere;
    font-size:clamp(33px,9vw,43.5px);
    line-height:1.45
  }
  .header-mark{font-size:clamp(34px,10vw,48px)}
  .form-card,.reference-card,.ancient-card,.atta-prediction-card,
  .ephemeris-card,.transit-card,.mundane-card{
    width:100%;
    padding:clamp(14px,4vw,22px)
  }
  .page-links{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    justify-content:center;
    width:100%
  }
  .page-links .page-link{
    width:100%;
    min-width:0;
    max-width:none;
    margin:0;
    white-space:normal;
    overflow-wrap:anywhere
  }
  .ancient-date-info{
    grid-template-columns:minmax(84px,.7fr) minmax(110px,1fr) minmax(105px,1fr) minmax(150px,1.35fr)
  }
  .zodiac-table-card{
    flex-basis:min(320px,86vw)
  }
  .dashboard-page{padding:24px clamp(12px,4vw,26px)}
  .dashboard-page h1{
    font-size:clamp(22px,6.4vw,28px);
    line-height:1.35
  }
  .stats-table-card{overflow-x:auto}
}

@media(max-width:700px){
  body{font-size:15px}
  /* The Taksa age summary has three label/value pairs per desktop row.
     Stack those pairs vertically on phones so no meaning is clipped. */
  .taksa-page .ancient-overview-table{
    grid-template-columns:minmax(92px,.72fr) minmax(0,1.55fr);
    width:100%;
    min-width:0;
    overflow:hidden
  }
  .taksa-page .ancient-overview-table .overview-title-wide{
    grid-column:1 / -1
  }
  .taksa-page .ancient-overview-table>*{
    min-width:0;
    padding:7px 8px;
    white-space:normal;
    overflow:visible;
    overflow-wrap:anywhere;
    word-break:normal;
    line-height:1.55
  }
  .taksa-page .ancient-overview-table .overview-label{
    border-right:1px solid #d4e9ee
  }
  .taksa-page .ancient-overview-table .overview-value{
    border-right:0
  }
  .taksa-page .ancient-overview-table>*:nth-last-child(-n+6){
    border-bottom:1px solid #d4e9ee
  }
  .taksa-page .ancient-overview-table>*:nth-last-child(-n+2){
    border-bottom:0
  }
  header{
    align-items:flex-start;
    gap:12px;
    padding:18px 14px 14px
  }
  main{
    display:block;
    padding:14px 12px 38px
  }
  .content{width:100%}
  .form-card,.reference-card,.ancient-card,.atta-prediction-card,
  .ephemeris-card,.transit-card,.mundane-card,.transit-card,
  .stats-table-card{
    padding:13px
  }
  form,.ancient-form,.mundane-form,.moon-form,.ephemeris-form,
  .zodiac-form,.transit-form{
    width:100%;
    max-width:100%
  }
  label,fieldset{
    min-width:0;
    max-width:100%
  }
  input,select,textarea,button{
    min-width:0;
    max-width:100%;
    font-size:16px
  }
  input,select,textarea{
    width:100%
  }
  button,.page-link,.global-home-button{
    min-height:44px
  }
  .ancient-form,.mundane-form,.moon-form,.ephemeris-form{
    grid-template-columns:repeat(3,minmax(0,1fr))
  }
  .ancient-form button,.mundane-form button,.moon-form button,
  .ephemeris-form button{
    grid-column:1/-1;
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    box-sizing:border-box;
    padding-inline:16px
  }
  .ephemeris-form{grid-template-columns:repeat(6,minmax(0,1fr))}
  .ephemeris-form :is(.ephemeris-start,.ephemeris-end){min-width:0}
  .ephemeris-form .ephemeris-start{grid-column:1/span 3;grid-row:1}
  .ephemeris-form .ephemeris-end{grid-column:4/span 3;grid-row:1}
  .ephemeris-form :is(.ephemeris-start,.ephemeris-end) input[type="date"]{width:90%;min-width:0;min-height:40px;margin-inline:auto;padding-inline:6px;font-size:14px}
  .ephemeris-form .ephemeris-frame{grid-column:1/span 3;grid-row:2}
  .ephemeris-form button{grid-column:4/span 3;grid-row:2}
  .transit-grid,.zodiac-form{
    grid-template-columns:repeat(3,minmax(0,1fr))
  }
  .zodiac-birth-place{display:contents}
  .zodiac-birth-city{grid-column:3;grid-row:2;width:auto;min-width:0;max-width:none}
  .zodiac-manual-coords{display:none}
  .zodiac-coords{display:contents}
  .zodiac-coords label{grid-row:3;width:auto;min-width:0;max-width:none;white-space:normal}
  .zodiac-coords label:first-child{grid-column:1}
  .zodiac-coords label:last-child{grid-column:2}
  .zodiac-form button[type="submit"]{grid-column:3;grid-row:3;margin:0}
  .zodiac-chart-choice{grid-column:1/span 2;grid-row:4;width:auto;min-width:0;max-width:none}
  .zodiac-city-suggestions.is-open{position:static;grid-column:1/-1;width:100%}
  .transit-location{
    grid-template-columns:1fr
  }
  .transit-location button,.zodiac-form button{
    width:100%
  }
  .calendar-card{
    width:100%;
    max-width:100%;
    overflow:hidden
  }
  .calendar-row span{
    min-width:0;
    padding:7px 6px;
    overflow-wrap:anywhere
  }
  .moon-summary,.ancient-grid,.mundane-grid,.comparison-tables,
  .zodiac-chart-grid{
    grid-template-columns:1fr
  }
  .ancient-date-info{
    display:block;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch
  }
  .ancient-date-info>*{min-width:560px}
  .wheels{
    grid-template-columns:1fr;
    width:100%
  }
  .wheels article,.zodiac-chart-card{
    min-width:0;
    width:100%;
    overflow:hidden
  }
  .wheels canvas,.zodiac-chart-card canvas{
    display:block;
    width:100%!important;
    max-width:430px;
    margin-inline:auto
  }
  .zodiac-table-grid{
    width:100%;
    overflow-x:auto
  }
  .zodiac-table-card{
    flex:0 0 min(320px,86vw)
  }
  .ephemeris-result-tools,.transit-summary,.analytics-heading{
    align-items:stretch;
    flex-direction:column
  }
  .dashboard-header{
    align-items:stretch;
    flex-direction:column
  }
  .dashboard-header a{
    width:100%;
    text-align:center
  }
  .stats-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .stat-card{
    min-width:0;
    padding:15px
  }
  .stat-card strong{
    font-size:clamp(24px,8vw,32px)
  }
  .auth-page{padding:10px}
  .auth-layout{
    min-height:0;
    border-radius:20px
  }
  .auth-brand{
    min-height:205px;
    padding:26px 22px
  }
  .auth-card{padding:27px 20px}
  .auth-tabs{margin-bottom:22px}
  .mobile-shell,.pricing-shell{
    width:100%;
    min-width:0
  }
  .pricing-plan{
    min-width:0;
    grid-template-columns:minmax(0,1fr) minmax(84px,104px)
  }
  .creator-footer{
    max-width:calc(100% - 24px);
    white-space:normal
  }
}

@media(max-width:430px){
  header,main{padding-inline:10px}
  .page-links{
    grid-template-columns:1fr;
    gap:7px
  }
  .ancient-form button,.mundane-form button,.moon-form button,
  .ephemeris-form button,.zodiac-form button{
    grid-column:1/-1
  }
  .stats-grid{grid-template-columns:1fr}
  .calendar-row{
    grid-template-columns:minmax(52px,19%) minmax(58px,22%) minmax(0,1fr)
  }
  .element-key{gap:7px}
  .auth-brand{min-height:185px}
  .auth-card{padding:24px 16px}
  .pricing-plan-copy{padding-left:15px}
}

/* Give every calculator the same compact information-panel treatment used by
   the paired birth forms: a light rounded frame and a predictable 3-column
   layout on phones. */
@media(max-width:700px){
  .ancient-form,
  .mundane-form,
  .moon-form,
  .ephemeris-form,
  .zodiac-form{
    box-sizing:border-box;
    margin:0 0 16px;
    padding:12px 10px;
    border:1px solid #8ebdca;
    border-radius:14px;
    background:#fff;
    box-shadow:0 7px 15px #174f5d12
  }
  .ancient-form label,
  .mundane-form label,
  .moon-form label,
  .ephemeris-form label,
  .zodiac-form label{
    display:grid;
    gap:5px;
    color:#17667d;
    text-align:center
  }
  .ancient-form :is(input,select),
  .mundane-form input,
  .moon-form input,
  .ephemeris-form :is(input,select),
  .zodiac-form input{
    min-height:42px
  }
  .ephemeris-form .ephemeris-frame{
    grid-column:1 / span 3;
    grid-row:2
  }
  .ancient-form button,
  .mundane-form button,
  .moon-form button,
  .ephemeris-form button,
  .zodiac-form button,
  .zodiac-form button[type="submit"],
  .transit-form button,
  .transit-location button,
  .auspicious-info-form button,
  .auspicious-card .auspicious-info-form button{
    grid-column:1/-1;
    grid-row:auto;
    width:100%;
    min-width:0;
    margin:0;
    justify-self:stretch;
    align-self:stretch;
    display:flex;
    align-items:center;
    justify-content:center;
    box-sizing:border-box;
    padding-inline:16px;
    text-align:center;
    white-space:nowrap
  }
}

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

/* Creator-footer contrast is selected by auth.js / auth-guard.js from the
   page surface. Do not force a mobile-only text colour here. */

/* The two child birth panels stay side by side on desktop; stack only on narrow screens. */
body .auspicious-info-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  align-items:stretch!important
}
@media(max-width:760px){
  body .auspicious-info-grid{grid-template-columns:1fr!important}
}

/* Keep the mobile/PWA experience light while preserving the desktop layout. */
@media(max-width:700px){
  body{overscroll-behavior-x:none}
  button,.page-link,a,input,select,textarea{touch-action:manipulation}
  .table-card,.comparison-table,.ephemeris-table-wrap,.transit-table-wrap,
  .atta-table-card,.zodiac-table-scroll,.stats-table-card,.eclipse-panel,
  .reference-card{scrollbar-width:thin}
  table{font-size:12px}
  .zodiac-chart-card,.wheels article,.atta-prediction-section,
  .taksa-prediction-section,.natal-prediction-panel{content-visibility:auto;contain-intrinsic-size:0 460px}
  .zodiac-chart-card canvas,.wheels canvas{max-width:min(100%,360px)}
  body.home-page::before{position:absolute;animation-duration:90s;will-change:auto}
  body.home-page::after{animation-duration:150s;opacity:.16;will-change:auto}
  body.home-page header{padding:12px 10px 8px}
  body.home-page main{padding-top:8px}
  body.home-page .page-links{width:min(100%,260px);gap:7px}
  body.home-page .page-links .page-link{min-height:42px;padding:6px 10px;font-size:14px}
}

@media(max-width:430px){
  .form-card,.reference-card,.ancient-card,.atta-prediction-card,
  .ephemeris-card,.transit-card,.mundane-card,.stats-table-card{padding:11px}
  .table-card,.comparison-table,.ephemeris-table-wrap,.transit-table-wrap,
  .atta-table-card,.zodiac-table-scroll{border-radius:12px}
  .zodiac-chart-card canvas,.wheels canvas{max-width:330px}
}

/* Atta page: lock every visible text node to one responsive type size.
   This file loads last so row, circle, and mobile rules cannot diverge. */
body[data-ancient-view="atta"] .ancient-card{
  --atta-unified-font-size:16px;
  --calculator-font-size:16px
}
body[data-ancient-view="atta"] .ancient-card,
body[data-ancient-view="atta"] .ancient-card *{
  font-family:"Kh Content","Khmer UI",sans-serif!important;
  font-size:var(--atta-unified-font-size)!important;
  font-synthesis:none
}
body[data-ancient-view="atta"] .ancient-card :where(
  h2,
  h3,
  p,
  label,
  input,
  select,
  button,
  td,
  th
){
  line-height:1.55!important
}
body[data-ancient-view="atta"] .ancient-card .atta-age-circle{
  line-height:1!important
}
body[data-ancient-view="atta"] .owner-age-star-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:12px;
  width:100%;
  margin-top:12px;
  overflow-x:auto;
  align-items:stretch
}
body[data-ancient-view="atta"] .owner-age-star-card{
  margin-top:0;
  overflow-x:auto;
  border:1px solid rgba(23,104,121,.45);
  border-radius:18px;
  background:#fff;
  box-shadow:0 7px 22px rgba(26,72,80,.14)
}
body[data-ancient-view="atta"] .owner-age-star-table{
  width:100%;
  min-width:760px;
  border:0!important;
  border-radius:0!important;
  background:#fff!important
}
body[data-ancient-view="atta"] .owner-age-star-table :where(th,td){
  height:40px;
  padding:7px 10px;
  border:1px solid #d4e9ee!important;
  background:#fff!important;
  color:#176879!important;
  font-size:16px!important;
  font-weight:400!important;
  text-align:center;
  vertical-align:middle
}
body[data-ancient-view="atta"] .owner-age-star-table thead th:not(.owner-age-star-title){
  background:#f2fbfd!important;
  color:#176879!important
}
body[data-ancient-view="atta"] .owner-age-star-table .owner-age-star-title{
  width:36%;
  background:#f2fbfd!important;
  color:#176879!important;
  font-weight:400!important
}
body[data-ancient-view="atta"] .owner-age-star-table .owner-age-star-status{
  background:#f7fcfd!important;
  color:#d82121!important;
  font-weight:400!important;
  text-align:left
}
body[data-ancient-view="atta"] .owner-age-star-result{
  margin:0;
  padding:11px 14px;
  border-top:1px solid #d4e9ee;
  background:#f2fbfd;
  color:#d82121!important;
  font-size:16px!important;
  font-weight:400!important;
  text-align:center
}
body[data-ancient-view="atta"] .owner-age-intercept-card{
  overflow:hidden;
  border:1px solid rgba(23,104,121,.45);
  border-radius:18px;
  background:#fff;
  box-shadow:0 7px 22px rgba(26,72,80,.14)
}
body[data-ancient-view="atta"] .owner-age-intercept-table{
  width:100%;
  min-width:500px;
  border:0!important;
  border-radius:0!important;
  background:#fff!important
}
body[data-ancient-view="atta"] .owner-age-intercept-table :where(th,td){
  height:40px;
  padding:7px 9px;
  border:1px solid #d4e9ee!important;
  background:#fff!important;
  color:#176879!important;
  font-size:16px!important;
  font-weight:400!important;
  text-align:center;
  vertical-align:middle
}
body[data-ancient-view="atta"] .owner-age-intercept-title th{
  background:#f2fbfd!important;
  color:#d82121!important
}
body[data-ancient-view="atta"] .owner-age-intercept-headings th{
  background:#f7fcfd!important
}
body[data-ancient-view="atta"] .owner-age-intercept-status th{
  background:#f7fcfd!important;
  text-align:right
}
body[data-ancient-view="atta"] .owner-age-intercept-status .is-negative{
  background:#fff3f3!important;
  color:#d82121!important
}
@media(max-width:700px){
  body[data-ancient-view="atta"] .ancient-card,
  body[data-ancient-view="atta"] .ancient-results{
    min-width:0;
    overflow:hidden
  }
  body[data-ancient-view="atta"] .ancient-overview-table{
    grid-template-columns:minmax(100px,.8fr) minmax(0,1.2fr);
    width:100%;
    min-width:0;
    overflow:hidden
  }
  body[data-ancient-view="atta"] .ancient-overview-table>*{
    min-width:0;
    padding:8px;
    white-space:normal;
    overflow:visible;
    overflow-wrap:anywhere
  }
  body[data-ancient-view="atta"] .ancient-overview-table .overview-title-wide{
    grid-column:1 / -1
  }
  body[data-ancient-view="atta"] .ancient-overview-table .overview-label{
    border-right:1px solid #d4e9ee!important
  }
  body[data-ancient-view="atta"] .ancient-overview-table .overview-value{
    border-right:0!important
  }
  body[data-ancient-view="atta"] .owner-age-star-layout{
    grid-template-columns:minmax(0,1fr);
    gap:12px;
    min-width:0;
    overflow:visible
  }
  body[data-ancient-view="atta"] .owner-age-star-card,
  body[data-ancient-view="atta"] .owner-age-intercept-card{
    width:100%;
    min-width:0;
    overflow:hidden;
    border-radius:14px
  }
  body[data-ancient-view="atta"] .owner-age-star-table,
  body[data-ancient-view="atta"] .owner-age-intercept-table{
    display:block;
    width:100%;
    min-width:0;
    box-sizing:border-box
  }
  body[data-ancient-view="atta"] :where(.owner-age-star-table,.owner-age-intercept-table) *{
    box-sizing:border-box
  }
  body[data-ancient-view="atta"] :where(.owner-age-star-table,.owner-age-intercept-table) :where(thead,tbody){
    display:block;
    width:100%
  }
  body[data-ancient-view="atta"] .owner-age-star-headings{
    display:block
  }
  body[data-ancient-view="atta"] .owner-age-star-headings>th:not(.owner-age-star-title){
    display:none
  }
  body[data-ancient-view="atta"] .owner-age-star-table .owner-age-star-title{
    display:flex;
    width:100%;
    min-height:44px;
    align-items:center;
    justify-content:center
  }
  body[data-ancient-view="atta"] .owner-age-star-values,
  body[data-ancient-view="atta"] .owner-age-intercept-period{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    width:100%
  }
  body[data-ancient-view="atta"] :where(.owner-age-star-values,.owner-age-intercept-period)>td{
    display:flex;
    min-width:0;
    min-height:72px;
    padding:0!important;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    overflow-wrap:anywhere
  }
  body[data-ancient-view="atta"] :where(.owner-age-star-values,.owner-age-intercept-period)>td::before{
    content:attr(data-label);
    display:block;
    width:100%;
    margin:-1px -1px 7px;
    padding:5px 3px;
    border-bottom:1px solid #d4e9ee;
    background:#f7fcfd;
    color:#176879;
    text-align:center
  }
  body[data-ancient-view="atta"] :where(.owner-age-star-values,.owner-age-intercept-period)>td:last-child{
    grid-column:1 / -1
  }
  body[data-ancient-view="atta"] .owner-age-star-table tbody>tr{
    display:block;
    width:100%
  }
  body[data-ancient-view="atta"] .owner-age-star-table .owner-age-star-status{
    display:block;
    width:100%;
    min-height:48px;
    padding:10px!important;
    text-align:center;
    white-space:normal;
    overflow-wrap:anywhere
  }
  body[data-ancient-view="atta"] .owner-age-star-table tbody td:empty{
    display:none
  }
  body[data-ancient-view="atta"] .owner-age-star-result{
    white-space:normal;
    overflow-wrap:anywhere
  }
  body[data-ancient-view="atta"] .owner-age-intercept-title,
  body[data-ancient-view="atta"] .owner-age-intercept-title>th{
    display:block;
    width:100%;
    min-height:44px;
    white-space:normal;
    overflow-wrap:anywhere
  }
  body[data-ancient-view="atta"] .owner-age-intercept-headings{
    display:none
  }
  body[data-ancient-view="atta"] .owner-age-intercept-status{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    width:100%
  }
  body[data-ancient-view="atta"] .owner-age-intercept-status>th{
    display:flex;
    min-width:0;
    align-items:center;
    justify-content:center;
    padding:8px!important;
    text-align:center;
    white-space:normal;
    overflow-wrap:anywhere
  }
  body[data-ancient-view="atta"] .owner-age-intercept-status>td{
    display:flex;
    min-width:72px;
    align-items:center;
    justify-content:center;
    padding:8px!important
  }
}
/* Global typography lock.
   Every page loads this stylesheet last, so headings, forms, tables, values,
   notes, and buttons render at the same responsive size. */
:root{
  --app-unified-font-size:clamp(14px,1.05vw,16px)
}
body :where(
  h1,h2,h3,h4,h5,h6,
  p,label,legend,summary,
  input,select,textarea,button,
  a,
  table,caption,thead,tbody,tfoot,tr,th,td,
  ul,ol,li,dl,dt,dd,
  small,strong,b,em,
  span
){
  font-size:var(--app-unified-font-size)!important
}
body :where(
  h1,h2,h3,h4,h5,h6,
  p,label,legend,summary,
  input,select,textarea,button,
  a,
  table,caption,thead,tbody,tfoot,tr,th,td,
  ul,ol,li,dl,dt,dd,
  small,strong,b,em,
  span
){
  line-height:1.55
}

/* These are pictograms, not text. Keep their intended tap-target proportions. */
.header-mark{font-size:clamp(34px,10vw,48px)!important}
.global-home-button>span{font-size:18px!important}
.mobile-menu-icon{font-size:22px!important}
.mobile-nav-icon{font-size:24px!important}

@media(max-width:700px){
  :root{--app-unified-font-size:14px}
}

/* Keep both AKbalthom Angkor display fonts at the same requested size
   everywhere, including the mobile layout. */
:root{
  --akbalthom-angkor-2-size:25px
}
body header h1{
  font-family:"AKbalthom Angkor 2","Khmer UI",sans-serif!important;
  font-size:var(--akbalthom-angkor-2-size)!important
}

/* Keep AKbalthom Angkor 1 Plus at the requested fixed size everywhere. */
:root{
  --akbalthom-angkor-1-size:25px
}
body .auth-brand h1{
  font-family:"AKbalthom Angkor 1 Plus","Khmer UI",sans-serif!important;
  font-size:var(--akbalthom-angkor-1-size)!important
}

/* Keep the main content heading below the header divider consistent. */
body:not(.home-page) main > section > h2{
  font-family:"Kh Content","Khmer UI",sans-serif!important;
  font-size:20px!important;
  font-weight:400!important
}

/* Single-layer table grid.
   This stylesheet is loaded last on every page, including auth/admin pages.
   Collapsing borders here also covers tables rendered later by JavaScript and
   prevents adjacent cell edges from appearing as doubled table lines. */
:where(table){
  border-collapse:collapse!important;
  border-spacing:0!important
}
:where(table,thead,tbody,tfoot,tr){
  border-spacing:0!important
}

/* Shared calculator theme: keep every desktop calculator form and table on
   the same Home-button type scale and blue-green surface palette. */
:root{
  --calculator-ink:#176879;
  --calculator-border:rgba(23,104,121,.45);
  --calculator-grid:#d4e9ee;
  --calculator-heading:#f2fbfd;
  --calculator-alt:#f7fcfd;
  --calculator-font-size:14px
}
body:not(.home-page):not(.auth-page):not(.pricing-page):not(.dashboard-page):not(.mobile-menu-page):not(.about-page) main :where(
  h3,h4,h5,h6,p,label,legend,
  input,select,textarea,button,
  table,caption,thead,tbody,tfoot,tr,th,td
){
  font-family:"Kh Content","Khmer UI",sans-serif!important;
  font-size:var(--calculator-font-size)!important;
  font-weight:400
}
body:not(.home-page):not(.auth-page):not(.pricing-page):not(.dashboard-page):not(.mobile-menu-page):not(.about-page) main :where(
  label,legend,input,select,textarea,button,table,caption,th,td
){
  color:var(--calculator-ink)!important
}
body:not(.home-page):not(.auth-page):not(.pricing-page):not(.dashboard-page):not(.mobile-menu-page):not(.about-page) main :where(
  input,select,textarea
){
  border:1px solid var(--calculator-border)!important;
  border-radius:999px!important;
  background:#fff!important;
  box-shadow:inset 0 1px 2px rgba(23,79,93,.05)!important
}
body:not(.home-page):not(.auth-page):not(.pricing-page):not(.dashboard-page):not(.mobile-menu-page):not(.about-page) main button:not(.tool-navigation-toggle){
  border:1px solid var(--calculator-border)!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.94)!important;
  color:var(--calculator-ink)!important;
  box-shadow:0 7px 22px rgba(26,72,80,.14)!important;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  box-sizing:border-box;
  padding-inline:16px
}
body:not(.home-page):not(.auth-page):not(.pricing-page):not(.dashboard-page):not(.mobile-menu-page):not(.about-page) main button:not(.tool-navigation-toggle):hover,
body:not(.home-page):not(.auth-page):not(.pricing-page):not(.dashboard-page):not(.mobile-menu-page):not(.about-page) main button:not(.tool-navigation-toggle):focus-visible{
  border-color:var(--calculator-ink)!important;
  background:var(--calculator-ink)!important;
  color:#fff!important;
  outline:0
}
body:not(.home-page):not(.auth-page):not(.pricing-page):not(.dashboard-page):not(.mobile-menu-page):not(.about-page) main table{
  border-color:var(--calculator-border)!important;
  background:#fff!important;
  color:var(--calculator-ink)!important
}
body:not(.home-page):not(.auth-page):not(.pricing-page):not(.dashboard-page):not(.mobile-menu-page):not(.about-page) main :where(th,td){
  border-color:var(--calculator-grid)!important
}
body:not(.home-page):not(.auth-page):not(.pricing-page):not(.dashboard-page):not(.mobile-menu-page):not(.about-page) main th{
  background:var(--calculator-heading)!important;
  color:var(--calculator-ink)!important
}
body:not(.home-page):not(.auth-page):not(.pricing-page):not(.dashboard-page):not(.mobile-menu-page):not(.about-page) main td{
  background:#fff!important;
  color:var(--calculator-ink)!important
}
body:not(.home-page):not(.auth-page):not(.pricing-page):not(.dashboard-page):not(.mobile-menu-page):not(.about-page) main tr:nth-child(even)>td{
  background:var(--calculator-alt)!important
}

/* The Attha source table intentionally uses a neutral surface except for
   planetary-strength rows. This must follow and outrank the shared zebra-row rule. */
body:not(.home-page):not(.auth-page):not(.pricing-page):not(.dashboard-page):not(.mobile-menu-page):not(.about-page) .atta-prediction-page .atta-table-card.atta-restored-table .atta-source-table td{
  background:#fff!important
}
body:not(.home-page):not(.auth-page):not(.pricing-page):not(.dashboard-page):not(.mobile-menu-page):not(.about-page) .atta-prediction-page .atta-table-card.atta-restored-table .atta-strength-label-row td{
  background:#ffe4a3!important
}
body:not(.home-page):not(.auth-page):not(.pricing-page):not(.dashboard-page):not(.mobile-menu-page):not(.about-page) .atta-prediction-page .atta-table-card.atta-restored-table .atta-strength-value-row td{
  background:#fff4cf!important
}

/* The expanded Ramakert reference follows the same Attha panel geometry and
   type scale while keeping its label rows easy to distinguish. */
.atta-prediction-page .atta-ramakert-table{
  margin-top:16px
}
.atta-prediction-page .atta-ramakert-table .atta-label-row td{
  background:#f2fbfd!important;
  color:#176879!important
}
.atta-prediction-page .atta-ramakert-table .atta-strength-label-row td{
  background:#ffe4a3!important;
  color:#7c4700!important
}
.atta-prediction-page .atta-ramakert-table .atta-strength-value-row td{
  background:#fff4cf!important;
  color:#875000!important
}
.atta-prediction-page .atta-body-points-figure{
  display:flex;
  justify-content:center;
  margin:24px auto 0;
  width:100%
}
.atta-prediction-page .atta-body-points-map{
  position:relative;
  width:min(100%,441px);
}
.atta-prediction-page .atta-body-points-map img{
  display:block;
  width:100%;
  height:auto
}
.atta-prediction-page .atta-body-point-number{
  position:absolute;
  display:grid;
  place-items:center;
  width:27px;
  height:25px;
  transform:translate(-50%,-50%);
  border:0;
  border-radius:0;
  background:#fff;
  color:#d7191c;
  font-family:inherit;
  font-size:18px!important;
  font-weight:400;
  font-synthesis:none;
  line-height:1;
  z-index:1
}
.atta-prediction-page .atta-head-point-1{left:50.8%;top:6%}
.atta-prediction-page .atta-head-point-2{left:50.8%;top:11.76%}
.atta-prediction-page .atta-head-point-3{left:50.8%;top:17.12%}
.atta-prediction-page .atta-left-arm-point-1{left:25.4%;top:23.5%}
.atta-prediction-page .atta-left-arm-point-2{left:25.2%;top:29.2%}
.atta-prediction-page .atta-left-arm-point-3{left:22.8%;top:34.9%}
.atta-prediction-page .atta-chest-point-1{left:50.8%;top:23.5%}
.atta-prediction-page .atta-chest-point-2{left:50.8%;top:28.7%}
.atta-prediction-page .atta-chest-point-3{left:50.8%;top:34.1%}
.atta-prediction-page .atta-right-arm-point-1{left:76.6%;top:23.5%}
.atta-prediction-page .atta-right-arm-point-2{left:76.1%;top:29.6%}
.atta-prediction-page .atta-right-arm-point-3{left:77.6%;top:34.9%}
.atta-prediction-page .atta-upper-torso-point-1{left:50.8%;top:40.2%}
.atta-prediction-page .atta-upper-torso-point-2{left:50.8%;top:45.8%}
.atta-prediction-page .atta-upper-torso-point-3{left:50.8%;top:51.4%}
.atta-prediction-page .atta-left-leg-point-1{left:38.3%;top:54.7%}
.atta-prediction-page .atta-left-leg-point-2{left:38.3%;top:61.7%}
.atta-prediction-page .atta-left-leg-point-3{left:38.3%;top:71.3%}
.atta-prediction-page .atta-right-leg-point-1{left:63%;top:54.7%}
.atta-prediction-page .atta-right-leg-point-2{left:63%;top:61.7%}
.atta-prediction-page .atta-right-leg-point-3{left:63%;top:71.3%}
/* Frame the shared បិតា / លាភៈ column from the top down to the final house row. */
body:not(.home-page):not(.auth-page):not(.pricing-page):not(.dashboard-page):not(.mobile-menu-page):not(.about-page) .atta-prediction-page .atta-source-table tbody tr:nth-child(-n+3)>td:nth-child(4){
  border-left:3px solid #171717!important;
  border-right:3px solid #171717!important
}
/* Frame the three houses from សហជ្ជៈ through បុត្តៈ with horizontal lines. */
body:not(.home-page):not(.auth-page):not(.pricing-page):not(.dashboard-page):not(.mobile-menu-page):not(.about-page) .atta-prediction-page .atta-source-table tbody tr:nth-child(2)>td:nth-child(n+3):nth-child(-n+5){
  border-top:3px solid #171717!important
}
body:not(.home-page):not(.auth-page):not(.pricing-page):not(.dashboard-page):not(.mobile-menu-page):not(.about-page) .atta-prediction-page .atta-source-table tbody tr:nth-child(2)>td:nth-child(n+3):nth-child(-n+5){
  border-bottom:3px solid #171717!important
}
/* Colour the visible Ramakert number rows after the house-name rows are hidden. */
body:not(.home-page):not(.auth-page):not(.pricing-page):not(.dashboard-page):not(.mobile-menu-page):not(.about-page) .atta-prediction-page .atta-table-card.atta-restored-table.atta-ramakert-table .atta-source-table tbody tr:nth-child(4)>td{
  background:#fff4cf!important
}
body:not(.home-page):not(.auth-page):not(.pricing-page):not(.dashboard-page):not(.mobile-menu-page):not(.about-page) .atta-prediction-page .atta-table-card.atta-restored-table.atta-ramakert-table .atta-source-table tbody tr:nth-child(5)>td{
  background:#f1e7f7!important
}
body:not(.home-page):not(.auth-page):not(.pricing-page):not(.dashboard-page):not(.mobile-menu-page):not(.about-page) .atta-prediction-page .atta-table-card.atta-restored-table.atta-ramakert-table .atta-source-table tbody tr:nth-child(8)>td,
body:not(.home-page):not(.auth-page):not(.pricing-page):not(.dashboard-page):not(.mobile-menu-page):not(.about-page) .atta-prediction-page .atta-table-card.atta-restored-table.atta-ramakert-table .atta-source-table tbody tr:nth-child(9)>td{
  background:#e7f2cf!important
}
body:not(.home-page):not(.auth-page):not(.pricing-page):not(.dashboard-page):not(.mobile-menu-page):not(.about-page) .atta-prediction-page .atta-table-card.atta-restored-table.atta-ramakert-table .atta-source-table tbody tr>td.atta-age-current{
  background:#fff0c9!important
}

/* Lunar reference calculator: keep every desktop item inside the information
   panel on one fixed type size. Mobile keeps its existing compact scale. */
@media(min-width:701px){
  body.lunar-eclipse-page{
    --app-unified-font-size:16px;
    --calculator-font-size:16px
  }
}

/* Annual eclipse table: keep every header and data cell at one fixed size. */
.lunar-eclipse-page #eclipseReferencePanel .eclipse-panel :where(
  table,caption,thead,tbody,tfoot,tr,th,td
){
  font-size:16px!important
}

/* Preserve the semantic highlights explicitly requested in the calculators. */
body main :is(
  .construction-land-cell-danger,.retrograde,
  .auspicious-age-value,.auspicious-timing-note,
  .auspicious-timing-result,.auspicious-remainder,
  .auspicious-verdict-bad,.auspicious-lunar-sequence-cell
){
  color:#c62828!important
}
body main .direct{color:#16723d!important}
body main .selected-eclipse{background:#fff2bd!important;color:var(--calculator-ink)!important}

/* Zodiac mobile layout: stack the selected planet table above its reference table. */
@media(max-width:700px){
  #zodiacResults .zodiac-table-grid{
    flex-direction:column;
    align-items:stretch;
    overflow:visible
  }
  #zodiacResults .zodiac-table-card,
  #zodiacResults .zodiac-reference-card{
    flex:0 0 auto;
    width:100%;
    max-width:100%;
    min-width:0
  }
  #zodiacResults .zodiac-table-scroll{
    width:100%;
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch
  }
  #zodiacForm .zodiac-chart-choice{
    grid-column:1 / -1;
    width:min(100%,260px);
    max-width:260px;
    justify-self:center
  }
}

/* Zodiac rasi table: keep house/rasi/degree and element colours above the shared calculator ink. */
body:not(.home-page):not(.auth-page):not(.pricing-page):not(.dashboard-page):not(.mobile-menu-page):not(.about-page) main .zodiac-table-card th:nth-child(2),
body:not(.home-page):not(.auth-page):not(.pricing-page):not(.dashboard-page):not(.mobile-menu-page):not(.about-page) main .zodiac-table-card td.house-num{
  color:#6a1b9a!important
}
body:not(.home-page):not(.auth-page):not(.pricing-page):not(.dashboard-page):not(.mobile-menu-page):not(.about-page) main .zodiac-table-card th:nth-child(3),
body:not(.home-page):not(.auth-page):not(.pricing-page):not(.dashboard-page):not(.mobile-menu-page):not(.about-page) main .zodiac-table-card td.rasi-num{
  color:#1565c0!important
}
body:not(.home-page):not(.auth-page):not(.pricing-page):not(.dashboard-page):not(.mobile-menu-page):not(.about-page) main .zodiac-table-card th:nth-child(4),
body:not(.home-page):not(.auth-page):not(.pricing-page):not(.dashboard-page):not(.mobile-menu-page):not(.about-page) main .zodiac-table-card td.degree-num{
  color:#ef6c00!important
}
body:not(.home-page):not(.auth-page):not(.pricing-page):not(.dashboard-page):not(.mobile-menu-page):not(.about-page) main .zodiac-table-card td.fire{color:#d82121!important}
body:not(.home-page):not(.auth-page):not(.pricing-page):not(.dashboard-page):not(.mobile-menu-page):not(.about-page) main .zodiac-table-card td.earth{color:#c89012!important}
body:not(.home-page):not(.auth-page):not(.pricing-page):not(.dashboard-page):not(.mobile-menu-page):not(.about-page) main .zodiac-table-card td.air{color:#168957!important}
body:not(.home-page):not(.auth-page):not(.pricing-page):not(.dashboard-page):not(.mobile-menu-page):not(.about-page) main .zodiac-table-card td.water{color:#168db8!important}
body:not(.home-page):not(.auth-page):not(.pricing-page):not(.dashboard-page):not(.mobile-menu-page):not(.about-page) main .zodiac-table-card .planet-symbol{color:#111!important}

/* Age-star page title below the header divider. */
body[data-ancient-view="atta"] .ancient-card>h2{
  font-size:20px!important
}

/* Phone/app only: shrink both restored Atta number tables so all 7 columns
   fit the device width. Desktop web keeps the existing 16px scale. */
@media(max-width:700px){
  .atta-prediction-page .atta-prediction-card .atta-table-card.atta-restored-table{
    overflow-x:hidden
  }
  .atta-prediction-page .atta-prediction-card .atta-table-card.atta-restored-table>h3{
    padding:8px 6px;
    font-size:14px!important;
    line-height:1.35
  }
  .atta-prediction-page .atta-prediction-card .atta-table-card.atta-restored-table .atta-source-table{
    width:100%;
    min-width:0;
    table-layout:fixed
  }
  .atta-prediction-page .atta-prediction-card .atta-table-card.atta-restored-table .atta-source-table td{
    padding:4px 1px;
    font-size:13px!important;
    line-height:1.15
  }
  .atta-prediction-page .atta-prediction-card .atta-table-card.atta-restored-table .atta-source-table .atta-age-circle{
    min-width:22px;
    width:22px;
    height:22px;
    padding:0;
    font-size:12px!important;
    border-width:2px
  }
}
@media(max-width:390px){
  .atta-prediction-page .atta-prediction-card .atta-table-card.atta-restored-table>h3{
    padding:7px 4px;
    font-size:13px!important
  }
  .atta-prediction-page .atta-prediction-card .atta-table-card.atta-restored-table .atta-source-table td{
    padding:3px 0;
    font-size:12px!important
  }
  .atta-prediction-page .atta-prediction-card .atta-table-card.atta-restored-table .atta-source-table .atta-age-circle{
    min-width:18px;
    width:18px;
    height:18px;
    font-size:11px!important
  }
}

/* Phone/app only: shrink every birth-information panel so the age table
   fits the device width. Desktop web keeps the 6-column layout. */
@media(max-width:700px){
  .ancient-overview-table,
  .taksa-page .ancient-overview-table,
  body[data-ancient-view="atta"] .ancient-overview-table,
  body.pibek-page .ancient-overview-table,
  .atta-prediction-page .atta-birth-summary.ancient-overview-table,
  .auspicious-birth-table,
  .auspicious-card .auspicious-birth-table{
    grid-template-columns:minmax(88px,.72fr) minmax(0,1.28fr)!important;
    width:100%!important;
    min-width:0!important;
    overflow:hidden;
    --auspicious-birth-font-size:13px
  }
  .ancient-overview-table>*,
  .taksa-page .ancient-overview-table>*,
  body[data-ancient-view="atta"] .ancient-overview-table>*,
  body.pibek-page .ancient-overview-table>*,
  .atta-prediction-page .atta-birth-summary.ancient-overview-table>*,
  .auspicious-birth-table>*,
  .auspicious-card .auspicious-birth-table>*{
    min-width:0;
    padding:4px 6px!important;
    font-size:13px!important;
    line-height:1.35;
    white-space:normal;
    overflow-wrap:anywhere
  }
  .ancient-overview-table .overview-title,
  .ancient-overview-table .overview-title-wide,
  .auspicious-birth-table .auspicious-result-title,
  .auspicious-birth-table .auspicious-result-title-wide{
    grid-column:1 / -1;
    font-size:13px!important
  }
  .ancient-overview-table .overview-label,
  .auspicious-birth-table .auspicious-result-label{
    border-right:1px solid #d4e9ee!important
  }
  .ancient-overview-table .overview-value,
  .ancient-overview-table .overview-cell-end,
  .auspicious-birth-table .auspicious-result-value,
  .auspicious-birth-table .auspicious-result-end{
    border-right:0!important
  }
  .ancient-overview-table>*:nth-last-child(-n+6),
  .taksa-page .ancient-overview-table>*:nth-last-child(-n+6),
  body[data-ancient-view="atta"] .ancient-overview-table>*:nth-last-child(-n+6),
  body.pibek-page .ancient-overview-table>*:nth-last-child(-n+6),
  .atta-prediction-page .atta-birth-summary.ancient-overview-table>*:nth-last-child(-n+6){
    border-bottom:1px solid #d4e9ee!important
  }
  .ancient-overview-table>*:nth-last-child(-n+2),
  .taksa-page .ancient-overview-table>*:nth-last-child(-n+2),
  body[data-ancient-view="atta"] .ancient-overview-table>*:nth-last-child(-n+2),
  body.pibek-page .ancient-overview-table>*:nth-last-child(-n+2),
  .atta-prediction-page .atta-birth-summary.ancient-overview-table>*:nth-last-child(-n+2){
    border-bottom:0!important
  }
  .atta-prediction-page .atta-prediction-card .atta-birth-info,
  .atta-prediction-page .atta-prediction-card .atta-birth-info *,
  body.pibek-page .ancient-overview-table,
  body.pibek-page .ancient-overview-table *{
    font-size:13px!important
  }
  .atta-birth-observed,
  .atta-prediction-page .atta-prediction-card .atta-birth-observed{
    padding:7px 8px!important;
    font-size:12px!important;
    line-height:1.45
  }
  .lunar-eclipse-page .moon-birth-info{
    overflow:hidden
  }
  .lunar-eclipse-page .moon-birth-info table{
    display:block;
    width:100%;
    min-width:0!important
  }
  .lunar-eclipse-page .moon-birth-info tbody{
    display:block
  }
  .lunar-eclipse-page .moon-birth-info tr{
    display:grid;
    grid-template-columns:minmax(88px,.72fr) minmax(0,1.28fr)
  }
  .lunar-eclipse-page .moon-birth-info td{
    display:flex;
    align-items:center;
    width:auto!important;
    padding:4px 6px!important;
    font-size:13px!important;
    line-height:1.35
  }
  .lunar-eclipse-page .moon-birth-info td:nth-child(even){border-right:0}
}
@media(max-width:390px){
  .ancient-overview-table>*,
  .taksa-page .ancient-overview-table>*,
  body[data-ancient-view="atta"] .ancient-overview-table>*,
  body.pibek-page .ancient-overview-table>*,
  .atta-prediction-page .atta-birth-summary.ancient-overview-table>*,
  .auspicious-birth-table>*,
  .lunar-eclipse-page .moon-birth-info td{
    padding:3px 5px!important;
    font-size:12px!important
  }
  .atta-birth-observed,
  .atta-prediction-page .atta-prediction-card .atta-birth-observed{
    padding:6px 7px!important;
    font-size:11px!important
  }
}