.self-media { --sm-text:#273244; --sm-muted:#606d80; --sm-line:#dce2eb; --sm-accent:#2563a6; --sm-soft:#f1f6fc; color:var(--sm-text); min-width:0; font-size:14px; line-height:1.6; }
.self-media *, .self-media *::before, .self-media *::after { box-sizing:border-box; }
.self-media h1, .self-media h2, .self-media h3, .self-media h4, .self-media p { margin:0; }
.self-media h1 { font-size:24px; line-height:1.3; }
.self-media h2 { font-size:18px; line-height:1.45; }
.self-media h3 { font-size:16px; line-height:1.6; }
.self-media h4 { font-size:14px; margin-top:18px; margin-bottom:6px; }
.self-media a { color:var(--sm-accent); text-underline-offset:3px; overflow-wrap:anywhere; }
.self-media button, .self-media input, .self-media select { font:inherit; }
.self-media button { cursor:pointer; }
.self-media button:disabled, .self-media select:disabled { cursor:not-allowed; opacity:.55; }
.self-media button:focus-visible, .self-media input:focus-visible, .self-media select:focus-visible, .self-media a:focus-visible, .self-media summary:focus-visible { outline:2px solid var(--sm-accent); outline-offset:3px; }
.self-media ::selection { background:#dceaff; color:#18263c; }
.self-media input, .self-media select { width:100%; min-width:0; height:38px; padding:6px 10px; border:1px solid #c7d0de; border-radius:5px; background:#fff; color:var(--sm-text); caret-color:var(--sm-accent); }
.self-media input::placeholder { color:#6c7889; }
.self-media input:hover, .self-media select:hover { border-color:#95a7bf; }
.self-media .sm-header { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:18px; padding:22px 24px; background:#fff; border:1px solid var(--sm-line); border-radius:8px; }
.self-media .sm-header p { color:var(--sm-muted); margin-top:6px; }
.self-media .sm-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.self-media .sm-account { display:flex; align-items:center; gap:9px; }
.self-media .sm-account select { width:172px; }
.self-media .sm-button { min-height:36px; padding:6px 13px; border:1px solid #c7d0de; border-radius:5px; background:#fff; color:var(--sm-text); white-space:nowrap; }
.self-media .sm-button:hover:not(:disabled) { color:var(--sm-accent); border-color:var(--sm-accent); background:var(--sm-soft); }
.self-media .sm-primary { color:#fff; background:var(--sm-accent); border-color:var(--sm-accent); }
.self-media .sm-primary:hover:not(:disabled) { color:#fff; background:#1d518b; }
.self-media .sm-status { min-height:24px; color:var(--sm-accent); font-size:13px; padding:2px 0; }
.self-media .sm-snapshot { display:flex; flex-wrap:wrap; gap:6px 20px; padding:0 2px 16px; color:var(--sm-muted); font-size:13px; }
.self-media .sm-snapshot strong { color:var(--sm-text); font-size:14px; }
.self-media .sm-tabs { display:flex; gap:6px; flex-wrap:wrap; border-bottom:1px solid var(--sm-line); margin-bottom:22px; }
.self-media .sm-tab { padding:10px 16px; color:var(--sm-muted); background:none; border:0; border-bottom:3px solid transparent; font-weight:600; }
.self-media .sm-tab:hover { color:var(--sm-accent); background:#edf3fb; }
.self-media .sm-tab.is-active { color:var(--sm-accent); border-bottom-color:var(--sm-accent); }
.self-media .sm-tab span { margin-left:7px; font-size:12px; font-weight:400; }
.self-media .sm-panel { padding:22px; background:#fff; border:1px solid var(--sm-line); border-radius:8px; min-width:0; }
.self-media .sm-note { color:var(--sm-muted); margin-top:6px; font-size:13px; }
.self-media .sm-loading, .self-media .sm-empty { padding:36px 22px; text-align:center; color:var(--sm-muted); }
.self-media .sm-error h2 { color:#a52b2b; }
.self-media .sm-error p { margin:10px 0 18px; }
.self-media .sm-metrics { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); background:#fff; border:1px solid var(--sm-line); border-radius:8px; margin-bottom:22px; }
.self-media .sm-metrics article { padding:19px 16px; min-width:0; border-right:1px solid var(--sm-line); }
.self-media .sm-metrics article:last-child { border-right:0; }
.self-media .sm-metrics span { display:block; color:var(--sm-muted); }
.self-media .sm-metrics strong { display:block; margin:5px 0; font-size:27px; font-weight:650; font-variant-numeric:tabular-nums; }
.self-media .sm-metrics small { display:block; font-size:11px; color:var(--sm-muted); }
.self-media .sm-chart-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.self-media .sm-chart-grid > .sm-panel { align-self:stretch; }
.self-media .sm-chart-scroll { overflow-x:auto; margin-top:18px; }
.self-media .sm-chart { display:block; width:100%; min-width:540px; max-height:310px; }
.self-media .sm-chart-text { fill:#566479; font:12px system-ui,sans-serif; }
.self-media .sm-chart-small { font-size:10px; }
.self-media .sm-axis { stroke:#aeb9c8; stroke-width:1; }
.self-media .sm-gridline { stroke:#e5eaf1; stroke-width:1; }
.self-media .sm-fill { fill:#4c7db6; }
.self-media .sm-trend { fill:none; stroke:#3774b5; stroke-width:3; }
.self-media .sm-legend { display:flex; gap:18px; font-size:12px; color:var(--sm-muted); margin:12px 0; }
.self-media .sm-legend span { display:flex; align-items:center; gap:6px; }
.self-media .sm-legend i { display:inline-block; width:12px; height:8px; border-radius:1px; }
.self-media .sm-average { background:#477cb8; }
.self-media .sm-maximum { background:#b5c8df; }
.self-media .sm-topic-row { width:100%; display:flex; align-items:center; gap:10px; background:transparent; border:0; padding:5px 0; color:var(--sm-text); text-align:left; }
.self-media .sm-topic-row:hover { background:var(--sm-soft); }
.self-media .sm-topic-name { width:88px; flex-shrink:0; font-size:12px; overflow-wrap:anywhere; }
.self-media .sm-topic-bars { flex:1; min-width:0; padding-right:48px; }
.self-media .sm-topic-bars > span { display:flex; align-items:center; height:14px; gap:5px; }
.self-media .sm-topic-bars i { display:block; height:6px; border-radius:2px; flex-shrink:0; }
.self-media .sm-topic-bars b { font-size:10px; font-weight:400; white-space:nowrap; font-variant-numeric:tabular-nums; }
.self-media .sm-ranking { list-style:decimal; margin:14px 0 0; padding-left:24px; }
.self-media .sm-ranking li { padding:4px 0; color:var(--sm-muted); }
.self-media .sm-ranking button { display:flex; width:100%; justify-content:space-between; gap:18px; padding:9px 0; background:none; border:0; text-align:left; color:var(--sm-text); }
.self-media .sm-ranking button:hover span { color:var(--sm-accent); text-decoration:underline; }
.self-media .sm-ranking button span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.self-media .sm-ranking strong { white-space:nowrap; color:var(--sm-accent); font-variant-numeric:tabular-nums; }
.self-media .sm-section-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; margin:26px 0 15px; }
.self-media .sm-page > .sm-section-heading:first-child { margin-top:0; }
.self-media .sm-link-button { color:var(--sm-accent); padding:4px 0; border:0; background:none; text-align:left; }
.self-media .sm-link-button:hover { text-decoration:underline; }
.self-media .sm-table-scroll { overflow-x:auto; }
.self-media .sm-panel.sm-table-scroll { padding:0; }
.self-media .sm-table { width:100%; min-width:780px; border-collapse:collapse; text-align:left; font-size:13px; }
.self-media .sm-table th { color:#4c5c70; background:#f6f8fb; font-weight:600; padding:13px 16px; white-space:nowrap; }
.self-media .sm-table td { padding:14px 16px; border-top:1px solid #e9edf3; vertical-align:top; font-variant-numeric:tabular-nums; }
.self-media .sm-table td small { display:block; color:var(--sm-muted); margin-top:4px; font-size:11px; }
.self-media .sm-table tbody tr:hover { background:#f6f9fd; }
.self-media .sm-title-button { display:block; border:0; background:none; padding:0; max-width:420px; min-width:210px; color:var(--sm-text); text-align:left; line-height:1.6; overflow-wrap:anywhere; }
.self-media .sm-title-button:hover { color:var(--sm-accent); text-decoration:underline; }
.self-media .sm-tag { display:inline-block; padding:1px 6px; margin:0 4px 4px 0; border-radius:3px; background:#eef3f9; color:#425f80; font-size:12px; white-space:nowrap; }
.self-media .sm-filters { display:grid; grid-template-columns:minmax(200px,2fr) repeat(4,minmax(110px,1fr)); gap:14px; margin-bottom:18px; }
.self-media .sm-filters label, .self-media .sm-work-search { display:flex; flex-direction:column; gap:5px; color:#4e5c70; font-size:13px; }
.self-media .sm-library { padding:0; }
.self-media .sm-library-table { min-width:1000px; }
.self-media .sm-table-toolbar { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; padding:15px 18px; color:var(--sm-muted); font-size:12px; }
.self-media .sm-table-toolbar strong { color:var(--sm-text); }
.self-media .sm-numeric { white-space:nowrap; }
.self-media .sm-pagination { display:flex; align-items:center; flex-wrap:wrap; justify-content:flex-end; gap:7px; padding:16px; border-top:1px solid var(--sm-line); }
.self-media .sm-pagination span { color:var(--sm-muted); font-size:12px; margin:0 6px; }
.self-media .sm-insights { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-bottom:20px; }
.self-media .sm-insights p { color:var(--sm-muted); margin-top:10px; white-space:pre-wrap; overflow-wrap:anywhere; }
.self-media .sm-methods { margin-top:20px; }
.self-media .sm-definitions { margin:14px 0 0; }
.self-media .sm-definitions > div { padding:12px 0; border-bottom:1px solid #e9edf3; }
.self-media .sm-definitions dt { font-weight:600; color:#46566d; }
.self-media .sm-definitions dd { margin:5px 0 0; color:var(--sm-muted); overflow-wrap:anywhere; }
.self-media .sm-limitations { margin:15px 0 0; padding-left:20px; color:var(--sm-muted); }
.self-media .sm-limitations li { margin:10px 0; }
.self-media .sm-work-search { width:280px; max-width:100%; }
.self-media .sm-work-toolbar { display:flex; align-items:center; flex-wrap:wrap; justify-content:space-between; gap:16px; margin-bottom:20px; color:var(--sm-muted); font-size:13px; }
.self-media .sm-chips { display:flex; flex-wrap:wrap; gap:8px; }
.self-media .sm-work-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.self-media .sm-work-grid > .sm-empty { grid-column:1/-1; }
.self-media .sm-work-card h3 { margin-top:8px; }
.self-media .sm-work-card ol { margin:6px 0; padding-left:22px; }
.self-media .sm-work-card li { padding:4px 0; }
.self-media .sm-preserve { white-space:pre-wrap; overflow-wrap:anywhere; }
.self-media .sm-evidence { display:flex; flex-direction:column; gap:5px; border-top:1px solid var(--sm-line); padding-top:16px; margin-top:20px; font-size:13px; }
.self-media .sm-drawer .el-drawer__body { padding:24px; }
.self-media .sm-drawer-header { display:flex; align-items:center; justify-content:space-between; gap:20px; border-bottom:1px solid var(--sm-line); padding-bottom:16px; margin-bottom:22px; }
.self-media .sm-detail-title { font-size:19px; margin-bottom:15px; }
.self-media .sm-caption { color:#45536a; padding-bottom:16px; line-height:1.85; }
.self-media .sm-detail-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; border-top:1px solid var(--sm-line); border-bottom:1px solid var(--sm-line); padding:17px 0; margin:22px 0; }
.self-media .sm-detail-metrics span { color:var(--sm-muted); display:block; }
.self-media .sm-detail-metrics strong { display:block; font-size:23px; font-variant-numeric:tabular-nums; }
.self-media .sm-drawer h3:not(.sm-detail-title) { margin-top:24px; }
.self-media .sm-extra { margin-top:22px; }
.self-media .sm-extra summary { cursor:pointer; color:var(--sm-accent); }
@media (max-width:1250px) { .self-media .sm-metrics { grid-template-columns:repeat(3,minmax(0,1fr)); } .self-media .sm-metrics article:nth-child(3) { border-right:0; } .self-media .sm-metrics article:nth-child(-n+3) { border-bottom:1px solid var(--sm-line); } .self-media .sm-chart-grid { grid-template-columns:minmax(0,1fr); } .self-media .sm-filters { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:850px) { .self-media .sm-header { padding:18px; } .self-media .sm-actions { width:100%; } .self-media .sm-account { flex:1 1 100%; } .self-media .sm-account select { flex:1; max-width:320px; } .self-media .sm-insights, .self-media .sm-work-grid { grid-template-columns:minmax(0,1fr); } .self-media .sm-filters { grid-template-columns:repeat(2,minmax(0,1fr)); } .self-media .sm-panel { padding:16px; } .self-media .sm-library { padding:0; } .self-media .sm-topic-name { width:75px; } }
@media (max-width:520px) { .self-media .sm-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); } .self-media .sm-metrics article { border-right:0; border-bottom:1px solid var(--sm-line); padding:14px 10px; } .self-media .sm-metrics article:nth-child(odd) { border-right:1px solid var(--sm-line); } .self-media .sm-metrics article:nth-last-child(-n+2) { border-bottom:0; } .self-media .sm-metrics strong { font-size:22px; } .self-media .sm-tab { padding:8px; } .self-media .sm-filters { grid-template-columns:minmax(0,1fr); } .self-media .sm-pagination { justify-content:flex-start; } .self-media .sm-snapshot { flex-direction:column; } .self-media .sm-drawer .el-drawer__body { padding:16px; } }
@media (max-width:600px) {
  .self-media-host > .side { width:128px; max-width:128px; flex:0 0 128px; }
  .self-media-host > .side .brand { padding:0 12px; font-size:17px; }
  .self-media-host > .side .el-menu-item, .self-media-host > .side .el-sub-menu__title { padding-left:12px; padding-right:12px; font-size:13px; white-space:normal; line-height:1.5; min-height:48px; height:auto; }
  .self-media-host > .side .el-menu-item { min-width:0; width:100%; padding-left:12px !important; padding-right:12px !important; overflow-wrap:anywhere; }
  .self-media-host > .side .el-sub-menu__title { padding-right:26px; height:48px; }
  .self-media-host > .side .el-sub-menu__icon-arrow { right:8px; }
  .self-media-host > .el-container { min-width:0; }
  .self-media-host > .el-container > .topbar { padding:0 12px; }
  .self-media-host > .el-container > .content { padding:12px 10px; }
  .self-media-host .self-media .sm-header { padding:14px 12px; }
  .self-media-host .self-media .sm-account { flex-direction:column; align-items:stretch; min-width:0; width:100%; }
  .self-media-host .self-media .sm-account select { width:100%; max-width:100%; flex:auto; }
  .self-media-host .self-media .sm-actions { min-width:0; }
  .self-media-host .self-media .sm-snapshot { overflow-wrap:anywhere; }
}
@media (max-width:420px) {
  .self-media-host .self-media .sm-metrics { grid-template-columns:minmax(0,1fr); }
  .self-media-host .self-media .sm-metrics article { border-right:0; border-bottom:1px solid var(--sm-line); }
  .self-media-host .self-media .sm-metrics article:last-child { border-bottom:0; }
  .self-media-host .self-media .sm-panel { padding:14px 10px; }
  .self-media-host .self-media .sm-library, .self-media-host .self-media .sm-panel.sm-table-scroll { padding:0; }
  .self-media-host .self-media .sm-topic-row { flex-direction:column; align-items:stretch; gap:3px; }
  .self-media-host .self-media .sm-topic-name { width:auto; }
  .self-media-host .self-media .sm-topic-bars { width:100%; }
  .self-media-host .self-media .sm-legend { flex-wrap:wrap; gap:4px 12px; }
}