/* InkLift 签迹 — 自定义样式（Tailwind 之外的组件层） */
:root {
  --c1: #22d3ee; --c2: #818cf8; --c3: #e879f9;
  --line: rgba(255,255,255,.10);
  --panel: rgba(17,24,51,.55);
}
html, body { overscroll-behavior: none; }
.text-gradient { background: linear-gradient(90deg, var(--c1), var(--c2) 50%, var(--c3)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- 背景极光 ---------- */
.aurora { overflow: hidden; background: radial-gradient(1200px 600px at 70% -10%, rgba(99,102,241,.18), transparent 60%), #070a14; }
.aurora .blob { position: absolute; width: 46vmax; height: 46vmax; border-radius: 50%; filter: blur(90px); opacity: .28; mix-blend-mode: screen; animation: drift 26s ease-in-out infinite alternate; }
.aurora .b1 { background: #0891b2; top: -18vmax; left: -10vmax; }
.aurora .b2 { background: #6d28d9; bottom: -22vmax; right: -12vmax; animation-delay: -8s; }
.aurora .b3 { background: #c026d3; top: 30%; left: 40%; width: 30vmax; height: 30vmax; opacity: .14; animation-delay: -15s; }
.aurora .grid-overlay { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 44px 44px; mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%); }
@keyframes drift { 0% { transform: translate(0,0) scale(1); } 50% { transform: translate(6vmax,4vmax) scale(1.12); } 100% { transform: translate(-4vmax,7vmax) scale(.95); } }

/* ---------- 按钮 ---------- */
.btn-primary, .btn-ghost, .btn-magic { display: inline-flex; align-items: center; gap: .45rem; height: 2.25rem; padding: 0 .9rem; border-radius: .6rem; font-size: .875rem; font-weight: 600; white-space: nowrap; transition: all .18s ease; }
.btn-primary { color: #fff; background: linear-gradient(135deg, #06b6d4, #6366f1 55%, #c026d3); background-size: 160% 160%; box-shadow: 0 6px 24px -8px rgba(99,102,241,.8), inset 0 1px 0 rgba(255,255,255,.25); }
.btn-primary:hover:not(:disabled) { background-position: 100% 50%; transform: translateY(-1px); box-shadow: 0 10px 30px -8px rgba(192,38,211,.7), inset 0 1px 0 rgba(255,255,255,.3); }
.btn-ghost { color: #cbd5e1; border: 1px solid var(--line); background: rgba(255,255,255,.04); }
.btn-ghost:hover:not(:disabled) { color: #fff; background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.2); }
.btn-magic { color: #ecfeff; position: relative; border: 1px solid rgba(34,211,238,.45); background: linear-gradient(135deg, rgba(34,211,238,.18), rgba(168,85,247,.18)); overflow: hidden; }
.btn-magic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%); transform: translateX(-120%); animation: shine 3.6s ease-in-out infinite; }
.btn-magic:hover { border-color: rgba(34,211,238,.8); box-shadow: 0 0 24px -4px rgba(34,211,238,.6); }
@keyframes shine { 0%, 60% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
button:disabled { opacity: .4; cursor: not-allowed; }
button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible, summary:focus-visible { outline: 2px solid var(--c1); outline-offset: 2px; }

.seg { display: inline-flex; align-items: center; height: 2.25rem; padding: 2px; border-radius: .6rem; border: 1px solid var(--line); background: rgba(255,255,255,.035); }
.seg-btn { white-space: nowrap; display: inline-flex; align-items: center; gap: .35rem; height: 100%; min-width: 2rem; justify-content: center; padding: 0 .5rem; border-radius: .45rem; font-size: .8rem; color: #94a3b8; transition: all .15s; }
.seg-btn:hover:not(:disabled) { color: #fff; background: rgba(255,255,255,.07); }
.seg-btn.active { color: #fff; background: linear-gradient(135deg, rgba(34,211,238,.25), rgba(99,102,241,.35)); box-shadow: inset 0 0 0 1px rgba(129,140,248,.5); }
.sel { background-color: transparent; border: 0; color: #e2e8f0; font-size: .8rem; font-family: "JetBrains Mono", monospace; padding: 0 1.6rem 0 .3rem; height: 100%; background-position: right .2rem center; cursor: pointer; }
.sel:focus { box-shadow: none; }
.sel option { background: #0b1020; }
.inp { height: 2.25rem; border-radius: .6rem; border: 1px solid var(--line); background: rgba(255,255,255,.04); color: #e2e8f0; font-size: .85rem; padding: 0 .7rem; min-width: 0; }
.inp:focus { border-color: rgba(129,140,248,.7); box-shadow: 0 0 0 3px rgba(99,102,241,.2); }
.chip-btn { display: inline-flex; align-items: center; height: 1.75rem; padding: 0 .55rem; border-radius: .45rem; font-size: 11px; font-weight: 600; color: #e2e8f0; background: rgba(7,10,20,.72); border: 1px solid rgba(255,255,255,.15); backdrop-filter: blur(8px); user-select: none; }
.chip-btn:hover { background: rgba(30,41,82,.9); }
.link-btn { color: #93c5fd; padding: .15rem .1rem; }
.link-btn:hover:not(:disabled) { color: #fff; text-decoration: underline; }
.kbd { display: inline-block; min-width: 1.5em; padding: 0 .35em; border-radius: .3rem; border: 1px solid rgba(255,255,255,.2); border-bottom-width: 2px; background: rgba(255,255,255,.06); font-family: "JetBrains Mono", monospace; font-size: .78em; color: #e2e8f0; text-align: center; }

/* ---------- 卡片 & 折叠面板 ---------- */
.card { border-radius: .85rem; border: 1px solid var(--line); background: var(--panel); box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 20px 50px -30px rgba(0,0,0,.8); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c1); box-shadow: 0 0 12px var(--c1); }
.stat { display: flex; flex-direction: column; gap: 2px; padding: .55rem .75rem; background: rgba(7,10,20,.55); }
.stat span { color: #64748b; font-size: 11px; }
.stat b { color: #e2e8f0; font-family: "JetBrains Mono", monospace; font-weight: 600; font-size: 12.5px; }
.acc { border-radius: .85rem; border: 1px solid var(--line); background: var(--panel); }
.acc > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .55rem; padding: .75rem .9rem; font-size: .875rem; font-weight: 600; color: #f1f5f9; user-select: none; }
.acc > summary::-webkit-details-marker { display: none; }
.acc > summary::after { content: ""; margin-left: auto; width: .5rem; height: .5rem; border-right: 2px solid #64748b; border-bottom: 2px solid #64748b; transform: rotate(45deg); transition: transform .2s; }
.acc[open] > summary::after { transform: rotate(-135deg); }
.acc-ic { width: 1.6rem; height: 1.6rem; display: grid; place-items: center; border-radius: .5rem; background: rgba(255,255,255,.06); font-size: .85rem; }
.acc-body { padding: 0 .9rem .9rem; display: flex; flex-direction: column; gap: .9rem; }
.feat { border: 1px solid var(--line); background: rgba(255,255,255,.03); border-radius: .7rem; padding: .65rem .75rem; display: flex; flex-direction: column; gap: 2px; }
.feat b { font-size: 13px; color: #e2e8f0; }
.feat span { font-size: 12px; color: #64748b; }

/* 预设 */
.preset { text-align: left; border-radius: .7rem; border: 1px solid var(--line); background: rgba(255,255,255,.03); padding: .55rem .65rem; transition: all .15s; }
.preset:hover { border-color: rgba(129,140,248,.55); background: rgba(99,102,241,.1); }
.preset.active { border-color: rgba(34,211,238,.7); background: linear-gradient(135deg, rgba(34,211,238,.12), rgba(168,85,247,.12)); }
.preset b { display: block; font-size: 13px; color: #f1f5f9; }
.preset span { display: block; font-size: 11.5px; color: #64748b; margin-top: 1px; }

/* 控件 */
.ctl-head { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: #cbd5e1; margin-bottom: .35rem; }
.ctl-head .val { font-family: "JetBrains Mono", monospace; font-size: 12px; color: #67e8f9; }
.ctl-hint { font-size: 11.5px; color: #64748b; margin-top: .25rem; }
.ctl.disabled { opacity: .45; }
input[type=range].rng { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; background: transparent; cursor: pointer; --p: 50%; }
input[type=range].rng::-webkit-slider-runnable-track { height: 6px; border-radius: 99px; background: linear-gradient(90deg, var(--c1), var(--c2) var(--p), rgba(255,255,255,.1) var(--p)); }
input[type=range].rng::-moz-range-track { height: 6px; border-radius: 99px; background: rgba(255,255,255,.1); }
input[type=range].rng::-moz-range-progress { height: 6px; border-radius: 99px; background: linear-gradient(90deg, var(--c1), var(--c2)); }
input[type=range].rng::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -5px; border-radius: 50%; background: #fff; border: 3px solid #818cf8; box-shadow: 0 0 0 4px rgba(129,140,248,.18), 0 2px 8px rgba(0,0,0,.5); transition: transform .12s; }
input[type=range].rng::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 3px solid #818cf8; }
input[type=range].rng:active::-webkit-slider-thumb { transform: scale(1.2); }
input[type=range].rng:disabled { cursor: not-allowed; }
.tgl { position: relative; width: 38px; height: 22px; flex-shrink: 0; border-radius: 99px; background: rgba(255,255,255,.12); transition: background .2s; }
.tgl::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 4px rgba(0,0,0,.4); }
.tgl.on { background: linear-gradient(135deg, #06b6d4, #6366f1); }
.tgl.on::after { transform: translateX(16px); }
.swatch { width: 26px; height: 26px; border-radius: 7px; border: 2px solid rgba(255,255,255,.15); transition: transform .12s; }
.swatch:hover { transform: scale(1.1); }
.swatch.active { border-color: #fff; box-shadow: 0 0 0 2px rgba(129,140,248,.7); }
input[type=color].clr { -webkit-appearance: none; appearance: none; width: 34px; height: 26px; border: 1px solid var(--line); border-radius: 7px; padding: 2px; background: transparent; cursor: pointer; }
input[type=color].clr::-webkit-color-swatch-wrapper { padding: 0; }
input[type=color].clr::-webkit-color-swatch { border: 0; border-radius: 5px; }

/* ---------- 预览背景 ---------- */
.bg-checker { background-color: #fff; background-image: conic-gradient(#e5e7eb 25%, #fff 0 50%, #e5e7eb 0 75%, #fff 0); background-size: 16px 16px; }
.bg-paper { background-color: #fbf8ef; background-image: repeating-linear-gradient(transparent 0 27px, rgba(59,130,246,.18) 27px 28px); }
.pvbg-btn { width: 22px; height: 22px; border-radius: 6px; border: 2px solid rgba(255,255,255,.18); }
.pvbg-btn.active { border-color: #67e8f9; box-shadow: 0 0 0 2px rgba(34,211,238,.3); }
.pv-box canvas { image-rendering: auto; filter: drop-shadow(0 1px 0 rgba(0,0,0,.02)); }

/* ---------- 画布 & 选区 ---------- */
.stage { display: flex; min-width: 100%; min-height: 100%; width: max-content; padding: 48px; box-sizing: border-box; }
.stage > #inner { margin: auto; }
#viewport.mode-select #inner { cursor: crosshair; touch-action: none; }
#viewport.mode-pan, #viewport.panning, #viewport.mode-pan #inner { cursor: grab; }
#viewport.panning #inner { cursor: grabbing; }
#viewport.mode-eyedrop #inner { cursor: none; touch-action: none; }
.sel-box { position: absolute; border: 1.5px solid #22d3ee; box-shadow: 0 0 0 9999px rgba(7,10,20,.55), 0 0 22px rgba(34,211,238,.55) inset; cursor: move; }
.sel-box::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(90deg, rgba(34,211,238,.9) 50%, transparent 0), linear-gradient(90deg, rgba(34,211,238,.9) 50%, transparent 0), linear-gradient(0deg, rgba(34,211,238,.9) 50%, transparent 0), linear-gradient(0deg, rgba(34,211,238,.9) 50%, transparent 0); background-repeat: repeat-x, repeat-x, repeat-y, repeat-y; background-size: 12px 1.5px, 12px 1.5px, 1.5px 12px, 1.5px 12px; background-position: 0 0, 0 100%, 0 0, 100% 0; animation: ants .6s linear infinite; pointer-events: none; mix-blend-mode: screen; }
@keyframes ants { to { background-position: 12px 0, -12px 100%, 0 -12px, 100% 12px; } }
.sel-box i { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 3px; background: #fff; border: 2px solid #6366f1; box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.sel-box i[data-h=nw] { left: 0; top: 0; cursor: nwse-resize; }
.sel-box i[data-h=n] { left: 50%; top: 0; cursor: ns-resize; }
.sel-box i[data-h=ne] { left: 100%; top: 0; cursor: nesw-resize; }
.sel-box i[data-h=e] { left: 100%; top: 50%; cursor: ew-resize; }
.sel-box i[data-h=se] { left: 100%; top: 100%; cursor: nwse-resize; }
.sel-box i[data-h=s] { left: 50%; top: 100%; cursor: ns-resize; }
.sel-box i[data-h=sw] { left: 0; top: 100%; cursor: nesw-resize; }
.sel-box i[data-h=w] { left: 0; top: 50%; cursor: ew-resize; }
.sel-label { position: absolute; left: 0; top: -26px; white-space: nowrap; font: 600 11px "JetBrains Mono", monospace; color: #0b1020; background: #22d3ee; padding: 3px 7px; border-radius: 5px; pointer-events: none; }
.cand { position: absolute; pointer-events: auto; cursor: pointer; border: 1.5px dashed rgba(232,121,249,.95); background: rgba(232,121,249,.10); border-radius: 4px; transition: background .15s; animation: popin .35s cubic-bezier(.2,1.4,.4,1) both; }
.cand:hover { background: rgba(232,121,249,.22); }
.cand span { position: absolute; left: -1px; top: -22px; font: 700 10.5px "JetBrains Mono", monospace; color: #fff; background: linear-gradient(135deg, #a855f7, #db2777); padding: 2px 6px; border-radius: 4px; white-space: nowrap; }
@keyframes popin { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: scale(1); } }
.loupe { position: absolute; z-index: 30; pointer-events: none; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 2px #6366f1, 0 10px 30px rgba(0,0,0,.6); }

/* 缩略图 */
.thumb { position: relative; flex-shrink: 0; width: 96px; border-radius: .55rem; overflow: hidden; border: 2px solid transparent; background: #fff; transition: all .15s; opacity: .7; }
.thumb:hover { opacity: 1; }
.thumb.active { border-color: #22d3ee; opacity: 1; box-shadow: 0 0 20px -4px rgba(34,211,238,.8); }
.thumb canvas { display: block; width: 100%; height: auto; }
.thumb em { position: absolute; right: 4px; bottom: 4px; font: 600 10px "JetBrains Mono", monospace; font-style: normal; color: #fff; background: rgba(7,10,20,.75); padding: 1px 5px; border-radius: 4px; }

/* 收藏夹 */
.g-item { position: relative; flex-shrink: 0; width: 180px; border-radius: .7rem; overflow: hidden; border: 1px solid var(--line); background: rgba(255,255,255,.03); }
.g-item .g-img { height: 96px; display: flex; align-items: center; justify-content: center; padding: 8px; }
.g-item img { max-width: 100%; max-height: 100%; }
.g-item .g-meta { display: flex; align-items: center; gap: 4px; padding: 6px 8px; font-size: 11px; color: #94a3b8; border-top: 1px solid var(--line); }
.g-item .g-meta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.g-item .g-meta button { padding: 2px 5px; border-radius: 4px; color: #cbd5e1; }
.g-item .g-meta button:hover { background: rgba(255,255,255,.1); color: #fff; }
.drawer.open { transform: translateY(0); }

/* 杂项 */
.spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255,255,255,.2); border-top-color: #22d3ee; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.toast { pointer-events: auto; border-radius: .7rem; border: 1px solid var(--line); background: rgba(11,16,32,.92); backdrop-filter: blur(10px); padding: .65rem .85rem; font-size: 13px; color: #e2e8f0; box-shadow: 0 12px 30px -10px rgba(0,0,0,.7); animation: tin .25s ease both; display: flex; gap: .5rem; align-items: flex-start; }
.toast.ok { border-color: rgba(52,211,153,.4); } .toast.err { border-color: rgba(248,113,113,.5); } .toast.info { border-color: rgba(129,140,248,.45); }
@keyframes tin { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
.thin-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.thin-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; }
.thin-scroll::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.22); background-clip: padding-box; border: 2px solid transparent; }
.thin-scroll::-webkit-scrollbar-track { background: transparent; }
#heroPath { stroke-dasharray: var(--len, 2000); stroke-dashoffset: var(--len, 2000); animation: draw 3.2s cubic-bezier(.6,.1,.3,1) .2s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.progress { height: 8px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; }
.progress > div { height: 100%; width: 0; background: linear-gradient(90deg, var(--c1), var(--c2), var(--c3)); transition: width .2s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  #heroPath { stroke-dashoffset: 0; }
}

.brush-cursor { position: absolute; z-index: 30; pointer-events: none; border-radius: 50%; border: 1.5px solid #fb7185; background: rgba(244,63,94,.12); box-shadow: 0 0 0 1px rgba(0,0,0,.5); transform: translate(-50%, -50%); }
#viewport.mode-erase #inner { cursor: none; touch-action: none; }
.mode-btn[data-mode=erase].active { background: linear-gradient(135deg, rgba(244,63,94,.3), rgba(168,85,247,.3)); box-shadow: inset 0 0 0 1px rgba(251,113,133,.6); }