:root { --water-shallow:#367CA5; --water-middle:#16578A; --water-deep:#092D55; --earth-base:#FFF9EC; --earth-deep:#6B432D; --earth-topsoil:#865B38; --earth-grass:#244A2B; --mountain-rock:#62676C; }
.style-choices { flex-wrap:wrap; }
.style-choices .choice-pill { flex-basis:calc(33.333% - 7px); }
.style-choices .choice-pill:nth-child(-n+2) { flex-basis:calc(50% - 7px); }
.water-hint,.earth-hint,.mountain-hint { line-height:1.7; }
.water-palette,.earth-palette,.mountain-palette { display:inline-flex; gap:3px; margin-right:5px; vertical-align:middle; }
.water-palette i,.earth-palette i,.mountain-palette i { width:12px; height:12px; border:1px solid var(--border); border-radius:50%; background:var(--surface); }
.mountain-palette i:nth-child(2) { background:var(--earth-grass); border-color:var(--earth-grass); }
.mountain-palette i:nth-child(3) { background:var(--earth-topsoil); border-color:var(--earth-topsoil); }
.mountain-palette i:nth-child(4) { background:var(--mountain-rock); border-color:var(--mountain-rock); }
.earth-palette i:first-child { background:var(--earth-base); }
.earth-palette i:nth-child(2) { background:var(--earth-deep); border-color:var(--earth-deep); }
.earth-palette i:nth-child(3) { background:var(--earth-topsoil); border-color:var(--earth-topsoil); }
.earth-palette i:nth-child(4) { background:var(--earth-grass); border-color:var(--earth-grass); }
.water-palette i:nth-child(2) { background:var(--water-shallow); border-color:var(--water-shallow); }
.water-palette i:nth-child(3) { background:var(--water-middle); border-color:var(--water-middle); }
.water-palette i:nth-child(4) { background:var(--water-deep); border-color:var(--water-deep); }
.paid-badge { display:inline-flex; flex:0 0 auto; }
.paid-badge svg { display:block; width:16px; height:16px; }
.wifi-group > label:not(.checkbox-label),.wifi-group [data-wifi-password] > label { display:block; margin:12px 0 6px; font-size:13px; font-weight:600; }
.checkbox-label { display:flex; align-items:center; gap:8px; margin-top:12px; font-size:13px; cursor:pointer; }
.checkbox-label input { width:18px; height:18px; accent-color:var(--accent); }
.domain-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.slider-row { display:flex; align-items:center; gap:8px; }
.slider-row input[type=range] { flex:1; min-width:0; height:28px; margin:0; padding:0; border:0; background:none; accent-color:var(--accent); }
.slider-row output { min-width:28px; color:var(--accent); font-size:12px; font-weight:700; font-variant-numeric:tabular-nums; text-align:right; }
.action-primary.htmx-request { opacity:.7; cursor:progress; }
.preview-content { display:grid; flex:1; min-width:0; }
.preview-content > .preview-panel,.generation-status { grid-area:1 / 1; }
.generation-status { z-index:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; padding:32px 24px; background:var(--surface); text-align:center; }
.generation-status h3 { margin:0 0 8px; font-size:20px; font-weight:700; letter-spacing:-.035em; }
.generation-status p { max-width:320px; margin:0; color:var(--muted); font-size:14px; }
.generation-spinner { width:40px; height:40px; border:3px solid var(--border); border-top-color:var(--accent); border-radius:50%; animation:generation-spin .9s linear infinite; }
@keyframes generation-spin { to { transform:rotate(360deg); } }
.paid-locked { padding:16px 24px 20px; border-top:1px solid var(--border); }
.paid-locked h3 { margin:0 0 6px; font-size:15px; font-weight:700; letter-spacing:-.02em; }
.paid-locked p { margin:0; color:var(--muted); font-size:13px; line-height:1.55; }
@media(min-width:601px) { .domain-row:has([data-relief-field="water"]:not([hidden]),[data-relief-field="earth"]:not([hidden]),[data-relief-field="mountain"]:not([hidden])) { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) { .style-choices .choice-pill { flex-basis:calc(50% - 7px); } .domain-row { grid-template-columns:minmax(0,1fr); gap:0; } .paid-locked { padding:14px 18px 18px; } }