@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('fonts/Inter.woff2') format('woff2');}
@font-face{font-family:'Lora';font-style:normal;font-weight:400 700;font-display:swap;src:url('fonts/Lora.woff2') format('woff2');}
@font-face{font-family:'Dancing Script';font-style:normal;font-weight:400 700;font-display:swap;src:url('fonts/DancingScript.woff2') format('woff2');}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400 700;font-display:swap;src:url('fonts/Fraunces.woff2') format('woff2');}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:400 700;font-display:swap;src:url('fonts/FrauncesItalic.woff2') format('woff2');}

.ue-brand{display:inline-flex;align-items:center;gap:7px;min-width:0;flex:0 1 auto;line-height:1;user-select:none;}
.ue-brand__mark{display:block;width:38px;height:31px;object-fit:contain;flex:0 0 auto;}
.ue-brand__divider{width:1.5px;height:27px;border-radius:999px;background:#00A878;flex:0 0 auto;}
.ue-brand__wordmark{min-width:0;white-space:nowrap;}
.ue-brand__wordmark--en{display:flex;flex-direction:column;gap:2px;font-family:"Inter",system-ui,sans-serif;font-weight:600;letter-spacing:.16em;}
.ue-brand__ultimate{color:var(--ue-brand-primary,currentColor);font-size:10px;}
.ue-brand__english{color:#00A878;font-size:9.5px;letter-spacing:.18em;}
.ue-brand__wordmark--zh{color:var(--ue-brand-primary,currentColor);font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;font-size:18px;font-weight:700;letter-spacing:.08em;}
.dark .ue-brand{--ue-brand-primary:#F5F0E6;}
.light .ue-brand{--ue-brand-primary:#0B1720;}
@media(max-width:380px){
  .ue-brand{gap:5px;}
  .ue-brand__mark{width:33px;height:27px;}
  .ue-brand__divider{height:23px;}
  .ue-brand__ultimate{font-size:8.8px;}
  .ue-brand__english{font-size:8.4px;}
  .ue-brand__wordmark--zh{font-size:16px;letter-spacing:.05em;}
}
@media(max-width:335px){
  .ue-brand__divider,.ue-brand__wordmark{display:none;}
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html,body,#root{height:100%;min-height:100dvh;width:100%;}
body{font-family:'Inter',system-ui,sans-serif;overflow:hidden;}
button{font-family:'Inter',system-ui,sans-serif;}
.cn{font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;}
::-webkit-scrollbar{width:4px;height:4px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{border-radius:99px;}
.dark ::-webkit-scrollbar-thumb{background:#3A3028;}
.light ::-webkit-scrollbar-thumb{background:#C8B89A;}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.35;}}
@keyframes spin{to{transform:rotate(360deg);}}
.fade-up{animation:fadeUp .28s ease;}
textarea{font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;}

/* Safe area for mobile browsers (Netlify/Chrome) */
#root{padding-bottom:env(safe-area-inset-bottom);}

/* ── RESPONSIVE LAYOUT ─────────────────────────────────────────────────────── */
.app-container{max-width:640px;margin:0 auto;}
.bottom-nav{max-width:640px;margin:0 auto;}
.book-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;padding:0 6px;}
@media(min-width:600px){.book-grid{grid-template-columns:repeat(3,1fr);}}
@media(min-width:1024px){
  /* Desktop keeps a bounded reading-width column rather than stretching
     edge-to-edge on wide monitors -- the app targets any device, not just
     phone, so this should read as a deliberate editorial layout rather
     than a maximized catalogue wall. */
  .app-container,.bottom-nav{max-width:1200px;margin:0 auto;}
  .book-grid{grid-template-columns:repeat(4,1fr);gap:14px;padding:0 14px;}
}