/* taken live from HKClientPanel/web/app.css */
.cf{position:relative;height:300px;perspective:1100px;outline:none;touch-action:pan-y;user-select:none}.cfs{position:absolute;inset:0;transform-style:preserve-3d}
.cfc{position:absolute;left:50%;top:6px;width:min(330px,72vw);height:250px;border-radius:24px;overflow:hidden;cursor:pointer;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.2,.8,.2,1),opacity .6s;background:linear-gradient(155deg,#fffdf8,#f4e9d3);box-shadow:inset 0 0 0 1px rgba(214,178,122,.45),0 30px 50px -28px rgba(80,55,20,.55)}
[data-theme=dark] .cfc{background:linear-gradient(155deg,#2a2218,#15110c);box-shadow:inset 0 0 0 1px rgba(214,178,122,.35),0 30px 50px -28px #000}
.cfc:not(.on)>.cfx{opacity:.45;filter:blur(.6px)}.cfc:not(.on){box-shadow:inset 0 0 0 1px rgba(214,178,122,.3),0 18px 30px -24px rgba(80,55,20,.4)}.cfx{transition:opacity .5s,filter .5s}.cfc.on{transform-origin:50% 50%;box-shadow:inset 0 0 0 1px rgba(214,178,122,.6),0 40px 60px -26px rgba(80,55,20,.6),0 0 0 6px rgba(214,178,122,.08)}.cfc.on>.cfx,.cfc.on>.cfg{transform:rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg));transition:transform .2s}
.cfg{position:absolute;left:18px;right:18px;bottom:0;height:62%;display:flex;align-items:flex-end;gap:7px;opacity:.9}.cfg i{flex:1;height:6%;border-radius:7px 7px 0 0;background:linear-gradient(180deg,rgba(214,178,122,.55),rgba(214,178,122,.08));transition:height .9s cubic-bezier(.2,.8,.2,1) calc(var(--n)*70ms)}.cfc.on .cfg i{height:var(--h)}.cfc.on .cfg i:last-child{background:linear-gradient(180deg,#d6b27a,rgba(185,143,85,.25));box-shadow:0 0 22px rgba(214,178,122,.6)}
.cfx{position:relative;padding:22px 24px;display:flex;flex-direction:column;gap:4px}.cfx small{color:var(--muted);font-size:12.5px;letter-spacing:.02em}.cfx b{font:400 48px/1.05 var(--serif);font-variant-numeric:tabular-nums;background:linear-gradient(110deg,#8d6a34,#d6b27a 40%,#f6e6c3 50%,#d6b27a 60%,#8d6a34);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:gl 4s linear infinite}[data-theme=dark] .cfx b{background-image:linear-gradient(110deg,#d6b27a,#f6e6c3 45%,#fff 50%,#f6e6c3 55%,#d6b27a)}
.cfx p{font-weight:700;font-size:16px;margin-top:2px}.cfx em{font-style:normal;color:var(--muted);font-size:13px}
.cfsh{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at var(--gx,50%) 0%,rgba(255,255,255,.55),transparent 55%);opacity:0;transition:opacity .3s}.cfc.on:hover .cfsh{opacity:1}
.cfd{position:absolute;left:0;right:0;bottom:4px;display:flex;justify-content:center;gap:7px}.cfd button{width:7px;height:7px;border-radius:4px;background:var(--line);transition:width .3s,background .3s}.cfd button.on{width:22px;background:#d6b27a}
.cf.fol .cfx{height:100%}.cf.fol .cfg{height:40%;opacity:.75}.cfx2{position:absolute;right:20px;top:18px;font:800 15px var(--sans);color:#fff;background:linear-gradient(120deg,#b98f55,#d6b27a);padding:5px 11px;border-radius:14px;box-shadow:0 6px 16px -6px rgba(141,106,52,.7)}.cf.fol .fn{font:400 25px/1.1 var(--serif);font-weight:400;margin:0;padding-right:70px}.cf.fol .cfx>small{margin-top:-2px}
.fb{display:flex;align-items:flex-end;gap:16px;margin-top:10px}.fb>span{display:flex;flex-direction:column;font-weight:700;font-size:18px;color:var(--muted)}.fb small{font-weight:500;font-size:11.5px;color:var(--muted)}.fb .fa b{font-size:44px}.fb>span:first-child:after{content:'→';position:absolute;margin:18px 0 0 56px;color:var(--accent);font-weight:400}
.fg{display:grid;grid-template-columns:1fr;gap:14px}@media (min-width:760px){.fg{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:stretch}}
.fgp{position:relative;overflow:hidden;display:flex;flex-direction:column;min-height:330px;border-radius:26px;padding:22px 22px 0;background:radial-gradient(120% 90% at 0% 0%,#fffaf0,#f1e3c6);box-shadow:inset 0 0 0 1px rgba(214,178,122,.5),0 30px 50px -30px rgba(80,55,20,.55)}[data-theme=dark] .fgp{background:radial-gradient(120% 90% at 0% 0%,#2c2318,#120e09)}
.fgh{display:flex;align-items:center;gap:14px}.fav{position:relative;width:74px;height:74px;flex:none}.fav svg{position:absolute;inset:0;transform:rotate(-90deg)}.fav circle{fill:none;stroke-width:5}.fav .r0{stroke:var(--line)}.fav .r1{stroke:url(#fgr);stroke:#c9a063;stroke-linecap:round;transition:stroke-dashoffset 1.6s cubic-bezier(.2,.8,.2,1);filter:drop-shadow(0 0 5px rgba(214,178,122,.7))}.fav span{position:absolute;inset:9px;border-radius:50%;display:grid;place-items:center;font:400 30px var(--serif);color:#fff;background:linear-gradient(140deg,#d6b27a,#8d6a34)}
.fgn p{font:400 26px/1.1 var(--serif)}.fgn small{color:var(--muted);font-size:13px}.fx2{margin-left:auto;align-self:flex-start;font:800 16px var(--sans);color:#fff;background:linear-gradient(120deg,#b98f55,#d6b27a);padding:6px 13px;border-radius:16px;box-shadow:0 6px 16px -6px rgba(141,106,52,.7)}
.fgs{display:flex;align-items:flex-end;gap:26px;margin:18px 0 4px}.fgs b{display:block;font-variant-numeric:tabular-nums}.fnow b{font:400 56px/1 var(--serif);color:var(--accent)}.fthen b{font-weight:700;font-size:20px;color:var(--muted)}.fgs small{font-size:12px;color:var(--muted)}
.fgl{display:block;width:calc(100% + 44px);margin:0 -22px;height:auto;flex:1;min-height:120px;overflow:visible}.fgl .ln{fill:none;stroke:#c9a063;stroke-width:3;stroke-linecap:round;transition:stroke-dashoffset 1.6s cubic-bezier(.2,.8,.2,1)}.fgl .ar{fill:url(#fga);transition:opacity 1.2s .5s}.fgl .dt{fill:#fff;stroke:#c9a063;stroke-width:3;animation:pu 1.6s infinite}
@keyframes pu{50%{r:8}}.fpop{position:absolute;inset:0;pointer-events:none}.fp{position:absolute;bottom:70px;display:flex;align-items:center;gap:3px;font:700 12px var(--sans);color:#8d6a34;background:rgba(255,255,255,.85);padding:3px 8px 3px 5px;border-radius:12px;box-shadow:0 4px 12px -4px rgba(80,55,20,.4);animation:fu 2.2s ease-out forwards}.fp svg{width:14px;height:14px;fill:none;stroke:#c9a063;stroke-width:2.2}
@keyframes fu{0%{transform:translateY(10px) scale(.6);opacity:0}15%{opacity:1;transform:translateY(0) scale(1)}100%{transform:translateY(-120px);opacity:0}}
.fgc{display:flex;flex-direction:column;gap:6px}@media (max-width:759px){.fgc{flex-direction:row;overflow-x:auto;margin:0 -22px;padding:2px 22px}.fgc::-webkit-scrollbar{display:none}.fgc button{flex:none;width:220px}}
.fgc button{display:flex;align-items:center;gap:11px;text-align:left;padding:9px 12px;border-radius:16px;background:var(--panel2,rgba(255,255,255,.6));box-shadow:inset 0 0 0 1px var(--line);transition:transform .3s,box-shadow .3s,background .3s;color:var(--ink)}.fgc button i{width:34px;height:34px;flex:none;border-radius:50%;display:grid;place-items:center;font:400 17px var(--serif);font-style:normal;color:#8d6a34;box-shadow:inset 0 0 0 2px #e8d4ad}.fgc button span{flex:1;font-weight:700;font-size:14px;min-width:0}.fgc small{display:block;font-weight:500;font-size:12px;color:var(--muted)}.fgc em{font-style:normal;font-weight:800;color:var(--accent);font-size:13px}
.fgc button.on{transform:translateX(6px);background:linear-gradient(120deg,#fff8ea,#f3e3c2);box-shadow:inset 0 0 0 1px #d6b27a,0 10px 20px -14px rgba(80,55,20,.6)}.fgc button.on i{color:#fff;background:linear-gradient(140deg,#d6b27a,#8d6a34);box-shadow:none}[data-theme=dark] .fgc button.on{background:linear-gradient(120deg,#2c2318,#1b150e)}
@media (prefers-reduced-motion:reduce){.fav .r1,.fgl .ln,.fgl .ar{transition:none}.fgl .dt{animation:none}}
@keyframes gl{to{background-position:-250% 0}}
@media (prefers-reduced-motion:reduce){.cfx b{animation:none}.cfc,.cfg i{transition:none}}