@import url('/static/vendor/css/fonts.css?v=2026.05.22.1');
:root { --page:#f5f4f1; --panel:#ffffff; --card:#ffffff; --soft:#f2f1ee; --soft-2:#e8e7e3; --line:#e4e3df; --line-2:#cfcdc6; --text:#1a1917; --muted:#6b675f; --faint:#98948a; --strong:#1a1917; --strong-text:#f7f5f0; --accent:#8f6f2e; --accent-soft:#f3eddd; --accent-line:#d9c9a0; --danger:#b3372f; --danger-soft:#f9efec; --success:#35855a; --shadow:rgba(12,10,6,.12); --font-ui:"Inter","PingFang SC","Microsoft YaHei",sans-serif; --font-display:"Space Grotesk","Inter","PingFang SC","Microsoft YaHei",sans-serif; --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Consolas,monospace; --r-sm:3px; --r-md:6px; --r-lg:10px; }
.theme-dark { --page:#0b0b0d; --panel:#131316; --card:#1a1a1e; --soft:#202024; --soft-2:#28282e; --line:#2c2c33; --line-2:#45454e; --text:#f2efe8; --muted:#a8a294; --faint:#6f6a5e; --strong:#d8b878; --strong-text:#191510; --accent:#d4b57a; --accent-soft:rgba(212,181,122,.12); --accent-line:rgba(212,181,122,.30); --danger:#e07856; --danger-soft:rgba(224,120,86,.14); --success:#7fbf8e; --shadow:rgba(0,0,0,.4); }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:var(--page); color:var(--text); font-family:var(--font-ui); -webkit-font-smoothing:antialiased; }
button,input,textarea { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
.skill-page { width:min(1180px, calc(100% - 48px)); margin:0 auto; padding:28px 0 44px; }
.skill-topbar { display:flex; align-items:flex-start; justify-content:space-between; gap:28px; padding:10px 0 28px; border-bottom:1px solid var(--line); }
.skill-brand { display:flex; align-items:flex-start; gap:14px; min-width:0; }
.skill-back { width:36px; height:36px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:10px; color:var(--muted); background:var(--card); }
.skill-back:hover { color:var(--accent); border-color:var(--accent-line); }
.skill-back svg { width:17px; height:17px; }
.skill-eyebrow { color:var(--accent); font-size:10px; font-weight:800; letter-spacing:.13em; }
h1,h2 { margin:0; font-family:var(--font-display); letter-spacing:.01em; }
h1 { margin-top:2px; font-size:32px; line-height:1.12; }
.skill-brand p { margin:8px 0 0; max-width:620px; color:var(--muted); font-size:13px; line-height:1.55; }
.skill-actions,.skill-toolbar-meta,.skill-form-actions { display:flex; align-items:center; gap:8px; }
.skill-link-btn,.skill-quiet-btn,.skill-secondary-btn,.skill-primary-btn,.skill-icon-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; border-radius:9px; cursor:pointer; transition:background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease; }
.skill-link-btn,.skill-quiet-btn,.skill-secondary-btn { min-height:36px; padding:0 12px; border:1px solid var(--line); color:var(--muted); background:var(--card); text-decoration:none; font-size:12px; font-weight:700; }
.skill-link-btn:hover,.skill-quiet-btn:hover,.skill-secondary-btn:hover { color:var(--text); border-color:var(--line-2); background:var(--soft); }
.skill-primary-btn { min-height:36px; padding:0 14px; border:1px solid var(--strong); color:var(--strong-text); background:var(--strong); font-size:12px; font-weight:800; }
.skill-primary-btn:hover { transform:translateY(-1px); filter:brightness(1.06); }
.skill-primary-btn svg,.skill-link-btn svg,.skill-quiet-btn svg { width:15px; height:15px; }
.skill-icon-btn { width:32px; height:32px; border:1px solid var(--line); color:var(--muted); background:var(--card); }
.skill-icon-btn:hover { color:var(--text); border-color:var(--line-2); }
.skill-icon-btn svg { width:16px; height:16px; }
.skill-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 0 16px; }
.skill-search { width:min(440px,100%); height:38px; display:flex; align-items:center; gap:9px; padding:0 12px; border:1px solid var(--line); border-radius:10px; background:var(--card); color:var(--muted); }
.skill-search:focus-within { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.skill-search svg { width:16px; height:16px; }
.skill-search input { flex:1; min-width:0; border:0; outline:0; background:transparent; color:var(--text); font-size:13px; }
.skill-toolbar-meta { color:var(--faint); font-size:11px; }
.skill-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.skill-card { display:flex; flex-direction:column; min-height:240px; padding:17px; border:1px solid var(--line); border-radius:12px; background:var(--card); box-shadow:0 5px 16px var(--shadow); }
.skill-card:hover { border-color:var(--accent-line); box-shadow:0 12px 28px var(--shadow); }
.skill-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.skill-card-title { display:flex; align-items:center; gap:9px; min-width:0; }
.skill-card-icon { width:30px; height:30px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; border-radius:9px; color:var(--accent); background:var(--accent-soft); }
.skill-card-icon svg { width:16px; height:16px; }
.skill-card h3 { margin:0; font-size:15px; line-height:1.3; }
.skill-builtin { flex:0 0 auto; padding:3px 7px; border-radius:999px; color:var(--accent); background:var(--accent-soft); font-size:10px; font-weight:800; }
.skill-card-desc { min-height:38px; margin:14px 0 0; color:var(--muted); font-size:12px; line-height:1.6; }
.skill-card-section { margin-top:14px; }
.skill-card-section-label { color:var(--faint); font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.skill-code { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; margin:5px 0 0; padding:8px 9px; border-radius:8px; background:var(--soft); color:var(--text); font:11px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace; white-space:pre-wrap; word-break:break-word; }
.skill-tags { display:flex; flex-wrap:wrap; gap:5px; margin-top:10px; }
.skill-tag { padding:3px 8px; border:1px solid var(--line); border-radius:999px; color:var(--muted); font-size:10px; }
.skill-card-actions { display:flex; gap:6px; margin-top:auto; padding-top:16px; }
.skill-card-actions button { display:inline-flex; align-items:center; gap:5px; min-height:29px; padding:0 9px; border:1px solid var(--line); border-radius:7px; color:var(--muted); background:var(--soft); cursor:pointer; font-size:11px; font-weight:700; }
.skill-card-actions button:hover { color:var(--accent); border-color:var(--accent-line); }
.skill-card-actions button.danger:hover { color:var(--danger); border-color:var(--danger); background:var(--danger-soft); }
.skill-card-actions svg { width:13px; height:13px; }
.skill-empty { min-height:330px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; color:var(--muted); text-align:center; }
.skill-empty-icon { width:56px; height:56px; display:flex; align-items:center; justify-content:center; border-radius:16px; background:var(--accent-soft); color:var(--accent); }
.skill-empty-icon svg { width:26px; height:26px; }
.skill-empty strong { color:var(--text); font-size:15px; }
.skill-empty span { font-size:12px; }
.skill-empty .skill-primary-btn { margin-top:7px; }
.skill-modal { position:fixed; inset:0; z-index:20; display:flex; align-items:center; justify-content:center; padding:24px; background:rgba(22,26,22,.45); backdrop-filter:blur(4px); }
.skill-modal[hidden] { display:none; }
.skill-modal-panel { width:min(900px,100%); max-height:calc(100vh - 48px); overflow:auto; padding:22px; border:1px solid var(--line); border-radius:16px; background:var(--card); box-shadow:0 24px 70px rgba(0,0,0,.24); }
.skill-modal-head { display:flex; justify-content:space-between; gap:20px; padding-bottom:18px; border-bottom:1px solid var(--line); }
.skill-modal-head h2 { margin-top:3px; font-size:25px; }
.skill-modal-head p { margin:6px 0 0; color:var(--muted); font-size:12px; }
.skill-modal-head code { padding:2px 5px; border-radius:4px; background:var(--soft); color:var(--accent); }
.skill-form { padding-top:18px; }
.skill-form label { display:flex; flex-direction:column; gap:6px; margin-bottom:13px; color:var(--muted); font-size:12px; font-weight:700; }
.skill-label-hint { margin-left:5px; color:var(--faint); font-size:10px; font-weight:500; }
.skill-form input,.skill-form textarea { width:100%; border:1px solid var(--line); border-radius:9px; outline:0; padding:9px 11px; background:var(--soft); color:var(--text); font-size:13px; font-weight:500; resize:vertical; }
.skill-form input:focus,.skill-form textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.skill-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.skill-form-error { margin:8px 0 12px; padding:9px 11px; border-radius:8px; color:var(--danger); background:var(--danger-soft); font-size:12px; }
.skill-form-actions { justify-content:flex-end; padding-top:5px; }
.skill-toast { position:fixed; left:50%; bottom:25px; z-index:40; transform:translate(-50%,12px); padding:10px 16px; border-radius:10px; opacity:0; pointer-events:none; color:var(--strong-text); background:var(--strong); box-shadow:0 12px 28px var(--shadow); font-size:12px; font-weight:700; transition:opacity .2s ease,transform .2s ease; }
.skill-toast.show { opacity:1; transform:translate(-50%,0); }
@media (max-width:820px){ .skill-page{width:min(100% - 30px,680px);padding-top:18px}.skill-topbar{flex-direction:column}.skill-actions{width:100%}.skill-actions>*{flex:1}.skill-toolbar{align-items:stretch;flex-direction:column}.skill-search{width:100%}.skill-toolbar-meta{justify-content:space-between}.skill-grid{grid-template-columns:1fr}.skill-form-grid{grid-template-columns:1fr}.skill-modal{padding:12px}.skill-modal-panel{padding:16px} }

/* ============================================================
   曜黑鎏金 · Obsidian & Champagne 覆盖区（2026-09-01 重设计）
   设计系统见项目根 DESIGN.md。
   ============================================================ */
h1,h2 { font-weight:700; letter-spacing:-0.02em; }
.skill-eyebrow { font-family:var(--font-display); font-weight:600; letter-spacing:.22em; text-transform:uppercase; }
.skill-code { font-family:var(--font-mono); }
.skill-builtin { font-family:var(--font-mono); letter-spacing:.08em; text-transform:uppercase; }
.skill-back,.skill-link-btn,.skill-quiet-btn,.skill-secondary-btn,.skill-icon-btn,.skill-search,.skill-primary-btn { border-radius:var(--r-md); }
.skill-card { border-radius:var(--r-lg); }
.skill-card-actions button { border-radius:var(--r-sm); }
.skill-search:focus-within { box-shadow:0 0 0 3px rgba(212,181,122,.18); }
.skill-form input:focus,.skill-form textarea:focus { box-shadow:0 0 0 3px rgba(212,181,122,.18); }
.skill-modal { background:rgba(8,8,10,.58); backdrop-filter:blur(10px); }
.skill-modal-panel { border-radius:12px; box-shadow:0 32px 90px rgba(0,0,0,.4); }
.skill-card-icon,.skill-empty-icon { border-radius:var(--r-md); }
::selection { background:rgba(212,181,122,.28); }