feat: centralize GUI style abstraction layer

[KristijanArmeni]

Describe the Feature Request

NiceGUI styling (.classes(), .style(), Tailwind classes, inline CSS) is scattered across pages, components, and dashboards in cibmangotree.gui with duplication, making visual consistency hard to maintain and restyling laborious.

Examples of duplicated patterns for card styles:

# run_step.py:49
ui.card().classes("w-full p-4 no-shadow border border-gray-200")

# analysis.py:53
ui.card().classes("w-72 p-4 no-shadow border border-gray-200")

# analyzer_step.py:43
ui.card().classes("w-[40rem] shadow-none")

Other examples:

• layout patterns: "w-full items-center gap-2 mb-2" is locally defined as ROW_LAYOUT in import_options.py:77 and duplicated in other files
• inline styles: "max-width: 960px; margin: 0 auto;" copy-pasted in params_step.py:84 and run_step.py:45
• text classes: "text-grey", "text-grey-6", "text-grey-7" all used interchangeably for muted text

Describe Preferred Solution

Use constants in theme.py and combine with helpers/new context managers:

• theme.py: Add module-level constants for raw class strings and style values (e.g., CARD_NO_SHADOW, ROW_LAYOUT, TEXT_MUTED)
• base.py: Extend the existing centered_content() context manager pattern for other common layouts
• gui/components/: Move repeated UI shells (loading containers, empty states) into small reusable components

Examples:

1. Module-level constants only in theme.py: Just add string constants.

   CARD_NO_SHADOW = "no-shadow border border-gray-200"
   CARD_CONTENT = "w-full p-4 " + CARD_NO_SHADOW
   ROW_LAYOUT = "w-full items-center gap-2 mb-2"
   TEXT_MUTED = "text-grey-7"
   STYLE_CENTERED = "max-width: 960px; margin: 0 auto;"

2. Helper functions + context managers in gui/styles.py: Composable wrappers.

   @contextmanager
   def basic_card(content=True, param=False):
       cls = "p-4 no-shadow border border-gray-200"
       if content: cls += " w-full"
       if param: cls += " w-72"
       with ui.card().classes(cls):
           yield
   
   @contextmanager
   def centered_content(max_width="960px"):
       with ui.column().classes("items-center gap-6").style(
           f"max-width: {max_width}; margin: 0 auto; width: 100%"
       ):
           yield

   Usage: with basic_card(): ui.label("Hello")

Suggested next steps:

1. Review all .classes() and .style() calls to catalog patterns
2. Add constants/helpers to theme.py and/or base.py
3. Migrate 1-2 pages as proof of concept (e.g., run_step.py, analysis_post.py)

If the feature request is approved, would you be willing to submit a PR?
(Help can be provided if you need assistance submitting a PR)

• Yes
• No

[Kartik-Hirijaganer]

Hey, @KristijanArmeni opened a groundwork PR.

Two quick questions on it:

• Is the boundary rule in styling.md right?
• Are you OK with a lint hook enforcing it? I believe we need some measures to avoid this in the future.