/* Momo Tag · Farbe — Pop-Edition.
   Aufbauend auf dem hellen Grunddesign (theme-light.css bleibt für Kontrast
   und Lesbarkeit zuständig): diese Datei legt nur die farbige Pop-Schicht
   darüber — Frosted/Sandglas-Flächen, Cyan/Magenta/Violett/Orange/Rot,
   fröhlich, grafisch. Wirkt nur mit data-color="pop" auf <html>.
   Alle Textfarben bleiben unangetastet, damit es keine Kontrastfehler gibt. */
:root[data-color="pop"]{
  --pop-cyan:#00c2ff;
  --pop-magenta:#ff3ea5;
  --pop-violet:#8b5cf6;
  --pop-orange:#ff8a00;
  --pop-red:#ff4d4d;
  --pop-lime:#a8e820;
  --pop-glass:rgba(255,255,255,.62);
  --pop-glass-line:rgba(139,92,246,.22);
}

/* Hintergrund: weiss mit weichen farbigen Lichtkegeln — wie das Vorbild */
html[data-color="pop"] body{
  background:
    radial-gradient(60vw 42vh at 88% -6%, rgba(0,194,255,.16), transparent 60%),
    radial-gradient(52vw 40vh at -8% 22%, rgba(255,62,165,.13), transparent 62%),
    radial-gradient(48vw 44vh at 55% 108%, rgba(139,92,246,.15), transparent 60%),
    radial-gradient(30vw 26vh at 18% 96%, rgba(255,138,0,.10), transparent 65%),
    #f7f6fc;
}

/* Markenname und Seitentitel als Pop-Verlauf */
:root[data-color="pop"] .page-title strong,
:root[data-color="pop"] .sidebar-brand-identity strong,
:root[data-color="pop"] .momo-loading-logo{
  background:linear-gradient(92deg,var(--pop-violet) 0%,var(--pop-magenta) 38%,var(--pop-orange) 72%,var(--pop-red) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

/* Seitenleiste: Glas, aktiver Punkt farbig unterlegt */
:root[data-color="pop"] .sidebar{
  background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.55));
  backdrop-filter:blur(18px) saturate(1.25);
  -webkit-backdrop-filter:blur(18px) saturate(1.25);
}
:root[data-color="pop"] .sidebar-action.active{
  background:linear-gradient(90deg,rgba(0,194,255,.16),rgba(139,92,246,.16) 55%,rgba(255,62,165,.14));
  box-shadow:inset 3px 0 0 var(--pop-magenta);
  border-radius:12px;
}

/* Eingabebereich: Sandglas-Karte mit Regenbogen-Haarlinie */
:root[data-color="pop"] .composer{
  background:var(--pop-glass);
  backdrop-filter:blur(20px) saturate(1.3);
  -webkit-backdrop-filter:blur(20px) saturate(1.3);
  border:1px solid transparent;
  background-clip:padding-box;
  box-shadow:0 10px 34px rgba(139,92,246,.14);
  position:relative;
}
:root[data-color="pop"] .composer::before{
  content:"";
  position:absolute;inset:-1px;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(120deg,var(--pop-cyan),var(--pop-violet),var(--pop-magenta),var(--pop-orange));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;
}

/* Senden-Knopf: kräftiger Pop-Verlauf, weisse Schrift bleibt lesbar */
:root[data-color="pop"] .send{
  background:linear-gradient(135deg,var(--pop-magenta),var(--pop-violet) 55%,var(--pop-cyan));
  color:#fff;
  box-shadow:0 6px 18px rgba(255,62,165,.35);
}
:root[data-color="pop"] .send:hover{filter:saturate(1.15) brightness(1.04)}

/* Karten und Chips: Glas mit farbigem Rand statt grau */
:root[data-color="pop"] .momo-network-card,
:root[data-color="pop"] .momo-store-card,
:root[data-color="pop"] .settings-card,
:root[data-color="pop"] .ms-karte-kern{
  background:rgba(255,255,255,.66);
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-color:var(--pop-glass-line);
}
:root[data-color="pop"] .momo-network-local-badge,
:root[data-color="pop"] .rail-account-avatar{
  background:linear-gradient(135deg,var(--pop-cyan),var(--pop-violet) 60%,var(--pop-magenta));
  color:#fff;border-color:transparent;
}

/* Akzente in Magenta/Violett statt Grau */
:root[data-color="pop"] ::selection{background:rgba(139,92,246,.25);color:#14161a}
:root[data-color="pop"] a{color:#7c3aed}
:root[data-color="pop"] *{scrollbar-color:rgba(139,92,246,.32) transparent}
:root[data-color="pop"] ::-webkit-scrollbar-thumb{background:rgba(139,92,246,.30);border-radius:8px}

/* Ladebildschirm im Pop-Look */
html[data-color="pop"] .momo-loading-screen{
  background:
    radial-gradient(60vw 42vh at 88% -6%, rgba(0,194,255,.16), transparent 60%),
    radial-gradient(52vw 40vh at -8% 22%, rgba(255,62,165,.13), transparent 62%),
    #f7f6fc;
  color:#14161a;
}

/* ==================================================================
   Flächen-Serie — Pop-Edition überall: Frosted Glass + Farbsäume.
   Alles bleibt weiss/hell, nur Ränder, Schatten und Hover tragen Farbe —
   so bleibt der Kontrast erhalten und es wird trotzdem deutlich bunter. */

/* Hintergrund kräftiger: mehr, grössere Farbkegel (Cyan/Magenta/Violett/Orange) */
html[data-color="pop"] body{
  background:
    radial-gradient(70vw 50vh at 92% -8%, rgba(0,194,255,.24), transparent 62%),
    radial-gradient(58vw 46vh at -10% 18%, rgba(255,62,165,.20), transparent 64%),
    radial-gradient(52vw 48vh at 58% 110%, rgba(139,92,246,.22), transparent 62%),
    radial-gradient(34vw 30vh at 14% 98%, rgba(255,138,0,.16), transparent 66%),
    radial-gradient(26vw 24vh at 78% 70%, rgba(255,77,77,.10), transparent 70%),
    #f7f6fc;
}

/* Topbar: weisses Glas mit farbigem Rand */
:root[data-color="pop"] .topbar{
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(18px) saturate(1.3);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);
  border-bottom-color:var(--pop-glass-line);
}

/* Jede Ansichtsfläche trägt Farbkegel — so ist Pop im ganzen Fenster
   sichtbar, nicht nur am Rand des Body-Hintergrunds */
:root[data-color="pop"] .view{
  background:
    radial-gradient(48vw 36vh at 100% 0%, rgba(0,194,255,.14), transparent 62%),
    radial-gradient(42vw 34vh at 0% 28%, rgba(255,62,165,.12), transparent 64%),
    radial-gradient(40vw 34vh at 72% 104%, rgba(139,92,246,.14), transparent 62%),
    radial-gradient(30vw 24vh at 20% 78%, rgba(255,138,0,.08), transparent 66%);
}

/* Sektions-Eyebrows im Pop-Verlauf (kurze Grossbuchstaben — gut lesbar) */
:root[data-color="pop"] .eyebrow{
  background:linear-gradient(92deg,#0891b2 0%,var(--pop-violet) 45%,var(--pop-magenta) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  font-weight:700;
}

/* Avatar: farbiger Ring statt Grau */
:root[data-color="pop"] .avatar{
  border-color:rgba(139,92,246,.35);
  background:linear-gradient(160deg,#fff,#f2effc);
  color:#7c3aed;
}
:root[data-color="pop"] .message.ai .avatar{
  border-color:transparent;
  background:linear-gradient(135deg,var(--pop-cyan),var(--pop-violet) 60%,var(--pop-magenta));
  color:#fff;
  box-shadow:0 4px 14px rgba(139,92,246,.30);
}

/* Rundknöpfe: weisses Glas, farbiger Rand, farbiger Hover */
:root[data-color="pop"] .round-btn{
  background:rgba(255,255,255,.74);
  border-color:rgba(139,92,246,.28);
  backdrop-filter:blur(10px) saturate(1.2);
  -webkit-backdrop-filter:blur(10px) saturate(1.2);
}
:root[data-color="pop"] .round-btn:hover{
  border-color:var(--pop-magenta);
  color:#7c3aed;
  box-shadow:0 4px 14px rgba(255,62,165,.18);
}

/* Aktionsknöpfe: Glas mit Farbsaum; Primary = Pop-Verlauf */
:root[data-color="pop"] .action-btn{
  background:rgba(255,255,255,.76);
  border-color:var(--pop-glass-line);
  backdrop-filter:blur(10px) saturate(1.2);
  -webkit-backdrop-filter:blur(10px) saturate(1.2);
}
:root[data-color="pop"] .action-btn:hover{border-color:var(--pop-violet);color:#6d28d9}
:root[data-color="pop"] .action-btn.white{
  background:linear-gradient(135deg,var(--pop-cyan),var(--pop-violet) 55%,var(--pop-magenta));
  border-color:transparent;color:#fff;
  box-shadow:0 6px 18px rgba(139,92,246,.32);
}
:root[data-color="pop"] .action-btn.danger{color:#e0245e;border-color:rgba(255,62,165,.4)}

/* Rechtes Zeitpanel, Coding-Panes, Panel-Views: Frosted Glass mit Farbsaum */
:root[data-color="pop"] .artifact-panel,
:root[data-color="pop"] .artifact-pane,
:root[data-color="pop"] .panel-view,
:root[data-color="pop"] .coding-files-pane,
:root[data-color="pop"] .coding-editor-pane,
:root[data-color="pop"] .coding-output-pane,
:root[data-color="pop"] .coding-output-toolbar{
  background:rgba(255,255,255,.60);
  backdrop-filter:blur(16px) saturate(1.25);
  -webkit-backdrop-filter:blur(16px) saturate(1.25);
  border-color:var(--pop-glass-line);
}

/* Codeblöcke: helles Violett-Glas */
:root[data-color="pop"] .code-block,
:root[data-color="pop"] .code-head{
  background:rgba(139,92,246,.07);
  border-color:rgba(139,92,246,.20);
}

/* Popups & Dialoge: helles Glas, Regenbogen-Schatten */
:root[data-color="pop"] .modal,
:root[data-color="pop"] .dialog,
:root[data-color="pop"] .sidebar-account-popover{
  background:rgba(255,255,255,.84);
  backdrop-filter:blur(24px) saturate(1.35);
  -webkit-backdrop-filter:blur(24px) saturate(1.35);
  border-color:var(--pop-glass-line);
  box-shadow:0 26px 70px rgba(139,92,246,.22);
}
:root[data-color="pop"] .modal-backdrop,
:root[data-color="pop"] .dialog-backdrop{
  background:rgba(247,246,252,.45);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}

/* Toast: Cyan-Glas */
:root[data-color="pop"] .toast{
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(16px) saturate(1.3);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);
  border:1px solid rgba(0,194,255,.40);
  color:#14161a;
  box-shadow:0 12px 32px rgba(0,194,255,.18);
}

/* Plugin-Karten & Badges farbig absetzen */
:root[data-color="pop"] .momo-plugin-card{
  background:rgba(255,255,255,.66);
  backdrop-filter:blur(12px) saturate(1.2);
  -webkit-backdrop-filter:blur(12px) saturate(1.2);
  border-color:var(--pop-glass-line);
}
:root[data-color="pop"] .momo-plugin-badge.an{
  background:linear-gradient(135deg,var(--pop-cyan),var(--pop-violet));
  color:#fff;border-color:transparent;
}

/* Store-Buttons im Pop-Look: Primary = Regenbogen-Verlauf, Glasrand */
:root[data-color="pop"] .momo-store-card form button{
  background:rgba(255,255,255,.74);
  border-color:var(--pop-glass-line);
  backdrop-filter:blur(10px) saturate(1.2);
  -webkit-backdrop-filter:blur(10px) saturate(1.2);
}
:root[data-color="pop"] .momo-store-card form button:hover{border-color:var(--pop-violet);color:#6d28d9}
:root[data-color="pop"] .momo-store-card form button.primary{
  background:linear-gradient(135deg,var(--pop-cyan),var(--pop-violet) 55%,var(--pop-magenta));
  border-color:transparent;color:#fff;
  box-shadow:0 6px 18px rgba(139,92,246,.30);
}

/* Fokus-Ringe in Violett statt Browser-Grau */
:root[data-color="pop"] button:focus-visible,
:root[data-color="pop"] input:focus-visible,
:root[data-color="pop"] textarea:focus-visible{
  outline:2px solid rgba(139,92,246,.45);
  outline-offset:1px;
}

/* ==================================================================
   Pop-Rand-Serie — duenner farbiger Regenbogen-Saum (Cyan → Violett →
   Magenta → Orange → Rot) an Karten, Popups, Panels, Buttons,
   Eingabefeldern und Menue — die Pop-Entsprechung der Metall-Iris-
   Serie. Sicherheitsregeln aus dem Metall-Patch:
   - KEIN position an .sidebar (unter 720px fixed), .sidebar-account-
     popover (absolute ueber dem Dock verankert), .momo-device-pop
     (absolute) — dort trägt nur ::before, absolute/fixed ist bereits
     ein Containing Block.
   - .artifact-pane & .code-block haben overflow:hidden → aeusserer
     ::before-Ring wuerde beschnitten → stattdessen Regenbogen-inset.
   - .send & .composer tragen bereits den vollen Pop-Verlauf. */

/* --- 1) Karten & Buttons: Ring via ::before (Masken-Trick) --- */
:root[data-color="pop"] .settings-card,
:root[data-color="pop"] .momo-store-card,
:root[data-color="pop"] .ms-karte-kern,
:root[data-color="pop"] .momo-network-card,
:root[data-color="pop"] .momo-plugin-card,
:root[data-color="pop"] .coding-files-pane,
:root[data-color="pop"] .coding-editor-pane,
:root[data-color="pop"] .coding-output-pane,
:root[data-color="pop"] .coding-output-toolbar,
:root[data-color="pop"] .momo-device-modal-box,
:root[data-color="pop"] .momo-device-modal-actions button,
:root[data-color="pop"] .momo-store-card form button,
:root[data-color="pop"] .action-btn:not(.danger):not(.danger-solid),
:root[data-color="pop"] .round-btn,
:root[data-color="pop"] .momo-device-btn,
:root[data-color="pop"] .momo-dict-btn:not(.is-an),
:root[data-color="pop"] .momo-store-tabs button,
:root[data-color="pop"] .momo-store-plus,
:root[data-color="pop"] .momo-store-actions button,
:root[data-color="pop"] .momo-switch-actions button,
:root[data-color="pop"] .rail-btn{
  position:relative;
}

/* .modal/.dialog sind basisseitig unpositioniert → relative nötig */
:root[data-color="pop"] .modal,
:root[data-color="pop"] .dialog{
  position:relative;
}

:root[data-color="pop"] .settings-card::before,
:root[data-color="pop"] .momo-store-card::before,
:root[data-color="pop"] .ms-karte-kern::before,
:root[data-color="pop"] .momo-network-card::before,
:root[data-color="pop"] .momo-plugin-card::before,
:root[data-color="pop"] .coding-files-pane::before,
:root[data-color="pop"] .coding-editor-pane::before,
:root[data-color="pop"] .coding-output-pane::before,
:root[data-color="pop"] .coding-output-toolbar::before,
:root[data-color="pop"] .modal::before,
:root[data-color="pop"] .dialog::before,
:root[data-color="pop"] .sidebar-account-popover::before,
:root[data-color="pop"] .momo-device-pop::before,
:root[data-color="pop"] .momo-device-modal-box::before,
:root[data-color="pop"] .chat-context-menu::before,
:root[data-color="pop"] .chat-project-submenu::before,
:root[data-color="pop"] .artifact-panel::before,
:root[data-color="pop"] .momo-device-modal-actions button::before,
:root[data-color="pop"] .momo-store-card form button::before,
:root[data-color="pop"] .action-btn:not(.danger):not(.danger-solid)::before,
:root[data-color="pop"] .round-btn::before,
:root[data-color="pop"] .momo-device-btn::before,
:root[data-color="pop"] .momo-dict-btn:not(.is-an)::before,
:root[data-color="pop"] .momo-store-tabs button::before,
:root[data-color="pop"] .momo-store-plus::before,
:root[data-color="pop"] .momo-store-actions button::before,
:root[data-color="pop"] .momo-switch-actions button::before,
:root[data-color="pop"] .rail-btn::before{
  content:"";
  position:absolute;inset:-1px;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(120deg,rgba(0,194,255,.55),rgba(139,92,246,.45) 30%,rgba(255,62,165,.50) 55%,rgba(255,138,0,.45) 78%,rgba(255,77,77,.40));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;
  opacity:.9;
  transition:opacity .2s ease;
}

/* Hover: Saum wird kräftiger */
:root[data-color="pop"] .settings-card:hover::before,
:root[data-color="pop"] .momo-store-card:hover::before,
:root[data-color="pop"] .ms-karte-kern:hover::before,
:root[data-color="pop"] .momo-network-card:hover::before,
:root[data-color="pop"] .momo-plugin-card:hover::before,
:root[data-color="pop"] .modal:hover::before,
:root[data-color="pop"] .dialog:hover::before,
:root[data-color="pop"] .momo-device-modal-actions button:hover::before,
:root[data-color="pop"] .momo-store-card form button:hover::before,
:root[data-color="pop"] .action-btn:not(.danger):not(.danger-solid):hover::before,
:root[data-color="pop"] .round-btn:hover::before,
:root[data-color="pop"] .momo-device-btn:hover::before,
:root[data-color="pop"] .momo-dict-btn:not(.is-an):hover::before,
:root[data-color="pop"] .momo-store-tabs button:hover::before,
:root[data-color="pop"] .momo-store-plus:hover::before,
:root[data-color="pop"] .momo-store-actions button:hover::before,
:root[data-color="pop"] .momo-switch-actions button:hover::before,
:root[data-color="pop"] .rail-btn:hover::before,
:root[data-color="pop"] .rail-btn.active::before{
  opacity:1;
  background:linear-gradient(120deg,rgba(0,194,255,.8),rgba(139,92,246,.65) 30%,rgba(255,62,165,.75) 55%,rgba(255,138,0,.7) 78%,rgba(255,77,77,.6));
}

/* --- 2) Seitenleiste: Saum als zwei Ton-inset (kein position) --- */
:root[data-color="pop"] .sidebar{
  box-shadow:inset -1px 0 0 rgba(139,92,246,.30),inset -2px 0 0 rgba(0,194,255,.14);
}

/* Menüeinträge: dezenter Regenbogen-Saum nur beim Hover / aktiv */
:root[data-color="pop"] .sidebar-action{position:relative}
:root[data-color="pop"] .sidebar-action::before{
  content:"";
  position:absolute;inset:0;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(120deg,rgba(0,194,255,.7),rgba(139,92,246,.55) 40%,rgba(255,62,165,.6));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;
  opacity:0;
  transition:opacity .18s ease;
}
:root[data-color="pop"] .sidebar-action:hover::before,
:root[data-color="pop"] .sidebar-action.active::before{opacity:.9}

/* --- 3) Panels mit overflow:hidden: Regenbogen-inset statt aeusserem Ring --- */
:root[data-color="pop"] .artifact-pane,
:root[data-color="pop"] .code-block{
  box-shadow:
    inset 0 1px 0 rgba(0,194,255,.30),
    inset 1px 0 0 rgba(139,92,246,.22),
    inset -1px 0 0 rgba(255,138,0,.22),
    inset 0 -1px 0 rgba(255,62,165,.28);
}

/* --- 4) Eingabefelder: Border-Box-Trick mit hellem Fuellung --- */
:root[data-color="pop"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="button"]):not([type="submit"]):not([type="file"]),
:root[data-color="pop"] textarea,
:root[data-color="pop"] select{
  background:
    linear-gradient(rgba(255,255,255,.88),rgba(255,255,255,.82)) padding-box,
    linear-gradient(120deg,rgba(0,194,255,.55),rgba(139,92,246,.45) 30%,rgba(255,62,165,.50) 55%,rgba(255,138,0,.45) 78%,rgba(255,77,77,.40)) border-box;
  border:1px solid transparent;
}

/* Composer-Textarea bleibt gläsern-transparent (der Composer trägt selbst den Saum) */
:root[data-color="pop"] .composer textarea{
  background:transparent;
  border:none;
}

/* Fokus: Saum hellt sich auf */
:root[data-color="pop"] input:focus,
:root[data-color="pop"] textarea:focus,
:root[data-color="pop"] select:focus{
  background:
    linear-gradient(rgba(255,255,255,.96),rgba(255,255,255,.92)) padding-box,
    linear-gradient(120deg,rgba(0,194,255,.85),rgba(139,92,246,.7) 30%,rgba(255,62,165,.8) 55%,rgba(255,138,0,.75) 78%,rgba(255,77,77,.65)) border-box;
}