/* (Codex/GPT) 2026-10-04 · App-only sample views, sized for the homepage carousel. */
:root{--navy:#2b4163;--ink:#243b59;--muted:#788799;--line:#e1e4e6;--paper:#f6f5f1;--coral:#df8a6b;--green:#659079}*{box-sizing:border-box}body{margin:0;color:var(--ink);background:var(--paper);font:16px/1.45 'DM Sans',sans-serif;-webkit-font-smoothing:antialiased}button{font:inherit;cursor:pointer}button:focus-visible,[tabindex]:focus-visible{outline:3px solid #cd8866;outline-offset:-3px}[hidden]{display:none!important}h1,h2,h3,p{margin:0}h1,h2,h3{font-family:'Bricolage Grotesque','DM Sans',sans-serif;letter-spacing:-.5px}h1{font-size:34px;line-height:1.05}h2{font-size:27px;line-height:1.15}h3{font-size:20px}p{color:var(--muted);line-height:1.6}svg{display:block}.app-screen{width:1200px;height:744px;display:flex;flex-direction:column;position:relative;overflow:hidden;background:var(--paper)}
.app-header{height:90px;flex-shrink:0;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 38px}.app-brand{display:flex;gap:13px;align-items:center}.app-brand img{width:43px;height:43px}.app-brand strong{font:700 27px/1 'Bricolage Grotesque',sans-serif;letter-spacing:-.6px;display:block}.app-brand span{font-size:12px;color:#c4cfe0;display:block;margin-top:7px}.app-account{display:flex;align-items:center;gap:15px}.app-account>div{text-align:right}.app-account>div strong{font-size:15px;font-weight:500;display:block}.app-account>div span{font-size:11px;color:#c4cfe0;display:block;margin-top:4px}.avatar{width:40px;height:40px;border-radius:50%;background:#e8ded2;color:#9a7858;display:grid;place-items:center;font-size:13px;flex-shrink:0}.app-account .avatar{border:1px solid #ffffff38;color:white;background:#ffffff12}.sample-tag{color:#c5d0df;border:1px solid #ffffff30;border-radius:6px;font-size:11px;padding:5px 8px;margin-right:15px}
.app-workspace{flex:1;min-height:0;padding:27px 40px 20px}.app-panel{height:100%;animation:app-panel-in .28s ease both}.view-heading{display:flex;align-items:center;justify-content:space-between;margin:0 0 21px;gap:20px;min-height:61px}.view-heading p{font-size:15px;margin-top:9px}.status-pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;background:#eef1f4;border:1px solid #dde4e9;border-radius:20px;padding:6px 11px;white-space:nowrap;color:#6d7d92}.status-pill.green{background:#edf4ee;border-color:#d6e6db;color:#638a70}.status-pill.sand{background:#f8efdf;border-color:#eeddc4;color:#a78656}.status-pill.purple{background:#eee6f2;border-color:#ded0e7;color:#9374a4}
.two-col{display:grid;grid-template-columns:1fr 1.05fr;gap:23px;height:calc(100% - 82px)}.two-col>div{min-width:0}.app-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:23px 25px;box-shadow:0 3px 8px #2b416303}.card-label{font-size:11px;font-weight:600;letter-spacing:1.3px;color:#939aa4;margin-bottom:16px}.muted{color:#8c97a2!important;font-size:12px;line-height:1.7}.detail-row{display:flex;align-items:center;justify-content:space-between;gap:15px;border-bottom:1px solid #e9e8e5;padding:13px 0;font-size:14px}.detail-row:last-child{border:0}.detail-row>span{color:#8a94a1}.detail-row b,.detail-row strong{font-weight:500}.app-actions{display:flex;gap:10px;align-items:center;margin-top:24px;font-size:13px}.app-actions>span{padding:12px 17px;border:1px solid #e3e2de;border-radius:9px;color:#6d7d90;background:#fff}.app-actions>span.primary{background:var(--coral);border-color:var(--coral);color:white}.app-actions .wide{width:100%;display:flex;align-items:center;justify-content:space-between}.app-actions b{font-size:20px;font-weight:400}
.next-card{height:100%}.client-avatar{display:grid;place-items:center;width:49px;height:49px;border-radius:50%;background:#f2e2d7;color:#b38a6e;font-size:16px;margin:22px 0 15px}.next-card h2{font-size:36px;margin-bottom:5px}.next-card>p{font-size:16px}.visit-facts{display:flex;gap:18px;font-size:14px;margin:18px 0;color:#778697}.next-card .status-pill{font-size:11px}.next-card .app-actions{margin-top:22px}.book-card{height:100%}.visit{display:flex;align-items:center;gap:16px;border-left:4px solid;border-radius:8px;padding:17px 14px;margin-bottom:11px;min-height:73px}.visit time{font-size:14px;align-self:flex-start;padding-top:2px;color:#66778a;min-width:44px}.visit strong{font-size:15px;display:block}.visit div>span{font-size:12px;color:#6e7e91;display:block;margin-top:4px}.visit>small{margin-left:auto;font-size:11px;color:#86909d}.coral{background:#f6e6dc;border-color:#d99e7f!important}.blue{background:#e6edf5;border-color:#92abc8!important}.purple{background:#eee8f4;border-color:#bda4cf!important}.book-card .app-actions{margin-top:18px}
.segmented{display:flex;gap:16px;align-items:center;padding:6px 12px;font-size:12px;border:1px solid #dfe3e6;border-radius:8px;background:white;color:#8c99a7}.segmented b{padding:5px 10px;border-radius:5px;background:#2b4163;color:white;font-weight:500}.schedule-columns{grid-template-columns:1.65fr 1fr}.week-schedule{position:relative;padding:17px 18px 18px 61px}.week-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;border-bottom:1px solid #e5e9ec;padding-bottom:11px}.week-day{text-align:center;padding:5px;border-radius:8px;color:#8391a1}.week-day span{font-size:9px;letter-spacing:1px;display:block}.week-day b{font-size:22px;font-weight:500;display:block;margin-top:4px}.week-day.today{background:#2b4163;color:white}.schedule-hours{position:absolute;top:104px;left:14px;bottom:18px;display:grid;grid-template-rows:repeat(5,1fr);font-size:10px;color:#a2a9b0}.schedule-events{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(5,1fr);gap:3px;height:calc(100% - 90px);padding-top:6px;background:repeating-linear-gradient(to bottom,transparent 0,transparent calc(20% - 1px),#edf0f2 calc(20% - 1px),#edf0f2 20%)}.mini-event{grid-column:var(--col);grid-row:calc(var(--start) + 1) / span var(--span);font-size:11px;line-height:1.3;font-weight:500;padding:8px 5px;border-radius:6px;border-left:3px solid;overflow:hidden}.mini-event small{display:block;font-size:9px;margin-top:5px;color:#6f7e8c}.schedule-columns>.app-card{min-height:0}.schedule-columns>div:last-child>.app-card{padding:22px}.time-off{margin-top:17px}.row-title{font-size:19px;font-weight:500}.time-off>p{font-size:13px;margin:5px 0 10px}.time-off .app-actions{margin-top:13px}.time-off .app-actions span{padding:9px 12px}.schedule-columns .muted{margin-top:13px}
.clients-columns{grid-template-columns:.82fr 1.3fr}.search-field{font-size:13px;color:#9aa4b0;background:white;border:1px solid #dfe3e6;border-radius:9px;padding:11px 20px}.client-list{padding:8px}.client-row{display:flex;align-items:center;gap:12px;padding:19px 15px;border-bottom:1px solid #eceeec;border-radius:8px}.client-row:last-child{border:0}.client-row.chosen{background:#f3eee6}.client-row strong{display:block;font-size:15px;font-weight:500}.client-row small{display:block;font-size:11px;color:#8a95a4;margin-top:5px}.client-row>span:last-child{margin-left:auto;color:#8e9cad}.note-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:18px}.note-heading h2{font-size:25px}.client-note .card-label{margin-bottom:12px}.note-detail{margin:15px 0}.note-detail label,.next-note label{font-size:10px;letter-spacing:.8px;color:#ac8c6d}.note-detail p,.next-note p{font-size:14px;line-height:1.6;margin-top:4px}.next-note{padding:12px 15px;background:#f2f5ef;border-radius:8px}.note-footer{display:flex;justify-content:space-between;color:#779582;font-size:11px;margin-top:18px}
.pay-columns{grid-template-columns:1fr 1fr}.earnings{padding:27px 29px}.money{font:800 67px/1.1 'Bricolage Grotesque',sans-serif;letter-spacing:-2px;margin:20px 0 7px}.money>span{font-size:37px;color:#99a6b4;letter-spacing:-1px}.earnings>.muted{margin-bottom:25px}.pay-line{display:flex;justify-content:space-between;padding:15px 0;border-bottom:1px solid #e9ecee;font-size:14px}.pay-line:last-child{border:0}.pay-line span{color:#8b96a4}.pay-line strong{font-weight:500}.tier-card{background:#f0eaf5;border-color:#e1d9e9;padding:24px 26px}.tier-card .card-label{color:#9e8baa}.tier-title{display:flex;align-items:center;justify-content:space-between}.tier-title h2{font-size:37px}.tier-title h2>span{font:500 19px 'DM Sans',sans-serif;border:1px solid #dfd5e7;border-radius:22px;padding:5px 11px;vertical-align:middle;margin-left:10px;color:#a287b2;background:#fff9}.tier-star{font-size:55px;line-height:1;color:#b294c2;animation:app-star 3s ease-in-out infinite}.progress-track{height:7px;border-radius:10px;background:#ded7e6;margin:22px 0 15px;overflow:hidden}.progress-track>span{display:block;width:76.36%;height:100%;background:#b394c1;transform-origin:left;animation:app-fill 1.2s ease both;border-radius:inherit}.tier-next{display:flex;justify-content:space-between;font-size:12px;color:#a08aad}.tier-next strong{font-weight:500}.team-goal{margin-top:18px}.goal-number{font:600 30px 'Bricolage Grotesque',sans-serif}.goal-number>span{font:400 16px 'DM Sans',sans-serif;color:#9aa6ad}.progress-track.green{background:#e0e8de;margin:17px 0 10px}.progress-track.green>span{width:78.8%;background:#90b098}.team-goal .muted{font-size:12px}
.settings-columns{grid-template-columns:1fr 1fr}.profile{display:flex;align-items:center;gap:20px;margin:32px 0}.avatar.big{width:73px;height:73px;font-size:24px}.profile p{font-size:14px;margin-top:6px}.profile-card .detail-row{padding:18px 0}.notification-heading{display:flex;gap:13px;align-items:center;margin:29px 0 17px}.notification-icon{width:42px;height:42px;border-radius:12px;background:#eef2ef;color:#81a48b;font-size:26px;text-align:center}.notification-card>p{max-width:360px;font-size:15px}.notification-choice{margin:27px 0 18px;padding:20px 0;display:flex;align-items:center;justify-content:space-between;border-block:1px solid #e8eae7;font-size:14px}
.booth-columns{grid-template-columns:1.4fr 1fr}.calendar-card{padding:18px 23px}.month-head{display:flex;justify-content:space-between;align-items:center;margin:0 0 13px;font-size:18px}.month-head strong{font-weight:500}.month-head>span{color:#98a7b6;font-size:22px}.rent-calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}.weekday{font-size:9px;color:#9ca7b1;text-align:center;padding:4px 0 7px;letter-spacing:.6px}.rent-day{border:1px solid #e5e3de;border-radius:7px;background:#f0eee8;color:#bdc0bc;padding:5px 0;text-align:center;min-height:48px}.rent-day strong{font-size:15px;font-weight:500;display:block}.rent-day small{font-size:8px;display:block;margin-top:1px}.rent-day.yours{color:#699176;background:#e7efe7;border-color:#d9e4d7}.rent-day.open{background:#fff;color:#7f8e9b}.calendar-legend{display:flex;justify-content:center;gap:25px;color:#829987;font-size:10px;margin-top:15px}.rent-total{font:700 44px 'Bricolage Grotesque',sans-serif;color:#82a18b;margin:4px 0 8px}.rent-total>span{font:400 17px 'DM Sans',sans-serif;margin-left:7px}.booth-columns>div:last-child>.app-card{padding:18px 23px}.booth-columns p{font-size:13px;line-height:1.7}.booth-columns .card-label{margin-bottom:7px}.open-day{margin-top:14px;background:#fbf3e8;border-color:#edddc4}.open-day h2{font-size:23px;margin:9px 0 4px}.open-day .app-actions{margin-top:12px;margin-bottom:9px}.open-day .app-actions>span{font-size:12px;padding:10px 15px}.open-day .status-pill{font-size:10px;padding:4px 8px}.open-day small{font-size:10px}
.rent-columns{grid-template-columns:1fr 1fr}.rent-bill{padding:25px 29px}.rent-bill .money{margin-top:24px}.rent-bill p{font-size:14px}.bill-days{display:grid;grid-template-columns:1fr auto;gap:12px;font-size:13px;margin:23px 0;color:#92a0ad}.bill-days strong{font-weight:500;color:#6f8096}.rent-bill .app-actions{margin-top:23px}.auto-row{display:flex;align-items:center;justify-content:space-between;margin:24px 0 10px}.auto-row h2{font-size:24px}.auto-row p{font-size:13px;margin-top:7px}.toggle{height:26px;width:44px;border-radius:20px;background:#d9d5cc;position:relative}.toggle:after{content:'';position:absolute;height:20px;width:20px;background:white;border-radius:50%;top:3px;left:3px;pointer-events:none}.history-card{margin-top:18px}.paid-row{display:flex;gap:13px;align-items:center;margin:23px 0}.paid-check{width:38px;height:38px;display:grid;place-items:center;color:#88a694;background:#edf4ee;border-radius:50%;font-size:20px}.paid-row h3{font-size:19px}.paid-row p{font-size:12px;margin-top:4px}.paid-row>strong{font-size:20px;margin-left:auto}.receipt{font-size:12px;color:#7b9b87;background:#edf4ee;border-radius:8px;padding:13px 15px;animation:app-panel-in .6s .2s both}
.renter-schedule-columns{grid-template-columns:1.15fr 1fr}.upcoming-days{padding:24px}.chair-day{display:flex;align-items:center;gap:20px;padding:17px 0;border-bottom:1px solid #eceeea}.chair-day:last-child{border:0}.date-square{width:54px;text-align:center;flex-shrink:0}.date-square>span{font-size:10px;color:#97a5b4;display:block}.date-square strong{display:block;font:600 34px 'Bricolage Grotesque',sans-serif;margin-top:2px}.chair-day h3{font-size:22px}.chair-day p{font-size:13px;margin-top:4px}.chair-day>.status-pill{margin-left:auto;font-size:11px}.pending-card{background:#fbf3e7;border-color:#e9dac5}.pending-label{display:flex;align-items:center;gap:8px;font-size:12px;color:#b19974;margin:17px 0}.pending-label i{width:7px;height:7px;border-radius:50%;background:#c5a879;animation:app-pulse 2s infinite}.pending-card h2{font-size:26px}.pending-card>p{font-size:13px;margin:9px 0}.pending-card .detail-row{border-color:#ece0cd}.standing-days{margin-top:18px}.standing-days h3{font-size:21px}.standing-days>p{font-size:13px;margin-top:8px}
.app-tabbar{flex-shrink:0;height:81px;background:#fff;border-top:1px solid #dde3e6;display:flex;align-items:stretch;justify-content:center;gap:18px;padding:9px 90px 6px}.app-tabbar button{position:relative;flex:1;max-width:185px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;border:0;border-radius:12px;background:transparent;color:#96a2b0;font-size:12px;font-weight:500}.app-tabbar svg{width:25px;height:25px;fill:currentColor}.app-tabbar button[aria-selected=true]{background:#eef1f6;color:#2b4163}.app-tabbar button[aria-selected=true]:before{content:'';width:22px;height:3px;background:#e29677;position:absolute;top:0;left:calc(50% - 11px);border-radius:0 0 4px 4px;pointer-events:none}.app-tabbar button.demo-tap:after{content:'';position:absolute;width:50px;height:50px;border:2px solid #df8a6b;border-radius:50%;top:50%;left:50%;pointer-events:none;animation:app-tap .6s ease-out both}.app-demo-footer{display:flex;align-items:center;justify-content:space-between;gap:15px;height:29px;padding:0 29px;background:#fff;color:#a0a9b2;font-size:9px;border-top:1px solid #f1f2f1;flex-shrink:0}.app-demo-footer>div{display:flex;gap:14px}.app-demo-footer button{font:inherit;color:#8895a4;border:0;background:none;padding:5px 2px}.demo-pointer{position:absolute;left:0;top:0;width:36px;height:42px;z-index:20;opacity:0;pointer-events:none;filter:drop-shadow(0 3px 5px #223a5b30);transform-origin:5px 2px}.demo-pointer.is-visible{opacity:1}.demo-pointer svg{width:100%;height:100%}.app-motion-paused *{animation-play-state:paused!important}
@keyframes app-panel-in{from{opacity:.25;transform:translateY(6px)}to{opacity:1;transform:none}}@keyframes app-fill{from{transform:scaleX(.08)}to{transform:scaleX(1)}}@keyframes app-star{0%,100%{transform:rotate(-8deg) scale(.93)}50%{transform:rotate(9deg) scale(1.07)}}@keyframes app-pulse{0%,100%{opacity:.45}50%{opacity:1}}@keyframes app-tap{from{opacity:.8;transform:translate(-50%,-50%) scale(.3)}to{opacity:0;transform:translate(-50%,-50%) scale(1.5)}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.demo-pointer{display:none}}
/* Keep every view above the navigation; paused manual views stay fully legible. */
.app-panel{display:flex;flex-direction:column}.view-heading{flex-shrink:0}.two-col{flex:1;min-height:0;height:auto}.schedule-columns>div:last-child>.app-card{padding:16px 20px}.schedule-columns .detail-row{padding-block:10px}.schedule-columns .time-off{margin-top:12px}.schedule-columns .card-label{margin-bottom:12px}.booth-columns>div:last-child>.app-card{padding:15px 20px}.booth-columns .rent-total{font-size:39px}.open-day .card-label{display:none}.open-day .app-actions{margin-top:9px;margin-bottom:5px}.pending-card{padding:20px 22px}.standing-days{padding:18px 22px;margin-top:12px}.standing-days .card-label{margin-bottom:10px}.app-motion-paused .app-panel,.app-motion-paused .receipt,.app-motion-paused .progress-track>span{animation:none!important}