/* ==================================================================
   REDPIIX APP  -  Bediensystem fuer Programmoberflaechen
   ------------------------------------------------------------------
   Praefix ax- (application). Diese Datei macht aus einer Webseite eine
   Anwendung: dichte Flaechen, sichtbare Kanten, eigene Bedienelemente
   statt Browser-Vorgaben, Menueleiste, Werkzeugschiene, Andockleiste,
   Statusleiste.

   Bewusste Entscheidungen:
   - kleine Radien (3-5px). Grosse Radien lesen sich als Webseite.
   - sichtbare Trennlinien in echtem Grau statt rgba-Weiss auf Schwarz.
     Auf fast schwarzem Grund verschwindet rgba(255,255,255,.1) - genau
     das machte die alte Oberflaeche kontrastlos.
   - drei klar getrennte Flaechenhelligkeiten: Fenster, Anlegeflaeche,
     Bedienelement. Daran erkennt das Auge die Struktur ohne Linien.
   ================================================================== */

.rp-app-root {
    --ax-window: #16161a;   /* Fensterflaeche, Leisten            */
    --ax-panel: #1e1e24;    /* Andockbare Bereiche                */
    --ax-raise: #292931;    /* Bedienelemente auf der Flaeche      */
    --ax-raise-hi: #33333d; /* Bedienelement unter dem Zeiger      */
    --ax-well: #0b0b0d;     /* Arbeitsflaeche, Eingabefelder       */

    --ax-line: #33333d;     /* normale Kante, deutlich sichtbar    */
    --ax-line-2: #45454f;   /* betonte Kante                       */

    --ax-text: #f2f2f5;
    --ax-text-2: #b4b4bf;
    --ax-text-3: #7e7e8a;

    --ax-accent: #ff3b41;
    --ax-accent-2: #ff6266;
    --ax-accent-dim: rgba(255, 59, 65, .16);
    --ax-handle: #4a9eff;   /* Anfasser und Auswahl, wie in Bildprogrammen */
    --ax-ok: #3ddc84;
    --ax-warn: #ffb020;

    --ax-h-menu: 28px;
    --ax-h-options: 36px;
    --ax-h-status: 26px;
    --ax-rail: 44px;
    --ax-dock: 268px;

    --ax-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, sans-serif;
    --ax-mono: "Share Tech Mono", ui-monospace, Consolas, monospace;

    font-family: var(--ax-ui);
    font-size: 12px;
    color: var(--ax-text);
    background: var(--ax-window);
    -webkit-font-smoothing: antialiased;
}

.rp-app-root *, .rp-app-root *::before, .rp-app-root *::after { box-sizing: border-box; }
.rp-app-root button, .rp-app-root input, .rp-app-root select, .rp-app-root textarea {
    font-family: inherit; font-size: inherit; color: inherit;
}
.rp-app-root ::selection { background: var(--ax-accent-dim); }

/* Im Programmbetrieb tritt die GuardIAn-Kopfleiste zurueck: die Anwendung
   bekommt das ganze Fenster, so wie ein Programm auf dem Rechner.

   Die Hoehe ist bewusst fest und nicht nur eine Mindesthoehe. Mit einer
   Mindesthoehe waechst der Rahmen mit dem Inhalt der Andockleiste, und
   die Arbeitsflaeche waechst lautlos mit - genau daran zerbrach das
   Einpassen. Ein Programmfenster scrollt nicht, seine Bereiche tun es. */
.guardian-main:has(.rp-studio.is-app) .guardian-topbar { display: none; }
.guardian-main:has(.rp-studio.is-app) { min-height: 0; }
.guardian-content:has(.rp-studio.is-app) {
    padding: 0 !important; max-width: none !important;
    height: 100vh; overflow: hidden;
}
.rp-studio.is-app { height: 100vh; min-height: 0; overflow: hidden; }

/* ══════════════════════════════════════════════════════════════
   MENUELEISTE
   ══════════════════════════════════════════════════════════════ */
.ax-menubar {
    display: flex; align-items: stretch;
    height: var(--ax-h-menu); flex-shrink: 0;
    background: var(--ax-window);
    border-bottom: 1px solid var(--ax-line);
    padding: 0 6px;
    position: relative; z-index: 300;
    user-select: none;
}
.ax-menu { position: relative; display: flex; }
.ax-menu > button {
    background: none; border: 0; color: var(--ax-text-2);
    padding: 0 10px; font-size: 12px; cursor: default;
    border-radius: 3px; margin: 3px 1px; line-height: 1;
}
.ax-menu > button:hover { background: var(--ax-raise); color: var(--ax-text); }
.ax-menu.is-open > button { background: var(--ax-accent); color: #fff; }
.ax-menu-pop {
    display: none; position: absolute; top: 100%; left: 0; min-width: 244px;
    background: var(--ax-panel); border: 1px solid var(--ax-line-2);
    border-radius: 4px; padding: 4px; z-index: 320;
    box-shadow: 0 14px 40px rgba(0, 0, 0, .6);
}
.ax-menu.is-open .ax-menu-pop { display: block; }
.ax-menu-item {
    display: flex; align-items: center; gap: 10px; width: 100%;
    background: none; border: 0; color: var(--ax-text);
    padding: 6px 9px; border-radius: 3px; cursor: default; text-align: left;
    white-space: nowrap;
}
.ax-menu-item:hover:not(:disabled) { background: var(--ax-accent); color: #fff; }
.ax-menu-item:disabled { color: var(--ax-text-3); }
.ax-menu-item .ax-key { margin-left: auto; color: var(--ax-text-3); font-size: 11px; font-family: var(--ax-mono); }
.ax-menu-item:hover:not(:disabled) .ax-key { color: rgba(255, 255, 255, .8); }
.ax-menu-sep { height: 1px; background: var(--ax-line); margin: 4px 6px; }

/* ══════════════════════════════════════════════════════════════
   OPTIONSLEISTE  (kontextabhaengig zum aktiven Werkzeug)
   ══════════════════════════════════════════════════════════════ */
.ax-optionsbar {
    display: flex; align-items: center; gap: 8px;
    height: var(--ax-h-options); flex-shrink: 0; padding: 0 10px;
    background: var(--ax-panel);
    border-bottom: 1px solid var(--ax-line);
    overflow-x: auto; scrollbar-width: none;
}
.ax-optionsbar::-webkit-scrollbar { display: none; }
.ax-optionsbar > .ax-sep { width: 1px; height: 20px; background: var(--ax-line-2); flex-shrink: 0; margin: 0 2px; }
.ax-optionsbar .ax-tool-name {
    display: flex; align-items: center; gap: 7px;
    font-weight: 600; color: var(--ax-text); white-space: nowrap; padding-right: 4px;
}
.ax-optionsbar .ax-tool-name i { color: var(--ax-accent); font-size: 14px; }

/* ══════════════════════════════════════════════════════════════
   RUMPF: Werkzeugschiene | Arbeitsflaeche | Andockleiste
   ══════════════════════════════════════════════════════════════ */
.ax-body { display: flex; flex: 1; min-height: 0; }

.ax-rail {
    width: var(--ax-rail); flex-shrink: 0;
    background: var(--ax-window); border-right: 1px solid var(--ax-line);
    display: flex; flex-direction: column; align-items: center;
    padding: 6px 0; gap: 2px;
}
.ax-rail-sep { width: 24px; height: 1px; background: var(--ax-line-2); margin: 5px 0; }
.ax-tool {
    width: 32px; height: 32px; border-radius: 4px;
    background: none; border: 1px solid transparent; color: var(--ax-text-2);
    display: grid; place-items: center; font-size: 15px; cursor: default;
    position: relative;
}
.ax-tool:hover { background: var(--ax-raise); color: var(--ax-text); }
.ax-tool.is-active { background: var(--ax-accent); border-color: var(--ax-accent); color: #fff; }
.ax-tool.is-active::after {
    content: ""; position: absolute; right: 2px; bottom: 2px;
    border: 3px solid transparent; border-right-color: rgba(255, 255, 255, .85); border-bottom-color: rgba(255, 255, 255, .85);
}

.ax-stage { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--ax-well); }
.ax-viewport { flex: 1; min-height: 0; position: relative; overflow: hidden; }
.ax-viewport canvas { display: block; position: absolute; inset: 0; }
.ax-viewport.is-panning { cursor: grabbing; }
.ax-viewport.is-pan-ready { cursor: grab; }

/* Andockleiste rechts */
.ax-dock {
    width: var(--ax-dock); flex-shrink: 0;
    background: var(--ax-panel); border-left: 1px solid var(--ax-line);
    display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden;
}
.ax-dock::-webkit-scrollbar { width: 10px; }
.ax-dock::-webkit-scrollbar-track { background: var(--ax-panel); }
.ax-dock::-webkit-scrollbar-thumb { background: var(--ax-raise-hi); border: 3px solid var(--ax-panel); border-radius: 5px; }
.ax-dock::-webkit-scrollbar-thumb:hover { background: var(--ax-line-2); }

.ax-panel { border-bottom: 1px solid var(--ax-line); flex-shrink: 0; }
.ax-panel-head {
    display: flex; align-items: center; gap: 7px; width: 100%;
    height: 28px; padding: 0 9px; background: var(--ax-window);
    border: 0; border-bottom: 1px solid var(--ax-line);
    color: var(--ax-text-2); cursor: default; user-select: none;
}
.ax-panel-head:hover { color: var(--ax-text); }
.ax-panel-head > span { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.ax-panel-head .ax-chev { margin-left: auto; font-size: 10px; transition: transform .15s; }
.ax-panel.is-closed .ax-chev { transform: rotate(-90deg); }
.ax-panel.is-closed .ax-panel-body { display: none; }
.ax-panel-body { padding: 9px; display: flex; flex-direction: column; gap: 9px; }

/* Statusleiste */
.ax-statusbar {
    display: flex; align-items: center; gap: 0;
    height: var(--ax-h-status); flex-shrink: 0;
    background: var(--ax-window); border-top: 1px solid var(--ax-line);
    padding: 0 4px; font-size: 11px; color: var(--ax-text-2);
}
.ax-statusbar > * { padding: 0 9px; }
.ax-statusbar .ax-st-sep { width: 1px; height: 13px; background: var(--ax-line-2); padding: 0; }
.ax-statusbar .ax-st-grow { flex: 1; color: var(--ax-text-3); }
.ax-statusbar b { color: var(--ax-text); font-weight: 600; font-family: var(--ax-mono); }

/* ══════════════════════════════════════════════════════════════
   BEDIENELEMENTE
   ══════════════════════════════════════════════════════════════ */

/* -- Schaltflaeche -- */
.ax-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 26px; padding: 0 11px; border-radius: 4px;
    background: var(--ax-raise); border: 1px solid var(--ax-line-2);
    color: var(--ax-text); cursor: default; white-space: nowrap; font-size: 12px;
}
.ax-btn:hover:not(:disabled) { background: var(--ax-raise-hi); border-color: #55555f; }
.ax-btn:active:not(:disabled) { background: #202028; }
.ax-btn:disabled { opacity: .4; }
.ax-btn-primary { background: var(--ax-accent); border-color: var(--ax-accent); color: #fff; font-weight: 600; }
.ax-btn-primary:hover:not(:disabled) { background: var(--ax-accent-2); border-color: var(--ax-accent-2); }
.ax-btn-wide { width: 100%; }
.ax-btn-tall { height: 30px; }

.ax-icon-btn {
    width: 26px; height: 26px; border-radius: 4px; display: grid; place-items: center;
    background: var(--ax-raise); border: 1px solid var(--ax-line-2);
    color: var(--ax-text-2); cursor: default; font-size: 13px; flex-shrink: 0;
}
.ax-icon-btn:hover:not(:disabled) { background: var(--ax-raise-hi); color: var(--ax-text); }
.ax-icon-btn:disabled { opacity: .35; }
.ax-icon-btn.is-on { background: var(--ax-accent); border-color: var(--ax-accent); color: #fff; }

/* -- Segmentierte Auswahl -- */
.ax-seg { display: inline-flex; background: var(--ax-well); border: 1px solid var(--ax-line-2); border-radius: 4px; padding: 1px; }
.ax-seg button {
    height: 22px; min-width: 28px; padding: 0 8px; border: 0; border-radius: 3px;
    background: none; color: var(--ax-text-2); cursor: default; font-size: 12px;
    display: grid; place-items: center;
}
.ax-seg button:hover { color: var(--ax-text); }
.ax-seg button.is-on { background: var(--ax-raise-hi); color: var(--ax-text); box-shadow: inset 0 0 0 1px var(--ax-line-2); }

/* -- Zahlenfeld mit Ziehgriff --
   Der Griff links laesst sich waagerecht ziehen und aendert den Wert.
   Genau diese Geste kennen Nutzer aus Photoshop und After Effects. */
.ax-num { display: flex; align-items: center; height: 24px; border-radius: 4px; overflow: hidden; background: var(--ax-well); border: 1px solid var(--ax-line-2); }
.ax-num:focus-within { border-color: var(--ax-accent); }
.ax-num > .ax-num-grip {
    display: grid; place-items: center; height: 100%; min-width: 22px; padding: 0 5px;
    color: var(--ax-text-3); background: var(--ax-raise); border-right: 1px solid var(--ax-line-2);
    cursor: ew-resize; user-select: none; font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
}
.ax-num > .ax-num-grip:hover { color: var(--ax-accent); background: var(--ax-raise-hi); }
.ax-num > input {
    flex: 1; min-width: 0; width: 100%; height: 100%;
    background: none; border: 0; outline: 0; padding: 0 6px;
    font-family: var(--ax-mono); font-size: 12px; color: var(--ax-text);
}
.ax-num > input::-webkit-outer-spin-button,
.ax-num > input::-webkit-inner-spin-button { appearance: none; margin: 0; }
.ax-num > input[type=number] { -moz-appearance: textfield; }
.ax-num > .ax-num-unit { padding: 0 6px 0 0; color: var(--ax-text-3); font-size: 10.5px; }

/* -- Regler --
   Vollstaendig eigene Optik. Der Browser-Standardregler ist das
   deutlichste Merkmal einer Webseite und muss verschwinden. */
.ax-slider { display: flex; align-items: center; gap: 8px; }
.ax-slider input[type=range] {
    appearance: none; -webkit-appearance: none;
    flex: 1; min-width: 0; height: 18px; background: none; outline: 0; margin: 0; cursor: default;
}
.ax-slider input[type=range]::-webkit-slider-runnable-track {
    height: 4px; border-radius: 2px;
    background: linear-gradient(90deg, var(--ax-accent) var(--ax-fill, 50%), var(--ax-raise-hi) var(--ax-fill, 50%));
    border: 1px solid var(--ax-line-2);
}
.ax-slider input[type=range]::-moz-range-track { height: 4px; border-radius: 2px; background: var(--ax-raise-hi); border: 1px solid var(--ax-line-2); }
.ax-slider input[type=range]::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--ax-accent); }
.ax-slider input[type=range]::-webkit-slider-thumb {
    appearance: none; -webkit-appearance: none;
    width: 13px; height: 13px; margin-top: -5.5px; border-radius: 50%;
    background: #e9e9ee; border: 1px solid #0a0a0c; box-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}
.ax-slider input[type=range]::-moz-range-thumb {
    width: 13px; height: 13px; border-radius: 50%;
    background: #e9e9ee; border: 1px solid #0a0a0c; box-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}
.ax-slider input[type=range]:hover::-webkit-slider-thumb { background: #fff; }
.ax-slider input[type=range]:hover::-moz-range-thumb { background: #fff; }
.ax-slider .ax-num { width: 68px; flex-shrink: 0; }

/* -- Auswahlliste -- */
.ax-select { position: relative; display: flex; }
.ax-select select {
    appearance: none; -webkit-appearance: none;
    width: 100%; height: 24px; padding: 0 24px 0 7px; border-radius: 4px;
    background: var(--ax-well); border: 1px solid var(--ax-line-2);
    color: var(--ax-text); outline: 0; cursor: default;
}
.ax-select select:hover { border-color: #55555f; }
.ax-select select:focus { border-color: var(--ax-accent); }
.ax-select::after {
    content: ""; position: absolute; right: 8px; top: 50%; margin-top: -2px;
    border: 4px solid transparent; border-top-color: var(--ax-text-3); pointer-events: none;
}
.ax-select option { background: var(--ax-panel); color: var(--ax-text); }

/* -- Textfeld -- */
.ax-input, .ax-textarea {
    width: 100%; border-radius: 4px; padding: 0 7px; height: 24px;
    background: var(--ax-well); border: 1px solid var(--ax-line-2);
    color: var(--ax-text); outline: 0;
}
.ax-textarea { height: auto; padding: 6px 7px; resize: vertical; line-height: 1.5; }
.ax-input:focus, .ax-textarea:focus { border-color: var(--ax-accent); }
.ax-input::placeholder, .ax-textarea::placeholder { color: var(--ax-text-3); }

/* -- Farbfeld -- */
.ax-swatch { position: relative; width: 34px; height: 24px; border-radius: 4px; border: 1px solid var(--ax-line-2); overflow: hidden; flex-shrink: 0; }
.ax-swatch input[type=color] {
    position: absolute; inset: -6px; width: calc(100% + 12px); height: calc(100% + 12px);
    padding: 0; border: 0; background: none; cursor: default;
}

/* -- Schalter -- */
.ax-check { display: flex; align-items: center; gap: 7px; color: var(--ax-text-2); cursor: default; }
.ax-check input { appearance: none; -webkit-appearance: none; width: 14px; height: 14px; border-radius: 3px; background: var(--ax-well); border: 1px solid var(--ax-line-2); flex-shrink: 0; position: relative; }
.ax-check input:checked { background: var(--ax-accent); border-color: var(--ax-accent); }
.ax-check input:checked::after {
    content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px;
    border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(42deg);
}
.ax-check:hover { color: var(--ax-text); }

/* -- Beschriftungen und Raster -- */
.ax-field { display: flex; align-items: center; gap: 8px; }
.ax-field > label { width: 74px; flex-shrink: 0; color: var(--ax-text-2); font-size: 11px; }
.ax-field > *:not(label) { flex: 1; min-width: 0; }
.ax-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ax-row { display: flex; align-items: center; gap: 6px; }
.ax-label { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ax-text-3); }
.ax-hint { font-size: 11px; color: var(--ax-text-3); line-height: 1.55; }

/* ══════════════════════════════════════════════════════════════
   EBENENLISTE  (Aufbau wie in Bildprogrammen ueblich)
   ══════════════════════════════════════════════════════════════ */
.ax-layers { display: flex; flex-direction: column-reverse; gap: 1px; max-height: 260px; overflow-y: auto; }
.ax-layer {
    display: flex; align-items: center; gap: 7px; padding: 4px 6px;
    background: var(--ax-raise); border: 1px solid transparent; border-radius: 3px; cursor: default;
}
.ax-layer:hover { background: var(--ax-raise-hi); }
.ax-layer.is-active { background: var(--ax-accent-dim); border-color: var(--ax-accent); }
.ax-layer.is-drop-target { border-top: 2px solid var(--ax-handle); }
.ax-layer-eye { width: 18px; text-align: center; color: var(--ax-text-3); flex-shrink: 0; font-size: 12px; }
.ax-layer.is-hidden .ax-layer-name { color: var(--ax-text-3); text-decoration: line-through; }
.ax-layer-thumb { width: 26px; height: 26px; border-radius: 2px; background: var(--ax-well); border: 1px solid var(--ax-line-2); flex-shrink: 0; display: grid; place-items: center; overflow: hidden; color: var(--ax-text-3); }
.ax-layer-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ax-layer-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ax-layer-kind { font-size: 9.5px; color: var(--ax-text-3); font-family: var(--ax-mono); flex-shrink: 0; }

/* ══════════════════════════════════════════════════════════════
   ARBEITSBILDER (Filmstreifen am unteren Rand)
   ══════════════════════════════════════════════════════════════ */
.ax-filmstrip {
    height: 96px; flex-shrink: 0; background: var(--ax-panel);
    border-top: 1px solid var(--ax-line); display: flex; align-items: stretch;
}
.ax-filmstrip-head {
    width: 128px; flex-shrink: 0; padding: 8px 10px; border-right: 1px solid var(--ax-line);
    display: flex; flex-direction: column; gap: 6px; justify-content: center;
}
.ax-filmstrip-list { flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px; padding: 8px 10px; overflow-x: auto; }
.ax-filmstrip-list::-webkit-scrollbar { height: 8px; }
.ax-filmstrip-list::-webkit-scrollbar-thumb { background: var(--ax-raise-hi); border-radius: 4px; }
.ax-shot {
    width: 66px; height: 66px; flex-shrink: 0; padding: 0; overflow: hidden;
    border-radius: 3px; border: 2px solid var(--ax-line-2); background: var(--ax-well); cursor: default; position: relative;
}
.ax-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ax-shot:hover { border-color: var(--ax-line-2); filter: brightness(1.15); }
.ax-shot.is-active { border-color: var(--ax-accent); }
.ax-empty-hint { color: var(--ax-text-3); font-size: 11px; padding: 0 6px; align-self: center; }

/* ══════════════════════════════════════════════════════════════
   UEBERLAGERUNGEN
   ══════════════════════════════════════════════════════════════ */
.ax-ctx {
    position: fixed; z-index: 900; min-width: 200px; display: none;
    background: var(--ax-panel); border: 1px solid var(--ax-line-2); border-radius: 4px;
    padding: 4px; box-shadow: 0 14px 40px rgba(0, 0, 0, .6);
}
.ax-ctx.is-open { display: block; }

.ax-tip {
    position: fixed; z-index: 950; pointer-events: none; opacity: 0;
    background: #000; color: #fff; border: 1px solid var(--ax-line-2);
    border-radius: 3px; padding: 4px 8px; font-size: 11px; white-space: nowrap;
    transition: opacity .1s .35s;
}
.ax-tip.is-on { opacity: 1; }
.ax-tip .ax-key { color: var(--ax-text-3); margin-left: 6px; font-family: var(--ax-mono); }

.ax-modal-back {
    position: fixed; inset: 0; z-index: 800; background: rgba(0, 0, 0, .6);
    display: none; align-items: center; justify-content: center;
}
.ax-modal-back.is-open { display: flex; }
.ax-modal {
    background: var(--ax-panel); border: 1px solid var(--ax-line-2); border-radius: 6px;
    box-shadow: 0 30px 90px rgba(0, 0, 0, .7); width: min(460px, 94vw);
}
.ax-modal-head {
    height: 32px; display: flex; align-items: center; padding: 0 10px;
    background: var(--ax-window); border-bottom: 1px solid var(--ax-line); border-radius: 6px 6px 0 0;
    font-weight: 600;
}
.ax-modal-head button { margin-left: auto; background: none; border: 0; color: var(--ax-text-3); font-size: 17px; line-height: 1; cursor: default; }
.ax-modal-head button:hover { color: var(--ax-text); }
.ax-modal-body { padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.ax-modal-foot { padding: 10px 12px; border-top: 1px solid var(--ax-line); display: flex; justify-content: flex-end; gap: 7px; }

.ax-toast {
    position: fixed; left: 50%; bottom: 44px; transform: translate(-50%, 10px);
    z-index: 960; background: var(--ax-panel); border: 1px solid var(--ax-line-2);
    border-left: 3px solid var(--ax-accent); border-radius: 4px;
    padding: 9px 16px; font-size: 12px; opacity: 0; pointer-events: none;
    transition: opacity .15s, transform .15s; box-shadow: 0 12px 34px rgba(0, 0, 0, .6);
}
.ax-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.ax-toast.is-error { border-left-color: var(--ax-warn); }

.ax-busy {
    position: absolute; inset: 0; z-index: 400; display: none;
    align-items: center; justify-content: center; gap: 10px;
    background: rgba(11, 11, 13, .72); color: var(--ax-text-2); font-size: 12px;
}
.ax-busy.is-on { display: flex; }
.ax-spin {
    width: 15px; height: 15px; border-radius: 50%;
    border: 2px solid var(--ax-line-2); border-top-color: var(--ax-accent);
    animation: ax-spin .7s linear infinite;
}
@keyframes ax-spin { to { transform: rotate(360deg); } }

/* Analyseergebnis */
.ax-result { display: flex; flex-direction: column; gap: 7px; max-height: 300px; overflow-y: auto; }
.ax-result-item { background: var(--ax-raise); border: 1px solid var(--ax-line); border-radius: 3px; padding: 7px 8px; }
.ax-result-item b { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ax-accent); margin-bottom: 3px; }
.ax-result-item p { margin: 0; color: var(--ax-text-2); line-height: 1.55; white-space: pre-line; font-size: 11.5px; }

/* Vorlagenliste */
.ax-tpl { background: var(--ax-raise); border: 1px solid var(--ax-line); border-radius: 3px; padding: 7px 8px; display: flex; flex-direction: column; gap: 6px; }
.ax-tpl h4 { margin: 0; font-size: 12px; font-weight: 600; }
.ax-tpl p { margin: 0; font-size: 11px; color: var(--ax-text-3); }
.ax-tpl-actions { display: flex; flex-wrap: wrap; gap: 4px; }
.ax-tpl-actions button { height: 22px; padding: 0 7px; font-size: 11px; border-radius: 3px; background: var(--ax-raise-hi); border: 1px solid var(--ax-line-2); color: var(--ax-text-2); cursor: default; }
.ax-tpl-actions button:hover { color: var(--ax-text); border-color: #55555f; }
.ax-tpl.is-archived { opacity: .55; }

/* Text direkt auf der Leinwand bearbeiten */
.ax-canvas-text {
    position: absolute; z-index: 60; background: rgba(10, 10, 12, .9);
    border: 1px solid var(--ax-handle); border-radius: 2px; color: #fff;
    padding: 2px 5px; outline: 0; font-family: var(--ax-ui); resize: none; overflow: hidden;
    box-shadow: 0 0 0 1px rgba(74, 158, 255, .3), 0 8px 24px rgba(0, 0, 0, .6);
}

@media (max-width: 1100px) {
    .rp-app-root { --ax-dock: 232px; }
}

/* ══════════════════════════════════════════════════════════════
   EINBETTUNG IN DIE STUDIO-HUELLE
   Im Programmbetrieb fuellt die Anwendung die Buehne vollstaendig
   und die Modulleiste wird schmaler, damit die Arbeitsflaeche
   moeglichst gross bleibt.
   ══════════════════════════════════════════════════════════════ */
.rp-studio.is-app .rp-studio-stage { display: flex; padding: 0; }
.rp-app-root { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }

/* guardian_base setzt ein fest positioniertes Redweb-Logo auf top 21px,
   left 70px. Ohne Kopfleiste liegt es mitten auf unserer Modulleiste.
   Statt es zu entfernen wird es zum linken Zeichen der Leiste, so wie ein
   Programmsymbol in einer Titelzeile. Die eigene Rautenmarke weicht dafuer. */
body:has(.rp-studio.is-app) .back-to-redweb { top: 11px; left: 13px; z-index: 70; }
.rp-studio.is-app .rp-modulebar { height: 40px; background: #101013; padding-left: 46px; }
.rp-studio.is-app .rp-modulebar-mark { display: none; }
.rp-studio.is-app .rp-modulenav a { font-size: 12px; padding: 0 11px; }
.rp-studio.is-app .rp-modulebar-brand { font-size: 14px; }
.rp-studio.is-app .rp-modulebar-side a { padding: 5px 10px; }

/* ══════════════════════════════════════════════════════════════
   DESIGNER: Schriftauswahl und redAI-Bereich
   ══════════════════════════════════════════════════════════════ */
.ax-pill {
    height: 22px; padding: 0 11px; border-radius: 999px;
    background: var(--ax-raise); border: 1px solid var(--ax-line-2);
    color: var(--ax-text-2); cursor: default; font-size: 11px; white-space: nowrap;
}
.ax-pill:hover { color: var(--ax-text); }
.ax-pill.is-on { background: var(--ax-accent); border-color: var(--ax-accent); color: #fff; }

.ax-font-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
    gap: 7px; overflow-y: auto; padding: 12px; flex: 1; min-height: 0;
}
.ax-font-card {
    border: 1px solid var(--ax-line-2); border-radius: 4px; padding: 11px 12px;
    background: var(--ax-raise); cursor: default; display: flex; flex-direction: column; gap: 5px;
}
.ax-font-card:hover { border-color: var(--ax-accent); background: var(--ax-raise-hi); }
.ax-font-card.is-on { border-color: var(--ax-accent); background: var(--ax-accent-dim); }
.ax-font-prev { font-size: 19px; color: var(--ax-text); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ax-font-name { font-size: 10px; color: var(--ax-text-3); }

.ax-ai-zone {
    border: 1px dashed var(--ax-line-2); border-radius: 4px; padding: 9px;
    display: flex; flex-direction: column; gap: 8px; background: var(--ax-well);
}
.ax-ai-zone.is-over { border-color: var(--ax-accent); background: var(--ax-accent-dim); }
.ax-ai-ref { display: flex; align-items: center; gap: 8px; }
.ax-ai-ref img { width: 40px; height: 40px; object-fit: cover; border-radius: 3px; border: 1px solid var(--ax-line-2); flex-shrink: 0; }
.ax-ai-ref-text { flex: 1; min-width: 0; }
.ax-ai-ref-text b { display: block; font-size: 11px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ax-ai-ref-text small { font-size: 10px; color: var(--ax-text-3); }

.ax-ai-out {
    font-size: 11px; line-height: 1.55; color: var(--ax-text-2);
    background: var(--ax-raise); border-left: 2px solid var(--ax-accent);
    border-radius: 0 3px 3px 0; padding: 7px 9px;
}
.ax-ai-out.is-error { border-left-color: var(--ax-warn); color: #ffcf9a; }

.ax-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.ax-chips button {
    border: 1px solid var(--ax-line); border-radius: 999px; background: var(--ax-raise);
    color: var(--ax-text-3); font-size: 10.5px; padding: 4px 9px; cursor: default;
}
.ax-chips button:hover { color: var(--ax-text); border-color: var(--ax-line-2); }

/* Farbfelder des Kleidungsstuecks und aehnliche Reihen */
.ax-swatches { display: flex; flex-wrap: wrap; gap: 5px; }
.ax-swatches button {
    width: 22px; height: 22px; border-radius: 4px; padding: 0; cursor: default;
    border: 2px solid var(--ax-line-2); transition: transform .12s;
}
.ax-swatches button:hover { transform: scale(1.14); }
.ax-swatches button.is-on { border-color: var(--ax-accent); box-shadow: 0 0 0 2px var(--ax-accent-dim); }

.ax-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.ax-tiles button {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 8px 5px; border: 1px solid var(--ax-line-2); border-radius: 4px;
    background: var(--ax-raise); color: var(--ax-text-2); font-size: 11px; cursor: default;
}
.ax-tiles button i { font-size: 15px; }
.ax-tiles button:hover { color: var(--ax-text); background: var(--ax-raise-hi); }
.ax-tiles button.is-on { background: var(--ax-accent); border-color: var(--ax-accent); color: #fff; }

.ax-preset {
    display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
    padding: 7px 9px; border: 1px solid var(--ax-line); border-radius: 4px;
    background: var(--ax-raise); color: var(--ax-text-2); cursor: default;
}
.ax-preset:hover { border-color: var(--ax-line-2); color: var(--ax-text); }
.ax-preset.is-on { border-color: var(--ax-accent); background: var(--ax-accent-dim); color: var(--ax-text); }
.ax-preset b { display: block; font-size: 11.5px; font-weight: 600; }
.ax-preset small { display: block; font-size: 10px; color: var(--ax-text-3); }