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

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: #0f1117;
    color: #e1e4e8;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

header { text-align: center; padding: 32px 20px 16px; }
h1 { font-size: 1.8em; font-weight: 700; color: #fff; letter-spacing: -0.02em; }
.subtitle { color: #8b949e; font-size: 0.95em; margin-top: 4px; }

main {
    width: 100%; max-width: 960px;
    padding: 0 20px 40px;
    display: flex; flex-direction: column; gap: 16px;
}

/* --- Actions row --- */
.actions-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; flex-wrap: wrap;
}
.actions-left, .actions-right { display: flex; gap: 8px; flex-shrink: 0; }

/* --- Buttons --- */
.btn {
    padding: 10px 20px; border: none; border-radius: 8px;
    font-size: 0.9em; font-weight: 600; cursor: pointer;
    transition: all 0.15s ease; color: #fff;
}
.btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
.btn:active:not(:disabled) { transform: translateY(0); }
.btn:disabled { opacity: 0.35; cursor: not-allowed; transform: none; box-shadow: none; }

.btn-primary { background: #2f81f7; }
.btn-primary:hover:not(:disabled) { background: #388bfd; }
.btn-secondary { background: #30363d; }
.btn-secondary:hover:not(:disabled) { background: #3d444d; }
.btn-export { background: #238636; }
.btn-export:hover:not(:disabled) { background: #2ea043; }
.btn-ghost { background: transparent; color: #8b949e; padding: 6px 12px; font-size: 0.8em; }
.btn-ghost:hover:not(:disabled) { color: #e1e4e8; background: #21262d; transform: none; box-shadow: none; }
.btn-sm { padding: 4px 10px; font-size: 0.78em; border-radius: 6px; }

/* --- Player --- */
.player {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px;
    background: #161b22; border-radius: 12px; border: 1px solid #21262d;
}

.player-controls { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }

.player-btn {
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    background: transparent; border: none; border-radius: 50%;
    color: #c9d1d9; cursor: pointer; transition: all 0.15s ease;
}
.player-btn:hover { color: #fff; background: #21262d; }
.player-btn.playing { color: #2f81f7; }

.player-track {
    flex: 1; height: 6px; position: relative;
    border-radius: 3px; cursor: pointer;
    overflow: hidden;
}
.player-track-bg {
    position: absolute; inset: 0;
    background: #21262d; border-radius: 3px;
}
.player-track-fill {
    position: absolute; top: 0; left: 0; bottom: 0;
    width: 0%; background: #2f81f7; border-radius: 3px;
    transition: width 0.15s linear;
}

.player-time {
    font-size: 0.78em; color: #8b949e;
    font-variant-numeric: tabular-nums;
    white-space: nowrap; flex-shrink: 0;
    min-width: 80px;
}

.status-message {
    font-size: 0.82em; color: #8b949e; white-space: nowrap;
    flex: 1; text-align: center;
}
.status-message.status-ok { color: #3fb950; }
.status-message.status-warn { color: #d29922; }
.status-message.status-error { color: #f85149; }

/* --- Piano --- */
#piano-keyboard {
    display: flex; justify-content: center;
    padding: 24px 16px;
    background: #161b22; border-radius: 12px; border: 1px solid #21262d;
    overflow-x: auto;
}
.piano {
    display: flex; position: relative;
    background: #0d1117; padding: 12px; border-radius: 8px;
}
.key.white {
    background: linear-gradient(to bottom, #f0f0f0, #fff);
    width: 28px; height: 150px;
    border: 1px solid #c9d1d9; border-radius: 0 0 4px 4px;
    position: relative; transition: background 0.08s ease;
}
.key.black {
    background: linear-gradient(to bottom, #2d333b, #1c2128);
    width: 18px; height: 95px;
    border: 1px solid #0d1117; border-radius: 0 0 3px 3px;
    z-index: 2; margin-left: -9px; margin-right: -9px;
    position: relative; transition: background 0.08s ease;
}
.key-label {
    color: #8b949e; font-size: 0.55em;
    position: absolute; bottom: 4px; left: 50%;
    transform: translateX(-50%); pointer-events: none;
}
.key.active, .key.white.active {
    background: #2f81f7; border-color: #1f6feb;
    box-shadow: 0 0 12px rgba(47,129,247,0.5);
}
.key.black.active {
    background: #1f6feb; border-color: #1158c7;
    box-shadow: 0 0 12px rgba(47,129,247,0.5);
}

/* --- Params --- */
.params-section {
    background: #161b22; border-radius: 12px; border: 1px solid #21262d;
    padding: 20px;
}
.params-row { display: flex; gap: 16px; flex-wrap: wrap; }
.param-group { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 120px; }
.param-group label {
    font-size: 0.8em; font-weight: 500; color: #8b949e;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.param-group input[type="number"],
.param-group select {
    background: #0d1117; border: 1px solid #30363d; border-radius: 6px;
    color: #e1e4e8; padding: 8px 10px; font-size: 0.9em; font-family: inherit;
    transition: border-color 0.15s ease;
}
.param-group input[type="number"]:focus,
.param-group select:focus {
    outline: none; border-color: #2f81f7;
    box-shadow: 0 0 0 2px rgba(47,129,247,0.2);
}
.param-group select {
    cursor: pointer; -webkit-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238b949e' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 10px center; padding-right: 28px;
}

/* Advanced */
.advanced-params { margin-top: 16px; border-top: 1px solid #21262d; padding-top: 12px; }
.advanced-params summary { font-size: 0.85em; color: #8b949e; cursor: pointer; padding: 4px 0; user-select: none; transition: color 0.15s; }
.advanced-params summary:hover { color: #c9d1d9; }
.advanced-params .params-row { margin-top: 16px; }
.range-group { display: flex; align-items: center; gap: 8px; }
.range-group input[type="range"] { flex: 1; accent-color: #2f81f7; height: 4px; }
.range-group span { font-size: 0.85em; color: #e1e4e8; min-width: 30px; font-variant-numeric: tabular-nums; }

/* --- History --- */
.history-section {
    background: #161b22; border-radius: 12px; border: 1px solid #21262d; padding: 20px;
}
.history-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.history-header h2 { font-size: 1em; font-weight: 600; color: #c9d1d9; }
.history-list { display: flex; flex-direction: column; gap: 6px; }
.history-item {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 12px; background: #0d1117; border-radius: 8px; border: 1px solid #21262d;
    transition: border-color 0.15s;
}
.history-item:hover { border-color: #30363d; }
.history-item-main { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.history-name {
    background: transparent; border: 1px solid transparent; border-radius: 4px;
    color: #e1e4e8; font-size: 0.9em; font-weight: 500; font-family: inherit;
    padding: 2px 6px; margin: -2px -6px; transition: border-color 0.15s;
}
.history-name:hover { border-color: #30363d; }
.history-name:focus { outline: none; border-color: #2f81f7; background: #0d1117; }
.history-name::placeholder { color: #484f58; font-style: italic; }
.history-meta { font-size: 0.75em; color: #8b949e; padding-left: 6px; }
.history-actions { display: flex; gap: 4px; flex-shrink: 0; }
.history-empty { color: #484f58; font-size: 0.85em; text-align: center; padding: 8px; }

/* --- Responsive --- */
@media (max-width: 600px) {
    .params-row { flex-direction: column; }
    .param-group { min-width: 100%; }
    .actions-row {
        flex-direction: row; flex-wrap: wrap; justify-content: center;
    }
    .actions-left, .actions-right { flex-shrink: 0; }
    .actions-left { order: 1; }
    .actions-right { order: 2; }
    .status-message { order: 3; width: 100%; text-align: center; }
    .btn { padding: 10px 16px; font-size: 0.85em; }
    .player { flex-wrap: wrap; }
    .player-time { font-size: 0.72em; min-width: 70px; }
    .piano { transform: scale(0.7); transform-origin: center; }
}