/* Fade District booking demo — scoped under .app */
.app{
  --g:#e3b25a;--g2:#f3cd85;--gdim:rgba(227,178,90,.14);
  --p0:#0e0d0b;--p1:#16140f;--p2:#1e1b15;--p3:#28241c;
  --t1:#f5efe2;--t2:#c4bba9;--t3:#857d6e;--ln:rgba(245,239,226,.09);--ln2:rgba(245,239,226,.17);
  --ok:#6fd39c;--bad:#ef6b5b;--blue:#7fb4ec;
  position:relative;background:radial-gradient(1200px 500px at 85% -10%,rgba(227,178,90,.09),transparent 60%),var(--p0);
  color:var(--t1);font-family:var(--body);min-height:620px;overflow:hidden;
}
.app h2{font:700 clamp(22px,2.4vw,28px) var(--display);letter-spacing:-.03em}
.app h3{font:600 13px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--t3)}
.app .mono{font-family:var(--mono)}
.app [hidden]{display:none!important}
.fd-sub{color:var(--t2);font-size:14.5px;margin-top:6px}

/* top bar */
.fd-top{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px clamp(14px,2.4vw,26px);border-bottom:1px solid var(--ln);background:rgba(14,13,11,.7)}
.fd-logo{display:flex;align-items:center;gap:10px;color:var(--g)}
.fd-logo b{display:block;font:800 16px var(--display);letter-spacing:.06em;color:var(--t1);line-height:1.1}
.fd-logo small{display:block;font:500 11px var(--mono);letter-spacing:.06em;color:var(--t3);text-transform:uppercase}
.fd-tabs{display:flex;gap:4px;padding:4px;border:1px solid var(--ln2);border-radius:12px;background:var(--p1);margin-left:auto}
.fd-tab{min-height:40px;padding:0 14px;border:0;border-radius:9px;background:transparent;color:var(--t2);font:600 13.5px var(--body);white-space:nowrap}
.fd-tab.on{background:var(--g);color:#1a1205}
.fd-play{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 16px;border-radius:12px;border:1px solid var(--g);background:transparent;color:var(--g);font:600 13.5px var(--body)}
.fd-play:hover{background:var(--gdim)}
.fd-play.on{background:var(--g);color:#1a1205}
@media (max-width:700px){
  .fd-top{gap:10px}
  .fd-tabs{order:3;margin-left:0;width:100%}
  .fd-tab{flex:1}
  .fd-play{margin-left:auto}
}

.fd-view{padding:clamp(16px,2.6vw,28px)}

/* steps */
.fd-steps{list-style:none;margin:0 0 20px;padding:0;display:flex;gap:6px}
.fd-steps li{flex:1;display:flex;align-items:center;gap:9px;padding:10px 12px;border-radius:12px;background:var(--p1);border:1px solid var(--ln);color:var(--t3);font:600 13px var(--body);min-width:0;transition:all .25s var(--ease)}
.fd-steps li b{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--ln2);font:600 12px var(--mono)}
.fd-steps li span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fd-steps li.done{color:var(--t2);cursor:pointer}
.fd-steps li.done b{background:var(--gdim);border-color:var(--g);color:var(--g)}
.fd-steps li.cur{color:var(--t1);border-color:var(--g);background:linear-gradient(180deg,var(--gdim),transparent)}
.fd-steps li.cur b{background:var(--g);color:#1a1205;border-color:var(--g)}
@media (max-width:560px){.fd-steps li{justify-content:center;padding:9px 6px}.fd-steps li:not(.cur) span{display:none}.fd-steps li.cur{flex:2.6}}

.fd-book{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:22px;align-items:start}
@media (max-width:900px){.fd-book{grid-template-columns:minmax(0,1fr)}}
.fd-panel{animation:fdIn .35s var(--ease)}
@keyframes fdIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* services */
.fd-services{margin-top:18px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:620px){.fd-services{grid-template-columns:minmax(0,1fr)}}
.fd-svc{position:relative;text-align:left;display:grid;grid-template-columns:48px 1fr auto;gap:14px;align-items:center;padding:16px;border-radius:16px;border:1px solid var(--ln2);background:var(--p1);color:var(--t1);transition:border-color .2s,background .2s,transform .15s}
.fd-svc:hover{border-color:rgba(227,178,90,.5)}
.fd-svc:active{transform:scale(.985)}
.fd-svc.on{border-color:var(--g);background:linear-gradient(135deg,rgba(227,178,90,.16),var(--p1) 70%);box-shadow:0 0 0 1px var(--g) inset}
.fd-svc__ic{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;background:var(--p3);color:var(--g)}
.fd-svc__ic svg{width:26px;height:26px}
.fd-svc b{display:block;font:700 16px var(--body)}
.fd-svc small{display:block;color:var(--t2);font-size:13px;margin-top:3px;line-height:1.4}
.fd-svc__p{text-align:right}
.fd-svc__p strong{display:block;font:700 19px var(--display);color:var(--g2)}
.fd-svc__p em{font:500 11.5px var(--mono);font-style:normal;color:var(--t3)}
.fd-svc .fd-badge{position:absolute;top:-8px;right:14px;padding:2px 8px;border-radius:999px;background:var(--g);color:#1a1205;font:700 10px var(--mono);letter-spacing:.06em;text-transform:uppercase}

/* barbers */
.fd-barbers{margin-top:18px;display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
@media (max-width:420px){.fd-barbers{grid-template-columns:repeat(2,minmax(0,1fr))}}
.fd-bb{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:18px 12px 16px;border-radius:16px;border:1px solid var(--ln2);background:var(--p1);color:var(--t1);transition:border-color .2s,background .2s,transform .15s}
.fd-bb:hover{border-color:rgba(227,178,90,.5)}
.fd-bb.on{border-color:var(--g);background:linear-gradient(180deg,rgba(227,178,90,.16),var(--p1));box-shadow:0 0 0 1px var(--g) inset}
.fd-av{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;font:700 20px var(--display);color:#14110b;position:relative}
.fd-av::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px dashed rgba(245,239,226,.25)}
.fd-av--any{background:var(--p3)!important;color:var(--g)}
.fd-bb b{font:700 15px var(--body)}
.fd-bb small{font-size:12.5px;color:var(--t2);line-height:1.35}
.fd-bb .fd-rate{font:500 11.5px var(--mono);color:var(--g2)}
.fd-bb .fd-next{font:500 11px var(--mono);color:var(--ok)}

/* date strip */
.fd-strip-wrap{margin-top:18px;display:flex;align-items:center;gap:8px}
.fd-strip-nav{flex:none;width:40px;height:72px;border-radius:12px;border:1px solid var(--ln2);background:var(--p1);color:var(--t2);font-size:22px}
.fd-strip-nav:disabled{opacity:.3;cursor:default}
.fd-strip{flex:1;min-width:0;display:flex;gap:8px;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;padding:2px}
.fd-strip::-webkit-scrollbar{display:none}
.fd-day{flex:0 0 64px;height:72px;border-radius:12px;border:1px solid var(--ln2);background:var(--p1);color:var(--t1);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;transition:all .2s}
.fd-day small{font:600 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--t3)}
.fd-day b{font:700 21px var(--display)}
.fd-day i{font:500 10px var(--mono);font-style:normal;color:var(--ok)}
.fd-day i.low{color:var(--g)}
.fd-day i.full{color:var(--bad)}
.fd-day.on{background:var(--g);border-color:var(--g);color:#1a1205}
.fd-day.on small,.fd-day.on i{color:#4a3510}
@media (max-width:560px){.fd-strip-nav{display:none}}

.fd-slot-head{margin:20px 0 10px;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;font:600 14px var(--body)}
.fd-legend{display:flex;align-items:center;gap:6px;font:500 11.5px var(--mono);color:var(--t3)}
.fd-legend i{width:10px;height:10px;border-radius:3px;display:inline-block;margin-left:6px}
.lg-free{border:1px solid var(--g)}.lg-taken{background:repeating-linear-gradient(45deg,var(--p3) 0 3px,transparent 3px 6px);border:1px solid var(--ln2)}
.fd-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px}
.fd-slot{min-height:44px;border-radius:10px;border:1px solid rgba(227,178,90,.45);background:var(--p1);color:var(--t1);font:600 13.5px var(--mono);transition:all .15s}
.fd-slot:hover:not(:disabled){background:var(--gdim)}
.fd-slot:disabled{cursor:not-allowed;color:var(--t3);border-color:var(--ln);background:repeating-linear-gradient(45deg,rgba(245,239,226,.04) 0 4px,transparent 4px 8px);text-decoration:line-through;text-decoration-color:rgba(245,239,226,.25)}
.fd-slot.on{background:var(--g);border-color:var(--g);color:#1a1205}
.fd-noslots{grid-column:1/-1;padding:26px;text-align:center;color:var(--t2);border:1px dashed var(--ln2);border-radius:12px}

/* form */
.fd-form{margin-top:18px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fd-form label{display:flex;flex-direction:column;gap:6px;min-width:0}
.fd-form label.wide{grid-column:1/-1}
.fd-form label>span{font:600 12px var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--t3)}
.fd-form label>span em{text-transform:none;font-style:normal;color:var(--t3);opacity:.8}
.fd-form input:not([type=checkbox]){min-height:46px;padding:0 14px;border-radius:12px;border:1px solid var(--ln2);background:var(--p1);color:var(--t1);font:500 15px var(--body);width:100%}
.fd-form input:focus{outline:none;border-color:var(--g);box-shadow:0 0 0 3px var(--gdim)}
.fd-form input:invalid{border-color:rgba(239,107,91,.6)}
.fd-check{flex-direction:row!important;align-items:center;gap:12px!important;padding:12px 14px;border:1px solid var(--ln2);border-radius:12px;background:var(--p1);cursor:pointer}
.fd-check input{width:20px;height:20px;accent-color:var(--g);flex:none}
.fd-check span{font-size:14px;color:var(--t2)}
.fd-check b{color:var(--t1)}
@media (max-width:560px){.fd-form{grid-template-columns:minmax(0,1fr)}}

/* summary */
.fd-summary{position:sticky;top:76px;padding:20px;border-radius:18px;border:1px solid var(--ln2);background:linear-gradient(180deg,var(--p2),var(--p1))}
.fd-summary dl{margin:14px 0 0;display:grid;gap:10px}
.fd-summary dl div{display:flex;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:1px dashed var(--ln)}
.fd-summary dt{color:var(--t3);font-size:13.5px}
.fd-summary dd{margin:0;text-align:right;font:600 14px var(--body);color:var(--t1)}
.fd-total{margin-top:14px;display:flex;justify-content:space-between;align-items:baseline}
.fd-total span{font-weight:600}
.fd-total small{display:block;color:var(--t3);font:500 11px var(--mono)}
.fd-total b{font:700 30px var(--display);color:var(--g2)}
.fd-nav{margin-top:16px;display:grid;grid-template-columns:auto 1fr;gap:8px}
.fd-fine{margin-top:12px;font:500 11.5px var(--mono);color:var(--t3);text-align:center}
@media (max-width:900px){.fd-summary{position:static}}

.fd-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 18px;border-radius:12px;border:1px solid var(--ln2);background:var(--p2);color:var(--t1);font:600 14.5px var(--body);transition:transform .15s,background .2s,border-color .2s,opacity .2s}
.fd-btn:hover:not(:disabled){border-color:var(--g)}
.fd-btn:active:not(:disabled){transform:scale(.97)}
.fd-btn:disabled{opacity:.35;cursor:not-allowed}
.fd-btn--gold{background:var(--g);border-color:var(--g);color:#1a1205}
.fd-btn--gold:hover:not(:disabled){background:var(--g2)}
.fd-btn--ghost{background:transparent}

/* confirmation */
.fd-done{text-align:center}
.fd-tick{width:72px;height:72px;margin:6px auto 14px}
.fd-tick circle{fill:none;stroke:var(--g);stroke-width:2.5;stroke-dasharray:151;stroke-dashoffset:151;animation:fdDraw .6s var(--ease) forwards}
.fd-tick path{fill:none;stroke:var(--g);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40;animation:fdDraw .4s .45s var(--ease) forwards}
@keyframes fdDraw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.fd-tick circle,.fd-tick path{stroke-dashoffset:0}}
.fd-done-grid{margin:22px auto 0;display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:18px;text-align:left;max-width:720px}
@media (max-width:640px){.fd-done-grid{grid-template-columns:minmax(0,1fr)}}
.fd-ticket{position:relative;border-radius:18px;background:var(--p2);border:1px solid var(--ln2);padding:20px;overflow:hidden}
.fd-ticket::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:repeating-linear-gradient(-45deg,#c94a3a 0 8px,#f5efe2 8px 14px,#5a8fd6 14px 22px,#f5efe2 22px 28px)}
.fd-ticket .tk-svc{font:700 22px var(--display);letter-spacing:-.02em}
.fd-ticket .tk-when{margin-top:4px;color:var(--g2);font:600 15px var(--body)}
.fd-ticket .tk-row{margin-top:16px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.fd-ticket .tk-row div small{display:block;font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--t3)}
.fd-ticket .tk-row div span{font-weight:600;font-size:14px}
.fd-ticket .tk-addr{margin-top:16px;padding-top:14px;border-top:1px dashed var(--ln2);font-size:13px;color:var(--t2)}
.fd-phone{border-radius:26px;border:1px solid var(--ln2);background:#0a0a0a;padding:10px;box-shadow:0 20px 50px -20px rgba(0,0,0,.8)}
.fd-phone__top{display:flex;justify-content:space-between;align-items:center;padding:4px 8px 10px;font:500 11px var(--mono);color:var(--t3);border-bottom:1px solid var(--ln)}
.fd-phone__top b{color:var(--t1);font:600 12.5px var(--body)}
.fd-sms{padding:12px 4px 4px;display:flex;flex-direction:column;gap:8px;min-height:180px}
.fd-sms time{align-self:center;font:500 10.5px var(--mono);color:var(--t3)}
.fd-bub{max-width:92%;padding:9px 12px;border-radius:16px 16px 16px 4px;background:#26241f;font-size:13px;line-height:1.4;color:var(--t1);animation:fdIn .4s var(--ease) both}
.fd-bub.me{align-self:flex-end;background:#2c6fd6;border-radius:16px 16px 4px 16px}
.fd-bub.sched{border:1px dashed rgba(227,178,90,.5);background:transparent;color:var(--t2)}
.fd-done-actions{margin-top:22px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* owner */
.fd-owner-head{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap}
.fd-filter{display:flex;gap:6px;flex-wrap:wrap}
.fd-chip{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 12px;border-radius:999px;border:1px solid var(--ln2);background:var(--p1);color:var(--t2);font:600 12.5px var(--body)}
.fd-chip i{width:9px;height:9px;border-radius:50%}
.fd-chip.off{opacity:.4}
.fd-kpis{margin-top:18px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
@media (max-width:900px){.fd-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.fd-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
.fd-kpi{padding:14px;border-radius:14px;background:var(--p1);border:1px solid var(--ln);min-width:0}
.fd-kpi small{display:block;font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fd-kpi b{display:block;margin-top:4px;font:700 24px var(--display);letter-spacing:-.02em;white-space:nowrap}
.fd-kpi span{font:500 11.5px var(--mono);color:var(--t2)}
.fd-kpi--gold b{color:var(--g2)}
.fd-kpi--ok b{color:var(--ok)}
.fd-kpi--bad b{color:var(--bad)}
.fd-bar{margin-top:8px;height:5px;border-radius:9px;background:var(--p3);overflow:hidden}
.fd-bar i{display:block;height:100%;background:var(--g);border-radius:9px;transition:width .5s var(--ease)}

.fd-owner{margin-top:16px;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:start}
@media (max-width:900px){.fd-owner{grid-template-columns:minmax(0,1fr)}.fd-oside{display:contents}.fd-oside>#detail{order:-1}}
.fd-tl-wrap{border:1px solid var(--ln);border-radius:16px;background:var(--p1);overflow:hidden}
.fd-tl{position:relative}
.fd-tl-heads,.fd-tl-body{display:grid;grid-template-columns:48px repeat(var(--cols,3),minmax(0,1fr))}
.fd-tl-body{position:relative}
.fd-tl-corner{border-left:0}
.fd-tl-head{position:sticky;top:0;z-index:3;display:flex;align-items:center;gap:8px;padding:10px;border-bottom:1px solid var(--ln);border-left:1px solid var(--ln);background:var(--p2);font:600 13px var(--body);min-width:0}
.fd-tl-head span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fd-tl-head .fd-av{width:28px;height:28px;font-size:11px;flex:none}
.fd-tl-head .fd-av::after{display:none}
.fd-tl-gut{position:relative;border-right:0}
.fd-tl-gut span{position:absolute;right:6px;transform:translateY(-50%);font:500 10.5px var(--mono);color:var(--t3)}
.fd-tl-col{position:relative;border-left:1px solid var(--ln);background-image:repeating-linear-gradient(180deg,var(--ln) 0 1px,transparent 1px var(--hr,66px))}
.fd-appt{position:absolute;left:4px;right:4px;border-radius:9px;padding:5px 8px;text-align:left;border:1px solid;overflow:hidden;color:var(--t1);background:var(--p2);font-size:12px;line-height:1.25;transition:transform .15s,box-shadow .2s,background .2s;min-height:24px}
.fd-appt:hover{transform:translateX(2px)}
.fd-appt b{display:block;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fd-appt small{display:block;font:500 10.5px var(--mono);color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fd-appt.short{padding:3px 8px}.fd-appt.short small{display:none}
.fd-appt[data-st=booked]{border-color:rgba(227,178,90,.55);background:linear-gradient(90deg,rgba(227,178,90,.2),rgba(227,178,90,.07))}
.fd-appt[data-st=arrived]{border-color:rgba(111,211,156,.55);background:linear-gradient(90deg,rgba(111,211,156,.22),rgba(111,211,156,.06))}
.fd-appt[data-st=noshow]{border-color:rgba(239,107,91,.5);background:repeating-linear-gradient(45deg,rgba(239,107,91,.13) 0 6px,rgba(239,107,91,.05) 6px 12px);color:var(--t2)}
.fd-appt[data-st=noshow] b{text-decoration:line-through}
.fd-appt.sel{box-shadow:0 0 0 2px var(--t1);z-index:2}
.fd-appt.new::after{content:"NEW";position:absolute;top:4px;right:5px;padding:1px 5px;border-radius:5px;background:var(--blue);color:#06101c;font:700 9px var(--mono)}
.fd-appt.flash{animation:fdFlash 1.2s var(--ease) 2}
@keyframes fdFlash{50%{box-shadow:0 0 0 3px var(--blue)}}
.fd-now{position:absolute;left:48px;right:0;height:2px;background:var(--bad);z-index:2;pointer-events:none}
.fd-now::before{content:"";position:absolute;left:-5px;top:-4px;width:10px;height:10px;border-radius:50%;background:var(--bad)}
.fd-now span{position:absolute;right:6px;top:-18px;font:600 10px var(--mono);color:var(--bad);background:var(--p1);padding:0 4px;border-radius:4px}
@media (max-width:560px){.fd-tl-heads,.fd-tl-body{grid-template-columns:38px repeat(var(--cols,3),minmax(0,1fr))}.fd-now{left:38px}.fd-tl-head{padding:8px 6px;font-size:11.5px;gap:5px}.fd-tl-head .fd-av{width:22px;height:22px;font-size:9px}.fd-appt{left:2px;right:2px;padding:4px 5px;font-size:11px}}

.fd-oside{display:grid;gap:14px}
.fd-card{padding:16px;border-radius:16px;border:1px solid var(--ln2);background:var(--p1)}
.fd-empty{color:var(--t3);font-size:13.5px;text-align:center;padding:12px 0}
.fd-det-top{display:flex;align-items:center;gap:12px}
.fd-det-top .fd-av{width:44px;height:44px;font-size:15px}
.fd-det-top .fd-av::after{display:none}
.fd-det-top b{display:block;font:700 17px var(--body)}
.fd-det-top small{color:var(--t2);font-size:13px}
.fd-st{display:inline-block;margin-top:12px;padding:3px 10px;border-radius:999px;font:700 10.5px var(--mono);letter-spacing:.06em;text-transform:uppercase}
.fd-st.booked{background:var(--gdim);color:var(--g2)}.fd-st.arrived{background:rgba(111,211,156,.15);color:var(--ok)}.fd-st.noshow{background:rgba(239,107,91,.15);color:var(--bad)}
.fd-det-rows{margin-top:12px;display:grid;gap:6px;font-size:13.5px;color:var(--t2)}
.fd-det-rows div{display:flex;justify-content:space-between;gap:10px}
.fd-det-rows span:last-child{color:var(--t1);font-weight:600;text-align:right}
.fd-det-act{margin-top:14px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.fd-det-act .fd-btn{min-height:42px;padding:0 10px;font-size:13.5px}
.fd-btn--ok{border-color:rgba(111,211,156,.5);color:var(--ok)}.fd-btn--ok.on{background:var(--ok);color:#06140c}
.fd-btn--bad{border-color:rgba(239,107,91,.5);color:var(--bad)}.fd-btn--bad.on{background:var(--bad);color:#1c0603}
.fd-det-act .fd-btn--ghost{grid-column:1/-1;min-height:40px}
.fd-feed{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.fd-feed li{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--t2);padding:9px 10px;border-radius:10px;background:var(--p2)}
.fd-feed li b{color:var(--t1)}
.fd-feed li i{flex:none;margin-top:5px;width:8px;height:8px;border-radius:50%;background:var(--g)}
.fd-feed li.new{background:rgba(127,180,236,.12)}
.fd-feed li.new i{background:var(--blue)}
.fd-feed time{display:block;font:500 10.5px var(--mono);color:var(--t3)}

/* demo cursor */
.fd-cursor{position:absolute;left:0;top:0;z-index:40;pointer-events:none;opacity:0;transition:transform .7s var(--ease),opacity .3s;filter:drop-shadow(0 4px 8px rgba(0,0,0,.5))}
.fd-cursor.on{opacity:1}
.fd-cursor.click svg{animation:fdClick .25s}
@keyframes fdClick{50%{transform:scale(.8)}}
.fd-ripple{position:absolute;z-index:39;width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:50%;border:2px solid var(--g);pointer-events:none;animation:fdRip .5s ease-out forwards}
@keyframes fdRip{from{transform:scale(.3);opacity:1}to{transform:scale(1.6);opacity:0}}

.fd-book.is-done{grid-template-columns:minmax(0,1fr)}
.fd-owner-head>div:first-child{display:flex;flex-wrap:wrap;align-items:center;column-gap:12px}
.fd-owner-head>div:first-child .fd-sub{flex-basis:100%}
.fd-dnav{display:flex;gap:6px}
.fd-dnav-b{width:40px;height:40px;border-radius:10px;border:1px solid var(--ln2);background:var(--p1);color:var(--t1);font-size:20px;line-height:1}
.fd-dnav-b:disabled{opacity:.3;cursor:default}