/* 52nihao · 原创软件官方发布站 · 共享样式 */

:root{
  --bg:#fafaf9;
  --surface:#ffffff;
  --ink:#0f172a;
  --ink-2:#475569;
  --ink-3:#94a3b8;
  --line:#e2e8f0;
  --line-2:#f1f5f9;
  --brand:#047857;
  --brand-2:#10b981;
  --brand-soft:#ecfdf5;
  --amber:#b45309;
  --amber-soft:#fef3c7;
  --r-sm:10px;
  --r-md:14px;
  --r-lg:18px;
  --shadow-1: 0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  --maxw:1080px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:"Inter","Noto Sans SC",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,"PingFang SC","Microsoft YaHei",sans-serif;
  background:var(--bg);
  color:var(--ink);
  font-size:15px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering: optimizeLegibility;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;border:0;background:none;cursor:pointer;color:inherit}

.shell{ max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ----- topbar ----- */
.topbar{ background:#ffffff; border-bottom:1px solid var(--line);}
.topbar-inner{
  display:flex; align-items:center; justify-content:space-between;
  height: 64px;
}
.brand{ display:flex; align-items:center; gap:10px; font-weight:700;}
.brand-mark{
  width:34px; height:34px; border-radius:9px;
  background: linear-gradient(135deg,#10b981,#047857);
  display:grid; place-items:center; color:#fff; font-weight:800;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.08);
  font-size: 14px; letter-spacing: -0.5px;
}
.brand-name{ font-size: 16px; color: var(--ink);}
.brand-sub{ font-size: 12px; color: var(--ink-2); margin-top:1px;}
.topbar-meta{ display:flex; align-items:center; gap:18px; font-size:13px; color:var(--ink-2);}
.topbar-meta a{ color: var(--ink-2);}
.topbar-meta a:hover{ color: var(--brand);}

/* ----- page header ----- */
.pagehead{
  background:#ffffff;
  border-bottom:1px solid var(--line);
  padding: 28px 0 24px;
}
.crumbs{ font-size:13px; color: var(--ink-2); margin-bottom: 10px;}
.crumbs a:hover{ color: var(--brand);}
.crumbs .sep{ color: var(--ink-3); margin: 0 6px;}
.pagehead h1{
  font-size: 26px; font-weight: 700; letter-spacing:-.01em;
  color: var(--ink);
}
.pagehead p{ margin-top: 6px; color: var(--ink-2); font-size: 14px;}

/* ----- chips ----- */
.filterbar{
  display:flex; gap:8px; flex-wrap:wrap;
  margin: 18px 0 14px;
}
.chip{
  padding: 7px 14px; border-radius: 999px;
  font-size: 13px; font-weight: 500;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-2);
  transition: all .12s ease;
}
.chip:hover{ color: var(--brand); border-color: var(--brand-2); }
.chip.active{
  background: var(--brand); color:#fff; border-color: var(--brand);
}

/* ----- list ----- */
.list{ padding: 4px 0 28px; }
.item{
  display: grid;
  grid-template-columns: 40px 1fr auto auto;
  gap: 16px;
  align-items: center;
  padding: 16px 4px;
  border-bottom: 1px solid var(--line-2);
  transition: background .12s ease;
}
.item:hover{ background: #f8fafc;}
.item:last-child{ border-bottom: 0;}

.item-icon{
  width:40px; height:40px; border-radius: 10px;
  background: var(--brand-soft); color: var(--brand);
  display:grid; place-items:center;
}
.item-icon svg{ width:22px; height:22px; }

.item-body{ min-width: 0;}
.item-title{ font-size: 15px; font-weight: 600; color: var(--ink);}
.item-desc{
  font-size: 13px; color: var(--ink-2);
  margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.badge{
  display:inline-block; padding: 3px 9px; border-radius: 999px;
  background: var(--brand-soft); color: var(--brand);
  font-size: 12px; font-weight:600; font-variant-numeric: tabular-nums;
}
.badge.warn{ background: var(--amber-soft); color: var(--amber);}

.item-action{
  padding: 8px 14px; border-radius: 8px;
  background: var(--ink); color: #fff !important;
  font-size: 13px; font-weight: 600;
  display:inline-flex; align-items:center; gap:6px;
  white-space: nowrap;
  transition: background .12s ease;
}
.item-action:hover{ background:#1e293b;}
.item-action svg{ width:14px; height:14px;}

/* ----- detail page ----- */
.detail-shell{
  display:grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 40px;
  padding: 32px 0 48px;
}
.detail-shell aside{ position: sticky; top: 24px; align-self: start;}

.prose h2{
  font-size: 20px; font-weight: 700; color: var(--ink);
  letter-spacing: -.01em;
  margin: 24px 0 12px;
}
.prose h2:first-child{ margin-top: 0;}
.prose p{ margin-bottom: 14px; color: var(--ink-2);}
.prose ol{ padding-left: 22px; color: var(--ink-2);}
.prose ol li{ margin-bottom: 8px;}
.prose strong{ color: var(--ink);}
.prose a{ color: var(--brand); border-bottom: 1px dashed var(--brand-2);}

.shotwrap{
  margin-top: 18px;
  background: linear-gradient(180deg,#f1f5f9,#fafaf9);
  border:1px solid var(--line); border-radius: var(--r-md);
  aspect-ratio: 16/10;
  display:grid; place-items:center;
  color: var(--ink-3); font-size: 13px;
  overflow:hidden;
}
.shotwrap img{ width:100%; height:100%; object-fit: contain;}

.aside-card{
  background: var(--surface);
  border:1px solid var(--line);
  border-radius: var(--r-md);
  padding: 20px;
  box-shadow: var(--shadow-1);
}
.aside-card .label{
  font-size:11px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color: var(--ink-3);
  margin-bottom: 8px;
}
.aside-card .big{
  font-size: 22px; font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.aside-meta{ display:flex; justify-content:space-between; font-size:13px; color: var(--ink-2); margin:14px 0 6px;}
.aside-meta + .aside-meta{ margin-top: 6px;}
.aside-meta span:last-child{ color: var(--ink); font-weight: 600;}

.btn-primary{
  display:flex; align-items:center; justify-content:center; gap: 8px;
  width:100%; padding: 12px 16px; margin-top: 16px;
  background: var(--brand); color: #fff !important;
  border-radius: 10px; font-weight: 600; font-size: 14px;
  transition: background .12s ease;
}
.btn-primary:hover{ background: var(--brand-2);}
.btn-primary svg{ width:16px; height:16px;}

.btn-ghost{
  display:flex; align-items:center; justify-content:center; gap: 6px;
  width:100%; padding: 10px 14px; margin-top: 8px;
  background: transparent; color: var(--ink);
  border:1px solid var(--line); border-radius: 10px; font-weight: 500; font-size: 13px;
}
.btn-ghost:hover{ border-color: var(--brand-2); color: var(--brand); }
.btn-ghost svg{ width:14px; height:14px;}

/* ----- footer ----- */
.site-footer{
  background:#0f172a; color:#cbd5e1;
  padding: 32px 0 24px;
  margin-top: 48px;
}
.footer-grid{
  display:grid; grid-template-columns: 1fr 1fr 1fr; gap: 32px;
}
.footer-grid h4{ color:#fff; font-size: 13px; font-weight: 700; margin-bottom: 10px; letter-spacing:.05em; text-transform: uppercase;}
.footer-grid p, .footer-grid a{ font-size: 13px; color:#94a3b8;}
.footer-grid a:hover{ color:#fff;}
.footer-bottom{
  border-top: 1px solid #1e293b; margin-top: 24px; padding-top: 16px;
  display:flex; justify-content:space-between; font-size:12px; color:#64748b;
}

/* ----- responsive ----- */
@media (max-width: 720px){
  .shell{ padding: 0 16px;}
  .topbar-meta{ display: none;}
  .topbar-inner{ height: 52px;}
  .brand-sub{ display:none;}
  .brand-mark{ width:32px; height:32px;}
  .brand-name{ font-size: 15px;}
  .detail-shell{ grid-template-columns: 1fr; gap: 24px; padding: 20px 0 32px;}
  .detail-shell aside{ position: static;}
  .footer-grid{ grid-template-columns: 1fr;}
  .footer-bottom{ flex-direction: column; gap: 6px;}
  .item{ grid-template-columns: 36px 1fr; row-gap: 6px; padding: 14px 2px;}
  .item .badge{ grid-column: 2; justify-self: start;}
  .item .item-action{ grid-column: 2; justify-self: start; padding: 9px 14px;}
  .item-desc{ white-space: normal;}
  .pagehead{ padding: 18px 0 16px;}
  .pagehead h1{ font-size: 20px;}
  .prose h2{ font-size: 17px;}
  .filterbar{ gap: 6px; margin: 14px 0 10px;}
  .chip{ padding: 6px 12px; font-size: 12px;}
}