/* Слой витрин demos поверх пакета TechCon (tokens.css + components.css).
   Имена классов прежние: шаблоны страниц не меняются, кроме base.html. */
.shell{max-width:var(--tc-max-width);margin:0 auto;padding:var(--tc-space-6) var(--tc-gutter) var(--tc-space-7)}
.hero{margin-bottom:var(--tc-space-6);padding-bottom:var(--tc-space-5);border-bottom:1px solid var(--tc-line)}
.hero h1{margin:0 0 var(--tc-space-3);font-size:clamp(28px,4.2vw,var(--tc-h1))}
.hero p{margin:0;max-width:65ch;color:var(--tc-text-muted)}
.grid{display:grid;grid-template-columns:minmax(260px,340px) minmax(0,1fr);gap:var(--tc-space-5)}
.panel{background:var(--tc-bg);border:1px solid var(--tc-line);border-radius:var(--tc-radius-lg);box-shadow:var(--tc-shadow-card);overflow:hidden;min-width:0}
.panel-header{padding:var(--tc-space-4) var(--tc-space-5);border-bottom:1px solid var(--tc-line);background:var(--tc-surface-1)}
.panel-title{margin:0 0 var(--tc-space-1);font-size:var(--tc-h3)}
.panel-subtitle{margin:0;color:var(--tc-text-muted);font-size:var(--tc-text-sm)}
.panel-body{padding:var(--tc-space-5)}
.collection{display:grid;gap:var(--tc-space-2);max-height:560px;overflow:auto}
.item-card{display:block;padding:var(--tc-space-3);border:1px solid var(--tc-line);border-radius:var(--tc-radius-md);color:var(--tc-text);text-decoration:none;min-height:var(--tc-tap-min)}
.item-card:hover{background:var(--tc-surface-1)}
.item-card.active{border-color:var(--tc-accent-ink);background:var(--tc-surface-2);box-shadow:inset 3px 0 0 var(--tc-accent)}
.item-title{margin:0;font-size:var(--tc-text-sm);word-break:break-all}
.item-meta{margin:var(--tc-space-1) 0 0;font-size:var(--tc-text-xs);color:var(--tc-text-muted)}
.action-row{display:flex;flex-wrap:wrap;gap:var(--tc-space-2);margin-top:var(--tc-space-3)}
.button,.button:visited{display:inline-flex;align-items:center;justify-content:center;gap:var(--tc-space-2);min-height:var(--tc-tap-min);padding:0 var(--tc-space-4);border:2px solid transparent;border-radius:var(--tc-radius-md);background:var(--tc-btn-bg);color:var(--tc-btn-text);font:600 var(--tc-text-sm)/1 var(--tc-font-ui);text-decoration:none;cursor:pointer}
.button:hover{background:var(--tc-btn-bg-hover)}
.button.secondary,.button.secondary:visited{background:transparent;color:var(--tc-accent-ink);border-color:var(--tc-accent-ink)}
.button.secondary:hover{background:var(--tc-surface-2)}
.htmx-indicator{display:none;font-weight:400}.htmx-request .htmx-indicator,.htmx-request.htmx-indicator{display:inline}
.empty-state,.message-box,.result-block{padding:var(--tc-space-4);border-radius:var(--tc-radius-md);border:1px dashed var(--tc-line);background:var(--tc-surface-1);color:var(--tc-text-muted)}
.message-box.success,.result-head{border:1px solid var(--tc-line);border-left:4px solid var(--tc-ok);background:var(--tc-surface-1);color:var(--tc-text)}
.result-head h2,.result-head h3{margin:0 0 var(--tc-space-1);font-size:var(--tc-h3)}
.kv-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--tc-space-3);margin:var(--tc-space-4) 0}
.kv-card,.field-row{padding:var(--tc-space-3) var(--tc-space-4);border-radius:var(--tc-radius-md);background:var(--tc-bg);border:1px solid var(--tc-line)}
.kv-label{margin:0 0 var(--tc-space-1);font-size:var(--tc-text-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--tc-text-muted)}
.kv-value{margin:0;font-weight:700}
.field-list{display:grid;gap:var(--tc-space-3);margin:var(--tc-space-4) 0}
.field-row strong,.field-row b{display:block;margin-bottom:var(--tc-space-1)}
.metrics{display:grid;gap:var(--tc-space-3);margin:var(--tc-space-4) 0}
.metric-bar{width:100%;height:12px;border-radius:999px;background:var(--tc-surface-2);overflow:hidden}
.metric-fill{height:100%;border-radius:999px;background:var(--tc-accent)}
.media-frame{width:100%;min-height:320px;border:1px solid var(--tc-line);border-radius:var(--tc-radius-md);background:var(--tc-surface-1)}
.table-wrap{overflow-x:auto}
.data-table{width:100%;border-collapse:collapse;font-size:var(--tc-text-sm)}
.data-table th,.data-table td{padding:var(--tc-space-3);text-align:left;border-bottom:1px solid var(--tc-line);vertical-align:top;font-variant-numeric:tabular-nums}
.data-table th{font-size:var(--tc-text-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--tc-text-muted)}
.footer-note{margin-top:var(--tc-space-5);color:var(--tc-text-muted);font-size:var(--tc-text-sm)}
.code-pill{display:inline-block;padding:2px 8px;border-radius:999px;background:var(--tc-surface-2);color:var(--tc-accent-ink);font-family:var(--tc-font-mono);font-size:var(--tc-text-sm)}
.hero-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--tc-space-4)}
.demo-card{display:grid;gap:var(--tc-space-3);align-content:start;padding:var(--tc-space-5);border-radius:var(--tc-radius-lg);background:var(--tc-bg);border:1px solid var(--tc-line);box-shadow:var(--tc-shadow-card)}
.demo-card h2{margin:0;font-size:var(--tc-h3)}
.demo-card p{margin:0;color:var(--tc-text-muted)}
.demo-icon{width:52px;height:52px;display:grid;place-items:center;font-size:24px;border-radius:var(--tc-radius-lg);background:var(--tc-surface-2);border:1px solid var(--tc-line)}
.contract-list{display:grid;gap:var(--tc-space-2);margin:0;padding-left:var(--tc-space-4);color:var(--tc-text-muted)}
@media (max-width:940px){.grid,.kv-grid{grid-template-columns:1fr}}
@media (max-width:640px){.shell{padding-inline:var(--tc-gutter-sm)}.panel-body,.panel-header{padding-inline:var(--tc-space-4)}}