:root {
  --plugin-bg: #0d1014;
  --plugin-surface: #151922;
  --plugin-surface-strong: #1c222d;
  --plugin-border: rgba(235, 242, 248, 0.12);
  --plugin-text: #f1f5f7;
  --plugin-muted: #aab6c0;
  --plugin-subtle: #778590;
  --plugin-green: #00aeec;
  --plugin-green-dark: #0098d4;
  --plugin-blue: #29bff3;
  --plugin-coral: #fb7299;
  --plugin-max: 1080px;
  --plugin-title-size: 40px;
  --plugin-mobile-title-size: 30px;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  color: var(--plugin-text);
  background: var(--plugin-bg);
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--plugin-bg); }
body { margin: 0; min-height: 100vh; overflow-x: hidden; background: var(--plugin-bg); color: var(--plugin-text); font-size: 15px; line-height: 1.6; letter-spacing: 0; }
a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--plugin-green); outline-offset: 3px; }
.plugin-header { border-bottom: 1px solid var(--plugin-border); background: rgba(13, 16, 20, 0.96); }
.plugin-header-inner { width: min(var(--plugin-max), calc(100% - 40px)); min-height: 60px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.plugin-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--plugin-text); text-decoration: none; font-size: 15px; font-weight: 750; }
.plugin-mark { width: 32px; height: 32px; display: block; flex: 0 0 auto; overflow: hidden; border-radius: 8px; color: transparent; background: url("/plugin/tuneshelf-icon.svg") center / cover no-repeat; }
.plugin-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 3px; }
.plugin-nav a { padding: 7px 10px; border-radius: 6px; color: var(--plugin-muted); text-decoration: none; font-size: 13px; }
.plugin-nav a:hover, .plugin-nav a[aria-current="page"] { color: var(--plugin-text); background: var(--plugin-surface-strong); }

.plugin-main { width: min(var(--plugin-max), calc(100% - 40px)); margin: 0 auto; }
.plugin-hero { padding: 40px 0 36px; border-bottom: 1px solid var(--plugin-border); }
.plugin-hero-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr); gap: 44px; align-items: center; }
.plugin-hero-copy { min-width: 0; }
.plugin-kicker { color: var(--plugin-green); font-size: 12px; font-weight: 750; text-transform: uppercase; letter-spacing: 0.06em; }
h1, h2, h3 { margin: 0; line-height: 1.25; letter-spacing: 0; }
h1 { max-width: 650px; margin-top: 10px; font-size: var(--plugin-title-size); }
h2 { font-size: 28px; }
h3 { font-size: 17px; }
.plugin-lead { max-width: 650px; margin: 15px 0 0; color: var(--plugin-muted); font-size: 15px; }
.plugin-note { margin: 12px 0 0; color: var(--plugin-subtle); font-size: 12px; }
.plugin-download-panel { padding: 20px; border: 1px solid color-mix(in srgb, var(--plugin-green) 52%, var(--plugin-border)); border-radius: 8px; background: var(--plugin-surface); }
.plugin-download-panel h2 { font-size: 24px; }
.plugin-download-panel .plugin-actions { margin-top: 17px; }
.plugin-download-panel .plugin-button { flex: 1 1 130px; }
.plugin-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 14px 0 0; }
.plugin-meta div { min-width: 0; padding: 10px; border: 1px solid var(--plugin-border); border-radius: 6px; background: var(--plugin-surface-strong); }
.plugin-meta dt { color: var(--plugin-subtle); font-size: 11px; }
.plugin-meta dd { margin: 2px 0 0; overflow-wrap: anywhere; font-size: 13px; font-weight: 700; }
.plugin-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.plugin-button { display: inline-flex; min-height: 40px; align-items: center; justify-content: center; padding: 8px 14px; border: 1px solid var(--plugin-green); border-radius: 6px; background: var(--plugin-green); color: #07131a; font-size: 14px; font-weight: 750; text-decoration: none; cursor: pointer; }
.plugin-button:hover { border-color: var(--plugin-blue); background: var(--plugin-blue); }
.plugin-button.secondary { border-color: var(--plugin-border); background: var(--plugin-surface-strong); color: var(--plugin-text); }
.plugin-button.secondary:hover { border-color: var(--plugin-green); }
.plugin-button.is-pending { border-color: var(--plugin-border); background: #202630; color: var(--plugin-subtle); cursor: not-allowed; }

.plugin-section { padding: 40px 0; border-bottom: 1px solid var(--plugin-border); }
.plugin-section-heading { max-width: 680px; margin-bottom: 20px; }
.plugin-section-heading p, .plugin-page-header p { margin: 8px 0 0; color: var(--plugin-muted); }
.plugin-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.plugin-card { padding: 18px; border: 1px solid var(--plugin-border); border-radius: 8px; background: var(--plugin-surface); }
.plugin-card p { margin: 7px 0 0; color: var(--plugin-muted); }
.plugin-card strong { color: var(--plugin-text); }
.plugin-card.accent-green { border-top: 2px solid var(--plugin-green); }
.plugin-card.accent-blue { border-top: 2px solid var(--plugin-blue); }
.plugin-card.accent-coral { border-top: 2px solid var(--plugin-coral); }
.plugin-band { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 20px; align-items: start; }
.plugin-panel { padding: 20px; border: 1px solid var(--plugin-border); border-radius: 8px; background: var(--plugin-surface); }
.plugin-list { margin: 12px 0 0; padding-left: 19px; color: var(--plugin-muted); }
.plugin-list li + li { margin-top: 5px; }

.plugin-page { padding: 40px 0 60px; }
.plugin-page-header { max-width: 720px; margin-bottom: 22px; }
.plugin-page-header h1 { font-size: 32px; }
.plugin-release { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; padding: 20px; border: 1px solid var(--plugin-green); border-radius: 8px; background: var(--plugin-surface); }
.plugin-release h2 { font-size: 24px; }
.plugin-release p { margin: 6px 0 0; color: var(--plugin-muted); }
.plugin-release-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.plugin-table { width: 100%; margin-top: 12px; border-collapse: collapse; background: var(--plugin-surface); }
.plugin-table th, .plugin-table td { padding: 10px 12px; border: 1px solid var(--plugin-border); text-align: left; vertical-align: top; }
.plugin-table th { color: var(--plugin-muted); font-weight: 600; }
.plugin-table code, code { padding: 2px 5px; border-radius: 4px; background: #202630; color: #bfefff; font-family: "Cascadia Code", Consolas, monospace; font-size: 0.9em; overflow-wrap: anywhere; }
.plugin-callout { margin-top: 18px; padding: 15px 17px; border-left: 3px solid var(--plugin-coral); background: rgba(251, 114, 153, 0.08); color: var(--plugin-muted); }
.plugin-callout strong { color: var(--plugin-text); }
details { padding: 14px 0; border-bottom: 1px solid var(--plugin-border); }
summary { cursor: pointer; font-weight: 700; }
details p { margin: 7px 0 0; color: var(--plugin-muted); }
.plugin-form { max-width: 680px; padding: 20px; border: 1px solid var(--plugin-border); border-radius: 8px; background: var(--plugin-surface); }
.plugin-field { display: grid; gap: 6px; margin-bottom: 14px; }
.plugin-field label { font-size: 13px; font-weight: 700; }
.plugin-field input, .plugin-field textarea { width: 100%; padding: 9px 11px; border: 1px solid var(--plugin-border); border-radius: 5px; background: #10141a; color: var(--plugin-text); font: inherit; }
.plugin-field textarea { min-height: 130px; resize: vertical; }
.plugin-status { min-height: 22px; margin: 10px 0 0; color: var(--plugin-muted); }
.plugin-status[data-state="success"] { color: var(--plugin-green); }
.plugin-status[data-state="error"] { color: var(--plugin-coral); }
.plugin-footer { padding: 24px 0 36px; color: var(--plugin-subtle); font-size: 12px; }
.plugin-footer a { color: var(--plugin-muted); }

@media (max-width: 760px) {
  .plugin-header-inner, .plugin-main { width: min(100% - 28px, var(--plugin-max)); }
  .plugin-header-inner { min-height: auto; padding: 11px 0; align-items: flex-start; flex-direction: column; gap: 7px; }
  .plugin-nav { justify-content: flex-start; margin: 0 -7px; }
  .plugin-nav a { padding: 6px 8px; font-size: 12px; }
  .plugin-hero { padding: 28px 0 30px; }
  .plugin-hero-layout, .plugin-grid, .plugin-band, .plugin-meta { grid-template-columns: 1fr; }
  .plugin-hero-layout { gap: 22px; }
  h1 { font-size: var(--plugin-mobile-title-size); }
  h2 { font-size: 24px; }
  .plugin-lead { font-size: 14px; }
  .plugin-download-panel { padding: 16px; }
  .plugin-actions .plugin-button { flex: 1 1 100%; }
  .plugin-section { padding: 30px 0; }
  .plugin-page { padding: 30px 0 48px; }
  .plugin-page-header h1 { font-size: var(--plugin-mobile-title-size); }
  .plugin-release { grid-template-columns: 1fr; padding: 16px; }
  .plugin-release-actions { justify-content: flex-start; }
  .plugin-table { display: block; overflow-x: auto; white-space: nowrap; }
}