:root {
  --blue: #75bfff;
  --tab: #50a6ff;
  --text: #111;
  --muted: #666;
  --page: #f0eeee;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, "Microsoft YaHei", sans-serif;
  color: var(--text);
  background: #eef2f7;
}

button,
input {
  font: inherit;
}

button {
  cursor: pointer;
}

.sj-shell {
  min-height: 100vh;
  display: grid;
  place-items: start center;
  padding: 6px;
}

.sj-phone {
  position: relative;
  width: 399px;
  min-height: 846px;
  overflow: hidden;
  background: var(--page);
  box-shadow: 0 12px 44px rgba(15, 23, 42, .15);
}

.sj-page {
  min-height: 846px;
  padding: 0 9px 74px;
  background:
    linear-gradient(#9dd3ff 0, #acd9ff 205px, rgba(255,255,255,.2) 315px, var(--page) 405px),
    var(--page);
}

.sj-title {
  height: 50px;
  display: grid;
  place-items: center;
  margin: 0;
  font-size: 18px;
  font-weight: 700;
}

.hero-blank {
  height: 142px;
  margin-bottom: 35px;
  border-radius: 2px;
  background: rgba(255,255,255,.92);
}

.shortcut-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  row-gap: 32px;
  margin-bottom: 31px;
}

.shortcut {
  display: grid;
  gap: 7px;
  justify-items: center;
  border: 0;
  background: transparent;
}

.shortcut b,
.platform b,
.sj-tabbar small,
.tool-card b {
  font-size: 13px;
  font-weight: 400;
}

.round-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  font-weight: 700;
  position: relative;
}

.round-icon::before {
  font-size: 25px;
}

.book { background: linear-gradient(#ffc36d, #ff963b); }
.book::before { content: "▤"; }
.ai { background: linear-gradient(#a77dff, #7a49ff); }
.ai::before { content: "✎"; }
.check { background: linear-gradient(#64d8ff, #3aa6ff); }
.check::before { content: "U"; border: 3px solid #fff; border-radius: 7px; padding: 0 4px; font-size: 17px; }
.star { background: linear-gradient(#ff9c9c, #ff6c72); }
.star::before { content: "★"; }
.notice { background: linear-gradient(#ff9aa0, #ff757d); }
.notice::before { content: "▥"; }
.device { background: linear-gradient(#75e6ff, #55b6ff); }
.device::before { content: "▱"; }
.globe { background: linear-gradient(#a87bff, #7949f5); }
.globe::before { content: "◉"; }
.goods { background: linear-gradient(#ffd979, #ffb852); }
.goods::before { content: "▥"; }

.card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 28px;
}

.feature-card {
  position: relative;
  height: 76px;
  overflow: hidden;
  border: 1px solid rgba(65, 150, 255, .35);
  border-radius: 8px;
  text-align: left;
  padding: 13px 10px;
  background: #fff;
}

.feature-card span {
  position: relative;
  z-index: 2;
  display: block;
  font-size: 17px;
}

.feature-card i {
  position: relative;
  z-index: 2;
  width: 26px;
  height: 16px;
  display: grid;
  place-items: center;
  margin-top: 14px;
  border-radius: 999px;
  font-style: normal;
  color: #65b8de;
  background: rgba(80, 210, 240, .42);
}

.feature-card.cyan { background: linear-gradient(135deg, #d9fbff, #bdf4ff); }
.feature-card.blue { background: linear-gradient(135deg, #eef4ff, #cfe4ff); }
.feature-card.orange { background: linear-gradient(135deg, #fff7df, #ffe3a4); border-color: #ffd46a; }
.feature-card.pink { background: linear-gradient(135deg, #fff2f7, #ffe1ec); border-color: #ffbdd4; }
.feature-card.green { background: linear-gradient(135deg, #f5ffe6, #dcffc4); border-color: #a9ef62; }
.feature-card.sky { background: linear-gradient(135deg, #f0fbff, #c4edff); }

.iso-art {
  position: absolute;
  right: 8px;
  top: 10px;
  width: 58px;
  height: 58px;
  border-radius: 12px;
  opacity: .85;
  transform: rotate(-22deg);
  background: linear-gradient(135deg, rgba(55,142,255,.9), rgba(255,255,255,.5));
  box-shadow: -10px 16px 0 -5px rgba(255,255,255,.65);
}

.sj-open {
  background:
    linear-gradient(#9dd3ff 0, #acd9ff 170px, rgba(255,255,255,.65) 315px, #fff 460px),
    #fff;
}

.platform-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  row-gap: 30px;
  padding: 12px 21px 0;
}

.platform {
  display: grid;
  justify-items: center;
  gap: 8px;
  border: 0;
  background: transparent;
}

.platform-logo {
  width: 90px;
  height: 90px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #fff;
  font-size: 38px;
  font-weight: 700;
}

.douyin { background: #000; color: #fff; text-shadow: -3px 0 #00f2ea, 3px 0 #ff0050; }
.shipinhao { background: linear-gradient(135deg, #ffb13b, #ff8b34); font-size: 58px; }
.kuaishou { background: #ff6538; font-size: 42px; }
.meituan { background: #ffb300; font-size: 30px; }
.pdd { background: #f40015; font-size: 56px; }
.taobao { background: #ff5b16; font-size: 42px; }
.bili { background: #ff5aa0; font-size: 28px; }
.jd { background: #df1f25; font-size: 48px; }
.xhs { background: #ff2f55; font-size: 24px; }

.sj-mine {
  padding-left: 10px;
  padding-right: 10px;
  background:
    linear-gradient(#9dd3ff 0, #acd9ff 170px, rgba(255,255,255,.58) 330px, var(--page) 455px),
    var(--page);
}

.mine-hero {
  height: 281px;
  display: grid;
  align-content: end;
  justify-items: center;
  padding-bottom: 33px;
}

.avatar-big {
  width: 72px;
  height: 72px;
  margin-bottom: 9px;
  border-radius: 50%;
  background: rgba(255,255,255,.32);
}

.mine-hero p {
  margin: 0 0 7px;
  font-size: 13px;
}

.mine-hero span {
  padding: 5px 14px;
  border-radius: 999px;
  background: #ffc864;
  font-size: 12px;
}

.stats-card,
.tool-card {
  display: grid;
  border-radius: 9px;
  background: #fff;
}

.stats-card {
  grid-template-columns: repeat(2, 1fr);
  gap: 26px 0;
  padding: 22px 0 24px;
  text-align: center;
  margin-bottom: 9px;
}

.stats-card strong {
  display: block;
  font-size: 18px;
  margin-bottom: 6px;
}

.tool-card {
  grid-template-columns: repeat(4, 1fr);
  row-gap: 19px;
  padding: 24px 14px 18px;
}

.tool-card button {
  display: grid;
  justify-items: center;
  gap: 7px;
  border: 0;
  background: transparent;
}

.tool-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, #8bb8ff, #507fff);
}

.tool-icon::before { content: "▣"; }
.tool-icon.grid::before { content: "●"; }
.tool-icon.mail::before { content: "✉"; }
.tool-icon.mic::before { content: "🎙"; font-size: 18px; }
.tool-icon.phone::before { content: "☎"; }
.tool-icon.user::before { content: "●"; }
.tool-icon.bulb::before { content: "✦"; }

.sj-tabbar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 53px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid #e5e5e5;
  background: #fff;
}

.sj-tabbar button {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 2px;
  border: 0;
  background: #fff;
  color: #999;
}

.sj-tabbar button.active {
  color: var(--tab);
}

.tab-symbol {
  width: 22px;
  height: 22px;
  display: block;
  position: relative;
}

.tab-symbol.home {
  border: 1.8px solid currentColor;
  border-top: 0;
  border-radius: 3px;
}

.tab-symbol.home::before {
  content: "";
  position: absolute;
  left: 3px;
  top: -7px;
  width: 15px;
  height: 15px;
  border-left: 1.8px solid currentColor;
  border-top: 1.8px solid currentColor;
  transform: rotate(45deg);
}

.tab-symbol.tv {
  border: 1.8px solid currentColor;
  border-radius: 4px;
}

.tab-symbol.tv::before {
  content: "▶";
  position: absolute;
  left: 5px;
  top: 1px;
  font-size: 12px;
}

.tab-symbol.user {
  border: 1.8px solid currentColor;
  border-radius: 50% 50% 45% 45%;
}

.tab-symbol.user::after {
  content: "";
  position: absolute;
  left: -5px;
  right: -5px;
  bottom: -11px;
  height: 10px;
  border: 1.8px solid currentColor;
  border-bottom: 0;
  border-radius: 50% 50% 0 0;
}

.detail-page {
  padding: 0 4px 88px;
  background: #f1f1f1;
}

.detail-head {
  height: 50px;
  display: grid;
  grid-template-columns: 42px 1fr 42px;
  align-items: center;
}

.detail-head button {
  border: 0;
  background: transparent;
  font-size: 34px;
}

.detail-head h1 {
  margin: 0;
  text-align: center;
  font-size: 18px;
}

.detail-panel {
  padding: 12px;
  border-radius: 10px;
  background: #fff;
}

.live-card {
  margin: 10px 7px;
  padding: 12px 10px;
  border-radius: 5px;
  background: #fff;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 25px;
}

.section-title b {
  font-size: 16px;
}

.section-title span {
  color: #b5becb;
  font-size: 14px;
}

.room-input {
  width: 100%;
  height: 38px;
  margin-top: 9px;
  border: 1px solid #d3d8df;
  border-radius: 3px;
  padding: 0 10px;
  color: #333;
  background: #fff;
}

.room-input::placeholder {
  color: #b7bfcd;
}

.room-tip {
  margin: 10px 0 0;
  color: #8b8f98;
  font-size: 12px;
}

.strategy-card {
  padding-bottom: 10px;
}

.strategy-card .section-title {
  padding-bottom: 9px;
  border-bottom: 1px solid #eeeeee;
  margin-bottom: 7px;
}

.strategy-row {
  min-height: 45px;
  display: grid;
  grid-template-columns: auto 60px 1fr;
  align-items: center;
  gap: 8px;
  color: #111;
  font-size: 14px;
}

.strategy-row input {
  width: 60px;
  height: 31px;
  border: 1px solid #d8dce2;
  border-radius: 4px;
  text-align: center;
  color: #172554;
  background: #fff;
}

.strategy-select {
  min-height: 45px;
  display: grid;
  grid-template-columns: 130px 1fr;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.strategy-select select {
  height: 31px;
  border: 1px solid #d8dce2;
  border-radius: 4px;
  padding: 0 8px;
  color: #333;
  background: #fff;
}

.pick-card {
  padding: 10px 10px 13px;
}

.pick-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid #eeeeee;
}

.pick-head button {
  min-width: 86px;
  height: 31px;
  border: 0;
  border-radius: 4px;
  color: #fff;
  background: #1e9bef;
}

.pick-card p {
  margin: 11px 0 0;
  font-size: 14px;
}

.pick-card strong {
  color: #0b88e8;
  font-size: 17px;
}

.open-warning {
  margin: 10px 4px 0;
  padding: 12px 10px;
  color: #ff5e66;
  background: #fff0f1;
  font-size: 14px;
}

.open-live-btn {
  width: calc(100% - 8px);
  height: 39px;
  margin: 7px 4px 0;
  border: 0;
  border-radius: 7px;
  color: #fff;
  background: #3aa8f2;
  font-size: 15px;
}

.detail-panel > p {
  margin: 0 0 14px;
  color: var(--muted);
  line-height: 1.6;
}

.list-stack {
  display: grid;
  gap: 9px;
}

.list-stack article,
.placeholder-card,
.field-row {
  border: 1px solid #eef0f5;
  border-radius: 8px;
  background: #fff;
}

.list-stack article {
  padding: 12px;
}

.list-stack small {
  display: inline-block;
  margin-left: 8px;
  color: #4e9cff;
}

.list-stack p {
  margin: 8px 0 0;
  color: #555;
}

.primary-action {
  width: 100%;
  height: 42px;
  margin-top: 14px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(90deg, #57a8ff, #5b8dff);
}

.item-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.item-actions button,
.list-stack article > button,
.product-list button {
  border: 0;
  border-radius: 999px;
  padding: 7px 11px;
  color: #2873cf;
  background: #edf5ff;
}

.form-stack {
  display: grid;
  gap: 12px;
}

.form-stack label {
  display: grid;
  gap: 7px;
  color: #333;
  font-size: 14px;
}

.form-stack input,
.form-stack select,
.form-stack textarea {
  width: 100%;
  border: 1px solid #e3e7ef;
  border-radius: 8px;
  padding: 10px;
  outline: none;
  background: #fff;
}

.form-stack textarea {
  min-height: 150px;
  resize: vertical;
}

.product-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.product-list article {
  display: grid;
  gap: 7px;
  min-height: 138px;
  padding: 12px;
  border: 1px solid #eef0f5;
  border-radius: 10px;
  background: #fff;
}

.product-list article.selected {
  border-color: #62aeff;
  background: #f2f8ff;
}

.product-list span {
  color: #ff5b41;
  font-weight: 700;
}

.product-list small,
.quota-card {
  color: #666;
}

.quota-card {
  margin-bottom: 10px;
  padding: 14px;
  border-radius: 10px;
  background: #eef7ff;
  color: #2873cf;
  font-weight: 700;
}

.placeholder-card {
  min-height: 190px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 14px;
}

.live-form {
  display: grid;
  gap: 8px;
}

.field-row {
  height: 48px;
  display: grid;
  grid-template-columns: 86px 1fr 18px;
  align-items: center;
  padding: 0 12px;
}

.field-row span {
  color: #555;
}

.field-row b {
  text-align: right;
  font-weight: 400;
}

.field-row em {
  color: #bbb;
  font-style: normal;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 86px;
  z-index: 9999;
  transform: translateX(-50%);
  max-width: calc(100vw - 40px);
  padding: 9px 16px;
  border-radius: 999px;
  color: #fff;
  background: rgba(0, 0, 0, .72);
}

.admin-lite {
  max-width: 1100px;
  margin: 30px auto;
  padding: 24px;
  border-radius: 12px;
  background: #fff;
}

.login-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 20px;
  background: linear-gradient(#9dd3ff, #f1f5f9);
}

.login-box {
  width: min(390px, 100%);
  display: grid;
  gap: 14px;
  padding: 26px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 18px 50px rgba(15, 23, 42, .18);
}

.login-box h1,
.login-box p {
  margin: 0;
}

.login-box p {
  color: #667085;
}

.login-box label {
  display: grid;
  gap: 7px;
  color: #334155;
}

.login-box input {
  width: 100%;
  height: 40px;
  border: 1px solid #d8dee9;
  border-radius: 7px;
  padding: 0 10px;
}

.admin-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: start;
  margin-bottom: 18px;
}

.admin-head h1,
.admin-head p {
  margin: 0;
}

.admin-head p {
  margin-top: 7px;
  color: #667085;
}

.admin-head button,
.user-create button,
.user-actions button {
  border: 0;
  border-radius: 7px;
  padding: 8px 11px;
  color: #1f5fa8;
  background: #eaf4ff;
}

.user-create {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr 90px 92px;
  gap: 10px;
  margin-bottom: 18px;
  padding: 14px;
  border-radius: 10px;
  background: #f8fafc;
}

.user-create input {
  min-width: 0;
  height: 38px;
  border: 1px solid #d8dee9;
  border-radius: 7px;
  padding: 0 10px;
}

.user-table {
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
}

.user-table th,
.user-table td {
  padding: 12px;
  border-bottom: 1px solid #e5e7eb;
  text-align: left;
}

.user-table th {
  background: #f8fafc;
  color: #475467;
}

.user-actions {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}

.status-on,
.status-off {
  display: inline-flex;
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 12px;
}

.status-on {
  color: #067647;
  background: #dcfce7;
}

.status-off {
  color: #b42318;
  background: #fee4e2;
}

.logout-user {
  width: calc(100% - 20px);
  height: 38px;
  margin: 12px 10px 0;
  border: 0;
  border-radius: 999px;
  color: #667085;
  background: #fff;
}

.admin-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 18px 0;
}

.admin-grid section {
  padding: 18px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
}

.admin-grid strong {
  display: block;
  margin-top: 8px;
  font-size: 30px;
}

.seg-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
  margin: 10px 7px;
}

.seg-tabs span {
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: #fff;
  border: 1px solid #e7e7e7;
  font-size: 13px;
}

.seg-tabs span:first-child {
  color: #1689ff;
  border-color: #8bc8ff;
  background: #eef8ff;
}

.running-panel {
  background: linear-gradient(135deg, #eef8ff, #fff);
}

.running-panel b {
  color: #1689ff;
}

.live-run-page {
  min-height: 850px;
  padding: 10px 10px 92px;
  background: #fff;
}

.live-run-card {
  position: relative;
  margin-bottom: 10px;
  border-radius: 4px;
  color: #fff;
  background: #242635;
}

.live-status-card {
  min-height: 125px;
  padding: 16px 14px;
}

.live-status-card h2,
.barrage-card h2 {
  margin: 0 0 16px;
  font-size: 18px;
  line-height: 1.2;
}

.live-status-card h2 span {
  display: inline-block;
  width: 5px;
  height: 12px;
  margin-left: 6px;
  border-radius: 1px;
  background: #fff;
}

.live-status-card p {
  margin: 0 0 16px;
  font-size: 16px;
}

.close-live-btn {
  position: absolute;
  right: 10px;
  top: 10px;
  height: 30px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: #757582;
  font-size: 14px;
}

.start-stream-btn {
  position: absolute;
  right: 12px;
  bottom: 12px;
  height: 32px;
  padding: 0 20px;
  border: 0;
  border-radius: 5px;
  color: #fff;
  background: #168eea;
  font-size: 14px;
}

.live-meter {
  display: flex;
  gap: 8px;
  align-items: end;
  height: 16px;
}

.live-meter i {
  width: 5px;
  height: 14px;
  background: #a9ff57;
}

.live-meter i:nth-child(2) {
  height: 12px;
}

.live-meter i:nth-child(3) {
  height: 13px;
}

.live-meter i:nth-child(4) {
  height: 11px;
}

.barrage-card {
  min-height: 648px;
  padding: 14px;
}

.barrage-list p {
  margin: 0 0 12px;
  color: #fff;
  font-size: 16px;
  line-height: 1.2;
}

.barrage-list p.auto-reply {
  padding-left: 8px;
  border-left: 3px solid #35d6ff;
}

.barrage-list b {
  color: #fff;
  font-weight: 400;
}

.barrage-list span {
  color: #9cff36;
}

.barrage-list em {
  display: block;
  margin-top: 4px;
  color: #7eeaff;
  font-style: normal;
  font-size: 13px;
}

.live-bottom-line {
  width: 28px;
  height: 2px;
  margin: 8px auto 0;
  border-radius: 999px;
  background: #999;
}

.picker-mask {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0, 0, 0, .45);
}

.reply-picker {
  width: min(390px, 100vw - 20px);
  max-height: 82vh;
  overflow-y: auto;
  padding: 12px 10px 14px;
  border-radius: 6px 6px 0 0;
  background: #fff;
}

.reply-group {
  margin-bottom: 18px;
}

.reply-group header {
  display: flex;
  align-items: center;
  gap: 18px;
  height: 30px;
  color: #1689ff;
}

.reply-group header strong {
  flex: 1;
  font-size: 17px;
  font-weight: 400;
}

.reply-group header button {
  border: 0;
  color: #1689ff;
  background: transparent;
  font-size: 14px;
}

.reply-group header button:last-child {
  color: #c8c8c8;
}

.reply-option {
  min-height: 52px;
  display: grid;
  grid-template-columns: 24px 1fr auto;
  align-items: center;
  gap: 6px;
  padding: 8px 6px;
  border: 1px solid #bce5ff;
  border-radius: 4px;
  color: #111;
  background: #fff;
}

.reply-option + .reply-option {
  margin-top: 8px;
}

.reply-option input {
  width: 22px;
  height: 22px;
}

.reply-option span {
  font-size: 14px;
}

.reply-option button {
  min-width: 62px;
  height: 34px;
  border: 0;
  border-radius: 6px;
  color: #0c8b6f;
  background: #91f2d7;
  font-size: 14px;
}

.reply-empty {
  height: 44px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border: 1px solid #bce5ff;
  border-radius: 4px;
  color: #b7b7b7;
}

.picker-done {
  width: 100%;
  height: 40px;
  border: 0;
  border-radius: 5px;
  color: #fff;
  background: #1689ff;
  font-size: 15px;
}

/* Reference-site matching overrides */
.sj-phone {
  width: 406px;
  min-height: 900px;
  background: #f1f1f1;
}

.sj-page.open-page {
  background:
    linear-gradient(rgba(152, 210, 255, .96) 0, rgba(172, 219, 255, .82) 168px, rgba(255,255,255,.92) 370px, #fff 100%),
    radial-gradient(circle at 50% 130px, rgba(255,255,255,.9), transparent 150px);
}

.sj-title {
  position: relative;
  height: 50px;
  background: rgba(255, 255, 255, .88);
  border-bottom: 1px solid rgba(0,0,0,.04);
}

.sj-title .back {
  position: absolute;
  left: 0;
  top: 0;
  width: 46px;
  height: 50px;
  border: 0;
  background: transparent;
  font-size: 30px;
  line-height: 1;
}

.open-page .platform-grid {
  row-gap: 28px;
  column-gap: 20px;
  padding: 12px 25px 0;
}

.open-page .platform {
  gap: 8px;
  min-height: 113px;
}

.open-page .platform-icon {
  width: 90px;
  height: 90px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 8px 16px rgba(0,0,0,.04);
  position: relative;
}

.open-page .platform-icon.douyin {
  color: #fff;
  background: #050505;
  font-size: 58px;
  text-shadow: -4px 0 #00f2ea, 4px 0 #ff0050;
}

.open-page .platform-icon.shipin {
  color: #fff;
  background: linear-gradient(135deg, #ffb347, #ff8d31);
  font-size: 62px;
}

.open-page .platform-icon.kuaishou {
  color: #fff;
  background: #ff6538;
  font-size: 54px;
}

.open-page .platform-icon.meituan {
  color: #fff;
  background: #ffb400;
  font-size: 35px;
}

.open-page .platform-icon.pdd {
  color: #fff;
  background: #f40015;
  font-size: 55px;
}

.open-page .platform-icon.taobao {
  color: #fff;
  background: #ff5a16;
  font-size: 46px;
}

.open-page .platform-icon.bilibili {
  color: #fff;
  background: #f65394;
  font-size: 42px;
}

.open-page .platform-icon.jd {
  color: #fff;
  background: #df2027;
  font-size: 46px;
}

.open-page .platform-icon.redbook {
  color: #fff;
  background: #ff2f55;
  font-size: 30px;
}

.open-page .platform b {
  color: #111;
  font-size: 13px;
}

.detail-page {
  padding: 0 10px 88px;
  background: #f1efef;
}

.group-tabs {
  display: flex;
  gap: 5px;
  padding: 10px 10px 16px;
}

.group-tabs button {
  height: 41px;
  padding: 0 12px;
  border: 0;
  border-radius: 5px;
  background: #fff;
  font-size: 16px;
}

.group-tabs button.active {
  color: #fff;
  background: #6cc4ff;
}

.primary-strip {
  width: calc(100% - 20px);
  height: 38px;
  margin: 0 10px 12px;
  border: 0;
  border-radius: 3px;
  color: #fff;
  background: #314967;
  font-weight: 700;
}

.script-top-actions {
  display: flex;
  gap: 8px;
  padding: 0 10px 12px;
}

.script-top-actions button {
  height: 32px;
  padding: 0 12px;
  border: 1px solid #dfe6ef;
  border-radius: 5px;
  color: #1f2937;
  background: #fff;
  font-size: 15px;
}

.script-top-actions button:first-child {
  color: #fff;
  border-color: #5dbdff;
  background: #6cc4ff;
}

.script-card {
  margin: 0 10px 12px;
  padding: 13px 10px 16px;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .02);
}

.script-no {
  margin-bottom: 10px;
  font-size: 16px;
}

.script-copy {
  margin: 0 0 14px;
  color: #111;
  font-size: 15px;
  line-height: 1.55;
}

.script-selects {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.danger-tag,
.group-select {
  height: 29px;
  border: 0;
  border-radius: 3px;
  color: #d92d20;
  background: #ffd7d3;
  font-size: 15px;
}

.danger-tag {
  display: inline-grid;
  place-items: center;
  padding: 0 5px;
}

.group-select {
  min-width: 130px;
}

.script-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-bottom: 14px;
}

.pill {
  min-width: 60px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  font-size: 13px;
}

.pill.yellow { color: #d99000; background: #fff49a; }
.pill.cyan { color: #1e9bef; background: #b9f4ff; }
.pill.green,
.pill.mint { color: #00a884; background: #8ff4db; }
.pill.blue { color: #fff; background: #63b7f5; }
.pill.pink { color: #ff335f; background: #ffe2eb; }
.pill.uploaded {
  color: #fff;
  background: #19be6b;
}

.file-pill {
  position: relative;
  overflow: hidden;
}

.file-pill input,
.upload-inline input,
.file-drop input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.script-card time {
  display: block;
  text-align: right;
  color: #bdc2cb;
  font-size: 12px;
}

.script-title {
  display: block;
  margin-top: 4px;
  color: #111;
  font-size: 16px;
}

.script-type {
  display: inline-block;
  margin-top: 5px;
  padding: 3px 8px;
  border-radius: 999px;
  color: #6b7280;
  background: #f1f5f9;
  font-size: 12px;
}

.script-empty {
  margin: 0 10px;
}

.audio-bind {
  margin-top: 8px;
  padding: 6px 8px;
  border-radius: 4px;
  color: #087443;
  background: #e6fff3;
  font-size: 12px;
}

.script-card details {
  margin-top: 10px;
}

.script-card summary {
  cursor: pointer;
  font-weight: 700;
}

.no-more {
  padding: 4px 0 18px;
  text-align: center;
  color: #333;
}

.upload-toolbar {
  align-items: center;
}

.upload-inline {
  position: relative;
  height: 32px;
  display: inline-grid;
  place-items: center;
  overflow: hidden;
  padding: 0 12px;
  border-radius: 5px;
  color: #fff;
  background: #1e9bef;
  font-size: 14px;
}

.upload-card {
  margin: 12px 10px;
  padding: 16px 12px;
  border-radius: 6px;
  background: #fff;
}

.upload-card h2 {
  margin: 0 0 8px;
  font-size: 18px;
}

.upload-card p {
  margin: 0 0 14px;
  color: #7a8491;
  font-size: 13px;
}

.upload-card label:not(.file-drop) {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}

.upload-card input[type="text"],
.upload-card label:not(.file-drop) input {
  height: 38px;
  border: 1px solid #d9dfe8;
  border-radius: 4px;
  padding: 0 10px;
}

.file-drop {
  position: relative;
  height: 112px;
  display: grid;
  place-items: center;
  overflow: hidden;
  margin-bottom: 14px;
  border: 1px dashed #76bfff;
  border-radius: 8px;
  background: #f4fbff;
}

.file-drop span {
  color: #1689ff;
  font-weight: 700;
}

.file-drop small {
  color: #7a8491;
}

.live-config-page {
  padding: 0 10px 88px;
  background: #f1efef;
}

.live-config-page .live-card {
  margin: 10px 0;
  padding: 12px 10px;
  border-radius: 5px;
  background: #fff;
}

.live-config-page .live-card h2 {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin: 0 0 11px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
  font-size: 16px;
}

.live-config-page .live-card h2 span {
  color: #b5becb;
  font-size: 14px;
  font-weight: 400;
}

.live-config-page #live-url {
  width: 100%;
  height: 38px;
  border: 1px solid #d7dce4;
  border-radius: 3px;
  padding: 0 10px;
  color: #333;
  background: #fff;
}

.live-config-page #live-url::placeholder {
  color: #b7bfcd;
}

.live-config-page .live-card p {
  margin: 9px 0 0;
  color: #7b8490;
  font-size: 13px;
  line-height: 1.5;
}

.live-config-page .num-row {
  min-height: 43px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  font-size: 14px;
}

.live-config-page .num-row input {
  width: 60px;
  height: 31px;
  flex: 0 0 60px;
  border: 1px solid #d8dde5;
  border-radius: 4px;
  text-align: center;
  background: #fff;
}

.live-config-page .select-line {
  min-height: 42px;
  display: grid;
  grid-template-columns: 132px 1fr;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.live-config-page .select-line select {
  width: 100%;
  height: 32px;
  border: 1px solid #d8dde5;
  border-radius: 4px;
  padding: 0 8px;
  color: #333;
  background: #fff;
}

.live-config-page .pick-card {
  margin: 10px 0;
  padding: 0;
  border-radius: 5px;
  background: #fff;
}

.live-config-page .pick-card > div {
  min-height: 53px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 10px;
  border-bottom: 1px solid #eee;
}

.live-config-page .pick-card strong {
  color: #111;
  font-size: 16px;
}

.live-config-page .pick-card span {
  margin-left: 7px;
  color: #b5becb;
  font-size: 14px;
}

.live-config-page .pick-card button {
  min-width: 96px;
  height: 31px;
  border: 0;
  border-radius: 4px;
  color: #fff;
  background: #1e9bef;
}

.live-config-page .pick-card p {
  margin: 0;
  padding: 11px 10px 13px;
  color: #111;
}

.live-config-page .pick-card b {
  color: #0089ff;
}

.live-config-page .warn {
  margin: 10px 0 0;
  padding: 12px 10px;
  color: #ff5e66;
  background: #fff0f1;
  font-size: 14px;
}

.live-config-page .open-live-btn {
  width: 100%;
  height: 39px;
  margin: 7px 0 0;
}

@media (max-width: 430px) {
  .sj-shell {
    padding: 0;
  }

  .sj-phone {
    width: 100vw;
    min-height: 100vh;
  }

  .user-create {
    grid-template-columns: 1fr;
  }
}