/* Inkstone — base styles. Component styling is inline in index.html to keep each
   screen self-contained; the palette, fonts and animations live here. */
*{box-sizing:border-box}
  html,body{margin:0;padding:0}
  textarea,input,button{font-family:inherit}
  ::selection{background:#E7CBB6}
  @keyframes ink-fade-up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
  @keyframes ink-breathe{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:.7;transform:scale(1.18)}}
  @keyframes ink-soft-pulse{0%,100%{opacity:1}50%{opacity:.62}}
  textarea::placeholder{color:#B3A893}


/* ---- screens other than home: responsive width ---- */
.view{ width:100%; margin:0 auto; }
.view-study{ max-width:640px; }
.view-finish{ max-width:600px; }
.view-text{ max-width:600px; }
.view-lessons{ max-width:640px; }
.view-account{ max-width:560px; min-height:100vh; display:flex; flex-direction:column; justify-content:center; }
.lessons-grid{ display:flex; flex-direction:column; gap:14px; }
.diary-grid{ display:flex; flex-direction:column; gap:22px; }
@media (min-width:760px){
  .view-text{ max-width:780px; }
  .view-lessons{ max-width:1000px; }
  .lessons-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; }
  .diary-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px 22px; }
}
@media (min-width:1180px){ .view-lessons{ max-width:1140px; } }

/* ============ HOME — desktop app shell: sidebar + stage ============ */
.home-page{ width:100%; min-height:100vh; }

.intro-mark{ width:60px; height:60px; border-radius:14px; background:#A8412C; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 0 rgba(0,0,0,.10); }
.intro-mark span{ font-family:'Noto Serif SC',serif; font-weight:600; color:#F6EEDF; font-size:33px; line-height:1; }
.intro-name{ font-family:'Newsreader',serif; font-weight:500; font-size:30px; color:#2A2520; letter-spacing:.01em; margin-top:16px; }
.intro-tag{ font-family:'Newsreader',serif; font-style:italic; font-size:17px; color:#A99B83; margin-top:2px; }

.side-brand, .side-nav{ background:#F4EDDD; }
.side-brand{ padding:40px 30px 16px; }
.side-nav{ padding:14px 24px; }
.section-label{ font-family:'Hanken Grotesk',sans-serif; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:#A99B83; margin:0 6px 8px; }
.nav-item{ width:100%; text-align:left; display:flex; align-items:center; justify-content:space-between; gap:10px; background:transparent; border:none; border-radius:9px; padding:12px 12px; cursor:pointer; transition:background .16s ease; }
.nav-item:hover{ background:#EBE1CC; }
.nav-name{ font-family:'Newsreader',serif; font-size:18px; color:#2A2520; }
.nav-zh{ font-family:'Noto Serif SC',serif; font-size:14px; color:#BCAD92; flex:none; }

.home-account{ display:flex; align-items:center; gap:12px; }
.footer-synced{ font-family:'Newsreader',serif; font-style:italic; font-size:14px; color:#9D9178; }
.footer-link{ background:transparent; border:none; cursor:pointer; font-family:'Hanken Grotesk',sans-serif; font-size:13px; color:#A2967E; text-decoration:underline; text-underline-offset:3px; padding:0; }
.footer-link:hover{ color:#5C5141; }
.login-btn{ font-family:'Hanken Grotesk',sans-serif; font-weight:600; font-size:14px; color:#F4EEE2; background:#A8412C; border:none; border-radius:10px; padding:11px 24px; cursor:pointer; box-shadow:0 2px 10px rgba(168,65,44,.25); transition:background .18s ease,transform .14s ease,box-shadow .2s ease; }
.login-btn:hover{ background:#923623; transform:translateY(-1px); box-shadow:0 5px 16px rgba(168,65,44,.30); }
.login-btn:active{ transform:translateY(0); }
.settings-btn{ font-family:'Hanken Grotesk',sans-serif; font-weight:500; font-size:13.5px; color:#5C5141; background:#EFE6D2; border:1px solid #E0D5BD; border-radius:9px; padding:9px 18px; cursor:pointer; transition:background .18s ease; }
.settings-btn:hover{ background:#E7DBC2; }

.stage{ display:flex; align-items:center; justify-content:center; padding:48px 56px; }
.stage-grid{ width:100%; max-width:880px; display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.big-card{ background:#FCF8EF; border:1px solid #E2D8C4; border-radius:18px; padding:30px 30px; min-height:300px; display:flex; flex-direction:column; justify-content:space-between; box-shadow:0 1px 2px rgba(60,48,30,.05); }
button.big-card{ text-align:left; cursor:pointer; transition:transform .14s ease,border-color .2s ease,box-shadow .2s ease; }
button.big-card:hover{ border-color:#CDBFA4; box-shadow:0 12px 30px rgba(60,48,30,.12); transform:translateY(-2px); }
button.big-card:active{ transform:translateY(0); }
.big-card-zh{ font-family:'Noto Serif SC',serif; font-size:30px; color:#E2D4BA; line-height:1; }
.big-card-body{ display:flex; flex-direction:column; }
.big-card-title{ font-family:'Newsreader',serif; font-size:27px; font-weight:500; color:#2A2520; line-height:1.15; }
.big-card-sub{ font-family:'Newsreader',serif; font-style:italic; font-size:16px; color:#8C8068; margin-top:8px; line-height:1.45; }
.time-row{ display:flex; gap:10px; margin-top:20px; flex-wrap:wrap; }
.time-btn{ flex:1; min-width:84px; font-family:'Hanken Grotesk',sans-serif; font-weight:500; font-size:14px; color:#43392C; background:#F3ECDD; border:1px solid #E2D8C4; border-radius:9px; padding:13px 8px; cursor:pointer; transition:background .18s ease,border-color .18s ease; }
.time-btn:hover{ background:#ECE2CF; border-color:#CDBFA4; }

/* ===== persistent app shell: rail (desktop) + main ===== */
.app-root{ min-height:100vh; width:100%; }
.app-main{ width:100%; }
.rail{ display:none; }

@media (min-width:900px){
  .app-root{ display:flex; flex-direction:row; align-items:stretch; }
  .app-main{ flex:1 1 auto; min-width:0; }
  .rail{ display:flex; flex-direction:column; flex:none; width:300px; background:#F4EDDD; border-right:1px solid #E6DCC6;
    position:sticky; top:0; height:100vh; align-self:flex-start; overflow:auto; }
  .rail-brand{ padding:40px 30px 16px; }
  .rail-nav{ flex:1 1 auto; padding:14px 24px; }
  .rail-login{ padding:20px 30px 30px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
  /* on desktop the rail is the sidebar, so the home screen shows only its stage */
  .home-page{ display:block; min-height:auto; }
  .home-page > .side-brand, .home-page > .side-nav, .home-page > .home-account{ display:none; }
  .stage{ min-height:100vh; }
  .stage-grid{ max-width:1000px; }
}
@media (min-width:1300px){ .rail{ width:340px; } }

/* mobile: clean stack (brand, cards, other ways, login bottom-right) */
@media (max-width:899px){
  .home-page{ display:flex; flex-direction:column; min-height:100vh; }
  .side-brand, .side-nav{ background:transparent; }
  .side-brand{ padding:34px 24px 6px; }
  .stage{ padding:18px 24px; }
  .stage-grid{ grid-template-columns:1fr; max-width:none; gap:16px; }
  .big-card{ min-height:0; }
  .side-nav{ padding:14px 18px 0; }
  .home-account{ margin-top:auto; padding:20px 24px 28px; justify-content:flex-end; }
}