rename service

.dockerignore

@@ -10,4 +10,5 @@ hf_cache
 output*
 .python-version
 Makefile
-docker-compose.yml
+compose.yml
+build

Dockerfile

@@ -1,5 +1,5 @@
-# BiRefNet background removal service — CUDA 12.4 runtime image.
-FROM nvidia/cuda:12.4.1-cudnn-runtime-ubuntu22.04
+# BiRefNet background removal service — CUDA 12.6 runtime image.
+FROM nvidia/cuda:12.6.1-cudnn-runtime-ubuntu22.04
 
 ENV DEBIAN_FRONTEND=noninteractive \
     PYTHONUNBUFFERED=1 \
@@ -21,10 +21,10 @@ WORKDIR /app
 
 # Install Python + dependencies first so this layer is cached across code changes.
 # The BuildKit cache mount keeps the uv download cache warm across rebuilds.
-COPY pyproject.toml ./
+COPY pyproject.toml uv.lock ./
 RUN --mount=type=cache,target=/root/.cache/uv \
     uv python install 3.12 \
-    && uv sync --no-install-project --no-dev
+    && uv sync --no-install-project --no-dev --frozen
 
 # Application code.
 COPY src ./src
@@ -35,4 +35,4 @@ RUN --mount=type=cache,target=/root/.cache/uv \
 ENV PATH="/app/.venv/bin:${PATH}"
 
 EXPOSE 8000
-CMD ["birefnet-service"]
+CMD ["rmbg-as-a-service"]

Makefile

@@ -45,10 +45,10 @@ sync: ## Install dependencies locally with uv
 	uv sync
 
 dev: sync ## Run the service locally (no Docker; needs local CUDA)
-	uv run birefnet-service
+	uv run rmbg-as-a-service
 
 shell: ## Open a shell inside a fresh container
-	$(COMPOSE) run --rm --entrypoint bash birefnet
+	$(COMPOSE) run --rm --entrypoint bash rmbg
 
 fmt: ## Format code with ruff
 	uv run ruff format src scripts

README.md

@@ -105,10 +105,10 @@ make dev        # uv sync + run the server locally
 ## Layout
 
 ```
-src/birefnet_service/model.py           BiRefNet / RMBG-2.0 wrapper + compositing
-src/birefnet_service/prompt_segment.py  GroundingDINO + SAM pipeline
-src/birefnet_service/server.py          LitServe /predict + /segment + web UI
-src/birefnet_service/static/            web UI (index.html)
+src/rmbg_as_a_service/model.py           BiRefNet / RMBG-2.0 wrapper + compositing
+src/rmbg_as_a_service/prompt_segment.py  GroundingDINO + SAM pipeline
+src/rmbg_as_a_service/server.py          LitServe /predict + /segment + web UI
+src/rmbg_as_a_service/static/            web UI (index.html)
 scripts/client.py                       stdlib-only test client
 Dockerfile / compose.yml                CUDA image + nvidia runtime
 Makefile                                build / run / test shortcuts

build/Dockerfile

@@ -0,0 +1,12 @@
+FROM python:3.13-slim
+
+ENV DEBIAN_FRONTEND=noninteractive \
+    PYTHONUNBUFFERED=1 \
+    HF_HOME=/app/hf_cache \
+    HF_HUB_ENABLE_HF_TRANSFER=1 \
+    PORT=8000
+
+RUN pip install rmbg-as-a-service hf-transfer
+
+EXPOSE 8000
+CMD ["rmbg-as-a-service"]

build/requirements.txt

@@ -0,0 +1,191 @@
+# This file was autogenerated by uv via the following command:
+#    uv pip compile pyproject.toml -o build/requirements.txt
+annotated-doc==0.0.4
+    # via fastapi
+annotated-types==0.7.0
+    # via pydantic
+anyio==4.13.0
+    # via
+    #   starlette
+    #   watchfiles
+certifi==2026.4.22
+    # via requests
+charset-normalizer==3.4.7
+    # via requests
+click==8.3.3
+    # via uvicorn
+cuda-bindings==12.9.6
+    # via torch
+cuda-pathfinder==1.5.4
+    # via cuda-bindings
+cuda-toolkit==12.6.3
+    # via torch
+einops==0.8.2
+    # via rmbg-as-a-service (pyproject.toml)
+fastapi==0.136.1
+    # via litserve
+filelock==3.29.0
+    # via
+    #   huggingface-hub
+    #   torch
+    #   transformers
+fsspec==2026.4.0
+    # via
+    #   huggingface-hub
+    #   torch
+h11==0.16.0
+    # via uvicorn
+hf-xet==1.5.0
+    # via huggingface-hub
+httptools==0.7.1
+    # via uvicorn
+huggingface-hub==0.36.2
+    # via
+    #   timm
+    #   tokenizers
+    #   transformers
+idna==3.15
+    # via
+    #   anyio
+    #   requests
+jinja2==3.1.6
+    # via torch
+kornia==0.8.2
+    # via rmbg-as-a-service (pyproject.toml)
+kornia-rs==0.1.11
+    # via kornia
+litserve==0.2.17
+    # via rmbg-as-a-service (pyproject.toml)
+markupsafe==3.0.3
+    # via jinja2
+mpmath==1.3.0
+    # via sympy
+networkx==3.6.1
+    # via torch
+numpy==2.4.5
+    # via
+    #   rmbg-as-a-service (pyproject.toml)
+    #   torchvision
+    #   transformers
+nvidia-cublas-cu12==12.6.4.1
+    # via
+    #   cuda-toolkit
+    #   nvidia-cudnn-cu12
+    #   nvidia-cusolver-cu12
+nvidia-cuda-cupti-cu12==12.6.80
+    # via cuda-toolkit
+nvidia-cuda-nvrtc-cu12==12.6.85
+    # via cuda-toolkit
+nvidia-cuda-runtime-cu12==12.6.77
+    # via cuda-toolkit
+nvidia-cudnn-cu12==9.10.2.21
+    # via torch
+nvidia-cufft-cu12==11.3.0.4
+    # via cuda-toolkit
+nvidia-cufile-cu12==1.11.1.6
+    # via cuda-toolkit
+nvidia-curand-cu12==10.3.7.77
+    # via cuda-toolkit
+nvidia-cusolver-cu12==11.7.1.2
+    # via cuda-toolkit
+nvidia-cusparse-cu12==12.5.4.2
+    # via
+    #   cuda-toolkit
+    #   nvidia-cusolver-cu12
+nvidia-cusparselt-cu12==0.7.1
+    # via torch
+nvidia-nccl-cu12==2.28.9
+    # via torch
+nvidia-nvjitlink-cu12==12.6.85
+    # via
+    #   cuda-toolkit
+    #   nvidia-cufft-cu12
+    #   nvidia-cusolver-cu12
+    #   nvidia-cusparse-cu12
+nvidia-nvshmem-cu12==3.4.5
+    # via torch
+nvidia-nvtx-cu12==12.6.77
+    # via cuda-toolkit
+packaging==26.2
+    # via
+    #   huggingface-hub
+    #   kornia
+    #   transformers
+pillow==12.2.0
+    # via
+    #   rmbg-as-a-service (pyproject.toml)
+    #   torchvision
+pydantic==2.13.4
+    # via fastapi
+pydantic-core==2.46.4
+    # via pydantic
+python-dotenv==1.2.2
+    # via uvicorn
+pyyaml==6.0.3
+    # via
+    #   huggingface-hub
+    #   timm
+    #   transformers
+    #   uvicorn
+pyzmq==27.1.0
+    # via litserve
+regex==2026.5.9
+    # via transformers
+requests==2.34.2
+    # via
+    #   huggingface-hub
+    #   transformers
+safetensors==0.7.0
+    # via
+    #   timm
+    #   transformers
+setuptools==81.0.0
+    # via torch
+starlette==1.0.0
+    # via fastapi
+sympy==1.14.0
+    # via torch
+timm==1.0.27
+    # via rmbg-as-a-service (pyproject.toml)
+tokenizers==0.22.2
+    # via transformers
+torch==2.11.0+cu126
+    # via
+    #   rmbg-as-a-service (pyproject.toml)
+    #   kornia
+    #   timm
+    #   torchvision
+torchvision==0.26.0+cu126
+    # via
+    #   rmbg-as-a-service (pyproject.toml)
+    #   timm
+tqdm==4.67.3
+    # via
+    #   huggingface-hub
+    #   transformers
+transformers==4.57.6
+    # via rmbg-as-a-service (pyproject.toml)
+triton==3.6.0
+    # via torch
+typing-extensions==4.15.0
+    # via
+    #   fastapi
+    #   huggingface-hub
+    #   pydantic
+    #   pydantic-core
+    #   torch
+    #   typing-inspection
+typing-inspection==0.4.2
+    # via
+    #   fastapi
+    #   pydantic
+urllib3==2.7.0
+    # via requests
+uvicorn==0.47.0
+    # via litserve
+uvloop==0.22.1
+    # via uvicorn
+watchfiles==1.1.1
+    # via uvicorn
+websockets==16.0
+    # via uvicorn

compose.yml

@@ -1,8 +1,8 @@
 services:
-  birefnet:
+  rmbg:
     build: .
-    image: birefnet-service:latest
-    container_name: birefnet-service
+    image: rmbg-as-a-service:latest
+    container_name: rmbg-as-a-service
     ports:
       - "${PORT:-8000}:8000"
     environment:

pyproject.toml

@@ -1,12 +1,12 @@
 [project]
 name = "rmbg-as-a-service"
-version = "0.1.0"
+version = "0.0.1"
 description = "Background removal as a GPU-accelerated API"
 readme = "README.md"
-requires-python = ">=3.12,<3.13"
+requires-python = ">=3.12"
 dependencies = [
-    "torch==2.5.1",
-    "torchvision==0.20.1",
+    "torch==2.11.0",
+    "torchvision==0.26.0",
     "transformers>=4.44,<5",
     "timm>=1.0.0",
     "einops>=0.8.0",
@@ -17,7 +17,7 @@ dependencies = [
 ]
 
 [project.scripts]
-birefnet-service = "birefnet_service.server:run"
+rmbg-as-a-service = "rmbg_as_a_service.server:run"
 
 [dependency-groups]
 dev = ["ruff>=0.6.0"]
@@ -27,17 +27,17 @@ requires = ["hatchling"]
 build-backend = "hatchling.build"
 
 [tool.hatch.build.targets.wheel]
-packages = ["src/birefnet_service"]
+packages = ["src/rmbg_as_a_service"]
 
 # BiRefNet (torch) needs CUDA wheels; pull torch/torchvision from the PyTorch index.
 [[tool.uv.index]]
-name = "pytorch-cu124"
-url = "https://download.pytorch.org/whl/cu124"
+name = "pytorch-cu126"
+url = "https://download.pytorch.org/whl/cu126"
 explicit = true
 
 [tool.uv.sources]
-torch = { index = "pytorch-cu124" }
-torchvision = { index = "pytorch-cu124" }
+torch = { index = "pytorch-cu126" }
+torchvision = { index = "pytorch-cu126" }
 
 [tool.ruff]
 line-length = 100

src/rmbg_as_a_service/static/styles.css

@@ -0,0 +1,656 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Courier New', 'Lucida Console', monospace;
+    background: #000000;
+    color: #8fbc8f;
+    min-height: 100vh;
+    padding: 12px;
+    text-transform: uppercase;
+}
+
+:root {
+    --sidebar-width: 350px;
+    --page-padding: 12px;
+}
+
+.container {
+    max-width: 1400px;
+    margin: 0 auto;
+    display: grid;
+    grid-template-columns: var(--sidebar-width) 1fr;
+    gap: 12px;
+    height: calc(100vh - 24px);
+    position: relative;
+    /* For toggle positioning */
+}
+
+/* Allow collapsing at any size */
+.container.sidebar-collapsed {
+    grid-template-columns: 1fr;
+}
+
+.container.sidebar-collapsed>.controls {
+    display: none !important;
+}
+
+.container.sidebar-collapsed .preview-container {
+    grid-column: 1 / -1;
+}
+
+.sidebar-toggle {
+    display: none;
+    /* Hidden on desktop */
+    position: absolute;
+    z-index: 100;
+}
+
+@media (max-width: 768px) {
+    .container {
+        grid-template-columns: 1fr;
+        display: block;
+        position: relative;
+    }
+
+    .controls {
+        position: fixed;
+        left: var(--page-padding);
+        top: var(--page-padding);
+        width: var(--sidebar-width);
+        height: calc(100% - (var(--page-padding) * 2));
+        z-index: 100;
+        transform: translateX(0);
+        border-right: 2px solid #8fbc8f;
+    }
+
+    .preview-container {
+        height: calc(100vh - 24px);
+        margin-left: calc(var(--sidebar-width) + var(--page-padding));
+        width: calc(100% - var(--sidebar-width) - (var(--page-padding) * 2));
+    }
+
+    .container.sidebar-collapsed .controls {
+        transform: translateX(-100%);
+    }
+
+    .container.sidebar-collapsed .preview-container {
+        margin-left: var(--page-padding);
+        width: calc(100% - (var(--page-padding) * 2));
+    }
+
+    .sidebar-toggle {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: fixed;
+        left: calc(var(--sidebar-width) + var(--page-padding));
+        top: 50%;
+        transform: translateY(-50%);
+        z-index: 101;
+        width: 25px;
+        height: 50px;
+        background: #8fbc8f;
+        color: #000000;
+        border: 2px solid #8fbc8f;
+        border-radius: 0;
+        border-left: none;
+        cursor: pointer;
+        font-size: 18px;
+        font-weight: bold;
+    }
+
+    .container.sidebar-collapsed .sidebar-toggle {
+        left: var(--page-padding);
+    }
+}
+
+.panel {
+    background: #000000;
+    border: 2px solid #8fbc8f;
+    padding: 24px;
+}
+
+.controls {
+    display: flex;
+    flex-direction: column;
+    gap: 18px;
+    overflow-y: auto;
+    scrollbar-width: none;
+    /* Firefox: hide scrollbar */
+    -ms-overflow-style: none;
+    /* IE/Edge legacy */
+    scrollbar-gutter: stable;
+    /* Prevent layout shift when scrollability changes */
+    min-width: 0;
+}
+
+/* Scrollbar - WebKit */
+.controls::-webkit-scrollbar {
+    width: 0;
+    /* Hide scrollbar in Chrome/Safari/Edge */
+    height: 0;
+}
+
+.controls::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.controls::-webkit-scrollbar-thumb {
+    background: transparent;
+    border: none;
+}
+
+.controls::-webkit-scrollbar-thumb:hover {
+    background: transparent;
+}
+
+.upload-section {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+.upload-section.drawer:not(.open) {
+    gap: 0;
+    padding-bottom: 0;
+}
+
+/* Drawer styling */
+.drawer {
+    border: 1px solid #8fbc8f;
+    /* Always present, just controls visibility of content */
+}
+
+.drawer:not(.open) {
+    padding-bottom: 0;
+}
+
+.drawer-header {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    cursor: pointer;
+    padding: 6px 6px;
+    user-select: none;
+    border-bottom: 1px solid #8fbc8f;
+    line-height: 1.2;
+}
+
+.drawer-header .section-title {
+    margin-bottom: 0;
+}
+
+.drawer-caret {
+    color: #8fbc8f;
+    font-size: 14px;
+    width: 14px;
+    display: inline-block;
+    transition: transform 0.2s ease;
+}
+
+.drawer .drawer-content {
+    max-height: 0;
+    min-height: 0;
+    overflow: hidden;
+    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
+    opacity: 0;
+    width: 100%;
+    flex-shrink: 0;
+    box-sizing: border-box;
+    padding: 12px 12px 0px 12px;
+    /* Reduced bottom padding when closed */
+}
+
+.drawer.open .drawer-content {
+    max-height: 1000px;
+    opacity: 1;
+    padding: 12px;
+    /* Full padding when open */
+}
+
+/* Canvas width stays calculated for padding */
+.curve-canvas {
+    width: 100%;
+    height: 120px;
+    background: #000000;
+    cursor: crosshair;
+    border: 1px solid #8fbc8f;
+    display: block;
+}
+
+.upload-box {
+    position: relative;
+    border: 2px solid #8fbc8f;
+    padding: 24px;
+    text-align: center;
+    cursor: pointer;
+    min-height: 120px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    background: #000000;
+}
+
+.upload-box:hover {
+    border-color: #7aa87a;
+    background: #0a0a0a;
+}
+
+.upload-box.dragover {
+    border-color: #ff6b6b;
+    background: #0a0000;
+}
+
+.upload-box.disabled {
+    border-color: #444;
+    background: #111;
+    color: #666;
+    cursor: not-allowed;
+}
+
+.upload-box.disabled .upload-text,
+.upload-box.disabled .upload-hint {
+    color: #666;
+}
+
+.upload-box input {
+    position: absolute;
+    opacity: 0;
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+}
+
+.upload-text {
+    color: #8fbc8f;
+    font-size: 14px;
+    margin-bottom: 8px;
+}
+
+.upload-hint {
+    color: #7aa87a;
+    font-size: 12px;
+}
+
+.preview-thumb {
+    max-width: 60px;
+    max-height: 60px;
+    margin-top: 8px;
+}
+
+.control-group {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+}
+
+.control-group.drawer:not(.open) {
+    gap: 0;
+    padding-bottom: 0;
+}
+
+.control-label {
+    color: #8fbc8f;
+    font-size: 14px;
+    font-weight: bold;
+}
+
+.slider-container {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.slider-container.inline {
+    flex-direction: row;
+    align-items: center;
+    gap: 12px;
+}
+
+.slider {
+    width: 100%;
+    height: 8px;
+    background: #000000;
+    border: 1px solid #8fbc8f;
+    outline: none;
+    appearance: none;
+    cursor: pointer;
+}
+
+.slider:focus {
+    outline: none;
+}
+
+.slider:hover {
+    background: #0a0a0a;
+}
+
+.slider::-webkit-slider-runnable-track {
+    height: 8px;
+    background: #000000;
+    border: 1px solid #8fbc8f;
+}
+
+.slider::-moz-range-track {
+    height: 8px;
+    background: #000000;
+    border: 1px solid #8fbc8f;
+}
+
+.slider::-webkit-slider-thumb {
+    appearance: none;
+    width: 18px;
+    height: 18px;
+    background: #8fbc8f;
+    cursor: pointer;
+    border: 1px solid #000000;
+    margin-top: -5px;
+}
+
+.slider::-moz-range-thumb {
+    width: 18px;
+    height: 18px;
+    background: #8fbc8f;
+    cursor: pointer;
+    border: 1px solid #000000;
+}
+
+.slider-value {
+    color: #7aa87a;
+    font-size: 12px;
+    text-align: center;
+    font-weight: bold;
+    /* Add this */
+}
+
+.curves-container {
+    background: #000000;
+    border: 1px solid #8fbc8f;
+    padding: 16px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 12px;
+}
+
+
+.preview-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    overflow: hidden;
+}
+
+.loupe-overlay {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+}
+
+.preview-canvas {
+    max-width: 100%;
+    max-height: 100%;
+    border: 2px solid #8fbc8f;
+    background: #000000;
+}
+
+.preview-canvas.cursor-hidden {
+    cursor: none;
+}
+
+.no-preview {
+    color: #7aa87a;
+    font-size: 18px;
+    text-align: center;
+}
+
+.section-title {
+    color: #8fbc8f;
+    font-size: 16px;
+    font-weight: bold;
+    margin-bottom: 8px;
+}
+
+.reset-btn {
+    background: #000000;
+    border: 1px solid #ff6b6b;
+    color: #ff6b6b;
+    padding: 8px 16px;
+    font-size: 12px;
+    cursor: pointer;
+    margin-top: 10px;
+    display: inline-block;
+}
+
+.reset-btn:hover {
+    background: #0a0000;
+}
+
+.action-btn {
+    background: #000000;
+    border: 1px solid #8fbc8f;
+    color: #8fbc8f;
+    padding: 10px 16px;
+    font-size: 12px;
+    cursor: pointer;
+}
+
+.action-btn:hover {
+    background: #0a0a0a;
+}
+
+/* Brutalist checkboxes */
+input[type="checkbox"] {
+    appearance: none;
+    width: 18px;
+    height: 18px;
+    border: 1px solid #8fbc8f;
+    background: #000000;
+    cursor: pointer;
+    vertical-align: middle;
+}
+
+input[type="checkbox"]:hover {
+    background: #0a0a0a;
+}
+
+input[type="checkbox"]:focus {
+    outline: 2px solid #8fbc8f;
+}
+
+input[type="checkbox"]:checked {
+    background: #8fbc8f;
+    border-color: #8fbc8f;
+}
+
+input[type="checkbox"]:checked::after {
+    content: "X";
+    color: #000000;
+    font-weight: bold;
+    font-size: 12px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+/* Brutalist radio buttons */
+input[type="radio"] {
+    appearance: none;
+    width: 18px;
+    height: 18px;
+    border: 1px solid #8fbc8f;
+    background: #000000;
+    cursor: pointer;
+    vertical-align: middle;
+    border-radius: 0;
+    /* Keep square for brutalist look */
+}
+
+input[type="radio"]:hover {
+    background: #0a0a0a;
+}
+
+input[type="radio"]:focus {
+    outline: 2px solid #8fbc8f;
+}
+
+input[type="radio"]:checked {
+    background: #8fbc8f;
+    border-color: #8fbc8f;
+}
+
+input[type="radio"]:checked::after {
+    content: "●";
+    color: #000000;
+    font-weight: bold;
+    font-size: 12px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    line-height: 1;
+}
+
+/* Brutalist text inputs */
+input[type="text"] {
+    background: #000000;
+    border: 1px solid #8fbc8f;
+    color: #8fbc8f;
+    padding: 4px 8px;
+    font-family: inherit;
+    font-size: 12px;
+    width: 100%;
+    box-sizing: border-box;
+}
+
+input[type="text"]:hover {
+    background: #0a0a0a;
+}
+
+input[type="text"]:focus {
+    outline: 2px solid #8fbc8f;
+    background: #0a0a0a;
+}
+
+input[type="text"]::placeholder {
+    color: #7aa87a;
+    opacity: 0.7;
+}
+
+/* Brutalist number inputs */
+input[type="number"] {
+    appearance: none;
+    background: #000000;
+    border: 1px solid #8fbc8f;
+    color: #8fbc8f;
+    padding: 4px 8px;
+    font-family: inherit;
+    font-size: 12px;
+    text-transform: uppercase;
+    font-weight: bold;
+}
+
+input[type="number"]:hover {
+    background: #0a0a0a;
+}
+
+input[type="number"]:focus {
+    outline: 2px solid #8fbc8f;
+    background: #0a0a0a;
+}
+
+/* Hide default number input spinners and replace with brutalist ones */
+input[type="number"]::-webkit-outer-spin-button,
+input[type="number"]::-webkit-inner-spin-button {
+    appearance: none;
+    margin: 0;
+}
+
+/* Firefox */
+input[type="number"] {
+    -moz-appearance: textfield;
+    appearance: textfield;
+}
+
+/* We'll use a wrapper approach for the spinner buttons */
+.number-input-wrapper {
+    position: relative;
+    display: inline-block;
+}
+
+.number-input-wrapper input[type="number"] {
+    padding-right: 25px;
+    /* Make room for buttons */
+    position: relative;
+    width: 100%;
+    box-sizing: border-box;
+    height: auto;
+    min-height: 24px;
+}
+
+.number-spinner {
+    position: absolute;
+    right: 0;
+    top: 1px;
+    bottom: 1px;
+    width: 20px;
+    display: flex;
+    flex-direction: column;
+    border-left: 1px solid #8fbc8f;
+}
+
+.number-spinner-btn {
+    flex: 1;
+    background: #8fbc8f;
+    border: none;
+    color: #000000;
+    cursor: pointer;
+    font-size: 8px;
+    font-weight: bold;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    user-select: none;
+}
+
+.number-spinner-btn:first-child {
+    border-bottom: 1px solid #000000;
+}
+
+.number-spinner-btn:hover {
+    background: #7aa87a;
+}
+
+.number-spinner-btn:active {
+    background: #6a9a6a;
+}
+
+/* Ensure buttons also get uppercase text */
+button {
+    text-transform: uppercase;
+    font: inherit;
+    font-weight: bold;
+}
+
+/* Label styling for radio buttons */
+label {
+    color: #8fbc8f;
+    cursor: pointer;
+    user-select: none;
+}
+
+/* Rotate caret when drawer is open */
+.drawer.open .drawer-caret {
+    transform: rotate(120deg);
+}