.page { padding-top: 60px; position: relative; z-index: 1; }

.model-hero { padding: 48px 80px 0; display: grid; grid-template-columns: 1fr 380px; gap: 48px; align-items: start; max-width: 1400px; margin: 0 auto; }
.bc { padding: 20px 0 24px; display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.bc a { color: var(--text2); text-decoration: none; cursor: none; transition: color 0.2s; }
.bc a:hover { color: var(--green); }
.bc-sep { color: var(--muted); }
.bc-cur { color: var(--green); }

.model-badges { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.badge { font-family: var(--mono); font-size: 10px; padding: 4px 10px; border: 1px solid; letter-spacing: 0.1em; }
.b-llm { color: var(--green); border-color: rgba(0,255,136,0.3); background: rgba(0,255,136,0.05); }
.b-apache { color: var(--cyan); border-color: rgba(0,229,255,0.25); background: rgba(0,229,255,0.04); }
.b-new { color: var(--amber); border-color: rgba(255,179,0,0.3); background: rgba(255,179,0,0.05); }
.b-verified { color: #28ca41; border-color: rgba(40,202,65,0.3); background: rgba(40,202,65,0.05); }

.model-name { font-family: var(--display); font-size: clamp(28px, 3.5vw, 46px); font-weight: 900; line-height: 1.05; letter-spacing: -1.5px; margin-bottom: 12px; }
.model-name .hl { color: var(--green); }
.model-org { font-family: var(--mono); font-size: 13px; color: var(--text2); margin-bottom: 20px; display: flex; align-items: center; gap: 16px; }
.model-org span { color: var(--muted); }
.model-desc { font-size: 15px; color: var(--text2); line-height: 1.75; max-width: 600px; margin-bottom: 32px; }
.model-desc strong { color: var(--text); }

.quick-stats { display: flex; gap: 0; border: 1px solid var(--border); margin-bottom: 32px; }
.qs-item { flex: 1; padding: 16px 20px; border-right: 1px solid var(--border); position: relative; }
.qs-item:last-child { border-right: none; }
.qs-label { font-family: var(--mono); font-size: 9px; color: var(--muted); letter-spacing: 0.12em; margin-bottom: 6px; }
.qs-val { font-family: var(--display); font-size: 18px; font-weight: 700; color: var(--text); }
.qs-val.green { color: var(--green); }
.qs-val.cyan { color: var(--cyan); }
.qs-sub { font-family: var(--mono); font-size: 10px; color: var(--muted); margin-top: 3px; }

.model-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.btn-copy, .btn-star { padding: 13px 24px; }
.btn-star:hover { border-color: rgba(255,179,0,0.3); color: var(--amber); }

.dl-card { background: var(--card); border: 1px solid var(--border); position: sticky; top: 76px; }
.dl-card-head { padding: 20px 24px; border-bottom: 1px solid var(--border); background: var(--card2); }
.dl-card-title { font-family: var(--mono); font-size: 11px; color: var(--text2); letter-spacing: 0.12em; margin-bottom: 4px; }
.dl-card-model { font-family: var(--display); font-size: 14px; font-weight: 700; color: var(--green); }
.dl-card-body { padding: 20px 24px; }
.variant-select { margin-bottom: 20px; }
.vs-label { font-family: var(--mono); font-size: 10px; color: var(--muted); letter-spacing: 0.1em; margin-bottom: 10px; }
.variant-opts { display: flex; flex-direction: column; gap: 6px; }
.vopt { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border: 1px solid var(--border); cursor: none; transition: all 0.2s; position: relative; }
.vopt:hover, .vopt.active { border-color: rgba(0,255,136,0.3); background: rgba(0,255,136,0.04); }
.vopt.active::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--green); }
.vopt-l { display: flex; flex-direction: column; gap: 3px; }
.vopt-name { font-family: var(--mono); font-size: 12px; color: var(--text); }
.vopt-sub { font-family: var(--mono); font-size: 10px; color: var(--muted); }
.vopt-r { text-align: right; }
.vopt-size { font-family: var(--mono); font-size: 12px; color: var(--text); }
.vopt-acc { font-family: var(--mono); font-size: 10px; color: var(--green); }
.dl-main { width: 100%; display:flex; align-items:center; justify-content:center; gap:10px; background: var(--green); color: var(--bg); font-family: var(--mono); font-size: 13px; font-weight:700; letter-spacing:0.1em; padding:14px; border:none; cursor:none; transition:all 0.2s; margin-bottom:12px; }
.dl-main:hover { background: var(--green2); box-shadow: 0 0 24px rgba(0,255,136,0.35); }
.dl-meta { display:flex; justify-content:space-between; font-family:var(--mono); font-size:10px; color:var(--muted); padding-top:12px; border-top:1px solid var(--border); }
.dl-meta span { color: var(--text2); }

.content-area { padding: 48px 80px; max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: 1fr 380px; gap: 48px; }
.tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); margin-bottom: 40px; }
.tab { font-family: var(--mono); font-size: 12px; color: var(--muted); letter-spacing: 0.08em; padding: 12px 24px; cursor: none; border-bottom: 2px solid transparent; transition: all 0.2s; margin-bottom: -1px; }
.tab:hover { color: var(--text2); }
.tab.active { color: var(--green); border-bottom-color: var(--green); }

.sec-label { font-family: var(--mono); font-size: 10px; color: var(--green); letter-spacing: 0.2em; margin-bottom: 16px; display:flex; align-items:center; gap:10px; }
.sec-label::before { content: ""; width:20px; height:1px; background: var(--green); }
.sec-title { font-family: var(--display); font-size: 22px; font-weight:700; margin-bottom:8px; letter-spacing:-0.5px; }
.sec-desc { font-size: 13px; color: var(--text2); line-height:1.7; margin-bottom:28px; }

.bench-table { width:100%; border-collapse: collapse; border:1px solid var(--border); margin-bottom:40px; }
.bench-table th,
.bench-table td { padding:12px 16px; border-right:1px solid var(--border); }
.bench-table th { font-family: var(--mono); font-size:10px; color: var(--muted); letter-spacing:0.1em; background: var(--card2); border-bottom:1px solid var(--border); }
.bench-table th:last-child,
.bench-table td:last-child { border-right:none; }
.bench-table td { font-family: var(--mono); font-size:12px; border-bottom:1px solid var(--border); transition: background 0.2s; }
.bench-table tr:last-child td { border-bottom:none; }
.bench-table tr:hover td { background: rgba(0,255,136,0.025); }
.bench-table tr.highlight td { background: rgba(0,255,136,0.04); }
.bench-table tr.highlight td:first-child { border-left:2px solid var(--green); }
.td-name { color: var(--text); font-weight:600; }
.td-fmt { color: var(--cyan); }
.td-size { color: var(--text2); }
.td-acc { color: var(--green); }
.td-acc.warn { color: var(--amber); }
.td-lat { color: var(--text2); }
.td-hw { color: var(--purple); }
.td-tag { display:inline-block; font-family: var(--mono); font-size:9px; padding:2px 7px; background: rgba(0,255,136,0.08); border:1px solid rgba(0,255,136,0.2); color: var(--green); letter-spacing:0.08em; }

.chart-wrap { background: var(--card); border:1px solid var(--border); padding:28px; margin-bottom:40px; }
.chart-title { font-family: var(--mono); font-size:11px; color: var(--text2); letter-spacing:0.1em; margin-bottom:24px; }
.chart-row { display:flex; align-items:center; gap:16px; margin-bottom:14px; }
.chart-label { font-family: var(--mono); font-size:11px; color: var(--text2); width:120px; flex-shrink:0; text-align:right; }
.chart-bar-wrap { flex:1; height:20px;background: rgba(255,255,255,0.03); position:relative; border:1px solid var(--border); }
.chart-bar { height:100%; transition: width 1.5s cubic-bezier(0.16,1,0.3,1); position:relative; }
.chart-bar::after { content: attr(data-val); position:absolute; right:8px; top:50%; transform: translateY(-50%); font-family: var(--mono); font-size:10px; color: var(--bg); font-weight:700; }
.chart-val { font-family: var(--mono); font-size:11px; color: var(--text2); width:60px; flex-shrink:0; }

.code-tabs { display:flex; gap:0; margin-bottom:0; border:1px solid var(--border); border-bottom:none; }
.code-tab { font-family: var(--mono); font-size:11px; color: var(--muted); padding:10px 18px; cursor:none; transition: all 0.2s; border-right:1px solid var(--border); }
.code-tab:last-child { border-right:none; }
.code-tab.active { background: var(--card2); color: var(--green); }
.code-tab:hover:not(.active) { color: var(--text2); background: rgba(255,255,255,0.02); }
.code-block { background: var(--card2); border:1px solid var(--border); padding:24px; font-family: var(--mono); font-size:12px; line-height:1.9; position:relative; overflow-x:auto; margin-bottom:32px; }
.code-block.hidden { display:none; }
.cb-copy { position:absolute; top:12px; right:12px; font-family: var(--mono); font-size:10px; color: var(--muted); background: var(--card); border:1px solid var(--border); padding:4px 10px; cursor:none; transition: all 0.2s; letter-spacing:0.06em; }
.cb-copy:hover { color: var(--green); border-color: var(--border2); }
.c-comment { color: var(--muted); display:block; margin-bottom:8px; }
.c-kw { color: var(--purple); }
.c-str { color: var(--amber); }
.c-fn { color: var(--cyan); }
.c-num { color: var(--green); }
.c-var { color: var(--text); }

.hw-grid { display:grid; grid-template-columns: repeat(2,1fr); gap:8px; margin-bottom:40px; }
.hw-card { background: var(--card); border:1px solid var(--border); padding:16px 20px; display:flex; align-items:flex-start; gap:14px; transition:border-color 0.2s; }
.hw-card:hover { border-color: var(--border2); }
.hw-icon { font-size:20px; margin-top:2px; flex-shrink:0; }
.hw-name { font-family: var(--mono); font-size:12px; color: var(--text); margin-bottom:4px; }
.hw-rec { font-family: var(--mono); font-size:11px; padding:2px 8px; border:1px solid; display:inline-block; margin-bottom:6px; letter-spacing:0.06em; }
.hw-rec.best { color: var(--green); border-color: rgba(0,255,136,0.3); }
.hw-rec.good { color: var(--cyan); border-color: rgba(0,229,255,0.3); }
.hw-rec.ok { color: var(--amber); border-color: rgba(255,179,0,0.3); }
.hw-detail { font-size:11px; color: var(--text2); line-height:1.6; }

.side-widget { background: var(--card); border:1px solid var(--border); margin-bottom:16px; overflow:hidden; }
.sw-head { padding:14px 20px; background: var(--card2); border-bottom:1px solid var(--border); font-family: var(--mono); font-size:10px; color: var(--text2); letter-spacing:0.12em; display:flex; align-items:center; justify-content:space-between; }
.sw-body { padding:16px 20px; }
.meta-row { display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid rgba(255,255,255,0.03); }
.meta-row:last-child { border-bottom:none; }
.meta-key { font-family: var(--mono); font-size:11px; color: var(--muted); }
.meta-val { font-family: var(--mono); font-size:11px; color: var(--text2); }
.meta-val.green { color: var(--green); }
.meta-val.cyan { color: var(--cyan); }

.rel-card { display:flex; align-items:center; justify-content:space-between; padding:12px 0; border-bottom:1px solid rgba(255,255,255,0.03); cursor:none; transition: all 0.2s; }
.rel-card:last-child { border-bottom:none; }
.rel-card:hover .rel-name { color: var(--green); }
.rel-name { font-family: var(--mono); font-size:12px; color: var(--text); transition: color 0.2s; }
.rel-sub { font-family: var(--mono); font-size:10px; color: var(--muted); margin-top:2px; }
.rel-arr { color: var(--muted); font-size:14px; transition: transform 0.2s; }
.rel-card:hover .rel-arr { transform: translateX(4px); color: var(--green); }

.sparkline-wrap { padding:4px 0; }
.sparkline { display:flex; align-items:flex-end; gap:3px; height:48px; }
.spark-bar { flex:1; background: rgba(0,255,136,0.2); border-top:1px solid rgba(0,255,136,0.4); transition: background 0.2s; cursor:none; }
.spark-bar:hover { background: rgba(0,255,136,0.4); }

.tag-list { display:flex; flex-wrap:wrap; gap:6px; }
.tag { font-family: var(--mono); font-size:10px; padding:4px 10px; background: rgba(255,255,255,0.03); border:1px solid var(--border); color: var(--text2); letter-spacing:0.06em; }

.sdiv { border:none; border-top:1px solid var(--border); margin:40px 0; }

.acc-ring-wrap { display:flex; flex-direction:column; align-items:center; gap:8px; }
.acc-ring { width:72px; height:72px; position:relative; }
.acc-ring svg { transform: rotate(-90deg); }
.acc-track { fill:none; stroke: rgba(255,255,255,0.06); stroke-width:5; }
.acc-fill { fill:none; stroke: var(--green); stroke-width:5; stroke-linecap:round; stroke-dasharray:188.5; stroke-dashoffset:188.5; transition: stroke-dashoffset 1.5s cubic-bezier(0.16,1,0.3,1); }
.acc-label { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family: var(--display); font-size:13px; font-weight:700; color: var(--green); }
.acc-sub { font-family: var(--mono); font-size:9px; color: var(--muted); letter-spacing:0.1em; }

.notice { background: rgba(0,255,136,0.04); border-left:3px solid var(--green); padding:16px 20px; margin-bottom:32px; font-family: var(--mono); font-size:12px; color: var(--text2); line-height:1.8; }
.notice strong { color: var(--green); }

@media (max-width:1024px) {
  .model-hero, .content-area { grid-template-columns: 1fr; padding: 32px 24px 0; }
  .side-col { order:-1; }
  nav { padding: 0 20px; }
  .hw-grid { grid-template-columns: 1fr; }
}