/* 云端保存、公开谱面库、共享对话框、主页三页签与设置 → 在线页样式。
   颜色/字号/边框/圆角/阴影只取编辑器皮肤 token --rpen-*；
   默认皮肤没有这些 token 时回落到 --accent / --muted / --line 及 styles.css 的本体值。
   组件别名见 edit/src/core/editor-skin.js：home-library-tabs、cloud-library、cloud-chart-card、quota-bar、
   public-library、public-chart-card、review-panel、review-card、share-dialog、upload-progress。 */

/* ---------- 主页三页签 ---------- */

#home-library-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 4px 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rpen-border, var(--line));
}

#home-library-tabs [role="tab"] {
  position: relative;
  padding: 8px 18px;
  border: 1px solid transparent;
  border-radius: var(--rpen-radius, 1px) var(--rpen-radius, 1px) 0 0;
  background: transparent;
  color: var(--rpen-muted, var(--muted));
  font-size: 14px;
}

#home-library-tabs [role="tab"]:hover {
  color: var(--rpen-text, inherit);
  border-color: var(--rpen-border, var(--line));
  background: var(--rpen-surface-alt, #282828);
}

#home-library-tabs [role="tab"][aria-selected="true"] {
  color: var(--rpen-accent-text, var(--accent));
  border-color: var(--rpen-border, var(--line));
  border-bottom-color: transparent;
  background: var(--rpen-surface-alt, #282828);
}

#home-library-tabs [role="tab"][aria-selected="true"]::after {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: -9px;
  height: 2px;
  background: var(--rpen-accent, var(--accent));
}

.home-library-panel[hidden] { display: none; }
.home-library-panel { min-width: 0; }

/* ---------- 通用：状态文字与容量条 ---------- */

.cloud-library {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.cloud-library-status,
.cloud-library-current {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.cloud-library-status[data-tone="error"] { color: var(--rpen-error, #e46e6e); }
.cloud-library-status[data-tone="warning"] { color: var(--rpen-warning, #e6c65c); }
.cloud-library-guest {
  margin: 8px 0;
  padding: 14px 16px;
  border: 1px dashed var(--rpen-border, var(--line));
  border-radius: var(--rpen-radius-panel, 4px);
  background: var(--rpen-surface-alt, #282828);
}

.quota-bar {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1 1 280px;
  min-width: 0;
  max-width: 560px;
}

.quota-bar-track {
  position: relative;
  width: 100%;
  height: 8px;
  overflow: hidden;
  border: 1px solid var(--rpen-border, var(--line));
  border-radius: 999px;
  background: var(--rpen-input, #383838);
}

.quota-bar-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--rpen-accent, var(--accent)), color-mix(in srgb, var(--rpen-accent, var(--accent)) 70%, var(--rpen-info, #8dd6ee)));
  transition: width var(--rpen-motion-normal, 220ms) var(--rpen-motion-easing, ease);
}

.quota-bar[data-percent^="9"] .quota-bar-fill,
.quota-bar[data-percent="100"] .quota-bar-fill {
  background: linear-gradient(90deg, var(--rpen-warning, #e6c65c), var(--rpen-error, #e46e6e));
}

.quota-bar-text {
  font-size: 12.5px;
  color: var(--rpen-text, inherit);
  font-variant-numeric: tabular-nums;
}

.quota-bar-stored {
  margin: 0;
  font-size: 11.5px;
}

/* ---------- 在线谱面 ---------- */

.cloud-online-container { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

.cloud-library-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px 18px;
  min-width: 0;
}

.cloud-library-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.cloud-online-list,
.cloud-shared-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(285px, 1fr));
  gap: 14px;
  min-width: 0;
}

.cloud-chart-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--rpen-border, var(--line));
  border-radius: var(--rpen-radius-panel, 4px);
  background: var(--rpen-surface-alt, #282828);
  box-shadow: var(--rpen-panel-shadow, none);
}

.cloud-chart-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
  /* styles.css 的全局 header 规则给了 #202020 背景 + 6/12 内边距 + 下边框，
     卡片标题区继承下来就是“文字下面垫一个黑方块”。这里全部清掉。 */
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.cloud-chart-card-head h2 {
  flex: 1 1 160px;
  min-width: 0;
  margin: 0;
  font-size: 17px;
  font-weight: 400;
  overflow-wrap: anywhere;
}

.cloud-chart-version,
.public-chart-version,
.cloud-share-badge,
.cloud-submission-badge,
.cloud-permission-badge,
.public-status-badge,
.share-permission-badge {
  flex: none;
  padding: 1px 8px;
  border: 1px solid var(--rpen-border, var(--line));
  border-radius: var(--rpen-radius, 1px);
  background: var(--rpen-elevated, #202020);
  color: var(--rpen-muted, var(--muted));
  font-size: 11.5px;
  line-height: 1.7;
  white-space: nowrap;
}

.cloud-chart-meta {
  margin: 0;
  color: var(--rpen-muted, var(--muted));
  font-size: 12px;
  overflow-wrap: anywhere;
}

.cloud-chart-time { margin: 0; font-size: 11.5px; }

.cloud-chart-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: auto;
  padding-top: 4px;
}

.cloud-chart-actions > button { flex: none; }

.cloud-submission-badge[data-status="pending"] { color: var(--rpen-warning, #e6c65c); border-color: var(--rpen-warning, #e6c65c); }
.cloud-submission-badge[data-status="approved"] { color: var(--rpen-success, #65c878); border-color: var(--rpen-success, #65c878); }
.cloud-submission-badge[data-status="rejected"] { color: var(--rpen-error, #e46e6e); border-color: var(--rpen-error, #e46e6e); }

.cloud-share-badge { color: var(--rpen-info, #8dd6ee); border-color: var(--rpen-info, #8dd6ee); }

.cloud-permission-badge[data-permission="chart"] { color: var(--rpen-info, #8dd6ee); border-color: var(--rpen-info, #8dd6ee); }
.cloud-permission-badge[data-permission="info"] { color: var(--rpen-accent-text, var(--accent)); border-color: var(--rpen-accent, var(--accent)); }
.cloud-permission-badge[data-permission="full"] { color: var(--rpen-warning, #e6c65c); border-color: var(--rpen-warning, #e6c65c); }

.cloud-empty,
.cloud-chart-list + .hint {
  margin: 4px 0;
}

.cloud-pagination,
.public-library-pagination,
.review-pagination,
.share-friend-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.cloud-online-empty,
.cloud-shared-empty { margin: 6px 0; }

/* ---------- 上传进度 ---------- */

.upload-progress {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-width: 560px;
}

.upload-progress[hidden] { display: none; }

.upload-progress-track {
  height: 7px;
  overflow: hidden;
  border: 1px solid var(--rpen-border, var(--line));
  border-radius: 999px;
  background: var(--rpen-input, #383838);
}

.upload-progress-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--rpen-accent, var(--accent));
  transition: width 140ms linear;
}

.upload-progress-text { font-size: 12px; color: var(--rpen-muted, var(--muted)); }

/* ---------- 公开谱面库 ---------- */

.public-library { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.public-library[hidden] { display: none; }

.public-library-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  min-width: 0;
}

.public-library-head h2,
.review-panel-head h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 400;
}

.public-library-controls,
.review-panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
}

.public-library-search {
  flex: 1 1 220px;
  min-width: 140px;
  max-width: 360px;
}

.public-library-sort,
.review-status-filter { flex: none; }

.public-library-status,
.review-status,
.public-library-empty,
.review-empty { margin: 0; overflow-wrap: anywhere; }
.public-library-status[data-tone="error"],
.review-status[data-tone="error"] { color: var(--rpen-error, #e46e6e); }

.public-chart-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
  min-width: 0;
}

.public-chart-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 14px 15px;
  border: 1px solid var(--rpen-border, var(--line));
  border-radius: var(--rpen-radius-panel, 4px);
  background: var(--rpen-surface-alt, #282828);
}

.public-chart-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.public-chart-card-head h2 {
  flex: 1 1 160px;
  min-width: 0;
  margin: 0;
  font-size: 17px;
  font-weight: 400;
  overflow-wrap: anywhere;
}

.public-chart-meta {
  margin: 0;
  color: var(--rpen-muted, var(--muted));
  font-size: 12px;
  overflow-wrap: anywhere;
}

.public-chart-time { margin: 0; font-size: 11.5px; }

.public-chart-footer {
  margin-top: 8px;
}

.public-chart-stats {
  margin: 0 0 6px;
  font-size: 11.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.public-chart-downloads {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.public-chart-downloads > .hint { flex: none; margin: 0; font-size: 11.5px; }

.public-download-button { flex: 1 1 auto; padding: 3px 6px; font-size: 12px !important; text-align: center; min-width: 0; white-space: nowrap; }

.public-status-badge[data-status="pending"] { color: var(--rpen-warning, #e6c65c); border-color: var(--rpen-warning, #e6c65c); }
.public-status-badge[data-status="approved"] { color: var(--rpen-success, #65c878); border-color: var(--rpen-success, #65c878); }
.public-status-badge[data-status="rejected"] { color: var(--rpen-error, #e46e6e); border-color: var(--rpen-error, #e46e6e); }

/* ---------- 审核区 ---------- */

.review-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--rpen-border, var(--line));
  border-radius: var(--rpen-radius-panel, 4px);
  background: var(--rpen-surface, #303030);
}

.review-panel[hidden] { display: none; }

.review-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.review-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--rpen-border, var(--line));
  border-radius: var(--rpen-radius-panel, 4px);
  background: var(--rpen-surface-alt, #282828);
}

.review-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.review-card-head h2 {
  flex: 1 1 160px;
  min-width: 0;
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  overflow-wrap: anywhere;
}

.review-card-meta,
.review-card-note {
  margin: 0;
  color: var(--rpen-muted, var(--muted));
  font-size: 12px;
  overflow-wrap: anywhere;
}

.review-card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.review-card-actions input[type="text"] { flex: 1 1 240px; min-width: 140px; }
.review-card-actions > button { flex: none; }

/* ---------- 共享对话框 ---------- */

#share-modal {
  width: min(900px, 94vw);
  max-height: 88vh;
  padding: 18px 20px 14px;
  overflow: auto;
}

#share-modal[open] { display: block; }

#share-modal > form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  min-width: 0;
}

#share-modal .modal-heading { margin: 0; }

.share-dialog-body {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  grid-template-areas: "friends permission" "friends existing";
  gap: 12px;
  min-width: 0;
}

.share-friend-panel { grid-area: friends; }
.share-permission-panel { grid-area: permission; }
.share-existing { grid-area: existing; }

.share-friend-panel,
.share-permission-panel,
.share-existing {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--rpen-border, var(--line));
  border-radius: var(--rpen-radius-panel, 4px);
  background: var(--rpen-surface-alt, #282828);
}

.share-friend-panel h3,
.share-permission-panel h3,
.share-existing h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 400;
}

.share-friend-list {
  max-height: 320px;
  overflow: auto;
  overscroll-behavior: contain;
}

.share-friend-search { width: 100%; }

.share-friend-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--rpen-border, var(--line));
  border-radius: var(--rpen-radius-panel, 4px);
  background: var(--rpen-surface, #303030);
  cursor: pointer;
}

.share-friend-row:hover {
  border-color: var(--rpen-border-strong, var(--line));
  background: var(--rpen-hover, #505050);
}

.share-friend-row.active {
  border-color: var(--rpen-accent, var(--accent));
  background: var(--rpen-selected, #4d4632);
  color: var(--rpen-accent-text, var(--accent));
}

.share-friend-row input[type="radio"] {
  flex: none;
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--rpen-accent, var(--accent));
}

.share-friend-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.share-friend-name { min-width: 0; overflow-wrap: anywhere; }
.share-friend-subtitle { margin: 0; font-size: 11.5px; }

.share-permission-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.share-permission-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--rpen-border, var(--line));
  border-radius: var(--rpen-radius-panel, 4px);
  background: var(--rpen-surface, #303030);
  cursor: pointer;
}

.share-permission-option.active {
  border-color: var(--rpen-accent, var(--accent));
  background: var(--rpen-selected, #4d4632);
}

.share-permission-option input[type="radio"] {
  flex: none;
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
  accent-color: var(--rpen-accent, var(--accent));
}

.share-permission-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.share-permission-text > strong { font-weight: 400; }
.share-permission-text .hint { margin: 0; font-size: 11.5px; line-height: 1.5; }

.share-permission-warning[data-tone="warning"] { color: var(--rpen-warning, #e6c65c); margin: 0; }
.share-permission-countdown { margin: 0; }
.share-permission-countdown[data-tone="warning"] { color: var(--rpen-warning, #e6c65c); }
.share-permission-countdown[data-tone="ready"] { color: var(--rpen-success, #65c878); }

.share-existing-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 200px;
  overflow: auto;
}

.share-existing-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 6px 10px;
  border: 1px solid var(--rpen-border, var(--line));
  border-radius: var(--rpen-radius, 1px);
  background: var(--rpen-surface, #303030);
}

.share-existing-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

.share-existing-item > button { flex: none; }

.share-dialog-status { margin: 0; }
.share-dialog-status[data-tone="error"] { color: var(--rpen-error, #e46e6e); }

#share-modal .modal-actions { margin-top: 0; }

/* ---------- 设置 → 在线页 ---------- */

#settings-cloud {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 0 20px 8px;
}

#settings-modal .settings-cloud .hint { margin: 0; }

#settings-cloud .settings-group > h3 { margin-top: 0; }

.cloud-settings-quota { max-width: 560px; }

.cloud-settings-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.cloud-settings-status { min-height: 1.2em; }

#settings-modal .settings-cloud .cloud-settings-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

#settings-modal .settings-cloud .cloud-settings-toggle input { flex: none; }

/* ---------- 本地谱面库：勾选批量上传云端 ---------- */

.project-cloud-bulk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  min-width: 0;
  margin: 8px 0 14px;
  padding: 8px 12px;
  border: 1px solid var(--rpen-border, var(--line));
  border-radius: var(--rpen-radius-panel, 4px);
  background: var(--rpen-surface-alt, #282828);
}

.project-cloud-select-all,
.project-cloud-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  color: var(--rpen-muted, var(--muted));
  font-size: 12px;
  white-space: nowrap;
}

.project-cloud-select-all input[type="checkbox"],
.project-cloud-check input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  margin: 0;
  flex: none;
  accent-color: var(--rpen-accent, var(--accent));
}

.project-cloud-bulk .project-cloud-upload { flex: none; }

.project-cloud-status {
  flex: 1 1 220px;
  min-width: 0;
  margin: 0 !important;
  overflow-wrap: anywhere;
}

.project-cloud-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin-bottom: 6px;
}

.project-cloud-badge {
  flex: none;
  padding: 1px 8px;
  border: 1px solid var(--rpen-border, var(--line));
  border-radius: var(--rpen-radius, 1px);
  font-size: 11.5px;
  line-height: 1.7;
  white-space: nowrap;
}

.project-cloud-badge[data-status="synced"] {
  color: var(--rpen-success, #65c878);
  border-color: var(--rpen-success, #65c878);
}

.project-cloud-badge[data-status="stale"] {
  color: var(--rpen-warning, #e6c65c);
  border-color: var(--rpen-warning, #e6c65c);
}

.project-cloud-badge[data-status="unverified"] {
  color: var(--rpen-muted, #8a8f98);
  border-color: var(--rpen-line, #4a4d52);
}

/* ---------- 窄屏 ---------- */

@media (max-width: 900px) {
  .share-dialog-body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "friends" "permission" "existing";
  }
  .share-friend-list { max-height: 240px; }
}

@media (max-width: 700px) {
  #home-library-tabs [role="tab"] { padding: 7px 12px; font-size: 13px; }
  .cloud-online-list,
  .cloud-shared-list,
  .public-chart-list { grid-template-columns: minmax(0, 1fr); }
  .cloud-library-head { align-items: flex-start; }
  #share-modal { padding: 12px; }
  .review-card-actions input[type="text"] { flex: 1 1 100%; }
  .project-cloud-bulk { align-items: flex-start; }
  .project-cloud-status { flex-basis: 100%; }
}

/* 公开库：管理员下架行 + 只看自己 */
.public-library-mine {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  color: var(--rpen-muted, var(--muted));
  font-size: 12px;
}

.public-moderator-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--rpen-border, var(--line));
}

.public-moderator-toggle {
  flex: none;
  font-size: 12px;
  color: var(--rpen-error, #e46e6e);
  border-color: var(--rpen-error, #e46e6e);
}

.public-moderator-editor {
  display: inline-flex;
  flex: 1 1 auto;
  gap: 6px;
  min-width: 0;
}

.public-moderator-reason {
  flex: 1 1 160px;
  min-width: 0;
  font-size: 12px;
}

/* 公开库高级卡片：左曲绘、右信息 */
.public-chart-body {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.public-chart-cover {
  flex: none;
  width: 132px;
  height: 74px;
  border: 1px solid var(--rpen-border, var(--line));
  border-radius: var(--rpen-radius-panel, 4px);
  overflow: hidden;
  background: var(--rpen-surface-alt, #282828);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--rpen-muted, var(--muted));
  font-size: 24px;
  font-weight: 600;
}

.public-chart-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.public-chart-info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.public-chart-owner {
  margin: 0;
  color: var(--rpen-muted, var(--muted));
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.public-chart-row {
  display: flex;
  gap: 8px;
  font-size: 12.5px;
  min-width: 0;
}

.public-chart-label {
  flex: none;
  width: 30px;
  color: var(--rpen-muted, var(--muted));
}

.public-chart-value {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--rpen-text, var(--text));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.public-chart-stats {
  margin: 2px 0 0;
}

@media (max-width: 640px) {
  .public-chart-body { flex-direction: column; }
  .public-chart-cover { width: 100%; height: 90px; }
}

/* ---------------------------------------------------------------------------
   在线 / 共享谱面卡片与本地谱面库对齐
   .android-cloud-cover / -charter / -level 只在 Android 壳（html[data-android]）
   有样式；网页端如果不隐藏，裸 <img>/空 div 就是文字下面那块黑方块。
   --------------------------------------------------------------------------- */
html:not([data-android]) .cloud-chart-card :is(.android-cloud-cover, .android-cloud-charter, .android-cloud-level) {
  display: none !important;
}
html:not([data-android]) .cloud-chart-card {
  border: 1px solid #555;
  border-radius: 6px;
  background: #303030;
  box-shadow: none;
  padding: 16px;
  gap: 6px;
}
html:not([data-android]) .cloud-chart-card-head h2 {
  margin: 0 0 2px;
  font-size: 18px;
  font-weight: 400;
  color: #fff;
}
html:not([data-android]) .cloud-chart-card :is(.cloud-chart-meta, .cloud-chart-time) {
  color: #aaa;
}
html:not([data-android]) .cloud-chart-card :is(.cloud-share-badge, .cloud-submission-badge, .cloud-permission-badge) {
  background: transparent;
  border-color: #666;
  border-radius: 3px;
}