/* SoloSpace · 组件样式 */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: var(--font); font-size: var(--fs-md); color: var(--fg);
  background: var(--bg); -webkit-font-smoothing: antialiased;
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; }

.ss-app { min-height: 100%; display: flex; flex-direction: column; }

/* ── 顶栏（毛玻璃）───────────────────────────────────────────────── */
.ss-topbar {
  position: sticky; top: 0; z-index: 60;
  backdrop-filter: saturate(180%) blur(var(--glass-blur));
  -webkit-backdrop-filter: saturate(180%) blur(var(--glass-blur));
  background: var(--bg-elev); border-bottom: 1px solid var(--line);
}
.ss-topbar-in {
  max-width: var(--maxw); margin: 0 auto; padding: var(--sp-3) var(--sp-5);
  display: flex; align-items: center; gap: var(--sp-4);
}
.ss-logo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: var(--fs-lg); color: var(--fg); }
.ss-logo:hover { text-decoration: none; }
.ss-logo-mark {
  width: 30px; height: 30px; border-radius: 9px; background: var(--grad);
  display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 15px;
  box-shadow: var(--shadow-1);
}
.ss-nav { display: flex; gap: 2px; margin-left: var(--sp-4); }
.ss-nav a {
  padding: 7px 14px; border-radius: var(--r-pill); color: var(--fg-2);
  font-size: var(--fs-sm); font-weight: 500; transition: all var(--dur) var(--ease-out);
}
.ss-nav a:hover { background: var(--bg-sunken); text-decoration: none; }
.ss-nav a.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.ss-spacer { flex: 1; }
.ss-search {
  flex: 0 1 320px; display: flex; align-items: center; gap: 8px;
  background: var(--bg-sunken); border: 1px solid transparent; border-radius: var(--r-pill);
  padding: 7px 14px; transition: all var(--dur) var(--ease-out);
}
.ss-search:focus-within { border-color: var(--accent); background: var(--bg-elev-solid); }
.ss-search input { border: 0; background: none; outline: none; width: 100%; font-size: var(--fs-sm); }

/* ── 按钮 ────────────────────────────────────────────────────────── */
.ss-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 18px; border-radius: var(--r-pill); border: 1px solid var(--line);
  background: var(--bg-elev-solid); color: var(--fg); font-size: var(--fs-sm);
  font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: transform var(--dur) var(--ease-spring), box-shadow var(--dur), background var(--dur), opacity var(--dur);
}
.ss-btn:hover { box-shadow: var(--shadow-1); transform: translateY(-1px); }
.ss-btn:active { transform: translateY(0) scale(.97); }
.ss-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.ss-btn-primary { background: var(--grad); color: #fff; border: 0; box-shadow: 0 4px 16px rgba(61, 109, 255, .3); }
.ss-btn-ghost { background: transparent; border-color: var(--line-strong); }
.ss-btn-soft { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.ss-btn-danger { background: var(--danger); color: #fff; border: 0; }
.ss-btn-sm { padding: 6px 13px; font-size: var(--fs-xs); }
.ss-btn-lg { padding: 13px 26px; font-size: var(--fs-md); border-radius: var(--r-pill); }
.ss-btn-icon { padding: 8px; width: 34px; height: 34px; border-radius: 50%; }

/* ── 卡片 ────────────────────────────────────────────────────────── */
.ss-card {
  background: var(--bg-elev-solid); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: var(--shadow-1);
  transition: transform var(--dur) var(--ease-spring), box-shadow var(--dur);
}
.ss-card-hover:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.ss-view { max-width: var(--maxw); margin: 0 auto; padding: var(--sp-6) var(--sp-5) var(--sp-9); flex: 1; width: 100%; }

/* ── 首页 Hero ───────────────────────────────────────────────────── */
.ss-hero {
  position: relative; overflow: hidden; border-radius: var(--r-xl);
  padding: var(--sp-9) var(--sp-7); margin-bottom: var(--sp-7);
  background: var(--grad); color: #fff; box-shadow: var(--shadow-2);
}
.ss-hero::after {
  content: ''; position: absolute; inset: -40% -10% auto auto; width: 460px; height: 460px;
  background: radial-gradient(circle, rgba(255, 255, 255, .28), transparent 62%);
}
.ss-hero h1 { font-size: var(--fs-4xl); line-height: 1.15; margin: 0 0 var(--sp-4); font-weight: 800; letter-spacing: -.02em; }
.ss-hero p { font-size: var(--fs-lg); opacity: .92; margin: 0 0 var(--sp-6); max-width: 640px; }
.ss-hero .ss-btn { background: #fff; color: #1b1f2a; }
.ss-hero .ss-btn.ss-ghost { background: rgba(255, 255, 255, .16); color: #fff; border: 1px solid rgba(255, 255, 255, .4); }

.ss-grid { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.ss-grid-2 { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); }
.ss-section-title { font-size: var(--fs-xl); font-weight: 700; margin: var(--sp-8) 0 var(--sp-4); letter-spacing: -.01em; }

/* ── 仓库卡 ──────────────────────────────────────────────────────── */
.ss-repo { display: flex; flex-direction: column; gap: var(--sp-3); }
.ss-repo h3 { margin: 0; font-size: var(--fs-lg); }
.ss-repo h3 a { color: var(--fg); }
.ss-repo p { margin: 0; color: var(--fg-2); font-size: var(--fs-sm); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ss-meta { display: flex; gap: var(--sp-4); color: var(--fg-3); font-size: var(--fs-xs); flex-wrap: wrap; align-items: center; }
.ss-lang { display: inline-flex; align-items: center; gap: 6px; }
.ss-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.ss-tag { padding: 3px 10px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent); font-size: var(--fs-xs); font-weight: 600; }
.ss-tag-gray { padding: 3px 10px; border-radius: var(--r-pill); background: var(--bg-sunken); color: var(--fg-2); font-size: var(--fs-xs); }

/* ── 表单 ────────────────────────────────────────────────────────── */
.ss-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--sp-4); }
.ss-field label { font-size: var(--fs-sm); font-weight: 600; color: var(--fg-2); }
.ss-input, .ss-textarea, select.ss-input {
  padding: 12px 16px; border-radius: var(--r-md); border: 1.5px solid var(--line);
  background: var(--bg-sunken); outline: none; font-size: var(--fs-md);
  transition: border-color var(--dur), background var(--dur), box-shadow var(--dur);
}
.ss-input:focus, .ss-textarea:focus { border-color: var(--accent); background: var(--bg-elev-solid); box-shadow: 0 0 0 4px var(--accent-soft); }
.ss-textarea { min-height: 110px; resize: vertical; font-family: inherit; }
.ss-hint { font-size: var(--fs-xs); color: var(--fg-3); }
.ss-err { font-size: var(--fs-sm); color: var(--danger); }

/* ── 分段控件 ────────────────────────────────────────────────────── */
.ss-seg { display: inline-flex; background: var(--bg-sunken); border-radius: var(--r-pill); padding: 3px; gap: 2px; }
.ss-seg button {
  border: 0; background: none; padding: 7px 16px; border-radius: var(--r-pill);
  font-size: var(--fs-sm); font-weight: 600; color: var(--fg-2); cursor: pointer;
  transition: all var(--dur) var(--ease-out);
}
.ss-seg button.on { background: var(--bg-elev-solid); color: var(--fg); box-shadow: var(--shadow-1); }

/* ── 标签页 ──────────────────────────────────────────────────────── */
.ss-tabs { display: flex; gap: var(--sp-5); border-bottom: 1px solid var(--line); margin-bottom: var(--sp-5); }
.ss-tabs button {
  border: 0; background: none; padding: var(--sp-3) 2px; font-size: var(--fs-md); font-weight: 600;
  color: var(--fg-3); cursor: pointer; position: relative; transition: color var(--dur);
}
.ss-tabs button.on { color: var(--fg); }
.ss-tabs button.on::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px;
  border-radius: 3px; background: var(--grad);
}

/* ── 代码视图 ────────────────────────────────────────────────────── */
.ss-code-wrap { display: grid; grid-template-columns: 1fr 340px; gap: var(--sp-5); align-items: start; }
@media (max-width: 1000px) { .ss-code-wrap { grid-template-columns: 1fr; } }
.ss-code {
  background: var(--bg-code); border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; box-shadow: var(--shadow-1);
}
.ss-code-head {
  display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line); background: var(--bg-elev); flex-wrap: wrap;
}
.ss-code-body { overflow: auto; max-height: 74vh; }
table.ss-code-table { border-collapse: collapse; width: 100%; font-family: var(--mono); font-size: 13px; line-height: 1.65; }
table.ss-code-table td { vertical-align: top; padding: 0; }
td.ss-ln {
  width: 1px; text-align: right; padding: 0 14px 0 12px; color: var(--fg-3);
  user-select: none; background: var(--bg-sunken); position: sticky; left: 0; font-size: 12px;
}
td.ss-src { padding: 0 16px 0 12px; white-space: pre; }
tr.ss-hl td { background: var(--accent-soft); }
.tk-key { color: var(--tk-key); } .tk-str { color: var(--tk-str); } .tk-num { color: var(--tk-num); }
.tk-com { color: var(--tk-com); font-style: italic; } .tk-fn { color: var(--tk-fn); }
.tk-type { color: var(--tk-type); } .tk-punc { color: var(--tk-punc); }
.tk-tag { color: var(--tk-tag); } .tk-attr { color: var(--tk-attr); } .tk-regex { color: var(--tk-regex); }

/* ── 分析面板 ────────────────────────────────────────────────────── */
.ss-panel { position: sticky; top: 76px; display: flex; flex-direction: column; gap: var(--sp-4); }
.ss-stat { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px dashed var(--line); font-size: var(--fs-sm); }
.ss-stat:last-child { border: 0; }
.ss-stat b { font-variant-numeric: tabular-nums; }
.ss-outline { max-height: 320px; overflow: auto; font-size: var(--fs-sm); }
.ss-outline-item { display: flex; gap: 8px; padding: 5px 8px; border-radius: var(--r-xs); cursor: pointer; align-items: baseline; }
.ss-outline-item:hover { background: var(--bg-sunken); }
.ss-outline-item .k { font-family: var(--mono); font-size: 11px; color: var(--fg-3); min-width: 62px; }
.ss-outline-item .n { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-outline-item .l { margin-left: auto; color: var(--fg-3); font-size: 11px; }
.ss-bar { height: 6px; border-radius: 99px; background: var(--bg-sunken); overflow: hidden; }
.ss-bar > i { display: block; height: 100%; background: var(--grad); border-radius: 99px; }
.ss-warn { padding: 10px 12px; border-radius: var(--r-sm); background: rgba(251, 191, 36, .12); color: var(--warn); font-size: var(--fs-xs); line-height: 1.6; }

/* ── 文件树 ──────────────────────────────────────────────────────── */
.ss-tree { font-size: var(--fs-sm); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.ss-tree-row { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-bottom: 1px solid var(--line); }
.ss-tree-row:last-child { border: 0; }
.ss-tree-row:hover { background: var(--bg-sunken); }
.ss-tree-row .size { margin-left: auto; color: var(--fg-3); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }

/* ── 上传 ────────────────────────────────────────────────────────── */
.ss-drop {
  border: 2px dashed var(--line-strong); border-radius: var(--r-lg); padding: var(--sp-8);
  text-align: center; background: var(--bg-elev-solid); cursor: pointer;
  transition: all var(--dur) var(--ease-out);
}
.ss-drop:hover, .ss-drop.over { border-color: var(--accent); background: var(--accent-soft); }
.ss-up-item { display: grid; grid-template-columns: 1fr 110px auto; gap: var(--sp-3); align-items: center; padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); }
.ss-up-item .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-sm); font-weight: 600; }
.ss-up-item .sub { font-size: var(--fs-xs); color: var(--fg-3); font-variant-numeric: tabular-nums; }

/* ── Toast / Sheet ───────────────────────────────────────────────── */
.ss-toast-wrap { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.ss-toast {
  background: var(--bg-elev-solid); color: var(--fg); border: 1px solid var(--line);
  padding: 11px 20px; border-radius: var(--r-pill); box-shadow: var(--shadow-2);
  font-size: var(--fs-sm); font-weight: 600; animation: ssIn var(--dur) var(--ease-spring);
  max-width: 86vw;
}
.ss-toast.err { border-color: var(--danger); color: var(--danger); }
.ss-toast.ok { border-color: var(--ok); }
@keyframes ssIn { from { opacity: 0; transform: translateY(14px) scale(.94); } to { opacity: 1; transform: none; } }
/* 注意：这里的 display:grid 会覆盖 HTML hidden 属性的 display:none（作者样式优先级更高），
   导致空遮罩层常驻全屏、整页被压暗 50% 并加模糊。必须显式声明 [hidden] 时不显示。 */
.ss-sheet-wrap { position: fixed; inset: 0; z-index: 300; background: rgba(8, 10, 16, .5); backdrop-filter: blur(6px); display: grid; place-items: center; padding: var(--sp-5); }
.ss-sheet-wrap[hidden] { display: none; }
.ss-sheet {
  background: var(--bg-elev-solid); border-radius: var(--r-xl); padding: var(--sp-6);
  width: min(560px, 100%); max-height: 84vh; overflow: auto; box-shadow: var(--shadow-2);
  animation: ssIn var(--dur) var(--ease-spring);
}

/* ── Markdown ────────────────────────────────────────────────────── */
.ss-md { line-height: 1.75; font-size: var(--fs-md); }
.ss-md h1, .ss-md h2, .ss-md h3 { margin: 1.4em 0 .6em; line-height: 1.3; }
.ss-md h1 { font-size: var(--fs-2xl); } .ss-md h2 { font-size: var(--fs-xl); } .ss-md h3 { font-size: var(--fs-lg); }
.ss-md p, .ss-md ul, .ss-md ol { margin: 0 0 1em; }
.ss-md code { font-family: var(--mono); background: var(--bg-sunken); padding: 2px 6px; border-radius: 6px; font-size: .9em; }
.ss-md pre { background: var(--bg-code); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-4); overflow: auto; }
.ss-md pre code { background: none; padding: 0; }
.ss-md blockquote { margin: 0 0 1em; padding: 8px 16px; border-left: 3px solid var(--accent); color: var(--fg-2); background: var(--accent-soft); border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.ss-md table { border-collapse: collapse; width: 100%; margin-bottom: 1em; font-size: var(--fs-sm); }
.ss-md th, .ss-md td { border: 1px solid var(--line); padding: 8px 12px; text-align: left; }
.ss-md th { background: var(--bg-sunken); }
.ss-md img { max-width: 100%; border-radius: var(--r-sm); }

/* ── 杂项 ────────────────────────────────────────────────────────── */
.ss-empty { text-align: center; padding: var(--sp-9) var(--sp-5); color: var(--fg-3); }
.ss-empty .big { font-size: var(--fs-2xl); margin-bottom: var(--sp-3); }
.ss-skeleton { background: linear-gradient(90deg, var(--bg-sunken) 25%, var(--bg-elev-solid) 37%, var(--bg-sunken) 63%); background-size: 400% 100%; animation: ssShine 1.3s ease infinite; border-radius: var(--r-md); height: 16px; }
@keyframes ssShine { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.ss-footer { border-top: 1px solid var(--line); padding: var(--sp-6) var(--sp-5); color: var(--fg-3); font-size: var(--fs-xs); }
.ss-footer-in { max-width: var(--maxw); margin: 0 auto; display: flex; gap: var(--sp-5); flex-wrap: wrap; align-items: center; }
.ss-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 600; background: var(--bg-sunken); color: var(--fg-2); }
.ss-row { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; }
.ss-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--grad); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 14px; flex: none; }
.ss-avatar.lg { width: 76px; height: 76px; font-size: 28px; border-radius: 26px; }
@media (max-width: 720px) {
  .ss-hero { padding: var(--sp-7) var(--sp-5); } .ss-hero h1 { font-size: var(--fs-3xl); }
  .ss-nav { display: none; } .ss-search { flex: 1 1 auto; }
  .ss-view { padding: var(--sp-5) var(--sp-4) var(--sp-8); }
}

/* ── hidden 属性兜底 ──────────────────────────────────────────────
   HTML 的 hidden 靠 UA 样式表 display:none 生效，但任何作者样式里的
   display 值（如 .ss-field{flex} / .ss-sheet-wrap{grid}）都会盖掉它。
   末尾统一兜底，避免"元素其实一直可见"这类隐蔽问题。 */
[hidden] { display: none !important; }