.sk-board { display: flex; flex-direction: column; background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.sk-board.is-full { position: fixed; inset: 0; z-index: 500; border-radius: 0; border: 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
.sk-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 8px 10px; border-bottom: 1px solid var(--color-border); }
.sk-group { display: flex; align-items: center; gap: 4px; }
.sk-group--end { margin-left: auto; }
.sk-btn, .sk-tool { appearance: none; border: 1px solid transparent; background: transparent; color: var(--color-text-secondary); width: 40px; height: 40px; border-radius: var(--radius-sm); display: inline-grid; place-items: center; cursor: pointer; flex-shrink: 0; padding: 0; transition: background-color var(--transition-fast), color var(--transition-fast); }
.sk-btn:hover:not(:disabled), .sk-tool:hover { background: var(--color-surface); color: var(--color-text); }
.sk-btn[aria-pressed="true"] { background: var(--color-primary-soft); color: var(--color-primary); }
.sk-btn svg, .sk-tool svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sk-zoom { appearance: none; border: 1px solid var(--color-border); background: var(--color-bg-card); color: var(--color-text-secondary); height: 32px; min-width: 56px; padding: 0 8px; border-radius: var(--radius-sm); font: inherit; font-size: 0.75rem; font-family: var(--font-mono); cursor: pointer; }
.sk-settings { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 12px 16px; padding: 12px 14px; border-bottom: 1px solid var(--color-border); background: var(--color-surface); }
.sk-check { display: flex; align-items: center; gap: 8px; font-size: 0.8125rem; color: var(--color-text-secondary); cursor: pointer; min-height: 28px; }
.sk-view { position: relative; height: clamp(320px, calc(100dvh - 330px), 900px); overflow: hidden; touch-action: none; background: var(--color-surface); cursor: crosshair; user-select: none; -webkit-user-select: none; overscroll-behavior: contain; }
.sk-board.is-full .sk-view { flex: 1; height: auto; }
.sk-view[data-tool="pan"], .sk-view.is-panning { cursor: grab; }
.sk-view[data-tool="text"] { cursor: text; }
.sk-doc { position: absolute; left: 0; top: 0; transform-origin: 0 0; box-shadow: 0 2px 14px rgba(0, 0, 0, 0.18); background: repeating-conic-gradient(#d9d9d9 0 25%, #f4f4f4 0 50%) 0 0 / 20px 20px; }
.sk-doc canvas { position: absolute; left: 0; top: 0; max-width: none; display: block; }
.sk-doc canvas:first-child { position: relative; }
.sk-doc #live { pointer-events: none; }
.sk-text { position: absolute; z-index: 5; height: auto; min-height: 0; width: auto; min-width: 80px; max-width: 80%; padding: 2px 4px; margin: 0; border: 1px dashed var(--color-primary); border-radius: 4px; background: rgba(255, 255, 255, 0.75); resize: none; overflow: hidden; font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", sans-serif; line-height: 1.25; white-space: pre; }
.sk-bottom { border-top: 1px solid var(--color-border); padding: 6px 10px 8px; display: flex; flex-direction: column; gap: 6px; }
.sk-tools { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.sk-tools::-webkit-scrollbar { display: none; }
.sk-tool { width: 44px; height: 44px; }
.sk-tool.is-active { background: var(--color-primary); color: var(--color-on-primary); }
.sk-props { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; }
.sk-colors { display: flex; gap: 6px; align-items: center; overflow-x: auto; scrollbar-width: none; padding: 3px; flex: 1 1 320px; min-width: 0; }
.sk-colors::-webkit-scrollbar { display: none; }
.sk-color { appearance: none; width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--color-bg-card); box-shadow: 0 0 0 1px var(--color-border-hover); cursor: pointer; flex-shrink: 0; padding: 0; }
.sk-color.is-active { box-shadow: 0 0 0 2px var(--color-primary); }
.sk-colors input[type=color] { width: 36px; height: 32px; padding: 2px; flex-shrink: 0; }
.sk-slider { display: grid; grid-template-columns: auto minmax(90px, 150px) 34px; align-items: center; gap: 8px; font-size: 0.75rem; color: var(--color-text-muted); white-space: nowrap; }
.sk-slider output { font-family: var(--font-mono); color: var(--color-text-secondary); }
@media (max-width: 640px) {
    .sk-view { height: clamp(300px, calc(100dvh - 318px), 700px); }
    .sk-top { padding: 6px 8px; gap: 4px 6px; }
    .sk-btn { width: 38px; height: 38px; }
    .sk-group--end .tb-btn { padding-left: 0.55rem; padding-right: 0.55rem; }
    .sk-props { gap: 4px 10px; }
    .sk-colors { flex-basis: 100%; }
    .sk-slider { flex: 1 1 0; grid-template-columns: auto minmax(0, 1fr) 28px; min-width: 0; gap: 6px; }
}