/* ============================================================
   GFP HOME — Dashboard styles
   Alles Sichtbare wird aus der per-User Config gerendert; das
   Layout reagiert auf CSS-Variablen, die dashboard.js setzt.
   ============================================================ */

:root{
  /* Native Controls (Color-Picker, Dropdowns, Scrollbars) im Dark-Mode rendern
     statt im hellen Default. Vererbt sich auf alle Form-Elemente. */
  color-scheme: dark;

  /* Theme (von Config gesetzt) */
  --bg:        #090b0f;
  --ink:       #e8eaef;
  --muted:     #888d99;
  --faint:     #50545f;
  --line:      rgba(255,255,255,.07);
  --card:      rgba(255,255,255,.024);
  --card-hi:   rgba(255,255,255,.05);
  --accent:    #dfff00;
  --ok:        #4fe08a;
  --down:      #f06a86;

  --font-stack: "Geist", system-ui, -apple-system, sans-serif;
  --font-scale: 1;

  /* Layout (von Config gesetzt) */
  --radius:        18px;
  --card-min-h:    158px;
  --card-pad-y:    36px;
  --card-gap-inner:16px;
  --icon-size:     34px;
  --name-size:     14.5px;
  --grid-gap:      16px;

  /* Hintergrund (von Config gesetzt) */
  --page-bg:    #090b0f;
  --g1c:        #1d4a63;
  --g2c:        #3a2a66;
  --g3c:        #123b3b;
  --glow-intensity: .45;
  --img-url:    none;
  --img-dim:    .55;
  --img-blur:   0px;
}

*{ box-sizing:border-box; margin:0; padding:0; }

body{
  font-family:var(--font-stack);
  font-size:calc(16px * var(--font-scale));
  background:var(--page-bg); color:var(--ink); min-height:100vh;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

/* ---- Hintergrund: Layer ---- */
.bg{ position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
.bg .dots{
  position:absolute; inset:-2px;
  background-image:radial-gradient(circle, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:26px 26px;
  -webkit-mask:radial-gradient(ellipse 75% 65% at 50% 38%, #000 30%, transparent 78%);
          mask:radial-gradient(ellipse 75% 65% at 50% 38%, #000 30%, transparent 78%);
}
.bg .glow{ position:absolute; border-radius:50%; filter:blur(120px); opacity:var(--glow-intensity); }
.bg .g1{ width:46vw; height:46vw; left:2vw; top:-12vh;  background:radial-gradient(circle,var(--g1c),transparent 70%); animation:drift1 38s ease-in-out infinite; }
.bg .g2{ width:42vw; height:42vw; right:0;  top:6vh;     background:radial-gradient(circle,var(--g2c),transparent 70%); animation:drift2 44s ease-in-out infinite; }
.bg .g3{ width:40vw; height:40vw; left:34vw; bottom:-18vh; background:radial-gradient(circle,var(--g3c),transparent 70%); animation:drift3 50s ease-in-out infinite; }
.bg .bg-image{
  position:absolute; inset:0; display:none;
  background-image:var(--img-url); background-size:cover; background-position:center;
  filter:blur(var(--img-blur));
}
.bg .bg-image::after{ content:""; position:absolute; inset:0; background:rgba(0,0,0,var(--img-dim)); }
.bg .bg-vignette{
  position:absolute; inset:0;
  background:radial-gradient(135% 95% at 50% -8%, transparent 42%, rgba(0,0,0,.6));
}

/* Hintergrund-Modi */
body.bg-solid .glow, body.bg-gradient .glow, body.bg-image .glow{ display:none; }
body.bg-image .dots{ opacity:.5; }
body.bg-image .bg-image{ display:block; }
body.no-dots .dots{ display:none; }
body.no-vignette .bg-vignette{ display:none; }

@keyframes drift1{ 0%,100%{transform:translate(0,0) scale(1)}     50%{transform:translate(5vw,4vh) scale(1.12)} }
@keyframes drift2{ 0%,100%{transform:translate(0,0) scale(1.05)}  50%{transform:translate(-4vw,6vh) scale(.92)} }
@keyframes drift3{ 0%,100%{transform:translate(0,0) scale(1)}     50%{transform:translate(-3vw,-5vh) scale(1.1)} }

.wrap{ max-width:900px; margin:0 auto; padding:clamp(52px,12vh,128px) 24px 64px; }
/* Editor offen: rechts Platz fuer die Leiste reservieren; der Inhalt bleibt
   gleich gross (kein Reflow) und bleibt im sichtbaren Bereich zentriert. */
body{ transition:padding .28s cubic-bezier(.2,.7,.2,1); }
body.editor-open{ padding-right:min(390px, 42vw); }

/* ---- Shoo session / Auth ---- */
.auth-shell{
  position:fixed; top:18px; right:18px; z-index:24;
  display:flex; align-items:center; gap:10px;
}
.auth-button,
.auth-chip,
.icon-button,
.session-action{
  appearance:none; border:1px solid var(--line); background:rgba(255,255,255,.035); color:var(--ink);
  font-family:var(--font-stack); cursor:pointer;
  transition:background .18s ease, border-color .18s ease, color .18s ease;
}
.auth-button{
  height:40px; max-height:40px; padding:0 12px; border-radius:8px;
  display:flex; align-items:center; gap:10px; font-size:13px; font-weight:500;
  line-height:1; white-space:nowrap;
  opacity:0; transform:translateY(-8px); animation:rise .55s .18s ease forwards;
}
.icon-button{
  width:40px; height:40px; flex:0 0 40px; border-radius:8px;
  display:grid; place-items:center; padding:0;
  opacity:0; transform:translateY(-8px); animation:rise .55s .2s ease forwards;
}
.icon-button svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; color:var(--muted); transition:color .18s ease; }
.icon-button:hover svg, .icon-button.active svg{ color:var(--accent); }
.icon-button.active{ border-color:color-mix(in srgb,var(--accent) 50%, var(--line)); background:color-mix(in srgb,var(--accent) 10%, transparent); }
.auth-button:hover,
.auth-button:focus-visible,
.auth-chip:hover,
.auth-chip:focus-visible,
.icon-button:hover,
.icon-button:focus-visible,
.session-action:hover,
.session-action:focus-visible{
  background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.18); outline:none;
}
.google-logo{
  width:18px; height:18px; flex:0 0 18px; display:block;
  background:url("/assets/google-logo.png") center / 18px 18px no-repeat;
}
.auth-chip{
  min-height:40px; max-width:190px; padding:5px 11px 5px 7px; border-radius:8px;
  display:flex; align-items:center; gap:9px; font-size:13px; font-weight:500;
  opacity:0; transform:translateY(-8px); animation:rise .55s .18s ease forwards;
}
.auth-chip[hidden],
.auth-button[hidden],
.icon-button[hidden],
.session-overlay[hidden],
.editor[hidden],
.session-avatar-img[hidden],
.session-avatar-fallback[hidden]{ display:none; }
.chip-avatar{
  width:28px; height:28px; border-radius:6px; object-fit:cover; background:rgba(255,255,255,.08);
  flex:0 0 auto;
}
.chip-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.session-overlay{
  position:fixed; inset:0; z-index:40; padding:26px;
  display:grid; place-items:center; background:rgba(0,0,0,.62);
}
.session-panel{
  position:relative; width:min(860px,100%); max-height:min(760px,calc(100vh - 52px)); overflow:auto;
  background:#07090c; border:1px solid rgba(255,255,255,.14); border-radius:8px;
  padding:38px 40px 34px;
}
.session-close{
  position:absolute; top:14px; right:14px; width:34px; height:34px; border-radius:7px;
  border:1px solid var(--line); background:rgba(255,255,255,.03); color:var(--muted);
  font-size:22px; line-height:1; cursor:pointer;
}
.session-close:hover,
.session-close:focus-visible{ color:var(--ink); border-color:rgba(255,255,255,.18); outline:none; }
.session-title{
  font-size:clamp(26px,4.5vw,40px); line-height:1.12; font-weight:600;
  letter-spacing:.16em; color:var(--ink);
}
.session-title span{ color:var(--faint); font-weight:400; }
.session-title-line{
  position:relative; width:210px; max-width:62vw; height:2px; margin:16px 0 28px; border-radius:2px;
  background:linear-gradient(90deg,rgba(255,255,255,.28),transparent);
}
.session-box{
  margin-top:18px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.018);
  display:grid; grid-template-columns:72px 1fr; gap:20px; padding:20px;
}
.session-avatar-img,
.session-avatar-fallback{
  width:72px; height:72px; border-radius:4px; object-fit:cover; background:#102017;
}
.session-avatar-fallback{
  display:grid; place-items:center; color:var(--accent); font-size:28px; font-weight:700;
}
.session-fields{ display:grid; grid-template-columns:92px minmax(0,1fr); row-gap:12px; column-gap:18px; align-content:center; }
.field-label{
  color:#777b84; font-family:"Geist Mono", ui-monospace, monospace;
  font-size:11px; text-transform:uppercase; font-weight:600;
}
.field-value{
  min-width:0; color:#f3f4f7; font-family:"Geist Mono", ui-monospace, monospace;
  font-size:13px; overflow-wrap:anywhere;
}
.field-value.secret{
  display:inline; justify-self:start; width:fit-content; max-width:100%;
  padding:0 2px; filter:blur(6px); color:var(--accent); background:color-mix(in srgb,var(--accent) 10%, transparent);
  transition:filter .16s ease, background .16s ease;
}
.field-value.secret:hover,
.field-value.secret:focus{ filter:none; background:color-mix(in srgb,var(--accent) 16%, transparent); outline:none; }
.session-actions{
  margin-top:22px; display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.session-action{
  height:44px; padding:0 18px; border-radius:4px;
  font-family:"Geist Mono", ui-monospace, monospace; font-size:12px; font-weight:700;
}
.session-action.danger{ color:#ff6b6b; border-color:rgba(255,107,107,.32); }
.session-note{
  min-height:16px; margin-top:14px; color:var(--muted);
  font-family:"Geist Mono", ui-monospace, monospace; font-size:11.5px;
}

/* ---- Kopf ---- */
header{ text-align:center; margin-bottom:clamp(46px,8vh,84px); }
header:empty{ margin-bottom:0; }
.mark{
  font-size:clamp(26px,4.5vw,40px); font-weight:600; letter-spacing:.16em;
  opacity:0; animation:rise .7s .05s ease forwards;
}
.mark span{ color:var(--faint); font-weight:400; }
.mark-line{
  position:relative; width:200px; max-width:62vw; height:2px; margin:16px auto 0; border-radius:2px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
  opacity:0; animation:rise .7s .15s ease forwards;
}
.mark-line::after{ /* farbiger Punkt folgt der Cursor-X-Position beim Card-Hover */
  content:""; position:absolute; inset:-1px; border-radius:inherit;
  background:radial-gradient(56px 5px at var(--lx,50%) 50%, var(--lc,#fff), transparent 72%);
  filter:drop-shadow(0 0 6px var(--lc,#fff));
  opacity:var(--lo,0); transition:opacity .4s ease;
}
.clock{
  margin-top:18px; font-family:"Geist Mono", ui-monospace, monospace;
  font-size:12.5px; color:var(--muted); letter-spacing:.05em; font-variant-numeric:tabular-nums;
  opacity:0; animation:rise .7s .25s ease forwards;
}
.greeting{
  margin-top:9px; font-size:12.5px; color:var(--muted); font-weight:500;
  opacity:0; animation:rise .55s .32s ease forwards;
}

/* ---- Widgets (Uhr / Datum / Wetter / Text) ---- */
.widgets{ display:flex; align-items:flex-start; gap:18px; }
.widgets:empty{ display:none; }
#widgets-top{ margin-bottom:26px; }
#widgets-bottom{ margin-top:30px; }
/* Drei Zonen-Spalten: links / mitte / rechts in DERSELBEN Zeile. */
.wz{ display:flex; flex-direction:column; gap:14px; flex:1 1 0; min-width:0; }
.wz-left{ align-items:flex-start; text-align:left; }
.wz-center{ align-items:center; text-align:center; }
.wz-right{ align-items:flex-end; text-align:right; }
/* Leere Zonen bleiben als unsichtbare Platzhalter erhalten, damit die drei
   Drittel (links/mitte/rechts) stabil bleiben und das Center-Widget wirklich
   zentriert ist, auch wenn nur eine weitere Zone belegt ist. */
.widget{
  max-width:100%;
  opacity:0; transform:translateY(10px); animation:rise .55s .2s ease forwards;
}
.widget-bigclock{ font-family:"Geist Mono", ui-monospace, monospace; font-weight:500; letter-spacing:.04em; font-variant-numeric:tabular-nums; color:var(--ink); line-height:1; }
.widget-date{ font-weight:500; color:var(--ink); line-height:1.1; }
.widget-text{ color:var(--ink); line-height:1.45; white-space:pre-wrap; overflow-wrap:anywhere; }
.widget-weather{ display:inline-flex; align-items:center; gap:12px; color:var(--ink); }
.widget-weather .wx-temp{ font-weight:600; font-variant-numeric:tabular-nums; }
.widget-weather .wx-meta{ font-size:.5em; color:var(--muted); line-height:1.3; text-align:left; }
.widget-weather svg{ width:1.1em; height:1.1em; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }

/* ---- Raster ---- */
.grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:var(--grid-gap); }
.grid.layout-cols-2{ grid-template-columns:repeat(2,1fr); }
.grid.layout-cols-3{ grid-template-columns:repeat(3,1fr); }
.grid.layout-cols-4{ grid-template-columns:repeat(4,1fr); }
.grid.layout-list{ grid-template-columns:1fr; }
.grid.locked{ grid-template-columns:1fr; }
.gate-message{
  min-height:158px; display:grid; place-items:center; text-align:center;
  color:var(--muted); font-size:14px; font-weight:500;
  opacity:0; transform:translateY(10px); animation:rise .55s .34s ease forwards;
}

/* ---- Kachel ---- */
.card{
  --c:var(--muted); --mx:50%; --my:50%;
  position:relative; isolation:isolate; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--card-gap-inner);
  text-decoration:none; color:inherit; padding:var(--card-pad-y) 20px; min-height:var(--card-min-h);
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  transition:transform .3s cubic-bezier(.2,.7,.2,1), border-color .3s, background .3s, box-shadow .3s;
  opacity:0; transform:translateY(14px); animation:rise .55s ease forwards;
}
.card.span-2{ grid-column:span 2; }
.card.span-3{ grid-column:span 3; }
.card.span-4{ grid-column:span 4; }
.card::before{ /* Spotlight folgt dem Cursor */
  content:""; position:absolute; inset:0; z-index:0; opacity:0; transition:opacity .35s;
  background:radial-gradient(220px circle at var(--mx) var(--my), color-mix(in srgb,var(--c) 24%, transparent), transparent 62%);
}
.card > *{ position:relative; z-index:1; }
.card:hover, .card:focus-visible{
  transform:translateY(-5px); background:var(--card-hi); outline:none;
  border-color:color-mix(in srgb,var(--c) 55%, var(--line));
  box-shadow:0 16px 44px -20px color-mix(in srgb,var(--c) 60%, transparent);
}
.card:hover::before, .card:focus-visible::before{ opacity:1; }
.grid.no-spotlight .card::before{ display:none; }

/* Card-Stile */
.grid.style-solid .card{ background:rgba(255,255,255,.06); }
.grid.style-solid .card:hover{ background:rgba(255,255,255,.09); }
.grid.style-outline .card{ background:transparent; border-color:color-mix(in srgb,var(--c) 40%, var(--line)); }
.grid.style-outline .card:hover{ background:color-mix(in srgb,var(--c) 8%, transparent); }
.grid.style-minimal .card{ background:rgba(255,255,255,.02); border-color:transparent; }
.grid.style-minimal .card:hover{ background:rgba(255,255,255,.05); box-shadow:none; }

/* Listen-Layout: Icon links, Name rechts */
.grid.layout-list .card{
  flex-direction:row; justify-content:flex-start; gap:18px;
  min-height:auto; padding:16px 20px;
}
.grid.layout-list .card.span-2,
.grid.layout-list .card.span-3,
.grid.layout-list .card.span-4{ grid-column:span 1; }
.grid.layout-list .ic{ flex:0 0 auto; }

.idx{ position:absolute; top:14px; left:16px; z-index:1;
  font-family:"Geist Mono",monospace; font-size:11px; color:var(--faint);
  opacity:0; transition:opacity .3s, color .3s; }
.card:hover .idx, .card:focus-visible .idx{ opacity:1; color:color-mix(in srgb,var(--c) 75%, var(--muted)); }
.grid.no-index .idx{ display:none; }

.dot{ position:absolute; top:15px; right:15px; z-index:1; width:7px; height:7px; border-radius:50%; background:var(--faint); }
.dot.checking{ animation:pulse 1.3s ease-in-out infinite; }
.dot.on{ background:var(--ok); box-shadow:0 0 8px color-mix(in srgb,var(--ok) 60%, transparent); }
.dot.off{ background:var(--down); box-shadow:0 0 7px color-mix(in srgb,var(--down) 55%,transparent); }
.grid.no-dot .dot{ display:none; }

.ic{ color:var(--c); transition:transform .3s cubic-bezier(.2,.7,.2,1), filter .3s; }
.card:hover .ic, .card:focus-visible .ic{ transform:scale(1.12);
  filter:drop-shadow(0 0 12px color-mix(in srgb,var(--c) 55%, transparent)); }
.ic svg{ width:var(--icon-size); height:var(--icon-size); fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; display:block; }

.name{ font-size:var(--name-size); font-weight:500; letter-spacing:.01em; }

/* ---- Fuß ---- */
footer{ margin-top:48px; text-align:center; opacity:0; animation:rise .7s .6s ease forwards; }
.links{ display:flex; gap:6px; justify-content:center; align-items:center; flex-wrap:wrap;
  font-family:"Geist Mono",monospace; font-size:11.5px; letter-spacing:.05em; }
.links:empty{ display:none; }
.links a{ color:var(--muted); text-decoration:none; padding:2px 4px; border-radius:4px; transition:color .25s; }
.links a:hover{ color:var(--ink); }
.links .sep{ color:var(--faint); }
.hint{ margin-top:14px; font-family:"Geist Mono",monospace; font-size:11px; color:var(--faint); letter-spacing:.05em; }
.hint kbd{ background:var(--card-hi); border:1px solid var(--line); border-radius:5px; padding:1px 6px; color:var(--muted); }

/* ---- Edit-Modus: Karten werden auswählbar ---- */
body.edit-mode .card{ cursor:pointer; }
body.edit-mode .card.selected{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.card .edit-flag{
  position:absolute; top:8px; left:50%; transform:translateX(-50%); z-index:3;
  display:none; padding:2px 8px; border-radius:99px; font-size:10px; font-weight:600;
  background:var(--accent); color:#000; font-family:"Geist Mono",monospace;
}
body.edit-mode .card.selected .edit-flag{ display:block; }

/* ============================================================
   EDITOR
   ============================================================ */
.editor{
  position:fixed; top:0; right:0; bottom:0; z-index:32;
  width:min(390px, 92vw); display:flex; flex-direction:column;
  background:#0a0d12; border-left:1px solid rgba(255,255,255,.1);
  box-shadow:-30px 0 80px -40px rgba(0,0,0,.9);
  transform:translateX(100%); transition:transform .28s cubic-bezier(.2,.7,.2,1);
}
body.editor-open .editor{ transform:translateX(0); }
.editor[hidden]{ display:none; }

.ed-head{
  flex:0 0 auto; display:flex; align-items:center; gap:10px;
  padding:16px 18px; border-bottom:1px solid var(--line);
}
.ed-head h2{ font-size:14px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink); }
.ed-save{
  margin-left:auto; font-family:"Geist Mono",monospace; font-size:10.5px; color:var(--faint);
  white-space:nowrap; transition:color .2s;
}
.ed-save.saving{ color:var(--accent); }
.ed-save.saved{ color:var(--ok); }
.ed-save.error{ color:var(--down); }
.ed-close{
  width:30px; height:30px; flex:0 0 30px; border-radius:7px; cursor:pointer;
  border:1px solid var(--line); background:rgba(255,255,255,.03); color:var(--muted);
  font-size:19px; line-height:1; display:grid; place-items:center;
}
.ed-close:hover{ color:var(--ink); border-color:rgba(255,255,255,.18); }

.ed-scroll{ flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain; padding-bottom:18px; }
.ed-scroll::-webkit-scrollbar{ width:9px; }
.ed-scroll::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.1); border-radius:9px; border:2px solid transparent; background-clip:padding-box; }

.ed-section{ border-bottom:1px solid var(--line); }
.ed-section-head{
  width:100%; display:flex; align-items:center; gap:10px; cursor:pointer;
  padding:14px 18px; background:none; border:0; color:var(--ink);
  font-family:var(--font-stack); font-size:13px; font-weight:600; text-align:left;
}
.ed-section-head:hover{ background:rgba(255,255,255,.02); }
.ed-section-head .chev{ margin-left:auto; color:var(--faint); transition:transform .22s ease; }
.ed-section.open .ed-section-head .chev{ transform:rotate(90deg); }
.ed-section-head .sec-ic{ width:16px; height:16px; color:var(--muted); fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.ed-body{ display:none; padding:4px 18px 18px; }
.ed-section.open .ed-body{ display:block; }

/* Steuerelemente */
.ctrl{ margin-top:14px; }
.ctrl:first-child{ margin-top:8px; }
.ctrl-label{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-size:11.5px; color:var(--muted); margin-bottom:7px; font-weight:500;
}
.ctrl-label .val{ font-family:"Geist Mono",monospace; font-size:10.5px; color:var(--faint); }
.ctrl-row{ display:flex; align-items:center; gap:8px; }

input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:4px; border-radius:4px;
  background:rgba(255,255,255,.12); outline:none; cursor:pointer;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:16px; height:16px; border-radius:50%;
  background:var(--accent); border:2px solid #0a0d12; cursor:pointer;
}
input[type=range]::-moz-range-thumb{ width:14px; height:14px; border-radius:50%; background:var(--accent); border:2px solid #0a0d12; cursor:pointer; }

select, .ed-text, .ed-num{
  width:100%; height:36px; padding:0 10px; border-radius:7px;
  background:rgba(255,255,255,.04); border:1px solid var(--line); color:var(--ink);
  font-family:var(--font-stack); font-size:12.5px; outline:none;
}
select:focus, .ed-text:focus, .ed-num:focus{ border-color:color-mix(in srgb,var(--accent) 50%, var(--line)); }

/* Eigenes Dropdown (dunkel + abgerundet) statt nativem <select> */
.ed-select{ position:relative; }
.ed-select-btn{
  width:100%; height:36px; padding:0 8px 0 10px; border-radius:7px; cursor:pointer;
  background:rgba(255,255,255,.04); border:1px solid var(--line); color:var(--ink);
  font-family:var(--font-stack); font-size:12.5px;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  transition:border-color .15s ease;
}
.ed-select-btn:hover{ border-color:rgba(255,255,255,.18); }
.ed-select.open .ed-select-btn{ border-color:color-mix(in srgb,var(--accent) 50%, var(--line)); }
.ed-select-val{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ed-select-chev{ display:flex; flex:0 0 auto; color:var(--faint); transition:transform .2s ease; }
.ed-select-chev svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.ed-select.open .ed-select-chev{ transform:rotate(180deg); }
.ed-select-menu{
  position:absolute; top:calc(100% + 5px); left:0; right:0; z-index:8;
  display:none; flex-direction:column; gap:1px; padding:5px;
  background:#0e1219; border:1px solid rgba(255,255,255,.14); border-radius:10px;
  box-shadow:0 18px 44px -16px rgba(0,0,0,.85); max-height:260px; overflow-y:auto;
}
.ed-select.open .ed-select-menu{ display:flex; }
.ed-select-opt{
  width:100%; text-align:left; padding:8px 10px; border-radius:6px; cursor:pointer;
  background:none; border:0; color:var(--muted);
  font-family:var(--font-stack); font-size:12.5px;
  transition:background .12s ease, color .12s ease;
}
.ed-select-opt:hover{ background:rgba(255,255,255,.06); color:var(--ink); }
.ed-select-opt.active{ background:color-mix(in srgb,var(--accent) 16%, transparent); color:var(--ink); }
.ed-text.area{ height:auto; min-height:64px; padding:8px 10px; resize:vertical; line-height:1.4; }
.ed-num{ height:36px; }

/* Farbwähler */
.color-field{ position:relative; width:34px; height:34px; flex:0 0 34px; border-radius:8px; overflow:hidden; border:1px solid var(--line); cursor:pointer; }
.color-field input[type=color]{ position:absolute; inset:-4px; width:calc(100% + 8px); height:calc(100% + 8px); border:0; padding:0; background:none; cursor:pointer; }

/* Segment / Pills */
.seg{ display:flex; gap:4px; flex-wrap:wrap; }
.seg button{
  flex:1 1 auto; min-width:0; padding:7px 8px; border-radius:7px; cursor:pointer;
  border:1px solid var(--line); background:rgba(255,255,255,.03); color:var(--muted);
  font-family:var(--font-stack); font-size:11.5px; white-space:nowrap;
  transition:all .15s ease;
}
.seg button:hover{ color:var(--ink); }
.seg button.active{ background:color-mix(in srgb,var(--accent) 16%, transparent); border-color:color-mix(in srgb,var(--accent) 55%, var(--line)); color:var(--ink); }

/* Toggle-Switch */
.switch{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:13px; font-size:12.5px; color:var(--ink); cursor:pointer; }
.switch input{ display:none; }
.switch .track{ width:38px; height:22px; border-radius:99px; background:rgba(255,255,255,.12); position:relative; transition:background .18s ease; flex:0 0 38px; }
.switch .track::after{ content:""; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:#fff; transition:transform .18s ease; }
.switch input:checked + .track{ background:var(--accent); }
.switch input:checked + .track::after{ transform:translateX(16px); }

/* Buttons */
.ed-btn{
  width:100%; height:38px; border-radius:8px; cursor:pointer; margin-top:10px;
  border:1px solid var(--line); background:rgba(255,255,255,.04); color:var(--ink);
  font-family:var(--font-stack); font-size:12.5px; font-weight:500;
  display:flex; align-items:center; justify-content:center; gap:8px;
  transition:background .15s, border-color .15s;
}
.ed-btn:hover{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.18); }
.ed-btn.accent{ background:color-mix(in srgb,var(--accent) 16%, transparent); border-color:color-mix(in srgb,var(--accent) 45%, var(--line)); }
.ed-btn.danger{ color:#ff7a8a; border-color:rgba(255,107,107,.3); }
.ed-btn svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.ed-btn-row{ display:flex; gap:8px; }
.ed-btn-row .ed-btn{ flex:1; }

/* Item-Liste (Dienste & Links) */
.ed-item{
  margin-top:10px; border:1px solid var(--line); border-radius:10px; overflow:hidden;
  background:rgba(255,255,255,.02);
}
.ed-item.dragging{ opacity:.5; }
.ed-item.drag-over{ border-color:var(--accent); }
.ed-item-head{ display:flex; align-items:center; gap:8px; padding:8px 10px; }
.ed-item-grip{ cursor:grab; color:var(--faint); flex:0 0 auto; display:flex; }
.ed-item-grip svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; }
.ed-item-ic{
  width:30px; height:30px; flex:0 0 30px; border-radius:7px; cursor:pointer; display:grid; place-items:center;
  border:1px solid var(--line); background:rgba(255,255,255,.03);
}
.ed-item-ic svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.ed-item-name{ flex:1 1 auto; min-width:0; height:30px; padding:0 8px; border-radius:6px; background:rgba(255,255,255,.04); border:1px solid var(--line); color:var(--ink); font-family:var(--font-stack); font-size:12px; outline:none; }
.ed-item-name:focus{ border-color:color-mix(in srgb,var(--accent) 50%, var(--line)); }
.ed-item-expand{ width:26px; height:30px; flex:0 0 26px; border:0; background:none; color:var(--faint); cursor:pointer; display:grid; place-items:center; }
.ed-item-expand svg{ width:14px; height:14px; transition:transform .2s; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.ed-item.open .ed-item-expand svg{ transform:rotate(180deg); }
.ed-item-body{ display:none; padding:2px 10px 12px; border-top:1px solid var(--line); }
.ed-item.open .ed-item-body{ display:block; }
.ed-item.hidden-item .ed-item-name{ opacity:.45; text-decoration:line-through; }

/* Icon-Picker */
.icon-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:5px; margin-top:8px; }
.icon-grid button{
  aspect-ratio:1; border-radius:7px; cursor:pointer; display:grid; place-items:center;
  border:1px solid var(--line); background:rgba(255,255,255,.03); color:var(--muted);
}
.icon-grid button:hover{ color:var(--ink); border-color:rgba(255,255,255,.2); }
.icon-grid button.active{ color:var(--accent); border-color:var(--accent); background:color-mix(in srgb,var(--accent) 12%, transparent); }
.icon-grid button svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }

.ed-hint{ font-size:11px; color:var(--faint); margin-top:9px; line-height:1.4; }

/* Granularer Reset pro Sektion */
.ed-reset{
  margin-top:16px; width:100%; height:32px; border-radius:7px; cursor:pointer;
  border:1px solid var(--line); background:none; color:var(--faint);
  font-family:var(--font-stack); font-size:11.5px;
  display:flex; align-items:center; justify-content:center; gap:7px;
  transition:color .15s, border-color .15s;
}
.ed-reset:hover{ color:var(--down); border-color:rgba(240,106,134,.3); }
.ed-reset svg{ width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }

/* ---- Animationen ---- */
@keyframes rise{ to{ opacity:1; transform:translateY(0); } }
@keyframes pulse{ 0%,100%{ opacity:.35; } 50%{ opacity:1; } }

/* Edit-Modus: Live-Vorschau ohne wiederholte Eingangs-Animationen bei jeder
   Aenderung. Die Karten/Texte erscheinen sofort statt neu einzufaden. */
body.no-anim .card,
body.no-anim .mark,
body.no-anim .mark-line,
body.no-anim .clock,
body.no-anim .greeting,
body.no-anim .widget,
body.no-anim footer,
body.no-anim .gate-message{
  animation:none !important; opacity:1 !important; transform:none !important;
}

@media (prefers-reduced-motion:reduce){ *{ animation-duration:.001s !important; } .bg .glow{ animation:none; } }

@media (max-width:720px){
  .auth-shell{ top:12px; right:12px; }
  body.editor-open .wrap{ margin-right:0; }
  .editor{ width:100vw; }
  .session-overlay{ padding:12px; place-items:start center; }
  .session-panel{ max-height:calc(100vh - 24px); padding:28px 20px 24px; }
  .session-box{ grid-template-columns:1fr; gap:14px; }
  .session-fields{ grid-template-columns:86px minmax(0,1fr); }
  .session-actions{ align-items:stretch; }
  .session-action{ flex:1 1 100%; }
}
@media (max-width:520px){
  .grid{ grid-template-columns:repeat(2,1fr); }
  .grid.layout-cols-3, .grid.layout-cols-4{ grid-template-columns:repeat(2,1fr); }
  .card{ padding:var(--card-pad-y) 14px; }
  .idx{ opacity:1; }
}