:root{
  --bg:#dff1f3;
  --surface:rgba(244,251,251,.88);
  --elevated:#f8fcfc;
  --ink:#103b61;
  --secondary:#416b7f;
  --muted:#7696a2;
  --jade:#0f7393;
  --jade-soft:#d4ebed;
  --jade-deep:#063f68;
  --disabled:rgba(225,239,240,.82);
  --disabled-ink:#78929b;
  --border:rgba(20,94,120,.16);
  --shadow:0 10px 30px rgba(20,77,99,.13);
  --gold:#d8b36a;
}

html,body{
  background-color:var(--bg);
  background-image:url('/assets/clean-paper-texture.png');
  background-repeat:repeat;
  background-size:360px 360px;
}

body{
  color:var(--ink);
  min-width:320px;
}

.site-header{
  background:rgba(223,241,243,.94);
  border-bottom-color:rgba(20,94,120,.13);
}

.brand{
  display:grid;
  gap:0;
  color:var(--jade-deep);
}

.brand strong{
  font-family:"DFKai-SB","BiauKai","STKaiti","KaiTi",serif;
  font-size:1.12rem;
  letter-spacing:.08em;
}

.brand small{
  color:var(--secondary);
  font-size:.62rem;
  letter-spacing:.26em;
}

.home-route .site-header{
  display:none;
}

.home-route main{
  width:min(100%,560px);
  padding:0;
}

.home-screen{
  position:relative;
  isolation:isolate;
  min-height:100svh;
  overflow:hidden;
  padding:max(28px,calc(env(safe-area-inset-top) + 18px)) 20px calc(104px + env(safe-area-inset-bottom));
}

.home-screen::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background-image:url('/assets/clean-paper-texture.png');
  background-repeat:repeat;
  background-size:360px 360px;
  opacity:.42;
}

.home-brand{
  position:relative;
  z-index:3;
  width:52%;
  max-width:240px;
  margin:34px 0 8px 4px;
}

.home-brand img{
  display:block;
  width:100%;
  height:auto;
  mix-blend-mode:normal;
}

.home-motto{
  position:relative;
  z-index:3;
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 92px 18px;
  color:#173e66;
  font-family:"DFKai-SB","BiauKai","STKaiti","KaiTi",serif;
  font-size:.82rem;
  letter-spacing:.42em;
}

.home-motto::before,.home-motto::after{
  content:"";
  width:28px;
  height:1px;
  background:var(--gold);
}

.home-flower{
  position:absolute;
  z-index:1;
  top:-21px;
  right:-26%;
  width:min(83.2vw,494px);
  aspect-ratio:1;
  cursor:grab;
  touch-action:none;
  user-select:none;
  contain:layout paint style;
  transform:translateZ(0);
  backface-visibility:hidden;
}

.home-flower::before{
  content:"";
  position:absolute;
  inset:13%;
  border-radius:50%;
  background:rgba(23,76,99,.14);
  filter:blur(22px);
  transform:translate3d(0,12px,0);
  pointer-events:none;
}

.home-flower:active{cursor:grabbing}

.home-flower .ring{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  pointer-events:none;
  transform-origin:50% 50%;
  will-change:transform;
  transform:translateZ(0) rotate(0deg);
  backface-visibility:hidden;
  image-rendering:auto;
}

.home-screen,
.home-screen *{
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
}

.home-screen input,
.home-screen textarea,
.home-screen select{
  -webkit-user-select:text;
  user-select:text;
  -webkit-touch-callout:default;
}

.home-question{
  position:relative;
  z-index:3;
  max-width:340px;
  margin:0 0 26px 4px;
  color:#08769c;
  font-family:"DFKai-SB","BiauKai","STKaiti","KaiTi",serif;
  font-size:clamp(2.05rem,10vw,3rem);
  font-weight:500;
  line-height:1.25;
  letter-spacing:.03em;
}

.home-choices{
  position:relative;
  z-index:4;
  display:grid;
  gap:13px;
}

.home-choice{
  display:grid;
  grid-template-columns:72px minmax(0,1fr) 20px;
  align-items:center;
  gap:14px;
  min-height:102px;
  padding:14px 16px;
  border:1px solid rgba(31,120,139,.26);
  border-radius:22px;
  background:rgba(241,250,250,.78);
  color:var(--jade-deep);
  box-shadow:0 7px 20px rgba(28,84,104,.11);
  text-align:left;
  backdrop-filter:blur(8px);
}

.home-choice:hover,.home-choice:focus-visible{
  background:rgba(249,253,253,.94);
  border-color:rgba(15,115,147,.52);
}

.home-choice.selected{
  background:#f7fcfc;
  border-color:var(--gold);
  box-shadow:0 8px 24px rgba(18,85,109,.17);
}

.home-choice img{
  display:block;
  width:72px;
  height:72px;
  object-fit:contain;
  filter:drop-shadow(0 5px 8px rgba(14,70,93,.12));
}

.home-choice-copy{
  display:grid;
  gap:4px;
}

.home-choice strong{
  color:#123f69;
  font-family:"DFKai-SB","BiauKai","STKaiti","KaiTi",serif;
  font-size:1.23rem;
  line-height:1.3;
}

.home-choice small{
  color:var(--secondary);
  font-size:.86rem;
  font-weight:500;
}

.home-choice-arrow{
  color:#1b7090;
  font-family:serif;
  font-size:1.6rem;
  line-height:1;
}

.home-freeform{
  position:relative;
  z-index:4;
  display:grid;
  gap:8px;
  margin-top:14px;
  padding:16px 18px;
  border:1px solid rgba(31,120,139,.25);
  border-radius:18px;
  background:rgba(246,252,252,.75);
}

.home-freeform strong{
  color:#123f69;
  font-family:"DFKai-SB","BiauKai","STKaiti","KaiTi",serif;
  font-size:1.05rem;
}

.home-freeform textarea{
  min-height:72px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--ink);
  box-shadow:none;
  resize:none;
}

.home-freeform textarea:focus{
  border:0;
  box-shadow:none;
}

.home-start{
  position:relative;
  z-index:4;
  width:100%;
  min-height:62px;
  margin-top:16px;
  border:1px solid var(--gold);
  border-radius:18px;
  background:#07517b;
  color:#f5dfb3;
  box-shadow:0 9px 24px rgba(5,66,103,.24);
  font-family:"DFKai-SB","BiauKai","STKaiti","KaiTi",serif;
  font-size:1.55rem;
  letter-spacing:.12em;
}

.home-start:hover,.home-start:focus-visible{background:#063f68}

.mobile-nav{
  z-index:100;
  isolation:isolate;
  overflow:hidden;
  background-color:#054267;
  background-image:url('/assets/clean-paper-texture.png');
  background-blend-mode:multiply;
  border-top:1px solid rgba(216,179,106,.5);
  backdrop-filter:none;
  transform:translate3d(0,0,0);
  transition:transform 220ms cubic-bezier(.22,.61,.36,1),opacity 180ms ease;
  will-change:transform;
}

body.mobile-nav-hidden .mobile-nav{
  transform:translate3d(0,calc(100% + env(safe-area-inset-bottom)),0);
  opacity:.96;
  pointer-events:none;
}

.mobile-nav a{
  position:relative;
  z-index:1;
  gap:3px;
  color:#f5dfb3;
}

.mobile-nav a.active{color:#fff4d7}

.mobile-nav img{
  display:block;
  width:30px;
  height:30px;
  object-fit:contain;
}

body:not(.home-route) main{
  width:min(100%,980px);
}

@media(min-width:601px){
  .home-route{
    display:grid;
    place-items:start center;
  }

  .home-route .mobile-nav{
    left:50%;
    width:min(100%,560px);
    transform:translateX(-50%);
  }

  .home-screen{
    box-shadow:0 24px 70px rgba(17,65,83,.18);
  }
}

@media(max-width:600px){
  .site-header{
    padding-top:max(var(--s2),env(safe-area-inset-top));
  }

  main{
    padding-left:18px;
    padding-right:18px;
  }

  .home-route main{padding:0}

  .mobile-nav{
    min-height:72px;
    padding-top:7px;
  }
}

@media(max-width:390px){
  .home-choice{
    grid-template-columns:64px minmax(0,1fr) 18px;
    gap:10px;
    padding:12px 14px;
  }

  .home-choice img{
    width:64px;
    height:64px;
  }

  .home-choice strong{
    font-size:1.1rem;
  }
}

@media(max-width:360px){
  .home-screen{padding-left:14px;padding-right:14px}
  .home-flower{right:-25%;width:85.8vw}
  .home-question{font-size:2rem}
  .home-choice{grid-template-columns:62px minmax(0,1fr) 16px;gap:10px}
  .home-choice img{width:62px;height:62px}
}

@media(prefers-reduced-motion:reduce){
  .home-flower .ring{transform:none!important}
}

/* Founder UI system — inner pages only. The approved homepage above stays sealed. */
body:not(.home-route){
  overflow-x:hidden;
}

body:not(.home-route) main{
  position:relative;
  isolation:isolate;
  min-height:calc(100svh - 72px);
  overflow:clip;
}

body:not(.home-route) main::before{
  content:"";
  position:absolute;
  z-index:-1;
  top:-48px;
  right:-180px;
  width:min(980px,92vw);
  height:660px;
  background-repeat:no-repeat;
  background-position:top right;
  background-size:contain;
  opacity:.19;
  pointer-events:none;
  transition:transform 260ms ease-out,opacity 260ms ease-out;
}

body[data-route="catalog"] main::before{
  background-image:url('/assets/pattern-catalog-lattice.png');
}

body[data-route="skill"][data-skill="ziwei"] main::before,
body[data-route="input"][data-skill="ziwei"] main::before{
  background-image:url('/assets/pattern-ziwei-star.png');
  opacity:.17;
}

body[data-route="skill"][data-skill="bazi"] main::before,
body[data-route="input"][data-skill="bazi"] main::before{
  right:auto;
  left:-210px;
  background-image:url('/assets/pattern-bazi-lattice.png');
  background-position:top left;
  opacity:.16;
}

body[data-route="skill"][data-skill="developing"] main::before{
  background-image:url('/assets/pattern-catalog-lattice.png');
  opacity:.12;
}

body[data-route="result"] main::before{
  background-image:url('/assets/pattern-result-cloud-star.png');
  opacity:.18;
}

body[data-route="history"] main::before,
body[data-route="settings"] main::before,
body[data-route="login"] main::before{
  background-image:url('/assets/pattern-history-water.png');
  background-position:top right;
  top:96px;
  bottom:auto;
  opacity:.21;
}

body:not(.home-route) .site-header{
  min-height:74px;
  background:rgba(223,241,243,.88);
  border-bottom:1px solid rgba(18,91,119,.16);
  box-shadow:0 8px 30px rgba(13,73,95,.06);
}

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.catalog-header-search{
  display:none;
  flex:1 1 320px;
  max-width:420px;
  margin:0 auto 0 12px;
}

body[data-route="catalog"] .catalog-header-search{
  display:block;
}

body[data-route="catalog"] .catalog-header-search input{
  min-height:44px;
  margin:0;
  padding:9px 16px;
  border:1px solid rgba(21,109,136,.24);
  border-radius:999px;
  background:rgba(250,254,254,.82);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.78);
  color:#0c4168;
}

body[data-route="catalog"] .catalog-header-search input::placeholder{
  color:#668796;
}

body:not(.home-route) .desktop-nav a{
  color:#315f77;
  border:1px solid transparent;
}

body:not(.home-route) .desktop-nav a:hover,
body:not(.home-route) .desktop-nav a.active{
  color:#063f68;
  border-color:rgba(216,179,106,.52);
  background:rgba(248,252,252,.78);
}

body:not(.home-route) h1,
body:not(.home-route) h2,
body:not(.home-route) h3{
  color:#0c4168;
}

body:not(.home-route) h1,
body:not(.home-route) .catalog-hero h1,
body:not(.home-route) .page-head h1,
body:not(.home-route) .detail-header h1,
body:not(.home-route) .form-header h1,
body:not(.home-route) .result-summary h1{
  font-family:"DFKai-SB","BiauKai","STKaiti","KaiTi",serif;
  font-weight:600;
  letter-spacing:.025em;
}

body:not(.home-route) .eyebrow{
  color:#0c7794;
  letter-spacing:.18em;
}

/* Catalog */
body[data-route="catalog"] main{
  width:min(1220px,100%);
}

body[data-route="catalog"] .catalog-hero{
  position:relative;
  max-width:720px;
  padding:54px 0 34px;
}

body[data-route="catalog"] .catalog-hero::after{
  content:"";
  display:block;
  width:86px;
  height:2px;
  margin-top:26px;
  background:linear-gradient(90deg,var(--gold),transparent);
}

body[data-route="catalog"] .catalog-hero h1{
  max-width:580px;
  color:#075b7d;
}

body[data-route="catalog"] .catalog-tools{
  top:86px;
  padding:8px 18px 12px;
  border:1px solid rgba(23,116,139,.22);
  border-radius:22px;
  background:rgba(240,249,249,.83);
  box-shadow:0 10px 28px rgba(14,74,96,.10);
}

body[data-route="catalog"] #catalog-search{
  border-color:rgba(21,109,136,.22);
  background:rgba(250,254,254,.82);
}

body[data-route="catalog"] .category-tabs{
  padding-top:0;
  scrollbar-color:rgba(15,115,147,.35) transparent;
}

body[data-route="catalog"] .filter{
  min-height:40px;
  color:#527789;
  background:rgba(224,240,241,.74);
  border:1px solid rgba(20,94,120,.09);
}

body[data-route="catalog"] .filter.active{
  color:#f9e6bc;
  background:#075778;
  border-color:rgba(216,179,106,.7);
}

body[data-route="catalog"] .catalog-count{
  margin:20px 2px 12px;
  color:#597d8c;
}

body[data-route="catalog"] .catalog-grid{
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:14px;
}

body[data-route="catalog"] .catalog-grid .skill-card{
  grid-column:span 4;
  min-width:0;
  border:1px solid rgba(22,103,130,.16);
  background:rgba(239,248,248,.76);
  box-shadow:0 8px 22px rgba(17,76,99,.07);
  backdrop-filter:blur(7px);
}

body[data-route="catalog"] .catalog-grid .skill-card.is-available{
  grid-column:span 6;
  min-height:300px;
  border-color:rgba(216,179,106,.62);
  background:linear-gradient(145deg,rgba(249,253,253,.95),rgba(212,235,237,.86));
  box-shadow:0 14px 32px rgba(11,75,101,.14);
}

body[data-route="catalog"] .catalog-grid .skill-card.is-available::after{
  content:"";
  position:absolute;
  right:-56px;
  bottom:-78px;
  width:190px;
  height:190px;
  border:1px solid rgba(216,179,106,.28);
  border-radius:50%;
  box-shadow:0 0 0 24px rgba(15,115,147,.035),0 0 0 48px rgba(15,115,147,.025);
  pointer-events:none;
}

body[data-route="catalog"] .catalog-grid .skill-card.is-developing:nth-child(3n+1){
  background:rgba(229,243,244,.72);
}

body[data-route="catalog"] .catalog-grid .skill-card.is-developing:nth-child(4n){
  border-top-color:rgba(216,179,106,.42);
}

body[data-route="catalog"] .availability.available{
  color:#fff3d2;
  background:#0c6e84;
  border:1px solid rgba(216,179,106,.58);
}

body[data-route="catalog"] .availability.developing{
  color:#63828f;
  background:rgba(246,251,251,.58);
}

body[data-route="catalog"] .card-action:not(.quiet-action){
  border:1px solid rgba(216,179,106,.68);
  background:#075778;
  color:#f7e1b5;
}

/* Skill detail and shared input surfaces */
body[data-route="skill"] .skill-detail,
body[data-route="input"] .form-page{
  position:relative;
  max-width:920px;
  margin:24px auto 56px;
}

body[data-route="skill"] .back-link,
body[data-route="input"] .back-link{
  color:#2d6d84;
  text-decoration:none;
  font-weight:650;
}

body[data-route="skill"] .back-link::before,
body[data-route="input"] .back-link::before{
  content:"‹";
  margin-right:7px;
  color:var(--gold);
  font-size:1.3em;
}

body[data-route="skill"] .detail-header,
body[data-route="input"] .form-header{
  position:relative;
  max-width:720px;
  padding:24px 0 42px;
  border-bottom:1px solid rgba(21,100,129,.17);
}

body[data-route="skill"] .detail-header h1,
body[data-route="input"] .form-header h1{
  color:#075c7c;
  font-size:clamp(2.55rem,6vw,4.25rem);
}

body[data-route="skill"] .detail-header::after,
body[data-route="input"] .form-header::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-1px;
  width:112px;
  height:2px;
  background:linear-gradient(90deg,var(--gold),transparent);
}

body[data-route="skill"] .detail-info{
  gap:18px;
  padding:30px 0;
  border:0;
}

body[data-route="skill"] .detail-info>div{
  min-height:174px;
  padding:24px;
  border:1px solid rgba(23,112,137,.18);
  border-radius:22px 22px 42px 22px;
  background:rgba(242,250,250,.77);
  box-shadow:0 9px 24px rgba(13,75,98,.08);
  backdrop-filter:blur(8px);
}

body[data-route="skill"] .detail-info>div:nth-child(2){
  border-radius:22px 42px 22px 22px;
  background:rgba(214,235,237,.72);
}

body[data-route="skill"] .detail-action{
  display:flex;
  align-items:center;
  gap:18px;
  padding:24px 0 8px;
}

body[data-route="skill"] #start-skill{
  min-width:200px;
  border:1px solid var(--gold);
  background:#075778;
  color:#f8e3ba;
  font-size:1.05rem;
}

body[data-route="skill"] .detail-header .english{
  margin:18px 0 8px;
  color:#44778a;
  letter-spacing:.055em;
}

body[data-route="skill"] .developing-message{
  max-width:720px;
  margin-top:18px;
  padding:30px;
  border:1px solid rgba(21,102,128,.15);
  border-radius:24px 24px 50px 24px;
  background:rgba(229,242,243,.78);
}

body[data-route="input"] .form-surface{
  position:relative;
  padding:34px;
  border:1px solid rgba(22,109,135,.21);
  background:rgba(242,250,250,.82);
  box-shadow:0 16px 38px rgba(10,69,93,.12);
  backdrop-filter:blur(9px);
}

body[data-route="input"] .form-section{
  border-bottom-color:rgba(18,98,125,.16);
}

body[data-route="input"] .form-section>div:first-child span{
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  color:#f7e2b7;
  background:#0b6680;
  border:1px solid rgba(216,179,106,.58);
  border-radius:50%;
}

body[data-route="input"] input,
body[data-route="input"] select,
body[data-route="login"] input{
  border-color:rgba(20,103,130,.20);
  background:rgba(251,254,254,.84);
}

body[data-route="input"] input:focus,
body[data-route="input"] select:focus,
body[data-route="login"] input:focus{
  border-color:#0f7896;
  box-shadow:0 0 0 3px rgba(15,120,150,.13);
}

body[data-route="input"] .form-note{
  border-left:3px solid var(--gold);
  border-radius:8px 18px 18px 8px;
  background:rgba(207,232,234,.72);
}

body[data-route="input"] .submit-button{
  min-height:58px;
  border:1px solid var(--gold);
  background:#075778;
  color:#f8e3ba;
  font-size:1.05rem;
}

/* Result — editorial hierarchy instead of a dashboard stack. */
body[data-route="result"] main{
  width:min(100%,1040px);
}

body[data-route="result"] .result-page{
  position:relative;
  max-width:900px;
  margin:22px auto 64px;
}

body[data-route="result"] .result-summary{
  position:relative;
  overflow:hidden;
  padding:42px;
  border:1px solid rgba(216,179,106,.68);
  border-radius:28px 28px 58px 28px;
  background:linear-gradient(145deg,rgba(5,71,103,.96),rgba(9,104,126,.92));
  box-shadow:0 18px 44px rgba(5,61,86,.23);
}

body[data-route="result"] .result-summary::after{
  content:"";
  position:absolute;
  right:-90px;
  bottom:-100px;
  width:260px;
  height:260px;
  border:1px solid rgba(247,225,183,.26);
  border-radius:50%;
  box-shadow:0 0 0 34px rgba(247,225,183,.05),0 0 0 70px rgba(247,225,183,.035);
}

body[data-route="result"] .result-summary .eyebrow{
  color:#e5c681;
}

body[data-route="result"] .result-summary h1{
  position:relative;
  z-index:1;
  max-width:660px;
  color:#fff7df;
}

body[data-route="result"] .result-summary>p:last-child{
  position:relative;
  z-index:1;
  max-width:700px;
  color:#ddecf0;
}

body[data-route="result"] .result-section{
  padding:42px 10px;
  border-bottom-color:rgba(17,94,122,.16);
}

body[data-route="result"] .section-label span{
  color:#bc8d3b;
}

body[data-route="result"] .result-list{
  gap:12px;
}

body[data-route="result"] .result-list div{
  border:1px solid rgba(20,104,131,.17);
  border-radius:18px 18px 32px 18px;
  background:rgba(240,249,249,.72);
  box-shadow:0 7px 20px rgba(13,71,94,.06);
}

body[data-route="result"] .interpretation{
  position:relative;
  padding-left:30px;
}

body[data-route="result"] .interpretation::before{
  content:"";
  position:absolute;
  left:8px;
  top:42px;
  bottom:42px;
  width:2px;
  background:linear-gradient(var(--gold),rgba(216,179,106,.08));
}

body[data-route="result"] .limitations{
  margin-top:0;
  padding:30px;
  border:1px solid rgba(20,104,131,.14);
  border-radius:20px 42px 20px 20px;
  background:rgba(207,232,234,.58);
}

body[data-route="result"] .basis details{
  padding:22px 24px;
  border:1px solid rgba(20,104,131,.14);
  border-radius:18px;
  background:rgba(245,251,251,.60);
}

body[data-route="result"] .result-actions button:first-child{
  border:1px solid var(--gold);
  background:#075778;
  color:#f8e3ba;
}

/* History, saved reading and empty state */
body[data-route="history"] .page-head,
body[data-route="settings"] .page-head{
  max-width:720px;
  padding:48px 0 28px;
}

body[data-route="history"] .page-head::after,
body[data-route="settings"] .page-head::after{
  content:"";
  display:block;
  width:82px;
  height:2px;
  margin-top:24px;
  background:linear-gradient(90deg,var(--gold),transparent);
}

body[data-route="history"] .history{
  max-width:900px;
}

body[data-route="history"] .history::before{
  left:18px;
  background:linear-gradient(var(--gold),rgba(15,115,147,.18));
}

body[data-route="history"] .history article{
  grid-template-columns:38px minmax(0,1fr) auto;
  margin-bottom:13px;
  padding:20px 22px 20px 0;
  border:1px solid rgba(18,102,131,.14);
  border-radius:0 22px 36px 0;
  background:rgba(241,249,249,.72);
  box-shadow:0 8px 22px rgba(13,73,96,.07);
}

body[data-route="history"] .timeline-mark{
  width:11px;
  height:11px;
  margin-left:13px;
  background:#0e7791;
  box-shadow:0 0 0 5px #dff1f3,0 0 0 6px rgba(216,179,106,.76);
}

body[data-route="history"] .empty-state{
  position:relative;
  overflow:hidden;
  border-color:rgba(216,179,106,.46);
  border-radius:24px 24px 52px 24px;
  background:rgba(240,249,249,.76);
  box-shadow:0 14px 36px rgba(13,73,95,.10);
}

body[data-route="history"] .empty-state .button{
  border:1px solid var(--gold);
  background:#075778;
  color:#f8e3ba;
}

body[data-route="history"] .history-actions [data-open]{
  border-color:rgba(216,179,106,.72);
  background:#075778;
  color:#f8e3ba;
}

body[data-route="history"] .history-actions [data-delete]{
  color:#9d4b48;
  font-weight:700;
}

/* Account, data controls and login */
body[data-route="settings"] .settings-list{
  gap:16px;
  max-width:900px;
}

body[data-route="settings"] .settings-list article{
  border-color:rgba(19,104,131,.16);
  border-radius:22px 22px 42px 22px;
  background:rgba(241,249,249,.74);
  box-shadow:0 8px 22px rgba(13,73,96,.07);
}

body[data-route="settings"] .settings-list article:nth-child(2){
  border-radius:22px 42px 22px 22px;
  background:rgba(217,235,237,.68);
}

body[data-route="settings"] .secondary{
  border-color:rgba(18,102,131,.30);
  background:rgba(248,252,252,.70);
  color:#0b6680;
}

body[data-route="settings"] .danger-button{
  border-color:rgba(169,71,63,.38);
  background:rgba(169,71,63,.08);
  color:#943f3a;
  font-weight:750;
}

body[data-route="login"] .auth{
  position:relative;
  min-height:calc(100svh - 180px);
  gap:48px;
}

body[data-route="login"] .auth-copy{
  max-width:610px;
}

body[data-route="login"] .auth-copy h1{
  color:#075c7c;
}

body[data-route="login"] .form-surface{
  border:1px solid rgba(18,105,132,.20);
  background:rgba(242,250,250,.82);
  box-shadow:0 16px 38px rgba(10,69,93,.12);
  backdrop-filter:blur(9px);
}

body[data-route="login"] .form-surface button{
  border:1px solid var(--gold);
  background:#075778;
  color:#f8e3ba;
}

/* Shared interaction polish */
body:not(.home-route) .skill-card,
body:not(.home-route) .detail-info>div,
body:not(.home-route) .history article,
body:not(.home-route) .settings-list article{
  transition:transform 220ms ease-out,border-color 220ms ease-out,box-shadow 220ms ease-out;
}

@media(hover:hover){
  body:not(.home-route) main:hover::before{transform:scale(1.015) translate3d(-4px,3px,0)}
  body:not(.home-route) .detail-info>div:hover,
  body:not(.home-route) .history article:hover,
  body:not(.home-route) .settings-list article:hover{transform:translateY(-2px);border-color:rgba(216,179,106,.52)}
}

@media(max-width:900px){
  body[data-route="catalog"] .catalog-grid .skill-card{grid-column:span 6}
  body[data-route="catalog"] .catalog-grid .skill-card.is-available{grid-column:span 6}
}

@media(max-width:600px){
  body:not(.home-route) main{
    min-height:calc(100svh - 64px);
    padding:18px 18px calc(106px + env(safe-area-inset-bottom));
  }

  body:not(.home-route) main::before{
    top:-22px;
    right:-250px;
    width:760px;
    height:500px;
    opacity:.12;
  }

  body[data-route="skill"][data-skill="bazi"] main::before,
  body[data-route="input"][data-skill="bazi"] main::before{
    right:auto;
    left:-310px;
  }

  body[data-route="history"] main::before,
  body[data-route="settings"] main::before,
  body[data-route="login"] main::before{
    top:118px;
    right:-300px;
    bottom:auto;
    opacity:.20;
  }

  body:not(.home-route) .site-header{
    min-height:68px;
    padding-left:18px;
    padding-right:18px;
  }

  body[data-route="catalog"] .site-header{
    gap:12px;
  }

  body[data-route="catalog"] .brand{
    flex:0 0 auto;
    max-width:108px;
  }

  body[data-route="catalog"] .brand strong{
    font-size:.98rem;
  }

  body[data-route="catalog"] .brand small{
    display:none;
  }

  body[data-route="catalog"] .catalog-header-search{
    min-width:0;
    margin:0;
  }

  body[data-route="catalog"] .catalog-header-search input{
    min-height:42px;
    padding:8px 14px;
    font-size:.92rem;
  }

  body[data-route="catalog"] .catalog-hero{
    padding:24px 0 22px;
  }

  body[data-route="catalog"] .catalog-hero h1{
    max-width:300px;
    font-size:2.15rem;
    line-height:1.2;
  }

  body[data-route="catalog"] .catalog-tools{
    top:74px;
    margin-left:-4px;
    margin-right:-4px;
    padding:8px 14px 10px;
    border-radius:18px;
  }

  body[data-route="catalog"] .filter{
    min-height:44px;
    padding:9px 16px;
    font-size:.86rem;
    white-space:nowrap;
  }

  body[data-route="catalog"] .catalog-grid{
    grid-template-columns:1fr;
    gap:12px;
  }

  body[data-route="catalog"] .catalog-grid .skill-card,
  body[data-route="catalog"] .catalog-grid .skill-card.is-available{
    grid-column:auto;
  }

  body[data-route="catalog"] .catalog-grid .skill-card.is-available{
    min-height:268px;
    padding:24px;
  }

  body[data-route="catalog"] .catalog-grid .skill-card.is-developing{
    min-height:184px;
    padding:20px;
    border-radius:18px 18px 32px 18px;
  }

  body[data-route="skill"] .skill-detail,
  body[data-route="input"] .form-page,
  body[data-route="result"] .result-page{
    margin:4px auto 24px;
  }

  body[data-route="skill"] .detail-header,
  body[data-route="input"] .form-header{
    padding:14px 0 28px;
  }

  body[data-route="skill"] .detail-header h1,
  body[data-route="input"] .form-header h1{
    font-size:2.55rem;
  }

  body[data-route="skill"] .detail-info{
    gap:12px;
    padding:22px 0;
  }

  body[data-route="skill"] .detail-info>div{
    min-height:0;
    padding:20px;
  }

  body[data-route="skill"] .detail-action{
    align-items:stretch;
    flex-direction:column;
    padding:20px 0 4px;
  }

  body[data-route="skill"] #start-skill{
    width:100%;
  }

  body[data-route="input"] .form-surface{
    padding:22px 18px;
  }

  body[data-route="input"] .form-header h1{
    font-size:2.35rem;
    line-height:1.18;
  }

  body[data-route="result"] .result-summary{
    padding:28px 24px;
    border-radius:24px 24px 44px 24px;
  }

  body[data-route="result"] .result-summary h1{
    font-size:2rem;
    line-height:1.25;
  }

  body[data-route="result"] .result-section{
    padding:32px 0;
  }

  body[data-route="result"] .interpretation{
    padding-left:22px;
  }

  body[data-route="result"] .interpretation::before{
    left:5px;
    top:32px;
    bottom:32px;
  }

  body[data-route="result"] .limitations{
    padding:23px 20px;
  }

  body[data-route="history"] .page-head,
  body[data-route="settings"] .page-head{
    padding:24px 0 20px;
  }

  body[data-route="history"] .history article{
    grid-template-columns:34px minmax(0,1fr);
    padding:18px 16px 18px 0;
  }

  body[data-route="history"] .history-actions{
    grid-column:2;
  }

  body[data-route="settings"] .settings-list article{
    padding:22px;
  }

  body[data-route="login"] .auth{
    min-height:auto;
    gap:26px;
    padding:18px 0 28px;
  }

  body[data-route="login"] .form-surface{
    padding:22px;
  }
}

@media(max-width:390px){
  body:not(.home-route) main{padding-left:15px;padding-right:15px}
  body[data-route="catalog"] .catalog-tools{margin-left:0;margin-right:0}
  body[data-route="catalog"] .catalog-grid .skill-card.is-available{padding:22px}
  body[data-route="result"] .result-summary{padding:25px 21px}
  body[data-route="history"] .history-actions{flex-wrap:wrap}
}