/* Studio dropdown (picker.js), DESIGN.md「下拉菜单」: the native select keeps the state. Opening grows the control itself
   into one glass surface — the control's label, value and chevron stay where they are on top, and the menu body unfolds
   from under them; closing folds it back. The control turns transparent while open so the glass reads as one piece.
   Loaded before style.css (studio) and pages.css (public pages: the language menu), whose rules override sizes. The glass
   variables also dress the studio's gift chip (style.css). */
.picker-host,.date-range,.welcome-gift{
  --picker-glass:color-mix(in srgb,var(--surface) 70%,transparent);--picker-edge:color-mix(in srgb,var(--line) 70%,transparent);
  --picker-shadow:0 0 0 .5px #26262420,0 22px 54px -14px #26262457,inset 0 1px 0 #ffffffb3;
  --picker-hover:color-mix(in srgb,var(--ink) 7%,transparent);--picker-radius:14px}
.picker-host{position:relative;cursor:pointer;min-width:0}
[data-theme=dark] :is(.picker-host,.date-range,.welcome-gift){--picker-glass:color-mix(in srgb,var(--surface) 72%,transparent);--picker-edge:#ffffff1a;
  --picker-shadow:0 0 0 .5px #00000080,0 24px 60px -12px #000000b3,inset 0 1px 0 #ffffff12;--picker-hover:#ffffff12}
.picker-host select{display:none!important}
.picker-host .picker-trigger{border:0;background:transparent;color:var(--ink);font:inherit;font-size:12px;line-height:20px;text-align:left;min-width:0;max-width:240px;padding:8px 22px 8px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.picker-host .chevron{transition:transform .2s cubic-bezier(.2,.8,.2,1)}
/* Open: the control stacks above its own menu body and lets the glass show through. */
html .picker-host.picker-open{z-index:35;background:transparent;border-color:transparent}
.picker-open:not(:has(.picker-closing)) .chevron{transform:rotate(180deg)}
.picker-panel{position:absolute;top:-1px;left:-1px;z-index:-1;display:flex;flex-direction:column;box-sizing:border-box;
  padding:calc(var(--picker-head,38px) + 1px) 5px 5px;cursor:default;
  background:var(--picker-glass);-webkit-backdrop-filter:blur(28px) saturate(1.7);backdrop-filter:blur(28px) saturate(1.7);
  border:1px solid var(--picker-edge);border-radius:var(--picker-radius);box-shadow:var(--picker-shadow);
  animation:picker-grow .22s cubic-bezier(.2,.8,.2,1)}
.picker-panel[hidden]{display:none}
.opens-up>.picker-panel{top:auto;bottom:-1px;padding:5px 5px calc(var(--picker-head,38px) + 1px);animation-name:picker-grow-up}
.picker-panel.picker-closing{pointer-events:none;animation:picker-fold .17s cubic-bezier(.4,0,.6,1) forwards}
.opens-up>.picker-panel.picker-closing{animation-name:picker-fold-up}
/* Grow from the control's own box (--picker-l/-r: where it sits in a wider menu), fold back into it. */
@keyframes picker-grow{from{clip-path:inset(0 var(--picker-r,0px) calc(100% - var(--picker-head,38px) - 2px) var(--picker-l,0px) round var(--picker-radius))}to{clip-path:inset(0 round var(--picker-radius))}}
@keyframes picker-fold{from{clip-path:inset(0 round var(--picker-radius))}to{clip-path:inset(0 var(--picker-r,0px) calc(100% - var(--picker-head,38px) - 2px) var(--picker-l,0px) round var(--picker-radius))}}
@keyframes picker-grow-up{from{clip-path:inset(calc(100% - var(--picker-head,38px) - 2px) var(--picker-r,0px) 0 var(--picker-l,0px) round var(--picker-radius))}to{clip-path:inset(0 round var(--picker-radius))}}
@keyframes picker-fold-up{from{clip-path:inset(0 round var(--picker-radius))}to{clip-path:inset(calc(100% - var(--picker-head,38px) - 2px) var(--picker-r,0px) 0 var(--picker-l,0px) round var(--picker-radius))}}
.picker-list{display:flex;flex-direction:column;gap:2px;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.picker-option{flex:none;width:100%;display:flex;align-items:center;gap:10px;min-height:38px;padding:8px 10px 8px 9px;border:0;border-radius:9px;
  background:transparent;color:var(--ink);font:inherit;font-size:13px;line-height:1.45;text-align:left;white-space:nowrap;cursor:pointer}
.picker-option-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.picker-option:hover,.picker-option:focus-visible{background:var(--picker-hover);outline:none;box-shadow:none;text-decoration:none}
.picker-option[aria-selected=true]{font-weight:600}
.picker-option[aria-selected=true]::after{content:"";flex:none;margin-left:auto;width:15px;height:15px;background:currentColor;opacity:.8;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat}
.picker-option:disabled{opacity:.45;cursor:default}.picker-option:disabled:hover{background:transparent}
@supports not (backdrop-filter:blur(1px)){.picker-panel{background:var(--surface)}}
@media (prefers-reduced-motion:reduce){.picker-panel,.picker-panel.picker-closing{animation:none}.picker-host .chevron{transition:none}}

/* Date range (date-range.js), DESIGN.md「日期范围」: the same glass and the same grow/fold as the dropdown. */
.date-range{position:relative;min-width:0;--picker-radius:16px}
.date-trigger{display:flex;align-items:center;gap:8px;min-width:230px;height:42px;padding:0 12px;border:1px solid var(--line);border-radius:10px;
  background:var(--surface);color:var(--ink);font:inherit;font-size:13px;white-space:nowrap;cursor:pointer}
.date-trigger:hover{background:color-mix(in srgb,var(--soft) 60%,var(--surface))}
.date-trigger>svg{width:16px;height:16px;color:var(--muted)}
.date-trigger.empty .date-label{color:var(--secondary)}
.date-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;text-align:left}
.date-chevron{display:inline-flex;color:var(--muted);transition:transform .2s cubic-bezier(.2,.8,.2,1)}.date-chevron svg{width:14px;height:14px}
html .date-range.date-open{z-index:35}
html .date-open>.date-trigger{background:transparent;border-color:transparent}
.date-open:not(:has(.date-closing)) .date-chevron{transform:rotate(180deg)}
.date-panel{position:absolute;top:-1px;left:-1px;z-index:-1;width:344px;max-width:calc(100vw - 32px);box-sizing:border-box;padding:calc(var(--date-head,42px) + 2px) 12px 12px;
  display:flex;flex-direction:column;background:var(--picker-glass);-webkit-backdrop-filter:blur(30px) saturate(1.7);backdrop-filter:blur(30px) saturate(1.7);
  border:1px solid var(--picker-edge);border-radius:var(--picker-radius);box-shadow:var(--picker-shadow);animation:date-grow .24s cubic-bezier(.2,.8,.2,1)}
.date-panel[hidden]{display:none}
.date-panel.date-closing{pointer-events:none;animation:date-fold .18s cubic-bezier(.4,0,.6,1) forwards}
@keyframes date-grow{from{clip-path:inset(0 calc(100% - var(--date-w,232px) - 2px) calc(100% - var(--date-head,42px) - 2px) 0 round 10px)}to{clip-path:inset(0 round var(--picker-radius))}}
@keyframes date-fold{from{clip-path:inset(0 round var(--picker-radius))}to{clip-path:inset(0 calc(100% - var(--date-w,232px) - 2px) calc(100% - var(--date-head,42px) - 2px) 0 round 10px)}}
.date-presets{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 12px}
.date-preset{height:28px;padding:0 12px;border:0;border-radius:999px;background:var(--picker-hover);color:var(--secondary);font:inherit;font-size:12.5px;cursor:pointer}
.date-preset:hover{color:var(--ink)}
.date-preset[aria-pressed=true]{background:var(--ink);color:var(--bg)}
.date-month{display:flex;align-items:center;gap:4px;height:32px;margin-bottom:4px}
.date-month strong{flex:1;padding-left:4px;font-size:14px;font-weight:600}
.date-nav{width:30px;height:30px;display:grid;place-items:center;border:0;border-radius:8px;background:transparent;color:var(--secondary);cursor:pointer}
.date-nav svg{width:15px;height:15px}.date-nav:hover{background:var(--picker-hover)}.date-nav:disabled{opacity:.35;cursor:default;background:transparent}
.date-weekdays,.date-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.date-weekdays{height:24px;align-items:center;text-align:center;font-size:11.5px;color:var(--muted)}
.date-cell{height:38px;display:grid;place-items:center;--band:color-mix(in srgb,var(--accent) 26%,transparent)}
.date-cell.in{background:var(--band)}
.date-cell.from{background:linear-gradient(90deg,transparent 50%,var(--band) 50%)}
.date-cell.to{background:linear-gradient(90deg,var(--band) 50%,transparent 50%)}
.date-day{width:34px;height:34px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--ink);font:inherit;font-size:13px;font-variant-numeric:tabular-nums;cursor:pointer}
.date-day:hover{background:var(--picker-hover)}
.date-day.today{color:color-mix(in srgb,var(--accent) 65%,var(--ink));font-weight:600}
.date-day:disabled{color:color-mix(in srgb,var(--muted) 55%,transparent);cursor:default;background:transparent}
.date-day[aria-pressed=true]{background:var(--ink);color:var(--bg);font-weight:600}
.date-foot{display:flex;align-items:center;gap:6px;margin-top:10px}
.date-summary{flex:1;min-width:0;padding-left:4px;font-size:12.5px;color:var(--secondary)}
.date-clear,.date-done{height:32px;padding:0 12px;border:0;border-radius:9px;font:inherit;font-size:13px;cursor:pointer}
.date-clear{background:transparent;color:var(--secondary)}.date-clear:hover{background:var(--picker-hover)}
.date-done{padding:0 16px;background:var(--ink);color:var(--bg);font-weight:500}
@supports not (backdrop-filter:blur(1px)){.date-panel{background:var(--surface)}}
@media (prefers-reduced-motion:reduce){.date-panel,.date-panel.date-closing{animation:none}.date-chevron{transition:none}}
@media (max-width:760px){.date-trigger{min-width:0;width:100%}.date-panel{width:min(344px,calc(100vw - 32px))}}