DB Style

<SectionHeader no-animate compact kicker="ATTRIBUTES" :title="$t('char-build.base_attr')" />

<header class="relative overflow-hidden border-b-2 border-primary pb-4">
    <!-- 引导线网格（装饰性，随主题明暗） -->
    <div
        class="pointer-events-none absolute inset-0"
        style="
            background-image:
                linear-gradient(to right, color-mix(in oklab, var(--color-base-content) 7%, transparent) 1px, transparent 1px),
                linear-gradient(to bottom, color-mix(in oklab, var(--color-base-content) 7%, transparent) 1px, transparent 1px);
            background-size: 26px 26px;
            mask-image: linear-gradient(to bottom, black, transparent 85%);
        "
        aria-hidden="true"
    />
    <!-- 右上角斜切楔形 -->
    <span
        class="pointer-events-none absolute top-0 right-0 h-8 w-8 bg-primary [clip-path:polygon(100%_0,100%_100%,0_0)]"
        aria-hidden="true"
    />
    <div class="relative flex items-start gap-3.5">
        <div class="min-w-0 flex-1">
            <p class="mb-2 inline-flex items-center gap-2 text-[10px] font-semibold tracking-[0.32em] text-primary uppercase">
                <span class="h-px w-6 bg-primary" aria-hidden="true" />
                Character File
            </p>
            <div class="relative flex flex-wrap items-center gap-x-2 gap-y-1">
                <SRouterLink class="truncate font-orbitron text-xl font-bold leading-tight tracking-tight text-base-content transition-colors duration-150 hover:text-primary sm:text-2xl">…</SRouterLink>
                <CopyID :id="char.id" />
            </div>
        </div>
    </div>
</header>

<button
    class="shrink-0 cursor-pointer whitespace-nowrap rounded-xs border px-2 py-0.5 text-[11px] transition-colors duration-150 active:scale-[0.97]"
    :class="
        active
            ? 'border-primary bg-primary font-semibold text-primary-content'
            : 'border-base-content/20 text-base-content/60 hover:border-primary/60 hover:text-primary'
    "
></button>

<button
    class="inline-flex h-6 cursor-pointer items-center rounded-xs border px-2 text-[11px] transition-colors duration-150"
    :class="
        on
            ? 'border-primary bg-primary/10 font-semibold text-primary'
            : 'border-base-content/20 text-base-content/55 hover:border-primary/50 hover:text-primary'
    "
></button>

<div class="relative">
    <Icon icon="ri:search-line" class="absolute left-0 top-1/2 h-4 w-4 -translate-y-1/2 text-base-content/35" />
    <input
        v-model="keyword"
        type="text"
        placeholder="..."
        class="w-full rounded-none border-b border-base-content/25 bg-transparent py-1.5 pl-7 pr-12 text-sm outline-none transition-colors duration-200 placeholder:text-base-content/35 focus:border-primary"
    />
    <span class="pointer-events-none absolute right-0 top-1/2 -translate-y-1/2 font-mono text-[11px] tabular-nums text-base-content/40"
        >{{ list.length }}</span
    >
</div>

<input
    v-model="keyword"
    type="text"
    class="w-full rounded-none border-b border-base-content/20 bg-transparent px-0.5 pb-1 text-[13px] text-base-content outline-none transition-colors duration-150 placeholder:text-base-content/30 focus:border-primary"
/>

<Select
    v-model="item.stepId"
    class="col-span-9 min-w-0 rounded-none border-b border-base-content/20 bg-transparent px-0.5 pb-1 text-[13px] outline-none focus:border-primary"
>
    <SelectItem v-for="option in options" :key="option.id" :value="option.id">{{ option.label }}</SelectItem>
</Select>

<article
    class="group relative cursor-pointer overflow-hidden rounded-xs border backdrop-blur-sm transition-all duration-200 hover:-translate-y-0.5 active:scale-[0.99] animate-ef-rise motion-reduce:animate-none"
    :class="
        selectedId === item.id
            ? 'dbx-item-active border-primary/70 bg-primary/10'
            : 'border-base-content/15 bg-base-100/60 hover:border-primary/50'
    "
    :style="{ animationDelay: `${Math.min(index * 30, 300)}ms` }"
    @click="selectedId = item.id"
></article>