/* =============================================================================
   app.css —— 复刻 ps.yyzzgs.com 的设计系统
   令牌逐字取自目标站 /_next/static/css/d725c674e5c96da1.css 的 :root 与 .dark
   （HSL 三元组形式，与 Tailwind 的 hsl(var(--x)) 约定一致）
   ========================================================================== */

:root{
  --background:220 33% 98%;
  --foreground:222 32% 18%;
  --card:0 0% 100%;
  --card-foreground:222 32% 18%;
  --popover:0 0% 100%;
  --popover-foreground:222 32% 18%;
  --primary:225 52% 58%;
  --primary-foreground:0 0% 100%;
  --secondary:222 24% 96%;
  --secondary-foreground:222 26% 24%;
  --muted:220 24% 96%;
  --muted-foreground:220 9% 48%;
  --accent:224 28% 95%;
  --accent-foreground:222 26% 24%;
  --destructive:0 62% 55%;
  --destructive-foreground:0 0% 100%;
  --success:148 45% 42%;
  --success-foreground:0 0% 100%;
  --warning:38 78% 54%;
  --warning-foreground:0 0% 100%;
  --border:220 18% 90%;
  --input:220 18% 90%;
  --ring:225 52% 58%;
  --radius:0.5rem;
}
.dark{
  --background:222 47% 8%;
  --foreground:210 40% 98%;
  --card:222 47% 10%;
  --card-foreground:210 40% 98%;
  --popover:222 47% 10%;
  --popover-foreground:210 40% 98%;
  --primary:222 70% 60%;
  --primary-foreground:222 47% 11%;
  --secondary:217 33% 17%;
  --secondary-foreground:210 40% 98%;
  --muted:217 33% 17%;
  --muted-foreground:215 20% 65%;
  --accent:217 33% 17%;
  --accent-foreground:210 40% 98%;
  --destructive:0 63% 48%;
  --destructive-foreground:210 40% 98%;
  --success:142 70% 45%;
  --success-foreground:0 0% 100%;
  --warning:38 92% 55%;
  --warning-foreground:0 0% 100%;
  --border:217 33% 17%;
  --input:217 33% 17%;
  --ring:222 70% 60%;
}

/* ---------------------------------------------------------------- 基础 */
*,*::before,*::after{box-sizing:border-box;border-color:hsl(var(--border))}
html{-webkit-text-size-adjust:100%;line-height:1.5}
body{
  margin:0;min-height:100vh;display:flex;flex-direction:column;
  background:hsl(var(--background));color:hsl(var(--foreground));
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI Variable","Segoe UI",
    "PingFang SC","Microsoft YaHei","Hiragino Sans GB","Noto Sans CJK SC","Source Han Sans CN",sans-serif;
  font-size:14px;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
svg{display:block}
::selection{background:hsl(var(--primary)/.25)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:hsl(var(--border));border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:hsl(var(--muted-foreground)/.5)}

.container{width:100%;margin:0 auto;padding:0 .75rem}
@media(min-width:640px){.container{padding:0 1rem}}
@media(min-width:1024px){.container{padding:0 1.5rem;max-width:1400px}}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

/* ---------------------------------------------------------------- 颜色工具 */
.text-muted-foreground{color:hsl(var(--muted-foreground))}
.text-foreground{color:hsl(var(--foreground))}
.text-foreground\/80{color:hsl(var(--foreground)/.8)}
.text-primary{color:hsl(var(--primary))}
.text-primary-foreground{color:hsl(var(--primary-foreground))}
.text-success{color:hsl(var(--success))}
.text-destructive{color:hsl(var(--destructive))}
.text-warning{color:hsl(var(--warning))}
.bg-background{background:hsl(var(--background))}
.bg-background\/80{background:hsl(var(--background)/.8)}
.bg-background\/70{background:hsl(var(--background)/.7)}
.bg-background\/60{background:hsl(var(--background)/.6)}
.bg-background\/40{background:hsl(var(--background)/.4)}
.bg-card{background:hsl(var(--card))}
.bg-card\/40{background:hsl(var(--card)/.4)}
.bg-muted{background:hsl(var(--muted))}
.bg-muted\/20{background:hsl(var(--muted)/.2)}
.bg-muted\/30{background:hsl(var(--muted)/.3)}
.bg-muted\/40{background:hsl(var(--muted)/.4)}
.bg-muted\/50{background:hsl(var(--muted)/.5)}
.bg-primary{background:hsl(var(--primary))}
.bg-primary\/10{background:hsl(var(--primary)/.1)}
.bg-primary\/5{background:hsl(var(--primary)/.05)}
.bg-secondary{background:hsl(var(--secondary))}
.bg-success\/10{background:hsl(var(--success)/.1)}
.bg-destructive\/10{background:hsl(var(--destructive)/.1)}
.bg-emerald-500{background:#10b981}
.bg-emerald-400{background:#34d399}
.text-emerald-500{color:#10b981}
.border-border{border-color:hsl(var(--border))}
.border-border\/70{border-color:hsl(var(--border)/.7)}
.border-border\/60{border-color:hsl(var(--border)/.6)}
.border-input{border-color:hsl(var(--input))}
.border-success\/60{border-color:hsl(var(--success)/.6)}
.border-primary{border-color:hsl(var(--primary))}
.border-primary\/60{border-color:hsl(var(--primary)/.6)}
.border-destructive{border-color:hsl(var(--destructive))}

/* ---------------------------------------------------------------- 排版 */
.text-xs{font-size:12px;line-height:1.5}
.text-\[10px\]{font-size:10px}
.text-\[11px\]{font-size:11px}
.text-\[13px\]{font-size:13px}
.text-sm{font-size:13.5px;line-height:1.55}
.text-base{font-size:15px;line-height:1.6}
.text-lg{font-size:17px;line-height:1.6}
.text-xl{font-size:20px;line-height:1.4}
.text-2xl{font-size:24px;line-height:1.3}
.text-3xl{font-size:30px;line-height:1.15}
.text-4xl{font-size:36px;line-height:1.1}
.font-medium{font-weight:500}
.font-semibold{font-weight:600}
.font-bold{font-weight:700}
.leading-tight{line-height:1.25}
.leading-none{line-height:1}
.leading-relaxed{line-height:1.7}
.leading-snug{line-height:1.4}
.tracking-tight{letter-spacing:-.015em}
.tabular-nums{font-variant-numeric:tabular-nums}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.whitespace-nowrap{white-space:nowrap}
.line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.text-center{text-align:center}
.text-right{text-align:right}
.underline{text-decoration:underline}
.hover\:underline:hover{text-decoration:underline}
.uppercase{text-transform:uppercase}

/* ---------------------------------------------------------------- 布局 */
.flex{display:flex}.inline-flex{display:inline-flex}
.grid{display:grid}
.hidden{display:none}
.block{display:block}
.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}
.sticky{position:sticky}
.inset-0{inset:0}.inset-x-0{left:0;right:0}
.top-0{top:0}.top-20{top:5rem}.bottom-0{bottom:0}
.z-40{z-index:40}.z-50{z-index:50}
.flex-1{flex:1 1 0%}
.flex-col{flex-direction:column}
.flex-wrap{flex-wrap:wrap}
.items-center{align-items:center}
.items-start{align-items:flex-start}
.items-end{align-items:flex-end}
.justify-center{justify-content:center}
.justify-between{justify-content:space-between}
.justify-end{justify-content:flex-end}
.ml-auto{margin-left:auto}.mr-auto{margin-right:auto}
.mx-auto{margin-left:auto;margin-right:auto}
.min-w-0{min-width:0}
.shrink-0{flex-shrink:0}
.overflow-hidden{overflow:hidden}
.overflow-auto{overflow:auto}
.overflow-x-auto{overflow-x:auto}
.self-start{align-self:flex-start}
.cursor-pointer{cursor:pointer}
.pointer-events-none{pointer-events:none}
.opacity-40{opacity:.4}.opacity-50{opacity:.5}
.opacity-70{opacity:.7}.opacity-75{opacity:.75}.opacity-90{opacity:.9}

/* gap */
.gap-0\.5{gap:.125rem}.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-2{gap:.5rem}
.gap-2\.5{gap:.625rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}
.gap-x-2{gap:0 0.5rem}.gap-x-3{gap:0 .75rem}.gap-x-5{gap:0 1.25rem}
.gap-y-0\.5{gap:.125rem 0}.gap-y-1\.5{gap:.375rem 0}.gap-y-2{gap:.5rem 0}
.gap-y-2\.5{gap:.625rem 0}

/* 间距 */
.p-0{padding:0}.p-1{padding:.25rem}.p-1\.5{padding:.375rem}.p-2{padding:.5rem}
.p-2\.5{padding:.625rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}
.p-6{padding:1.5rem}
.px-1{padding-left:.25rem;padding-right:.25rem}
.px-1\.5{padding-left:.375rem;padding-right:.375rem}
.px-2{padding-left:.5rem;padding-right:.5rem}
.px-2\.5{padding-left:.625rem;padding-right:.625rem}
.px-3{padding-left:.75rem;padding-right:.75rem}
.px-4{padding-left:1rem;padding-right:1rem}
.px-5{padding-left:1.25rem;padding-right:1.25rem}
.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}
.py-1{padding-top:.25rem;padding-bottom:.25rem}
.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}
.py-2{padding-top:.5rem;padding-bottom:.5rem}
.py-3{padding-top:.75rem;padding-bottom:.75rem}
.py-4{padding-top:1rem;padding-bottom:1rem}
.py-5{padding-top:1.25rem;padding-bottom:1.25rem}
.py-8{padding-top:2rem;padding-bottom:2rem}
.pb-0{padding-bottom:0}.pb-2{padding-bottom:.5rem}
.pt-0{padding-top:0}
.pl-1\.5{padding-left:.375rem}.pr-0\.5{padding-right:.125rem}
.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.mt-1\.5{margin-top:.375rem}
.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}
.mt-5{margin-top:1.25rem}.mt-6{margin-top:1.5rem}
.mb-1{margin-bottom:.25rem}.mb-1\.5{margin-bottom:.375rem}.mb-4{margin-bottom:1rem}
.ml-0\.5{margin-left:.125rem}.ml-5{margin-left:1.25rem}
.-ml-1{margin-left:-.25rem}
.space-y-0>*+*{margin-top:0}
.space-y-0\.5>*+*{margin-top:.125rem}
.space-y-1>*+*{margin-top:.25rem}
.space-y-1\.5>*+*{margin-top:.375rem}
.space-y-2>*+*{margin-top:.5rem}
.space-y-2\.5>*+*{margin-top:.625rem}
.space-y-3>*+*{margin-top:.75rem}
.space-y-4>*+*{margin-top:1rem}
.space-y-8>*+*{margin-top:2rem}

/* 尺寸 */
.h-1\.5{height:.375rem}.h-3{height:.75rem}.h-3\.5{height:.875rem}
.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}
.h-7{height:1.75rem}.h-8{height:2rem}.h-9{height:2.25rem}
.h-10{height:2.5rem}.h-11{height:2.75rem}.h-14{height:3.5rem}.h-16{height:4rem}
.h-full{height:100%}
.w-3{width:.75rem}.w-3\.5{width:.875rem}.w-4{width:1rem}.w-5{width:1.25rem}
.w-6{width:1.5rem}.w-7{width:1.75rem}.w-8{width:2rem}.w-9{width:2.25rem}
.w-11{width:2.75rem}.w-full{width:100%}
.min-h-\[60vh\]{min-height:60vh}
.min-h-\[44px\]{min-height:44px}
.min-h-\[64px\]{min-height:64px}
.max-w-xl{max-width:36rem}
.max-w-3xl{max-width:48rem}
.max-w-4xl{max-width:56rem}
.max-w-6xl{max-width:72rem}
.aspect-\[4\/3\]{aspect-ratio:4/3}
.aspect-\[3\/4\]{aspect-ratio:3/4}

/* ---------------------------------------------------------------- 圆角/边框/阴影 */
.rounded{border-radius:.25rem}
.rounded-sm{border-radius:.2rem}
.rounded-md{border-radius:calc(var(--radius) - 2px)}
.rounded-lg{border-radius:var(--radius)}
.rounded-xl{border-radius:calc(var(--radius) + 4px)}
.rounded-full{border-radius:9999px}
.border{border-width:1px;border-style:solid}
.border-t{border-top-width:1px;border-top-style:solid}
.border-b{border-bottom-width:1px;border-bottom-style:solid}
.border-dashed{border-style:dashed}
.shadow-sm{box-shadow:0 1px 2px 0 rgb(0 0 0/.05)}
.shadow-soft{box-shadow:0 1px 2px 0 rgb(16 24 40/.04),0 1px 3px 0 rgb(16 24 40/.06)}
.shadow-md{box-shadow:0 4px 6px -1px rgb(0 0 0/.1),0 2px 4px -2px rgb(0 0 0/.1)}
.shadow-lg{box-shadow:0 10px 15px -3px rgb(0 0 0/.1),0 4px 6px -4px rgb(0 0 0/.1)}
.shadow-\[0_-2px_10px_rgba\(0\,0\,0\,0\.06\)\]{box-shadow:0 -2px 10px rgba(0,0,0,.06)}
.ring-1{box-shadow:0 0 0 1px hsl(var(--border)/.5)}
.ring-2{box-shadow:0 0 0 2px hsl(var(--primary)/.45),0 0 0 3px hsl(var(--background))}
.ring-offset-1{outline-offset:1px}
.backdrop-blur{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}

/* ---------------------------------------------------------------- 装饰 */
.bg-grid{
  background-image:linear-gradient(to right,hsl(var(--border)/.7) 1px,transparent 1px),
                   linear-gradient(to bottom,hsl(var(--border)/.7) 1px,transparent 1px);
  background-size:32px 32px;
}
.bg-grid-fade{
  -webkit-mask-image:radial-gradient(ellipse at center,#000 0,transparent 70%);
  mask-image:radial-gradient(ellipse at center,#000 0,transparent 70%);
}
.bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--tw-from,transparent),var(--tw-to,transparent))}
.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-from,transparent),var(--tw-to,transparent))}
.from-muted\/40{--tw-from:hsl(var(--muted)/.4)}
.to-transparent{--tw-to:transparent}
.from-transparent{--tw-from:transparent}
.via-primary\/40{background-image:linear-gradient(to right,hsl(var(--primary)/0),hsl(var(--primary)/.4),hsl(var(--primary)/0))}
.from-primary{--tw-from:hsl(var(--primary))}
.to-indigo-500{--tw-to:#6366f1}
.bg-clip-text{-webkit-background-clip:text;background-clip:text}
.text-transparent{color:transparent}
.animate-spin{animation:spin 1s linear infinite}
.animate-ping{animation:ping 1.4s cubic-bezier(0,0,.2,1) infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes ping{75%,100%{transform:scale(2);opacity:0}}
.transition-colors{transition:color .15s,background-color .15s,border-color .15s}
.transition-all{transition:all .18s ease}
.hover\:opacity-80:hover{opacity:.8}
.hover\:bg-muted:hover{background:hsl(var(--muted))}
.hover\:bg-muted\/40:hover{background:hsl(var(--muted)/.4)}
.hover\:bg-muted\/50:hover{background:hsl(var(--muted)/.5)}
.hover\:bg-accent:hover{background:hsl(var(--accent))}
.hover\:bg-primary\/90:hover{background:hsl(var(--primary)/.9)}
.hover\:border-border:hover{border-color:hsl(var(--border))}
.hover\:text-foreground:hover{color:hsl(var(--foreground))}
.group:hover .group-hover\:translate-x-0\.5{transform:translateX(.125rem)}
.motion-card{transition:box-shadow .18s ease,transform .18s ease}
.tap-feedback:active{transform:scale(.985)}

/* ---------------------------------------------------------------- 组件：按钮 */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;white-space:nowrap;
  border-radius:calc(var(--radius) - 2px);font-size:13.5px;font-weight:500;
  height:2.25rem;padding:.375rem 1rem;border:1px solid transparent;cursor:pointer;
  transition:background-color .15s,color .15s,border-color .15s,box-shadow .15s;
  background:none;
}
.btn svg{width:1rem;height:1rem;flex-shrink:0}
.btn:disabled{pointer-events:none;opacity:.5}
.btn-default{background:hsl(var(--primary));color:hsl(var(--primary-foreground))}
.btn-default:hover{background:hsl(var(--primary)/.9)}
.btn-outline{border-color:hsl(var(--input));background:hsl(var(--background))}
.btn-outline:hover{background:hsl(var(--accent));color:hsl(var(--accent-foreground))}
.btn-ghost{border-color:transparent}
.btn-ghost:hover{background:hsl(var(--muted))}
.btn-destructive{background:hsl(var(--destructive));color:hsl(var(--destructive-foreground))}
.btn-sm{height:2rem;padding:.25rem .75rem;font-size:12.5px}
.btn-lg{height:2.75rem;padding:.5rem 1.25rem}
.btn-block{width:100%}
.btn-icon{width:2.25rem;padding:0}

/* ---------------------------------------------------------------- 组件：表单 */
.input,.textarea,.select{
  display:flex;width:100%;border-radius:calc(var(--radius) - 2px);
  border:1px solid hsl(var(--input));background:hsl(var(--background));
  padding:.375rem .75rem;height:2.25rem;font-size:13.5px;outline:none;
  transition:border-color .15s,box-shadow .15s;
}
.textarea{height:auto;padding:.5rem .75rem;resize:vertical;min-height:2.75rem}
.select{appearance:none;padding-right:1.75rem;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238b93a7' stroke-width='2' stroke-linecap='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right .5rem center;
}
.input::placeholder,.textarea::placeholder{color:hsl(var(--muted-foreground))}
.input:focus-visible,.textarea:focus-visible,.select:focus-visible{
  border-color:hsl(var(--ring));box-shadow:0 0 0 2px hsl(var(--ring)/.25);
}
.input-sm{height:1.75rem;font-size:12px;padding:.125rem .375rem}
.label{display:block;font-size:11px;font-weight:500;line-height:1.3;color:hsl(var(--muted-foreground))}
.field{border:1px solid hsl(var(--border)/.6);background:hsl(var(--card)/.4);
  border-radius:calc(var(--radius) - 2px);padding:.5rem;transition:border-color .15s,box-shadow .15s}
.field:hover{border-color:hsl(var(--border))}
.field:focus-within{border-color:hsl(var(--primary)/.6);box-shadow:0 0 0 1px hsl(var(--primary)/.2)}
.field .input,.field .textarea{border-color:transparent;background:hsl(var(--background)/.6);
  box-shadow:none;margin-top:.25rem;height:2rem;font-size:13px}
.field .textarea{min-height:44px}
.checkbox{width:1rem;height:1rem;border:1px solid hsl(var(--input));border-radius:.25rem;
  accent-color:hsl(var(--primary));cursor:pointer}
.switch-row{display:flex;align-items:center;gap:.5rem;font-size:12.5px;color:hsl(var(--mututed-foreground));
  color:hsl(var(--muted-foreground))}

/* 分段按钮（印章模式选择那种） */
.seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.375rem}
.seg button{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.125rem;
  border:1px solid hsl(var(--border)/.7);border-radius:calc(var(--radius) - 2px);
  padding:.375rem .5rem;font-size:12.5px;font-weight:500;background:hsl(var(--background));
  cursor:pointer;transition:all .15s;
}
.seg button:hover{background:hsl(var(--muted)/.5)}
.seg button[aria-pressed="true"]{
  border-color:hsl(var(--success)/.6);background:hsl(var(--success)/.1);color:hsl(var(--success));
  box-shadow:0 0 0 2px hsl(var(--success)/.25);
}
.seg .hint{font-size:10px;font-weight:400;color:hsl(var(--muted-foreground))}
.seg .inline-flex{display:inline-flex;align-items:center;gap:.25rem}

/* ---------------------------------------------------------------- 组件：卡片 */
.card{border-radius:calc(var(--radius) + 4px);border:1px solid hsl(var(--border));
  background:hsl(var(--card));color:hsl(var(--card-foreground));
  box-shadow:0 1px 2px 0 rgb(16 24 40/.04),0 1px 3px 0 rgb(16 24 40/.06)}
.card-head{display:flex;flex-direction:column;gap:.375rem;padding:1rem 1rem .5rem}
.card-head.row{flex-direction:row;align-items:flex-start;justify-content:space-between}
.card-title{font-size:15px;font-weight:600;line-height:1;letter-spacing:-.01em}
.card-desc{font-size:12px;color:hsl(var(--muted-foreground))}
.card-body{padding:1rem;padding-top:0}
.card-body-wide{padding:1rem}
.step-badge{display:inline-flex;height:1.25rem;width:1.25rem;align-items:center;justify-content:center;
  border-radius:9999px;background:hsl(var(--primary)/.1);color:hsl(var(--primary));
  font-size:11px;font-weight:600;font-variant-numeric:tabular-nums}

/* 类型列表（首页九宫格） */
.type-grid{border-radius:calc(var(--radius) + 4px);border:1px solid hsl(var(--border)/.6);overflow:hidden}
.type-grid ul{display:grid}
.type-grid li{border-bottom:1px solid hsl(var(--border)/.6)}
.type-grid a{display:flex;align-items:center;gap:1rem;padding:1rem 1.25rem;
  background:hsl(var(--background));transition:background-color .15s}
.type-grid a:hover{background:hsl(var(--muted)/.4)}
.type-icon{display:flex;height:2.75rem;width:2.75rem;flex-shrink:0;align-items:center;justify-content:center;
  border-radius:var(--radius);font-size:0}
.type-icon svg{width:1.25rem;height:1.25rem}
.ti-indigo{background:#eef2ff;color:#4f46e5}
.ti-violet{background:#f5f3ff;color:#7c3aed}
.ti-rose{background:#fff1f2;color:#e11d48}
.ti-emerald{background:#ecfdf5;color:#059669}
.ti-sky{background:#f0f9ff;color:#0284c7}
.ti-teal{background:#f0fdfa;color:#0d9488}
.ti-blue{background:#eff6ff;color:#2563eb}
.ti-amber{background:#fffbeb;color:#d97706}
.ti-slate{background:#f8fafc;color:#475569}
.dark .ti-indigo{background:#312e81;color:#a5b4fc}
.dark .ti-violet{background:#4c1d95;color:#c4b5fd}
.dark .ti-rose{background:#881337;color:#fda4af}
.dark .ti-emerald{background:#064e3b;color:#6ee7b7}
.dark .ti-sky{background:#0c4a6e;color:#7dd3fc}
.dark .ti-teal{background:#134e4a;color:#5eead4}
.dark .ti-blue{background:#1e3a8a;color:#93c5fd}
.dark .ti-amber{background:#78350f;color:#fcd34d}
.dark .ti-slate{background:#1e293b;color:#cbd5e1}
.chev{margin-left:auto;color:hsl(var(--muted-foreground)/.5);width:1rem;height:1rem;transition:transform .15s}
.type-grid a:hover .chev{transform:translateX(.125rem);color:hsl(var(--muted-foreground))}

/* 功能特性小卡 */
.feature-grid{display:grid;gap:.75rem}
.feature{border:1px solid hsl(var(--border)/.6);border-radius:calc(var(--radius) + 4px);
  padding:.875rem 1rem;background:hsl(var(--card))}
.feature h4{font-size:13.5px;font-weight:600;display:flex;align-items:center;gap:.375rem}
.feature p{margin-top:.25rem;font-size:12px;color:hsl(var(--muted-foreground))}
@media(min-width:640px){.feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1024px){.feature-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .type-grid ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .type-grid li:nth-last-child(-n+2){border-bottom:0}}

/* ---------------------------------------------------------------- 应用外壳 */
.app-header{position:sticky;top:0;z-index:40;border-bottom:1px solid hsl(var(--border)/.7);
  background:hsl(var(--background)/.8);backdrop-filter:blur(8px)}
.app-header .container{display:flex;height:3.5rem;align-items:center;gap:.5rem}
@media(min-width:768px){.app-header .container{height:4rem}}
.brand{display:inline-flex;align-items:center;gap:.5rem}
.brand img{height:1.75rem;width:1.75rem;border-radius:var(--radius);box-shadow:0 1px 2px rgb(0 0 0/.05);
  object-fit:contain;background:#fff}
.brand span{font-weight:600;letter-spacing:-.01em}
.app-nav{margin-left:1.25rem;display:none;flex:1 1 0%;align-items:center;gap:.125rem;white-space:nowrap;overflow:hidden}
@media(min-width:1280px){.app-nav{display:flex}}
.app-nav a{border-radius:calc(var(--radius) - 2px);padding:.375rem .625rem;font-size:13px;font-weight:500;
  color:hsl(var(--muted-foreground));transition:background-color .15s,color .15s}
.app-nav a:hover{background:hsl(var(--muted));color:hsl(var(--foreground))}
.app-nav a.active{background:hsl(var(--primary)/.1);color:hsl(var(--primary))}
.app-main{flex:1 1 0%;padding:.75rem 0}
.app-footer{border-top:1px solid hsl(var(--border)/.7);background:hsl(var(--muted)/.3)}
.app-footer .container{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:1.25rem .75rem;
  text-align:center;font-size:12px;color:hsl(var(--muted-foreground))}
@media(min-width:640px){.app-footer .container{flex-direction:row;justify-content:space-between;text-align:left}}
.drawer{position:fixed;inset:0;z-index:60;display:none}
.drawer.open{display:block}
.drawer-mask{position:absolute;inset:0;background:rgb(0 0 0/.45)}
.drawer-panel{position:absolute;left:0;top:0;bottom:0;width:17rem;max-width:80vw;overflow:auto;
  background:hsl(var(--card));border-right:1px solid hsl(var(--border));padding:.75rem}
.drawer-panel a{display:block;border-radius:calc(var(--radius) - 2px);padding:.5rem .75rem;
  font-size:13px;color:hsl(var(--muted-foreground))}
.drawer-panel a:hover,.drawer-panel a.active{background:hsl(var(--muted));color:hsl(var(--foreground))}
.drawer-title{padding:.5rem .75rem 1rem;font-weight:600}

/* ---------------------------------------------------------------- 页面骨架 */
.page-head{margin-bottom:1rem}
.page-title{font-size:20px;font-weight:600;letter-spacing:-.01em}
.page-desc{margin-top:.25rem;font-size:13px;color:hsl(var(--muted-foreground))}
.notice{display:flex;gap:.5rem;border:1px solid hsl(var(--warning)/.35);background:hsl(var(--warning)/.08);
  border-radius:var(--radius);padding:.625rem .75rem;font-size:11.5px;line-height:1.6;
  color:hsl(var(--foreground)/.8);margin-top:.75rem}
.notice svg{width:1rem;height:1rem;flex-shrink:0;color:hsl(var(--warning))}
.toast-wrap{position:fixed;right:1rem;bottom:1rem;z-index:80;display:flex;flex-direction:column;gap:.5rem}
.toast{border:1px solid hsl(var(--border));background:hsl(var(--card));border-radius:var(--radius);
  padding:.625rem .875rem;font-size:12.5px;box-shadow:0 10px 15px -3px rgb(0 0 0/.1);max-width:22rem;
  display:flex;gap:.5rem;align-items:flex-start;animation:slideIn .18s ease}
.toast.ok{border-color:hsl(var(--success)/.5)}
.toast.err{border-color:hsl(var(--destructive)/.5)}
.toast svg{width:1rem;height:1rem;flex-shrink:0;margin-top:.1rem}
.toast.ok svg{color:hsl(var(--success))}
.toast.err svg{color:hsl(var(--destructive))}
@keyframes slideIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.layout-2{display:grid;gap:1rem}
@media(min-width:1024px){
  .layout-2{grid-template-columns:minmax(0,1fr) 22rem}
  .layout-2 .side{position:sticky;top:5rem;align-self:start;display:block}
}
.sticky-actions{position:fixed;left:0;right:0;bottom:0;z-index:40;border-top:1px solid hsl(var(--border)/.7);
  background:hsl(var(--background)/.95);backdrop-filter:blur(8px);padding:.5rem .75rem}
.sticky-actions .inner{display:flex;gap:.5rem;max-width:48rem;margin:0 auto}
.sticky-actions .btn{flex:1 1 0%;height:2.75rem}
@media(min-width:1024px){.sticky-actions{display:none}}
.preview-box{position:relative;display:flex;aspect-ratio:4/3;align-items:center;justify-content:center;
  overflow:hidden;border-radius:var(--radius);border:1px solid hsl(var(--border));background:hsl(var(--muted)/.3)}
.preview-box.tall{aspect-ratio:3/4}
.preview-box img{max-width:100%;max-height:100%;object-fit:contain}
.preview-empty{text-align:center;font-size:12px;color:hsl(var(--muted-foreground))}
.preview-empty svg{width:2rem;height:2rem;margin:0 auto .375rem;opacity:.4}
.preview-ops{display:flex;gap:.5rem;justify-content:center;margin-top:.75rem;flex-wrap:wrap}
.badge-chip{display:inline-flex;align-items:center;gap:.375rem;border-radius:9999px;
  border:1px solid hsl(var(--border)/.7);background:hsl(var(--background)/.7);
  padding:.25rem .75rem;font-size:12px;font-weight:500}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace}
.table-wrap{overflow-x:auto;border:1px solid hsl(var(--border)/.6);border-radius:var(--radius)}
table.data{width:100%;border-collapse:collapse;font-size:12.5px}
table.data th,table.data td{padding:.5rem .75rem;text-align:left;white-space:nowrap;
  border-bottom:1px solid hsl(var(--border)/.6)}
table.data th{background:hsl(var(--muted)/.5);font-weight:600;color:hsl(var(--foreground)/.85);font-size:12px}
table.data tr:last-child td{border-bottom:0}
table.data tbody tr:hover{background:hsl(var(--muted)/.3)}
.kbd{display:inline-block;border:1px solid hsl(var(--border));border-bottom-width:2px;
  border-radius:.25rem;padding:0 .3rem;font-size:11px;background:hsl(var(--muted)/.6)}
details.adv{border:1px dashed hsl(var(--border));border-radius:var(--radius);
  background:hsl(var(--background)/.4);padding:.5rem .625rem;margin-top:.5rem}
details.adv>summary{cursor:pointer;font-size:11px;color:hsl(var(--muted-foreground));
  display:flex;align-items:center;justify-content:space-between;gap:.5rem}
details.adv>summary:hover{color:hsl(var(--foreground))}
details.adv>summary::-webkit-details-marker{display:none}
details.adv svg{width:.75rem;height:.75rem}
.mt-adv{margin-top:.5rem}
.grid-2{display:grid;gap:.5rem}
.grid-3{display:grid;gap:.5rem}
@media(min-width:640px){.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:640px){.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1024px){.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.spin{width:1.5rem;height:1.5rem;animation:spin 1s linear infinite;color:hsl(var(--muted-foreground))}
.center-box{display:flex;min-height:60vh;align-items:center;justify-content:center}
.link-primary{color:hsl(var(--primary));cursor:pointer;background:none;border:0;padding:0;font-size:10px;
  display:inline-flex;align-items:center;gap:.25rem}
.link-primary:hover{text-decoration:underline}

/* ---------------------------------------------------------------- 模板选择网格 */
/* 对齐目标站 /license 的模板卡：缩略图 + 名称 + 字段数/扣费 */
.tpl-grid{display:grid;gap:.5rem;grid-template-columns:repeat(auto-fill,minmax(8.5rem,1fr))}
.tpl-card{
  display:flex;flex-direction:column;gap:.25rem;text-align:left;
  border:1px solid hsl(var(--border));border-radius:var(--radius);
  background:hsl(var(--card));padding:.3rem;cursor:pointer;overflow:hidden;
  transition:border-color .15s,box-shadow .15s,transform .12s;
}
.tpl-card:hover{border-color:hsl(var(--primary)/.55);box-shadow:0 2px 8px rgb(16 24 40/.06)}
.tpl-card:active{transform:scale(.985)}
.tpl-card.on{border-color:hsl(var(--primary));box-shadow:0 0 0 2px hsl(var(--primary)/.2)}
.tpl-card img{
  display:block;width:100%;height:5.6rem;object-fit:contain;background:#fff;
  border-radius:calc(var(--radius) - 3px);border:1px solid hsl(var(--border)/.5);
}
.tpl-card .nm{font-size:11.5px;font-weight:500;line-height:1.2;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.tpl-card.on .nm{color:hsl(var(--primary))}
.tpl-card .mt{font-size:10px;color:hsl(var(--muted-foreground))}
.tpl-card .thumb-ph{display:flex;height:5.6rem;align-items:center;justify-content:center;
  border-radius:calc(var(--radius) - 3px);border:1px dashed hsl(var(--border));
  background:hsl(var(--muted)/.35);color:hsl(var(--muted-foreground))}
.tpl-card .thumb-ph svg{width:1.25rem;height:1.25rem;opacity:.5}
.chips{display:flex;flex-wrap:wrap;gap:.375rem}
.chip{border:1px solid hsl(var(--border));border-radius:9999px;padding:.15rem .6rem;
  font-size:11.5px;line-height:1.5;color:hsl(var(--muted-foreground));
  background:transparent;cursor:pointer;transition:all .15s}
.chip:hover{background:hsl(var(--muted)/.6);color:hsl(var(--foreground))}
.chip.on{background:hsl(var(--primary));border-color:hsl(var(--primary));
  color:hsl(var(--primary-foreground))}
.tpl-scroll{max-height:24rem;overflow:auto;padding-right:.25rem}

/* 印章中心图形选择器：缩略图网格，点一张即选中 */
.seal-icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(3.25rem, 1fr));
  gap: .35rem;
  max-height: 13rem;
  overflow-y: auto;
  padding: .25rem;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--muted) / .35);
}
.seal-icon-grid img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  padding: .2rem;
  border-radius: calc(var(--radius) - 2px);
  background: #fff;
  cursor: pointer;
  border: 2px solid transparent;
}
.seal-icon-grid img:hover { border-color: hsl(var(--primary) / .5); }
.seal-icon-grid img.on { border-color: hsl(var(--primary)); }