/* Lucian UX/UI elements for 阅途 · tokens mapped to existing theme */
/* #058 Reading-progress · #220 Selection tooltip · #049 Layered editorial */

.ux {
  box-sizing: border-box;
  font-family: inherit;
}

:root, [data-theme="light"] {
  --ux-page: var(--bg, #F7F8FC);
  --ux-surface: var(--card, #FFFFFF);
  --ux-surface-2: var(--card-2, #F7F8FC);
  --ux-surface-3: var(--line, #F0F1F7);
  --ux-ink: var(--text, #1A1A2E);
  --ux-ink-2: var(--text-2, #6B6B8A);
  --ux-ink-3: var(--text-3, #9A9AB5);
  --ux-line: var(--border, #EAECF3);
  --ux-line-2: var(--border, #EAECF3);
  --ux-accent: var(--brand, #6C5CE7);
  --ux-accent-2: var(--brand-2, #8B7CFF);
  --ux-accent-soft: var(--brand-soft, #EFEDFE);
  --ux-accent-ink: #fff;
  --ux-mint: var(--green, #0E9F6E);
  --ux-warn: var(--amber, #C97E05);
  --ux-danger: var(--red, #F43F5E);
  --ux-shadow: rgba(15, 17, 51, .12);
  --ux-shadow-strong: rgba(15, 17, 51, .28);
  --ux-grad: linear-gradient(120deg, var(--brand-2, #8B7CFF), var(--brand, #6C5CE7));
  --ux-ease: cubic-bezier(.2,.8,.2,1);
  --ux-spring: cubic-bezier(.34,1.45,.64,1);
}
[data-theme="dark"] {
  --ux-page: var(--bg, #12121C);
  --ux-surface: var(--card, #1E1E2C);
  --ux-surface-2: var(--card-2, #2A2A3A);
  --ux-surface-3: var(--line, #2A2A3A);
  --ux-ink: var(--text, #F2F2F7);
  --ux-ink-2: var(--text-2, #A8A8C2);
  --ux-ink-3: var(--text-3, #8A8AA5);
  --ux-line: var(--border, #2E2E40);
  --ux-line-2: var(--border, #2E2E40);
  --ux-accent: var(--brand, #8B7CFF);
  --ux-accent-soft: var(--brand-soft, #2E2A5C);
  --ux-shadow: rgba(0,0,0,.4);
  --ux-shadow-strong: rgba(0,0,0,.6);
}



.u058{position:relative;width:340px;height:500px;display:flex;flex-direction:column;border-radius:30px;background:var(--ux-surface);box-shadow:0 0 0 1px var(--ux-line),0 30px 60px -36px var(--ux-shadow-strong);overflow:hidden}
.u058-bar{position:absolute;left:0;top:0;height:3px;width:100%;background:var(--ux-grad);transform-origin:0 50%;transform:scaleX(var(--p,0));z-index:2}
.u058-head{display:flex;align-items:center;gap:12px;padding:18px 18px 10px}
.u058-head div{flex:1;min-width:0}
.u058-head small{display:block;font-size:11.5px;font-weight:750;letter-spacing:.06em;color:var(--ux-ink-3)}
.u058-head b{display:block;margin-top:2px;font-size:16px;font-weight:800;letter-spacing:-.035em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.u058-ring{position:relative;width:48px;height:48px;flex:none}
.u058-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.u058-ring circle{fill:none;stroke-width:4}
.u058-ring .t{stroke:var(--ux-surface-3)}
.u058-ring .p{stroke:var(--ux-accent);stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--p,0) * 100);transition:stroke .4s}
.u058-ring span{position:absolute;inset:0;display:grid;place-items:center;font-size:11px;font-weight:800;font-variant-numeric:tabular-nums;transition:opacity .3s,transform .4s var(--ux-spring)}
.u058-ring i{position:absolute;inset:0;display:grid;place-items:center;color:var(--ux-mint);opacity:0;transform:scale(.4);transition:opacity .3s,transform .5s var(--ux-spring)}
.u058-ring i svg{width:22px;height:22px;transform:none;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.u058.is-done .u058-ring .p{stroke:var(--ux-mint)}
.u058.is-done .u058-ring span{opacity:0;transform:scale(.4)}
.u058.is-done .u058-ring i{opacity:1;transform:none}
.u058-toc{position:relative;display:flex;gap:4px;margin:0 14px 6px;padding:4px;border-radius:14px;background:var(--ux-surface-2)}
.u058-pill{position:absolute;top:4px;bottom:4px;left:0;width:var(--w,60px);border-radius:10px;background:var(--ux-surface);box-shadow:0 2px 8px -4px var(--ux-shadow-strong);transform:translateX(var(--x,4px));transition:transform .45s var(--ux-spring),width .45s var(--ux-spring)}
.u058-toc button{position:relative;flex:1;height:32px;border:0;padding:0;border-radius:10px;background:none;font-size:12.5px;font-weight:700;color:var(--ux-ink-3);transition:color .3s}
.u058-toc button[aria-current="true"]{color:var(--ux-ink)}
.u058-toc button:focus-visible{outline:2px solid var(--ux-accent);outline-offset:1px}
.u058-body{position:relative;flex:1;overflow-y:auto;padding:8px 20px 20px;scrollbar-width:thin;scrollbar-color:var(--ux-line-2) transparent;overscroll-behavior:contain}
.u058-body:focus-visible{outline:2px solid var(--ux-accent);outline-offset:-4px;border-radius:16px}
.u058-body h4{margin:18px 0 6px;font-size:16px;font-weight:800;letter-spacing:-.03em;scroll-margin-top:8px}
.u058-body h4:first-child{margin-top:6px}
.u058-body p{margin:0 0 10px;font-size:14px;line-height:1.72;color:var(--ux-ink-2)}
.u058-fig{height:120px;margin:12px 0;border-radius:18px;background:linear-gradient(130deg,#FFB547,#FF6B8B 50%,#7B61FF);position:relative;overflow:hidden}
.u058-fig::after{content:"";position:absolute;width:120px;height:120px;right:-20px;top:-40px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.55),transparent 65%)}
.u058-end{margin-top:18px;padding:16px;border-radius:18px;background:color-mix(in srgb,var(--ux-mint) 12%,transparent);text-align:center;font-size:13.5px;font-weight:700;color:var(--ux-mint);transform:scale(.94);opacity:.4;transition:transform .5s var(--ux-spring),opacity .4s}
.u058.is-done .u058-end{transform:none;opacity:1}


.u220{position:relative;width:340px;height:340px;border-radius:30px;overflow:hidden;background:var(--ux-surface);box-shadow:0 0 0 1px var(--ux-line),0 30px 60px -36px var(--ux-shadow-strong);color:var(--ux-ink)}
.u220-ar{position:absolute;inset:0;padding:30px 26px}
.u220-ar small{font-size:10px;font-weight:850;letter-spacing:.08em;color:var(--ux-accent)}
.u220-ar h3{margin:6px 0 14px;font-size:19px;font-weight:900;letter-spacing:-.035em}
.u220-ar p{margin:0;font-size:13px;line-height:1.75;font-weight:600;color:var(--ux-ink-2)}
.u220-s{cursor:text;border-radius:3px;background-image:linear-gradient(color-mix(in srgb,#FDE047 75%,transparent),color-mix(in srgb,#FDE047 75%,transparent));background-repeat:no-repeat;background-size:0% 42%;background-position:0 88%;transition:background-size .6s cubic-bezier(.3,.9,.3,1),background-color .2s,color .2s}
.u220-s.is-hl{background-size:100% 42%;color:var(--ux-ink)}
.u220-s.is-sel{background-color:color-mix(in srgb,var(--ux-accent) 22%,transparent);color:var(--ux-ink)}
.u220-tip{position:absolute;left:0;top:0;display:flex;gap:2px;padding:4px;border-radius:12px;background:var(--ux-ink);box-shadow:0 10px 24px -10px var(--ux-shadow-strong);transform:translate(-50%,-100%) scale(.85);transform-origin:50% 100%;opacity:0;pointer-events:none;transition:opacity .15s,transform .25s cubic-bezier(.3,1.6,.5,1);z-index:3}
.u220-tip::after{content:"";position:absolute;left:50%;bottom:-5px;margin-left:-5px;border:5px solid transparent;border-bottom:0;border-top-color:var(--ux-ink)}
.u220-tip.is-on{opacity:1;pointer-events:auto;transform:translate(-50%,calc(-100% - 8px)) scale(1)}
.u220-tip button{width:30px;height:28px;border:0;border-radius:8px;background:none;color:var(--ux-surface);display:grid;place-items:center;cursor:pointer}
.u220-tip button:hover{background:rgba(255,255,255,.14)}
.u220-tip button:focus-visible{outline:2px solid var(--ux-accent);outline-offset:-2px}
.u220-tip svg{width:15px;height:15px}
.u220-cp .u220-ok{display:none}
.u220-cp.is-ok .u220-ok{display:block}
.u220-cp.is-ok .u220-cpi{display:none}
.u220-toast{position:absolute;left:50%;bottom:16px;padding:8px 14px;border-radius:999px;background:var(--ux-ink);color:var(--ux-surface);font-size:11px;font-weight:800;transform:translate(-50%,40px);opacity:0;transition:transform .35s cubic-bezier(.3,1.5,.5,1),opacity .2s;white-space:nowrap}
.u220-toast.is-on{transform:translate(-50%,0);opacity:1}
@media (prefers-reduced-motion: reduce){.u220-s,.u220-tip,.u220-toast{transition:none}}


.u049{--px:0;--py:0;position:relative;width:320px;height:460px;border-radius:30px;overflow:hidden;isolation:isolate;color:#fff;background:#1B1440;box-shadow:0 30px 60px -30px var(--ux-shadow-strong);transition:transform .6s var(--ux-ease),box-shadow .6s var(--ux-ease)}
.u049.is-open{transform:translateY(-4px);box-shadow:0 40px 70px -32px var(--ux-shadow-strong)}
.u049-art{position:absolute;inset:-20px;z-index:-1}
.u049-art svg{position:absolute;inset:0;width:100%;height:100%;transition:transform .9s var(--ux-ease)}
.u049-l1{transform:translate(calc(var(--px) * -6px),calc(var(--py) * -4px)) scale(1.02)}
.u049-l2{transform:translate(calc(var(--px) * -14px),calc(var(--py) * -8px)) scale(1.04)}
.u049-l3{transform:translate(calc(var(--px) * -24px),calc(var(--py) * -12px)) scale(1.06)}
.u049.is-open .u049-l1{transform:translate(calc(var(--px) * -6px),calc(var(--py) * -4px - 10px)) scale(1.06)}
.u049-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(14,10,36,0) 35%,rgba(14,10,36,.78) 100%);transition:opacity .6s}
.u049-top{position:absolute;left:20px;right:16px;top:18px;display:flex;align-items:center;justify-content:space-between}
.u049-tag{height:28px;padding:0 11px;border-radius:999px;display:inline-flex;align-items:center;background:rgba(255,255,255,.18);font-size:11.5px;font-weight:750;letter-spacing:.04em}
.u049-bm{width:40px;height:40px;border:0;padding:0;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.18);color:#fff;transition:transform .4s var(--ux-spring),background-color .3s}
.u049-bm:hover{background:rgba(255,255,255,.28)}
.u049-bm:active{transform:scale(.86)}
.u049-bm:focus-visible{outline:2px solid #fff;outline-offset:2px}
.u049-bm svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round;transition:fill .3s}
.u049-bm[aria-pressed="true"] svg{fill:currentColor;animation:u049-pop .5s var(--ux-spring)}
@keyframes u049-pop{40%{transform:scale(1.3)}}
.u049-body{position:absolute;left:22px;right:22px;bottom:22px;transform:translateY(var(--lift,118px));transition:transform .7s var(--ux-spring)}
.u049.is-open .u049-body{--lift:0px}
.u049-k{font-size:12px;font-weight:700;letter-spacing:.12em;opacity:.75}
.u049-t{margin:8px 0 0;font-size:30px;line-height:1.12;font-weight:800;letter-spacing:-.05em}
.u049-sum{margin:12px 0 0;font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.82);opacity:0;transform:translateY(10px);transition:opacity .3s,transform .5s var(--ux-ease)}
.u049-foot{display:flex;align-items:center;gap:10px;margin-top:16px;opacity:0;transform:translateY(14px);transition:opacity .3s,transform .5s var(--ux-ease)}
.u049.is-open .u049-sum{opacity:1;transform:none;transition:opacity .45s .12s,transform .6s var(--ux-spring) .12s}
.u049.is-open .u049-foot{opacity:1;transform:none;transition:opacity .45s .2s,transform .6s var(--ux-spring) .2s}
.u049-av{width:32px;height:32px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFD3A8,#FF7A93 60%,#8B6CFF);box-shadow:0 0 0 2px rgba(255,255,255,.5)}
.u049-by{font-size:12.5px;font-weight:650;line-height:1.3}
.u049-by small{display:block;font-size:11.5px;opacity:.65}
.u049-cta{margin-left:auto;height:40px;padding:0 16px;border:0;border-radius:999px;display:inline-flex;align-items:center;gap:6px;background:#fff;color:#1B1440;font-size:13.5px;font-weight:750;transition:transform .35s var(--ux-spring)}
.u049-cta:hover{transform:translateX(2px)}
.u049-cta:active{transform:scale(.94)}
.u049-cta:focus-visible{outline:2px solid #fff;outline-offset:3px}
.u049-cta svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.u049:focus-visible{outline:2px solid var(--ux-accent);outline-offset:4px}


/* Mini progress ring for article cards (from #058) */
.u058-mini-ring {
  display: inline-flex; align-items: center; gap: 4px; margin-left: 6px;
  font-size: 11px; font-weight: 700; color: var(--ux-accent);
}
.u058-mini-ring svg { width: 22px; height: 22px; transform: rotate(-90deg); }
.u058-mini-ring circle { fill: none; stroke-width: 3; }
.u058-mini-ring .t { stroke: var(--ux-surface-3); }
.u058-mini-ring .p { stroke: var(--ux-accent); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p,0) * 100); }
.u058-mini-ring b { font-variant-numeric: tabular-nums; }

/* Lightweight selection tooltip inspired by #220 */
.u220-tip {
  position: absolute; z-index: 50; display: none; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 999px; background: var(--ux-surface);
  box-shadow: 0 8px 24px -8px var(--ux-shadow-strong); border: 1px solid var(--ux-line);
  font-size: 12px; font-weight: 600;
}
.u220-tip.on { display: flex; }
.u220-tip button { border: 0; background: none; padding: 4px 6px; border-radius: 8px; cursor: pointer; color: var(--ux-ink); }
.u220-tip button:hover { background: var(--ux-accent-soft); }