* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: #1a1a2e;
    color: #e0e0e0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
}

h1 { font-size: 1.4rem; margin-bottom: 12px; color: #fff; }

.container { display: flex; gap: 24px; flex-wrap: wrap; justify-content: center; max-width: 900px; }

/* Canvas panel */
.canvas-panel { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.canvas-wrapper { position: relative; }
canvas { border: 2px solid #333; border-radius: 8px; cursor: crosshair; touch-action: none; }
.guide-overlay { position: absolute; pointer-events: none; top: 0; left: 0; }
.stroke-info { font-size: 0.8rem; color: #888; margin-top: 4px; }
.controls { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

/* Buttons */
button { padding: 8px 16px; border: 1px solid #444; border-radius: 6px; background: #2a2a4a; color: #e0e0e0; cursor: pointer; font-size: 0.85rem; transition: background 0.15s; }
button:hover { background: #3a3a6a; }
button:disabled { opacity: 0.4; cursor: default; }

/* Results panel */
.results-panel { min-width: 280px; max-width: 360px; }

.tab-bar { display: flex; gap: 4px; margin-bottom: 8px; }
.tab { padding: 4px 12px; border-radius: 4px 4px 0 0; background: #2a2a4a; border: 1px solid #333; border-bottom: none; cursor: pointer; font-size: 0.8rem; color: #aaa; }
.tab.active { background: #3a3a6a; color: #fff; }

.result-list { display: flex; flex-direction: column; gap: 4px; }
.result-item { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 6px; background: #2a2a4a; font-size: 0.9rem; }
.result-item.top { background: #2a4a2a; border: 1px solid #4a8a4a; }
.result-char { font-size: 1.6rem; min-width: 36px; text-align: center; }
.result-name { flex: 1; font-size: 0.8rem; color: #aaa; }
.result-name small { color: #666; }
.result-score { font-weight: bold; min-width: 42px; text-align: right; }
.bar-bg { flex: 1; height: 6px; background: #333; border-radius: 3px; min-width: 60px; }
.bar-fill { height: 100%; border-radius: 3px; transition: width 0.2s; }

/* Download section */
.download-section { margin-top: 12px; padding-top: 12px; border-top: 1px solid #333; }
.download-section label { font-size: 0.85rem; margin-right: 8px; }
.download-section input { background: #2a2a4a; border: 1px solid #444; color: #e0e0e0; padding: 4px 8px; border-radius: 4px; width: 60px; font-size: 0.85rem; }
.download-section select { background: #2a2a4a; border: 1px solid #444; color: #e0e0e0; padding: 4px 8px; border-radius: 4px; font-size: 0.85rem; }
.download-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.download-hint { font-size: 0.75rem; color: #666; margin-top: 8px; }