* { -webkit-tap-highlight-color:transparent; }
.main-content { min-height:calc(100vh - 160px); padding:clamp(16px,3vw,32px) 12px 40px; background:#fff; }
[data-theme="dark"] .main-content { background:linear-gradient(180deg,rgba(9,15,22,.98),rgba(5,10,16,.95)); }
.mod-container { max-width:1100px; margin:0 auto; }
.mod-card {
    background:#fff; border-radius:36px;
    padding:clamp(14px,2vw,24px);
    box-shadow:0 10px 24px rgba(15,23,42,.08);
    border:1px solid rgba(148,163,184,.22);
    position:relative; overflow:hidden;
}
[data-theme="dark"] .mod-card {
    background:linear-gradient(155deg,rgba(10,31,47,.97),rgba(5,16,25,.98) 58%,rgba(8,27,40,.97)),#0b1d2b;
    box-shadow:0 20px 48px rgba(0,0,0,.32); border-color:rgba(94,188,245,.24);
}
.top-bar { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; margin-bottom:16px; }
.mod-title {
    font-weight:800; font-size:clamp(1.3rem,3.8vw,2.2rem);
    background:linear-gradient(145deg,#0f5fd0,#00a7d8 48%,#f97316);
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
    margin:0; line-height:1.1;
}
[data-theme="dark"] .mod-title {
    background:linear-gradient(145deg,#f8fdff,#7bd7ff 48%,#ffd27a);
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.controls-bar { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:12px; }
.ctrl-chip {
    background:linear-gradient(180deg,rgba(14,42,60,.96),rgba(8,28,42,.96));
    border:1px solid rgba(98,177,223,.38); border-radius:100px;
    color:#ceecff; font-size:.8rem; font-weight:600; padding:7px 14px;
    cursor:pointer; user-select:none; transition:.1s;
}
.ctrl-chip:hover, .ctrl-chip.active { border-color:#4adbff; color:#fff; }
.ctrl-chip input[type=range] {
    width:80px; height:6px; vertical-align:middle;
    background:linear-gradient(90deg,#1f77a0,#56c5ff);
    border-radius:40px; -webkit-appearance:none; appearance:none;
    margin:0 6px;
}
.ctrl-chip input[type=range]::-webkit-slider-thumb {
    -webkit-appearance:none; width:16px; height:16px; background:#fff;
    border-radius:50%; box-shadow:0 2px 6px black,0 0 0 2px #1793d1; cursor:pointer;
}
#fluidCanvas {
    display:block; width:100%; border-radius:22px;
    cursor:crosshair;
    box-shadow:0 0 0 1px rgba(94,188,245,.2), 0 12px 30px rgba(0,0,0,.25);
    touch-action:none;
    background:#050d15;
}
.hint-text { color:#4a8ca8; font-size:.75rem; letter-spacing:.12em; text-transform:uppercase;
    text-align:center; margin-top:10px; }
.palette-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.palette-swatch {
    width:28px; height:28px; border-radius:50%; cursor:pointer;
    border:2px solid rgba(255,255,255,.15); transition:.1s;
    box-shadow:0 2px 8px rgba(0,0,0,.4);
}
.palette-swatch:hover, .palette-swatch.active { transform:scale(1.2); border-color:rgba(255,255,255,.7); }