@import url(https://fonts.googleapis.com/css2?family=Literata:opsz,wght@7..72,500;7..72,700&family=Source+Sans+3:wght@400;600&display=swap);
html, body {
  width: 100%;
  min-height: 100vh;
  padding: 0;
  margin: 0;
  color: #191919;
  font-family: 'Source Sans 3', sans-serif;
  background-color: #EDEDED;
  background-image: linear-gradient(165deg, #D8F5E6 0%, #E8F8EF 28%, #EDEDED 58%, #F5F5F5 100%);
  background-attachment: fixed;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
* {
  box-sizing: border-box;
}
@media (max-width: 720px) html, body {
  background-attachment: scroll;
}
h1, h2, h3 {
  margin: 0;
  font-family: 'Literata', serif;
  font-weight: 700;
}
a {
  color: #07C160;
  text-decoration: none;
}
pre.ref-body {
  margin: 0;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.95rem;
  line-height: 1.55em;
  white-space: pre-wrap;
}
.skel {
  border-radius: 8px;
  background: linear-gradient(90deg, #E4E4E4 0%, #F2F2F2 45%, #E4E4E4 90%);
  background-size: 200% 100%;
  animation: skel-shimmer 1.35s ease-in-out infinite;
}
.skel-line {
  height: 0.85rem;
  border-radius: 6px;
  background: linear-gradient(90deg, #E4E4E4 0%, #F2F2F2 45%, #E4E4E4 90%);
  background-size: 200% 100%;
  animation: skel-shimmer 1.35s ease-in-out infinite;
}
.skel-line.w40 {
  width: 40%;
}
.skel-line.w55 {
  width: 55%;
}
.skel-line.w70 {
  width: 70%;
}
.skel-line.w85 {
  width: 85%;
}
.skel-line.h-lg {
  height: 1.25rem;
}
.main {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  background-color: #EDEDED;
  background-image: linear-gradient(165deg, #D8F5E6 0%, #E8F8EF 28%, #EDEDED 58%, #F5F5F5 100%);
  background-attachment: fixed;
  overflow-x: hidden;
}
.boot {
  display: flex;
  min-height: 100vh;
  justify-content: center;
  align-items: center;
  color: #888888;
  background-color: #EDEDED;
  background-image: linear-gradient(165deg, #D8F5E6 0%, #E8F8EF 28%, #EDEDED 58%, #F5F5F5 100%);
  background-attachment: fixed;
}
@media (max-width: 720px) .main, .boot {
  background-attachment: scroll;
}
.admin {
  display: flex;
  width: 100%;
  padding: 1.5rem;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 1080px;
  margin: 0 auto;
  box-sizing: border-box;
}
.admin .admin-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 1rem;
}
.admin .admin-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.admin h1 {
  color: #07C160;
  font-size: 1.85rem;
}
.admin .admin-sub {
  color: #888888;
  font-size: 0.95rem;
}
.admin .nav-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.admin .nav-card {
  display: flex;
  padding: 1.4rem;
  border: solid #E5E5E5 1px;
  border-radius: 16px;
  cursor: pointer;
  flex-direction: column;
  gap: 0.55rem;
  background-color: #FFFFFF;
  box-shadow: 0 4px 16px rgba(26, 26, 26, 0.04);
  text-align: left;
  font: inherit;
}
.admin .nav-card h2 {
  color: #191919;
  font-size: 1.25rem;
}
.admin .nav-card p {
  color: #888888;
  font-size: 0.92rem;
}
.admin .member-list, .skill-grid {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.admin .skill-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.admin .member-row, .skill-card {
  display: flex;
  padding: 1.1rem;
  border: solid #E5E5E5 1px;
  border-radius: 14px;
  justify-content: space-between;
  align-items: center;
  gap: 0.85rem;
  background-color: #FFFFFF;
  flex-wrap: wrap;
}
.admin .skill-card {
  cursor: pointer;
  flex-direction: column;
  align-items: stretch;
  font: inherit;
  text-align: left;
  box-shadow: 0 4px 14px rgba(26, 26, 26, 0.04);
}
.admin .skill-card h3 {
  color: #191919;
  font-size: 1.05rem;
}
.admin .skill-card p {
  color: #888888;
  font-size: 0.88rem;
}
.admin .member-main {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
  flex: 1;
}
.admin .member-name {
  font-size: 1rem;
  font-weight: 600;
}
.admin .member-meta {
  color: #888888;
  font-size: 0.85rem;
}
.admin .member-stats {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.admin .stat {
  padding: 0.25rem 0.55rem;
  border-radius: 8px;
  color: #06AD56;
  font-size: 0.82rem;
  font-weight: 600;
  background-color: #E8F8EF;
}
.admin .stat.warn {
  color: #FA5151;
  background-color: #FFF0F0;
}
.admin .badge {
  display: inline-block;
  padding: 0.15rem 0.45rem;
  margin-right: 0.35rem;
  border-radius: 6px;
  color: #888888;
  font-size: 0.75rem;
  background-color: #F0F0F0;
}
.admin .badge.off {
  color: #FA5151;
  background-color: #FFF0F0;
}
.admin .modal-backdrop {
  display: flex;
  padding: 1rem;
  justify-content: center;
  align-items: center;
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(25, 25, 25, 0.45);
  box-sizing: border-box;
}
.admin .modal {
  display: flex;
  width: 100%;
  padding: 1.25rem;
  border-radius: 16px;
  flex-direction: column;
  gap: 0.85rem;
  background-color: #FFFFFF;
  max-width: 720px;
  max-height: 90vh;
  overflow: auto;
  box-shadow: 0 18px 48px rgba(0,0,0,0.18);
  box-sizing: border-box;
}
.admin .modal h2 {
  color: #07C160;
  font-size: 1.2rem;
}
.admin .modal .grid2 {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 1fr 1fr;
}
.admin .modal label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.9rem;
  font-weight: 600;
}
.admin .modal input, textarea {
  padding: 0.55rem 0.75rem;
  border: solid #E5E5E5 1px;
  border-radius: 8px;
  font-weight: 400;
  background-color: white;
  font: inherit;
}
.admin .modal textarea {
  min-height: 140px;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.9rem;
  line-height: 1.45em;
  resize: vertical;
}
.admin .modal textarea.tall {
  min-height: 240px;
}
.admin .modal .checks {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.admin .error {
  color: #FA5151;
}
.admin .notice {
  color: #07C160;
}
.admin button.primary {
  padding: 0.6rem 1.1rem;
  border: unset;
  border-radius: 8px;
  cursor: pointer;
  align-self: flex-start;
  color: white;
  background-color: #07C160;
}
.admin button.primary:disabled {
  cursor: not-allowed;
  background-color: #888888;
  opacity: 0.75;
}
.admin button.ghost {
  padding: 0.5rem 0.85rem;
  border: solid #E5E5E5 1px;
  border-radius: 8px;
  cursor: pointer;
  background-color: transparent;
}
.admin button.secondary {
  padding: 0.5rem 0.85rem;
  border: solid #07C160 1px;
  border-radius: 8px;
  cursor: pointer;
  color: #07C160;
  background-color: transparent;
}
@media (max-width: 720px) .admin .modal .grid2 {
  grid-template-columns: 1fr;
}
.ws {
  display: flex;
  width: 100%;
  min-height: 100vh;
  flex-direction: column;
  color: #191919;
  background-color: #EDEDED;
}
.ws .ws-top {
  display: flex;
  padding: 0.65rem 1rem;
  border-bottom-style: solid;
  border-bottom-color: #E5E5E5;
  border-bottom-width: 1px;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  color: #191919;
  background-color: #FFFFFF;
  flex-shrink: 0;
}
.ws .ws-top .ws-top-left {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
  flex: 1;
}
.ws .ws-top .ws-top-actions {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-shrink: 0;
}
.ws .ws-top .ws-view-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}
.ws .ws-top .ws-back {
  padding: 0.35rem 0.65rem;
  border: unset;
  border-radius: 6px;
  cursor: pointer;
  color: #07C160;
  background-color: #E8F8EF;
  font: inherit;
  font-size: 0.9rem;
  flex-shrink: 0;
  white-space: nowrap;
}
.ws .ws-top .ws-book-title {
  margin: 0;
  color: #191919;
  font-size: 1.15rem;
  font-weight: 700;
  min-width: 0;
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ws .ws-top .ws-stage {
  color: #7F7F7F;
  font-size: 0.85rem;
  white-space: nowrap;
  flex-shrink: 0;
}
.ws .ws-top .ws-meta {
  color: #888888;
  font-size: 0.8rem;
  white-space: nowrap;
  flex-shrink: 0;
}
.ws .ws-body {
  display: flex;
  min-height: 0;
  flex-grow: 1;
  overflow: hidden;
}
.ws .ws-side {
  display: flex;
  width: 220px;
  border-right-style: solid;
  border-right-color: #E5E5E5;
  border-right-width: 1px;
  flex-direction: column;
  background-color: #F7F7F7;
  flex-shrink: 0;
  overflow: auto;
  transition: width 0.18s ease;
}
.ws .ws-side.collapsed {
  width: 44px;
  overflow: hidden;
}
.ws .ws-side .left-collapsed {
  display: flex;
  width: 100%;
  height: 100%;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  border: unset;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  background-color: transparent;
  font: inherit;
}
.ws .ws-side .left-collapsed-label {
  padding-top: 0.35rem;
  margin: 0;
  color: #888888;
  font-size: 0.78rem;
  font-weight: 600;
  writing-mode: vertical-rl;
  letter-spacing: 0.12em;
  user-select: none;
}
.ws .ws-side .side-panel-head {
  display: flex;
  padding: 0.65rem 0.75rem;
  border-bottom-style: solid;
  border-bottom-color: #E5E5E5;
  border-bottom-width: 1px;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}
.ws .ws-side .side-panel-title {
  margin: 0;
  color: #07C160;
  font-size: 0.92rem;
  font-weight: 700;
}
.ws .ws-side .panel-toggle {
  padding: 0.3rem 0.45rem;
  border: solid #E5E5E5 1px;
  border-radius: 6px;
  cursor: pointer;
  color: #888888;
  font-size: 0.85rem;
  background-color: transparent;
  flex-shrink: 0;
  line-height: 1;
}
.ws .ws-side .side-label {
  padding: 0.75rem 1rem;
  color: #888888;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ws .ws-side .nav-item {
  display: block;
  width: 100%;
  padding: 0.7rem 1rem;
  border: unset;
  cursor: pointer;
  color: #191919;
  text-align: left;
  background-color: transparent;
  font: inherit;
  border-left: 3px solid transparent;
}
.ws .ws-side .nav-item:hover {
  background-color: #F0F0F0;
}
.ws .ws-side .nav-item.active {
  color: #07C160;
  font-weight: 600;
  background-color: #E8F8EF;
  border-left-color: #07C160;
}
.ws .ws-side .nav-item.chapter {
  padding: 0.55rem 1rem;
  padding-left: 1.6rem;
  font-size: 0.92rem;
}
.ws .ws-side .vol-head {
  display: flex;
  padding: 0.25rem 0.55rem;
  align-items: center;
  gap: 0.25rem;
}
.ws .ws-side .vol-head .vol-toggle {
  padding: 0.45rem 0.35rem;
  border: unset;
  cursor: pointer;
  color: #191919;
  font-weight: 600;
  background-color: transparent;
  font: inherit;
  font-size: 0.92rem;
  flex-shrink: 0;
}
.ws .ws-side .vol-head .vol-title {
  min-width: 0;
  padding: 0.45rem 0.2rem;
  border: unset;
  cursor: pointer;
  flex-grow: 1;
  color: #191919;
  text-align: left;
  font-weight: 600;
  background-color: transparent;
  font: inherit;
  font-size: 0.92rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ws .ws-side .vol-head .vol-rename {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.25rem;
  flex-grow: 1;
}
.ws .ws-side .vol-head .vol-rename .vol-prefix {
  color: #07C160;
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}
.ws .ws-side .vol-head .vol-rename input {
  display: block;
  min-width: 0;
  padding: 0.3rem 0.35rem;
  border: solid #E5E5E5 1px;
  border-radius: 4px;
  flex-grow: 1;
  color: #191919;
  font-size: 0.85rem;
  font-weight: 600;
  background-color: white;
  box-sizing: border-box;
  font-family: "Source Sans 3", "PingFang SC", "Microsoft YaHei", sans-serif;
}
.ws .ws-side .vol-head .vol-add {
  padding: 0.25rem 0.4rem;
  border: unset;
  border-radius: 4px;
  cursor: pointer;
  color: #07C160;
  font-size: 0.75rem;
  background-color: transparent;
  white-space: nowrap;
  flex-shrink: 0;
}
.ws .ws-side .side-foot {
  padding: 1rem;
  margin-top: auto;
  border-top-style: solid;
  border-top-color: #E5E5E5;
  border-top-width: 1px;
}
.ws .ws-side .side-actions {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.ws .ws-main {
  display: flex;
  min-width: 0;
  flex-direction: column;
  flex-grow: 1;
  background-color: #FFFFFF;
  overflow: hidden;
}
.ws .ws-main .editor-wrap {
  display: flex;
  padding: 1.25rem;
  flex-direction: column;
  gap: 0.75rem;
  flex-grow: 1;
  overflow: hidden;
  min-height: 0;
  min-width: 0;
  box-sizing: border-box;
  --editor-font-size: 16px;
  --editor-title-size: 24px;
  --editor-line-height: 2;
  --editor-max-width: 100%;
  --editor-bg-image: none;
  --editor-bg-size: auto;
}
.ws .ws-main .editor-sheet {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 0.75rem;
  flex-grow: 1;
  min-height: 0;
  min-width: 0;
  max-width: var(--editor-max-width);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}
.ws .ws-main .chapter-title-row {
  display: flex;
  border: unset;
  align-items: center;
  gap: 0.55rem;
  background-color: transparent;
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 0 calc(var(--editor-font-size) * 2);
  font-size: var(--editor-title-size);
  line-height: var(--editor-line-height);
  min-height: calc(var(--editor-title-size) * var(--editor-line-height));
  background-image: var(--editor-bg-image);
  background-size: var(--editor-bg-size);
  background-repeat: repeat-x;
  background-position: left bottom;
  background-attachment: local;
  background-origin: content-box;
  background-clip: content-box;
}
.ws .ws-main .chapter-title-row .chapter-title-prefix {
  color: #191919;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
  font-size: 1em;
  line-height: inherit;
  font-family: "Source Sans 3", "PingFang SC", "Microsoft YaHei", sans-serif;
}
.ws .ws-main .chapter-title-row input {
  display: block;
  height: 100%;
  min-width: 0;
  padding: 0;
  border: unset;
  flex-grow: 1;
  color: #191919;
  font-weight: 700;
  background-color: transparent;
  box-sizing: border-box;
  outline: none;
  font-size: 1em;
  line-height: inherit;
  font-family: "Source Sans 3", "PingFang SC", "Microsoft YaHei", sans-serif;
}
.ws .ws-main .editor-wrap textarea {
  display: block;
  width: 100%;
  height: 100%;
  border: unset;
  flex-grow: 1;
  color: #191919;
  background-color: transparent;
  box-sizing: border-box;
  resize: none;
  min-width: 0;
  min-height: 280px;
  max-width: 100%;
  outline: none;
  padding: 0.75em calc(var(--editor-font-size) * 2);
  font-size: var(--editor-font-size);
  line-height: var(--editor-line-height);
  font-family: "Source Sans 3", "PingFang SC", "Microsoft YaHei", sans-serif;
  background-image: var(--editor-bg-image);
  background-size: var(--editor-bg-size);
  background-repeat: repeat;
  background-attachment: local;
  background-origin: content-box;
  background-clip: content-box;
}
.ws .ws-right {
  display: flex;
  width: 320px;
  border-left-style: solid;
  border-left-color: #E5E5E5;
  border-left-width: 1px;
  flex-direction: column;
  background-color: #F7F7F7;
  flex-shrink: 0;
  overflow: auto;
  transition: width 0.18s ease;
}
.ws .ws-right.collapsed {
  width: 44px;
  overflow: hidden;
}
.ws .ws-right .right-collapsed {
  display: flex;
  width: 100%;
  height: 100%;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  border: unset;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  background-color: transparent;
  font: inherit;
}
.ws .ws-right .right-collapsed-label {
  padding-top: 0.35rem;
  margin: 0;
  color: #888888;
  font-size: 0.78rem;
  font-weight: 600;
  writing-mode: vertical-rl;
  letter-spacing: 0.12em;
  user-select: none;
}
.ws .ws-right .panel-head {
  display: flex;
  padding: 0.75rem 1rem;
  border-bottom-style: solid;
  border-bottom-color: #E5E5E5;
  border-bottom-width: 1px;
  justify-content: space-between;
  align-items: start;
  gap: 0.5rem;
}
.ws .ws-right .panel-head .panel-head-text {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}
.ws .ws-right .panel-head h2 {
  margin: 0;
  color: #07C160;
  font-size: 1rem;
}
.ws .ws-right .panel-head p {
  margin: 0;
  color: #888888;
  font-size: 0.82rem;
}
.ws .ws-right .panel-toggle {
  padding: 0.3rem 0.45rem;
  border: solid #E5E5E5 1px;
  border-radius: 6px;
  cursor: pointer;
  color: #888888;
  font-size: 0.85rem;
  background-color: transparent;
  flex-shrink: 0;
  line-height: 1;
}
.ws .ws-right .skill-block {
  padding: 1rem;
  border-bottom-style: solid;
  border-bottom-color: #E5E5E5;
  border-bottom-width: 1px;
}
.ws .ws-right .skill-group {
  margin-bottom: 0.75rem;
  color: #888888;
  font-size: 0.75rem;
  font-weight: 600;
}
.ws .ws-right .skill-card {
  display: flex;
  padding: 0.75rem;
  margin-bottom: 0.65rem;
  border: solid #E5E5E5 1px;
  border-radius: 10px;
  flex-direction: column;
  gap: 0.45rem;
  background-color: white;
}
.ws .ws-right .skill-card strong {
  font-size: 0.95rem;
}
.ws .ws-right .skill-card p {
  margin: 0;
  color: #888888;
  font-size: 0.82rem;
  line-height: 1.4em;
}
.ws .ws-right .field {
  display: flex;
  margin-bottom: 0.65rem;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.85rem;
  font-weight: 600;
}
.ws .ws-right .field input, .field textarea {
  padding: 0.55rem;
  border: solid #E5E5E5 1px;
  border-radius: 8px;
  font-weight: 400;
  background-color: white;
}
.ws .ws-right .refs {
  display: flex;
  padding: 1rem;
  flex-direction: column;
  gap: 0.75rem;
}
.ws .ws-right .ref {
  display: flex;
  padding: 0.75rem;
  border: solid #E5E5E5 1px;
  border-radius: 10px;
  flex-direction: column;
  gap: 0.5rem;
  background-color: white;
}
.ws .ws-right .ref .ref-head {
  display: flex;
  justify-content: space-between;
  gap: 0.4rem;
  font-size: 0.85rem;
}
.ws .ws-right .ref .ref-body {
  max-height: 180px;
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.5em;
  white-space: pre-wrap;
  overflow: auto;
}
.ws .banner {
  padding: 0.55rem 1rem;
  font-size: 0.9rem;
  flex-shrink: 0;
}
.ws .banner.error {
  color: #FA5151;
  background-color: #FFF0F0;
}
.ws .banner.notice {
  color: #07C160;
  background-color: #E8F8EF;
}
.ws button.primary {
  padding: 0.5rem 0.95rem;
  border: unset;
  border-radius: 8px;
  cursor: pointer;
  align-self: flex-start;
  color: white;
  background-color: #07C160;
  flex-shrink: 0;
  white-space: nowrap;
}
.ws button.secondary {
  padding: 0.5rem 0.95rem;
  border: solid #07C160 1px;
  border-radius: 8px;
  cursor: pointer;
  align-self: flex-start;
  color: #07C160;
  background-color: transparent;
  flex-shrink: 0;
  white-space: nowrap;
}
.ws button.ghost {
  padding: 0.4rem 0.7rem;
  border: solid #E5E5E5 1px;
  border-radius: 8px;
  cursor: pointer;
  background-color: transparent;
  flex-shrink: 0;
  white-space: nowrap;
}
.ws .hint {
  margin: 0;
  color: #888888;
  font-size: 0.85rem;
}
.ws .empty-center {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  color: #888888;
}
.ws-guide-backdrop {
  display: flex;
  position: fixed;
  padding: 1.25rem;
  justify-content: center;
  align-items: center;
  inset: 0;
  z-index: 1000;
  background: rgba(25, 25, 25, 0.48);
  backdrop-filter: blur(2px);
  box-sizing: border-box;
}
.editor-settings-backdrop {
  display: flex;
  position: fixed;
  padding: 1.25rem;
  justify-content: center;
  align-items: center;
  inset: 0;
  z-index: 1000;
  background: rgba(25, 25, 25, 0.18);
  box-sizing: border-box;
}
.editor-settings {
  display: flex;
  width: 100%;
  padding: 1.25rem;
  border: solid #E5E5E5 1px;
  border-radius: 14px;
  flex-direction: column;
  gap: 0.15rem;
  background-color: #FFFFFF;
  max-width: 420px;
  box-shadow: 0 20px 56px rgba(0,0,0,0.22);
  box-sizing: border-box;
}
.editor-settings .settings-head {
  display: flex;
  margin-bottom: 0.85rem;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
}
.editor-settings .settings-title {
  margin: 0;
  color: #191919;
  font-size: 1.05rem;
  font-weight: 700;
}
.editor-settings .settings-close {
  padding: 0.3rem 0.65rem;
  border: solid #E5E5E5 1px;
  border-radius: 8px;
  cursor: pointer;
  color: #888888;
  font-size: 0.85rem;
  background-color: transparent;
}
.editor-settings .settings-row {
  display: flex;
  margin-bottom: 0.7rem;
  align-items: center;
  gap: 0.65rem;
}
.editor-settings .settings-row:last-child {
  margin: 0;
}
.editor-settings .settings-row .settings-label {
  width: 4.5rem;
  color: #888888;
  font-size: 0.85rem;
  flex-shrink: 0;
}
.editor-settings .settings-row input[type="range"] {
  min-width: 0;
  margin: 0;
  flex-grow: 1;
  accent-color: #07C160;
}
.editor-settings .settings-row .settings-value {
  width: 3.5rem;
  color: #191919;
  text-align: right;
  font-size: 0.85rem;
  font-weight: 600;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.editor-settings .settings-row .settings-seg {
  display: flex;
  gap: 0.35rem;
  flex-grow: 1;
  flex-wrap: wrap;
}
.ws-guide-modal {
  display: flex;
  width: 100%;
  padding: 1.5rem;
  border: solid #E5E5E5 1px;
  border-radius: 14px;
  flex-direction: column;
  gap: 1rem;
  background-color: #FFFFFF;
  max-width: 400px;
  box-shadow: 0 20px 56px rgba(0,0,0,0.22);
  box-sizing: border-box;
}
.ws-guide-modal .ws-guide-kicker {
  margin: 0;
  color: #07C160;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}
.ws-guide-modal h2 {
  margin: 0;
  color: #191919;
  font-size: 1.25rem;
}
.ws-guide-modal .ws-guide-lead {
  margin: 0;
  color: #888888;
  font-size: 0.92rem;
  line-height: 1.55em;
}
.ws-guide-modal .ws-guide-steps {
  display: flex;
  padding: 0;
  margin: 0;
  flex-direction: column;
  gap: 0.5rem;
  list-style: none;
}
.ws-guide-modal .ws-guide-step {
  display: flex;
  padding: 0.7rem 0.85rem;
  border: solid #E5E5E5 1px;
  border-radius: 10px;
  align-items: start;
  gap: 0.75rem;
  background-color: #F7F7F7;
}
.ws-guide-modal .ws-guide-step.active {
  border: solid #07C160 1px;
  background-color: #E8F8EF;
}
.ws-guide-modal .ws-guide-step .ws-guide-step-no {
  display: flex;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 0.78rem;
  font-weight: 700;
  background-color: #07C160;
  flex-shrink: 0;
}
.ws-guide-modal .ws-guide-step.muted .ws-guide-step-no {
  color: #888888;
  background-color: #E5E5E5;
}
.ws-guide-modal .ws-guide-step .ws-guide-step-body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.ws-guide-modal .ws-guide-step strong {
  color: #191919;
  font-size: 0.9rem;
  font-weight: 700;
}
.ws-guide-modal .ws-guide-step span {
  color: #888888;
  font-size: 0.8rem;
  line-height: 1.4em;
}
.ws-guide-modal .ws-guide-actions {
  display: flex;
  margin-top: 0.15rem;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}
.ws-guide-modal .ws-guide-actions button.primary {
  padding: 0.7rem 1.1rem;
  flex-grow: 1;
  font-size: 0.95rem;
  font-weight: 600;
  justify-content: center;
  text-align: center;
}
.ws-guide-modal .ws-guide-actions button.ghost {
  padding: 0.7rem 0.95rem;
}
.ws-ref-mode {
  display: flex;
  position: fixed;
  flex-direction: column;
  color: #191919;
  background-color: #EDEDED;
  inset: 0;
  z-index: 1100;
  box-sizing: border-box;
}
.ws-ref-mode-top {
  display: flex;
  padding: 0.65rem 1rem;
  border-bottom-style: solid;
  border-bottom-color: #E5E5E5;
  border-bottom-width: 1px;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  background-color: #FFFFFF;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.ws-ref-mode-top-left {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
  flex: 1;
  flex-wrap: wrap;
}
.ws-ref-mode-title {
  margin: 0;
  color: #191919;
  font-size: 1.05rem;
  font-weight: 700;
}
.ws-ref-mode-meta {
  color: #888888;
  font-size: 0.82rem;
}
.ws-ref-mode-actions {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.ws-ref-mode-body {
  display: grid;
  min-height: 0;
  flex-grow: 1;
  overflow: hidden;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}
.ws-ref-pane {
  display: flex;
  min-width: 0;
  min-height: 0;
  border-right-style: solid;
  border-right-color: #E5E5E5;
  border-right-width: 1px;
  flex-direction: column;
  background-color: #FFFFFF;
  overflow: hidden;
  height: 100%;
}
.ws-ref-pane.write {
  border: unset;
  background-color: #FFFFFF;
}
.ws-ref-pane-head {
  display: flex;
  padding: 0.55rem 0.9rem;
  border-bottom-style: solid;
  border-bottom-color: #E5E5E5;
  border-bottom-width: 1px;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}
.ws-ref-pane-label {
  margin: 0;
  color: #191919;
  font-size: 0.88rem;
  font-weight: 700;
}
.ws-ref-pane-tabs {
  display: flex;
  padding: 0.45rem 0.75rem;
  border-bottom-style: solid;
  border-bottom-color: #E5E5E5;
  border-bottom-width: 1px;
  gap: 0.35rem;
  flex-shrink: 0;
  overflow-x: auto;
  flex-wrap: nowrap;
}
.ws-ref-pane-tabs button {
  padding: 0.35rem 0.65rem;
  border: solid #E5E5E5 1px;
  border-radius: 999px;
  cursor: pointer;
  color: #888888;
  font-size: 0.8rem;
  background-color: transparent;
  white-space: nowrap;
  flex-shrink: 0;
}
.ws-ref-pane-tabs button.on {
  border: solid #07C160 1px;
  color: #06AD56;
  font-weight: 600;
  background-color: #E8F8EF;
}
.ws-ref-pane-body {
  display: flex;
  min-height: 0;
  flex-direction: column;
  flex-grow: 1;
  overflow: hidden;
}
.ws-ref-mode .editor-wrap {
  display: flex;
  padding: 1.15rem;
  flex-direction: column;
  flex-grow: 1;
  background-color: #FFFFFF;
  overflow: hidden;
  min-height: 0;
  min-width: 0;
  height: 100%;
  box-sizing: border-box;
}
.ws-ref-mode .editor-sheet {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 0.55rem;
  flex-grow: 1;
  min-height: 0;
  min-width: 0;
  max-width: 100% !important;
  height: 100%;
  margin: 0;
  box-sizing: border-box;
}
.ws-ref-mode .chapter-title-row {
  display: flex;
  border: unset;
  align-items: center;
  gap: 0.55rem;
  background-color: transparent;
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 0 calc(var(--editor-font-size) * 2);
  font-size: var(--editor-title-size);
  line-height: var(--editor-line-height);
  min-height: calc(var(--editor-title-size) * var(--editor-line-height));
  background-image: var(--editor-bg-image);
  background-size: var(--editor-bg-size);
  background-repeat: repeat-x;
  background-position: left bottom;
  background-attachment: local;
  background-origin: content-box;
  background-clip: content-box;
}
.ws-ref-mode .chapter-title-row .chapter-title-prefix {
  color: #191919;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
  font-size: 1em;
  line-height: inherit;
  font-family: "Source Sans 3", "PingFang SC", "Microsoft YaHei", sans-serif;
}
.ws-ref-mode .chapter-title-row input {
  display: block;
  height: 100%;
  min-width: 0;
  padding: 0;
  border: unset;
  flex-grow: 1;
  color: #191919;
  font-weight: 700;
  background-color: transparent;
  box-sizing: border-box;
  outline: none;
  font-size: 1em;
  line-height: inherit;
  font-family: "Source Sans 3", "PingFang SC", "Microsoft YaHei", sans-serif;
}
.ws-ref-mode .editor-wrap textarea, .ws-ref-mode .editor-ai-body {
  display: block;
  width: 100%;
  margin: 0;
  border: unset;
  flex-grow: 1;
  color: #191919;
  background-color: transparent;
  box-sizing: border-box;
  resize: none;
  min-width: 0;
  min-height: 0;
  height: 100%;
  max-width: 100%;
  outline: none;
  padding: 0.75em calc(var(--editor-font-size) * 2);
  font-size: var(--editor-font-size);
  line-height: var(--editor-line-height);
  font-family: "Source Sans 3", "PingFang SC", "Microsoft YaHei", sans-serif;
  background-image: var(--editor-bg-image);
  background-size: var(--editor-bg-size);
  background-repeat: repeat;
  background-attachment: local;
  background-origin: content-box;
  background-clip: content-box;
  white-space: pre-wrap;
  word-break: break-word;
  overflow: auto;
}
.ws-ref-empty {
  padding: 1rem;
  margin: 0;
  color: #888888;
  font-size: 0.92rem;
  line-height: 1.5em;
}
.ws .ref-actions {
  display: flex;
  margin-top: 0.55rem;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}
@media (max-width: 960px) .ws-ref-mode-body {
  grid-template-columns: 1fr;
  grid-template-rows: minmax(38vh, 0.9fr) minmax(48vh, 1.2fr);
  overflow: auto;
}
@media (max-width: 960px) .ws-ref-pane {
  border-right: none;
  border-bottom: 1px solid #E5E5E5;
  min-height: 38vh;
}
@media (max-width: 960px) .ws-ref-pane.write {
  border-bottom: none;
  min-height: 48vh;
}
@media (max-width: 960px) .ws .ws-top {
  padding: 0.55rem 0.75rem;
  flex-direction: column;
  align-items: stretch;
  gap: 0.55rem;
}
@media (max-width: 960px) .ws .ws-top-left {
  width: 100%;
  flex-wrap: wrap;
  gap: 0.5rem;
  flex: 0 0 auto;
}
@media (max-width: 960px) .ws .ws-top-actions {
  width: 100%;
  flex-wrap: wrap;
  justify-content: start;
  gap: 0.5rem;
  flex-shrink: 1;
}
@media (max-width: 960px) .ws .ws-book-title {
  font-size: 1rem;
  flex: 1 1 7rem;
  min-width: 0;
}
@media (max-width: 960px) .ws .ws-stage {
  width: 100%;
  font-size: 0.78rem;
}
@media (max-width: 960px) .ws .ws-top button.primary {
  padding: 0.42rem 0.75rem;
  font-size: 0.85rem;
}
@media (max-width: 960px) .ws .ws-top button.ghost {
  padding: 0.38rem 0.6rem;
  font-size: 0.85rem;
}
@media (max-width: 960px) .ws .ws-body {
  flex-direction: column;
  overflow: auto;
}
@media (max-width: 960px) .ws .ws-side {
  width: 100%;
  max-height: 280px;
}
@media (max-width: 960px) .ws .ws-side.collapsed {
  width: 100%;
  max-height: 48px;
}
@media (max-width: 960px) .ws .ws-side.collapsed .left-collapsed {
  padding: 0.5rem 0.75rem;
  flex-direction: row;
  justify-content: start;
}
@media (max-width: 960px) .ws .ws-side.collapsed .left-collapsed-label {
  writing-mode: horizontal-tb;
}
@media (max-width: 960px) .ws .ws-right {
  width: 100%;
  max-height: 320px;
}
@media (max-width: 960px) .ws .ws-right.collapsed {
  width: 100%;
  max-height: 48px;
}
@media (max-width: 960px) .ws .ws-right.collapsed .right-collapsed {
  padding: 0.5rem 0.75rem;
  flex-direction: row;
  justify-content: start;
}
@media (max-width: 960px) .ws .ws-right.collapsed .right-collapsed-label {
  writing-mode: horizontal-tb;
}
.books {
  display: flex;
  width: 100%;
  min-height: 100vh;
  padding: 2rem;
  flex-direction: column;
  gap: 1.35rem;
  max-width: 1180px;
  margin: 0 auto;
  box-sizing: border-box;
}
.books .books-appbar {
  display: none;
}
.books .books-fab {
  display: none;
}
.books .books-hello-mobile {
  display: none;
}
.books .books-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 1rem;
}
.books .books-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.books h1 {
  color: #07C160;
  font-size: 2.15rem;
}
.books .books-hello {
  margin-top: 0.35rem;
  color: #888888;
  font-size: 0.95rem;
}
.books .books-body {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.books .create-card {
  display: flex;
  padding: 1.35rem;
  border: solid #E5E5E5 1px;
  border-radius: 16px;
  flex-direction: column;
  gap: 0.75rem;
  background-color: #FFFFFF;
  max-width: 420px;
}
.books .create-card label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-weight: 600;
}
.books .create-card input {
  padding: 0.65rem 0.8rem;
  border: solid #E5E5E5 1px;
  border-radius: 10px;
  background-color: white;
}
.books .book-grid {
  display: grid;
  gap: 1.35rem;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.books .book-cover {
  display: flex;
  width: 100%;
  border-radius: 6px;
  cursor: pointer;
  flex-direction: column;
  color: #191919;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  user-select: none;
  box-shadow: 0 6px 18px rgba(26, 26, 26, 0.12);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.books .book-cover:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(26, 26, 26, 0.16);
}
.books .book-cover .cover-face {
  display: flex;
  padding: 0.85rem;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  color: white;
  background-color: #07C160;
  text-align: center;
  background: linear-gradient(160deg, #2AE072 0%, #07C160 55%, #06AD56 100%);
  pointer-events: none;
}
.books .book-cover .cover-title {
  font-family: 'Literata', serif;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.35em;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.books .error {
  color: #FA5151;
}
.books .empty {
  color: #888888;
}
.books .book-cover.skel-cover {
  cursor: default;
  aspect-ratio: 3 / 4;
  box-shadow: none;
  pointer-events: none;
}
.books button.primary {
  padding: 0.7rem 1.2rem;
  border: unset;
  border-radius: 999px;
  cursor: pointer;
  align-self: flex-start;
  color: white;
  background-color: #07C160;
}
.books button.ghost {
  padding: 0.5rem 0.9rem;
  border: solid #E5E5E5 1px;
  border-radius: 999px;
  cursor: pointer;
  background-color: transparent;
}
@media (max-width: 720px) .books {
  padding: 0;
  gap: 0;
  max-width: 100%;
  padding-bottom: max(5.5rem, calc(4.5rem + env(safe-area-inset-bottom, 0px)));
}
@media (max-width: 720px) .books .books-head {
  display: none;
}
@media (max-width: 720px) .books .books-appbar {
  display: flex;
  position: sticky;
  top: 0;
  padding: 0.55rem 0.75rem;
  border-bottom-style: solid;
  border-bottom-color: #E5E5E5;
  border-bottom-width: 1px;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  background-color: #FFFFFF;
  z-index: 20;
  padding-top: max(0.55rem, env(safe-area-inset-top, 0px));
}
@media (max-width: 720px) .books .books-appbar-title {
  margin: 0;
  color: #191919;
  font-family: 'Literata', serif;
  font-size: 1.15rem;
  font-weight: 700;
}
@media (max-width: 720px) .books .books-actions-mobile {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.15rem;
}
@media (max-width: 720px) .books .books-actions-mobile button.ghost {
  padding: 0.4rem 0.55rem;
  border: unset;
  color: #07C160;
  font-size: 0.88rem;
  min-height: 2.4rem;
}
@media (max-width: 720px) .books .books-hello-mobile {
  display: block;
  padding: 0.75rem 1rem 0.25rem 1rem;
  margin: 0;
  color: #888888;
  font-size: 0.9rem;
}
@media (max-width: 720px) .books .books-body {
  display: flex;
  padding-top: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  flex-direction: column;
  gap: 0.85rem;
}
@media (max-width: 720px) .books .create-card {
  border-radius: 12px;
  max-width: 100%;
}
@media (max-width: 720px) .books .book-grid {
  gap: 0.85rem;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
}
@media (max-width: 720px) .books .books-fab {
  display: inline-flex;
  position: fixed;
  bottom: max(1rem, env(safe-area-inset-bottom, 0px));
  right: 1rem;
  padding: 0.85rem 1.1rem;
  border: unset;
  border-radius: 999px;
  cursor: pointer;
  align-items: center;
  gap: 0.4rem;
  color: white;
  font-size: 0.95rem;
  font-weight: 600;
  background-color: #07C160;
  z-index: 30;
  box-shadow: 0 6px 20px rgba(7, 193, 96, 0.35);
}
.book-ctx-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: transparent;
}
.book-ctx-menu {
  position: fixed;
  min-width: 9.5rem;
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
  border: solid #E5E5E5 1px;
  border-radius: 8px;
  background-color: #FFFFFF;
  z-index: 1001;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.14);
}
.book-ctx-menu .book-ctx-label {
  padding: 0.35rem 0.85rem;
  color: #888888;
  font-size: 0.78rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 11rem;
}
.book-ctx-menu .book-ctx-sep {
  height: 1px;
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
  background-color: #E5E5E5;
}
.book-ctx-menu button.book-ctx-item {
  display: block;
  width: 100%;
  padding: 0.55rem 0.85rem;
  border: unset;
  cursor: pointer;
  color: #FA5151;
  text-align: left;
  font-size: 0.92rem;
  background-color: transparent;
}
.book-ctx-menu button.book-ctx-item:hover {
  background-color: #FFF0F0;
}
.book-ctx-menu button.book-ctx-item:disabled {
  cursor: not-allowed;
  color: #888888;
  background-color: transparent;
}
.home {
  display: flex;
  width: 100%;
  min-height: 100vh;
  flex-direction: column;
  box-sizing: border-box;
  overflow-x: hidden;
}
.home .home-hero {
  display: flex;
  width: 100%;
  min-height: 100vh;
  padding: 2rem 1.5rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.75rem;
  text-align: center;
  box-sizing: border-box;
  animation: home-fade-in 0.7s ease both;
}
.home .home-copy {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  max-width: 760px;
}
.home .home-brand {
  margin: 0;
  color: #07C160;
  font-family: 'Literata', serif;
  font-size: 2.75rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.15em;
}
.home .home-headline {
  margin: 0;
  color: #191919;
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1.35em;
}
.home .home-lead {
  margin: 0;
  color: #888888;
  font-size: 1.05rem;
  line-height: 1.55em;
  max-width: 34rem;
}
.home .home-cta {
  display: flex;
  width: 100%;
  margin-top: 0.35rem;
  flex-direction: column;
  align-items: center;
  gap: 1.15rem;
}
.home button.home-write {
  padding: 0.9rem 1.75rem;
  border: unset;
  border-radius: 999px;
  cursor: pointer;
  color: white;
  font-size: 1.05rem;
  font-weight: 600;
  background-color: #07C160;
  transition: transform 0.18s ease, background-color 0.18s ease;
}
.home button.home-write:hover {
  background-color: #06AD56;
  transform: translateY(-2px);
}
.home button.home-plat {
  margin: 0;
  font-family: inherit;
}
.home .home-platforms {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  max-width: 720px;
}
.home .home-platforms-label {
  margin: 0;
  color: #191919;
  font-size: 0.9rem;
  font-weight: 600;
}
.home .home-downloads {
  display: grid;
  width: 100%;
  gap: 0.65rem;
  grid-template-columns: repeat(auto-fill, minmax(5.4rem, 1fr));
  justify-items: stretch;
}
.home .home-plat {
  display: flex;
  width: 100%;
  padding: 0.7rem 0.45rem;
  border: solid #E5E5E5 1px;
  border-radius: 14px;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  color: #888888;
  font-size: 0.82rem;
  font-weight: 600;
  background-color: #F7F7F7;
  box-sizing: border-box;
  text-decoration: none;
  min-height: 5.75rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.home .home-plat .plat-icon {
  display: flex;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  background-color: white;
  flex-shrink: 0;
}
.home .home-plat .plat-icon svg {
  display: block;
  width: 1.2rem;
  height: 1.2rem;
}
.home .home-plat .plat-name {
  line-height: 1.2em;
  white-space: nowrap;
}
.home .home-plat .plat-badge {
  padding: 0.08rem 0.4rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.home .home-plat.ready {
  border: solid #06AD56 1px;
  cursor: pointer;
  color: white;
  background-color: #07C160;
  box-shadow: 0 8px 18px rgba(7, 193, 96, 0.28);
}
.home .home-plat.ready .plat-icon {
  color: #07C160;
  background-color: white;
}
.home .home-plat.ready .plat-badge {
  color: #06AD56;
  background-color: white;
}
.home .home-plat.ready:hover {
  background-color: #06AD56;
  transform: translateY(-3px);
  box-shadow: 0 12px 22px rgba(7, 193, 96, 0.34);
}
.home .home-plat.soon {
  border: dashed #D0D0D0 1px;
  cursor: not-allowed;
  color: #A0A0A0;
  background-color: #F5F5F5;
  opacity: 0.78;
  pointer-events: none;
  filter: grayscale(0.35);
}
.home .home-plat.soon .plat-icon {
  color: #B0B0B0;
  background-color: #EBEBEB;
}
.home .home-plat.soon .plat-badge {
  color: #8F8F8F;
  background-color: #E4E4E4;
}
.home .home-stage {
  display: flex;
  width: 100%;
  padding-top: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.35rem;
  max-width: 640px;
  animation: home-rise 0.9s 0.12s ease both;
}
.home .home-step {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  color: #191919;
  font-size: 1rem;
  font-weight: 600;
}
.home .home-step-n {
  color: #07C160;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.home .home-sep {
  padding-left: 0.15rem;
  padding-right: 0.15rem;
  opacity: 0.45;
  color: #07C160;
}
.home .home-foot {
  padding: 1.25rem 1.5rem;
  color: #888888;
  text-align: center;
  font-size: 0.85rem;
  padding-bottom: max(1.25rem, env(safe-area-inset-bottom, 0px));
}
@media (max-width: 720px) .home .home-hero {
  min-height: auto;
  padding: 1.5rem 1rem 1.25rem 1rem;
  justify-content: start;
  gap: 1.25rem;
  padding-top: max(1.5rem, env(safe-area-inset-top, 0px));
  padding-left: max(1rem, env(safe-area-inset-left, 0px));
  padding-right: max(1rem, env(safe-area-inset-right, 0px));
}
@media (max-width: 720px) .home .home-brand {
  font-size: 2.15rem;
}
@media (max-width: 720px) .home .home-headline {
  font-size: 1.3rem;
}
@media (max-width: 720px) .home .home-lead {
  font-size: 0.98rem;
  max-width: 100%;
}
@media (max-width: 720px) .home .home-cta {
  gap: 1rem;
}
@media (max-width: 720px) .home button.home-write {
  width: 100%;
  padding: 0.95rem 1.25rem;
  font-size: 1.05rem;
  max-width: 22rem;
}
@media (max-width: 720px) .home .home-downloads {
  gap: 0.5rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 720px) .home .home-plat {
  padding: 0.55rem 0.3rem;
  gap: 0.28rem;
  font-size: 0.74rem;
  min-height: 5.35rem;
}
@media (max-width: 720px) .home .home-plat .plat-icon {
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 8px;
}
@media (max-width: 720px) .home .home-plat .plat-icon svg {
  width: 1.05rem;
  height: 1.05rem;
}
@media (max-width: 720px) .home .home-plat .plat-badge {
  padding: 0.05rem 0.3rem;
  font-size: 0.62rem;
}
@media (max-width: 720px) .home .home-stage {
  gap: 0.35rem;
  font-size: 0.92rem;
  row-gap: 0.4rem;
}
@media (max-width: 720px) .home .home-step {
  font-size: 0.92rem;
}
@media (max-width: 720px) .home .home-foot {
  padding: 1rem 1rem;
  font-size: 0.78rem;
  line-height: 1.45em;
  padding-bottom: max(1rem, env(safe-area-inset-bottom, 0px));
}
@media (max-width: 400px) .home .home-brand {
  font-size: 1.9rem;
}
@media (max-width: 400px) .home .home-headline {
  font-size: 1.15rem;
}
@media (max-width: 400px) .home .home-downloads {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 400px) .home .home-sep {
  display: none;
}
@media (max-width: 400px) .home .home-stage {
  justify-content: center;
  gap: 0.55rem;
}
.auth {
  display: flex;
  min-height: 100vh;
  padding: 1.5rem;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  background-color: #EDEDED;
  background-image: linear-gradient(165deg, #D8F5E6 0%, #E8F8EF 28%, #EDEDED 58%, #F5F5F5 100%);
  background-attachment: fixed;
  box-sizing: border-box;
}
.auth-card {
  display: flex;
  width: 100%;
  padding: 1.75rem;
  border: solid #E5E5E5 1px;
  border-radius: 18px;
  flex-direction: column;
  gap: 0.85rem;
  background-color: #FFFFFF;
  max-width: 420px;
}
.auth-card .brand {
  margin: 0;
  color: #07C160;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.auth-card h1 {
  margin: 0;
  color: #191919;
  font-size: 1.75rem;
}
.auth-card .lead {
  margin: 0;
  color: #888888;
  line-height: 1.45em;
}
.auth-card label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-weight: 600;
}
.auth-card input {
  padding: 0.7rem 0.85rem;
  border: solid #E5E5E5 1px;
  border-radius: 10px;
  font-size: 1rem;
  background-color: white;
}
.auth-card .otp-row {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
}
.auth-card .otp-row input {
  flex-grow: 1;
  min-width: 0;
}
.auth-card button.otp {
  padding: 0.7rem 0.85rem;
  border: solid #E5E5E5 1px;
  border-radius: 10px;
  cursor: pointer;
  color: #07C160;
  font-weight: 600;
  background-color: white;
}
.auth-card .error {
  margin: 0;
  color: #FA5151;
}
.auth-card .ok {
  margin: 0;
  color: #07C160;
}
.auth-card button.primary {
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
  border: unset;
  border-radius: 999px;
  cursor: pointer;
  color: white;
  font-weight: 600;
  background-color: #07C160;
}
.auth-card button.linkish {
  border: unset;
  cursor: pointer;
  color: #888888;
  background-color: transparent;
}
.auth-card .auth-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}
.auth-card a.back-home {
  margin-top: 0.15rem;
  color: #888888;
  text-align: center;
  font-size: 0.9rem;
}
@media (max-width: 480px) .auth {
  padding: 1rem;
  align-items: start;
  padding-top: max(1rem, env(safe-area-inset-top, 0px));
  padding-bottom: max(1rem, env(safe-area-inset-bottom, 0px));
}
@media (max-width: 480px) .auth-card {
  padding: 1.25rem;
  border-radius: 14px;
}
@media (max-width: 480px) .auth-card h1 {
  font-size: 1.45rem;
}
@media (max-width: 480px) .auth-card input {
  font-size: 1rem;
  min-height: 2.75rem;
}
@media (max-width: 480px) .auth-card button.primary {
  min-height: 2.85rem;
}
@media (max-width: 480px) .auth-card .otp-row {
  flex-wrap: wrap;
}
@media (max-width: 480px) .auth-card button.otp {
  flex: 1 1 auto;
  min-width: 7rem;
}
.ow {
  display: flex;
  width: 100%;
  min-height: 100vh;
  flex-direction: column;
  color: #191919;
  background-color: #EDEDED;
}
.ow .ow-top {
  display: flex;
  padding: 0.85rem 1.25rem;
  border-bottom-style: solid;
  border-bottom-color: #E5E5E5;
  border-bottom-width: 1px;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  color: #191919;
  background-color: #FFFFFF;
}
.ow .ow-back {
  padding: 0.35rem 0.7rem;
  border: unset;
  border-radius: 6px;
  cursor: pointer;
  color: #07C160;
  background-color: #E8F8EF;
  font: inherit;
  font-size: 0.9rem;
}
.ow .ow-top h1 {
  margin: 0;
  color: #191919;
  font-size: 1.15rem;
}
.ow .ow-body {
  display: flex;
  width: 100%;
  padding: 1.5rem;
  flex-direction: column;
  gap: 1.1rem;
  flex-grow: 1;
  max-width: 760px;
  margin: 0 auto;
}
.ow .ow-phase {
  color: #888888;
  font-size: 0.9rem;
}
.ow .ow-card {
  display: flex;
  padding: 1.25rem;
  border: solid #E5E5E5 1px;
  border-radius: 14px;
  flex-direction: column;
  gap: 0.85rem;
  background-color: #FFFFFF;
}
.ow .ow-card h2 {
  color: #07C160;
  font-size: 1.25rem;
}
.ow .ow-card p {
  margin: 0;
  line-height: 1.55em;
}
.ow .ow-card textarea {
  width: 100%;
  min-height: 120px;
  padding: 0.75rem;
  border: solid #E5E5E5 1px;
  border-radius: 10px;
  font-size: 1rem;
  line-height: 1.5em;
  background-color: white;
  box-sizing: border-box;
  resize: vertical;
  font: inherit;
}
.ow .confirmed {
  display: flex;
  padding: 0.85rem;
  border-radius: 10px;
  flex-direction: column;
  gap: 0.35rem;
  background-color: #F7F7F7;
}
.ow .confirmed li {
  color: #191919;
  font-size: 0.92rem;
}
.ow .q-block {
  display: flex;
  margin-bottom: 1rem;
  flex-direction: column;
  gap: 0.55rem;
}
.ow .q-block strong {
  font-size: 1rem;
}
.ow .opts {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
}
.ow .opt {
  padding: 0.4rem 0.75rem;
  border: solid #E5E5E5 1px;
  border-radius: 999px;
  cursor: pointer;
  color: #191919;
  font-size: 0.9rem;
  background-color: white;
}
.ow .opt.on {
  border: solid #07C160 1px;
  color: white;
  background-color: #07C160;
}
.ow .q-block input {
  padding: 0.55rem 0.75rem;
  border: solid #E5E5E5 1px;
  border-radius: 8px;
  background-color: white;
  font: inherit;
}
.ow .actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.ow .banner {
  padding: 0.55rem 0.9rem;
  border-radius: 8px;
  font-size: 0.92rem;
}
.ow .banner.error {
  color: #FA5151;
  background-color: #FFF0F0;
}
.ow .banner.notice {
  color: #07C160;
  background-color: #E8F8EF;
}
.ow button.primary {
  padding: 0.6rem 1.1rem;
  border: unset;
  border-radius: 8px;
  cursor: pointer;
  color: white;
  background-color: #07C160;
}
.ow button.primary:disabled {
  cursor: not-allowed;
  color: white;
  background-color: #888888;
  opacity: 0.72;
}
.ow button.secondary {
  padding: 0.6rem 1.1rem;
  border: solid #07C160 1px;
  border-radius: 8px;
  cursor: pointer;
  color: #07C160;
  background-color: transparent;
}
.ow button.ghost {
  padding: 0.5rem 0.9rem;
  border: solid #E5E5E5 1px;
  border-radius: 8px;
  cursor: pointer;
  background-color: transparent;
}
.ow .outline-preview {
  max-height: 420px;
  padding: 1rem;
  margin: 0;
  border: solid #E5E5E5 1px;
  border-radius: 10px;
  font-size: 0.9rem;
  line-height: 1.55em;
  white-space: pre-wrap;
  background-color: white;
  overflow: auto;
}
.sr {
  display: flex;
  width: 100%;
  min-height: 100vh;
  flex-direction: column;
  color: #191919;
  background-color: #EDEDED;
}
.sr .sr-top {
  display: flex;
  padding: 0.85rem 1.25rem;
  border-bottom-style: solid;
  border-bottom-color: #E5E5E5;
  border-bottom-width: 1px;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  color: #191919;
  background-color: #FFFFFF;
}
.sr .sr-back {
  padding: 0.35rem 0.7rem;
  border: unset;
  border-radius: 6px;
  cursor: pointer;
  color: #07C160;
  background-color: #E8F8EF;
  font: inherit;
  font-size: 0.9rem;
  flex-shrink: 0;
}
.sr .sr-top h1 {
  margin: 0;
  color: #191919;
  font-size: 1.15rem;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sr .sr-status {
  color: #888888;
  font-size: 0.85rem;
  flex-shrink: 0;
}
.sr .sr-body {
  display: flex;
  width: 100%;
  padding: 1.5rem;
  flex-direction: column;
  gap: 1.1rem;
  flex-grow: 1;
  max-width: 760px;
  margin: 0 auto;
}
.sr .sr-card {
  display: flex;
  padding: 1.25rem;
  border: solid #E5E5E5 1px;
  border-radius: 14px;
  flex-direction: column;
  gap: 0.85rem;
  background-color: #FFFFFF;
}
.sr .sr-card h2 {
  color: #07C160;
  font-size: 1.25rem;
}
.sr .sr-card p {
  margin: 0;
  line-height: 1.55em;
}
.sr .sr-card textarea {
  width: 100%;
  min-height: 100px;
  padding: 0.75rem;
  border: solid #E5E5E5 1px;
  border-radius: 10px;
  font-size: 1rem;
  line-height: 1.5em;
  background-color: white;
  box-sizing: border-box;
  resize: vertical;
  font: inherit;
}
.sr .sr-preview {
  max-height: 480px;
  padding: 1rem;
  margin: 0;
  border: solid #E5E5E5 1px;
  border-radius: 10px;
  font-size: 0.9rem;
  line-height: 1.55em;
  white-space: pre-wrap;
  background-color: white;
  overflow: auto;
}
.sr .actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.sr .banner {
  padding: 0.55rem 0.9rem;
  border-radius: 8px;
  font-size: 0.92rem;
}
.sr .banner.error {
  color: #FA5151;
  background-color: #FFF0F0;
}
.sr .banner.notice {
  color: #07C160;
  background-color: #E8F8EF;
}
.sr button.primary {
  padding: 0.6rem 1.1rem;
  border: unset;
  border-radius: 8px;
  cursor: pointer;
  color: white;
  background-color: #07C160;
}
.sr button.primary:disabled {
  cursor: not-allowed;
  color: white;
  background-color: #888888;
  opacity: 0.72;
}
.sr button.secondary {
  padding: 0.6rem 1.1rem;
  border: solid #07C160 1px;
  border-radius: 8px;
  cursor: pointer;
  color: #07C160;
  background-color: transparent;
}
.sr button.ghost {
  padding: 0.5rem 0.9rem;
  border: solid #E5E5E5 1px;
  border-radius: 8px;
  cursor: pointer;
  background-color: transparent;
}
.wallet {
  display: flex;
  width: 100%;
  padding: 2rem;
  flex-direction: column;
  gap: 1.15rem;
  max-width: 960px;
  margin: 0 auto;
  box-sizing: border-box;
}
.wallet .wallet-appbar {
  display: none;
}
.wallet .wallet-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.wallet .wallet-body {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}
.wallet h1 {
  color: #07C160;
  font-size: 1.85rem;
}
.wallet .hero-grid {
  display: grid;
  gap: 0.9rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.wallet .hero-card {
  display: flex;
  padding: 1.2rem;
  border-radius: 16px;
  flex-direction: column;
  gap: 0.45rem;
  color: white;
  background: linear-gradient(145deg, #2AE072 0%, #07C160 55%, #06AD56 100%);
  box-shadow: 0 10px 28px rgba(7, 193, 96, 0.22);
}
.wallet .hero-card.vip {
  color: #191919;
  background: linear-gradient(145deg, #FFFFFF 0%, #F3FBF6 60%, #E8F8EF 100%);
  box-shadow: 0 8px 22px rgba(26, 26, 26, 0.08);
  border: 1px solid #DCEFE4;
}
.wallet .hero-card .hero-label {
  font-size: 0.85rem;
  opacity: 0.9;
}
.wallet .hero-card .hero-value {
  font-family: 'Literata', serif;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1em;
}
.wallet .hero-card .hero-sub {
  font-size: 0.86rem;
  opacity: 0.88;
}
.wallet .panel {
  display: flex;
  padding: 1.2rem;
  border: solid #E5E5E5 1px;
  border-radius: 16px;
  flex-direction: column;
  gap: 0.85rem;
  background-color: #FFFFFF;
  box-shadow: 0 4px 16px rgba(26, 26, 26, 0.04);
}
.wallet .panel h2 {
  color: #191919;
  font-size: 1.1rem;
}
.wallet .tier-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.wallet .tier-badge {
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  color: #06AD56;
  font-size: 0.88rem;
  font-weight: 600;
  background-color: #E8F8EF;
}
.wallet .progress {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background-color: #E8EEEA;
  overflow: hidden;
}
.wallet .progress .bar {
  height: 100%;
  border-radius: 999px;
  background-color: #07C160;
}
.wallet .muted {
  color: #888888;
  font-size: 0.9rem;
}
.wallet .checkin-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.wallet .tabs {
  display: flex;
  padding: 0.25rem;
  border-radius: 10px;
  gap: 0.4rem;
  background-color: #F2F5F3;
  align-self: flex-start;
}
.wallet button.tab {
  padding: 0.45rem 0.95rem;
  border: unset;
  border-radius: 8px;
  cursor: pointer;
  color: #888888;
  font-size: 0.92rem;
  background-color: transparent;
}
.wallet button.tab.on {
  color: #06AD56;
  font-weight: 600;
  background-color: white;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.wallet .txn-list {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.wallet .txn-row {
  display: flex;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom-style: solid;
  border-bottom-color: #E5E5E5;
  border-bottom-width: 1px;
  justify-content: space-between;
  align-items: start;
  gap: 0.85rem;
}
.wallet .txn-row.clickable {
  border-radius: 8px;
  cursor: pointer;
  margin: 0 -0.35rem;
  padding-left: 0.35rem;
  padding-right: 0.35rem;
}
.wallet .txn-row.clickable:hover {
  background-color: #F3FBF6;
}
.wallet .txn-row .txn-main {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
  flex: 1;
}
.wallet .txn-row .txn-note {
  color: #191919;
  font-size: 0.95rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wallet .txn-row .txn-meta {
  color: #888888;
  font-size: 0.8rem;
  white-space: normal;
  word-break: break-word;
  line-height: 1.35;
}
.wallet .txn-row .txn-amt {
  font-size: 1rem;
  font-weight: 700;
  white-space: nowrap;
}
.wallet .txn-row .txn-amt.plus {
  color: #06AD56;
}
.wallet .txn-row .txn-amt.minus {
  color: #FA5151;
}
.wallet .modal-backdrop {
  display: flex;
  padding: 1rem;
  justify-content: center;
  align-items: center;
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(25, 25, 25, 0.45);
  box-sizing: border-box;
}
.wallet .modal {
  display: flex;
  width: 100%;
  padding: 1.25rem;
  border-radius: 16px;
  flex-direction: column;
  gap: 0.85rem;
  background-color: #FFFFFF;
  max-width: 440px;
  max-height: 90vh;
  overflow: auto;
  box-shadow: 0 18px 48px rgba(0,0,0,0.18);
  box-sizing: border-box;
}
.wallet .modal h2 {
  color: #07C160;
  font-size: 1.15rem;
}
.wallet .modal .detail-row {
  display: flex;
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
  border-bottom-style: solid;
  border-bottom-color: #E5E5E5;
  border-bottom-width: 1px;
  justify-content: space-between;
  align-items: start;
  gap: 0.75rem;
  font-size: 0.92rem;
}
.wallet .modal .detail-label {
  color: #888888;
  flex: 0 0 auto;
  min-width: 5.5rem;
}
.wallet .modal .detail-value {
  color: #191919;
  flex: 1;
  text-align: right;
  word-break: break-word;
  line-height: 1.4;
}
.wallet .modal .modal-actions {
  display: flex;
  justify-content: end;
  gap: 0.5rem;
  margin-top: 0.25rem;
}
.wallet .banner {
  padding: 0.55rem 0.9rem;
  border-radius: 8px;
  font-size: 0.92rem;
}
.wallet .banner.error {
  color: #FA5151;
  background-color: #FFF0F0;
}
.wallet .banner.notice {
  color: #07C160;
  background-color: #E8F8EF;
}
.wallet button.primary {
  padding: 0.6rem 1.15rem;
  border: unset;
  border-radius: 10px;
  cursor: pointer;
  color: white;
  background-color: #07C160;
}
.wallet button.primary:disabled {
  cursor: not-allowed;
  background-color: #888888;
  opacity: 0.75;
}
.wallet button.ghost {
  padding: 0.5rem 0.9rem;
  border: solid #E5E5E5 1px;
  border-radius: 10px;
  cursor: pointer;
  background-color: transparent;
}
.wallet .skel-card {
  display: flex;
  padding: 1.25rem;
  border: solid #E5E5E5 1px;
  border-radius: 16px;
  flex-direction: column;
  gap: 0.75rem;
  background-color: #FFFFFF;
}
.wallet .skel-card .skel-btn {
  width: 6.5rem;
  height: 2.1rem;
  border-radius: 8px;
}
@media (max-width: 720px) .wallet {
  padding: 0;
  gap: 0;
  max-width: 100%;
}
@media (max-width: 720px) .wallet .wallet-head {
  display: none;
}
@media (max-width: 720px) .wallet .wallet-appbar {
  display: flex;
  position: sticky;
  top: 0;
  padding: 0.45rem 0.35rem;
  border-bottom-style: solid;
  border-bottom-color: #E5E5E5;
  border-bottom-width: 1px;
  align-items: center;
  gap: 0.35rem;
  background-color: #FFFFFF;
  z-index: 20;
  padding-top: max(0.45rem, env(safe-area-inset-top, 0px));
}
@media (max-width: 720px) .wallet .wallet-appbar-back {
  padding: 0.45rem 0.65rem;
  border: unset;
  cursor: pointer;
  color: #07C160;
  font-size: 0.95rem;
  background-color: transparent;
  min-height: 2.4rem;
}
@media (max-width: 720px) .wallet .wallet-appbar-title {
  margin: 0;
  color: #191919;
  font-family: 'Literata', serif;
  font-size: 1.1rem;
  font-weight: 700;
}
@media (max-width: 720px) .wallet .wallet-body {
  display: flex;
  padding: 1rem;
  flex-direction: column;
  gap: 1rem;
  padding-bottom: max(1.25rem, env(safe-area-inset-bottom, 0px));
}
@media (max-width: 720px) .wallet .hero-grid {
  grid-template-columns: 1fr;
}