.fx-page { min-height: 100vh; padding: 1.5rem 1rem; background: #1a1a22; color: #fff; }
.fx-container { max-width: 1240px; margin: 0 auto; }
.fx-title { text-align: center; font-size: 1.75rem; font-weight: 700; margin-bottom: 0.25rem; background: linear-gradient(90deg, #f472b6, #60a5fa, #34d399); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.fx-subtitle { text-align: center; color: #94a3b8; margin-bottom: 0.75rem; }
.fx-back { display: inline-block; margin-bottom: 1rem; color: #94a3b8; text-decoration: none; font-size: 0.85rem; }
.fx-back:hover { color: #60a5fa; }
.fx-control { background: #272733; padding: 1.25rem; border-radius: 0.75rem; margin-bottom: 1.25rem; }
.fx-upload { padding: 0.75rem; border: 1px dashed #555; border-radius: 0.5rem; margin-bottom: 1rem; text-align: center; color: #94a3b8; }
.fx-upload input { display: none; }
.fx-upload label { cursor: pointer; }
.fx-presets-wrap { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; }
.fx-presets { display: flex; gap: 0.5rem; }
.fx-presets .fx-preset { flex: 1; padding: 0.45rem 0.2rem; border: none; border-radius: 0.35rem; background: #407bff; color: #fff; cursor: pointer; font-size: 0.8rem; transition: .2s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.fx-preset:hover { background: #2b62dd; }
.fx-preset.active { background: #6366f1; }
.fx-preset.orange { background: #f28c28; }
.fx-preset.orange:hover { background: #d6791e; }
.fx-preset.green { background: #22b573; }
.fx-preset.green:hover { background: #1a995f; }
.fx-sliders { display: grid; grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); gap: 1rem; }
.fx-item label { display: block; margin-bottom: 0.25rem; font-size: 0.85rem; color: #e2e8f0; }
.fx-item input[type="range"] { width: 100%; }
.fx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(225px, 1fr)); gap: 1.25rem; }
.fx-card { background: #272733; padding: 0.75rem; border-radius: 0.75rem; overflow: hidden; }
.fx-card img { width: 100%; display: block; transition: filter .3s ease; }
.fx-card-name { padding: 0.5rem 0; font-size: 0.85rem; text-align: center; color: #e2e8f0; }
.fx-card-btn { width: 100%; margin-top: 0.5rem; padding: 0.5rem 0; border: none; border-radius: 0.35rem; background: #6366f1; color: #fff; font-size: 0.85rem; cursor: pointer; transition: .2s; }
.fx-card-btn:hover { background: #4f46e5; }
.fx-zip-wrap { text-align: center; margin-top: 1.5rem; }
.fx-zip-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 2rem; border: none; border-radius: 0.5rem; background: linear-gradient(135deg, #f28c28, #e06c00); color: #fff; font-size: 1rem; font-weight: 600; cursor: pointer; transition: .2s; box-shadow: 0 4px 10px rgba(242,140,40,0.35); }
.fx-zip-btn:hover { background: linear-gradient(135deg, #e06c00, #c55b00); transform: translateY(-2px); box-shadow: 0 6px 14px rgba(242,140,40,0.45); }
.fx-zip-btn:disabled { opacity: 0.7; cursor: not-allowed; transform: none; }
.fx-empty { text-align: center; color: #94a3b8; padding: 3rem 0; }
#fxCanvas { display: none; }
@media (max-width: 600px) {
    .fx-page { padding: 1rem 0.75rem; }
    .fx-title { font-size: 1.35rem; }
    .fx-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.75rem; }
    .fx-sliders { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.75rem; }
    .fx-presets { display: grid; grid-template-columns: repeat(4, 1fr); }
    .fx-presets .fx-preset { flex: auto; font-size: 0.75rem; }
}