:root {
  --bg: var(--background);
  --panel: var(--card);
  --ink: var(--foreground);
  --muted: var(--muted-foreground);
  --soft: var(--border);
  --soft-2: var(--muted);
  --brand: var(--primary);
  --brand-2: var(--primary-hover);
  --green: var(--success);
  --red: var(--destructive);
  --shadow: var(--shadow-card);
  font-family: var(--font-sans);
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--foreground); background: var(--background); font-family: var(--font-sans); font-weight: var(--font-weight-normal); }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.container { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.site-header { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid var(--soft); box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.nav-wrap { height: 58px; display: flex; align-items: center; gap: 18px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: -.3px; }
.brand-mark { width: 38px; height: 38px; border-radius: 14px; background: transparent; color: #fff; display: inline-flex; align-items: center; justify-content: center; overflow: visible; box-shadow: none; }
.brand-mark img { width: 100%; height: 100%; display: block; object-fit: contain; }
.brand-copy { min-width: 0; display: grid; gap: 1px; line-height: 1.05; }
.brand-copy b { color: #0f172a; font-size: 16px; font-weight: 900; letter-spacing: 0; white-space: nowrap; }
.brand-copy small { color: #64748b; font-size: 11px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.main-nav { display: flex; gap: 4px; flex: 1; }
.main-nav a { padding: 8px 11px; border-radius: 8px; color: #475569; font-size: 14px; }
.main-nav a:hover, .main-nav a.active { background: #eef2ff; color: #3730a3; }
.nav-search { min-width: 220px; display: flex; align-items: center; gap: 7px; background: #f8fafc; border: 1px solid var(--soft); border-radius: 10px; padding: 7px 10px; color: #94a3b8; }
.nav-search input { width: 100%; border: 0; outline: 0; background: transparent; font-size: 14px; }
.nav-actions { display: flex; gap: 8px; align-items: center; }
.primary-btn, .ghost-btn, .ghost-dark { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 16px; border-radius: 11px; font-size: 14px; font-weight: 700; border: 0; }
.primary-btn { background: var(--brand); color: #fff; }
.primary-btn:hover { background: var(--brand-2); }
.primary-btn.small { min-height: 33px; padding: 0 12px; }
.ghost-btn { color: #475569; background: transparent; }
.ghost-btn.bordered { border: 1px solid var(--soft); background: #fff; }
.ghost-dark { color: #fff; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.1); }
.menu-btn { display: none; border: 0; background: transparent; font-size: 22px; }
.flash-stack { position: fixed; top: 70px; right: 20px; z-index: 100; display: grid; gap: 10px; }
.flash { background: #fff; border: 1px solid var(--soft); border-left: 4px solid var(--brand); border-radius: 10px; padding: 12px 14px; box-shadow: var(--shadow); transition: .25s; }
.flash.error { border-left-color: var(--red); }
.flash.success { border-left-color: var(--green); }
.site-footer {
  background: #0f172a;
  color: #cbd5e1;
}
.site-footer .container {
  max-width: 1280px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr repeat(3, minmax(0, 1fr));
  gap: 32px;
  padding-top: 48px;
  padding-bottom: 40px;
}
.footer-brand-block {
  max-width: 360px;
}
.footer-brand {
  color: #fff;
  font-size: 16px;
}
.footer-brand .brand-mark {
  width: 42px;
  height: 42px;
  border-radius: 15px;
  background: transparent;
}
.footer-brand .brand-copy b {
  color: #fff;
}
.footer-brand .brand-copy small {
  color: #94a3b8;
}
.footer-brand-block p {
  max-width: 340px;
  margin: 16px 0;
  color: #94a3b8;
  font-size: 14px;
  line-height: 1.7;
}
.footer-grid h4 {
  margin: 0 0 12px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}
.footer-grid > div:not(.footer-brand-block) {
  display: grid;
  align-content: start;
  gap: 10px;
}
.footer-grid a:not(.brand) {
  color: #94a3b8;
  font-size: 14px;
  transition: color .18s ease, background .18s ease;
}
.footer-grid a:not(.brand):hover {
  color: #fff;
}
.footer-social {
  display: flex;
  align-items: center;
  gap: 8px;
}
.footer-social a {
  width: 32px;
  height: 32px;
  display: inline-flex;
  position: relative;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #1e293b;
  color: #94a3b8;
}
.footer-social a:hover {
  background: #334155;
  color: #fff;
}
.footer-social a:before,
.footer-social a:after {
  content: "";
  position: absolute;
  box-sizing: border-box;
}
.footer-social .github:before {
  width: 15px;
  height: 15px;
  border: 2px solid currentColor;
  border-radius: 999px 999px 8px 8px;
}
.footer-social .github:after {
  width: 9px;
  height: 5px;
  bottom: 7px;
  border-left: 2px solid currentColor;
  border-right: 2px solid currentColor;
}
.footer-social .twitter:before {
  width: 15px;
  height: 12px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  border-radius: 2px 8px 2px 8px;
  transform: rotate(-12deg);
}
.footer-social .twitter:after {
  width: 7px;
  height: 7px;
  right: 8px;
  top: 8px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(22deg);
}
.footer-category-nav {
  padding-top: 24px;
  padding-bottom: 24px;
  border-top: 1px solid #1e293b;
}
.footer-category-nav p {
  margin: 0 0 12px;
  color: #64748b;
  font-size: 12px;
}
.footer-category-nav div {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
}
.footer-category-nav a {
  color: #64748b;
  font-size: 12px;
}
.footer-category-nav a:hover {
  color: #818cf8;
}
.footer-disclaimer {
  display: grid;
  gap: 8px;
  padding-top: 20px;
  padding-bottom: 20px;
  border-top: 1px solid #1e293b;
  color: #64748b;
  font-size: 12px;
  line-height: 1.7;
}
.footer-disclaimer p {
  margin: 0;
}
.footer-disclaimer strong {
  color: #94a3b8;
  font-weight: 700;
}
.footer-disclaimer a {
  color: #818cf8;
  font-weight: 700;
}
.footer-disclaimer a:hover {
  color: #a5b4fc;
}
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 24px;
  padding-bottom: 32px;
  border-top: 1px solid #1e293b;
  color: #64748b;
  font-size: 12px;
}
.footer-bottom span:last-child {
  color: #475569;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.hero, .page-hero { background: #fff; border-bottom: 1px solid var(--soft); }
.hero-inner { min-height: 420px; display: flex; align-items: center; }
.hero-copy { max-width: 680px; padding: 64px 0; }
.eyebrow, .breadcrumb { display: inline-flex; border: 1px solid #e0e7ff; color: #4338ca; background: #eef2ff; border-radius: 999px; padding: 6px 12px; font-size: 12px; font-weight: 700; margin-bottom: 18px; }
.eyebrow.emerald { border-color: #d1fae5; color: #047857; background: #ecfdf5; }
h1, h2, h3, p { margin-top: 0; }
.hero h1, .page-hero h1 { font-size: clamp(36px, 5vw, 58px); line-height: 1.04; letter-spacing: -.8px; margin: 0 0 16px; }
.hero h1 span, .page-hero h1 span { color: var(--brand); }
.hero p, .page-hero p { color: var(--muted); font-size: 18px; line-height: 1.7; max-width: 680px; }
.page-hero { padding: 64px 0; }
.page-hero.compact { padding: 44px 0; }
.page-hero.center { text-align: center; }
.page-hero.center p { margin-left: auto; margin-right: auto; }
.hero-search, .filter-bar { display: flex; gap: 10px; margin: 24px 0 14px; }
.hero-search input, .filter-bar input, .filter-bar select, .form-panel input, .form-panel textarea, .form-panel select, .plan-card input, .plan-card textarea, .inline-form input, .inline-form select, .admin-form-grid input, .admin-form-grid textarea, .admin-form-grid select { border: 1px solid var(--soft); border-radius: 11px; padding: 11px 12px; outline: 0; background: #fff; color: #334155; }
.hero-search input { flex: 1; border-width: 2px; }
.hero-search button, .filter-bar button, .plan-card button, .inline-form button, table button, .admin-form-grid button { border: 0; background: var(--brand); color: #fff; border-radius: 11px; padding: 10px 16px; font-weight: 700; }
.hot-searches { display: flex; gap: 10px; flex-wrap: wrap; color: var(--muted); font-size: 14px; }
.hot-searches a { color: var(--brand); }
.stats-band { background: #fff; border-bottom: 1px solid var(--soft); }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.stats-grid div { padding: 18px 24px; border-left: 1px solid var(--soft); }
.stats-grid div:first-child { border-left: 0; }
.stats-grid strong { display: block; font-size: 22px; font-family: ui-monospace, monospace; }
.stats-grid span { color: var(--muted); font-size: 13px; }
.section { padding: 56px 0; background: #fff; }
.section.muted { background: var(--bg); }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 24px; }
.section-head h2, .center-head h2 { font-size: 26px; margin-bottom: 4px; }
.section-head p, .center-head p { color: var(--muted); }
.center-head { text-align: center; margin-bottom: 30px; }
.skill-grid { display: grid; gap: 16px; }
.skill-grid.four { grid-template-columns: repeat(4, 1fr); }
.skill-grid.three { grid-template-columns: repeat(3, 1fr); }
.skill-grid.two { grid-template-columns: repeat(2, 1fr); }
.skill-grid.one { grid-template-columns: 1fr; }
.skill-card { position: relative; display: flex; flex-direction: column; gap: 12px; min-height: 260px; background: #fff; border: 1px solid var(--soft); border-radius: var(--radius); padding: 18px; transition: .2s; }
.skill-card:hover { border-color: #c7d2fe; box-shadow: var(--shadow); transform: translateY(-2px); }
.skill-card-list { min-height: 0; flex-direction: row; align-items: flex-start; }
.skill-avatar {
  --avatar-bg: #eef2ff;
  --avatar-border: #dbe4ff;
  --avatar-fg: #4f46e5;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border-radius: 12px;
  background:
    radial-gradient(circle at 28% 22%, rgba(255,255,255,.92), rgba(255,255,255,0) 34%),
    linear-gradient(145deg, var(--avatar-bg), #fff);
  color: var(--avatar-fg);
  border: 1px solid var(--avatar-border);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 8px 18px rgba(15,23,42,.06);
  position: relative;
  overflow: hidden;
}
.skill-avatar:after {
  content: "";
  position: absolute;
  inset: auto -8px -12px auto;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: currentColor;
  opacity: .08;
}
.skill-avatar.large { width: 76px; height: 76px; border-radius: 20px; }
.skill-glyph {
  position: relative;
  width: 22px;
  height: 22px;
  display: block;
  z-index: 1;
}
.large .skill-glyph {
  width: 34px;
  height: 34px;
}
.skill-glyph:before,
.skill-glyph:after {
  content: "";
  position: absolute;
  box-sizing: border-box;
}
.skill-avatar-code { --avatar-bg: #eef2ff; --avatar-border: #c7d2fe; --avatar-fg: #4f46e5; }
.skill-avatar-code .skill-glyph:before {
  inset: 5px 1px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: skewX(-18deg) rotate(45deg);
}
.skill-avatar-code .skill-glyph:after {
  inset: 5px 1px;
  border-right: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transform: skewX(-18deg) rotate(45deg);
}
.skill-avatar-write { --avatar-bg: #faf5ff; --avatar-border: #e9d5ff; --avatar-fg: #7e22ce; }
.skill-avatar-write .skill-glyph:before {
  width: 5px;
  height: 21px;
  left: 9px;
  top: 0;
  border-radius: 999px;
  background: currentColor;
  transform: rotate(42deg);
}
.skill-avatar-write .skill-glyph:after {
  width: 10px;
  height: 4px;
  right: 1px;
  bottom: 2px;
  border-radius: 999px;
  background: currentColor;
  transform: rotate(42deg);
}
.skill-avatar-data { --avatar-bg: #ecfeff; --avatar-border: #bae6fd; --avatar-fg: #0891b2; }
.skill-avatar-data .skill-glyph:before {
  left: 3px;
  bottom: 3px;
  width: 4px;
  height: 8px;
  border-radius: 2px;
  background: currentColor;
  box-shadow: 7px -5px 0 currentColor, 14px -10px 0 currentColor;
}
.skill-avatar-data .skill-glyph:after {
  left: 2px;
  right: 1px;
  bottom: 2px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  opacity: .55;
}
.skill-avatar-image { --avatar-bg: #fdf2f8; --avatar-border: #fbcfe8; --avatar-fg: #db2777; }
.skill-avatar-image .skill-glyph:before {
  inset: 3px;
  border: 2px solid currentColor;
  border-radius: 5px;
}
.skill-avatar-image .skill-glyph:after {
  left: 7px;
  bottom: 6px;
  width: 11px;
  height: 8px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  border-radius: 1px;
}
.skill-avatar-browser { --avatar-bg: #fff7ed; --avatar-border: #fed7aa; --avatar-fg: #ea580c; }
.skill-avatar-browser .skill-glyph:before {
  inset: 2px;
  border: 2px solid currentColor;
  border-radius: 999px;
}
.skill-avatar-browser .skill-glyph:after {
  left: 4px;
  right: 4px;
  top: 10px;
  height: 2px;
  background: currentColor;
  box-shadow: 0 -5px 0 -1px currentColor, 0 5px 0 -1px currentColor;
}
.skill-avatar-doc { --avatar-bg: #f0fdfa; --avatar-border: #99f6e4; --avatar-fg: #0f766e; }
.skill-avatar-doc .skill-glyph:before {
  inset: 2px 4px 1px 4px;
  border: 2px solid currentColor;
  border-radius: 4px;
}
.skill-avatar-doc .skill-glyph:after {
  left: 8px;
  right: 7px;
  top: 8px;
  height: 2px;
  background: currentColor;
  box-shadow: 0 5px 0 currentColor, 0 10px 0 currentColor;
}
.skill-avatar-sheet { --avatar-bg: #f7fee7; --avatar-border: #d9f99d; --avatar-fg: #65a30d; }
.skill-avatar-sheet .skill-glyph:before {
  inset: 3px;
  border: 2px solid currentColor;
  border-radius: 4px;
}
.skill-avatar-sheet .skill-glyph:after {
  inset: 8px 4px 4px 4px;
  background:
    linear-gradient(currentColor 0 0) 0 0 / 100% 2px no-repeat,
    linear-gradient(currentColor 0 0) 0 6px / 100% 2px no-repeat,
    linear-gradient(currentColor 0 0) 50% 0 / 2px 100% no-repeat;
}
.skill-avatar-deck { --avatar-bg: #fff1f2; --avatar-border: #fecdd3; --avatar-fg: #e11d48; }
.skill-avatar-deck .skill-glyph:before {
  inset: 4px 2px 6px;
  border: 2px solid currentColor;
  border-radius: 4px;
}
.skill-avatar-deck .skill-glyph:after {
  left: 6px;
  right: 6px;
  bottom: 2px;
  height: 2px;
  background: currentColor;
  box-shadow: 4px 3px 0 currentColor;
}
.skill-avatar-search { --avatar-bg: #fffbeb; --avatar-border: #fde68a; --avatar-fg: #d97706; }
.skill-avatar-search .skill-glyph:before {
  width: 13px;
  height: 13px;
  left: 2px;
  top: 2px;
  border: 2px solid currentColor;
  border-radius: 999px;
}
.skill-avatar-search .skill-glyph:after {
  width: 9px;
  height: 2px;
  right: 1px;
  bottom: 4px;
  background: currentColor;
  border-radius: 999px;
  transform: rotate(45deg);
}
.skill-avatar-agent { --avatar-bg: #eef2ff; --avatar-border: #c7d2fe; --avatar-fg: #4338ca; }
.skill-avatar-agent .skill-glyph:before {
  width: 6px;
  height: 6px;
  left: 2px;
  top: 3px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 12px 4px 0 currentColor, 6px 13px 0 currentColor;
}
.skill-avatar-agent .skill-glyph:after {
  left: 6px;
  top: 8px;
  width: 12px;
  height: 9px;
  border-left: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transform: skewY(-24deg);
  opacity: .75;
}
.skill-avatar-dev { --avatar-bg: #f5f3ff; --avatar-border: #ddd6fe; --avatar-fg: #6d28d9; }
.skill-avatar-dev .skill-glyph:before {
  left: 8px;
  top: 1px;
  width: 8px;
  height: 20px;
  background: currentColor;
  clip-path: polygon(50% 0, 100% 0, 65% 42%, 100% 42%, 35% 100%, 48% 55%, 0 55%);
}
.skill-avatar-business { --avatar-bg: #f8fafc; --avatar-border: #cbd5e1; --avatar-fg: #475569; }
.skill-avatar-business .skill-glyph:before {
  left: 3px;
  right: 3px;
  top: 8px;
  bottom: 3px;
  border: 2px solid currentColor;
  border-radius: 4px;
}
.skill-avatar-business .skill-glyph:after {
  left: 8px;
  top: 4px;
  width: 7px;
  height: 5px;
  border: 2px solid currentColor;
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
}
.skill-avatar-default { --avatar-bg: #f8fafc; --avatar-border: #e2e8f0; --avatar-fg: #64748b; }
.skill-avatar-default .skill-glyph:before {
  inset: 4px;
  border: 2px solid currentColor;
  border-radius: 7px;
}
.skill-avatar-default .skill-glyph:after {
  inset: 9px;
  background: currentColor;
  border-radius: 999px;
}
.skill-body { min-width: 0; flex: 1; }
.skill-title-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.skill-title { font-weight: 800; }
.skill-card p { color: var(--muted); font-size: 14px; line-height: 1.55; }
.pill, .tag, .status { display: inline-flex; align-items: center; border-radius: 999px; padding: 4px 8px; font-size: 12px; background: var(--soft-2); color: #475569; }
.pill.category { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.tag.热门 { background: #ffedd5; color: #c2410c; }
.tag.推荐 { background: #e0e7ff; color: #4338ca; }
.tag.新收录 { background: #d1fae5; color: #047857; }
.tag.可协助安装 { background: #e0f2fe; color: #0369a1; }
.meta-row { display: flex; gap: 12px; flex-wrap: wrap; color: #94a3b8; font-size: 12px; font-family: ui-monospace, monospace; }
.card-link { margin-top: auto; color: var(--brand); font-size: 13px; font-weight: 700; }
.two-col, .partner-layout, .detail-layout, .profile-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; }
.side-stack { display: grid; gap: 16px; align-content: start; }
.panel, .mini-card { background: #fff; border: 1px solid var(--soft); border-radius: var(--radius); padding: 20px; }
.panel h3 { margin-bottom: 14px; }
.rank-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--soft-2); color: #334155; }
.rank-row:last-child { border-bottom: 0; }
.rank-row b { width: 24px; color: #94a3b8; }
.rank-row span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-row em { color: #94a3b8; font-style: normal; font-size: 12px; }
.cta-panel { background: linear-gradient(145deg, #4f46e5, #4338ca); color: #fff; border-radius: var(--radius); padding: 22px; }
.cta-panel p { color: #c7d2fe; }
.cta-panel a { display: block; text-align: center; background: #fff; color: #3730a3; border-radius: 10px; padding: 10px; font-weight: 800; }
.cta-panel.light { background: #eef2ff; color: #312e81; border: 1px solid #c7d2fe; }
.cta-panel.light p { color: #4f46e5; }
.feature-grid, .benefit-grid, .process-grid, .metric-grid, .plan-grid, .admin-grid { display: grid; gap: 16px; }
.feature-grid { grid-template-columns: repeat(3, 1fr); }
.feature-grid div, .process-grid div, .metric-grid div, .metric-grid a { background: #fff; border: 1px solid var(--soft); border-radius: var(--radius); padding: 22px; }
.feature-grid span { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; background: #eef2ff; color: var(--brand); border-radius: 10px; margin-bottom: 12px; }
.dark-cta { padding: 52px 0; background: var(--bg); }
.dark-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; background: #0f172a; color: #fff; border-radius: 22px; padding: 42px; }
.dark-cta p { color: #94a3b8; max-width: 520px; }
.dark-cta span { color: #a5b4fc; font-size: 13px; font-weight: 800; }
.category-strip { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 14px; margin-bottom: 16px; }
.category-strip a, .view-switch a { white-space: nowrap; border: 1px solid var(--soft); background: #fff; color: #475569; border-radius: 10px; padding: 9px 12px; font-size: 14px; font-weight: 700; }
.category-strip a.active { background: var(--brand); color: #fff; border-color: var(--brand); }
.detail-hero { display: flex; gap: 22px; align-items: flex-start; }
.detail-actions, .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.markdown pre { white-space: pre-wrap; background: #0f172a; color: #e2e8f0; border-radius: 12px; padding: 16px; }
.metric-list { display: flex; justify-content: space-between; border-bottom: 1px solid var(--soft-2); padding: 10px 0; }
.metric-list span { color: var(--muted); }
.process-grid { grid-template-columns: repeat(5, 1fr); }
.process-grid.compact { grid-template-columns: repeat(4, 1fr); }
.process-grid b { display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; background: var(--brand); color: #fff; border-radius: 999px; font-size: 12px; margin-bottom: 12px; }
.plan-grid { grid-template-columns: repeat(4, 1fr); }
.plan-card { position: relative; background: #fff; border: 2px solid var(--soft); border-radius: 18px; padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.plan-card.recommended { border-color: var(--brand); box-shadow: 0 18px 36px rgba(79,70,229,.14); }
.recommend { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--brand); color: #fff; border-radius: 999px; padding: 5px 12px; font-size: 12px; font-weight: 800; }
.price b { font-size: 30px; font-family: ui-monospace, monospace; }
.price del { color: #94a3b8; margin-left: 6px; }
.plan-card ul { padding-left: 18px; color: #475569; line-height: 1.8; flex: 1; }
.two-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.check-list, .plain-list { padding-left: 0; list-style: none; line-height: 1.8; }
.check-list li:before { content: "✓"; color: var(--green); margin-right: 8px; font-weight: 900; }
.plain-list li:before { content: "×"; color: #94a3b8; margin-right: 8px; font-weight: 900; }
.narrow { max-width: 760px; }
.faq { background: #fff; border: 1px solid var(--soft); border-radius: 12px; margin-bottom: 10px; padding: 14px 16px; }
.faq summary { font-weight: 800; cursor: pointer; }
.partner-layout { grid-template-columns: minmax(0, 1fr) 300px; }
.benefit-grid { grid-template-columns: repeat(4, 1fr); margin-bottom: 18px; }
.mini-card p, .muted-text { color: var(--muted); font-size: 14px; }
.form-panel label { display: grid; gap: 7px; color: #334155; font-size: 14px; font-weight: 700; margin-bottom: 14px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-panel textarea { resize: vertical; }
.subhead { color: #64748b; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; border-top: 1px solid var(--soft-2); padding-top: 18px; }
.center-text { text-align: center; }
.profile-layout { grid-template-columns: 280px 1fr; align-items: start; }
.profile-card { text-align: center; }
.avatar-xl { width: 72px; height: 72px; margin: 0 auto 12px; border-radius: 18px; background: #eef2ff; color: #3730a3; display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: 900; overflow: hidden; }
.avatar-xl img { width: 100%; height: 100%; display: block; object-fit: cover; }
.profile-avatar-editor { display: grid; grid-template-columns: 92px 1fr; gap: 18px; align-items: center; margin: 4px 0 20px; padding: 16px; border: 1px solid var(--soft); border-radius: var(--radius); background: #f8fafc; }
.profile-avatar-editor .avatar-xl { margin: 0; width: 84px; height: 84px; border-radius: 22px; }
.profile-avatar-editor label { margin-bottom: 0; }
.avatar-upload-trigger { position: relative; display: inline-flex !important; width: 84px; cursor: pointer; }
.avatar-upload-trigger input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.avatar-upload-trigger .avatar-xl { transition: box-shadow .18s ease, transform .18s ease; }
.avatar-upload-trigger:hover .avatar-xl { box-shadow: 0 0 0 4px #e0e7ff; transform: translateY(-1px); }
.avatar-upload-trigger:after { content: "更换"; position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); border-radius: 999px; background: #4f46e5; color: #fff; padding: 3px 9px; font-size: 11px; font-weight: 800; white-space: nowrap; box-shadow: 0 8px 18px rgba(79, 70, 229, .24); pointer-events: none; }
.profile-avatar-editor b { display: block; color: var(--text-strong); font-size: 15px; margin-bottom: 4px; }
.profile-avatar-editor p { margin: 0 0 4px; color: var(--text-secondary); font-size: 14px; }
.profile-avatar-editor small { color: var(--muted); font-size: 12px; font-weight: 500; line-height: 1.5; }
.profile-stats { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--soft); margin-top: 18px; padding-top: 16px; }
.profile-stats b { display: block; }
.profile-stats span { color: var(--muted); font-size: 12px; }
.side-nav { display: grid; background: #fff; border: 1px solid var(--soft); border-radius: var(--radius); overflow: hidden; margin: 16px 0; }
.side-nav a { padding: 13px 16px; border-bottom: 1px solid var(--soft); color: #475569; font-weight: 700; }
.side-nav a:last-child { border-bottom: 0; }
.side-nav a.active { background: #eef2ff; color: #3730a3; }
.submit-skill { display: block; background: var(--brand); color: #fff; border-radius: var(--radius); padding: 18px; font-weight: 800; }
.submit-skill span { display: block; color: #c7d2fe; font-size: 12px; margin-top: 4px; }
.profile-main { display: grid; gap: 16px; }
.metric-grid { grid-template-columns: repeat(4, 1fr); }
.metric-grid b { display: block; font-size: 26px; font-family: ui-monospace, monospace; }
.metric-grid span { color: var(--muted); font-size: 13px; }
.metric-grid em { display: block; color: #94a3b8; font-style: normal; font-size: 12px; margin-top: 4px; }
.order-highlight, .table-card { border: 1px solid var(--soft); border-radius: 12px; padding: 14px; margin: 10px 0; background: #f8fafc; }
.status.blue { background: #dbeafe; color: #1d4ed8; }
.auth-page { min-height: calc(100vh - 58px); display: flex; align-items: center; justify-content: center; padding: 48px 20px; background: var(--bg); }
.auth-card { width: min(430px, 100%); background: #fff; border: 1px solid var(--soft); border-radius: 22px; padding: 30px; text-align: center; box-shadow: var(--shadow); }
.auth-brand { justify-content: center; margin-bottom: 24px; }
.oauth-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 18px 0; }
.oauth-row button { border: 1px solid var(--soft); border-radius: 11px; background: #fff; padding: 10px; }
.agree { grid-template-columns: auto 1fr !important; text-align: left; }
.admin-shell { display: grid; grid-template-columns: 250px 1fr; min-height: calc(100vh - 58px); }
.admin-side { position: sticky; top: 58px; height: calc(100vh - 58px); background: #fff; border-right: 1px solid var(--soft); padding: 22px; display: flex; flex-direction: column; gap: 22px; }
.admin-side nav { display: grid; gap: 6px; }
.admin-side nav a { padding: 11px 12px; border-radius: 10px; color: #475569; font-weight: 700; }
.admin-side nav a.active { background: #eef2ff; color: #3730a3; }
.admin-main { padding: 30px; display: grid; gap: 20px; align-content: start; }
.admin-head p { color: var(--muted); }
.admin-form-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.admin-form-grid textarea { grid-column: span 4; min-height: 80px; }
.admin-form-grid button { grid-column: span 1; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 760px; }
th { background: #f8fafc; color: #64748b; text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
th, td { padding: 13px 14px; border-bottom: 1px solid var(--soft); vertical-align: top; }
td small { color: #94a3b8; }
.inline-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.empty { background: #fff; border: 1px solid var(--soft); border-radius: var(--radius); padding: 52px; text-align: center; color: var(--muted); }

.skills-top { background: #fff; border-bottom: 1px solid var(--soft); }
.skills-top .container { padding-top: 24px; padding-bottom: 24px; }
.crumb-line { display: flex; align-items: center; gap: 8px; color: #94a3b8; font-size: 14px; margin-bottom: 16px; }
.crumb-line a:hover { color: var(--brand); }
.crumb-line b { color: #334155; font-weight: 500; }
.skills-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.skills-title-row h1 { font-size: 24px; line-height: 1.2; letter-spacing: -.2px; margin: 0 0 4px; color: #1e293b; }
.skills-title-row p { margin: 0; color: var(--muted); font-size: 14px; }
.skills-search { display: flex; align-items: center; gap: 8px; }
.search-box { min-width: 260px; display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: #f8fafc; border: 1px solid var(--soft); border-radius: 12px; transition: .18s; }
.search-box:focus-within { background: #fff; border-color: #818cf8; box-shadow: 0 0 0 3px #e0e7ff; }
.search-box input { width: 100%; border: 0; outline: 0; background: transparent; color: #334155; font-size: 14px; }
.search-mark { position: relative; width: 14px; height: 14px; border: 2px solid #94a3b8; border-radius: 999px; flex: 0 0 auto; }
.search-mark:after { content: ""; position: absolute; width: 6px; height: 2px; background: #94a3b8; right: -5px; bottom: -2px; transform: rotate(45deg); border-radius: 999px; }
.clear-mini { color: #94a3b8; line-height: 1; font-size: 16px; }
.skills-search button { border: 0; background: var(--brand); color: #fff; border-radius: 12px; padding: 9px 16px; font-size: 14px; font-weight: 700; }
.skills-page { min-height: 70vh; background: var(--bg); padding: 24px 0 56px; }
.category-rail { display: flex; align-items: center; gap: 8px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 20px; scrollbar-width: none; }
.category-rail::-webkit-scrollbar { display: none; }
.category-rail a { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border: 1px solid var(--soft); border-radius: 10px; background: #fff; color: #475569; font-size: 14px; font-weight: 700; transition: .18s; }
.category-rail a:hover { border-color: #c7d2fe; color: var(--brand); }
.category-rail a.active { background: var(--brand); color: #fff; border-color: var(--brand); box-shadow: 0 8px 18px rgba(79, 70, 229, .18); }
.category-rail small { color: #94a3b8; font-family: ui-monospace, monospace; font-size: 11px; }
.category-rail a.active small { color: #c7d2fe; }
.result-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.result-summary { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; color: var(--muted); font-size: 14px; }
.result-summary b { color: #334155; font-family: ui-monospace, monospace; }
.result-summary em { color: var(--brand); font-style: normal; }
.result-summary a { color: #94a3b8; font-size: 12px; }
.result-summary a:hover { color: #475569; }
.result-controls { display: flex; align-items: center; gap: 8px; }
.sort-form select { appearance: none; min-width: 128px; border: 1px solid var(--soft); border-radius: 9px; background: #fff; color: #475569; padding: 8px 28px 8px 12px; outline: 0; font-size: 14px; }
.view-toggle { display: inline-flex; align-items: center; background: #fff; border: 1px solid var(--soft); border-radius: 9px; overflow: hidden; }
.view-toggle a { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; color: #94a3b8; }
.view-toggle a.active { background: #eef2ff; color: var(--brand); }
.icon-grid, .icon-list { width: 16px; height: 16px; display: block; position: relative; }
.icon-grid { background: linear-gradient(currentColor 0 0) left top / 6px 6px no-repeat, linear-gradient(currentColor 0 0) right top / 6px 6px no-repeat, linear-gradient(currentColor 0 0) left bottom / 6px 6px no-repeat, linear-gradient(currentColor 0 0) right bottom / 6px 6px no-repeat; }
.icon-list { background: linear-gradient(currentColor 0 0) left 2px / 16px 2px no-repeat, linear-gradient(currentColor 0 0) left 7px / 16px 2px no-repeat, linear-gradient(currentColor 0 0) left 12px / 16px 2px no-repeat; }
.skill-grid.directory-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.skill-grid.directory-list { display: flex; flex-direction: column; gap: 12px; }
.skill-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 2px; }
.bookmark-btn { width: 26px; height: 26px; border: 0; background: transparent; border-radius: 8px; position: relative; }
.bookmark-btn:before { content: ""; position: absolute; inset: 6px 8px; border: 2px solid #94a3b8; border-bottom: 0; border-radius: 7px 7px 2px 2px; transform: skewY(-6deg); }
.bookmark-btn:hover { background: #eef2ff; }
.bookmark-btn:hover:before { border-color: var(--brand); }
.skill-card p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.skill-card .card-link { width: 100%; margin-top: auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid #c7d2fe; color: var(--brand); border-radius: 9px; padding: 9px 10px; font-size: 14px; font-weight: 700; transition: .18s; }
.skill-card .card-link:hover { background: #eef2ff; border-color: #a5b4fc; }
.skill-card-list { min-height: 0; flex-direction: row; align-items: flex-start; padding: 16px; }
.skill-card-list .skill-card-head { margin: 0; display: block; }
.skill-card-list .bookmark-btn { display: none; }
.skill-card-list p { -webkit-line-clamp: 1; margin-bottom: 8px; }
.skill-card-list .tag-row { margin: 0 0 8px; }
.skill-card-list .card-link { width: auto; align-self: center; flex: 0 0 auto; padding: 8px 12px; }
.result-stats { margin-top: 30px; padding: 16px; background: #fff; border: 1px solid var(--soft); border-radius: 14px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; color: #475569; font-size: 13px; }
.result-stats b { font-family: ui-monospace, monospace; color: #475569; font-weight: 600; }
.result-stats a { margin-left: auto; color: var(--brand); font-weight: 700; }
.directory-empty h3 { margin-bottom: 8px; color: #334155; }
.directory-empty p { color: #94a3b8; }

.install-page { background: #f8fafc; min-height: 100vh; }
.install-hero { background: #fff; border-bottom: 1px solid #e2e8f0; }
.install-hero .container { padding-top: 72px; padding-bottom: 80px; }
.install-hero-copy { max-width: 672px; }
.install-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid #d1fae5;
  background: #ecfdf5;
  color: #047857;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 20px;
}
.install-hero h1 {
  margin: 0 0 16px;
  color: #0f172a;
  font-size: clamp(42px, 4.3vw, 56px);
  line-height: 1.06;
  letter-spacing: -.5px;
  font-weight: 800;
}
.install-hero h1 span { color: #4f46e5; }
.install-hero p {
  max-width: 650px;
  margin: 0 0 30px;
  color: #64748b;
  font-size: 18px;
  line-height: 1.75;
}
.install-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.install-primary,
.install-secondary,
.install-dark-secondary {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  padding: 0 24px;
  font-size: 14px;
  font-weight: 800;
  transition: .18s;
}
.install-primary { background: #4f46e5; color: #fff; }
.install-primary:hover { background: #4338ca; }
.install-secondary { background: #fff; color: #475569; border: 1px solid #e2e8f0; }
.install-secondary:hover { border-color: #cbd5e1; }
.install-dark-secondary { background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.1); }
.install-dark-secondary:hover { background: rgba(255,255,255,.18); }
.install-icon {
  position: relative;
  display: inline-block;
  width: 14px;
  height: 14px;
  color: currentColor;
}
.install-icon:before,
.install-icon:after,
.install-stat-icon:before,
.install-stat-icon:after {
  content: "";
  position: absolute;
  box-sizing: border-box;
}
.install-icon.wrench:before { width: 10px; height: 10px; left: 1px; top: 0; border: 2px solid currentColor; border-right-color: transparent; border-bottom-color: transparent; border-radius: 999px; transform: rotate(-25deg); }
.install-icon.wrench:after { width: 9px; height: 2px; right: 0; bottom: 2px; background: currentColor; border-radius: 999px; transform: rotate(-45deg); }
.install-icon.cart:before { inset: 3px 1px 4px 2px; border: 2px solid currentColor; border-top: 0; border-radius: 2px; }
.install-icon.cart:after { left: 4px; bottom: 1px; width: 3px; height: 3px; border-radius: 999px; background: currentColor; box-shadow: 7px 0 0 currentColor; }
.install-icon.contact:before { inset: 2px; border: 2px solid currentColor; border-radius: 4px; }
.install-icon.contact:after { left: 4px; top: 6px; width: 6px; height: 2px; background: currentColor; box-shadow: 0 4px 0 currentColor; }
.install-icon.zap:before { left: 5px; top: 0; width: 7px; height: 14px; background: currentColor; clip-path: polygon(45% 0, 100% 0, 60% 43%, 100% 43%, 24% 100%, 43% 55%, 0 55%); }
.install-icon.check:before { width: 11px; height: 7px; left: 2px; top: 3px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }
.install-stats-band { background: #fff; border-bottom: 1px solid #e2e8f0; }
.install-stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.install-stat {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 24px;
  border-left: 1px solid #e2e8f0;
}
.install-stat:first-child { border-left: 0; }
.install-stat b {
  display: block;
  color: #1e293b;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 16px;
}
.install-stat span { color: #64748b; font-size: 12px; }
.install-stat-icon {
  position: relative;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  color: #6366f1;
}
.install-stat-icon.users:before { width: 7px; height: 7px; left: 6px; top: 1px; border: 2px solid currentColor; border-radius: 999px; }
.install-stat-icon.users:after { width: 16px; height: 9px; left: 2px; bottom: 1px; border: 2px solid currentColor; border-radius: 999px 999px 4px 4px; border-bottom-width: 2px; }
.install-stat-icon.success:before { inset: 2px; border: 2px solid currentColor; border-radius: 999px; }
.install-stat-icon.success:after { width: 9px; height: 5px; left: 6px; top: 7px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }
.install-stat-icon.time:before { inset: 2px; border: 2px solid currentColor; border-radius: 999px; }
.install-stat-icon.time:after { width: 6px; height: 6px; left: 9px; top: 5px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; }
.install-stat-icon.rating:before { left: 2px; top: 1px; width: 16px; height: 16px; background: currentColor; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 56%, 79% 91%, 50% 70%, 21% 91%, 32% 56%, 2% 35%, 39% 35%); }
.install-section { padding: 56px 0; }
.install-section-head {
  text-align: center;
  margin-bottom: 40px;
}
.install-section-head h2 {
  color: #1e293b;
  font-size: 26px;
  line-height: 1.25;
  margin: 0 0 8px;
  font-weight: 800;
}
.install-section-head p { margin: 0; color: #64748b; }
.process-line-wrap { position: relative; }
.process-line {
  position: absolute;
  top: 36px;
  left: 96px;
  right: 96px;
  height: 1px;
  background: #e2e8f0;
}
.install-process-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px;
}
.process-step {
  position: relative;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.process-icon {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid #dbeafe;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0f766e;
  box-shadow: 0 12px 28px rgba(15, 118, 110, .10), inset 0 1px 0 rgba(255, 255, 255, .92);
  margin-bottom: 12px;
  z-index: 1;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.process-svg-icon {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
}
.process-svg-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.process-step:hover .process-icon {
  border-color: #99f6e4;
  box-shadow: 0 16px 34px rgba(15, 118, 110, .16), inset 0 1px 0 rgba(255, 255, 255, .96);
  transform: translateY(-2px);
}
.process-step:nth-child(2) .process-icon { color: #2563eb; }
.process-step:nth-child(3) .process-icon { color: #7c3aed; }
.process-step:nth-child(4) .process-icon { color: #d97706; }
.process-step:nth-child(5) .process-icon { color: #16a34a; }
.process-step > span {
  position: absolute;
  top: 4px;
  right: 26px;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #4f46e5;
  color: #fff;
  border-radius: 999px;
  font-size: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 800;
  z-index: 2;
}
.process-step h3 { margin: 0 0 6px; color: #1e293b; font-size: 14px; }
.process-step p { margin: 0; color: #64748b; font-size: 12px; line-height: 1.6; }
.install-plans-section,
.install-reviews-section { background: #fff; border-top: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0; }
.install-plan-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.install-plan-card {
  position: relative;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  padding: 24px;
  border: 2px solid #e2e8f0;
  border-radius: 18px;
  background: #fff;
}
.install-plan-card.is-recommended {
  border-color: #6366f1;
  box-shadow: 0 22px 42px rgba(79,70,229,.13);
}
.install-recommend {
  position: absolute;
  left: 0;
  right: 0;
  top: -13px;
  text-align: center;
}
.install-recommend span {
  display: inline-flex;
  padding: 5px 12px;
  border-radius: 999px;
  background: #4f46e5;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}
.install-plan-title { margin-bottom: 20px; }
.install-plan-title h3 { margin: 0 0 4px; color: #1e293b; font-size: 18px; font-weight: 800; }
.install-plan-title p { margin: 0; color: #64748b; font-size: 12px; line-height: 1.5; }
.install-price { margin-bottom: 20px; }
.install-price span,
.install-price strong {
  color: #0f172a;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 32px;
  line-height: 1;
  font-weight: 900;
}
.install-price del {
  color: #94a3b8;
  margin-left: 6px;
  font-size: 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.install-price p { margin: 8px 0 0; color: #64748b; font-size: 12px; }
.install-plan-card ul {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: grid;
  gap: 10px;
  flex: 1;
}
.install-plan-card li {
  position: relative;
  padding-left: 24px;
  color: #475569;
  font-size: 14px;
  line-height: 1.45;
}
.install-plan-card li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #d1fae5;
}
.install-plan-card li:after {
  content: "";
  position: absolute;
  left: 5px;
  top: 6px;
  width: 7px;
  height: 4px;
  border-left: 2px solid #059669;
  border-bottom: 2px solid #059669;
  transform: rotate(-45deg);
}
.install-plan-card button {
  width: 100%;
  min-height: 46px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #334155;
  font-weight: 800;
  transition: .18s;
}
.install-plan-card button:hover { background: #f1f5f9; }
.install-plan-card.is-recommended button {
  background: #4f46e5;
  border-color: #4f46e5;
  color: #fff;
}
.install-plan-card.is-recommended button:hover { background: #4338ca; }
.install-scope-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.install-scope-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  padding: 24px;
}
.scope-title { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.scope-title h3 { margin: 0; color: #1e293b; font-size: 17px; }
.scope-check,
.scope-x {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.scope-check { position: relative; color: #059669; }
.scope-check:before { content: ""; position: absolute; inset: 0; border: 2px solid currentColor; border-radius: inherit; }
.scope-check:after { content: ""; width: 9px; height: 5px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }
.scope-x { border: 2px solid #cbd5e1; color: #94a3b8; font-weight: 900; font-size: 13px; }
.install-scope-card ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.install-scope-card li {
  position: relative;
  padding-left: 18px;
  color: #475569;
  font-size: 14px;
}
.install-scope-card li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #34d399;
}
.install-scope-card ul.muted li { color: #64748b; }
.install-scope-card ul.muted li:before { background: #cbd5e1; }
.install-scope-card > p {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid #e2e8f0;
  color: #94a3b8;
  font-size: 12px;
}
.install-rating { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; }
.install-rating .stars,
.review-stars { color: #f59e0b; letter-spacing: 1px; }
.install-rating b { color: #475569; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.install-rating em { color: #94a3b8; font-style: normal; font-size: 14px; }
.install-review-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.install-review-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  padding: 20px;
}
.install-review-card p {
  margin: 12px 0 18px;
  color: #475569;
  font-size: 14px;
  line-height: 1.7;
}
.review-author { display: flex; align-items: center; gap: 10px; }
.review-author > span {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #e0e7ff;
  color: #4338ca;
  font-size: 14px;
  font-weight: 900;
}
.review-author b { display: block; color: #334155; font-size: 14px; }
.review-author small { color: #94a3b8; font-size: 12px; }
.install-faq-container { max-width: 820px; }
.install-faq-list { display: grid; gap: 12px; }
.install-faq {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  overflow: hidden;
}
.install-faq summary {
  cursor: pointer;
  list-style: none;
  padding: 16px 20px;
  color: #334155;
  font-size: 14px;
  font-weight: 800;
}
.install-faq summary::-webkit-details-marker { display: none; }
.install-faq summary:after {
  content: "+";
  float: right;
  color: #94a3b8;
  font-size: 18px;
  line-height: 14px;
}
.install-faq[open] summary:after { content: "-"; }
.install-faq p {
  margin: 0;
  padding: 14px 20px 18px;
  border-top: 1px solid #e2e8f0;
  color: #64748b;
  font-size: 14px;
  line-height: 1.7;
}
.install-final-cta {
  background: #0f172a;
  color: #fff;
  padding: 48px 0;
  text-align: center;
}
.install-final-cta h2 {
  margin: 0 0 10px;
  font-size: 26px;
  font-weight: 800;
}
.install-final-cta p {
  margin: 0 0 28px;
  color: #94a3b8;
}
.install-final-cta .container > div {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.service-contact-layer {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 24px;
}

.service-contact-layer[hidden] {
  display: none;
}

.service-contact-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .56);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity .18s ease;
}

.service-contact-dialog {
  position: relative;
  z-index: 1;
  width: min(420px, 100%);
  padding: 28px;
  border: 1px solid rgba(226, 232, 240, .95);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 28px 70px rgba(15, 23, 42, .22);
  text-align: center;
  opacity: 0;
  transform: translateY(12px) scale(.98);
  transition: opacity .18s ease, transform .18s ease;
}

.service-contact-layer.is-open .service-contact-backdrop,
.service-contact-layer.is-open .service-contact-dialog {
  opacity: 1;
}

.service-contact-layer.is-open .service-contact-dialog {
  transform: translateY(0) scale(1);
}

.service-contact-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: #f8fafc;
  color: #64748b;
  cursor: pointer;
}

.service-contact-close:before,
.service-contact-close:after {
  content: "";
  position: absolute;
  left: 10px;
  top: 15px;
  width: 12px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
}

.service-contact-close:before {
  transform: rotate(45deg);
}

.service-contact-close:after {
  transform: rotate(-45deg);
}

.service-contact-close:hover {
  border-color: #cbd5e1;
  background: #f1f5f9;
  color: #334155;
}

.service-contact-qr {
  width: min(276px, 78vw);
  aspect-ratio: 1;
  margin: 12px auto 22px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: #f8fafc;
}

.service-contact-qr img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.service-contact-dialog h2 {
  max-width: 320px;
  margin: 0 auto;
  color: #0f172a;
  font-size: 20px;
  line-height: 1.45;
  font-weight: 800;
  letter-spacing: 0;
}

@media (max-width: 640px) {
  .service-contact-dialog {
    padding: 24px 20px;
    border-radius: 16px;
  }

  .service-contact-dialog h2 {
    font-size: 18px;
  }
}

@media (max-width: 980px) {
  .main-nav { display: none; position: absolute; left: 20px; right: 20px; top: 58px; background: #fff; border: 1px solid var(--soft); border-radius: 12px; padding: 8px; box-shadow: var(--shadow); }
  .main-nav.open { display: grid; }
  .nav-search, .nav-actions { display: none; }
  .menu-btn { display: block; margin-left: auto; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-brand-block { max-width: none; grid-column: 1 / -1; }
  .profile-shell-refined { grid-template-columns: 1fr; }
  .profile-sidebar-refined { grid-template-columns: 280px minmax(0, 1fr); align-items: start; }
  .profile-submit-card { grid-column: 1 / -1; }
  .skill-grid.four, .skill-grid.three, .plan-grid, .feature-grid, .benefit-grid, .process-grid, .process-grid.compact, .stats-grid, .metric-grid { grid-template-columns: repeat(2, 1fr); }
  .skill-grid.directory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .two-col, .partner-layout, .detail-layout, .profile-layout, .two-panels { grid-template-columns: 1fr; }
  .admin-shell { grid-template-columns: 1fr; }
  .admin-side { position: static; height: auto; }
  .install-stats-grid,
  .install-plan-grid,
  .install-review-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .install-process-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .process-line { display: none; }
  .process-step > span { right: calc(50% - 42px); }
}
@media (max-width: 640px) {
  .brand { gap: 8px; }
  .brand-mark { width: 34px; height: 34px; }
  .brand-copy b { font-size: 15px; }
  .brand-copy small { font-size: 10px; }
  .hero-search, .filter-bar, .form-row, .dark-cta-inner { flex-direction: column; display: flex; align-items: stretch; }
  .skill-grid.four, .skill-grid.three, .skill-grid.two, .plan-grid, .feature-grid, .benefit-grid, .process-grid, .stats-grid, .metric-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 26px; padding-top: 40px; padding-bottom: 32px; }
  .footer-bottom { align-items: flex-start; flex-direction: column; }
  .footer-category-nav div { gap: 8px 14px; }
  .profile-page-refined { padding-top: 20px; }
  .profile-sidebar-refined,
  .profile-metric-grid,
  .profile-favorite-grid { grid-template-columns: 1fr; }
  .profile-field-list label,
  .profile-avatar-edit-row { grid-template-columns: 1fr; display: grid; }
  .profile-avatar-edit-row { justify-items: start; }
  .profile-edit-head,
  .profile-order-top { align-items: flex-start; flex-direction: column; }
  .skill-grid.directory-grid { grid-template-columns: 1fr; }
  .skills-search, .skills-title-row, .result-toolbar, .result-controls { width: 100%; }
  .search-box { min-width: 0; flex: 1; }
  .result-stats a { margin-left: 0; }
  .skill-card-list { flex-direction: column; }
  .skill-card-list .skill-card-head { display: flex; width: 100%; }
  .skill-card-list .bookmark-btn { display: block; }
  .skill-card-list .card-link { width: 100%; }
  .hero h1, .page-hero h1 { font-size: 34px; }
  .dark-cta-inner { padding: 28px; }
  .admin-form-grid { grid-template-columns: 1fr; }
  .admin-form-grid textarea { grid-column: auto; }
  .install-hero .container { padding-top: 48px; padding-bottom: 56px; }
  .install-hero h1 { font-size: 36px; }
  .install-stats-grid,
  .install-plan-grid,
  .install-review-grid,
  .install-scope-grid,
  .install-process-grid { grid-template-columns: 1fr; }
  .install-stat { border-left: 0; border-top: 1px solid #e2e8f0; }
  .install-stat:first-child { border-top: 0; }
  .install-actions,
  .install-final-cta .container > div { flex-direction: column; }
  .install-primary,
  .install-secondary,
  .install-dark-secondary { width: 100%; }
}

/* AISkillHub design-system alignment */
html { scroll-behavior: smooth; }

body {
  color: var(--foreground);
  background: var(--background);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}

::selection {
  background: var(--secondary);
  color: var(--secondary-foreground);
}

.container {
  max-width: 1280px;
  padding-inline: 24px;
}

h1,
h2,
h3,
h4,
label,
button {
  font-weight: var(--font-weight-medium);
  line-height: var(--leading-normal);
}

h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
h4,
label,
button { font-size: var(--text-base); }

p {
  color: var(--muted-foreground);
  line-height: 1.65;
  text-wrap: pretty;
}

:where(button, a, input, select, textarea, summary) {
  transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease, opacity .18s ease;
}

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.site-header,
.hero,
.page-hero,
.skills-top,
.stats-band,
.install-hero,
.install-stats-band,
.install-plans-section,
.install-reviews-section {
  background: var(--card);
  border-color: var(--border);
}

.site-header {
  box-shadow: var(--shadow-sm);
}

.brand {
  color: var(--foreground);
  font-weight: 800;
  letter-spacing: 0;
}

.brand-mark {
  background: transparent;
  color: transparent;
  border-radius: 14px;
  box-shadow: none;
}

.main-nav a,
.ghost-btn,
.category-strip a,
.category-rail a,
.side-nav a,
.admin-side nav a,
.sort-form select,
.result-summary,
.rank-row,
.install-plan-card li,
.install-scope-card li,
.install-secondary {
  color: var(--text-secondary);
}

.main-nav a:hover,
.main-nav a.active,
.side-nav a.active,
.admin-side nav a.active,
.view-toggle a.active,
.category-strip a:hover,
.category-rail a:hover {
  background: var(--secondary);
  color: var(--secondary-foreground);
}

.primary-btn,
.hero-search button,
.filter-bar button,
.plan-card button,
.inline-form button,
table button,
.admin-form-grid button,
.skills-search button,
.install-primary,
.install-plan-card.is-recommended button,
.submit-skill {
  background: var(--primary);
  color: var(--primary-foreground);
  border-color: var(--primary);
  border-radius: var(--radius-xl);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  box-shadow: none;
}

.primary-btn:hover,
.hero-search button:hover,
.filter-bar button:hover,
.plan-card button:hover,
.inline-form button:hover,
table button:hover,
.admin-form-grid button:hover,
.skills-search button:hover,
.install-primary:hover,
.install-plan-card.is-recommended button:hover,
.submit-skill:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
  transform: translateY(-1px);
}

.primary-btn:active,
.ghost-btn:active,
.install-primary:active,
.install-secondary:active,
.install-plan-card button:active,
.card-link:active {
  transform: translateY(0) scale(.98);
}

.ghost-btn,
.ghost-btn.bordered,
.install-secondary,
.oauth-row button,
.category-strip a,
.category-rail a,
.view-toggle,
.sort-form select {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  font-weight: var(--font-weight-medium);
}

.ghost-btn:hover,
.ghost-btn.bordered:hover,
.install-secondary:hover,
.oauth-row button:hover {
  background: var(--muted);
  border-color: var(--border);
  color: var(--foreground);
}

.hero-search input,
.filter-bar input,
.filter-bar select,
.form-panel input,
.form-panel textarea,
.form-panel select,
.plan-card input,
.plan-card textarea,
.inline-form input,
.inline-form select,
.admin-form-grid input,
.admin-form-grid textarea,
.admin-form-grid select,
.nav-search,
.search-box,
.sort-form select {
  background: var(--card);
  border-color: var(--border);
  color: var(--foreground);
  border-radius: var(--radius-lg);
}

.nav-search,
.search-box {
  background: var(--input-background);
}

.nav-search:focus-within,
.search-box:focus-within,
.hero-search input:focus,
.filter-bar input:focus,
.filter-bar select:focus,
.form-panel input:focus,
.form-panel textarea:focus,
.form-panel select:focus,
.plan-card input:focus,
.plan-card textarea:focus,
.inline-form input:focus,
.inline-form select:focus,
.admin-form-grid input:focus,
.admin-form-grid textarea:focus,
.admin-form-grid select:focus,
.sort-form select:focus {
  background: var(--card);
  border-color: var(--focus-border);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

input::placeholder,
textarea::placeholder {
  color: var(--text-subtle);
}

.panel,
.mini-card,
.skill-card,
.feature-grid div,
.process-grid div,
.metric-grid div,
.metric-grid a,
.plan-card,
.auth-card,
.table-card,
.order-highlight,
.empty,
.faq,
.install-plan-card,
.install-scope-card,
.install-review-card,
.install-faq {
  background: var(--card);
  border-color: var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

.skill-card {
  padding: 24px;
}

.skill-card:hover,
.install-plan-card:hover,
.install-review-card:hover,
.metric-grid a:hover {
  border-color: var(--indigo-border);
  box-shadow: var(--shadow-card);
  transform: translateY(-2px);
}

.skill-title,
.install-plan-title h3,
.scope-title h3,
.install-section-head h2,
.directory-empty h3,
.panel h3,
.rank-row,
.review-author b,
.skills-title-row h1,
.admin-head h1 {
  color: var(--text-strong);
}

.skill-card p,
.mini-card p,
.muted-text,
.section-head p,
.center-head p,
.skills-title-row p,
.install-section-head p,
.install-plan-title p,
.install-price p,
.install-scope-card > p,
.install-faq p,
.profile-stats span,
.metric-grid span,
td small {
  color: var(--muted-foreground);
}

.meta-row,
.crumb-line,
.result-summary a,
.clear-mini,
.install-rating em,
.review-author small,
.metric-grid em {
  color: var(--text-subtle);
  font-family: var(--font-mono);
}

.stats-grid strong,
.metric-grid b,
.price b,
.install-stat b,
.install-price span,
.install-price strong,
.install-price del,
.install-rating b,
.result-summary b,
.result-stats b,
.category-rail small,
.process-step > span {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.eyebrow,
.breadcrumb,
.tag.推荐,
.tag.可协助安装,
.install-badge,
.install-recommend span,
.recommend {
  background: var(--secondary);
  border-color: var(--indigo-border);
  color: var(--secondary-foreground);
}

.eyebrow.emerald,
.tag.新收录 {
  background: var(--accent);
  border-color: var(--success-bg);
  color: var(--accent-foreground);
}

.tag.热门 {
  background: var(--warning-bg);
  color: var(--warning-fg);
}

.pill,
.tag,
.status {
  background: var(--muted);
  color: var(--muted-foreground);
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
}

.pill.category,
.status.blue {
  background: var(--info-bg);
  color: var(--info-fg);
}

.status.success,
.flash.success {
  background: var(--success-bg);
  color: var(--success-fg);
}

.status.warning {
  background: var(--warning-bg);
  color: var(--warning-fg);
}

.status.error,
.flash.error {
  background: var(--danger-bg);
  color: var(--danger-fg);
}

.flash {
  background: var(--card);
  color: var(--foreground);
  border-color: var(--border);
  border-left-color: var(--primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.cta-panel {
  background: var(--primary);
  color: var(--primary-foreground);
  border-radius: var(--radius-xl);
}

.cta-panel p,
.submit-skill span {
  color: var(--indigo-soft);
}

.cta-panel.light {
  background: var(--secondary);
  color: var(--secondary-foreground);
  border-color: var(--indigo-border);
}

.cta-panel.light p {
  color: var(--secondary-foreground);
}

.feature-grid span,
.avatar-xl,
.review-author > span,
.process-icon {
  background: var(--secondary);
  color: var(--primary);
  border-color: var(--indigo-border);
}

.install-process .process-icon {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border-color: #dbeafe;
  color: #0f766e;
}

.install-process .process-step:nth-child(2) .process-icon { color: #2563eb; }
.install-process .process-step:nth-child(3) .process-icon { color: #7c3aed; }
.install-process .process-step:nth-child(4) .process-icon { color: #d97706; }
.install-process .process-step:nth-child(5) .process-icon { color: #16a34a; }

.dark-cta-inner,
.install-final-cta {
  background: var(--foreground);
  color: var(--primary-foreground);
  border-radius: var(--radius-xl);
}

.dark-cta p,
.install-final-cta p {
  color: var(--text-subtle);
}

.skill-card .card-link {
  border-color: var(--indigo-border);
  color: var(--primary);
  border-radius: var(--radius-lg);
  font-weight: var(--font-weight-medium);
}

.skill-card .card-link:hover {
  background: var(--secondary);
  border-color: var(--primary);
}

.bookmark-btn:hover {
  background: var(--secondary);
}

.bookmark-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-subtle);
}

.bookmark-btn:before,
.bookmark-btn:after {
  content: none;
}

.bookmark-icon {
  width: 16px;
  height: 16px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bookmark-btn:hover {
  color: var(--primary);
}

.bookmark-btn.is-bookmarked {
  color: var(--primary);
}

.bookmark-btn.is-bookmarked .bookmark-icon {
  fill: currentColor;
}

.bookmark-btn.is-loading {
  opacity: .55;
  pointer-events: none;
}

.detail-action-btn.is-bookmarked {
  background: var(--secondary);
  border-color: var(--indigo-border);
  color: var(--secondary-foreground);
}

.detail-action-btn.is-bookmarked svg:first-child {
  fill: currentColor;
}

.detail-action-btn.is-loading {
  opacity: .65;
  pointer-events: none;
}

.install-page,
.skills-page,
.section.muted,
.dark-cta,
.auth-page {
  background: var(--background);
}

.install-plan-card.is-recommended,
.plan-card.recommended,
.category-rail a.active {
  border-color: var(--primary);
  box-shadow: var(--shadow-primary);
}

.install-plan-card button {
  background: var(--background);
  border-color: var(--border);
  color: var(--text-body);
  border-radius: var(--radius-xl);
  font-weight: var(--font-weight-medium);
}

.install-plan-card button:hover {
  background: var(--muted);
}

.scope-check,
.install-plan-card li:after {
  color: var(--success);
}

.install-plan-card li:before {
  background: var(--success-bg);
}

.scope-x {
  border-color: var(--switch-background);
  color: var(--text-subtle);
}

.install-scope-card li:before {
  background: var(--success);
}

.install-scope-card ul.muted li:before {
  background: var(--switch-background);
}

.install-rating .stars,
.review-stars {
  color: var(--warning-fg);
}

th {
  background: var(--surface-subtle);
  color: var(--muted-foreground);
}

th,
td {
  border-color: var(--border);
}

.markdown pre {
  background: var(--foreground);
  color: var(--border);
  font-family: var(--font-mono);
}

@media (max-width: 640px) {
  .container { padding-inline: 16px; }
}

/* Source React frontend parity */
.site-header {
  background: var(--card);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
}

.nav-wrap {
  height: 56px;
  gap: 16px;
}

.brand {
  gap: 10px;
  margin-right: 8px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0;
}

.brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 14px;
  box-shadow: none;
  font-size: 0;
}

.main-nav {
  gap: 4px;
}

.main-nav a {
  padding: 6px 12px;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-normal);
}

.main-nav a.active {
  background: var(--secondary);
  color: var(--secondary-foreground);
  font-weight: var(--font-weight-medium);
}

.nav-search {
  min-width: 220px;
  padding: 6px 12px;
  border-radius: var(--radius-lg);
  background: var(--surface-subtle);
  color: var(--text-subtle);
}

.nav-search input {
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.primary-btn,
.ghost-btn,
.ghost-dark {
  min-height: 34px;
  padding: 0 12px;
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
}

.primary-btn.small {
  min-height: 32px;
  padding: 0 12px;
}

.ghost-btn {
  border: 0;
  background: transparent;
  color: var(--text-secondary);
}

.hero-inner {
  min-height: 0;
}

.hero-copy,
.install-hero .container {
  padding-top: 56px;
  padding-bottom: 80px;
}

.page-hero {
  padding: 56px 0;
}

.page-hero.compact,
.skills-top .container {
  padding-top: 24px;
  padding-bottom: 24px;
}

.hero h1,
.page-hero h1,
.install-hero h1 {
  font-size: clamp(40px, 4.4vw, 56px);
  line-height: 1.08;
  letter-spacing: -.5px;
  font-weight: 700;
}

.skills-title-row h1,
.install-section-head h2,
.center-head h2 {
  font-size: var(--text-2xl);
  line-height: 1.5;
  font-weight: 700;
}

.section {
  padding: 48px 0;
}

.skill-grid.directory-grid {
  gap: 16px;
}

.skill-card {
  min-height: 0;
  gap: 0;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--card);
  box-shadow: none;
}

.skill-card:hover {
  border-color: var(--indigo-border);
  box-shadow: var(--shadow-sm);
}

.skill-card-head {
  margin-bottom: 12px;
}

.skill-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-lg);
  background: var(--secondary);
  border: 1px solid var(--indigo-border);
  color: var(--secondary-foreground);
  box-shadow: none;
}

.skill-avatar:after {
  display: none;
}

.skill-avatar.large {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-xl);
}

.skill-initial {
  color: var(--secondary-foreground);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1;
}

.skill-avatar.large .skill-initial {
  font-size: var(--text-xl);
}

.skill-title-row {
  margin-bottom: 4px;
}

.skill-title {
  color: var(--text-strong);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.4;
}

.skill-title:hover {
  color: var(--primary);
}

.skill-card p {
  margin-bottom: 12px;
  color: var(--muted-foreground);
  font-size: var(--text-xs);
  line-height: 1.65;
}

.tag-row {
  gap: 6px;
  margin: 0 0 12px;
}

.pill,
.tag {
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: 11px;
}

.pill.category {
  background: #EFF6FF;
  border-color: #BFDBFE;
  color: #1D4ED8;
}

.skill-card .pill.category,
.detail-tags .pill.category {
  background: #EFF6FF;
  border: 1px solid #BFDBFE;
  color: #1D4ED8;
}

.skill-card .tag,
.detail-tags .tag {
  border: 1px solid transparent;
  font-weight: 700;
}

.skill-card .tag.热门,
.detail-tags .tag.热门 {
  background: #FFF7ED;
  border-color: #FED7AA;
  color: #C2410C;
}

.skill-card .tag.推荐,
.detail-tags .tag.推荐 {
  background: #EEF2FF;
  border-color: #C7D2FE;
  color: #4338CA;
}

.skill-card .tag.可协助安装,
.detail-tags .tag.可协助安装 {
  background: #E0F2FE;
  border-color: #BAE6FD;
  color: #0369A1;
}

.skill-card .tag.新收录,
.detail-tags .tag.新收录 {
  background: #ECFDF5;
  border-color: #A7F3D0;
  color: #047857;
}

.meta-row {
  gap: 12px;
  margin-bottom: 16px;
  color: var(--text-subtle);
  font-size: var(--text-xs);
}

.skill-card .card-link {
  padding: 8px 10px;
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
}

.skill-card-list {
  padding: 16px;
  gap: 16px;
}

.skill-card-list .skill-card-head {
  margin: 0;
}

.skill-card-list .skill-body {
  min-width: 0;
}

.skill-card-list .skill-title-row {
  margin-bottom: 4px;
}

.category-rail {
  gap: 8px;
  margin-bottom: 20px;
  padding-bottom: 8px;
}

.category-rail a {
  padding: 8px 14px;
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
}

.result-toolbar {
  margin-bottom: 16px;
}

.result-stats {
  margin-top: 32px;
  padding: 16px;
  border-radius: var(--radius-xl);
}

.install-section {
  padding: 56px 0;
}

.install-plan-card {
  padding: 24px;
  border-radius: calc(var(--radius-xl) + 2px);
  box-shadow: none;
}

.install-plan-card.is-recommended {
  box-shadow: 0 10px 25px rgba(79, 70, 229, .14);
}

.install-plan-card button {
  min-height: 44px;
  padding: 0 16px;
}

.install-scope-card,
.install-review-card {
  padding: 24px;
  border-radius: calc(var(--radius-xl) + 2px);
}

.install-review-card {
  background: var(--surface-subtle);
}

@media (max-width: 640px) {
  .nav-wrap {
    height: 56px;
  }

  .skills-search {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    gap: 8px;
    max-width: 100%;
  }

  .skills-search .search-box {
    width: auto;
    min-width: 0;
  }

  .skills-search button {
    width: 100%;
    white-space: nowrap;
  }

  .hero-copy,
  .install-hero .container {
    padding-top: 48px;
    padding-bottom: 56px;
  }

  .hero h1,
  .page-hero h1,
  .install-hero h1 {
    font-size: 36px;
  }
}

/* Skill detail page parity with source frontend */
.skill-detail-page {
  min-height: 100vh;
  background: var(--background);
}

.skill-detail-header {
  background: var(--card);
  border-bottom: 1px solid var(--border);
}

.skill-detail-header .container {
  padding-top: 24px;
  padding-bottom: 24px;
}

.detail-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 16px;
  color: var(--text-subtle);
  font-size: var(--text-sm);
}

.detail-breadcrumb a {
  color: var(--text-subtle);
}

.detail-breadcrumb a:hover {
  color: var(--primary);
}

.detail-breadcrumb span:last-child {
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-secondary);
}

.detail-breadcrumb .chevron {
  width: 8px;
  height: 8px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: .8;
}

.detail-heading-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.detail-title-wrap {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  min-width: 0;
  flex: 1;
}

.detail-avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-xl);
  flex: 0 0 auto;
}

.detail-avatar .skill-initial {
  font-size: var(--text-lg);
}

.detail-title-wrap h1 {
  margin: 0 0 4px;
  color: var(--foreground);
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: 1.35;
}

.detail-title-wrap p {
  max-width: 620px;
  margin: 0;
  color: var(--muted-foreground);
  font-size: var(--text-sm);
  line-height: 1.6;
}

.detail-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}

.detail-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.detail-action-btn {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 16px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
}

.detail-action-btn svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
}

.detail-action-btn .external {
  width: 12px;
  height: 12px;
  color: var(--text-subtle);
}

.detail-action-muted {
  background: var(--card);
  color: var(--text-secondary);
}

.detail-action-muted:hover {
  border-color: var(--indigo-border);
  color: var(--primary);
}

.detail-action-primary {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-foreground);
  font-weight: 600;
}

.detail-action-primary:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
  transform: translateY(-1px);
}

.detail-stats-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.detail-stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

.detail-stat b {
  color: var(--text-strong);
  font-weight: 700;
}

.detail-stat small {
  color: var(--text-subtle);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
}

.detail-stat.text {
  font-family: var(--font-sans);
}

.detail-stat.amber,
.detail-stat.amber b {
  color: var(--warning-fg);
}

.stat-icon {
  color: var(--text-subtle);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
}

.detail-stat.amber .stat-icon {
  color: #F59E0B;
}

.skill-detail-body {
  padding: 32px 0;
}

.detail-content-grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(240px, 1fr);
  gap: 32px;
  align-items: start;
}

.detail-article {
  min-width: 0;
}

.detail-readme-card,
.detail-faq-card {
  max-width: 820px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 32px;
}

.readme-section + .readme-section {
  margin-top: 32px;
}

.readme-section h2,
.detail-related h2,
.detail-faq-card h2 {
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  color: var(--text-strong);
  font-size: var(--text-lg);
  font-weight: 700;
}

.readme-section p {
  margin: 8px 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: 1.75;
}

.detail-list {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.detail-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: 1.65;
}

.detail-list li:before {
  content: "";
  width: 6px;
  height: 6px;
  margin-top: 9px;
  border-radius: 999px;
  background: var(--primary);
  opacity: .8;
  flex: 0 0 auto;
}

.detail-list strong {
  color: var(--text-strong);
  font-weight: 600;
}

.detail-list span {
  color: var(--text-secondary);
}

.code-block {
  position: relative;
  margin: 12px 0;
}

.code-block pre {
  margin: 0;
  overflow-x: auto;
  border-radius: var(--radius-xl);
  background: var(--foreground);
  color: var(--border);
  padding: 16px;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 1.7;
}

.code-block button {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-md);
  background: #334155;
  color: #CBD5E1;
  opacity: 0;
}

.code-block:hover button {
  opacity: 1;
}

.code-block button:hover {
  background: #475569;
}

.code-block button svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.detail-table-wrap {
  overflow-x: auto;
  margin-top: 16px;
}

.detail-table {
  width: 100%;
  min-width: 560px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
}

.detail-table th,
.detail-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}

.detail-table tr:last-child td {
  border-bottom: 0;
}

.detail-table th {
  background: var(--surface-subtle);
  color: var(--text-secondary);
  font-weight: 600;
  text-align: left;
}

.detail-table td {
  color: var(--text-secondary);
}

.detail-table td:first-child,
.detail-table td:nth-child(2) {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.detail-related {
  max-width: 820px;
  margin-top: 32px;
}

.detail-related-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.detail-faq-card {
  margin-top: 32px;
}

.detail-faq-list {
  display: grid;
  gap: 16px;
}

.detail-faq-list > div {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-subtle);
}

.detail-faq-list h3 {
  margin: 0 0 6px;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: 600;
}

.detail-faq-list p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: var(--text-sm);
  line-height: 1.7;
}

.detail-sidebar {
  min-width: 0;
}

.detail-sidebar-card {
  position: sticky;
  top: 80px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 16px;
}

.detail-sidebar-card > h3 {
  margin: 0 0 12px;
  color: var(--muted-foreground);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.detail-toc {
  display: grid;
  gap: 4px;
}

.detail-toc a {
  display: block;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  color: var(--muted-foreground);
  font-size: var(--text-sm);
}

.detail-toc a:hover,
.detail-toc a.active {
  background: var(--secondary);
  color: var(--secondary-foreground);
  font-weight: var(--font-weight-medium);
}

.detail-install-panel {
  margin-top: 16px;
  padding: 12px;
  border: 1px solid var(--indigo-border);
  border-radius: var(--radius-lg);
  background: var(--secondary);
}

.detail-install-panel strong {
  display: block;
  margin-bottom: 4px;
  color: var(--secondary-foreground);
  font-size: var(--text-xs);
}

.detail-install-panel p {
  margin: 0 0 12px;
  color: var(--primary);
  font-size: var(--text-xs);
  line-height: 1.6;
}

.install-primary-mini,
.install-secondary-mini {
  width: 100%;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: var(--radius-lg);
  font-size: var(--text-xs);
  font-weight: 600;
}

.install-primary-mini {
  background: var(--primary);
  color: var(--primary-foreground);
}

.install-primary-mini:hover {
  background: var(--primary-hover);
}

.install-secondary-mini {
  margin-top: 8px;
  border: 1px solid var(--indigo-border);
  color: var(--secondary-foreground);
  background: var(--card);
}

.install-secondary-mini:hover {
  background: var(--secondary);
}

.detail-meta-list {
  display: grid;
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.detail-meta-list div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: var(--text-xs);
}

.detail-meta-list span {
  color: var(--muted-foreground);
}

.detail-meta-list b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-weight: 500;
}

@media (max-width: 980px) {
  .detail-content-grid {
    grid-template-columns: 1fr;
  }

  .detail-sidebar-card {
    position: static;
  }

  .detail-related-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .skill-detail-header .container {
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .detail-title-wrap {
    flex-direction: column;
  }

  .detail-actions,
  .detail-action-btn {
    width: 100%;
  }

  .detail-stats-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 14px;
  }

  .detail-stat {
    min-width: 0;
  }

  .detail-stat small,
  .detail-stat b {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .skill-detail-body {
    padding: 24px 0;
  }

  .detail-readme-card,
  .detail-faq-card {
    padding: 20px;
  }

  .detail-related-grid {
    grid-template-columns: 1fr;
  }
}

/* Auth pages parity with source frontend */
.auth-page-refined {
  min-height: 100vh;
  align-items: center;
  padding: 48px 16px;
  background: var(--background);
  overflow-x: hidden;
}

.auth-shell {
  width: min(448px, calc(100vw - 32px));
  max-width: 448px;
  min-width: 0;
}

.auth-head {
  margin-bottom: 32px;
  text-align: center;
}

.auth-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  color: var(--foreground);
  font-size: var(--text-lg);
  font-weight: 700;
  text-align: left;
}

.auth-logo .brand-mark {
  width: 48px;
  height: 48px;
  border-radius: 16px;
}

.auth-logo .brand-copy b {
  font-size: 18px;
}

.auth-logo .brand-copy small {
  font-size: 12px;
}

.auth-head h1 {
  margin: 0 0 4px;
  color: var(--foreground);
  font-size: var(--text-2xl);
  font-weight: 700;
}

.auth-head p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: var(--text-sm);
}

.auth-card-refined {
  width: 100%;
  min-width: 0;
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius-xl) + 2px);
  background: var(--card);
  box-shadow: var(--shadow-sm);
  text-align: left;
}

.auth-tabs {
  display: flex;
  gap: 2px;
  margin-bottom: 24px;
  padding: 2px;
  border-radius: var(--radius-lg);
  background: #F1F5F9;
}

.auth-tabs button {
  flex: 1;
  min-height: 34px;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--muted-foreground);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  transition: color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.auth-tabs button:hover {
  color: var(--text-secondary);
}

.auth-tabs button.active {
  background: #FFFFFF;
  color: var(--text-strong);
  box-shadow: var(--shadow-sm);
}

.auth-form {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.auth-panel {
  display: none;
  gap: 16px;
}

.auth-panel.active {
  display: grid;
}

.auth-field {
  display: grid;
  gap: 6px;
  min-width: 0;
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
}

.auth-field b {
  color: var(--destructive);
}

.auth-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.auth-label-row a {
  color: var(--primary);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-normal);
}

.auth-input-wrap {
  position: relative;
  display: block;
  min-width: 0;
}

.auth-input-wrap > svg {
  position: absolute;
  left: 12px;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  color: var(--text-subtle);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.auth-input-wrap input,
.auth-code-row input {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
  color: var(--foreground);
  outline: 0;
  padding: 10px 12px;
  font-size: var(--text-sm);
  line-height: 1.5;
}

.auth-input-wrap input {
  padding-left: 36px;
}

.auth-input-wrap input:has(+ .auth-eye),
.auth-input-wrap input[data-password-input] {
  padding-right: 40px;
}

.auth-input-wrap input:focus,
.auth-code-row input:focus {
  border-color: var(--focus-border);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.auth-input-wrap input::placeholder,
.auth-code-row input::placeholder {
  color: var(--text-subtle);
}

.auth-eye {
  position: absolute;
  right: 10px;
  top: 50%;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: var(--text-subtle);
  border-radius: var(--radius-sm);
}

.auth-eye:hover {
  color: var(--text-secondary);
  background: var(--input-background);
}

.auth-eye svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.auth-eye .eye-off,
.auth-eye.is-visible .eye-on {
  display: none;
}

.auth-eye.is-visible .eye-off {
  display: block;
}

.auth-code-row {
  display: flex;
  gap: 8px;
  min-width: 0;
}

.auth-code-row input {
  flex: 1;
  min-width: 0;
}

.auth-code-btn {
  min-height: 42px;
  flex: 0 0 auto;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
  color: var(--primary);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}

.auth-code-btn:hover {
  border-color: var(--indigo-border);
  background: var(--secondary);
}

.auth-code-btn:disabled {
  cursor: not-allowed;
  opacity: .55;
}

.password-rules {
  display: none;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: -6px;
}

.password-rules.has-value {
  display: flex;
}

.password-rules span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-subtle);
  font-size: 11px;
}

.password-rules span:before {
  content: "";
  width: 12px;
  height: 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
}

.password-rules span.ok {
  color: var(--success);
}

.password-rules span.ok:before {
  border-color: var(--success-bg);
  background: var(--success-bg);
  box-shadow: inset 0 0 0 3px var(--card);
}

.auth-agree {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  cursor: pointer;
}

.auth-agree input {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: var(--primary);
  flex: 0 0 auto;
}

.auth-agree span {
  min-width: 0;
  color: var(--muted-foreground);
  font-size: var(--text-xs);
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.auth-agree a {
  color: var(--primary);
}

.auth-submit {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
  border: 0;
  border-radius: var(--radius-xl);
  background: var(--primary);
  color: var(--primary-foreground);
  font-size: var(--text-sm);
  font-weight: 600;
}

.auth-submit:hover {
  background: var(--primary-hover);
}

.auth-submit svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
}

.auth-divider span {
  height: 1px;
  flex: 1;
  background: var(--border);
}

.auth-divider em {
  color: var(--text-subtle);
  font-size: var(--text-xs);
  font-style: normal;
}

.auth-oauth-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.auth-oauth-grid button {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--card);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-normal);
}

.auth-oauth-grid button:hover {
  border-color: #CBD5E1;
  background: var(--surface-subtle);
}

.auth-oauth-grid svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.auth-oauth-grid .wechat {
  color: #16A34A;
}

.auth-bottom-text {
  margin: 24px 0 0;
  text-align: center;
  color: var(--muted-foreground);
  font-size: var(--text-sm);
}

.auth-bottom-text a {
  margin-left: 4px;
  color: var(--primary);
  font-weight: var(--font-weight-medium);
}

@media (max-width: 640px) {
  .auth-page-refined {
    padding-top: 32px;
    padding-bottom: 32px;
    align-items: flex-start;
  }

  .auth-card-refined {
    padding: 22px;
  }

  .auth-code-row,
  .auth-oauth-grid {
    grid-template-columns: 1fr;
  }

  .auth-code-row {
    display: grid;
  }

  .auth-code-btn,
  .auth-oauth-grid button {
    width: 100%;
  }
}

/* Admin console and secondary page polish */
.admin-console {
  min-height: calc(100vh - 58px);
  background: var(--background);
  padding: 28px 0 56px;
}

.admin-container {
  display: grid;
  gap: 20px;
}

.admin-topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--card);
  box-shadow: var(--shadow-sm);
}

.admin-kicker {
  display: inline-flex;
  margin-bottom: 8px;
  color: var(--primary);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.admin-topbar h1 {
  margin: 0 0 6px;
  color: var(--foreground);
  font-size: 28px;
  line-height: 1.2;
}

.admin-topbar p {
  max-width: 620px;
  margin: 0;
  color: var(--muted-foreground);
  font-size: var(--text-sm);
  line-height: 1.65;
}

.admin-top-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.admin-primary,
.admin-ghost,
.admin-row-action,
.admin-inline-form button {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  padding: 0 14px;
  border: 1px solid var(--border);
  font-size: var(--text-sm);
  font-weight: 600;
  transition: .18s ease;
}

.admin-primary,
.admin-inline-form button {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--primary-foreground);
}

.admin-primary:hover,
.admin-inline-form button:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
}

.admin-ghost,
.admin-row-action {
  background: var(--card);
  color: var(--text-secondary);
}

.admin-ghost:hover,
.admin-row-action:hover {
  border-color: var(--indigo-border);
  background: var(--secondary);
  color: var(--secondary-foreground);
}

.admin-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--card);
  scrollbar-width: none;
}

.admin-tabs::-webkit-scrollbar {
  display: none;
}

.admin-tabs a {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  padding: 0 14px;
  border-radius: var(--radius-lg);
  color: var(--muted-foreground);
  font-size: var(--text-sm);
  font-weight: 600;
}

.admin-tabs a span {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--surface-subtle);
  color: var(--text-subtle);
  font-size: 12px;
}

.admin-tabs a:hover {
  color: var(--primary);
  background: var(--surface-subtle);
}

.admin-tabs a.active {
  background: var(--secondary);
  color: var(--secondary-foreground);
}

.admin-tabs a.active span {
  background: var(--card);
  color: var(--primary);
}

.admin-metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.admin-metric-card {
  position: relative;
  min-height: 132px;
  display: grid;
  align-content: space-between;
  padding: 20px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--card);
  box-shadow: var(--shadow-sm);
}

.admin-metric-card:after {
  content: "";
  position: absolute;
  right: -22px;
  bottom: -28px;
  width: 86px;
  height: 86px;
  border-radius: 999px;
  background: var(--secondary);
  opacity: .78;
}

.admin-metric-card span,
.admin-metric-card em,
.admin-metric-card b {
  position: relative;
  z-index: 1;
}

.admin-metric-card span {
  color: var(--muted-foreground);
  font-size: var(--text-sm);
}

.admin-metric-card b {
  color: var(--foreground);
  font-family: var(--font-mono);
  font-size: 32px;
  line-height: 1;
}

.admin-metric-card em {
  color: var(--text-subtle);
  font-size: var(--text-xs);
  font-style: normal;
}

.admin-metric-card.is-blue:after { background: var(--info-bg); }
.admin-metric-card.is-green:after { background: var(--success-bg); }
.admin-metric-card.is-amber:after { background: var(--warning-bg); }

.admin-overview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.admin-card {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--card);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.admin-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
}

.admin-card-head h2 {
  margin: 0 0 4px;
  color: var(--text-strong);
  font-size: var(--text-lg);
  line-height: 1.3;
}

.admin-card-head p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: var(--text-sm);
}

.admin-card-head a {
  flex: 0 0 auto;
  color: var(--primary);
  font-size: var(--text-sm);
  font-weight: 600;
}

.admin-list {
  display: grid;
}

.admin-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
}

.admin-list-row:last-child {
  border-bottom: 0;
}

.admin-list-row div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.admin-list-row b,
.admin-table b {
  color: var(--text-strong);
  font-weight: 600;
}

.admin-list-row span,
.admin-table small {
  display: block;
  color: var(--muted-foreground);
  font-size: var(--text-xs);
  line-height: 1.55;
}

.admin-list-row strong {
  color: var(--text-strong);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

.admin-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.admin-table {
  width: 100%;
  min-width: 880px;
  border-collapse: separate;
  border-spacing: 0;
}

.admin-table th {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-subtle);
  color: var(--muted-foreground);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .04em;
  text-align: left;
  text-transform: uppercase;
}

.admin-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  vertical-align: middle;
}

.admin-table tr:last-child td {
  border-bottom: 0;
}

.admin-table td p {
  max-width: 420px;
  margin: 6px 0 0;
  color: var(--muted-foreground);
  font-size: var(--text-xs);
  line-height: 1.6;
}

.admin-table .num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.admin-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 4px 9px;
  background: var(--surface-subtle);
  color: var(--muted-foreground);
  font-size: var(--text-xs);
  font-weight: 700;
  white-space: nowrap;
}

.admin-status:before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
}

.admin-status.is-success { background: var(--success-bg); color: var(--success-fg); }
.admin-status.is-info { background: var(--info-bg); color: var(--info-fg); }
.admin-status.is-purple { background: var(--violet-bg); color: var(--violet-fg); }
.admin-status.is-warning { background: var(--warning-bg); color: var(--warning-fg); }
.admin-status.is-danger { background: var(--danger-bg); color: var(--danger-fg); }

.admin-form-card {
  padding-bottom: 20px;
}

.admin-form-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  padding: 20px;
}

.admin-form-grid label {
  display: grid;
  gap: 7px;
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: 600;
}

.admin-form-grid .span-all {
  grid-column: 1 / -1;
}

.admin-form-grid .check {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  white-space: nowrap;
}

.admin-form-grid .check + .check {
  margin-left: -8px;
}

.admin-form-grid input,
.admin-form-grid textarea,
.admin-form-grid select,
.admin-inline-form input,
.admin-inline-form select {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
  color: var(--foreground);
  outline: 0;
  padding: 9px 11px;
  font-size: var(--text-sm);
}

.admin-form-grid textarea {
  min-height: 92px;
  resize: vertical;
}

.admin-form-grid input:focus,
.admin-form-grid textarea:focus,
.admin-form-grid select:focus,
.admin-inline-form input:focus,
.admin-inline-form select:focus {
  border-color: var(--focus-border);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.admin-inline-form {
  display: grid;
  grid-template-columns: minmax(112px, 1fr) minmax(96px, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.admin-inline-form.stack {
  grid-template-columns: 1fr;
  margin-bottom: 8px;
}

.admin-inline-form button.danger {
  border-color: var(--destructive);
  background: var(--destructive);
}

.admin-partner-table {
  min-width: 980px;
}

.profile-layout {
  gap: 24px;
}

.profile-side .panel,
.profile-main .panel {
  border-color: var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

.profile-card {
  padding: 24px;
}

.profile-card h2 {
  margin-bottom: 4px;
  color: var(--text-strong);
}

.profile-card p {
  color: var(--muted-foreground);
  font-size: var(--text-sm);
}

.profile-page-refined {
  min-height: calc(100vh - 58px);
  padding: 32px 0 56px;
  background: #f8fafc;
}

.profile-shell-refined {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 24px;
}

.profile-sidebar-refined {
  display: grid;
  align-content: start;
  gap: 16px;
}

.profile-user-card,
.profile-tabs-card,
.profile-panel-refined,
.profile-submit-card,
.profile-token-hero {
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

.profile-user-card {
  padding: 20px;
  text-align: center;
}

.profile-avatar-wrap {
  position: relative;
  width: 72px;
  margin: 0 auto 12px;
}

.profile-avatar-xl {
  width: 72px;
  height: 72px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 18px;
  background: #e0e7ff;
  color: #4338ca;
  font-size: 28px;
  font-weight: 900;
}

.profile-avatar-xl img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-camera-btn,
.profile-avatar-upload i {
  width: 28px;
  height: 28px;
  position: absolute;
  right: -4px;
  bottom: -4px;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(15, 23, 42, .12);
}

.profile-camera-btn:before,
.profile-avatar-upload i:before {
  content: "";
  width: 13px;
  height: 9px;
  position: absolute;
  left: 7px;
  top: 10px;
  border: 1.7px solid #64748b;
  border-radius: 3px;
}

.profile-camera-btn:after,
.profile-avatar-upload i:after {
  content: "";
  width: 4px;
  height: 4px;
  position: absolute;
  left: 12px;
  top: 12px;
  border-radius: 999px;
  background: #64748b;
}

.profile-user-card h2 {
  margin: 0 0 4px;
  color: #0f172a;
  font-size: 18px;
  font-weight: 800;
}

.profile-user-card p {
  margin: 0;
  color: #94a3b8;
  font-size: 12px;
}

.profile-role-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  margin-top: 10px;
  padding: 0 10px;
  border: 1px solid #c7d2fe;
  border-radius: 999px;
  background: #eef2ff;
  color: #4338ca;
  font-size: 12px;
  font-weight: 800;
}

.profile-mini-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #e2e8f0;
}

.profile-mini-stats b {
  display: block;
  color: #0f172a;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 15px;
}

.profile-mini-stats span {
  color: #94a3b8;
  font-size: 11px;
}

.profile-tabs-card {
  overflow: hidden;
}

.profile-tabs-card a {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  border-bottom: 1px solid #e2e8f0;
  color: #475569;
  font-size: 14px;
  font-weight: 800;
}

.profile-tabs-card a:last-child {
  border-bottom: 0;
}

.profile-tabs-card a.active,
.profile-tabs-card a:hover {
  background: #eef2ff;
  color: #4338ca;
}

.profile-tabs-card a:after {
  content: "";
  width: 7px;
  height: 7px;
  margin-left: auto;
  border-top: 1.7px solid currentColor;
  border-right: 1.7px solid currentColor;
  opacity: .35;
  transform: rotate(45deg);
}

.profile-tabs-card em {
  min-width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  border-radius: 999px;
  background: #ffedd5;
  color: #c2410c;
  font-size: 11px;
  font-style: normal;
}

.profile-svg-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex: 0 0 auto;
  color: currentColor;
}

.profile-svg-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.profile-tabs-card .profile-svg-icon {
  color: #94a3b8;
}

.profile-tabs-card a.active .profile-svg-icon,
.profile-tabs-card a:hover .profile-svg-icon {
  color: #4f46e5;
}

.profile-section-title .profile-svg-icon {
  color: #4f46e5;
}

.profile-submit-card .profile-svg-icon {
  width: 34px;
  height: 34px;
  padding: 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .16);
  color: #fff;
}

.profile-submit-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: #4f46e5;
  color: #fff;
}

.profile-submit-card small {
  display: block;
  margin-top: 3px;
  color: #c7d2fe;
  font-size: 12px;
}

.profile-content-refined {
  display: grid;
  align-content: start;
  gap: 20px;
}

.profile-panel-refined {
  padding: 20px;
}

.profile-panel-refined.no-padding {
  padding: 0;
  overflow: hidden;
}

.profile-section-title,
.profile-panel-head,
.profile-panel-bar {
  display: flex;
  align-items: center;
  gap: 8px;
}

.profile-section-title h3,
.profile-panel-bar h3,
.profile-edit-head h3,
.profile-list-title {
  margin: 0;
  color: #0f172a;
  font-size: 15px;
  font-weight: 800;
}

.profile-panel-head,
.profile-panel-bar,
.profile-edit-head {
  justify-content: space-between;
}

.profile-panel-bar {
  min-height: 56px;
  padding: 0 20px;
  border-bottom: 1px solid #e2e8f0;
}

.profile-panel-head {
  margin-bottom: 14px;
}

.profile-panel-head a,
.profile-panel-bar a {
  color: #4f46e5;
  font-size: 12px;
  font-weight: 800;
}

.profile-active-order {
  display: grid;
  gap: 12px;
  margin-top: 14px;
  padding: 16px;
  border: 1px solid #bfdbfe;
  border-radius: 12px;
  background: #eff6ff;
}

.profile-active-order > div:first-child {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.profile-active-order h4,
.profile-order-list h4,
.profile-submitted-list h4 {
  margin: 0;
  color: #0f172a;
  font-size: 14px;
  font-weight: 800;
}

.profile-active-order p,
.profile-order-list p,
.profile-submitted-list p {
  width: 100%;
  margin: 0;
  color: #64748b;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
}

.profile-order-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.profile-order-actions button,
.profile-edit-toggle,
.profile-cancel-edit,
.profile-save-edit,
.center-token-card a,
.center-token-card button {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  color: #475569;
  font-size: 12px;
  font-weight: 800;
}

.profile-order-actions .complete,
.profile-save-edit,
.center-token-card a {
  border-color: #059669;
  background: #059669;
  color: #fff;
}

.profile-skill-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.profile-skill-chip-row span {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  border: 1px solid #bfdbfe;
  border-radius: 6px;
  background: #fff;
  color: #1d4ed8;
  font-size: 12px;
}

.status-blue,
.profile-order-list em,
.profile-submitted-list em {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: #dbeafe;
  color: #1d4ed8;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.profile-submitted-list em.is-success,
.profile-order-list em.is-success { background: #dcfce7; color: #15803d; }
.profile-submitted-list em.is-warning,
.profile-order-list em.is-warning { background: #fef3c7; color: #b45309; }
.profile-submitted-list em.is-danger,
.profile-order-list em.is-danger { background: #fee2e2; color: #dc2626; }
.profile-submitted-list em.is-muted,
.profile-order-list em.is-muted { background: #f1f5f9; color: #64748b; }

.profile-metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.profile-metric-grid a {
  display: grid;
  gap: 6px;
  padding: 16px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
}

.profile-metric-grid a:hover {
  border-color: #c7d2fe;
}

.profile-metric-grid .profile-svg-icon {
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: #f8fafc;
  color: #64748b;
}

.profile-metric-grid a:nth-child(1) .profile-svg-icon {
  background: #eef2ff;
  color: #4f46e5;
}

.profile-metric-grid a:nth-child(2) .profile-svg-icon {
  background: #ecfeff;
  color: #0891b2;
}

.profile-metric-grid a:nth-child(3) .profile-svg-icon {
  background: #ecfdf5;
  color: #059669;
}

.profile-metric-grid a:nth-child(4) .profile-svg-icon {
  background: #fffbeb;
  color: #d97706;
}

.profile-metric-grid .profile-svg-icon svg {
  width: 17px;
  height: 17px;
}

.profile-metric-grid b {
  color: #0f172a;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 24px;
}

.profile-metric-grid span {
  color: #64748b;
  font-size: 12px;
}

.profile-bookmark-list,
.profile-submitted-list,
.profile-order-list,
.profile-token-records {
  display: grid;
}

.profile-bookmark-row,
.profile-submitted-list article,
.profile-order-list article,
.profile-token-records div {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #e2e8f0;
}

.profile-bookmark-row:last-child,
.profile-submitted-list article:last-child,
.profile-order-list article:last-child,
.profile-token-records div:last-child {
  border-bottom: 0;
}

.profile-bookmark-row:hover {
  background: #f8fafc;
}

.profile-skill-initial {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 9px;
  background: #eef2ff;
  color: #4338ca;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 900;
}

.profile-bookmark-row span:nth-child(2),
.profile-favorite-grid span:nth-child(2),
.profile-token-records span {
  min-width: 0;
  flex: 1;
}

.profile-bookmark-row b,
.profile-favorite-grid b,
.profile-token-records b {
  display: block;
  overflow: hidden;
  color: #334155;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-bookmark-row small,
.profile-favorite-grid small,
.profile-favorite-grid em,
.profile-token-records small {
  display: block;
  overflow: hidden;
  margin-top: 3px;
  color: #94a3b8;
  font-size: 12px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-bookmark-row > em,
.profile-retry-link {
  color: #4f46e5;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.profile-submitted-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

.profile-submitted-actions form {
  margin: 0;
}

.profile-submitted-actions button {
  min-height: 30px;
  border: 1px solid #fecaca;
  border-radius: 9px;
  background: #fff1f2;
  color: #be123c;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 800;
}

.partner-retry-notice {
  margin: 0 0 14px;
  border: 1px solid #fecaca;
  border-radius: 12px;
  background: #fff1f2;
  color: #9f1239;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.6;
}

.profile-empty-state {
  padding: 22px;
  color: #94a3b8;
  font-size: 14px;
  text-align: center;
}

.profile-edit-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e2e8f0;
}

.profile-edit-actions {
  display: flex;
  gap: 8px;
}

.profile-avatar-edit-row {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid #e2e8f0;
}

.profile-avatar-upload {
  position: relative;
  cursor: pointer;
}

.profile-avatar-upload input {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.profile-editing .profile-avatar-upload input {
  pointer-events: auto;
}

.profile-avatar-edit-row b {
  display: block;
  color: #0f172a;
  font-size: 15px;
}

.profile-avatar-edit-row p,
.profile-avatar-edit-row small {
  display: block;
  margin: 4px 0 0;
  color: #94a3b8;
  font-size: 12px;
}

.profile-field-list {
  display: grid;
  gap: 16px;
}

.profile-field-list label {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  align-items: start;
  gap: 16px;
  margin: 0;
}

.profile-field-list label > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-top: 10px;
  color: #64748b;
  font-size: 14px;
}

.profile-field-list .profile-svg-icon {
  width: 16px;
  height: 16px;
  color: #94a3b8;
}

.profile-field-list input,
.profile-field-list textarea {
  width: 100%;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #334155;
  font-size: 14px;
  outline: 0;
}

.profile-field-list input {
  min-height: 40px;
  padding: 0 11px;
}

.profile-field-list textarea {
  min-height: 86px;
  padding: 10px 11px;
  resize: vertical;
}

.profile-editing .profile-field-list input,
.profile-editing .profile-field-list textarea {
  border-color: #e2e8f0;
  background: #fff;
}

.profile-field-list input:focus,
.profile-field-list textarea:focus {
  border-color: #818cf8;
  box-shadow: 0 0 0 3px #e0e7ff;
}

.profile-security-block {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid #e2e8f0;
}

.profile-security-block h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  color: #334155;
  font-size: 14px;
}

.profile-security-block h4 .profile-svg-icon {
  width: 18px;
  height: 18px;
  color: #4f46e5;
}

.profile-security-block > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid #e2e8f0;
}

.profile-security-block > div:last-child {
  border-bottom: 0;
}

.profile-security-block b,
.profile-security-block small {
  display: block;
}

.profile-security-block b {
  color: #334155;
  font-size: 14px;
}

.profile-security-block small {
  margin-top: 3px;
  color: #94a3b8;
  font-size: 12px;
}

.profile-security-block button {
  border: 0;
  background: transparent;
  color: #4f46e5;
  font-size: 12px;
  font-weight: 800;
}

.profile-submitted-list article,
.profile-order-list article {
  align-items: flex-start;
  padding: 16px 20px;
}

.profile-submitted-list article > div,
.profile-order-list article > div:first-child {
  min-width: 0;
  flex: 1;
}

.profile-submitted-list a[target] {
  display: block;
  overflow: hidden;
  margin: 5px 0;
  color: #64748b;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-submitted-list h4 small {
  margin-left: 6px;
  padding: 2px 6px;
  border: 1px solid #c7d2fe;
  border-radius: 6px;
  color: #4338ca;
  font-size: 11px;
}

.profile-favorite-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: #e2e8f0;
}

.profile-favorite-grid > a {
  display: flex;
  gap: 12px;
  min-width: 0;
  padding: 16px;
  background: #fff;
}

.profile-favorite-grid > a:hover {
  background: #f8fafc;
}

.profile-order-top {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.profile-order-top > div:last-child {
  text-align: right;
}

.profile-order-top b {
  display: block;
  color: #0f172a;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 16px;
}

.profile-order-top small {
  color: #94a3b8;
  font-size: 12px;
}

.profile-token-hero {
  padding: 24px;
  background: linear-gradient(135deg, #4f46e5, #4338ca);
  color: #fff;
}

.profile-token-hero span,
.profile-token-hero p {
  display: block;
  margin: 0;
  color: #c7d2fe;
  font-size: 14px;
}

.profile-token-hero b {
  display: block;
  margin: 6px 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 42px;
  line-height: 1;
}

.profile-token-hero div,
.center-token-card div {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.profile-token-hero a,
.profile-token-hero button {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  padding: 0 16px;
  border: 0;
  border-radius: 8px;
  background: #fff;
  color: #4338ca;
  font-size: 14px;
  font-weight: 800;
}

.profile-token-hero button {
  background: rgba(255, 255, 255, .16);
  color: #fff;
}

.center-token-card {
  text-align: center;
}

.center-token-card > .profile-svg-icon {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  border: 1px solid #fde68a;
  border-radius: 16px;
  background: #fffbeb;
  color: #d97706;
}

.center-token-card > .profile-svg-icon svg {
  width: 24px;
  height: 24px;
}

.center-token-card h3 {
  margin-bottom: 6px;
}

.center-token-card p {
  max-width: 420px;
  margin: 0 auto;
  color: #64748b;
  font-size: 14px;
  line-height: 1.7;
}

.center-token-card div {
  justify-content: center;
}

.profile-token-records div {
  justify-content: space-between;
}

.profile-token-records em {
  color: #334155;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-style: normal;
  font-weight: 900;
}

.profile-token-records em.plus {
  color: #059669;
}

.side-nav {
  border-color: var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

.side-nav a {
  color: var(--muted-foreground);
}

.side-nav a.active {
  background: var(--secondary);
  color: var(--secondary-foreground);
}

.submit-skill {
  border-radius: var(--radius-xl);
  background: var(--primary);
  box-shadow: var(--shadow-primary);
}

.ranking-page .admin-card {
  overflow: hidden;
}

.simple-page-card {
  max-width: 760px;
  margin: 0 auto;
  padding: 44px 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--card);
  box-shadow: var(--shadow-sm);
}

@media (max-width: 980px) {
  .admin-metric-grid,
  .admin-overview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-topbar {
    flex-direction: column;
  }

  .admin-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .admin-console {
    padding-top: 18px;
  }

  .admin-topbar,
  .admin-card-head {
    padding: 18px;
  }

  .admin-topbar h1 {
    font-size: 24px;
  }

  .admin-top-actions,
  .admin-primary,
  .admin-ghost {
    width: 100%;
  }

  .admin-tabs {
    margin-inline: -4px;
  }

  .admin-metric-grid,
  .admin-overview-grid,
  .admin-form-grid {
    grid-template-columns: 1fr;
  }

  .admin-inline-form {
    grid-template-columns: 1fr;
  }
}

/* Admin shell parity with the source enterprise dashboard */
.minimal-layout {
  background: #f8fafc;
  min-height: 100vh;
  overflow-y: auto;
}

.minimal-layout > main {
  min-height: 100vh;
}

.minimal-layout .flash-stack {
  top: 18px;
  right: 24px;
  z-index: 1000;
}

.admin-app,
.admin-app * {
  box-sizing: border-box;
}

.admin-app {
  min-height: 100vh;
  display: flex;
  align-items: stretch;
  overflow: visible;
  background: #f8fafc;
  color: #0f172a;
  font-family: Inter, "Noto Sans SC", "Microsoft YaHei", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.admin-sidebar {
  width: 224px;
  flex: 0 0 224px;
  align-self: flex-start;
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: #0f172a;
  color: #e2e8f0;
}

.admin-logo {
  height: 65px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
  border-bottom: 1px solid rgba(148, 163, 184, .14);
  color: #fff;
  text-decoration: none;
}

.admin-logo-mark {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  overflow: visible;
  background: transparent;
  color: transparent;
  box-shadow: none;
  font-size: 0;
}

.admin-logo-mark img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.admin-logo b,
.admin-account b,
.admin-panel h2,
.admin-header h1,
.admin-stat-card b,
.admin-feed-row b,
.admin-data-table b {
  letter-spacing: 0;
}

.admin-logo b {
  display: block;
  font-size: 17px;
  line-height: 1.15;
  font-weight: 800;
}

.admin-logo small {
  display: block;
  margin-top: 2px;
  color: #94a3b8;
  font-size: 11px;
  line-height: 1.25;
  white-space: nowrap;
}

.admin-side-nav {
  flex: 1;
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 16px 12px;
}

.admin-side-nav a {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 12px;
  border-radius: 8px;
  color: #cbd5e1;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}

.admin-side-nav a:hover {
  background: rgba(255, 255, 255, .06);
  color: #fff;
}

.admin-side-nav a.active {
  background: #4f46e5;
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}

.admin-side-nav em {
  min-width: 20px;
  height: 20px;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.admin-nav-icon,
.admin-card-icon,
.admin-login-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.admin-nav-icon {
  width: 18px;
  height: 18px;
  color: currentColor;
}

.admin-nav-icon:before,
.admin-nav-icon:after,
.admin-card-icon:before,
.admin-card-icon:after,
.admin-login-icon:before,
.admin-login-icon:after,
.admin-search i:before,
.admin-refresh:before {
  content: "";
  position: absolute;
  display: block;
}

.admin-nav-icon.grid:before {
  width: 7px;
  height: 7px;
  left: 1px;
  top: 1px;
  border: 2px solid currentColor;
  border-radius: 3px;
  box-shadow: 9px 0 0 -2px currentColor, 0 9px 0 -2px currentColor, 9px 9px 0 -2px currentColor;
}

.admin-nav-icon.zap:before,
.admin-card-icon.zap:before {
  width: 9px;
  height: 15px;
  background: currentColor;
  clip-path: polygon(52% 0, 100% 0, 67% 42%, 100% 42%, 35% 100%, 51% 56%, 0 56%);
}

.admin-nav-icon.bag:before,
.admin-card-icon.bag:before {
  width: 14px;
  height: 11px;
  bottom: 1px;
  border: 2px solid currentColor;
  border-radius: 3px;
}

.admin-nav-icon.bag:after,
.admin-card-icon.bag:after {
  width: 7px;
  height: 5px;
  top: 1px;
  border: 2px solid currentColor;
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
}

.admin-nav-icon.users:before,
.admin-card-icon.users:before {
  width: 7px;
  height: 7px;
  top: 1px;
  border: 2px solid currentColor;
  border-radius: 999px;
  box-shadow: -6px 3px 0 -3px currentColor, 6px 3px 0 -3px currentColor;
}

.admin-nav-icon.users:after,
.admin-card-icon.users:after {
  width: 15px;
  height: 8px;
  bottom: 1px;
  border: 2px solid currentColor;
  border-radius: 10px 10px 4px 4px;
}

.admin-nav-icon.file:before,
.admin-card-icon.file:before {
  width: 13px;
  height: 16px;
  border: 2px solid currentColor;
  border-radius: 3px;
}

.admin-nav-icon.file:after,
.admin-card-icon.file:after {
  width: 6px;
  height: 2px;
  background: currentColor;
  box-shadow: 0 5px 0 currentColor;
}

.admin-account {
  min-height: 72px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-top: 1px solid rgba(148, 163, 184, .14);
}

.admin-account > span {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #334155;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}

.admin-account b {
  display: block;
  color: #fff;
  font-size: 13px;
  line-height: 1.2;
}

.admin-account small {
  display: block;
  max-width: 130px;
  overflow: hidden;
  color: #94a3b8;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-workspace {
  min-width: 0;
  min-height: 100vh;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: visible;
}

.admin-header {
  position: sticky;
  top: 0;
  z-index: 20;
  height: 65px;
  flex: 0 0 65px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 24px;
  border-bottom: 1px solid #e2e8f0;
  background: #fff;
}

.admin-header h1 {
  margin: 0;
  color: #0f172a;
  font-size: 20px;
  font-weight: 700;
}

.admin-header-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #64748b;
  font-size: 13px;
}

.admin-header-meta span {
  width: 1px;
  height: 18px;
  background: #e2e8f0;
}

.admin-header-meta small {
  font-size: 13px;
  white-space: nowrap;
}

.admin-refresh {
  width: 34px;
  height: 34px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  color: transparent;
}

.admin-refresh:before {
  width: 14px;
  height: 14px;
  border: 2px solid #64748b;
  border-left-color: transparent;
  border-radius: 999px;
}

.admin-refresh:after {
  content: "";
  position: absolute;
  right: 8px;
  top: 8px;
  border-left: 5px solid #64748b;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transform: rotate(-18deg);
}

.admin-scroll {
  display: grid;
  align-content: start;
  gap: 20px;
  overflow: visible;
  padding: 24px;
  background: #f8fafc;
}

.admin-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.admin-stat-card {
  min-height: 136px;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 20px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  color: #0f172a;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

.admin-stat-card:hover,
.admin-panel:hover {
  border-color: #cbd5e1;
}

.admin-card-icon {
  width: 40px;
  height: 40px;
  margin-bottom: 4px;
  border-radius: 10px;
  background: #eef2ff;
  color: #4f46e5;
}

.admin-card-icon.bag { background: #ecfeff; color: #0891b2; }
.admin-card-icon.users { background: #ecfdf5; color: #059669; }
.admin-card-icon.file { background: #fff7ed; color: #ea580c; }

.admin-card-icon.zap:before {
  width: 12px;
  height: 20px;
}

.admin-card-icon.bag:before {
  width: 16px;
  height: 13px;
  bottom: 9px;
}

.admin-card-icon.bag:after {
  top: 8px;
}

.admin-card-icon.users:before {
  top: 7px;
}

.admin-card-icon.users:after {
  bottom: 8px;
}

.admin-card-icon.file:before {
  width: 15px;
  height: 19px;
}

.admin-stat-card b {
  color: #0f172a;
  font-size: 30px;
  line-height: 1;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.admin-stat-card span {
  color: #475569;
  font-size: 14px;
}

.admin-stat-card small {
  color: #94a3b8;
  font-size: 12px;
}

.admin-two-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.admin-panel {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

.admin-table-panel {
  border-color: #dbe4f0;
  border-radius: 12px;
  box-shadow: none;
}

.admin-panel-head {
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 20px;
  border-bottom: 1px solid #e2e8f0;
}

.admin-panel-head h2 {
  margin: 0;
  color: #0f172a;
  font-size: 16px;
  font-weight: 700;
}

.admin-panel-head a {
  color: #4f46e5;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.admin-feed {
  display: grid;
}

.admin-feed-row {
  min-height: 72px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  border-bottom: 1px solid #f1f5f9;
}

.admin-feed-row:last-child {
  border-bottom: 0;
}

.admin-feed-row div {
  min-width: 0;
}

.admin-feed-row b,
.admin-data-table b {
  display: block;
  overflow: hidden;
  color: #0f172a;
  font-size: 14px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-feed-row span,
.admin-feed-row small,
.admin-data-table small {
  display: block;
  overflow: hidden;
  margin-top: 4px;
  color: #64748b;
  font-size: 12px;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-feed-row strong {
  color: #0f172a;
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
}

.admin-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #64748b;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  white-space: nowrap;
}

.admin-badge.is-success { background: #dcfce7; color: #15803d; }
.admin-badge.is-info { background: #dbeafe; color: #1d4ed8; }
.admin-badge.is-purple { background: #ede9fe; color: #6d28d9; }
.admin-badge.is-warning { background: #fef3c7; color: #b45309; }
.admin-badge.is-muted { background: #f1f5f9; color: #64748b; }
.admin-badge.is-danger { background: #fee2e2; color: #dc2626; }

.admin-toolbar {
  min-height: 56px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
}

.admin-search {
  min-width: 260px;
  height: 40px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
}

.admin-search i {
  position: relative;
  width: 16px;
  height: 16px;
  color: #94a3b8;
}

.admin-search i:before {
  width: 10px;
  height: 10px;
  left: 1px;
  top: 1px;
  border: 2px solid currentColor;
  border-radius: 999px;
}

.admin-search i:after {
  content: "";
  position: absolute;
  width: 7px;
  height: 2px;
  right: 0;
  bottom: 1px;
  border-radius: 999px;
  background: currentColor;
  transform: rotate(45deg);
}

.admin-search input,
.admin-toolbar select,
.admin-create-grid input,
.admin-create-grid select,
.admin-create-grid textarea,
.admin-row-form input,
.admin-row-form select,
.admin-review-form input {
  width: 100%;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  color: #0f172a;
  font: inherit;
  font-size: 14px;
  outline: 0;
}

.admin-search input {
  min-width: 0;
  border: 0;
  background: transparent;
}

.admin-toolbar select,
.admin-create-grid input,
.admin-create-grid select,
.admin-row-form input,
.admin-row-form select,
.admin-review-form input {
  min-height: 40px;
  padding: 0 11px;
}

.admin-create-grid textarea {
  min-height: 94px;
  padding: 10px 11px;
  resize: vertical;
}

.admin-search:focus-within,
.admin-toolbar select:focus,
.admin-create-grid input:focus,
.admin-create-grid select:focus,
.admin-create-grid textarea:focus,
.admin-row-form input:focus,
.admin-row-form select:focus,
.admin-review-form input:focus {
  border-color: #818cf8;
  box-shadow: 0 0 0 3px #e0e7ff;
}

.admin-filter {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: #fff;
  color: #475569;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease;
}

.admin-filter:hover {
  border-color: #c7d2fe;
  color: #4f46e5;
}

.admin-filter.active {
  border-color: #4f46e5;
  background: #4f46e5;
  color: #fff;
}

.admin-action,
.admin-mini-btn,
.admin-create-grid button,
.admin-row-form button,
.admin-review-form button {
  border: 0;
  border-radius: 8px;
  background: #4f46e5;
  color: #fff;
  font-weight: 800;
  text-decoration: none;
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}

.admin-action:hover,
.admin-mini-btn:hover,
.admin-create-grid button:hover,
.admin-row-form button:hover,
.admin-review-form button:hover {
  background: #4338ca;
  box-shadow: 0 10px 20px rgba(79, 70, 229, .16);
}

.admin-action:active,
.admin-mini-btn:active,
.admin-create-grid button:active,
.admin-row-form button:active,
.admin-review-form button:active {
  transform: translateY(1px);
}

.admin-action {
  min-height: 40px;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  font-size: 14px;
  white-space: nowrap;
}

.admin-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.admin-data-table {
  width: 100%;
  min-width: 860px;
  border-collapse: separate;
  border-spacing: 0;
  color: #334155;
  font-size: 13px;
}

.order-table {
  min-width: 1120px;
}

.partner-table {
  min-width: 1180px;
}

.admin-data-table th {
  height: 40px;
  padding: 0 16px;
  border-bottom: 1px solid #dbe4f0;
  background: #f8fafc;
  color: #526783;
  font-size: 12px;
  font-weight: 700;
  line-height: 40px;
  text-align: left;
  white-space: nowrap;
}

.admin-data-table thead th:first-child {
  border-top-left-radius: 12px;
}

.admin-data-table thead th:last-child {
  border-top-right-radius: 12px;
}

.admin-data-table td {
  min-height: 72px;
  padding: 14px 16px;
  border-bottom: 1px solid #dbe4f0;
  color: #0f172a;
  vertical-align: middle;
}

.admin-data-table tbody tr:hover td {
  background: #fbfdff;
}

.admin-data-table tr:last-child td {
  border-bottom: 0;
}

.admin-data-table tbody tr:last-child td:first-child {
  border-bottom-left-radius: 12px;
}

.admin-data-table tbody tr:last-child td:last-child {
  border-bottom-right-radius: 12px;
}

.admin-data-table p {
  max-width: 460px;
  margin: 8px 0 0;
  color: #64748b;
  font-size: 12px;
  line-height: 1.55;
}

.admin-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px 0;
  color: #64748b;
  font-size: 13px;
}

.admin-pagination > div,
.admin-page-numbers {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.admin-pagination button {
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  color: #475569;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, color .18s ease;
}

.admin-pagination button:hover:not(:disabled),
.admin-pagination button.active {
  border-color: #4f46e5;
  background: #4f46e5;
  color: #fff;
}

.admin-pagination button:disabled {
  cursor: not-allowed;
  opacity: .45;
}

.admin-category {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  padding: 0 9px;
  border-radius: 999px;
  background: #eef2ff;
  color: #4338ca;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.mono {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-variant-numeric: tabular-nums;
}

.star {
  color: #ca8a04;
  font-weight: 800;
}

.admin-create-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  padding: 20px;
}

.admin-create-grid label {
  display: grid;
  gap: 7px;
  margin: 0;
  color: #475569;
  font-size: 13px;
  font-weight: 700;
}

.admin-create-grid .span-all {
  grid-column: 1 / -1;
}

.switch-row {
  display: flex !important;
  grid-auto-flow: column;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 8px !important;
  min-height: 40px;
  padding-top: 22px;
}

.switch-row input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.switch-row span {
  width: 36px;
  height: 20px;
  position: relative;
  display: inline-flex;
  border-radius: 999px;
  background: #cbd5e1;
  transition: background .18s ease;
}

.switch-row span:before {
  content: "";
  width: 16px;
  height: 16px;
  position: absolute;
  left: 2px;
  top: 2px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .16);
  transition: transform .18s ease;
}

.switch-row input:checked + span {
  background: #4f46e5;
}

.switch-row input:checked + span:before {
  transform: translateX(16px);
}

.admin-create-grid button {
  min-height: 40px;
  align-self: end;
  padding: 0 16px;
}

.admin-mini-btn {
  min-height: 32px;
  padding: 0 12px;
  font-size: 13px;
}

.admin-row-form {
  display: grid;
  grid-template-columns: minmax(104px, 1fr) minmax(92px, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.admin-row-form button,
.admin-review-form button {
  min-height: 40px;
  padding: 0 12px;
  white-space: nowrap;
}

.admin-review-form {
  display: flex;
  gap: 8px;
  margin: 0 0 8px;
}

.admin-review-form:last-child {
  margin-bottom: 0;
}

.admin-review-form .danger {
  background: #dc2626;
}

.admin-review-form .danger:hover {
  background: #b91c1c;
  box-shadow: 0 10px 20px rgba(220, 38, 38, .15);
}

.admin-empty-row td {
  padding: 48px 16px !important;
  color: #94a3b8 !important;
  text-align: center;
  background: #fff !important;
}

.admin-confirm-layer {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: grid;
  place-items: center;
  padding: 20px;
}

.admin-confirm-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .36);
  backdrop-filter: blur(4px);
}

.admin-confirm-card {
  width: min(100%, 360px);
  position: relative;
  display: grid;
  justify-items: center;
  padding: 24px;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 28px 70px rgba(15, 23, 42, .22);
  animation: adminConfirmIn .18s ease-out;
}

.admin-confirm-icon {
  width: 40px;
  height: 40px;
  position: relative;
  margin-bottom: 14px;
  border-radius: 999px;
  background: #eef2ff;
  color: #4f46e5;
}

.admin-confirm-icon:before,
.admin-confirm-icon:after {
  content: "";
  position: absolute;
  left: 19px;
  width: 2px;
  border-radius: 999px;
  background: currentColor;
}

.admin-confirm-icon:before {
  top: 10px;
  height: 14px;
}

.admin-confirm-icon:after {
  bottom: 10px;
  height: 3px;
}

.admin-confirm-card h2 {
  margin: 0;
  color: #0f172a;
  font-size: 16px;
}

.admin-confirm-card p {
  margin: 8px 0 20px;
  color: #64748b;
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
}

.admin-confirm-card > div:last-child {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.admin-confirm-card button {
  min-height: 40px;
  border: 0;
  border-radius: 10px;
  font-weight: 800;
}

.admin-confirm-cancel {
  background: #f8fafc;
  color: #475569;
}

.admin-confirm-submit {
  background: #4f46e5;
  color: #fff;
}

.admin-skill-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.admin-skill-metrics > div {
  min-height: 104px;
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 18px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

.admin-skill-metrics span,
.admin-skill-metrics small {
  color: #64748b;
  font-size: 12px;
}

.admin-skill-metrics b {
  color: #0f172a;
  font-size: 26px;
  line-height: 1;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.admin-secondary-action {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 13px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  color: #475569;
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
}

.admin-secondary-action:hover {
  border-color: #c7d2fe;
  color: #4f46e5;
  background: #eef2ff;
}

.admin-secondary-action:before {
  content: "";
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 999px;
}

.admin-secondary-action.is-syncing:before {
  animation: adminSpin .8s linear infinite;
}

.admin-secondary-action.export:before {
  width: 13px;
  height: 13px;
  border: 1.8px solid currentColor;
  border-top: 0;
  border-radius: 0 0 3px 3px;
  animation: none;
}

.admin-list-scope {
  display: grid;
  gap: 10px;
}

.admin-status-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-status-chip {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  color: #475569;
  font-size: 12px;
  font-weight: 800;
  transition: border-color .18s ease, background .18s ease, color .18s ease;
}

.admin-status-chip:hover {
  border-color: #c7d2fe;
  color: #4f46e5;
}

.admin-status-chip.active {
  border-color: #4f46e5;
  background: #4f46e5;
  color: #fff;
}

.admin-status-chip i {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #94a3b8;
}

.admin-status-chip i.is-success { background: #22c55e; }
.admin-status-chip i.is-info { background: #3b82f6; }
.admin-status-chip i.is-purple { background: #8b5cf6; }
.admin-status-chip i.is-warning { background: #f59e0b; }
.admin-status-chip i.is-danger { background: #ef4444; }
.admin-status-chip i.is-muted { background: #94a3b8; }

.admin-status-chip.active i {
  background: currentColor;
}

.admin-status-chip span {
  min-width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #64748b;
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.admin-status-chip.active span {
  background: rgba(255, 255, 255, .2);
  color: #fff;
}

.user-table {
  min-width: 1080px;
}

.admin-linkish {
  color: #4f46e5 !important;
}

.admin-user-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 190px;
}

.admin-user-cell.compact {
  min-width: 160px;
}

.admin-user-avatar {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 999px;
  background: #e0e7ff;
  color: #4338ca;
  font-size: 13px;
  font-weight: 900;
}

.admin-order-plan {
  display: grid;
  gap: 6px;
  min-width: 230px;
}

.admin-skill-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.admin-skill-tags span,
.admin-skill-tags em {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 7px;
  border-radius: 6px;
  background: #f1f5f9;
  color: #64748b;
  font-size: 11px;
  font-style: normal;
}

.admin-money,
.admin-token {
  color: #0f172a;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px;
  font-weight: 900;
}

.admin-token {
  color: #b45309;
}

.admin-agent-name {
  color: #475569;
  font-size: 13px;
  font-weight: 700;
}

.admin-agent-missing {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #d97706;
  font-size: 12px;
  font-weight: 800;
}

.admin-agent-missing:before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #f59e0b;
}

.admin-compact-form {
  grid-template-columns: minmax(108px, 1fr) minmax(82px, 1fr) auto;
  min-width: 300px;
}

.admin-compact-form input,
.admin-compact-form select {
  min-height: 34px;
  font-size: 12px;
}

.admin-compact-form button {
  min-height: 34px;
  font-size: 12px;
}

.admin-role-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569;
  font-size: 12px;
  font-weight: 800;
}

.admin-role-pill.is-paid {
  background: #e0e7ff;
  color: #4338ca;
}

.admin-role-pill.is-author {
  background: #ede9fe;
  color: #6d28d9;
}

.admin-text-action {
  min-height: 30px;
  padding: 0 11px;
  border: 1px solid #c7d2fe;
  border-radius: 8px;
  background: #eef2ff;
  color: #4f46e5;
  font-size: 12px;
  font-weight: 800;
}

.admin-text-action:hover {
  background: #e0e7ff;
}

.admin-text-action.danger {
  border-color: #fecaca;
  background: #fef2f2;
  color: #dc2626;
}

.admin-text-action.danger:hover {
  background: #fee2e2;
}

.admin-partner-list {
  display: grid;
  gap: 12px;
}

.admin-partner-card,
.admin-empty-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 20px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

.admin-partner-card:hover {
  border-color: #cbd5e1;
}

.admin-partner-main {
  min-width: 0;
  flex: 1;
}

.admin-partner-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 7px;
}

.admin-partner-title h2 {
  margin: 0;
  color: #0f172a;
  font-size: 16px;
  font-weight: 800;
}

.admin-service-pill {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 6px;
  background: #e0f2fe;
  color: #0369a1;
  font-size: 11px;
  font-weight: 800;
}

.admin-github-line {
  display: inline-flex;
  max-width: 100%;
  overflow: hidden;
  color: #64748b;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-github-line:hover {
  color: #4f46e5;
}

.admin-partner-main p {
  max-width: 820px;
  margin: 10px 0 12px;
  color: #475569;
  font-size: 13px;
  line-height: 1.65;
}

.admin-partner-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  color: #94a3b8;
  font-size: 12px;
}

.admin-reject-note {
  margin-top: 12px;
  padding: 9px 11px;
  border: 1px solid #fecaca;
  border-radius: 8px;
  background: #fef2f2;
  color: #dc2626;
  font-size: 12px;
  line-height: 1.5;
}

.admin-partner-actions {
  width: 148px;
  display: grid;
  gap: 8px;
  flex: 0 0 auto;
}

.admin-partner-actions form {
  display: grid;
  gap: 8px;
  margin: 0;
}

.admin-partner-actions input {
  width: 100%;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  color: #0f172a;
  font-size: 12px;
  outline: 0;
}

.admin-pass-btn,
.admin-reject-btn,
.admin-handled {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 800;
}

.admin-pass-btn {
  border: 0;
  background: #059669;
  color: #fff;
}

.admin-pass-btn:hover {
  background: #047857;
}

.admin-reject-btn {
  border: 1px solid #fecaca;
  background: #fff;
  color: #dc2626;
}

.admin-reject-btn:hover {
  background: #fef2f2;
}

.admin-handled {
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #94a3b8;
}

.admin-empty-card {
  justify-content: center;
  padding: 48px 16px;
  color: #94a3b8;
  font-size: 14px;
}

.admin-empty-card[hidden] {
  display: none;
}

.admin-selection-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 14px;
  border: 1px solid #c7d2fe;
  border-radius: 12px;
  background: #eef2ff;
  color: #4338ca;
  font-size: 14px;
  font-weight: 700;
}

.admin-selection-bar[hidden] {
  display: none;
}

.admin-selection-bar > div {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-selection-bar form {
  display: inline-flex;
}

.admin-selection-bar button {
  min-height: 30px;
  padding: 0 11px;
  border: 0;
  border-radius: 8px;
  background: #4f46e5;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}

.admin-selection-bar button:hover {
  background: #4338ca;
}

.admin-selection-bar button.danger {
  background: #ef4444;
}

.admin-selection-bar button.danger:hover {
  background: #dc2626;
}

.admin-check-cell {
  width: 42px;
  text-align: center !important;
}

.admin-check-cell input {
  width: 16px;
  height: 16px;
  accent-color: #4f46e5;
}

.admin-skill-name-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 220px;
}

.admin-skill-avatar {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 8px;
  background: #eef2ff;
  color: #4338ca;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  font-weight: 900;
}

.admin-toggle-dot {
  width: 32px;
  height: 16px;
  display: inline-flex;
  position: relative;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #e2e8f0;
  vertical-align: middle;
  cursor: pointer;
  transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}

.admin-toggle-dot:after {
  content: "";
  width: 12px;
  height: 12px;
  position: absolute;
  top: 2px;
  left: 2px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .18);
  transition: transform .18s ease;
}

.admin-toggle-dot.is-on {
  background: #4f46e5;
}

.admin-toggle-dot.is-service.is-on {
  background: #10b981;
}

.admin-toggle-dot.is-on:after {
  transform: translateX(16px);
}

.admin-toggle-form {
  display: inline-flex;
  margin: 0;
}

.admin-toggle-dot:hover {
  box-shadow: 0 0 0 3px rgba(79, 70, 229, .12);
  transform: translateY(-1px);
}

.admin-toggle-dot.is-service:hover {
  box-shadow: 0 0 0 3px rgba(16, 185, 129, .14);
}

.admin-toggle-dot:focus-visible {
  outline: 2px solid #818cf8;
  outline-offset: 2px;
}

.admin-row-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.admin-row-actions form {
  margin: 0;
}

.admin-icon-btn {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #94a3b8;
  text-decoration: none;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}

.admin-icon-btn:hover {
  background: #f1f5f9;
  color: #334155;
}

.admin-icon-btn.external:hover,
.admin-icon-btn.edit:hover {
  background: #eef2ff;
  color: #4f46e5;
}

.admin-icon-btn.trash:hover {
  background: #fee2e2;
  color: #dc2626;
}

.admin-icon-btn:before,
.admin-icon-btn:after {
  content: "";
  position: absolute;
  box-sizing: border-box;
}

.admin-icon-btn.external:before {
  width: 12px;
  height: 12px;
  border: 1.7px solid currentColor;
  border-radius: 3px;
}

.admin-icon-btn.external:after {
  width: 7px;
  height: 7px;
  top: 8px;
  right: 8px;
  border-top: 1.7px solid currentColor;
  border-right: 1.7px solid currentColor;
}

.admin-icon-btn.edit:before {
  width: 13px;
  height: 4px;
  border-radius: 2px;
  background: currentColor;
  transform: rotate(-38deg);
}

.admin-icon-btn.edit:after {
  width: 5px;
  height: 5px;
  right: 8px;
  bottom: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
}

.admin-icon-btn.power:before {
  width: 13px;
  height: 13px;
  border: 1.8px solid currentColor;
  border-top-color: transparent;
  border-radius: 999px;
}

.admin-icon-btn.power:after {
  width: 2px;
  height: 9px;
  top: 7px;
  border-radius: 999px;
  background: currentColor;
}

.admin-icon-btn.trash:before {
  width: 12px;
  height: 12px;
  top: 10px;
  border: 1.7px solid currentColor;
  border-top: 0;
  border-radius: 0 0 3px 3px;
}

.admin-icon-btn.trash:after {
  width: 14px;
  height: 2px;
  top: 8px;
  border-radius: 999px;
  background: currentColor;
}

.admin-modal-layer {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 24px;
}

.admin-modal-layer[hidden] {
  display: none;
}

.admin-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .38);
  backdrop-filter: blur(5px);
}

.admin-skill-modal {
  width: min(100%, 576px);
  max-height: min(90vh, 760px);
  position: relative;
  overflow: auto;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(15, 23, 42, .24);
  animation: adminConfirmIn .18s ease-out;
}

.admin-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 20px 16px;
  border-bottom: 1px solid #e2e8f0;
}

.admin-modal-head h2 {
  margin: 0;
  color: #0f172a;
  font-size: 18px;
  font-weight: 800;
}

.admin-modal-head p {
  margin: 5px 0 0;
  color: #64748b;
  font-size: 13px;
}

.admin-modal-head button {
  width: 32px;
  height: 32px;
  position: relative;
  border: 0;
  border-radius: 8px;
  background: #f8fafc;
  color: #64748b;
}

.admin-modal-head button:before,
.admin-modal-head button:after {
  content: "";
  width: 13px;
  height: 2px;
  position: absolute;
  top: 15px;
  left: 10px;
  border-radius: 999px;
  background: currentColor;
}

.admin-modal-head button:before { transform: rotate(45deg); }
.admin-modal-head button:after { transform: rotate(-45deg); }

.admin-skill-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
  padding: 18px 20px 20px;
}

.admin-skill-form label {
  display: grid;
  gap: 7px;
  margin: 0;
  color: #475569;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .01em;
}

.admin-skill-form .span-all {
  grid-column: 1 / -1;
}

.admin-skill-form input,
.admin-skill-form select,
.admin-skill-form textarea {
  width: 100%;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  color: #0f172a;
  font-size: 14px;
  outline: 0;
}

.admin-skill-form input,
.admin-skill-form select {
  min-height: 42px;
  padding: 0 11px;
}

.admin-skill-form textarea {
  min-height: 92px;
  padding: 10px 11px;
  resize: vertical;
}

.admin-skill-form input:focus,
.admin-skill-form select:focus,
.admin-skill-form textarea:focus {
  border-color: #818cf8;
  box-shadow: 0 0 0 3px #e0e7ff;
}

.admin-input-icon {
  display: block;
  position: relative;
}

.admin-input-icon:before {
  content: "";
  width: 13px;
  height: 13px;
  position: absolute;
  left: 12px;
  top: 50%;
  z-index: 1;
  border: 1.6px solid #94a3b8;
  border-radius: 999px;
  transform: translateY(-50%);
}

.admin-input-icon input {
  padding-left: 36px;
}

.admin-modal-switches {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.admin-modal-switches label {
  min-height: 68px;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  cursor: pointer;
}

.admin-modal-switches label:hover {
  border-color: #c7d2fe;
}

.admin-modal-switches input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.admin-modal-switches span {
  width: 36px;
  height: 20px;
  display: inline-flex;
  position: relative;
  grid-row: span 2;
  border-radius: 999px;
  background: #e2e8f0;
}

.admin-modal-switches span:after {
  content: "";
  width: 16px;
  height: 16px;
  position: absolute;
  top: 2px;
  left: 2px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .16);
  transition: transform .18s ease;
}

.admin-modal-switches input:checked + span {
  background: #4f46e5;
}

.admin-modal-switches input:checked + span:after {
  transform: translateX(16px);
}

.admin-modal-switches b {
  color: #334155;
  font-size: 14px;
}

.admin-modal-switches small {
  color: #94a3b8;
  font-size: 12px;
}

.admin-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 2px;
}

.admin-cancel-btn,
.admin-save-btn {
  min-height: 40px;
  padding: 0 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 800;
}

.admin-cancel-btn {
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #475569;
}

.admin-save-btn {
  border: 0;
  background: #4f46e5;
  color: #fff;
}

.admin-save-btn:hover {
  background: #4338ca;
}

.modal-open {
  overflow: hidden;
}

@keyframes adminSpin {
  to { transform: rotate(360deg); }
}

@keyframes adminConfirmIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.muted-text {
  color: #94a3b8;
  font-size: 13px;
}

.admin-login-page,
.admin-login-page * {
  box-sizing: border-box;
}

.admin-login-page {
  min-height: 100vh;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 32px 18px;
  background:
    radial-gradient(circle at 20% 10%, rgba(79, 70, 229, .28), transparent 28%),
    radial-gradient(circle at 82% 80%, rgba(6, 182, 212, .18), transparent 30%),
    #020617;
  color: #f8fafc;
}

.admin-login-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.admin-login-bg span {
  position: absolute;
  border: 1px solid rgba(148, 163, 184, .12);
  border-radius: 999px;
}

.admin-login-bg span:nth-child(1) {
  width: 420px;
  height: 420px;
  left: -180px;
  top: -140px;
}

.admin-login-bg span:nth-child(2) {
  width: 560px;
  height: 560px;
  right: -260px;
  bottom: -240px;
}

.admin-login-bg span:nth-child(3) {
  width: 260px;
  height: 260px;
  right: 18%;
  top: 14%;
}

.admin-login-shell {
  width: min(100%, 392px);
  position: relative;
  z-index: 1;
}

.admin-login-head {
  margin-bottom: 24px;
  text-align: center;
}

.admin-login-mark {
  width: 58px;
  height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  overflow: visible;
  border: 1px solid rgba(204, 251, 241, .24);
  border-radius: 18px;
  background: transparent;
  color: transparent;
  box-shadow: 0 18px 34px rgba(20, 184, 166, .16);
  font-size: 0;
}

.admin-login-mark img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.admin-login-head h1 {
  margin: 0;
  color: #fff;
  font-size: 24px;
  font-weight: 800;
}

.admin-login-head p {
  margin: 8px 0 0;
  color: #94a3b8;
  font-size: 14px;
}

.admin-login-card {
  display: grid;
  gap: 16px;
  padding: 24px;
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 8px;
  background: rgba(15, 23, 42, .86);
  box-shadow: 0 28px 72px rgba(0, 0, 0, .38);
  backdrop-filter: blur(18px);
}

.admin-login-card label {
  position: relative;
  display: grid;
  gap: 8px;
  color: #cbd5e1;
  font-size: 13px;
  font-weight: 700;
}

.admin-login-card input {
  width: 100%;
  height: 44px;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 8px;
  background: rgba(2, 6, 23, .55);
  color: #fff;
  outline: 0;
  padding: 0 42px;
  font: inherit;
  font-size: 14px;
}

.admin-login-card input::placeholder {
  color: #64748b;
}

.admin-login-card input:focus {
  border-color: #818cf8;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .24);
}

.admin-login-icon {
  width: 18px;
  height: 18px;
  position: absolute;
  left: 13px;
  top: 37px;
  color: #94a3b8;
}

.admin-login-icon.user:before {
  width: 8px;
  height: 8px;
  left: 5px;
  top: 1px;
  border: 2px solid currentColor;
  border-radius: 999px;
}

.admin-login-icon.user:after {
  width: 14px;
  height: 8px;
  left: 2px;
  bottom: 1px;
  border: 2px solid currentColor;
  border-radius: 12px 12px 4px 4px;
}

.admin-login-icon.lock:before {
  width: 12px;
  height: 9px;
  left: 3px;
  bottom: 1px;
  border: 2px solid currentColor;
  border-radius: 3px;
}

.admin-login-icon.lock:after {
  width: 8px;
  height: 8px;
  left: 5px;
  top: 1px;
  border: 2px solid currentColor;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
}

.admin-login-eye {
  width: 36px;
  height: 36px;
  position: absolute;
  right: 4px;
  top: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #94a3b8;
}

.admin-login-eye:hover {
  background: rgba(148, 163, 184, .12);
  color: #fff;
}

.admin-login-eye svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.admin-login-eye .eye-off,
.admin-login-eye.is-visible .eye-on {
  display: none;
}

.admin-login-eye.is-visible .eye-off {
  display: block;
}

.admin-login-error {
  border: 1px solid rgba(248, 113, 113, .24);
  border-radius: 8px;
  background: rgba(127, 29, 29, .24);
  color: #fecaca;
  padding: 10px 12px;
  font-size: 13px;
}

.admin-login-submit {
  height: 44px;
  border: 0;
  border-radius: 8px;
  background: #4f46e5;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 14px 26px rgba(79, 70, 229, .28);
}

.admin-login-back {
  width: max-content;
  display: block;
  margin: 18px auto 0;
  color: #94a3b8;
  font-size: 13px;
  text-decoration: none;
}

.admin-login-back:hover {
  color: #fff;
}

@media (max-width: 1180px) {
  .admin-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-skill-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-two-col {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .admin-app {
    height: auto;
    min-height: 100vh;
    display: block;
    overflow: visible;
  }

  .admin-sidebar {
    position: static;
    height: auto;
    width: 100%;
    min-height: auto;
    flex-direction: row;
    align-items: center;
    overflow-x: auto;
  }

  .admin-logo {
    flex: 0 0 auto;
    border-bottom: 0;
    border-right: 1px solid rgba(148, 163, 184, .14);
    padding-right: 12px;
  }

  .admin-logo small {
    max-width: 118px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .admin-side-nav {
    display: flex;
    flex: 1;
    padding: 10px;
  }

  .admin-side-nav a {
    flex: 0 0 auto;
  }

  .admin-account {
    display: none;
  }

  .admin-workspace {
    height: auto;
    min-height: calc(100vh - 65px);
    overflow: visible;
  }

  .admin-header {
    position: sticky;
    top: 0;
    z-index: 5;
  }

  .admin-toolbar {
    flex-wrap: wrap;
  }

  .admin-search {
    min-width: 100%;
  }

  .admin-action {
    margin-left: 0;
  }

  .admin-selection-bar {
    align-items: flex-start;
    flex-direction: column;
  }

  .admin-selection-bar > div {
    width: 100%;
    margin-left: 0;
    flex-wrap: wrap;
  }

  .admin-pagination {
    align-items: flex-start;
    flex-direction: column;
  }

  .admin-pagination > div {
    flex-wrap: wrap;
  }

  .admin-partner-card {
    flex-direction: column;
  }

  .admin-partner-actions {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-create-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .admin-header {
    height: auto;
    min-height: 65px;
    align-items: flex-start;
    flex-direction: column;
    padding: 14px 16px;
  }

  .admin-header-meta {
    width: 100%;
    justify-content: space-between;
  }

  .admin-scroll {
    padding: 16px;
  }

  .admin-stat-grid,
  .admin-skill-metrics,
  .admin-skill-form,
  .admin-modal-switches,
  .admin-create-grid {
    grid-template-columns: 1fr;
  }

  .admin-modal-layer {
    padding: 12px;
  }

  .admin-modal-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .admin-status-tabs {
    gap: 6px;
  }

  .admin-status-chip {
    flex: 1 1 auto;
    justify-content: center;
  }

  .admin-partner-actions {
    grid-template-columns: 1fr;
  }

  .admin-row-form,
  .admin-review-form {
    grid-template-columns: 1fr;
    display: grid;
  }

  .profile-avatar-editor {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: left;
  }

  .profile-avatar-editor label {
    width: 100%;
  }
}