/* CubeBooks app demo inside a fake MacBook: Drop → Read → Book → Reports ready. App canvas 960×600, scaled to fit. */
.cbm{position:relative;width:100%;overflow:hidden;border-radius:inherit}
.cbm .cb-stage{position:absolute;left:0;top:0;width:960px;height:600px;transform-origin:0 0;font-family:Inter,-apple-system,"Segoe UI",Arial,sans-serif;color:#1d2433;background:#F4F5F8;line-height:1.3;display:grid;grid-template-columns:52px 1fr;-webkit-font-smoothing:antialiased}
.cb-side{background:#15171F;display:flex;flex-direction:column;align-items:center;padding:14px 0;gap:14px}
.cb-logo{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#3D8BFF,#5146E5);color:#fff;font:700 13px/32px Inter,sans-serif;text-align:center;letter-spacing:-.5px}
.cb-side i{width:18px;height:18px;border-radius:5px;border:1.6px solid #5c6275;display:block}
.cb-side i.on{background:#5146E5;border-color:#5146E5;box-shadow:0 0 0 6px rgba(81,70,229,.25)}
.cb-main{display:flex;flex-direction:column;min-width:0;position:relative}
.cb-top{height:46px;background:#fff;border-bottom:1px solid #E6E8EE;display:flex;align-items:center;gap:14px;padding:0 20px;font-size:13px}
.cb-co{display:flex;align-items:center;gap:8px;font-weight:500}
.cb-co b{width:24px;height:24px;border-radius:7px;background:#EEF0FF;display:block;border:1px solid #DADDFB}
.cb-crumb{color:#6b7280}.cb-crumb strong{color:#1d2433;font-weight:600}
.cb-search{margin-left:auto;width:200px;height:32px;border-radius:9px;background:#F4F5F8;border:1px solid #E6E8EE;color:#9aa1b0;font-size:12px;display:flex;align-items:center;padding:0 12px}
.cb-av{width:30px;height:30px;border-radius:50%;background:#5146E5;color:#fff;font:600 11px/30px Inter;text-align:center}
.cb-page{position:relative;flex:1;overflow:hidden}
.cb-view{position:absolute;inset:0;padding:18px 22px;transition:opacity .6s ease,transform .6s ease}
.cb-view.v-rep{opacity:0;transform:translateY(14px);pointer-events:none}
.cbm[data-st="3"] .v-docs{opacity:0;transform:translateY(-14px)}
.cbm[data-st="3"] .v-rep{opacity:1;transform:none}
.cb-h1{font-size:22px;font-weight:700;letter-spacing:-.02em;color:#141a2a}
.cb-sub{font-size:13px;color:#6b7280;margin-top:3px}
/* drop zone */
.cb-drop{margin-top:14px;border:1.6px dashed #CDD2DE;border-radius:14px;background:#fff;display:flex;align-items:center;gap:16px;padding:14px 18px;position:relative;transition:border-color .4s,background .4s}
.cbm[data-st="0"] .cb-drop{border-color:#5146E5;background:#F6F5FF}
.cb-up{width:46px;height:46px;border-radius:12px;background:#5146E5;display:grid;place-items:center}
.cb-up svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2}
.cb-drop b{display:block;font-size:15.5px;font-weight:700;color:#141a2a}
.cb-drop span{font-size:12px;color:#6b7280}
.cb-btn{margin-left:auto;background:#5146E5;color:#fff;font:600 12.5px Inter;border-radius:9px;padding:9px 14px}
.cb-recv{position:absolute;right:150px;top:50%;transform:translateY(-50%);font:600 12px Inter;color:#5146E5;opacity:0;transition:opacity .4s}
.cbm[data-st="0"] .cb-recv{opacity:1}
/* flying files */
.cb-fly{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:5}
.cb-file{position:absolute;width:54px;height:66px;border-radius:7px;background:#fff;border:1px solid #DADFEA;box-shadow:0 10px 24px -10px rgba(20,26,42,.35);font:700 10px Inter;color:#fff;display:flex;align-items:flex-end;justify-content:center;padding-bottom:8px;opacity:0}
.cb-file:before{content:"";position:absolute;left:9px;right:9px;top:12px;height:3px;border-radius:2px;background:#E6E8EE;box-shadow:0 8px 0 #E6E8EE,0 16px 0 #E6E8EE}
.cb-file em{font-style:normal;border-radius:4px;padding:2px 5px}
.cbm[data-st="0"] .cb-file{animation:cbDrop 1.5s cubic-bezier(.5,0,.3,1) forwards}
@keyframes cbDrop{0%{opacity:0;transform:translate(0,-80px) rotate(var(--r))}20%{opacity:1}80%{opacity:1;transform:translate(var(--tx),var(--ty)) rotate(0) scale(.7)}100%{opacity:0;transform:translate(var(--tx),var(--ty)) scale(.4)}}
/* stat cards */
.cb-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
.cb-stat{background:#fff;border:1px solid #E6E8EE;border-radius:12px;padding:10px 16px}
.cb-stat b{display:block;font-size:24px;font-weight:700;color:#141a2a;font-variant-numeric:tabular-nums}
.cb-stat.wait b{color:#C2410C}
.cb-stat span{font-size:12.5px;color:#6b7280}
/* table */
.cb-tbl{margin-top:14px;background:#fff;border:1px solid #E6E8EE;border-radius:12px;overflow:hidden}
.cb-tbl .t{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;font-size:14px;font-weight:600;color:#141a2a}
.cb-tbl .t small{font-size:11.5px;color:#9aa1b0;font-weight:400}
.cb-row{display:grid;grid-template-columns:2.1fr 1.1fr 1.9fr .9fr .9fr;gap:10px;align-items:center;padding:0 16px;height:42px;border-top:1px solid #EEF0F4;font-size:13.5px}
.cb-row.hd{height:30px;font-size:10.5px;color:#8a92a3;text-transform:uppercase;letter-spacing:.05em;background:#FAFBFC}
.cb-row .f b{display:block;font-weight:600;color:#141a2a;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cb-row .f span{display:block;font-size:10.5px;color:#9aa1b0;font-family:ui-monospace,Menlo,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cb-row .amt b{font-weight:600;color:#141a2a}.cb-row .amt span{color:#6b7280}
.cb-row .tax{display:inline-block;margin-left:6px;font-size:10px;font-weight:600;color:#1D4ED8;background:#E7EEFF;border-radius:5px;padding:1px 6px;opacity:0;transform:scale(.8);transition:all .35s}
.cb-row .conf{display:flex;align-items:center;gap:7px;font-variant-numeric:tabular-nums}
.cb-row .conf i{width:40px;height:4px;border-radius:3px;background:#EEF0F4;position:relative;overflow:hidden;display:block}
.cb-row .conf i:after{content:"";position:absolute;left:0;top:0;bottom:0;width:0;background:#C2410C;transition:width .6s ease}
.cb-pill{font-size:11.5px;font-weight:600;border-radius:6px;padding:3px 8px;white-space:nowrap}
.cb-pill.rd{background:#EEF0FF;color:#5146E5}
.cb-pill.nd{background:#FFF1E7;color:#C2410C}
.cb-pill.ok{background:#E6F7EC;color:#15803D}
/* row states driven by JS: .r-in (visible), .r-read (filled), .r-book (booked) */
.cb-row.it{opacity:0;transform:translateX(-8px);transition:opacity .35s,transform .35s}
.cb-row.it.r-in{opacity:1;transform:none}
.cb-row.it .rv{opacity:0;transition:opacity .3s}
.cb-row.it .sk{display:block;height:8px;border-radius:4px;background:linear-gradient(90deg,#EEF0F4,#F7F8FA,#EEF0F4);background-size:200% 100%;animation:cbSk 1s linear infinite}
@keyframes cbSk{to{background-position:-200% 0}}
.cb-row.it.r-read .rv{opacity:1}
.cb-row.it.r-read .sk{display:none}
.cb-row.it.r-read .conf i:after{width:var(--c)}
.cb-row.it.r-book .conf i:after{background:#16A34A}
.cb-row.it.r-book .tax{opacity:1;transform:none}
.cb-row .st .cb-pill{display:none}
.cb-row.it.r-in .st .p0{display:inline-block}
.cb-row.it.r-read .st .p0{display:none}.cb-row.it.r-read .st .p1{display:inline-block}
.cb-row.it.r-book .st .p1{display:none}.cb-row.it.r-book .st .p2{display:inline-block}
/* toast */
.cb-toast{position:absolute;left:50%;bottom:22px;transform:translate(-50%,20px);background:#141a2a;color:#fff;border-radius:12px;padding:11px 16px;font-size:13px;display:flex;gap:10px;align-items:center;box-shadow:0 18px 40px -16px rgba(20,26,42,.6);opacity:0;transition:all .5s;z-index:6;white-space:nowrap}
.cb-toast i{width:18px;height:18px;border-radius:50%;background:#16A34A;display:grid;place-items:center;font-style:normal;font-size:11px}
.cbm[data-st="2"].booked .cb-toast{opacity:1;transform:translate(-50%,0)}
/* reports view */
.cb-banner{margin-top:14px;background:#fff;border:1px solid #E6E8EE;border-left:4px solid #16A34A;border-radius:12px;padding:14px 18px;display:flex;align-items:center;gap:14px}
.cb-banner b{font-size:14.5px;color:#141a2a}.cb-banner span{font-size:12.5px;color:#6b7280;display:block}
.cb-banner .cb-btn{margin-left:auto}
.cb-reps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}
.cb-rep{background:#fff;border:1px solid #E6E8EE;border-radius:14px;padding:16px 18px;opacity:0;transform:translateY(12px);transition:all .5s}
.cbm[data-st="3"] .cb-rep{opacity:1;transform:none}
.cbm[data-st="3"] .cb-rep:nth-child(2){transition-delay:.35s}.cbm[data-st="3"] .cb-rep:nth-child(3){transition-delay:.7s}
.cb-rep .hd{display:flex;justify-content:space-between;align-items:center}
.cb-rep h4{font-size:15px;font-weight:600;color:#141a2a;margin:0}
.cb-rep .lines{margin-top:12px}
.cb-rep .lines div{display:flex;justify-content:space-between;font-size:13.5px;padding:7px 0;border-top:1px solid #EEF0F4;color:#4b5263;font-variant-numeric:tabular-nums}
.cb-rep .lines div b{color:#141a2a;font-weight:600}
.cb-rep .lines div.tot{font-weight:700;color:#141a2a}.cb-rep .lines div.tot b{color:#15803D}
.cb-rep .chart{display:flex;align-items:flex-end;gap:7px;height:70px;margin-top:12px}
.cb-rep .chart s{flex:1;border-radius:4px 4px 0 0;background:linear-gradient(180deg,#7C74F0,#5146E5);height:0;transition:height .8s ease}
.cbm[data-st="3"] .cb-rep .chart s{height:var(--h)}
.cb-rep .cb-pill.ok{opacity:0;transition:opacity .4s}
.cbm[data-st="3"] .cb-rep .cb-pill.ok{opacity:1;transition-delay:1.2s}
.cb-rep .foot{margin-top:12px;font-size:11.5px;color:#6b7280}
/* step pill */
.cb-steps{position:absolute;right:22px;top:20px;display:flex;gap:4px;background:#fff;border:1px solid #E6E8EE;border-radius:999px;padding:4px;z-index:7;box-shadow:0 10px 24px -14px rgba(20,26,42,.4)}
.cb-steps span{font:600 11.5px Inter;color:#8a92a3;padding:6px 11px;border-radius:999px;transition:all .3s}
.cb-steps span.on{background:#5146E5;color:#fff}
/* browser frame */
.cbm-frame{border-radius:18px;overflow:hidden;border:1px solid var(--line,#e5e7eb);box-shadow:0 30px 60px -24px rgba(16,24,40,.3);background:#fff}
.cbm-frame .bar{display:flex;align-items:center;gap:6px;padding:11px 14px;border-bottom:1px solid var(--line,#e5e7eb);background:var(--paper-2,#EDF2F9)}
.cbm-frame .bar i{width:10px;height:10px;border-radius:50%;background:rgba(10,10,10,.15);display:block}
.cbm-frame .bar span{margin-left:14px;font-family:var(--mono,monospace);font-size:11.5px;color:var(--ink-3,#666)}
@media (prefers-reduced-motion:reduce){.cbm *{animation:none!important;transition:none!important}}

/* fake MacBook */
.mac{position:relative;margin:0 auto;max-width:100%}
.mac .lid{position:relative;background:#0d0f14;border-radius:18px 18px 6px 6px;padding:2.2% 2.2% 2.6%;box-shadow:0 0 0 1.5px #3a3f4b inset,0 40px 70px -30px rgba(7,18,43,.55)}
.mac .lid:before{content:"";position:absolute;left:50%;top:0;width:13%;height:2.2%;min-height:8px;transform:translateX(-50%);background:#0d0f14;border-radius:0 0 8px 8px;z-index:3}
.mac .scr{position:relative;border-radius:6px;overflow:hidden;background:#F4F5F8}
.mac .win{display:flex;align-items:center;gap:7px;height:30px;padding:0 12px;background:#E9EBF0;border-bottom:1px solid #D9DCE3}
.mac .win i{width:11px;height:11px;border-radius:50%;display:block}
.mac .win i:nth-child(1){background:#FF5F57}.mac .win i:nth-child(2){background:#FEBC2E}.mac .win i:nth-child(3){background:#28C840}
.mac .win span{margin:0 auto;background:#fff;border-radius:6px;padding:3px 40px;font:500 11.5px Inter,sans-serif;color:#6b7280;transform:translateX(-24px)}
.mac .base{position:relative;height:16px;margin:0 -4%;background:linear-gradient(180deg,#d9dce3,#aeb3bd);border-radius:0 0 14px 14px;box-shadow:0 18px 30px -16px rgba(7,18,43,.6)}
.mac .base:before{content:"";position:absolute;left:50%;top:0;width:16%;height:6px;transform:translateX(-50%);background:#9ba1ac;border-radius:0 0 8px 8px}
.mac.small .lid{border-radius:12px 12px 4px 4px}.mac.small .win{height:22px}.mac.small .win i{width:8px;height:8px}.mac.small .win span{font-size:9px;padding:2px 22px}.mac.small .base{height:10px}

/* after the drop, the drop zone folds so the table has room */
.cb-drop{max-height:90px;overflow:hidden;transition:border-color .4s,background .4s,max-height .6s ease,padding .6s ease}
.cbm[data-st="1"] .cb-drop,.cbm[data-st="2"] .cb-drop{max-height:48px;padding:6px 14px}
.cbm[data-st="1"] .cb-drop span,.cbm[data-st="2"] .cb-drop span{display:none}
.cbm[data-st="1"] .cb-up,.cbm[data-st="2"] .cb-up{width:34px;height:34px}
.cb-stat b{font-size:22px}