.demo-shell-v2 { padding:54px 0 78px; }
.demo-hero-v2 { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr); gap:26px; align-items:center; margin-bottom:24px; }
.demo-hero-v2 h1 { margin:0; font-size:clamp(2.75rem,5vw,4.9rem); line-height:.98; letter-spacing:-.052em; }
.demo-safe-note { margin:18px 0 0; color:#768598; font-size:.84rem; }
.demo-guide { min-height:220px; display:grid; grid-template-columns:150px 1fr; align-items:end; overflow:hidden; border:1px solid var(--x-line); border-radius:24px; background:linear-gradient(135deg,#fff,#effaf7); }
.demo-guide img { width:180px; margin:0 0 -22px -18px; }
.demo-guide div { align-self:center; margin-right:18px; padding:14px 15px; border-radius:17px 17px 17px 5px; background:#fff; box-shadow:0 10px 30px rgba(16,36,59,.07); }
.demo-guide strong { font-size:1.05rem; }
.demo-guide p { margin:5px 0 0; color:var(--x-muted); line-height:1.5; font-size:.86rem; }
.demo-company-card-v2 { display:grid; grid-template-columns:minmax(220px,.65fr) 1.35fr; gap:26px; align-items:center; margin-bottom:18px; padding:18px 22px; border:1px solid var(--x-line); border-radius:18px; background:#fff; }
.demo-company-card-v2 span { display:block; color:#718095; font-size:.72rem; font-weight:850; text-transform:uppercase; letter-spacing:.09em; }
.demo-company-card-v2 strong { display:block; margin-top:5px; font-size:1.15rem; }
.demo-company-card-v2 p { margin:0; color:var(--x-muted); line-height:1.5; }
.demo-kpis-v2 { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; margin-bottom:20px; }
.demo-kpis-v2 article { padding:18px; border:1px solid var(--x-line); border-radius:18px; background:#fff; }
.demo-kpis-v2 article.retained { background:var(--x-mint); border-color:rgba(0,156,140,.18); }
.demo-kpis-v2 span,.demo-kpis-v2 small { display:block; color:#738196; }
.demo-kpis-v2 span { font-size:.75rem; font-weight:800; }
.demo-kpis-v2 strong { display:block; margin:7px 0 5px; font-size:1.55rem; letter-spacing:-.03em; }
.demo-kpis-v2 small { font-size:.72rem; line-height:1.35; }
.demo-grid-v2 { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(390px,.8fr); gap:20px; align-items:start; }
.demo-panel-v2 { overflow:hidden; border:1px solid var(--x-line); border-radius:22px; background:#fff; box-shadow:0 10px 32px rgba(16,36,59,.045); }
.demo-panel-heading { display:flex; justify-content:space-between; gap:18px; align-items:end; padding:20px 22px; border-bottom:1px solid var(--x-line); }
.demo-panel-heading .eyebrow-v2 { margin-bottom:5px; }
.demo-panel-heading h2 { margin:0; font-size:1.35rem; }
.demo-panel-heading input { width:220px; max-width:34vw; }
.transaction-table-wrap { overflow-x:auto; }
.transaction-table { width:100%; min-width:760px; border-collapse:collapse; }
.transaction-table th,.transaction-table td { padding:13px 14px; border-bottom:1px solid #edf1f3; text-align:left; vertical-align:middle; }
.transaction-table th { background:#fbfcfd; color:#728095; font-size:.7rem; text-transform:uppercase; letter-spacing:.055em; }
.transaction-table td { font-size:.84rem; }
.transaction-table tbody tr { cursor:pointer; transition:background .12s ease; }
.transaction-table tbody tr:hover,.transaction-table tbody tr.is-selected { background:#edf9f6; }
.status-pill { display:inline-flex; padding:5px 8px; border-radius:999px; background:#eef4f5; color:#3d5c66; font-size:.69rem; font-weight:800; }
.status-pill.cancelled { background:#fff0ee; color:#8b4540; }
.status-pill.completed { background:#edf2fa; color:#455879; }
.detail-panel-v2 { position:sticky; top:94px; }
.detail-empty { padding:34px 22px; color:#718095; line-height:1.6; }
.detail-content { padding:20px 22px 26px; }
.detail-meta { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin-bottom:18px; }
.detail-meta div { padding:11px; border-radius:11px; background:#f6f9fa; }
.detail-meta span,.detail-list span { display:block; color:#758398; font-size:.7rem; }
.detail-meta strong { display:block; margin-top:4px; font-size:.82rem; }
.money-story { overflow:hidden; border:1px solid var(--x-line); border-radius:15px; }
.money-story > div { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:12px 13px; border-bottom:1px solid var(--x-line); }
.money-story > div:last-child { border-bottom:0; }
.money-story span { color:#6d7c8f; font-size:.78rem; }
.money-story strong { white-space:nowrap; }
.money-story .story-income { background:#f7fbff; }
.money-story .story-subtotal { background:#f6f8f9; }
.money-story .story-total { background:var(--x-mint); }
.money-story .story-total strong { color:var(--x-teal-dark); font-size:1.25rem; }
.detail-section { margin-top:22px; }
.detail-section h3 { margin:0 0 10px; font-size:.96rem; }
.detail-list { display:grid; gap:9px; }
.detail-list-item { padding:11px 12px; border:1px solid var(--x-line); border-radius:12px; background:#fbfcfd; }
.detail-list-item > strong { display:block; margin-bottom:4px; }
.detail-list-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin-top:9px; }
.detail-list-grid strong { display:block; margin-top:3px; font-size:.78rem; }
.explanation-box { padding:14px; border-radius:14px; background:#f2faf8; }
.explanation-box p { margin:0; color:#5f7181; line-height:1.55; }
.demo-bottom { padding-bottom:0; }
.demo-error { color:#a33d36; font-weight:800; }
@media(max-width:1080px){.demo-kpis-v2{grid-template-columns:repeat(3,minmax(0,1fr));}.demo-grid-v2{grid-template-columns:1fr}.detail-panel-v2{position:static}}
@media(max-width:760px){.demo-hero-v2{grid-template-columns:1fr}.demo-guide{grid-template-columns:120px 1fr}.demo-guide img{width:145px}.demo-company-card-v2{grid-template-columns:1fr}.demo-kpis-v2{grid-template-columns:1fr 1fr}.demo-panel-heading{align-items:stretch;flex-direction:column}.demo-panel-heading input{width:100%;max-width:none}.detail-meta{grid-template-columns:1fr 1fr}}