/* ux-kit.css · 工具中心统一样式与状态组件
 * 站点主题色唯一来源（方案 §3.1 真实绿）。严禁在各页硬编码色（除 #fff/#000）。
 * 引用：<link rel="stylesheet" href="/assets/ux-kit.css?v=1">
 */
:root{
  --bg:#f7f9f7; --surface:#fff; --surface-warm:#eef3ee;
  --fg:#16201a; --muted:#5c6b61; --border:#e1e8e3;
  --accent:#2d5016; --accent-bright:#4a7c12; --accent-soft:#e8f5e9; --accent-on:#fff;
  --link:#1a5c9e;
  --tool-accent:#d04a02; --tool-accent-d:#a8380a; --tool-accent-soft:#fbe6d8; /* 仅生信工具内部语义，不进外壳 */
  --success:#16a34a; --warn:#d97706; --danger:#dc2626; --info:#2563eb;
  --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-pill:9999px;
  --font-body:"Inter","Noto Sans SC","Microsoft YaHei","PingFang SC",-apple-system,sans-serif;
  --shadow-sm:0 1px 3px rgba(22,32,26,.08);
  --shadow-md:0 4px 16px rgba(22,32,26,.10);
  --shadow-lg:0 12px 40px rgba(22,32,26,.14);
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px;
}

/* ---------- 图标基样式（Bootstrap Icons sprite, currentColor） ---------- */
.icon{width:16px;height:16px;vertical-align:middle;fill:currentColor}
.icon-20{width:20px;height:20px}
.icon-24{width:24px;height:24px}
.ux-spin{animation:ux-spin 1s linear infinite}
@keyframes ux-spin{to{transform:rotate(360deg)}}

/* ---------- 统一状态组件（方案 §6） ---------- */
.ux-loading{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-5);color:var(--muted);font:500 14px/1.4 var(--font-body)}
.ux-loading .icon{width:20px;height:20px;color:var(--accent)}
.ux-skeleton{background:linear-gradient(90deg,var(--surface-warm) 25%,var(--bg) 50%,var(--surface-warm) 75%);background-size:200% 100%;animation:ux-shimmer 1.2s infinite;border-radius:var(--radius-md);min-height:120px}
@keyframes ux-shimmer{to{background-position:-200% 0}}
.ux-empty{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);padding:var(--space-7);color:var(--muted);text-align:center;font:500 14px/1.5 var(--font-body)}
.ux-empty .icon{width:40px;height:40px;color:var(--border)}
.ux-error{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);padding:var(--space-6);color:var(--danger);text-align:center;background:var(--surface-warm);border:1px solid var(--border);border-radius:var(--radius-md);font:500 14px/1.5 var(--font-body)}
.ux-error .icon{width:36px;height:36px}
.ux-toast{position:fixed;top:var(--space-5);right:var(--space-5);z-index:9999;display:flex;align-items:center;gap:var(--space-3);min-width:240px;max-width:380px;padding:var(--space-4) var(--space-5);background:var(--surface);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);border-left:4px solid var(--info);font:500 14px/1.4 var(--font-body);color:var(--fg);animation:ux-toast-in .2s ease}
.ux-toast[data-type=success]{border-left-color:var(--success)}
.ux-toast[data-type=warn]{border-left-color:var(--warn)}
.ux-toast[data-type=error]{border-left-color:var(--danger)}
.ux-toast .icon{width:20px;height:20px;color:var(--info);flex:none}
.ux-toast[data-type=success] .icon{color:var(--success)}
.ux-toast[data-type=warn] .icon{color:var(--warn)}
.ux-toast[data-type=error] .icon{color:var(--danger)}
.ux-toast__close{margin-left:auto;background:none;border:none;color:var(--muted);cursor:pointer;font-size:18px;line-height:1;padding:0 2px}
@keyframes ux-toast-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* ---------- 统一导航外壳（SSI header / footer） ---------- */
.ux-shell-header{background:linear-gradient(135deg,var(--accent),var(--accent-bright));color:#fff;position:sticky;top:0;z-index:100;box-shadow:var(--shadow-sm)}
.ux-shell-header__inner{max-width:1280px;margin:0 auto;display:flex;align-items:center;gap:var(--space-6);padding:0 var(--space-6);height:60px}
.ux-shell-brand{display:flex;align-items:center;gap:var(--space-3);color:#fff;font:700 18px var(--font-body);white-space:nowrap}
.ux-shell-brand .icon{color:#fff}
.ux-shell-nav{display:flex;align-items:center;gap:var(--space-5);flex:1}
.ux-shell-nav a{color:rgba(255,255,255,.88);font:500 15px var(--font-body);padding:var(--space-2) 0;position:relative;white-space:nowrap}
.ux-shell-nav a:hover{color:#fff}
.ux-shell-nav a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:#fff;transform:scaleX(0);transition:transform .18s}
.ux-shell-nav a:hover::after{transform:scaleX(1)}
.ux-shell-breadcrumb{display:flex;align-items:center;gap:var(--space-2);font:400 13px var(--font-body);color:rgba(255,255,255,.75);white-space:nowrap}
.ux-shell-breadcrumb a{color:rgba(255,255,255,.85)}
.ux-shell-breadcrumb a:hover{color:#fff}
.ux-shell-sep{opacity:.6}
.ux-shell-crumb-current{color:#fff;font-weight:600}


/* ---------- 工具卡片（首页 #panel-tools，方案 §3.4） ---------- */
.tool-card{display:flex;flex-direction:column;gap:var(--space-3);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-5);transition:transform .18s,box-shadow .18s,border-color .18s;text-decoration:none;color:inherit}
.tool-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--accent-bright);background:var(--accent-soft)}
.tool-card__head{display:flex;align-items:center;gap:var(--space-3)}
.tool-card__icon{width:44px;height:44px;border-radius:var(--radius-md);background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;flex:none}
.tool-card__icon .icon{width:24px;height:24px}
.tool-card__title{font:700 17px var(--font-body);color:var(--fg)}
.tool-card__badge{margin-left:auto;font:600 11px var(--font-body);padding:3px 10px;border-radius:var(--radius-pill);background:var(--surface-warm);color:var(--muted);border:1px solid var(--border)}
.tool-card__badge--jbrowse{background:var(--accent-soft);color:var(--accent)}
.tool-card__badge--ss{background:var(--tool-accent-soft);color:var(--tool-accent-d)}
.tool-card__badge--ext{background:#eef2fb;color:#2b4a8b}
.tool-card__desc{color:var(--muted);font:400 14px/1.6 var(--font-body);min-height:44px}
.tool-card__tags{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-1)}
.tool-card__tag{font:500 12px var(--font-body);padding:3px 10px;border-radius:var(--radius-pill);background:var(--surface-warm);color:var(--muted)}

/* ---------- 返回条（第三方 wrapper 用） ---------- */
.ux-backbar{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-6);background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:60px;z-index:90}
.ux-backbar a{display:inline-flex;align-items:center;gap:var(--space-2);color:var(--accent);font:600 14px var(--font-body)}
.ux-backbar .icon{width:18px;height:18px}
.ux-iframe-wrap{position:relative;width:100%;height:calc(100vh - 60px - 52px)}
.ux-iframe-wrap iframe{width:100%;height:100%;border:0;display:block}