/* leodesign · 共用样式 */
:root{
  --ink:#111114; --ink-2:#5E606A; --ink-3:#8A8C94; --line:rgba(17,17,20,.10); --chip:rgba(17,17,20,.06); --chip-2:rgba(17,17,20,.10);
  --glass:rgba(255,255,255,.62); --sheet:rgba(255,255,255,.94); --bg:#F3F3F4; --accent:#E2245E;
  --ease:cubic-bezier(.22,1,.36,1); --spring:cubic-bezier(.34,1.25,.5,1);
  --f:"Geist","Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif; --f-cn:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  --f-mono:"Geist Mono",ui-monospace,Menlo,monospace;
  /* tokens the box editor uses */
  --panel:#fff; --panel-2:#F7F7F9; --line-2:rgba(17,17,20,.18); --chip-hi:rgba(17,17,20,.12); --brand:#111114; --brand-ink:#fff; --brand-soft:rgba(17,17,20,.06);
  --warn:#B4541A; --f-body:var(--f); --f-display:var(--f-cn);
  color-scheme:light;
}
*{box-sizing:border-box;scrollbar-width:none;-ms-overflow-style:none}
*::-webkit-scrollbar{display:none;width:0;height:0}
[hidden]{display:none!important}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--f);font-size:14px;overflow:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
img{display:block;max-width:100%}
input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none;display:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.glass{background:var(--glass);backdrop-filter:blur(24px) saturate(1.5);-webkit-backdrop-filter:blur(24px) saturate(1.5)}
.round{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;transition:background .3s,transform .3s var(--ease)}
.round:hover{background:#fff}
.round:active{transform:scale(.92)}
.round.sm{width:32px;height:32px;background:var(--chip)}
.pill{height:44px;border-radius:999px;padding:0 18px;display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;white-space:nowrap}
.pri{background:var(--ink);color:#fff;transition:transform .4s var(--ease),box-shadow .4s,opacity .3s}
.pri:hover{transform:translateY(-2px);box-shadow:0 16px 30px -14px rgba(17,17,20,.55)}
.pri:active{transform:scale(.96);transition-duration:.15s}
.pri[disabled]{opacity:.4;pointer-events:none}
.sec{background:var(--chip);transition:background .3s}
.sec:hover{background:var(--chip-2)}
.danger{color:#C21B48}

/* segmented control with a sliding pill */
.seg{position:relative;display:inline-flex;border-radius:999px;padding:3px;background:var(--chip)}
.seg.glass{padding:4px;background:var(--glass)}
.seg>i{position:absolute;top:3px;left:0;height:calc(100% - 6px);border-radius:999px;background:#fff;box-shadow:0 1px 2px rgba(17,17,20,.08),0 6px 14px -8px rgba(17,17,20,.3);
  transition:transform .55s var(--spring),width .55s var(--spring),opacity .3s;pointer-events:none}
.seg.glass>i{top:4px;height:calc(100% - 8px)}
.seg>button{position:relative;height:34px;padding:0 14px;font-size:12.5px;font-weight:600;border-radius:999px;white-space:nowrap;color:var(--ink-2);transition:color .3s}
.seg>button[aria-pressed="true"]{color:var(--ink)}
.seg.lg>button{height:36px;min-width:72px;font-size:13px}
.seg.sm>button{height:28px;padding:0 11px;font-size:12px}

/* fields */
.field{display:flex;flex-direction:column;gap:7px;font-size:12px;color:var(--ink-2)}
.input{height:46px;border-radius:14px;border:1.5px solid var(--line);background:#fff;padding:0 14px;font-size:14px;color:var(--ink);width:100%;transition:border-color .3s;outline:none}
.input:focus{border-color:var(--ink)}
.mono{font-family:var(--f-mono)}
input[type=range]{accent-color:var(--ink);width:100%;margin:0}
.switch{width:42px;height:26px;border-radius:999px;background:rgba(17,17,20,.16);position:relative;transition:background .3s;flex:none}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(17,17,20,.25);transition:transform .45s cubic-bezier(.34,1.4,.5,1)}
.switch[aria-checked="true"]{background:var(--ink)}
.switch[aria-checked="true"]::after{transform:translateX(16px)}

/* overlays */
@keyframes veilIn{from{opacity:0}to{opacity:1}}
@keyframes sheetIn{0%{opacity:0;transform:translateY(40px) scale(.97)}100%{opacity:1;transform:none}}
@keyframes sideIn{0%{opacity:0;transform:translateX(40px) scale(.98)}100%{opacity:1;transform:none}}
@keyframes popIn{0%{opacity:0;transform:translateY(-10px) scale(.98)}100%{opacity:1;transform:none}}
.veil{position:fixed;inset:0;z-index:30;background:rgba(243,243,244,.5);backdrop-filter:blur(24px) saturate(1.3);-webkit-backdrop-filter:blur(24px) saturate(1.3);animation:veilIn .35s ease both}
.sheet{position:fixed;z-index:31;inset:0;margin:auto;height:fit-content;width:min(560px,calc(100vw - 32px));max-height:calc(100vh - 40px);
  background:var(--sheet);border-radius:30px;box-shadow:0 40px 90px -40px rgba(17,17,20,.55);padding:26px;display:flex;flex-direction:column;gap:18px}
.sheet>.in{display:contents}
.sheet.anim{animation:sheetIn .6s var(--ease) both}
.sheet-h{display:flex;justify-content:space-between;align-items:center;gap:12px}
.sheet-h b{font-size:17px;font-weight:700}
.sheet .foot{display:flex;justify-content:flex-end;gap:10px;align-items:center}
.sheet .msg{font-size:12.5px;color:#C21B48;margin-right:auto;line-height:1.5}
.note{font-size:12px;line-height:1.6;color:var(--ink-2);margin:0}

/* menu with search (box types, brands) */
.pick{position:relative}
.pick-btn{width:100%;height:56px;border-radius:16px;border:1.5px solid var(--line);background:#fff;display:flex;align-items:center;gap:12px;padding:0 14px;text-align:left;transition:border-color .3s}
.pick-btn[aria-expanded="true"]{border-color:var(--ink)}
.pick-btn .ic{width:32px;height:32px;border-radius:9px;background:var(--chip);display:grid;place-items:center;flex:none;font-weight:700;font-size:13px}
.pick-btn .tx{flex:1;min-width:0}
.pick-btn .tx b{display:block;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pick-btn .tx span{display:block;font-family:var(--f-mono);font-size:11px;color:var(--ink-2)}
.pick-btn .tx .ph{font-family:var(--f);font-size:14px;color:var(--ink-3)}
.pick-btn svg.chev{transition:transform .35s var(--ease)}
.pick-btn[aria-expanded="true"] svg.chev{transform:rotate(180deg)}
.menu{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:5;background:#fff;border-radius:18px;box-shadow:0 0 0 1px rgba(17,17,20,.06),0 30px 60px -24px rgba(17,17,20,.4);
  padding:8px;display:flex;flex-direction:column;gap:6px;animation:popIn .35s var(--ease) both}
.menu .q{position:relative}
.menu .q svg{position:absolute;left:12px;top:12px}
.menu .q input{width:100%;height:40px;border-radius:12px;border:0;background:var(--chip);padding:0 12px 0 34px;font-size:13.5px;outline:none}
.menu .list{max-height:236px;overflow-y:auto;display:flex;flex-direction:column;gap:2px}
.menu .row{flex:none;min-height:46px;border-radius:12px;display:flex;align-items:center;gap:10px;padding:0 12px;text-align:left;transition:background .2s}
.menu .row:hover,.menu .row.kb{background:var(--chip)}
.menu .row .nm{flex:1;font-size:13.5px;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu .row .mt{font-family:var(--f-mono);font-size:11px;color:var(--ink-2);white-space:nowrap}
.menu .row .tick{width:16px;opacity:0}
.menu .row[aria-selected="true"] .tick{opacity:1}
.menu .row.add .nm{font-weight:500}
.menu .empty{padding:16px 12px;font-size:13px;color:var(--ink-2)}
.menu .foot{font-size:11.5px;color:var(--ink-2);padding:4px 10px 2px}

/* toast */
.toast{position:fixed;left:50%;top:22px;transform:translate(-50%,-12px);z-index:60;background:var(--ink);color:#fff;padding:10px 16px;border-radius:999px;font-size:13px;opacity:0;
  transition:opacity .3s,transform .5s var(--ease);pointer-events:none;max-width:calc(100% - 32px);text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* brand mark */
.mark{display:inline-flex;align-items:center;gap:10px}
.mark img{width:40px;height:auto}
.mark b{font-family:var(--f-cn);font-weight:900;font-size:19px;letter-spacing:.02em}

/* CSS 3D box used as a stand-in where there is no rendered cover yet */
.cbox{position:relative;transform-style:preserve-3d}
.cbox>div{position:absolute;left:0;top:0;transform-style:preserve-3d}
.cbox .f{position:absolute;backface-visibility:visible}

@keyframes orbBreathe{0%{transform:translate(-50%,-50%) scale(1)}100%{transform:translate(-50%,-50%) scale(1.08)}}
.orb{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none;animation:orbBreathe 7s ease-in-out infinite alternate;transition:background 1.2s var(--ease),left 1s var(--ease)}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001s!important;transition-duration:.001s!important}}

/* leodesign 字标：橙色 leo 固定，其余跟随文字颜色（暗色背景下自动变浅） */
.mark{color:var(--logo-ink,var(--ink))}
.mark .brand-logo{height:22px;width:auto;display:block}
.dark .mark,[data-theme="dark"] .mark{--logo-ink:#f4f4f6}
@media (prefers-color-scheme:dark){html.auto-dark .mark{--logo-ink:#f4f4f6}}