/* Surface treatment only: no sizing, spacing, positioning, or font metrics. */
#app-content {
    background: radial-gradient(ellipse at 30% 0%, #15181d 0%, #0d1014 42%, #080a0d 100%);
    box-shadow: inset 0 1px 0 #515660, inset 0 -1px 0 #050608;
}
#app-content header {
    background: linear-gradient(180deg, #20242b 0%, #171b21 48%, #101318 100%);
    box-shadow: inset 0 1px 0 #5c616b, inset 0 -1px 0 #090b0e, 0 3px 10px #0006;
}
#app-content .section-title {
    color: #a9f3ff;
    text-shadow: 0 1px 1px #000, 0 0 12px #00c8e326;
}
#app-content .armed-indicator,
#app-content .bar-marker,
#app-content .mixer-strip {
    background: linear-gradient(180deg, #252931, #1a1e25);
    border-color: #414750;
    box-shadow: inset 0 1px 0 #ffffff0d, inset 0 -1px 0 #0009, 0 2px 4px #0004;
}
#app-content button:not(.drum-pad):not(.pad-choke-btn):not(.pad-mode-btn):not(.pad-load-btn):not(.active):not(.playing):not(#pattern-generate):not(#pattern-export) {
    background: linear-gradient(180deg, #393e48 0%, #2a2f38 48%, #232730 100%);
    border-color: #555c68;
    box-shadow: inset 0 1px 0 #ffffff21, inset 0 -2px 0 #101319, 0 2px 3px #0006;
    color: #edf0f5;
    text-shadow: 0 1px 1px #000b;
}
#app-content button:hover:not(:disabled):not(.active):not(.playing) {
    border-color: #84919f;
    filter: brightness(1.12);
}
#app-content button:disabled { color: #8b939e; }
#app-content select,
#app-content input[type="number"],
#app-content input[type="text"] {
    background: linear-gradient(180deg, #101318, #191e25);
    border-color: #49515c;
    color: #e1ecf0;
    box-shadow: inset 0 2px 4px #000a, 0 1px 0 #ffffff0d;
}
#app-content option { background: #15191f; color: #e1ecf0; }
#app-content .drum-pad {
    background-image: linear-gradient(155deg, #ffffff30 0%, #ffffff08 35%, #00000020 100%);
    border-color: #ffffff42;
    box-shadow: inset 0 2px 1px #ffffff48, inset 0 -4px 5px #0005, 0 3px 5px #0008;
    text-shadow: 0 1px 0 #ffffff22;
}
#app-content .drum-pad:active,
#app-content .drum-pad.playing {
    box-shadow: inset 0 2px 7px #0008, 0 0 16px #ffffff24;
}
#app-content .pad-controls button {
    background-image: linear-gradient(180deg, #ffffff12, #00000012);
    border-color: #4c535d;
    box-shadow: inset 0 1px 0 #ffffff0d;
}
#app-content .step-cell {
    background-image: linear-gradient(160deg, #ffffff0d, #00000030);
    border-color: #414852;
    box-shadow: inset 0 1px 2px #000b, inset 0 -1px 0 #ffffff0a;
}
#app-content .step-cell .step-slot.filled {
    background-image: linear-gradient(150deg, #ffffff32, #ffffff06 45%, #00000020);
    box-shadow: inset 0 1px 0 #ffffff42, inset 0 -1px 0 #0003;
}
#app-content .step-cell .step-num { color: #9ba7b4; text-shadow: 0 1px 1px #000; }
#app-content .step-cell.current { border-color: #b4faff; box-shadow: inset 0 0 0 1px #00e5ff, 0 0 10px #00e5ff66; }
#app-content .sync-btn.active,
#app-content .mode-btn.active,
#app-content .dual-btn.active { box-shadow: inset 0 1px 0 #ffffff22, inset 0 -2px 0 #0006, 0 0 10px #00d5ef30; }
.modal-content, .sample-preview-content, .generate-modal-content {
    background: linear-gradient(155deg, #292e37, #15191f);
    border-color: #555f6c;
    box-shadow: inset 0 1px 0 #ffffff1c, 0 18px 60px #000a;
}