:root {
  --ink: #172033;
  --muted: #718096;
  --line: #e6ebf2;
  --surface: rgba(255,255,255,.86);
  --accent: #4f46e5;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background: linear-gradient(145deg, #f7f9fc 0%, #eef3f9 52%, #fdfefe 100%);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif;
}

.skill-topbar {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  background: rgba(255,255,255,.9);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(16px);
}
.topbar-leading { display:flex; align-items:center; gap:18px; min-width:0; }
.toolbox-back { display:inline-flex; align-items:center; gap:7px; flex:none; min-height:38px; padding:8px 13px; border:1px solid #cbd8e8; border-radius:10px; color:#263e5e; background:#f4f8fd; font-size:12px; font-weight:700; text-decoration:none; white-space:nowrap; transition:background .16s,border-color .16s,color .16s; }
.toolbox-back span { font-size:18px; line-height:1; }
.toolbox-back:hover { background:#e7f0fb; border-color:#8eadd1; color:#174b84; }
.toolbox-back:focus-visible { outline:2px solid #2563eb; outline-offset:3px; }
.brand { display: flex; align-items: center; gap: 11px; font-weight: 750; letter-spacing: .02em; }
.brand-mark { width: 30px; height: 30px; display: grid; place-items: center; color: white; border-radius: 9px; background: linear-gradient(135deg, #111827, var(--accent)); font-size: 13px; }
.brand small { display:block; color: #9aa5b5; font-size: 10px; font-weight: 600; letter-spacing: .12em; margin-top: 2px; }
.top-actions { display:flex; gap: 9px; align-items:center; }
.top-actions a, .top-actions button { text-decoration:none; border: 1px solid var(--line); color:#526174; background:#fff; border-radius: 9px; padding: 8px 12px; font-size: 12px; cursor:pointer; }
.top-actions a:hover, .top-actions button:hover { border-color:#aab7c8; color:var(--ink); }
.wechat-hover { position:relative; }
.wechat-hover > button { text-decoration:none; border:1px solid #d9e7f5; color:#2563eb; background:#f8fbff; border-radius:9px; padding:8px 12px; font-size:12px; cursor:pointer; }
.wechat-hover > button:hover { border-color:#93c5fd; background:#eff6ff; }
.wechat-card { position:absolute; top:calc(100% + 10px); right:0; width:330px; padding:12px; display:flex; gap:12px; align-items:center; background:#fff; border:1px solid #e5e7eb; border-radius:14px; box-shadow:0 18px 42px rgba(15,23,42,.18); opacity:0; visibility:hidden; transform:translateY(-5px); transition:opacity .16s, transform .16s, visibility .16s; z-index:20; }
.wechat-hover:hover .wechat-card, .wechat-hover:focus-within .wechat-card { opacity:1; visibility:visible; transform:translateY(0); }
.wechat-card img { display:block; width:150px; height:auto; border-radius:9px; background:#f8fafc; }
.wechat-card-copy { min-width:0; }
.wechat-card-copy strong { display:block; color:#111827; font-size:15px; }
.wechat-card-copy span { display:block; margin-top:5px; color:#64748b; font-size:11px; line-height:1.6; }
.wechat-card-copy small { display:block; margin-top:12px; color:#2563eb; font-size:10px; }

.skill-layout { max-width: 1600px; margin: 0 auto; min-height: calc(100vh - 64px); padding: 24px; display: grid; grid-template-columns: 320px minmax(0,1fr); gap: 24px; }
.skill-sidebar { display:flex; flex-direction:column; gap: 14px; }
.skill-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 12px 30px rgba(28,42,66,.05); padding: 18px; }
.skill-sidebar > .skill-card:first-child { height: 225px; overflow:auto; display:flex; flex-direction:column; align-items:flex-start; }
.skill-kicker { color: var(--accent); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; font-weight: 800; }
.skill-card h1 { margin: 8px 0 7px; font-size: 22px; line-height: 1.25; letter-spacing: -.02em; }
.skill-card p { margin:0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.skill-sidebar > .skill-card:first-child h1 { min-height: 55px; }
.skill-sidebar > .skill-card:first-child p { flex:1; }
.skill-sidebar > .skill-card:first-child .runtime-chip { margin-top:12px; }
.runtime-chip { display:inline-flex; align-items:center; gap: 6px; margin-top: 14px; color:#23623e; background:#ecfdf3; border: 1px solid #bbf7d0; border-radius: 999px; padding: 5px 9px; font-size: 11px; font-weight: 650; }
.runtime-chip::before { content:""; width:6px; height:6px; border-radius:50%; background:#22c55e; }
.runtime-chip.pending { color:#805b18; background:#fffbeb; border-color:#fde68a; }
.runtime-chip.pending::before { background:#f59e0b; }
.nav-title { display:flex; flex-direction:column; gap:4px; color:#26364c; font-weight:750; font-size:15px; letter-spacing:.02em; margin-bottom:14px; }
.nav-title small { color:#a0adbd; font-size:9px; letter-spacing:.14em; font-weight:700; }
.skill-nav { display:flex; flex-direction:column; gap:8px; }
.skill-nav a { position:relative; display:flex; align-items:center; gap:10px; min-height:65px; text-decoration:none; color:#405067; border:1px solid #eaf0f6; background:#fbfcfe; border-radius:12px; padding:10px; transition:background .16s,border-color .16s,transform .16s; }
.skill-nav a:hover { background:#f5f8fc; border-color:#cbd9e9; transform:translateX(2px); }
.skill-nav a.active { color:var(--ink); background:color-mix(in srgb,var(--accent) 7%,white); border-color:color-mix(in srgb,var(--accent) 34%,white); }
.skill-nav a:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.nav-icon { width:36px; height:36px; flex:none; display:grid; place-items:center; border-radius:10px; color:var(--accent); background:color-mix(in srgb,var(--accent) 10%,white); font-size:15px; font-weight:800; }
.nav-copy { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.nav-copy strong { font-size:13px; line-height:1.25; }
.nav-copy small { color:#8997a8; font-size:10px; line-height:1.3; }
.nav-hint { flex:none; color:#8493a5; font-size:9px; white-space:nowrap; }
.skill-nav a.active .nav-hint { color:var(--accent); font-weight:700; }
.cap-list { display:grid; gap:0; margin:0; padding:0; list-style:none; }
.cap-list li { display:flex; gap:10px; align-items:flex-start; color:#526276; font-size:12px; line-height:1.5; padding:10px 0; border-top:1px solid #eef2f6; }
.cap-number { flex:none; color:var(--accent); font:700 10px/1.8 ui-monospace,monospace; }

.workspace-card { min-width:0; min-height: 0; display:flex; flex-direction:column; gap: 14px; }
.workspace-head { display:grid; grid-template-columns:minmax(140px,1fr) minmax(0,auto); align-items:center; gap:12px; }
.workspace-head > div:first-child { min-width:0; }
.workspace-head h2 { margin:0; font-size:20px; letter-spacing:-.02em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.workspace-head p { margin:5px 0 0; color:var(--muted); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.workspace-actions { display:flex; min-width:0; gap:7px; flex-wrap:nowrap; justify-content:flex-start; align-items:center; overflow-x:auto; scrollbar-width:thin; padding:2px 0 5px; }
.workspace-actions > span { display:inline-flex; align-items:center; gap:7px; flex:none; }
.workspace-actions button { flex:none; display:inline-flex; align-items:center; justify-content:center; height:38px; white-space:nowrap; border: 1px solid var(--line); border-radius: 9px; padding: 0 11px; background:#fff; color:#526174; font-size:11px; cursor:pointer; }
.workspace-actions button.primary { color:#fff; background:var(--accent); border-color:var(--accent); }
.workspace-actions button:hover { filter: brightness(.98); border-color:#aab7c8; }
.layout-direction-bar select { height:38px; padding:0 28px 0 11px; border:1px solid var(--line); border-radius:9px; background:#fff; color:#526174; font-size:11px; cursor:pointer; }
.layout-direction-bar [role=status]:not(:empty) { display:inline-flex; align-items:center; height:38px; padding:0 11px; border:1px solid var(--line); border-radius:9px; background:#fff; color:#526174; font-size:11px; white-space:nowrap; }
.workspace-style-gallery { position:relative; }
.workspace-style-trigger { display:inline-flex; align-items:center; gap:7px; min-width:116px; padding:7px 10px; border:1px solid var(--line); border-radius:9px; background:#fff; color:#526174; font-size:11px; cursor:pointer; }
.workspace-style-trigger:hover { border-color:#aab7c8; }
.workspace-style-trigger span { color:#8a97a8; }
.workspace-style-trigger strong { max-width:76px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:650; }
.workspace-style-trigger i { margin-left:auto; color:#9aa5b5; font-style:normal; font-size:12px; transition:transform .15s; }
.workspace-style-gallery.open .workspace-style-trigger i { transform:rotate(180deg); }
.style-gallery-panel { position:fixed; top:70px; right:12px; width:720px; max-width:calc(100vw - 24px); max-height:min(560px,75vh); overflow:auto; padding:16px; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:0 18px 45px rgba(15,23,42,.18); display:none; z-index:30; }
.workspace-style-gallery.open .style-gallery-panel { display:block; }
.style-gallery-head { display:flex; align-items:center; justify-content:space-between; color:#64748b; font-size:10px; letter-spacing:.08em; font-weight:750; text-transform:uppercase; margin:0 2px 9px; }
.style-gallery-head span { color:#a0adbd; font-weight:500; letter-spacing:0; text-transform:none; }
.style-gallery-grid { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:8px; }
.style-card { min-width:0; padding:6px; border:1px solid transparent; border-radius:10px; background:#fff; text-align:left; cursor:pointer; }
.workspace-actions .style-gallery-grid .style-card { display:block; width:100%; height:auto; min-width:0; padding:8px; white-space:normal; text-align:left; border:1px solid transparent; border-radius:10px; background:#fff; }
.workspace-actions .style-gallery-grid .style-card:hover { background:#f8fafc; border-color:#dbeafe; }
.workspace-actions .style-gallery-grid .style-card.active { background:#eff6ff; border-color:#93c5fd; }
.style-card:hover { background:#f8fafc; border-color:#dbeafe; }
.style-card.active { background:#eff6ff; border-color:#93c5fd; }
.style-card-thumb { width:100%; height:94px; overflow:hidden; border:1px solid rgba(15,23,42,.08); border-radius:7px; background:#f8fafc; color:#94a3b8; font-size:10px; }
@media (max-width:600px) { .style-gallery-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.style-thumb-paper { width:200%; min-height:144px; transform:scale(.5); transform-origin:top left; overflow:hidden; }
.style-card-name { display:block; margin-top:6px; overflow:hidden; color:#334155; font-size:11px; font-weight:650; text-overflow:ellipsis; white-space:nowrap; }
.style-card-desc { display:block; margin-top:2px; overflow:hidden; color:#9aa5b5; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.workspace-ai { display:inline-flex; align-items:center; gap:6px; height:38px; box-sizing:border-box; padding:0 3px 0 9px; border:1px solid #fed7aa; border-radius:9px; background:#fff7ed; color:#9a3412; font-size:11px; }
.workspace-ai select { max-width:120px; border:0; outline:0; background:transparent; color:#9a3412; font-size:11px; padding:7px 4px 7px 0; cursor:pointer; }
.topbar-provider { flex:none; padding:0 7px 0 10px; }
.topbar-provider span { font-weight:650; white-space:nowrap; }
.topbar-provider select:focus-visible { outline:2px solid #c2410c; outline-offset:2px; border-radius:4px; }
.workspace-actions button.ai-btn { color:#9a3412; border-color:#fed7aa; background:#fff7ed; }
.workspace-actions button.ai-btn:hover { border-color:#fdba74; background:#ffedd5; }
.ai-result { display:none; border:1px solid #fed7aa; border-radius:12px; background:#fffaf5; padding:11px 13px; color:#7c2d12; font-size:11px; line-height:1.6; }
.ai-result.show { display:block; grid-column:1 / -1; }
.ai-result-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:5px; font-weight:700; }
.ai-result-head span { color:#c2410c; font-size:10px; font-weight:500; }
.ai-result pre { margin:0; max-height:130px; overflow:auto; white-space:pre-wrap; font:11px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; color:#7c2d12; }
.workspace-settings { width:min(470px,calc(100vw - 32px)); max-width:none; max-height:min(88vh,780px); padding:0; border:1px solid #e6e8ed; border-radius:18px; background:#fff; color:#172033; box-shadow:0 28px 80px rgba(15,23,42,.24); }
.workspace-settings::backdrop { background:rgba(15,23,42,.48); }
.settings-head { position:sticky; top:0; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 22px; border-bottom:1px solid #edf0f4; background:#fff; }
.settings-heading { display:flex; align-items:center; gap:12px; }
.settings-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:12px; background:#fff0ea; color:#b4533a; font-size:23px; }
.settings-head h2 { margin:0; font-size:19px; }
.settings-head p { margin:4px 0 0; color:#94a3b8; font-size:11px; }
.settings-close { width:34px; height:34px; border:0; border-radius:8px; background:transparent; color:#778396; font-size:25px; cursor:pointer; }
.settings-close:hover { background:#f1f5f9; }
.settings-section { padding:20px 22px 0; }
.settings-section h3 { margin:0 0 17px; color:#64748b; font-size:12px; letter-spacing:.08em; }
.settings-label { display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
.settings-label strong { font-size:15px; }
.settings-label span { color:#8490a0; font-size:12px; line-height:1.5; }
.settings-switch-row, .settings-font-option { display:flex; align-items:center; gap:12px; min-height:68px; padding:12px; border:1px solid #edf1f5; border-radius:12px; background:#f8fafc; cursor:pointer; }
.settings-tile-icon { flex:none; display:grid; place-items:center; width:34px; height:34px; border-radius:9px; background:#e9eef3; color:#526174; font-size:14px; font-weight:700; }
.settings-switch-row > span:nth-child(2), .settings-font-option > span:last-child { display:flex; flex:1; flex-direction:column; gap:4px; min-width:0; }
.settings-switch-row b, .settings-font-option b { font-size:13px; }
.settings-switch-row small, .settings-font-option small { color:#8490a0; font-size:11px; line-height:1.4; }
.settings-switch-row input { position:absolute; opacity:0; }
.settings-switch { position:relative; flex:none; width:42px; height:24px; border-radius:999px; background:#cbd5e1; transition:background .15s; }
.settings-switch::after { content:''; position:absolute; width:18px; height:18px; top:3px; left:3px; border-radius:50%; background:white; box-shadow:0 1px 3px rgba(0,0,0,.18); transition:transform .15s; }
.settings-switch-row input:checked + .settings-switch { background:#b4533a; }
.settings-switch-row input:checked + .settings-switch::after { transform:translateX(18px); }
.settings-switch-row input:focus-visible + .settings-switch { outline:2px solid #2563eb; outline-offset:3px; }
.settings-fonts { display:grid; gap:8px; margin:0; padding:0; border:0; }
.settings-font-option input { flex:none; width:16px; height:16px; margin:0; accent-color:#b4533a; }
.settings-font-option:has(input:checked) { border-color:#e6b8a8; background:#fff9f6; }
.settings-font-option em { color:#94a3b8; font-size:11px; font-style:normal; font-weight:500; }
.settings-sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.settings-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:20px 22px 22px; color:#94a3b8; font-size:11px; line-height:1.5; }
.settings-done { flex:none; padding:9px 18px; border:0; border-radius:9px; background:#b4533a; color:#fff; font-size:12px; font-weight:700; cursor:pointer; }
.layout-review { width:min(1100px,calc(100vw - 32px)); max-width:none; max-height:90vh; padding:22px; border:1px solid #e2e8f0; border-radius:18px; box-shadow:0 24px 80px rgba(15,23,42,.25); color:#26364c; }
.layout-review::backdrop { background:rgba(15,23,42,.5); }
.layout-review-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; }
.layout-review-head h2 { margin:0; font-size:19px; }
.layout-review-head p { margin:7px 0 0; color:#64748b; font-size:12px; line-height:1.6; }
.layout-review-close { border:0; background:transparent; color:#64748b; font-size:26px; cursor:pointer; }
.layout-review-warning { margin:16px 0 12px; padding:10px 12px; border-radius:9px; background:#edf8f2; color:#276247; font-size:12px; line-height:1.6; }
.layout-review-warning.has-issues { background:#fff5e9; color:#9a3412; }
.layout-review-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.layout-review-grid label { display:flex; flex-direction:column; gap:7px; min-width:0; font-size:12px; font-weight:700; color:#475569; }
.layout-review-grid textarea { width:100%; min-height:260px; resize:vertical; padding:12px; border:1px solid #dbe3ed; border-radius:10px; color:#26364c; background:#fff; font:12px/1.7 ui-monospace,monospace; }
.layout-review-grid textarea[readonly] { background:#f8fafc; }
.layout-preview { margin-top:12px; color:#475569; font-size:12px; }
.layout-preview summary { cursor:pointer; font-weight:700; }
.layout-preview iframe { display:block; width:100%; height:300px; margin-top:8px; border:1px solid #e2e8f0; border-radius:10px; background:#fff; }
.layout-review-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; margin-top:16px; }
.layout-review-actions span { margin-right:auto; color:#64748b; font-size:11px; line-height:1.5; }
.layout-review-actions button { flex:none; padding:9px 14px; border:1px solid #dbe3ed; border-radius:9px; background:#fff; color:#334155; cursor:pointer; }
.layout-review-actions .layout-apply { background:#b4533a; border-color:#b4533a; color:#fff; font-weight:700; }
.gallery-builder { width:min(620px,calc(100vw - 32px)); max-width:none; max-height:90vh; padding:0; border:1px solid #e2e8f0; border-radius:18px; color:#26364c; background:#fff; box-shadow:0 24px 80px rgba(15,23,42,.25); }
.gallery-builder::backdrop { background:rgba(15,23,42,.5); }
.gallery-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; padding:22px 22px 16px; border-bottom:1px solid #eef2f6; }
.gallery-head h2 { margin:0; font-size:19px; }
.gallery-head p { margin:6px 0 0; color:#64748b; font-size:12px; line-height:1.6; }
.gallery-close { border:0; background:transparent; color:#64748b; font-size:25px; cursor:pointer; }
.gallery-body { padding:18px 22px; }
.gallery-caption-label { display:flex; flex-wrap:wrap; gap:6px; font-size:13px; font-weight:700; }
.gallery-caption-label span { color:#94a3b8; font-size:11px; font-weight:400; }
.gallery-caption { width:100%; padding:10px 12px; border:1px solid #dbe3ed; border-radius:9px; font:inherit; font-size:13px; }
.gallery-list-head { display:flex; align-items:center; justify-content:space-between; margin:18px 0 9px; font-size:12px; }
.gallery-select-all { padding:5px 9px; border:0; background:transparent; color:#a34c36; cursor:pointer; }
.gallery-image-list { display:grid; grid-template-columns:1fr 1fr; gap:8px; max-height:285px; overflow:auto; }
.gallery-image-item { display:flex; min-width:0; align-items:center; gap:9px; padding:8px; border:1px solid #e6edf4; border-radius:10px; background:#f9fbfd; cursor:pointer; }
.gallery-image-item:has(input:checked) { border-color:#e8beaF; background:#fff9f6; }
.gallery-image-item input { flex:none; accent-color:#b4533a; }
.gallery-image-item img { flex:none; width:48px; height:48px; object-fit:cover; border-radius:6px; background:#eef2f6; }
.gallery-image-info { display:flex; min-width:0; flex-direction:column; gap:4px; }
.gallery-image-info strong, .gallery-image-info small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gallery-image-info strong { font-size:12px; color:#334155; }
.gallery-image-info small { font-size:10px; color:#94a3b8; }
.gallery-note, .gallery-wechat-note { margin:12px 0 0; font-size:11px; line-height:1.6; color:#64748b; }
.gallery-wechat-note { padding:9px 10px; border-radius:8px; background:#fff7ed; color:#9a4a23; }
.gallery-error { font-size:12px; color:#b91c1c; }
.gallery-actions { display:flex; justify-content:flex-end; gap:8px; padding:14px 22px 20px; border-top:1px solid #eef2f6; }
.gallery-actions button { padding:9px 14px; border:1px solid #dbe3ed; border-radius:9px; background:#fff; color:#334155; cursor:pointer; }
.gallery-actions .gallery-apply { background:#b4533a; border-color:#b4533a; color:#fff; font-weight:700; }
.gallery-actions button:disabled { opacity:.45; cursor:not-allowed; }
.iframe-wrap { position:relative; flex: 1; min-height: 650px; border:1px solid var(--line); border-radius: 16px; overflow:hidden; background:#fff; box-shadow:0 16px 36px rgba(28,42,66,.08); }
.iframe-wrap iframe { display:block; width:100%; height:100%; min-height:650px; border:0; }
.layout-loading[hidden] { display:none; }
.layout-loading { position:absolute; inset:0; display:flex; justify-content:center; align-items:center; padding:20px; background:rgba(246,248,252,.80); z-index:2; pointer-events:none; }
.layout-loading-card { width:min(280px,100%); padding:24px 20px; text-align:center; border:1px solid #eadfd9; border-radius:18px; background:rgba(255,255,255,.96); box-shadow:0 16px 40px rgba(28,42,66,.12); color:#243148; }
.layout-loading-card strong,.layout-loading-card span { display:block; }
.layout-loading-card strong { font-size:15px; }
.layout-loading-card span { margin-top:7px; color:#6d7c90; font-size:12px; }
/* Adapted from Uiverse.io by SmookyDev: compact wave animation. */
.layout-waves { display:flex; justify-content:center; align-items:center; height:58px; margin-bottom:13px; gap:4px; }
.layout-waves i { display:block; width:7px; height:42px; background:#ee795c; border-radius:6px; transform-origin:center; animation:layout-wave 1.5s ease-in-out infinite; }
.layout-waves i:nth-child(2) { animation-delay:.1s; }.layout-waves i:nth-child(3) { animation-delay:.2s; }.layout-waves i:nth-child(4) { animation-delay:.3s; }.layout-waves i:nth-child(5) { animation-delay:.4s; }.layout-waves i:nth-child(6) { animation-delay:.5s; }.layout-waves i:nth-child(7) { animation-delay:.6s; }.layout-waves i:nth-child(8) { animation-delay:.7s; }.layout-waves i:nth-child(9) { animation-delay:.8s; }.layout-waves i:nth-child(10) { animation-delay:.9s; }
@keyframes layout-wave { 0%,100% { transform:scaleY(.18); filter:hue-rotate(0deg) blur(0); opacity:.48; } 50% { transform:scaleY(1); filter:hue-rotate(70deg) blur(1px); opacity:1; } }
@media (prefers-reduced-motion:reduce) { .layout-waves i { animation:none; transform:scaleY(.65); opacity:.75; } }
.workspace-foot { display:flex; align-items:center; justify-content:space-between; color:#99a5b4; font-size:10px; padding: 0 3px; }
.workspace-foot code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color:#748298; }

@media (max-width: 980px) {
  .skill-layout { grid-template-columns: 1fr; padding: 14px; }
  .skill-sidebar { display:grid; grid-template-columns: 1fr 1fr; align-items:start; }
  .skill-sidebar .skill-card:first-child { grid-row: span 2; }
  .workspace-head { grid-template-columns:minmax(110px,1fr) minmax(0,auto); }
}
@media (max-width: 600px) {
  .skill-topbar { height:auto; min-height:64px; padding:10px 14px; flex-wrap:wrap; gap:10px; }
  .topbar-leading { gap:10px; }
  .toolbox-back { padding:8px 9px; font-size:11px; }
  .brand small { display:none; }
  .top-actions { width:100%; justify-content:flex-end; gap:5px; }
  .top-actions a, .top-actions button { padding:8px; font-size:11px; }
  .wechat-card { right:-8px; width:300px; }
  .style-gallery-panel { right:0; width:min(590px, calc(100vw - 20px)); }
  .style-gallery-grid { grid-template-columns:repeat(3, minmax(0,1fr)); }
  .skill-sidebar { display:flex; }
  .skill-card h1 { font-size:19px; }
  .workspace-head { grid-template-columns:minmax(95px, .7fr) minmax(0, 1.3fr); gap:8px; }
  .workspace-head h2 { font-size:16px; }
  .workspace-head p { display:none; }
  .skill-sidebar > .skill-card:first-child { height: 215px; }
  .skill-sidebar > .skill-card:first-child h1 { min-height: 48px; }
  .iframe-wrap, .iframe-wrap iframe { min-height: 720px; }
  .layout-review-grid { grid-template-columns:1fr; }
  .layout-review-grid textarea { min-height:150px; }
  .layout-review-actions { flex-wrap:wrap; }
  .layout-review-actions span { width:100%; }
  .gallery-image-list { grid-template-columns:1fr; }
}
@media (max-width: 380px) {
  .brand { gap:5px; font-size:12px; }
  .brand-mark { width:26px; height:26px; }
  .topbar-leading { gap:6px; }
  .toolbox-back { padding:7px; }
}