/* Figma-style skin: dark editor chrome, frames on a canvas */
html[data-skin="figma"] {
  --font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo", sans-serif;
  --bg: #1e1e1e; --fg: #ffffff; --muted: #b3b3b3; --line: #444444; --subtle: #383838;
  --panel: #2c2c2c; --accent: #0d99ff; --good: #14ae5c; --bad: #f24822; --focus: #0d99ff;
  --frame-fg: #1e1e1e; --frame-muted: #6b6b6b; --frame-line: #e6e6e6;
  --rail-w: 240px;
  color-scheme: dark;
}
[data-skin="figma"] body { font-size: 11px; }
[data-skin="figma"] .app { height: 100vh; height: 100dvh; }
[data-skin="figma"] .app-body { overflow: hidden; }

/* toolbar */
[data-skin="figma"] .app-top { background: var(--panel); border-bottom: 1px solid var(--line); }
[data-skin="figma"] .fg-nav { display: flex; align-items: center; gap: 4px; height: 48px; padding: 0 8px; }
[data-skin="figma"] .fg-logo { display: grid; grid-template-columns: repeat(2, 6px); gap: 2px; padding: 10px 12px; border-radius: 4px; }
[data-skin="figma"] .fg-logo:hover { background: var(--subtle); }
[data-skin="figma"] .fg-logo span { width: 6px; height: 6px; border-radius: 50%; background: #f24e1e; }
[data-skin="figma"] .fg-logo span:nth-child(2) { background: #a259ff; }
[data-skin="figma"] .fg-logo span:nth-child(3) { background: #1abcfe; }
[data-skin="figma"] .fg-tools { display: flex; gap: 2px; }
[data-skin="figma"] .fg-tools span { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 4px; color: #e6e6e6; }
[data-skin="figma"] .fg-tools span.on { background: var(--accent); color: #fff; }
[data-skin="figma"] .fg-file { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 500; white-space: nowrap; }
[data-skin="figma"] .fg-dim { color: var(--muted); font-weight: 400; }
[data-skin="figma"] .fg-avatars { display: flex; margin-right: 8px; }
[data-skin="figma"] .fg-avatars i { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--panel); margin-left: -6px; display: grid; place-items: center; font-style: normal; font-size: 10px; font-weight: 600; color: #fff; }
[data-skin="figma"] .skin-btn { height: 28px; border-color: transparent; color: #e6e6e6; border-radius: 4px; font-size: 11px; }
[data-skin="figma"] .skin-btn:hover { background: var(--subtle); }
[data-skin="figma"] .fg-share { height: 28px; padding: 0 12px; border-radius: 4px; background: var(--accent); color: #fff; font-weight: 600; display: inline-flex; align-items: center; margin: 0 4px; }
[data-skin="figma"] .fg-zoom { display: inline-flex; align-items: center; gap: 4px; padding: 0 8px; color: #e6e6e6; }

/* panels */
[data-skin="figma"] .app-side, [data-skin="figma"] .page-rail { background: var(--panel); color: #e6e6e6; overflow-y: auto; }
[data-skin="figma"] .app-side { width: 240px; border-right: 1px solid var(--line); }
[data-skin="figma"] .page-rail { border-left: 1px solid var(--line); }
[data-skin="figma"] .fg-ptabs { display: flex; gap: 16px; padding: 0 16px; height: 40px; align-items: center; border-bottom: 1px solid var(--line); font-size: 11px; color: var(--muted); }
[data-skin="figma"] .fg-ptabs b { color: #fff; font-weight: 600; }
[data-skin="figma"] .fg-sec, [data-skin="figma"] .fg-psec h3, [data-skin="figma"] .field-label {
  display: flex; justify-content: space-between; align-items: center; font-size: 11px; font-weight: 600; color: #fff; padding: 12px 16px 6px;
}
[data-skin="figma"] .fg-sec span, [data-skin="figma"] .fg-psec h3 span { color: var(--muted); }
[data-skin="figma"] .fg-layer { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 16px; color: #e6e6e6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-skin="figma"] .fg-layer:hover { box-shadow: inset 0 0 0 1px var(--accent); }
[data-skin="figma"] .fg-layer.page.on { color: #fff; font-weight: 600; }
[data-skin="figma"] .fg-layer svg { color: var(--muted); width: 12px; height: 12px; }
[data-skin="figma"] .fg-layer .sp { width: 12px; flex: none; }
[data-skin="figma"] .fg-layers { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 4px; }
[data-skin="figma"] .fg-psec { border-bottom: 1px solid var(--line); padding-bottom: 10px; }
[data-skin="figma"] .fg-prow, [data-skin="figma"] .fg-var { display: flex; align-items: center; gap: 8px; padding: 4px 16px; color: #e6e6e6; min-height: 28px; }
[data-skin="figma"] .fg-var { justify-content: space-between; }
[data-skin="figma"] .fg-var span { color: var(--muted); }
[data-skin="figma"] .fg-var b { font-weight: 500; font-variant-numeric: tabular-nums; }
[data-skin="figma"] .fg-swatch { width: 14px; height: 14px; border-radius: 2px; border: 1px solid var(--line); }
[data-skin="figma"] .fg-bar { margin: 4px 16px 0; height: 4px; border-radius: 2px; background: var(--subtle); overflow: hidden; }
[data-skin="figma"] .fg-bar i { display: block; height: 100%; background: var(--accent); }
[data-skin="figma"] .cd-input { background: var(--subtle); border: 1px solid transparent; border-radius: 2px; color: #fff; font-size: 11px; padding: 3px 6px; }
[data-skin="figma"] .cd-input:hover { border-color: var(--line); }
[data-skin="figma"] .cd-input:focus { border-color: var(--accent); outline: none; }
[data-skin="figma"] kbd { background: var(--subtle); border-color: var(--line); color: #e6e6e6; }

/* canvas */
[data-skin="figma"] .page-cols { gap: 0; min-height: 0; }
[data-skin="figma"] .page-main { overflow: auto; background: var(--bg); }
[data-skin="figma"] .fg-canvas { padding: 56px 48px 80px; display: flex; flex-direction: column; gap: 64px; min-width: max-content; }
[data-skin="figma"] .fg-section { position: relative; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); border-radius: 2px; padding: 56px 40px 40px; }
[data-skin="figma"] .fg-sectionlabel { position: absolute; top: 12px; left: 12px; background: #e6e6e6; color: var(--frame-fg); font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 4px; }
[data-skin="figma"] .fg-frames { display: flex; gap: 56px 40px; }
[data-skin="figma"] .fg-frame { position: relative; display: block; width: 280px; background: #fff; color: var(--frame-fg); }
[data-skin="figma"] .fg-framelabel { position: absolute; left: 0; bottom: 100%; padding-bottom: 6px; font-size: 11px; color: var(--muted); white-space: nowrap; }
[data-skin="figma"] a.fg-frame:hover { outline: 1px solid var(--accent); }
[data-skin="figma"] a.fg-frame:hover .fg-framelabel, [data-skin="figma"] .fg-frame.sel .fg-framelabel { color: var(--accent); }
[data-skin="figma"] .fg-art { display: grid; place-items: center; height: 136px; font-size: 52px; }
[data-skin="figma"] .fg-art.fg-test { background: #f1e8ff; }
[data-skin="figma"] .fg-art.fg-game { background: #e1f2ff; }
[data-skin="figma"] .fg-art.fg-social { background: #ffeedd; }
[data-skin="figma"] .fg-framebody { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; font-size: 12.5px; line-height: 1.5; }
[data-skin="figma"] .fg-framebody b { font-size: 15px; }
[data-skin="figma"] .fg-framebody > span:not(.fg-status) { color: var(--frame-muted); }
[data-skin="figma"] .fg-status { align-self: flex-start; font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: #f0f0f0; color: #6b6b6b; margin-top: 4px; }
[data-skin="figma"] .fg-status.live { background: #cff7d3; color: #02542d; }
[data-skin="figma"] .fg-status.wip { background: #fff1c2; color: #682d03; }
[data-skin="figma"] .fg-frame.sel { outline: 2px solid var(--accent); }
[data-skin="figma"] .fg-frame .h { position: absolute; width: 8px; height: 8px; background: #fff; border: 1px solid var(--accent); }
[data-skin="figma"] .h.tl { top: -5px; left: -5px; } [data-skin="figma"] .h.tr { top: -5px; right: -5px; }
[data-skin="figma"] .h.bl { bottom: -5px; left: -5px; } [data-skin="figma"] .h.br { bottom: -5px; right: -5px; }
[data-skin="figma"] .fg-size { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: var(--accent); color: #fff; font-size: 10px; padding: 1px 6px; border-radius: 2px; white-space: nowrap; }

/* match: frames stacked on canvas */
[data-skin="figma"] .timeline { padding: 56px 48px 80px; max-width: 760px; }
[data-skin="figma"] .entry { position: relative; background: #fff; color: var(--frame-fg); margin-top: 28px; margin-bottom: 40px; --bg: #fff; --fg: var(--frame-fg); --muted: var(--frame-muted); --line: var(--frame-line); --subtle: #f5f5f5; }
[data-skin="figma"] .entry-av { display: none; }
[data-skin="figma"] .entry-head { position: absolute; left: 0; right: 0; bottom: 100%; display: flex; gap: 8px; padding-bottom: 6px; font-size: 11px; color: #b3b3b3; white-space: nowrap; overflow: hidden; }
[data-skin="figma"] .entry-title { color: #b3b3b3; }
[data-skin="figma"] .entry:hover { outline: 1px solid var(--accent); }
[data-skin="figma"] .entry:hover .entry-head, [data-skin="figma"] .entry:hover .entry-title { color: var(--accent); }
[data-skin="figma"] .entry-score { margin-left: auto; color: #e6e6e6; }
[data-skin="figma"] .entry-body { padding: 24px; font-size: 14px; line-height: 1.6; }
[data-skin="figma"] .entry-body p + p { margin-top: 10px; }
[data-skin="figma"] .entry-body .chips, [data-skin="figma"] .entry-body .mission { margin-top: 12px; }
[data-skin="figma"] .entry-body .criterion { color: var(--frame-muted); }
[data-skin="figma"] .entry-body .criterion b { color: var(--frame-fg); }
[data-skin="figma"] .entry.solo { box-shadow: inset 0 6px 0 #ffc700; }
[data-skin="figma"] .composer .name-input {
  width: 100%; min-height: 46px; padding: 7px 8px; border: 1px solid var(--frame-line);
  border-radius: 2px; background: #fff; color: var(--frame-fg); 
}
[data-skin="figma"] .composer .name-input:focus-within { border-color: var(--accent); outline: 1px solid var(--accent); }
[data-skin="figma"] .composer-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
[data-skin="figma"] .btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border-radius: 6px; cursor: pointer; border: 1px solid #e6e6e6; background: #fff; color: var(--frame-fg); font-size: 12px; font-weight: 500; }
[data-skin="figma"] .btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
[data-skin="figma"] .result-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 40px; }
[data-skin="figma"] .result-actions .btn:not(.primary) { background: var(--subtle); border-color: var(--line); color: #fff; }
[data-skin="figma"] .ritual { color: var(--muted); }
[data-skin="figma"] .hint { color: var(--frame-muted); }

/* match: properties panel */
[data-skin="figma"] .field { border-bottom: 1px solid var(--line); padding-bottom: 10px; }
[data-skin="figma"] .modes { display: grid; }
[data-skin="figma"] .mode { display: flex; gap: 8px; align-items: flex-start; padding: 6px 16px; cursor: pointer; }
[data-skin="figma"] .mode:hover { background: var(--subtle); }
[data-skin="figma"] .mode input { margin: 2px 0 0; accent-color: var(--accent); }
[data-skin="figma"] .mode b { display: block; font-weight: 500; color: #fff; }
[data-skin="figma"] .mode small { color: var(--muted); }
[data-skin="figma"] .labels { display: flex; flex-wrap: wrap; gap: 4px; padding: 2px 16px; }
[data-skin="figma"] .lbl { background: var(--subtle); color: #e6e6e6; border-radius: 2px; padding: 2px 6px; }
[data-skin="figma"] .participants { padding: 2px 16px; }

@media (max-width: 800px) {
  [data-skin="figma"] .app { height: auto; min-height: 100dvh; }
  [data-skin="figma"] .app-body { overflow: visible; }
  [data-skin="figma"] .fg-tools span:nth-child(n+3) { display: none; }
  [data-skin="figma"] .page-rail { border-left: 0; border-bottom: 1px solid var(--line); }
  [data-skin="figma"] body[data-page="hub"] .page-rail { order: 2; }
  [data-skin="figma"] .fg-canvas { padding: 40px 16px 48px; min-width: 0; }
  [data-skin="figma"] .fg-section { padding: 48px 16px 24px; }
  [data-skin="figma"] .fg-frames { flex-direction: column; }
  [data-skin="figma"] .fg-frame { width: 100%; }
  [data-skin="figma"] .timeline { padding: 24px 16px 48px; }
}
[data-skin="figma"] .fg-art.fg-pick { background: #ddf6e4; }