#saas-fullscreen-app-wrapper .ds-col-center-wrapper > div[style*="50vh"] { display: none !important; }
.mag-demo { font-family: "DM Sans", -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; }
.mag-bar { margin-top: 52px; }
.mag-pill { display: inline-flex; padding: 3px; border-radius: 9999px; background: #F4F4F5; }
.mag-pill button { all: unset; box-sizing: border-box; height: 30px; padding: 0 14px; border-radius: 9999px; display: inline-flex; align-items: center; font-size: 13px; color: #52525B; cursor: pointer; }
.mag-pill button.is-on { background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.08); font-weight: 600; color: #18181B; }
.mag-note { margin: 16px 0 8px; font-size: 12px; line-height: 18px; color: #71717A; }
.mag-note button { all: unset; cursor: pointer; font-weight: 600; color: #18181B; text-decoration: underline; text-underline-offset: 3px; }
.mag-tag { margin-left: 8px; padding: 1px 6px; border-radius: 4px; background: #F4F4F5; font-size: 11px; line-height: 16px; font-weight: 400; color: #71717A; vertical-align: 1px; white-space: nowrap; }
.mag-th, .mag-tr { display: grid; grid-template-columns: minmax(0,1fr) 150px 110px 70px 100px; gap: 16px; align-items: center; padding: 0 8px; }
.mag-th { height: 34px; border-bottom: 1px solid #E4E4E7; font-size: 11px; color: #A1A1AA; }
.mag-tr { height: 48px; border-bottom: 1px solid #F4F4F5; font-size: 13px; cursor: pointer; }
.mag-tr:hover { background: #FAFAFA; }
.mag-tr .n { font-weight: 500; color: #18181B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mag-tr .w, .mag-tr .t { font-size: 12px; color: #71717A; } .mag-tr .t { color: #A1A1AA; }
.mag-tr .ok { font-size: 12px; color: #166534; }
.mag-tr .mono { font-family: "DM Mono", ui-monospace, monospace; font-size: 12px; color: #71717A; }
.mag-demo .r { text-align: right; }
.mag-fh { display: flex; align-items: center; gap: 8px; padding: 18px 0 6px; border-bottom: 1px solid #E4E4E7; }
.mag-fh span { font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: .14em; color: #A1A1AA; }
.mag-fh i { font-style: normal; font-family: "DM Mono", ui-monospace, monospace; font-size: 11px; color: #A1A1AA; }
.mag-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; margin: 16px -16px 0; }
.mag-plan, .mag-book { padding: 16px; border-radius: 8px; cursor: pointer; display: flex; flex-direction: column; gap: 8px; }
.mag-plan:hover, .mag-book:hover { background: #F4F4F5; }
.mag-plan .img { height: 96px; border-radius: 4px; background: #EDEDF0 center / cover no-repeat; }
.mag-plan b { font-family: "Songti SC", "STSong", serif; font-size: 16px; line-height: 22px; font-weight: 600; color: #18181B; }
.mag-plan span { font-size: 12px; line-height: 18px; color: #71717A; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mag-book .cv { position: relative; aspect-ratio: 202 / 323; border-radius: 4px; padding: 20px 18px; box-sizing: border-box; background: #EDEDF0 center / cover no-repeat; display: flex; flex-direction: column; color: #18181B; box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1); transition: transform .1s ease-out; transform-origin: 50% 75%; overflow: hidden; }
.mag-book:hover .cv { transform: scale(1.035); }
.mag-book .cv::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(0,0,0,.14) 0, rgba(0,0,0,.05) 2.2%, rgba(255,255,255,.38) 3%, rgba(255,255,255,.12) 4.5%, rgba(255,255,255,0) 8%); }
.mag-book .cv > * { position: relative; }
.mag-book .tg { font-family: "DM Mono", ui-monospace, monospace; font-size: 12px; font-weight: 600; letter-spacing: .12em; }
.mag-book .ep { position: absolute; top: 20px; right: 18px; font-family: "DM Mono", ui-monospace, monospace; font-size: 12px; font-weight: 600; }
.mag-book .cv b { margin-top: auto; font-family: "Songti SC", "STSong", serif; font-size: 20px; line-height: 28px; font-weight: 600; color: #09090B; }
.mag-book .cv i { display: block; width: 28px; height: 1px; margin: 10px 0; background: rgba(24,24,27,.35); }
.mag-book .mt { font-size: 13px; line-height: 18px; color: #3F3F46; }
.mag-book .bar { display: block; height: 3px; margin-top: 10px; border-radius: 2px; background: rgba(24,24,27,.12); overflow: hidden; }
.mag-book .bar em { display: block; width: 15%; height: 100%; background: #18181B; }
.mag-book > .mag-tag { align-self: flex-start; margin: 4px 0 0; }
@media (max-width: 720px) { .mag-grid { grid-template-columns: repeat(2, minmax(0,1fr)); margin: 16px -8px 0; } .mag-th, .mag-tr { grid-template-columns: minmax(0,1fr) 80px 70px; } .mag-th span:nth-child(2), .mag-tr .w, .mag-th span:nth-child(n+4), .mag-tr > :nth-child(n+4) { display: none; } }
#sos-demo-modal { position: fixed; inset: 0; z-index: 2147483646; display: flex; align-items: center; justify-content: center; font-family: "DM Sans", -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; }
#sos-demo-modal .sdm-bg { position: absolute; inset: 0; background: rgba(9,9,11,.42); }
#sos-demo-modal .sdm-box { position: relative; box-sizing: border-box; width: 600px; max-width: calc(100vw - 32px); max-height: calc(100vh - 64px); overflow-y: auto; padding: 24px 24px 20px; border-radius: 8px; background: #FFFFFF; box-shadow: 0 0 0 1px #E4E4E7, 0 20px 25px -5px rgba(0,0,0,.12), 0 8px 10px -6px rgba(0,0,0,.1); color: #18181B; }
#sos-demo-modal .sdm-x { all: unset; position: absolute; top: 14px; right: 14px; width: 28px; height: 28px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 20px; color: #71717A; cursor: pointer; }
#sos-demo-modal .sdm-x:hover { background: #F4F4F5; color: #18181B; }
#sos-demo-modal .sdm-eye { font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: .14em; color: #A1A1AA; }
#sos-demo-modal .sdm-t { margin: 6px 40px 0 0; font-family: "Songti SC", "STSong", "SimSun", serif; font-size: 20px; line-height: 28px; font-weight: 600; color: #09090B; }
#sos-demo-modal .sdm-b { margin-top: 16px; font-size: 14px; line-height: 24px; color: #3F3F46; }
#sos-demo-modal .sdm-b h4 { margin: 18px 0 6px; font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: .14em; color: #A1A1AA; }
#sos-demo-modal .sdm-b p { margin: 0 0 10px; }
#sos-demo-modal .sdm-row { display: flex; gap: 12px; padding: 8px 0; border-top: 1px solid #F4F4F5; }
#sos-demo-modal .sdm-row b { flex: 0 0 96px; font-weight: 600; color: #18181B; }
#sos-demo-modal .sdm-row span { flex: 1; min-width: 0; }
#sos-demo-modal .sdm-script { padding: 14px 16px; border-radius: 6px; background: #FAFAFA; font-family: "Songti SC", "STSong", serif; font-size: 14px; line-height: 26px; color: #27272A; white-space: pre-wrap; }
#sos-demo-modal .sdm-f { margin-top: 20px; padding-top: 14px; border-top: 1px solid #F4F4F5; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#sos-demo-modal .sdm-f span { font-size: 12px; color: #71717A; }
#sos-demo-modal .sdm-go { all: unset; box-sizing: border-box; height: 32px; padding: 0 12px; border-radius: 4px; background: #18181B; color: #FAFAFA; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; }
#sos-demo-modal .sdm-go:hover { background: #27272A; }
html.dark-mode #sos-demo-modal .sdm-box { background: #18181B; color: #FAFAFA; box-shadow: 0 0 0 1px #27272A, 0 20px 25px -5px rgba(0,0,0,.5); }
html.dark-mode #sos-demo-modal .sdm-t { color: #FAFAFA; } html.dark-mode #sos-demo-modal .sdm-b { color: #D4D4D8; }
html.dark-mode #sos-demo-modal .sdm-row { border-top-color: #27272A; } html.dark-mode #sos-demo-modal .sdm-row b { color: #FAFAFA; }
html.dark-mode #sos-demo-modal .sdm-script { background: #27272A; color: #E4E4E7; }
html.dark-mode #sos-demo-modal .sdm-go { background: #FAFAFA; color: #18181B; }