.custom-division[data-tone="sand"], .division-style-preview[data-tone="sand"] { --division-accent: #8b6748; --division-wash: #f4e9d7; }
.custom-division[data-tone="lilac"], .division-style-preview[data-tone="lilac"] { --division-accent: #806293; --division-wash: #eee8f4; }
.custom-division[data-tone="sage"], .division-style-preview[data-tone="sage"] { --division-accent: #56725b; --division-wash: #e8f0e5; }
.custom-division[data-tone="sky"], .division-style-preview[data-tone="sky"] { --division-accent: #53778a; --division-wash: #e7eff2; }
.custom-division[data-tone="coral"], .division-style-preview[data-tone="coral"] { --division-accent: #ae6153; --division-wash: #f7e9e2; }
.custom-division { border-top-color: var(--division-accent, #8b6748); }
.custom-division[data-width="wide"] { grid-column: 1 / -1; }
.custom-division[data-width="wide"] .pin-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.custom-division .division-mark { color: var(--division-accent, #8b6748); }
.custom-division .division-header h2 { color: #302d29; }
.division-style-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.division-style-fields label { min-width: 0; }
.division-style-fields select { width: 100%; }
.division-style-preview { display: flex; align-items: center; gap: .7rem; min-height: 52px; margin: .4rem 0 1rem; padding: .7rem .9rem; border-left: 4px solid var(--division-accent, #8b6748); border-radius: .4rem; background: var(--division-wash, #f4e9d7); }
.division-style-preview span { color: var(--division-accent, #8b6748); font-size: 1.2rem; }
.division-style-preview strong { min-width: 0; overflow-wrap: anywhere; font: 600 1rem Fraunces, Georgia, serif; }
.division-style-preview[data-width="wide"] { border-left-width: 7px; }
#divisionWidth { width: 100%; }
.division-width-hint { color: var(--muted); font: 11px/1.35 var(--sans); letter-spacing: 0; }
#divisionDialog { max-height: min(90vh, 650px); overflow-y: auto; }
#divisionDialog #saveDivision { width: 100%; min-height: 44px; border: 0; border-radius: .5rem; background: #2e3730; color: #fffdf8; cursor: pointer; font: 600 .85rem 'DM Sans', sans-serif; }
#divisionDialog #saveDivision:hover { background: #435146; }
@media (max-width: 380px) { .division-style-fields { grid-template-columns: 1fr; } }
@media (max-width: 1000px) { .custom-division[data-width="wide"] .pin-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 480px) { .custom-division .pin-grid, .custom-division[data-width="wide"] .pin-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 340px) { .custom-division .pin-grid, .custom-division[data-width="wide"] .pin-grid { grid-template-columns: 1fr; } }