:root{--ff-claim-jit:#fff200;--ff-claim-used-jit:#fff200;--ff-claim-other:#ff00e6;--ff-claim-missed:#ff1d1d;--ff-claim-current:#f59e0b;--ff-claim-previous:#f6b26b}
/* Demo framing and local controls; shared product sheet CSS remains authoritative. */
*{box-sizing:border-box}
body.dark.demo-app{margin:0;font:14px/1.5 Arial,sans-serif;color:#edf1f4;--ff-claim-jit:#fff200;--ff-claim-used-jit:#fff200}
body.dark.demo-app [hidden]{display:none!important}
.demo-app button,.demo-app input,.demo-app select{font:inherit}
.demo-app button,.demo-app .demo-button{cursor:pointer;min-height:36px;padding:7px 12px;border:1px solid #41474d;border-radius:5px;background:#1a1d21;color:#edf1f4;font-weight:600}
.demo-app button:hover,.demo-app .demo-button:hover{background:#292e34;border-color:#798790}
.demo-app button:focus-visible,.demo-app .demo-button:focus-visible,.demo-app input:focus-visible,.demo-app select:focus-visible,.demo-app summary:focus-visible,.sheet-scroll:focus-visible{outline:2px solid #87c4d5;outline-offset:3px}
.demo-app input,.demo-app select{display:block;width:100%;min-height:39px;margin-top:5px;padding:8px 10px;color:#edf1f4;background:#101215;border:1px solid #444c55;border-radius:5px}
.demo-app label{display:block;font-size:13px;font-weight:600;color:#c8d1d8}
#demo-banner{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px max(20px,calc((100vw - 1460px)/2));background:#182126;border-bottom:1px solid #40535d;color:#d9eef5;font-size:13px}
#demo-banner>span{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
#demo-banner i,.status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#8bbbc5;flex-shrink:0}
#demo-banner strong{letter-spacing:.015em;white-space:nowrap}
#demo-banner button{min-height:30px;padding:4px 10px;background:transparent;font-size:12px;white-space:nowrap}
.banner-detail{color:#9dabb2}
.demo-shell{width:min(1460px,100%);margin:0 auto;padding:0 24px}
.demo-header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 0 17px}
.demo-brand{display:flex;align-items:center;gap:11px}
.demo-brand img{object-fit:contain;width:48px;height:48px}
.demo-brand p{margin:0;color:#f1f6f8;font-size:21px;letter-spacing:.19em;font-weight:800}
.demo-brand span{font-size:12px;color:#8f9da5;letter-spacing:.08em}
.store-label{display:flex;align-items:center;gap:9px;font-size:13px;color:#d5dce2}
.muted{color:#a1acb4;font-size:13px}
.demo-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid #414950;border-radius:8px;overflow:hidden;gap:0}
.demo-nav button{position:relative;min-height:48px;border:0;border-left:1px solid #414950;border-radius:0;background:#15181c;color:#aab5bf}
.demo-nav button:first-child{border-left:0}
.demo-nav button.active{background:#19252c;box-shadow:inset 0 0 0 1px #7bb3c4;color:#e8f6fc}
.nav-count{display:inline-block;padding:0 6px;margin-left:5px;border:1px solid #647681;border-radius:4px;font-size:11px;line-height:17px;vertical-align:middle}
.receipt{margin-top:14px;padding:9px 12px;background:#10191e;border-left:2px solid #779fae;color:#b8d1dc;font-size:13px;min-height:38px}
.walkthrough{margin:10px 0 24px;border-bottom:1px solid #292e33;padding:0 2px 12px;color:#c5d0d7}
.walkthrough summary{cursor:pointer;font-size:13px;font-weight:600}
.walkthrough summary span{margin-left:10px;color:#7e8e98;font-weight:400;font-size:12px}
.walkthrough ol{padding-left:23px;margin-bottom:3px;max-width:950px;color:#aebdc6;font-size:13px}
.walkthrough li{padding:4px 0}
.walkthrough button{display:inline;min-height:0;padding:0;border:0;background:transparent;color:#bde3ef;text-decoration:underline}
.page-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:19px}
.eyebrow{margin:0 0 5px;font-size:11px;letter-spacing:.15em;color:#8397a3;font-weight:700}
.demo-app h1{margin:0;color:#eef2f5;font-size:27px;line-height:1.2;font-weight:650;letter-spacing:-.025em}
.demo-app h2{margin:0;color:#dce5eb;font-size:16px;font-weight:600}
.subtle-chip{font-size:11px;color:#a0b1bc;border:1px solid #343f47;padding:5px 9px;border-radius:5px;white-space:nowrap}
.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:18px}
.metrics button{text-align:left;padding:13px 15px;background:#101317;border:1px solid #30383f;border-radius:7px}
.metrics span{display:block;font-size:12px;font-weight:400;color:#a0b0ba}
.metrics strong{display:block;margin-top:3px;font-size:27px;line-height:1.3;font-weight:500;color:#e4eef3}
.metrics button.selected{border-color:#6d939f;background:#141e24}
.workspace-card{min-width:0;border:1px solid #30383e;border-radius:7px;background:#101317;overflow:hidden}
.workspace-card>.toolbar,.section-heading{padding:15px 16px}
.toolbar{display:flex;align-items:end;gap:12px;flex-wrap:wrap}
.toolbar label{min-width:150px;flex:1}
.toolbar .search-label{flex:1.6;min-width:220px}
.toolbar button{min-height:39px;margin-bottom:0}
.toolbar p,.section-heading p{margin:4px 0 0}
.toolbar>div{flex:1}
.legend{display:flex;gap:15px;flex-wrap:wrap;padding:0 16px 12px;font-size:11px;color:#9fabB4}
.legend span{display:flex;align-items:center;gap:6px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:1px}
.legend-yellow{background:var(--ff-claim-jit)}.legend-red{background:var(--ff-claim-missed)}.legend-previous{background:var(--ff-claim-previous)}.legend-current{background:var(--ff-claim-current)}.legend-white{background:#fff}
.sheet-scroll{width:100%;overflow:auto;background:#fff;min-width:0}
body.dark.demo-app table.ff-sheet-table{margin:0!important}
.demo-app table.ff-sheet-table thead th{cursor:default!important}
.demo-app .claim-details-grid{display:grid;gap:8px 16px}
.table-footer{display:flex;justify-content:space-between;gap:12px;padding:10px 14px;color:#91a0aa;font-size:12px}
.checkin-layout{display:grid;grid-template-columns:minmax(250px,.72fr) minmax(0,1.65fr);gap:17px}
.form-card{padding:19px}
.form-card>p{margin:6px 0 18px}
.form-card label{margin-top:15px}
.inline-note{margin:16px 0;padding:11px 12px;border:1px solid #303e47;border-radius:5px;background:#131e24;font-size:12px;color:#9eb4c1}
.form-card .primary-action{width:100%;margin-top:0;color:#e2f2fa;background:#23353e;border-color:#7197a6}
.section-heading{display:flex;justify-content:space-between;gap:12px;align-items:center}
.spaced{margin-top:18px}
.demo-app .empty{padding:18px;margin:0;color:#9fb1be;font-size:13px}
.demo-app .success-text{color:#276345}
#count-summary{margin:14px 16px}
body.dark.demo-app .count-difference{background:#fff2cc!important;color:#684c00!important}
.comms-layout{display:grid;grid-template-columns:minmax(260px,.8fr) minmax(0,1.2fr);gap:18px}
.message-card{padding:8px 7px 22px}
.message-card>p{margin:0 16px 15px}
.message-preview{margin:0 16px;padding:22px;background:#eef2f5;color:#263843;border-radius:8px 8px 8px 0;line-height:1.75;min-height:140px;white-space:pre-wrap}
.message-status{display:flex;align-items:center;gap:7px;margin:14px 16px 0;color:#8ca5b3;font-size:12px}
.demo-footer{display:flex;justify-content:space-between;gap:20px;margin-top:36px;padding:20px 0 25px;border-top:1px solid #262d33;color:#778894;font-size:12px}
.demo-footer>span:first-child{letter-spacing:.2em;font-size:10px}
.age-part-name{font-weight:600}
.age-part-sub{font-size:11px;line-height:1.5}
.age-status{display:inline-block;padding:3px 6px;text-transform:capitalize}
.demo-back-link{display:inline-block;color:#bde3ef;text-decoration:underline;font-size:13px;padding:8px 0}
.demo-back-link:focus-visible{outline:2px solid #87c4d5;outline-offset:3px}
.demo-app .demo-ticket-link{font-size:12px;white-space:normal;line-height:1.4;display:inline-block}
.ticket-simulation-label{margin-top:0;font-size:13px}
.ticket-record-heading{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin:18px 0;color:#aebfc9;font-size:13px}
.ticket-record-heading strong{font-size:19px;color:#e0edf5}
.ticket-detail-layout{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.ticket-fields{display:grid;grid-template-columns:110px minmax(0,1fr);gap:10px 16px;margin-bottom:0}
.ticket-fields dt{color:#889eaa;font-size:12px}
.ticket-fields dd{margin:0;color:#d1dee6;overflow-wrap:anywhere;font-size:13px}
.ticket-totals{display:grid;grid-template-columns:1fr auto;gap:8px 24px;margin:18px 20px 20px auto;width:min(320px,calc(100% - 40px));font-size:14px}
.ticket-totals dt{color:#9cb1bd}.ticket-totals dd{margin:0;text-align:right;font-variant-numeric:tabular-nums;color:#e4edf2}
.not-found-page{padding-top:70px}.not-found-page>img{object-fit:contain;margin-bottom:20px}
.demo-file-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:0 16px 15px}
.demo-file-actions button{font-size:12px;min-height:32px}
.sample-import-panel{margin:0 16px 16px;padding:14px;border:1px solid #46535e;border-radius:6px;background:#172027}
.sample-import-panel h3{font-size:14px;margin:0;color:#d6e5ee}
.sample-import-panel pre{overflow:auto;max-width:100%;padding:12px;background:#10161b;color:#c4d6e1;font:12px/1.7 monospace;border:1px solid #303e49}
@media(max-width:700px){.ticket-detail-layout{grid-template-columns:1fr}.ticket-fields{grid-template-columns:85px minmax(0,1fr)}}
@media(max-width:850px){.demo-shell{padding:0 14px}.demo-header{padding:16px 0}.demo-nav{grid-template-columns:repeat(2,minmax(0,1fr))}.demo-nav button:nth-child(3){border-left:0;border-top:1px solid #414950}.demo-nav button:nth-child(4){border-top:1px solid #414950}.checkin-layout,.comms-layout{grid-template-columns:1fr}.banner-detail{display:none}.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.page-heading{align-items:flex-start}.page-heading>.subtle-chip{white-space:normal;text-align:right;max-width:150px}.demo-header .store-label{display:none}.section-heading{flex-wrap:wrap}.demo-app h1{font-size:25px}.toolbar label{min-width:130px}.table-footer,.demo-footer{flex-wrap:wrap}.demo-app .claim-details-grid{grid-template-columns:1fr!important}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

.demo-app .demo-button{display:inline-block;text-decoration:none}