.paint-control { min-width: 0; }
.paint-mode { display: flex; gap: 3px; width: 100%; margin: 0 0 8px; padding: 3px; border: 1px solid #3c4960; border-radius: 8px; background: #121a28; }
.paint-mode button { flex: 1; min-width: 0; min-height: 27px; border: 0; border-radius: 5px; background: transparent; color: #aebbd0; font: inherit; font-size: 10px; font-weight: 650; cursor: pointer; }
.paint-mode button.active { background: #55458b; color: #fff; }
.paint-solid[hidden], .gradient-editor[hidden], [data-gradient-angle-wrap][hidden] { display: none !important; }
.gradient-editor { display: grid; gap: 9px; padding: 9px; border: 1px solid #3d4b63; border-radius: 9px; background: #121a28; }
.gradient-preview { height: 36px; border: 1px solid #ffffff55; border-radius: 7px; background-color: #7867ff; }
.gradient-top-row { display: flex; align-items: center; gap: 7px; }
.gradient-top-row > select { flex: 1; min-width: 0; height: 32px; padding: 5px 7px; border: 1px solid #45526a; border-radius: 6px; background: #0e1521; color: #edf0f8; font-size: 10px; }
.gradient-top-row > label { display: flex; align-items: center; gap: 3px; color: #b5c0d2; font-size: 10px; white-space: nowrap; }
.gradient-top-row input { width: 46px; height: 32px; padding: 4px; border: 1px solid #45526a; border-radius: 6px; background: #0e1521; color: #edf0f8; font-size: 10px; text-align: right; }
.gradient-stops { display: grid; gap: 5px; }
.gradient-stop { display: flex; align-items: center; gap: 5px; min-width: 0; }
.gradient-stop input[type="color"] { flex: 0 0 33px; width: 33px; height: 28px; padding: 2px; border: 1px solid #56627a; border-radius: 5px; background: #0e1521; }
.gradient-stop input[type="number"] { flex: 1; min-width: 0; height: 28px; padding: 3px 6px; border: 1px solid #45526a; border-radius: 5px; background: #0e1521; color: #edf0f8; font-size: 10px; }
.gradient-stop > span { color: #9eabc0; font-size: 10px; }
.gradient-stop button { flex: 0 0 26px; height: 26px; border: 0; border-radius: 5px; background: transparent; color: #aebbd0; font-size: 17px; cursor: pointer; }
.gradient-stop button:hover { background: #493149; color: #ffd8e3; }
.gradient-add { min-height: 29px; border: 1px dashed #7463a8; border-radius: 6px; background: #302847; color: #e5dbff; font: inherit; font-size: 10px; cursor: pointer; }
.gradient-add:hover { background: #46365f; }
.wb-node[data-lwb-text-gradient] > .editable-text, .wb-node[data-lwb-text-gradient] > .navbar-brand, .wb-node[data-lwb-text-gradient] > ul { background-image: var(--lwb-text-gradient); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: var(--lwb-text-fill, currentColor); }
body.theme-light .paint-mode, body.theme-light .gradient-editor { border-color: #dce2eb; background: #f5f7fb; }
body.theme-light .paint-mode button { color: #51607b; }
body.theme-light .paint-mode button.active { color: #fff; }
body.theme-light .gradient-top-row > select, body.theme-light .gradient-top-row input, body.theme-light .gradient-stop input[type="number"] { border-color: #d4dce8; background: #fff; color: #27324a; }
body.theme-light .gradient-top-row > label, body.theme-light .gradient-stop > span { color: #65738a; }
.design-color-field { display: flex; align-items: end; gap: 6px; min-width: 0; }
.design-color-field > label { flex: 1; min-width: 0; }
.design-color-field > button { flex: 0 0 auto; height: 40px; padding: 0 9px; border: 1px solid #5c4d89; border-radius: 7px; background: #352b52; color: #e3d9ff; font: inherit; font-size: 10px; cursor: pointer; }
.design-color-field > button.active { border-color: #ad94f1; background: #624ca2; color: #fff; }
.design-gradient-panel { display: grid; gap: 10px; margin: 13px 0; padding: 12px; border: 1px solid #485670; border-radius: 10px; background: #182131; }
.design-gradient-panel[hidden] { display: none !important; }
.design-gradient-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.design-gradient-heading strong { color: #f1f4fb; font-size: 12px; }
.design-gradient-heading button { border: 0; background: transparent; color: #c4aefb; font-size: 10px; cursor: pointer; }
body.theme-light .design-color-field > button { border-color: #cec0ec; background: #f1ebff; color: #62419d; }
body.theme-light .design-color-field > button.active { background: #7350b8; color: #fff; }
body.theme-light .design-gradient-panel { border-color: #dce2eb; background: #f5f7fb; }
body.theme-light .design-gradient-heading strong { color: #27324a; }
.vs-paint-control > input[hidden] { display: none !important; }
.vs-paint-control .paint-mode { margin-top: 6px; }
.vs-paint-control .gradient-editor { margin-top: 7px; }