/* Browse many source records without changing the administrator layout. */
body[data-mode="user"] .main {
  padding: 16px 18px 30px;
}

/* User search keeps frequent actions close to the result and stages extra conditions. */
body[data-mode="user"] .list-search-form{display:flex;gap:6px;margin-bottom:6px}
body[data-mode="user"] .list-search-form input{flex:1;min-width:0}
body[data-mode="user"] .search-tools{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:8px}
body[data-mode="user"] .search-tools>select{width:auto;max-width:210px;min-width:100px}
body[data-mode="user"] .search-tools select,body[data-mode="user"] .home-search-tools .period-control select{min-height:32px;border:1px solid var(--line);border-radius:7px;background:#fff;padding:6px 9px;color:var(--text);font:inherit;font-size:12px}
body[data-mode="user"] .period-control{display:flex;align-items:center;gap:2px;min-width:0}
body[data-mode="user"] .period-control select{width:auto;min-width:120px;max-width:180px}
body[data-mode="user"] .period-edit{width:32px;min-width:32px;height:32px}
body[data-mode="user"] .active-conditions{display:flex;flex-wrap:wrap;gap:4px;margin:4px 0 9px}
body[data-mode="user"] .condition-chip{border:1px solid #d9e6f5;border-radius:6px;background:#edf5ff;color:#1760a8;padding:4px 8px;font:inherit;font-size:11px;max-width:100%;overflow-wrap:anywhere;cursor:pointer}
body[data-mode="user"] .condition-chip::after{content:' ×';margin-left:3px}
body[data-mode="user"] .video-search-modes{display:flex;gap:4px;margin-bottom:5px}
body[data-mode="user"] .video-search-modes .active{background:#e3f0ff;color:#0067d8}
body[data-mode="user"] .date-range-fields{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
body[data-mode="user"] .date-range-column{display:grid;gap:8px;min-width:0}
body[data-mode="user"] .condition-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
body[data-mode="user"] .field-error{color:#b83232;font-size:13px;margin-top:9px}
body[data-mode="user"] .data-kinds{width:max-content;max-width:100%;margin-bottom:6px}
body[data-mode="user"] .search-condition-dialog select{max-width:100%}
@media(max-width:600px){
  body[data-mode="user"] .search-tools{gap:4px}
  body[data-mode="user"] .search-tools>select{min-width:80px;max-width:150px;flex:1}
  body[data-mode="user"] .search-tools .period-control{flex:1 1 145px}
  body[data-mode="user"] .period-control select{width:100%;min-width:100px}
  body[data-mode="user"] .search-tools .search-conditions{padding:6px 8px;font-size:11px;min-height:36px}
  body[data-mode="user"] .condition-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  body[data-mode="user"] .date-range-fields{gap:8px}
  body[data-mode="user"] .search-tools select,body[data-mode="user"] .period-edit,body[data-mode="user"] .list-search-form .button{min-height:40px}
  body[data-mode="user"] .video-search-modes .button{min-height:36px}
}

body[data-mode="user"] .page-heading {
  gap: 12px;
  margin-bottom: 12px;
}

body[data-mode="user"] .page-heading h1 {
  font-size: 21px;
  line-height: 1.35;
}

body[data-mode="user"] .page-heading p {
  margin-top: 3px;
  font-size: 11px;
  line-height: 1.5;
}

body[data-mode="user"] .heading-actions {
  gap: 5px;
}

body[data-mode="user"] .heading-actions .button {
  min-height: 31px;
  padding: 6px 9px;
  font-size: 11px;
}

body[data-mode="user"] .filters {
  gap: 6px;
  margin-bottom: 6px;
}

body[data-mode="user"] .filters input,
body[data-mode="user"] .filters select,
body[data-mode="user"] .filters .button {
  min-height: 32px;
  padding: 6px 9px;
  font-size: 11px;
}

body[data-mode="user"] .filters select {
  min-width: 96px;
}

body[data-mode="user"] .filter-advanced {
  margin-bottom: 7px;
}

body[data-mode="user"] .filter-advanced > summary {
  padding: 3px 0;
  font-size: 11px;
}

body[data-mode="user"] .filter-advanced .form-grid {
  margin-top: 6px;
  padding: 12px;
  gap: 10px 12px;
}

body[data-mode="user"] .source-info {
  margin: 7px 0 9px;
  padding: 7px 10px;
  font-size: 10px;
  line-height: 1.5;
}

body[data-mode="user"] .list-toolbar {
  margin: 8px 0;
  gap: 8px;
}

body[data-mode="user"] .list-count,
body[data-mode="user"] .segmented button {
  font-size: 11px;
}

body[data-mode="user"] .segmented button {
  padding: 4px 9px;
}

body[data-mode="user"] .compare-tray {
  margin-bottom: 9px;
  padding: 8px 11px;
}

/* First-time views reserve compact space until their source records arrive. */
body[data-mode="user"] .view-placeholder {
  display: grid;
  gap: 12px;
  margin: 0;
}

body[data-mode="user"] .view-placeholder-heading {
  width: min(200px, 70%);
  height: 26px;
  border-radius: 5px;
  background: #e8edf4;
}

body[data-mode="user"] .view-placeholder-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(134px, 1fr));
  gap: 8px;
}

body[data-mode="user"] .view-placeholder-card {
  height: 160px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: linear-gradient(#e8edf4 0 52%, #f4f6f9 52% 100%);
}

/* Each tile retains the original source, indicators, and record actions. */
body[data-mode="user"] .record-list.media-grid,
body[data-mode="user"] .record-list.info-grid {
  display: grid;
  align-items: stretch;
  gap: 8px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}

body[data-mode="user"] .record-list.media-grid {
  grid-template-columns: repeat(auto-fill, minmax(134px, 1fr));
}

body[data-mode="user"] .record-list.info-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body[data-mode="user"] .media-grid > .record-card,
body[data-mode="user"] .info-grid > .record-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
  gap: 0;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: white;
}

body[data-mode="user"] .media-grid > .record-card:last-child,
body[data-mode="user"] .info-grid > .record-card:last-child {
  border-bottom: 1px solid var(--line);
}

body[data-mode="user"] .media-grid > .record-card {
  padding: 0;
  overflow: hidden;
}

body[data-mode="user"] .record-visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-width: 0;
  aspect-ratio: 16 / 9;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 6px;
  background: var(--blue-light);
  color: var(--blue);
}

body[data-mode="user"] .media-grid .record-visual {
  border-radius: 6px 6px 0 0;
}

body[data-mode="user"] .record-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body[data-mode="user"] .record-visual-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #edf7ff, #e7effb);
}

body[data-mode="user"] .record-visual-fallback > .icon,
body[data-mode="user"] .record-visual-fallback > .brand-icon {
  width: 36px;
  height: 36px;
}

body[data-mode="user"] .media-grid .record-rank {
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 23px;
  min-height: 23px;
  padding: 2px 5px;
  border: 1px solid rgba(255, 255, 255, .75);
  border-radius: 5px;
  background: rgba(20, 26, 36, .82);
  color: white;
  font-size: 11px;
  line-height: 1.25;
  font-weight: 700;
  pointer-events: none;
}

body[data-mode="user"] .media-grid .record-main {
  flex: 0 0 auto;
  padding: 6px 7px 0;
}

body[data-mode="user"] .media-grid .record-meta,
body[data-mode="user"] .info-grid .record-meta {
  gap: 4px 6px;
  margin-bottom: 4px;
  font-size: 10px;
  line-height: 1.35;
}

body[data-mode="user"] .media-grid .record-meta {
  flex-wrap: nowrap;
  overflow: hidden;
  white-space: nowrap;
  margin-bottom: 3px;
}

body[data-mode="user"] .media-grid .record-meta > span {
  flex-shrink: 0;
}

body[data-mode="user"] .media-grid .record-meta > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
}

body[data-mode="user"] .media-grid .tag,
body[data-mode="user"] .info-grid .tag {
  padding: 1px 4px;
  font-size: 9px;
}

body[data-mode="user"] .media-grid .record-title,
body[data-mode="user"] .info-grid .record-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  width: 100%;
  overflow: hidden;
  font-size: 12px;
  line-height: 1.4;
  word-break: break-word;
}

body[data-mode="user"] .media-grid .record-title {
  min-height: 32px;
  line-height: 1.35;
}

body[data-mode="user"] .media-grid .original-title,
body[data-mode="user"] .info-grid .original-title {
  margin-top: 2px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 10px;
  line-height: 1.35;
}

body[data-mode="user"] .media-grid .record-summary,
body[data-mode="user"] .info-grid .record-summary {
  -webkit-line-clamp: 2;
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.4;
}

/* The detail page carries descriptions and alternative original titles. */
body[data-mode="user"] .media-grid .original-title,
body[data-mode="user"] .media-grid .record-summary {
  display: none;
}

body[data-mode="user"] .media-grid .record-metrics,
body[data-mode="user"] .info-grid .record-metrics {
  gap: 3px 10px;
  margin-top: 5px;
  font-size: 10px;
  line-height: 1.4;
}

body[data-mode="user"] .media-grid .record-metrics strong,
body[data-mode="user"] .info-grid .record-metrics strong {
  margin-left: 3px;
}

body[data-mode="user"] .media-grid .record-metrics {
  gap: 2px 7px;
  margin-top: 3px;
  line-height: 1.3;
}

body[data-mode="user"] .media-grid [data-field="scope"],
body[data-mode="user"] .info-grid [data-field="scope"] {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
}

body[data-mode="user"] .media-grid [data-field="scope"] {
  -webkit-line-clamp: 1;
  margin-top: 3px;
  font-size: 9px;
  line-height: 1.35;
}

body[data-mode="user"] .media-grid .record-actions,
body[data-mode="user"] .info-grid .record-actions {
  align-items: center;
  justify-content: flex-end;
  flex-direction: row;
  width: auto;
  max-width: none;
  gap: 2px;
  margin-top: 4px;
}

body[data-mode="user"] .media-grid .record-actions {
  margin-top: auto;
  padding: 3px 4px;
}

body[data-mode="user"] .media-grid .record-actions .icon-button,
body[data-mode="user"] .info-grid .record-actions .icon-button {
  width: 27px;
  height: 27px;
  border-radius: 5px;
}

body[data-mode="user"] .media-grid .record-actions .icon,
body[data-mode="user"] .info-grid .record-actions .icon {
  width: 15px;
  height: 15px;
}

body[data-mode="user"] .media-grid .record-actions .icon-button {
  width: 24px;
  height: 24px;
}

body[data-mode="user"] .info-grid > .record-card {
  gap: 0 8px;
}

body[data-mode="user"] .info-grid .record-title > .brand-icon {
  width: 17px;
  height: 17px;
  margin-right: 4px;
}

body[data-mode="user"] .info-grid .record-rank {
  align-self: flex-start;
  min-width: 0;
  padding: 0 0 3px;
  color: var(--blue);
  font-size: 12px;
  line-height: 1.3;
}

/* The home page leads with actual records; its illustration stays secondary. */
body[data-mode="user"] .welcome-banner {
  height: 72px;
  margin-bottom: 10px;
  border-radius: 7px;
}

body[data-mode="user"] .welcome-copy {
  padding: 10px 15px;
  max-width: 75%;
}

body[data-mode="user"] .welcome-copy > span {
  display: block;
  font-size: 10px;
  line-height: 1.2;
}

body[data-mode="user"] .welcome-copy h2 {
  margin: 2px 0;
  font-size: 16px;
  line-height: 1.3;
}

body[data-mode="user"] .welcome-copy p {
  margin: 0;
  font-size: 10px;
  line-height: 1.3;
}

body[data-mode="user"] .platform-shortcuts {
  gap: 6px;
  margin-bottom: 9px;
}

body[data-mode="user"] .platform-shortcut {
  min-width: 100px;
  min-height: 36px;
  padding: 7px 10px;
  gap: 7px;
  border-radius: 6px;
  font-size: 11px;
}

body[data-mode="user"] .platform-symbol {
  width: 24px;
  height: 24px;
  border-radius: 5px;
}

body[data-mode="user"] .platform-symbol .brand-icon {
  width: 20px;
  height: 20px;
}

body[data-mode="user"] .section-grid {
  display: block;
  column-count: 3;
  column-gap: 10px;
}

body[data-mode="user"] .section-grid > .panel {
  display: inline-block;
  width: 100%;
  min-width: 0;
  margin: 0 0 6px;
  padding: 9px;
  border-radius: 8px;
  vertical-align: top;
  break-inside: avoid-column;
  page-break-inside: avoid;
}

body[data-mode="user"] .section-grid .panel-header {
  gap: 7px;
  margin-bottom: 4px;
}

body[data-mode="user"] .section-grid .panel-header h2 {
  font-size: 13px;
}

body[data-mode="user"] .section-grid .panel-header .button {
  min-height: 24px;
  padding: 4px 6px;
  font-size: 10px;
}

body[data-mode="user"] .section-grid .source-info {
  display: block;
  overflow: hidden;
  padding: 4px 6px;
  margin: 0 0 5px;
  font-size: 10px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

body[data-mode="user"] .record-list.compact {
  border: 0;
  border-radius: 0;
  background: transparent;
}

body[data-mode="user"] .compact .record-card {
  min-width: 0;
  padding: 7px 0;
  gap: 7px;
  align-items: flex-start;
}

body[data-mode="user"] .compact .record-visual {
  flex: 0 0 64px;
  width: 64px;
  height: 42px;
  margin-top: 2px;
  aspect-ratio: auto;
  border-radius: 4px;
}

body[data-mode="user"] .compact .record-visual-fallback > .brand-icon,
body[data-mode="user"] .compact .record-visual-fallback > .icon {
  width: 24px;
  height: 24px;
}

body[data-mode="user"] .compact .record-rank {
  min-width: 15px;
  padding-top: 2px;
  font-size: 12px;
}

body[data-mode="user"] .compact .record-meta {
  gap: 3px 5px;
  margin-bottom: 3px;
  font-size: 9px;
  line-height: 1.4;
}

body[data-mode="user"] .compact .tag {
  font-size: 9px;
  padding: 1px 4px;
}

body[data-mode="user"] .compact .record-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 11px;
  line-height: 1.4;
  word-break: break-word;
}

body[data-mode="user"] .compact .original-title,
body[data-mode="user"] .compact .record-summary {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  margin-top: 3px;
  font-size: 10px;
  line-height: 1.4;
}

body[data-mode="user"] .compact .record-metrics {
  margin-top: 3px;
  gap: 3px 7px;
  font-size: 10px;
  line-height: 1.4;
}

body[data-mode="user"] .compact [data-field="scope"] {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  margin-top: 3px;
  font-size: 9px;
  line-height: 1.4;
}

body[data-mode="user"] .compact .record-actions {
  flex-direction: column;
  width: 23px;
  max-width: 23px;
  gap: 0;
}

body[data-mode="user"] .compact .record-actions .icon-button {
  width: 23px;
  height: 23px;
}

body[data-mode="user"] .compact .record-actions .icon {
  width: 14px;
  height: 14px;
}

/* Home rows repeat the source notice above; keep their facts on short lines. */
body[data-mode="user"] .section-grid .compact .record-card {
  padding: 4px 0;
}

body[data-mode="user"] .section-grid .compact .record-meta {
  flex-wrap: nowrap;
  overflow: hidden;
  margin-bottom: 2px;
  line-height: 1.3;
  white-space: nowrap;
}

body[data-mode="user"] .section-grid .compact .record-meta > span {
  flex-shrink: 0;
}

body[data-mode="user"] .section-grid .compact .record-meta > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
}

body[data-mode="user"] .section-grid .compact .record-meta .brand-icon {
  width: 12px;
  height: 12px;
}

body[data-mode="user"] .section-grid .compact .record-meta .tag {
  padding-top: 0;
  padding-bottom: 0;
}

body[data-mode="user"] .section-grid .compact .record-metrics:empty {
  display: none;
}

body[data-mode="user"] .section-grid .compact [data-field="scope"] {
  display: block;
  overflow: hidden;
  margin-top: 2px;
  line-height: 1.3;
  white-space: nowrap;
  text-overflow: ellipsis;
}

body[data-mode="user"] .pagination {
  margin: 14px 0;
}

body[data-mode="user"] .related-topics {
  gap: 5px;
  margin-top: 13px;
}

@media (min-width: 621px) {
  body[data-mode="user"] .welcome-banner {
    height: 60px;
  }

  body[data-mode="user"] .welcome-copy {
    padding: 4px 15px;
  }
}

@media (min-width: 1700px) {
  body[data-mode="user"] .record-list.info-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 1240px) {
  body[data-mode="user"] .record-list.info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-mode="user"] .section-grid {
    column-count: 2;
  }
}

@media (max-width: 900px) {
  body[data-mode="user"] .main {
    padding: 13px 14px 28px;
  }

  body[data-mode="user"] .record-list.info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-mode="user"] .welcome-copy {
    max-width: 82%;
  }
}

@media (max-width: 620px) {
  body[data-mode="user"] .main {
    padding: 12px 11px 25px;
  }

  body[data-mode="user"] .page-heading {
    gap: 7px;
    margin-bottom: 9px;
  }

  body[data-mode="user"] .page-heading h1 {
    font-size: 19px;
  }

  body[data-mode="user"] .record-list.media-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  body[data-mode="user"] .record-list.info-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  body[data-mode="user"] .section-grid {
    column-count: 1;
  }

  body[data-mode="user"] .section-grid > .panel {
    margin-bottom: 8px;
  }

  body[data-mode="user"] .filters {
    gap: 5px;
  }

  body[data-mode="user"] .filters input {
    min-width: 0;
  }

  body[data-mode="user"] .filters select {
    min-width: 76px;
  }

  body[data-mode="user"] .welcome-copy {
    max-width: 100%;
    padding: 9px 12px;
  }

  body[data-mode="user"] .welcome-copy p {
    max-width: none;
    font-size: 10px;
  }

  body[data-mode="user"] .platform-shortcut {
    min-width: 96px;
    min-height: 34px;
    padding: 6px 8px;
  }
}

/* Purpose-specific lists, without changing the existing artwork. */
body[data-mode="user"] .section-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));columns:auto;gap:10px;align-items:start}
body[data-mode="user"] .section-grid>.panel{width:auto;margin:0;min-width:0}
body[data-mode="user"] .account-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
body[data-mode="user"] .record-card[data-profile="true"]{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:9px;align-items:center;padding:10px}
body[data-mode="user"] .record-card[data-profile="true"] .record-visual{width:48px;height:48px;min-height:48px;aspect-ratio:1;border-radius:9px;align-self:start}
body[data-mode="user"] .record-card[data-profile="true"] .record-visual img{width:48px;height:48px;object-fit:cover}
body[data-mode="user"] .record-card[data-profile="true"] .record-actions{display:flex;flex-direction:column;gap:2px}
body[data-mode="user"] .record-card[data-profile="true"] .record-main{padding:0;min-width:0}
body[data-mode="user"] .record-channel{border:0;background:transparent;color:#3567a1;padding:0;font:inherit;cursor:pointer;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body[data-mode="user"] .growth-value{color:#1a67b4}
body[data-mode="user"] .growth-value.unconfirmed{color:var(--muted)}
body[data-mode="user"] .detail-summary:empty{display:none}
body[data-mode="user"] .compare-tray{position:sticky;bottom:12px;z-index:15;gap:9px;max-width:100%;margin:8px 0}
body[data-mode="user"] .compare-tray>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body[data-mode="user"] .folder-navigation{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:8px 0}
body[data-mode="user"] .folder-navigation select{max-width:300px;flex:1}
body[data-mode="user"] .preference-company-list{max-height:230px;overflow:auto;padding:6px 0}
body[data-mode="user"] .preference-choice-group{min-width:0}
body[data-mode="user"] .preference-choice-group>summary{font-size:13px;cursor:pointer;font-weight:600}
body[data-mode="user"] .preference-choice-group .checkbox-list{max-height:230px;overflow:auto;margin-top:8px}
@media(max-width:1100px){body[data-mode="user"] .section-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){
 body[data-mode="user"] .section-grid,body[data-mode="user"] .account-list{grid-template-columns:minmax(0,1fr)}
 body[data-mode="user"] .record-card[data-profile="true"]{grid-template-columns:42px minmax(0,1fr) auto;gap:7px;padding:9px}
 body[data-mode="user"] .record-card[data-profile="true"] .record-visual,body[data-mode="user"] .record-card[data-profile="true"] .record-visual img{width:42px;height:42px;min-height:42px}
 body[data-mode="user"] .record-card[data-profile="true"] .record-actions{flex-direction:row}
 body[data-mode="user"] .record-card[data-profile="true"] .record-actions .icon-button{min-width:32px;min-height:36px}
 body[data-mode="user"] .compare-tray{bottom:max(8px,env(safe-area-inset-bottom));padding:8px}
}

body[data-mode="user"] .record-video-info{display:flex;align-items:center;flex-wrap:wrap;gap:2px 6px;min-width:0;margin:3px 0;font-size:10px;color:var(--muted)}
body[data-mode="user"] .record-video-info>.record-channel{flex:1 1 100%;font-size:11px;text-align:left;line-height:1.35}
body[data-mode="user"] .record-video-info>small{font-size:10px}
body[data-mode="user"] .compare-tray{position:fixed;left:calc(var(--sidebar) + 22px);right:22px;bottom:12px;margin:0;width:auto;background:#edf5ff;border:1px solid #cbdff6;box-shadow:0 4px 15px rgba(30,60,95,.08)}
body[data-mode="user"] .main.has-compare{padding-bottom:85px}
body[data-mode="user"] .instagram-embed-panel{display:grid;gap:8px;max-width:100%}
body[data-mode="user"] .instagram-embed-content{min-width:0;max-width:100%;overflow:hidden}
body[data-mode="user"] .instagram-embed-content iframe,body[data-mode="user"] .instagram-embed-content blockquote{width:100%!important;max-width:100%!important;min-width:0!important;margin:0!important}
body[data-mode="user"] .preference-choice-group>div>input[type=search]{width:100%;margin:8px 0 5px}
@media(max-width:600px){body[data-mode="user"] .compare-tray{left:12px;right:12px;bottom:max(8px,env(safe-area-inset-bottom));gap:5px}body[data-mode="user"] .compare-tray .button{padding:6px 8px;font-size:11px}body[data-mode="user"] .record-video-info>small{font-size:10px}}

body[data-mode="user"] .search-progress,body[data-mode="user"] .search-draft-notice{font-size:11px;line-height:1.5;color:var(--muted);margin:3px 0 7px}
body[data-mode="user"] .search-progress[data-busy="true"]{color:var(--blue)}
body[data-mode="user"] .list-view-controls{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:5px}
body[data-mode="user"] .main.display-list .record-list.media-grid,body[data-mode="user"] .main.display-list .record-list.info-grid{grid-template-columns:minmax(0,1fr);gap:5px}
body[data-mode="user"] .main.display-list .record-list>.record-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 12px}
body[data-mode="user"] .main.display-list .record-card[data-media="true"]{grid-template-columns:96px minmax(0,1fr) auto}
body[data-mode="user"] .main.display-list .record-card[data-profile="true"]{grid-template-columns:44px minmax(0,1fr) auto}
body[data-mode="user"] .main.display-list .record-visual{width:96px;aspect-ratio:16/9;min-height:0;margin:0;border-radius:5px}
body[data-mode="user"] .main.display-list .record-visual img{width:100%;height:100%;min-height:0;object-fit:cover}
body[data-mode="user"] .main.display-list .record-card[data-profile="true"] .record-visual{width:44px;height:44px;aspect-ratio:1;border-radius:50%}
body[data-mode="user"] .main.display-list .record-main{padding:0;min-width:0}
body[data-mode="user"] .main.display-list .record-title{font-size:13px;line-height:1.45;text-align:left}
body[data-mode="user"] .main.display-list .record-summary{margin:3px 0;font-size:11px;-webkit-line-clamp:2}
body[data-mode="user"] .main.display-list .record-meta{margin-bottom:3px;flex-wrap:wrap}
body[data-mode="user"] .main.display-list .record-metrics{margin-top:3px;flex-direction:row;flex-wrap:wrap;gap:4px 12px}
body[data-mode="user"] .main.display-list .record-actions{display:flex;flex-direction:row;gap:2px;margin:0;padding:0;border:0}
body[data-mode="user"] .record-card.compare-selected{border-color:#91baf5;box-shadow:inset 0 0 0 1px #91baf5}
body[data-mode="user"] .compare-selection-names{display:flex;gap:4px;min-width:0;flex:1;overflow-x:auto;overscroll-behavior-x:contain}
body[data-mode="user"] .compare-selection-names .compare-remove{max-width:190px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:0 0 auto}
body[data-mode="user"] .compare-stack{display:none}
body[data-mode="user"] .compare-format{margin-bottom:8px}
@media(max-width:600px){
 body[data-mode="user"] .page-heading{flex-direction:row;align-items:flex-start;gap:8px}
 body[data-mode="user"] .page-heading>div:first-child{flex:1;min-width:0}
 body[data-mode="user"] .page-heading .heading-actions{margin-left:auto;flex-shrink:0;width:auto}
 body[data-mode="user"] .page-heading h1{font-size:19px}
 body[data-mode="user"] .main.display-list .record-list>.record-card{padding:8px;gap:7px}
 body[data-mode="user"] .main.display-list .record-card[data-media="true"]{grid-template-columns:64px minmax(0,1fr)}
 body[data-mode="user"] .main.display-list .record-card[data-profile="true"]{grid-template-columns:40px minmax(0,1fr)}
 body[data-mode="user"] .main.display-list .record-visual{width:64px}
 body[data-mode="user"] .main.display-list .record-card[data-profile="true"] .record-visual{width:40px;height:40px}
 body[data-mode="user"] .main.display-list .record-actions{grid-column:1/-1;justify-content:flex-end}
 body[data-mode="user"] .main.display-list .record-actions .icon-button{min-width:40px;min-height:40px}
 body[data-mode="user"] .list-view-controls .segmented button{font-size:10px;padding:5px 7px}
 body[data-mode="user"] .compare-selection-names .compare-remove{max-width:125px}
 body[data-mode="user"] .compare-stack{display:grid;gap:8px}
 body[data-mode="user"] .compare-stack .key-value{align-items:flex-start;gap:8px;min-width:0}
 body[data-mode="user"] .compare-stack .key-value>*{min-width:0;overflow-wrap:anywhere}
 body[data-mode="user"] .compare-stack .key-value>span{flex:1}
 body[data-mode="user"] .compare-stack .key-value>div{flex:1.2}
 body[data-mode="user"] .compare-original-table{display:none}
 body[data-mode="user"] .main.compare-force-table .compare-stack{display:none}
 body[data-mode="user"] .main.compare-force-table .compare-original-table{display:block}
}
.period-meaning {flex-shrink:0;color:var(--muted,#64748b);font-size:11px;white-space:nowrap;}
.history-controls .field {min-width:0;}
.history-controls select {max-width:100%;}
.history-controls .field:has([aria-label="수치 조건"]) {flex:1 1 240px;max-width:100%;}
.history-period {max-width:100%;}
.record-culture-info {margin:2px 0;color:var(--muted,#64748b);font-size:11px;line-height:1.45;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere;}
.period-help {grid-column:1/-1;border-top:1px solid var(--line,#e2e8f0);padding-top:10px;}
.period-help summary {cursor:pointer;color:var(--muted,#64748b);font-size:12px;}
.period-help .helper-text {margin:8px 0 0;line-height:1.55;}
@media(max-width:600px){.history-controls .field {flex:1 1 140px;max-width:100%;}.history-controls .field:has([aria-label="수치 조건"]) {flex-basis:100%;}.history-controls .period-control select {min-width:0;}}

body[data-mode="user"] .tiktok-embed-panel{display:grid;gap:10px;justify-items:center;min-width:0}
body[data-mode="user"] .tiktok-embed-panel .helper-text{width:100%}
body[data-mode="user"] .tiktok-player{border:0;width:min(400px,100%);max-width:100%;height:min(710px,70vh);border-radius:8px;background:#f7f8fc}
body[data-mode="user"] [data-anchor="detail-sources"] .key-value{min-width:0;flex-wrap:wrap;align-items:flex-start}
body[data-mode="user"] [data-anchor="detail-sources"] .key-value>span{flex:1 1 180px;min-width:0;overflow-wrap:anywhere}
body[data-mode="user"] [data-anchor="detail-sources"] .key-value>.button{flex:none;max-width:100%}

/* Keep the existing eight-column video cards visible with richer controls. */
body[data-mode="user"] .search-tools .data-kinds,body[data-mode="user"] .search-tools .video-search-modes{margin:0}
@media(min-width:1001px){
 body[data-mode="user"] .main:has(.list-search-form) .page-heading{margin-bottom:8px}
 body[data-mode="user"] .main:has(.list-search-form) .page-heading>div:first-child{display:flex;align-items:center;gap:12px;min-width:0}
 body[data-mode="user"] .main:has(.list-search-form) .page-heading p{margin:0}
 body[data-mode="user"] .list-search-form{margin-bottom:4px}
 body[data-mode="user"] .list-toolbar{margin:4px 0}
 body[data-mode="user"] .search-tools{margin-bottom:4px}
}
@media(max-width:600px){body[data-mode="user"] .search-tools .video-search-modes .button{padding:6px 8px;font-size:10px}}

/* Keep all YouTube conditions and facts while avoiding a third mobile tools row. */
body[data-mode="user"] .search-quick-actions{display:contents}
@media(max-width:600px){
 body[data-mode="user"] .main:has(.search-quick-actions) .list-search-form input,body[data-mode="user"] .main:has(.search-quick-actions) .list-search-form .button{min-height:40px}
 body[data-mode="user"] .main:has(.search-quick-actions) .list-search-form .search-conditions{padding:6px 8px;font-size:11px}
 body[data-mode="user"] .search-quick-actions{display:flex;align-items:center;gap:4px;flex:1 1 100%;min-width:0;max-width:100%;overflow-x:auto;scrollbar-width:none}
 body[data-mode="user"] .search-quick-actions>.data-kinds,body[data-mode="user"] .search-quick-actions>.video-search-modes{flex:none;max-width:none}
 body[data-mode="user"] .search-quick-actions>.data-kinds{padding:0}
 body[data-mode="user"] .search-quick-actions button:focus-visible{outline-offset:-2px}
 body[data-mode="user"] .search-quick-actions .data-kinds button,body[data-mode="user"] .search-quick-actions .video-search-modes .button{min-height:40px}
 body[data-mode="user"] .main:has(.search-quick-actions) .search-tools{margin-bottom:4px}
 body[data-mode="user"] .main:has(.search-quick-actions) .active-conditions{margin:2px 0 4px}
 body[data-mode="user"] .main:has(.search-quick-actions) .list-toolbar{margin:2px 0}
}

/* Long connected-original titles must fit the detail relation row on PC and mobile. */
body[data-mode="user"] [data-anchor="detail-relations"] [data-detail-relation]>.button {
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: left;
}