/* ████████████████████████████████████████████████████████████████
   ██  THEME — HIER SCHNELL DAS AUSSEHEN ANPASSEN                  ██
   ██  Alle Farben an EINER Stelle. Einfach Werte ändern.          ██
   ████████████████████████████████████████████████████████████████ */
:root {
  /* ---- Kopfleiste (dunkles Aubergine/Lila wie Citrix) ---------- */
  --header-bg:        #473b50;   /* Farbe der oberen Leiste          */
  --header-text:      #ffffff;   /* Textfarbe oben                   */
  --tab-active-bg:    #6b5d74;   /* aktiver Tab (hervorgehoben)      */
  --tab-hover-bg:     #564a60;   /* Tab beim Überfahren              */
  --tab-icon:         #d9d3df;   /* Tab-Icons/Label (inaktiv)        */

  /* ---- AKZENTFARBE (Links, Buttons, Markierungen) -------------- */
  --accent:           #2aa3c7;   /* Haupt-Akzent (Login-Button usw.) */
  --accent-hover:     #2491b3;   /* Akzent beim Überfahren           */
  --accent-soft:      #e6f3f7;   /* heller Akzent-Hintergrund        */
  --link:             #0e8fa6;   /* Linkfarbe ("Details", "All")     */

  /* ---- Inhalt / Kacheln --------------------------------------- */
  --page-bg:          #ffffff;   /* Hintergrund Inhaltsbereich       */
  --title-color:      #4a4a4a;   /* Überschrift "Apps"               */
  --card-bg:          #ffffff;   /* Kachel-Hintergrund               */
  --card-border:      #e2e2e4;   /* Kachel-Rahmen                    */
  --card-hover:       #b9bdc4;   /* Kachel-Rahmen beim Überfahren    */
  --card-text:        #444444;   /* App-Name                         */
  --caret-color:      #c2c2c8;   /* Chevron unten auf der Kachel     */
  --fav-star:         #f1b300;   /* Favoriten-Stern                  */

  /* ---- Fenster / Taskleiste ----------------------------------- */
  --taskbar-bg:       #2a2230;   /* untere Taskleiste                */
  --taskbar-text:     #e8e3ee;
  --win-titlebar:     #f1eef4;   /* Fenster-Titelleiste              */
  --win-border:       #c9c3d0;

  /* ---- Login-Hintergrund (Verlauf) ---------------------------- */
  --gw-c1:            #2f8f93;   /* Verlauf oben-links (teal)        */
  --gw-c2:            #46405c;   /* Verlauf Mitte (lila)             */
  --gw-c3:            #b4546b;   /* Verlauf unten (warm/pink)        */
  --gw-c4:            #4a3d5c;   /* Verlauf rechts                   */
  --gw-band:          rgba(35,28,44,.38); /* dunkles Mittelband      */

  /* ---- Maße ---------------------------------------------------- */
  --header-h:  54px;
  --taskbar-h: 42px;
  --font: 'Segoe UI', Tahoma, system-ui, -apple-system, Arial, sans-serif;
}
/* ██████████████████  ENDE THEME-BLOCK  ████████████████████████████ */


/* ============================================================= */
/* Base                                                          */
/* ============================================================= */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; font-family: var(--font); color: #333; background: var(--page-bg); -webkit-font-smoothing: antialiased; }
body { overflow: hidden; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }
.icon16 svg { width: 16px; height: 16px; }

/* ============================================================= */
/* LOGIN — Citrix Gateway                                         */
/* ============================================================= */
.gw {
  position: fixed; inset: 0; overflow: hidden;
  background:
    radial-gradient(60% 75% at 10% 15%, color-mix(in srgb, var(--gw-c1) 85%, transparent), transparent 62%),
    radial-gradient(55% 60% at 12% 98%, color-mix(in srgb, var(--gw-c3) 85%, transparent), transparent 60%),
    radial-gradient(75% 95% at 92% 60%, color-mix(in srgb, var(--gw-c4) 92%, transparent), transparent 72%),
    linear-gradient(120deg, var(--gw-c1) 0%, var(--gw-c2) 48%, var(--gw-c4) 100%);
}
.gw-band { position: absolute; left: 0; right: 0; top: 32%; bottom: 30%; background: var(--gw-band); }
.gw-inner {
  position: relative; z-index: 2; height: 100%;
  display: flex; align-items: center; justify-content: center; gap: 70px; flex-wrap: wrap;
}
.gw-brand { display: flex; flex-direction: column; align-items: center; gap: 16px; color: #fff; font-size: 32px; letter-spacing: .5px; }
.gw-logo { width: 74px; height: 74px; }
.gw-brand-text { font-size: 32px; }
.gw-brand .b { font-weight: 700; }
.gw-brand .t { font-weight: 300; }
.gw-form { width: 500px; max-width: 90vw; }
.gw-form h1 { margin: 0 0 22px; color: rgba(255,255,255,.92); font-size: 22px; font-weight: 400; }
.gw-row { display: flex; align-items: center; margin-bottom: 14px; }
.gw-row label { width: 130px; text-align: right; padding-right: 16px; color: rgba(255,255,255,.82); font-size: 14px; }
.gw-row input { flex: 1; height: 38px; padding: 0 12px; border: 1px solid #cfcfcf; background: #fff; font-size: 15px; border-radius: 2px; }
.gw-row input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); }
.gw-spacer { width: 130px; }
.gw-btn { flex: 1; height: 42px; border: none; background: var(--accent); color: #fff; font-size: 15px; font-weight: 600; border-radius: 2px; transition: background .15s; }
.gw-btn:hover { background: var(--accent-hover); }
.gw-error { margin: 6px 0 0 130px; color: #ffd4d4; font-size: 13px; }
.gw-foot { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; color: rgba(255,255,255,.5); font-size: 12px; z-index: 2; }

/* ============================================================= */
/* WORKSPACE / STOREFRONT                                         */
/* ============================================================= */
.sf { height: 100%; display: flex; flex-direction: column; background: var(--page-bg); }

.sf-top {
  height: var(--header-h); flex-shrink: 0; display: flex; align-items: stretch;
  background: var(--header-bg); color: var(--header-text); position: relative; z-index: 50;
}
.sf-brand { display: flex; align-items: center; padding: 0 24px; font-size: 18px; white-space: nowrap; }
.sf-logo { height: 30px; width: auto; margin-right: 11px; display: block; }
.sf-brand-text { display: inline-flex; align-items: center; }
.sf-brand .light { font-weight: 300; }
.sf-brand .bold { font-weight: 600; }

.sf-tabs { flex: 1; display: flex; justify-content: center; align-items: stretch; }
.sf-tab {
  width: 86px; border: none; background: transparent; color: var(--tab-icon);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  transition: background .12s, color .12s;
}
.sf-tab:hover { background: var(--tab-hover-bg); color: #fff; }
.sf-tab.active { background: var(--tab-active-bg); color: #fff; }
.sf-tab-ic svg { width: 20px; height: 20px; display: block; }
.sf-tab-lbl { font-size: 10px; letter-spacing: .5px; }

.sf-top-right { display: flex; align-items: center; gap: 2px; padding: 0 12px; }
.sf-top-ic { width: 38px; height: 38px; border: none; background: transparent; color: rgba(255,255,255,.85); border-radius: 3px; display: flex; align-items: center; justify-content: center; }
.sf-top-ic:hover { background: rgba(255,255,255,.12); color: #fff; }
.sf-top-ic svg { width: 19px; height: 19px; }
.sf-user { display: flex; align-items: center; gap: 4px; border: none; background: transparent; color: #fff; font-size: 14px; padding: 6px 8px; border-radius: 3px; }
.sf-user:hover { background: rgba(255,255,255,.12); }
.sf-user-caret svg { width: 16px; height: 16px; }
.sf-menu { position: absolute; top: calc(var(--header-h) - 4px); right: 12px; width: 230px; background: #fff; border: 1px solid #ddd; box-shadow: 0 6px 20px rgba(0,0,0,.18); border-radius: 4px; padding: 6px; z-index: 60; }
.sf-menu-head { display: flex; align-items: center; gap: 10px; padding: 8px; border-bottom: 1px solid #eee; margin-bottom: 4px; }
.sf-menu-ava { width: 38px; height: 38px; border-radius: 50%; background: var(--header-bg); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 600; }
.sf-menu-name { font-weight: 600; font-size: 14px; color: #333; }
.sf-menu-sub { font-size: 12px; color: #999; }
.sf-menu-item { display: block; width: 100%; text-align: left; border: none; background: transparent; padding: 9px 10px; font-size: 14px; color: #333; border-radius: 4px; }
.sf-menu-item:hover { background: #f2f2f4; }
.sf-menu-item.danger { color: #b43b3b; }

.sf-main { flex: 1; overflow-y: auto; padding: 22px 28px 28px; }
.sf-panel { display: none; }
.sf-panel.active { display: block; }

.sf-page-head { display: flex; align-items: center; justify-content: space-between; }
.sf-page-head h1 { margin: 0; font-size: 26px; font-weight: 400; color: var(--title-color); }
.sf-allcount { margin-top: 6px; }
.sf-allcount span { color: var(--link); font-size: 13px; }
.sf-rule { border-bottom: 1px solid var(--card-border); margin: 10px 0 22px; }

.sf-search-box { display: flex; align-items: center; gap: 8px; border: 1px solid var(--card-border); border-radius: 3px; padding: 7px 12px; min-width: 240px; background: #fff; }
.sf-search-box.hidden-soft { display: none; }
.sf-search-ic svg { width: 15px; height: 15px; color: #9aa0a8; }
.sf-search-box input { border: none; outline: none; font-size: 13px; width: 100%; }

/* Grid + cards (classic flat) */
.sf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.sf-grid-desk { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.sf-empty { grid-column: 1 / -1; color: #999; font-size: 14px; padding: 10px 0; }

.sf-card {
  position: relative; background: var(--card-bg); border: 1px solid var(--card-border);
  min-height: 150px; padding: 22px 10px 20px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transition: border-color .12s, box-shadow .12s; border-radius: 2px;
}
.sf-card:hover { border-color: var(--card-hover); box-shadow: 0 1px 5px rgba(0,0,0,.07); }
.sf-card .sc-ic { width: 54px; height: 54px; margin-bottom: 14px; display: flex; align-items: center; justify-content: center; }
.sf-card .sc-ic svg { width: 54px; height: 54px; }
.sf-card .sc-name { font-size: 13px; color: var(--card-text); text-align: center; line-height: 1.25; }
.sf-card .sc-caret { position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%); color: var(--caret-color); width: 26px; height: 20px; border: none; background: transparent; display: flex; align-items: center; justify-content: center; border-radius: 3px; }
.sf-card .sc-caret svg { width: 18px; height: 18px; }
.sf-card .sc-caret:hover { color: #8a8a90; background: #f2f2f4; }
.sf-card .sc-fav { position: absolute; top: 7px; right: 7px; color: var(--fav-star); width: 16px; height: 16px; display: none; }
.sf-card .sc-fav svg { width: 16px; height: 16px; }
.sf-card.is-fav .sc-fav { display: block; }

/* card context menu */
.card-menu { position: fixed; width: 180px; background: #fff; border: 1px solid #ddd; box-shadow: 0 6px 20px rgba(0,0,0,.18); border-radius: 4px; padding: 5px; z-index: 200; }
.card-menu button { display: block; width: 100%; text-align: left; border: none; background: transparent; padding: 8px 10px; font-size: 13px; color: #333; border-radius: 3px; }
.card-menu button:hover { background: var(--accent-soft); color: var(--link); }

/* Desktop cards */
.desk-card { background: #fff; border: 1px solid var(--card-border); border-radius: 2px; overflow: hidden; cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.desk-card:hover { border-color: var(--card-hover); box-shadow: 0 1px 5px rgba(0,0,0,.07); }
.desk-thumb { height: 128px; background-size: cover; background-position: center; position: relative; }
.desk-thumb .desk-badge { position: absolute; top: 10px; left: 10px; background: rgba(20,20,30,.5); color: #fff; font-size: 11px; padding: 3px 9px; border-radius: 20px; display: flex; align-items: center; gap: 6px; }
.desk-thumb .desk-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #4fd07a; }
.desk-meta { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
.desk-meta .dm-ic svg { width: 34px; height: 34px; }
.desk-meta strong { display: block; font-size: 14px; color: #333; }
.desk-meta span { font-size: 12px; color: #999; }

/* ============================================================= */
/* WINDOWS                                                       */
/* ============================================================= */
.window-layer { position: fixed; inset: 0; top: var(--header-h); bottom: 0; pointer-events: none; overflow: hidden; }
.win { position: absolute; pointer-events: auto; background: #fff; border-radius: 6px; overflow: hidden; box-shadow: 0 18px 50px rgba(20,20,40,.32); display: flex; flex-direction: column; border: 1px solid var(--win-border); min-width: 300px; min-height: 180px; animation: winOpen .15s ease; }
@keyframes winOpen { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: none; } }
.win.maximized { border-radius: 0; }
.win.minimized { display: none; }
.win-titlebar { height: 36px; flex-shrink: 0; display: flex; align-items: center; gap: 9px; padding: 0 4px 0 10px; cursor: move; user-select: none; background: var(--win-titlebar); border-bottom: 1px solid #e0dce6; }
.win-ic { width: 18px; height: 18px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.win-ic svg { width: 17px; height: 17px; }
.win-title { flex: 1; font-size: 13px; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.win-ctrls { display: flex; }
.win-ctrl { width: 34px; height: 30px; border: none; background: transparent; color: #555; display: flex; align-items: center; justify-content: center; border-radius: 4px; }
.win-ctrl svg { width: 12px; height: 12px; }
.win-ctrl:hover { background: #ded9e4; }
.win-ctrl.close:hover { background: #e5484d; color: #fff; }
.win-body { flex: 1; overflow: auto; background: #fff; position: relative; }
.win-resize { position: absolute; right: 0; bottom: 0; width: 16px; height: 16px; cursor: nwse-resize; z-index: 5; }
.win.inactive { filter: saturate(.96); }
.win.inactive .win-titlebar { background: #f4f3f6; }
.win.inactive .win-title { color: #888; }

/* ============================================================= */
/* TASKBAR                                                       */
/* ============================================================= */
.taskbar { position: fixed; left: 0; right: 0; bottom: 0; height: var(--taskbar-h); background: var(--taskbar-bg); display: flex; align-items: center; gap: 6px; padding: 0 8px; z-index: 100; }
.taskbar-start { width: 34px; height: 34px; border: none; background: transparent; border-radius: 5px; display: flex; align-items: center; justify-content: center; color: #fff; }
.taskbar-start span { display: flex; } .taskbar-start svg { width: 20px; height: 20px; }
.taskbar-start:hover { background: rgba(255,255,255,.12); }
.taskbar-items { flex: 1; display: flex; gap: 5px; overflow-x: auto; }
.taskbar-item { height: 34px; padding: 0 12px; border: none; border-radius: 5px; background: rgba(255,255,255,.08); color: var(--taskbar-text); display: flex; align-items: center; gap: 8px; font-size: 13px; max-width: 200px; white-space: nowrap; border-bottom: 2px solid transparent; }
.taskbar-item:hover { background: rgba(255,255,255,.15); }
.taskbar-item.active { background: rgba(255,255,255,.17); border-bottom-color: var(--accent); }
.taskbar-item .ti-ic { width: 17px; height: 17px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.taskbar-item .ti-ic svg { width: 16px; height: 16px; }
.taskbar-item .ti-label { overflow: hidden; text-overflow: ellipsis; }
.taskbar-clock { color: var(--taskbar-text); font-size: 12px; text-align: right; line-height: 1.2; padding: 0 8px; }
.taskbar-clock small { display: block; font-size: 11px; opacity: .8; }

/* Start menu */
.start-menu { position: fixed; left: 8px; bottom: calc(var(--taskbar-h) + 6px); width: 340px; max-height: 64vh; overflow-y: auto; background: #332a3a; border: 1px solid rgba(255,255,255,.08); border-radius: 8px; padding: 12px; z-index: 110; box-shadow: 0 18px 50px rgba(0,0,0,.4); }
.start-menu h4 { margin: 4px 6px 8px; color: #b6adc0; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; }
.start-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.start-app { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px; border: none; background: transparent; border-radius: 6px; color: #e5e0ec; font-size: 11px; text-align: center; }
.start-app:hover { background: rgba(255,255,255,.1); }
.start-app .sa-ic { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; }
.start-app .sa-ic svg { width: 30px; height: 30px; }

/* ============================================================= */
/* APP CONTENT                                                   */
/* ============================================================= */
/* Calculator */
.calc { display: flex; flex-direction: column; height: 100%; background: #fff; }
.calc-display { padding: 20px 18px; text-align: right; font-size: 32px; font-weight: 300; color: #222; background: #f7f7f9; min-height: 66px; overflow: hidden; word-break: break-all; }
.calc-sub { font-size: 14px; color: #999; min-height: 18px; }
.calc-keys { flex: 1; display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: #e2e2e4; }
.calc-key { border: none; background: #fff; font-size: 18px; color: #333; }
.calc-key:hover { background: #eef1f4; }
.calc-key.op { color: var(--accent); font-weight: 600; }
.calc-key.eq { background: var(--accent); color: #fff; }
.calc-key.eq:hover { background: var(--accent-hover); }
.calc-key.fn { color: #777; }

/* Notepad */
.notepad { display: flex; flex-direction: column; height: 100%; }
.notepad-bar { display: flex; gap: 2px; padding: 3px 6px; border-bottom: 1px solid #e4e4e6; background: #f7f7f9; }
.notepad-bar button { border: none; background: transparent; padding: 5px 10px; font-size: 13px; border-radius: 4px; color: #555; }
.notepad-bar button:hover { background: #e8e8ec; }
.notepad textarea { flex: 1; border: none; outline: none; resize: none; padding: 14px; font-family: Consolas, 'SF Mono', Menlo, monospace; font-size: 14px; line-height: 1.6; color: #222; }
.notepad-status { font-size: 12px; color: #999; padding: 5px 12px; border-top: 1px solid #e4e4e6; background: #f7f7f9; display: flex; justify-content: space-between; }

/* Terminal */
.term { height: 100%; background: #0c0c0c; color: #cccccc; font-family: Consolas, 'SF Mono', Menlo, monospace; font-size: 13.5px; display: flex; flex-direction: column; }
.term-out { flex: 1; overflow-y: auto; padding: 10px 12px; white-space: pre-wrap; line-height: 1.5; }
.term-line { display: flex; } .term-input-row { display: flex; padding: 0 12px 10px; }
.term-prompt { color: #cccccc; margin-right: 8px; white-space: nowrap; }
.term-input { flex: 1; background: transparent; border: none; outline: none; color: #ccc; font-family: inherit; font-size: inherit; }
.term .ok { color: #16c60c; } .term .warn { color: #f9f1a5; } .term .err { color: #e74856; } .term .dim { color: #767676; } .term .hl { color: #3b78ff; }

/* File Explorer */
.fe { display: flex; height: 100%; }
.fe-side { width: 180px; border-right: 1px solid #e4e4e6; background: #f7f7f9; padding: 10px 8px; overflow-y: auto; }
.fe-sgroup { font-size: 11px; color: #999; text-transform: uppercase; margin: 6px 8px 4px; }
.fe-side button { display: flex; align-items: center; gap: 8px; width: 100%; border: none; background: transparent; padding: 7px 8px; border-radius: 4px; font-size: 13px; color: #333; text-align: left; }
.fe-side button:hover { background: #e8e8ec; }
.fe-side button.active { background: var(--accent-soft); color: var(--link); }
.fe-side button svg { width: 16px; height: 16px; flex-shrink: 0; }
.fe-main { flex: 1; display: flex; flex-direction: column; }
.fe-path { padding: 8px 12px; border-bottom: 1px solid #e4e4e6; font-size: 13px; color: #555; background: #fbfbfc; }
.fe-files { flex: 1; overflow-y: auto; padding: 8px; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px,1fr)); gap: 4px; align-content: start; }
.fe-file { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px; border-radius: 6px; cursor: pointer; text-align: center; }
.fe-file:hover { background: #eef1f6; }
.fe-file svg { width: 36px; height: 36px; }
.fe-fname { font-size: 12px; line-height: 1.2; word-break: break-word; }
.fe-status { font-size: 12px; color: #999; padding: 6px 12px; border-top: 1px solid #e4e4e6; background: #f7f7f9; }

/* Paint */
.paint { display: flex; flex-direction: column; height: 100%; }
.paint-bar { display: flex; align-items: center; gap: 16px; padding: 8px 12px; border-bottom: 1px solid #e4e4e6; background: #f7f7f9; flex-wrap: wrap; }
.paint-swatches { display: flex; gap: 4px; }
.pw { width: 22px; height: 22px; border: 1px solid #bbb; border-radius: 3px; }
.pw.on { outline: 2px solid var(--accent); outline-offset: 1px; }
.paint-size { font-size: 12px; color: #555; display: flex; align-items: center; gap: 6px; }
.paint-clear { border: 1px solid #ccc; background: #fff; border-radius: 4px; padding: 5px 12px; font-size: 13px; }
.paint-clear:hover { background: #eee; }
.paint-canvas-wrap { flex: 1; overflow: auto; background: #c9ccd2; display: flex; justify-content: center; align-items: flex-start; padding: 12px; }
.paint canvas { background: #fff; box-shadow: 0 1px 6px rgba(0,0,0,.2); cursor: crosshair; max-width: 100%; }

/* Outlook */
.ol { display: flex; flex-direction: column; height: 100%; }
.ol-ribbon { height: 40px; background: #0F6CBD; color: #fff; display: flex; align-items: center; gap: 12px; padding: 0 16px; font-size: 13px; }
.ol-ribbon strong { font-size: 15px; } .ol-ribbon-r { margin-left: auto; opacity: .9; }
.ol-body { flex: 1; display: flex; min-height: 0; }
.ol-folders { width: 190px; border-right: 1px solid #e4e4e6; background: #faf9fb; padding: 10px 8px; overflow-y: auto; }
.ol-fav { font-size: 11px; color: #999; text-transform: uppercase; margin: 4px 8px 6px; }
.ol-folder { display: flex; justify-content: space-between; width: 100%; border: none; background: transparent; padding: 8px 10px; border-radius: 4px; font-size: 13px; color: #333; text-align: left; }
.ol-folder b { color: #0F6CBD; }
.ol-folder:hover { background: #eef1f6; }
.ol-folder.on { background: var(--accent-soft); color: var(--link); font-weight: 600; }
.ol-list { width: 300px; border-right: 1px solid #e4e4e6; overflow-y: auto; }
.ol-item { display: flex; gap: 10px; width: 100%; border: none; border-bottom: 1px solid #eee; background: #fff; padding: 11px 12px; text-align: left; }
.ol-item:hover { background: #f6f9fc; } .ol-item.sel { background: var(--accent-soft); }
.ol-item.unread { border-left: 3px solid var(--accent); }
.ol-ava { width: 34px; height: 34px; border-radius: 50%; background: #0F6CBD; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 600; flex-shrink: 0; }
.ol-item-main { flex: 1; min-width: 0; }
.ol-item-top { display: flex; justify-content: space-between; } .ol-item-top strong { font-size: 13px; } .ol-item-top span { font-size: 11px; color: #999; }
.ol-item-sub { font-size: 13px; color: #222; margin-top: 2px; } .ol-item.unread .ol-item-sub { font-weight: 700; }
.ol-item-pre { font-size: 12px; color: #999; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ol-read { flex: 1; overflow-y: auto; padding: 20px 24px; min-width: 0; }
.ol-read-head h2 { margin: 0 0 14px; font-size: 19px; color: #222; }
.ol-from { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid #eee; }
.ol-from strong { display: block; font-size: 14px; } .ol-from span { font-size: 12px; color: #999; }
.ol-read-body { padding-top: 16px; font-size: 14px; line-height: 1.7; color: #333; }

/* Skype */
.sk { height: 100%; display: flex; flex-direction: column; background: #fff; }
.sk-me { display: flex; align-items: center; gap: 12px; padding: 16px; background: #0078d4; color: #fff; }
.sk-me strong { font-size: 15px; } .sk-status { font-size: 12px; display: flex; align-items: center; gap: 6px; opacity: .95; }
.sk-status i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.sk-ava { width: 42px; height: 42px; border-radius: 4px; background: rgba(255,255,255,.25); display: flex; align-items: center; justify-content: center; font-weight: 600; }
.sk-ava.sm { width: 34px; height: 34px; border-radius: 4px; }
.sk-search { margin: 12px; padding: 9px 12px; border: 1px solid #e0e0e0; border-radius: 3px; font-size: 13px; }
.sk-group { font-size: 12px; color: #888; padding: 2px 16px 8px; }
.sk-list { flex: 1; overflow-y: auto; }
.sk-contact { display: flex; align-items: center; gap: 10px; padding: 8px 16px; position: relative; }
.sk-contact:hover { background: #f3f6fa; }
.sk-contact strong { font-size: 13px; display: block; } .sk-contact span { font-size: 11px; color: #999; }
.sk-dot { position: absolute; left: 38px; bottom: 8px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid #fff; }

/* Word */
.word { height: 100%; display: flex; flex-direction: column; background: #f3f3f5; }
.word-ribbon { display: flex; gap: 2px; background: #2B579A; padding: 0 8px; }
.wr-tab { color: #cdd9ec; font-size: 13px; padding: 10px 14px; } .wr-tab.on { background: #fff; color: #2B579A; }
.word-tools { display: flex; align-items: center; gap: 6px; padding: 6px 10px; background: #fff; border-bottom: 1px solid #e4e4e6; }
.word-tools select { border: 1px solid #ddd; border-radius: 3px; padding: 4px 6px; font-size: 13px; }
.word-tools button { width: 30px; height: 28px; border: 1px solid transparent; background: transparent; border-radius: 4px; }
.word-tools button:hover { background: #eee; border-color: #ddd; }
.word-page-wrap { flex: 1; overflow-y: auto; padding: 20px; display: flex; justify-content: center; }
.word-page { background: #fff; width: 640px; max-width: 100%; min-height: 400px; padding: 56px 64px; box-shadow: 0 1px 8px rgba(0,0,0,.15); font-size: 15px; line-height: 1.7; color: #222; outline: none; }
.word-page h1 { font-size: 24px; color: #2B579A; }

/* Sound Recorder */
.rec { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; background: #fff; }
.rec-time { font-size: 40px; font-weight: 300; color: #333; font-variant-numeric: tabular-nums; }
.rec-btn { width: 84px; height: 84px; border-radius: 50%; border: none; background: var(--accent); display: flex; align-items: center; justify-content: center; transition: background .15s; }
.rec-btn:hover { background: var(--accent-hover); }
.rec-dot { width: 30px; height: 30px; border-radius: 50%; background: #fff; transition: border-radius .2s; }
.rec-btn.on { background: #e5484d; } .rec-btn.on .rec-dot { border-radius: 5px; width: 26px; height: 26px; }
.rec-hint { font-size: 13px; color: #888; }

/* Windows Media Player */
.wmp { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: #1b1f26; color: #e6e9ee; padding: 20px; }
.wmp-art { width: 150px; height: 150px; border-radius: 6px; background: linear-gradient(135deg,#f2821f,#c0392b); display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(0,0,0,.4); }
.wmp-title { font-size: 14px; } .wmp-seek { width: 80%; height: 5px; background: #3a3f4a; border-radius: 3px; overflow: hidden; }
.wmp-bar { height: 100%; background: var(--accent); width: 18%; }
.wmp-ctrls { display: flex; align-items: center; gap: 18px; } .wmp-ctrls button { border: none; background: transparent; color: #e6e9ee; font-size: 18px; }
.wmp-play { width: 48px; height: 48px; border-radius: 50% !important; background: var(--accent) !important; }

/* Snipping */
.snip { height: 100%; display: flex; flex-direction: column; }
.snip-bar { display: flex; align-items: center; gap: 16px; padding: 10px 14px; border-bottom: 1px solid #e4e4e6; background: #f7f7f9; font-size: 13px; color: #666; }
.snip-new { border: 1px solid #ccc; background: #fff; border-radius: 4px; padding: 6px 14px; font-size: 13px; color: var(--link); }
.snip-new:hover { background: var(--accent-soft); }
.snip-area { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #999; font-size: 14px; line-height: 1.8; }

/* Document viewers */
.docv { height: 100%; display: flex; flex-direction: column; }
.docv-ribbon { height: 38px; display: flex; align-items: center; gap: 12px; padding: 0 16px; color: #fff; background: #555; font-size: 13px; }
.docv-ribbon strong { font-size: 15px; } .docv-ribbon.xls { background: #217346; } .docv-ribbon.ppt { background: #C43E1C; } .docv-ribbon.acc { background: #A4373A; } .docv-ribbon.note { background: #80397B; } .docv-ribbon.pub { background: #077568; }
.docv-body { flex: 1; overflow: auto; padding: 16px; }
.info-view { font-size: 14px; line-height: 1.7; color: #333; } .info-view .dim { color: #999; font-size: 12.5px; }
.xls-grid { border-collapse: collapse; font-size: 13px; width: 100%; }
.xls-grid th, .xls-grid td { border: 1px solid #d9d9d9; padding: 6px 12px; text-align: left; }
.xls-grid th { background: #f3f3f3; color: #555; font-weight: 600; }
.xls-grid tr:first-child th, .xls-grid td:first-child, .xls-grid th:first-child { background: #eef3ee; text-align: center; color: #888; }
.ppt-wrap { flex: 1; display: flex; min-height: 0; }
.ppt-rail { width: 120px; border-right: 1px solid #e4e4e6; padding: 10px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; background: #faf9fb; }
.ppt-thumb { display: flex; gap: 6px; align-items: center; cursor: pointer; } .ppt-thumb span { font-size: 11px; color: #999; }
.ppt-mini { flex: 1; height: 44px; background: #fff; border: 1px solid #ddd; }
.ppt-thumb.on .ppt-mini { border-color: var(--accent); border-width: 2px; }
.ppt-stage { flex: 1; display: flex; align-items: center; justify-content: center; background: #d7d7db; padding: 20px; }
.ppt-slide { width: 100%; max-width: 520px; aspect-ratio: 4/3; background: #fff; box-shadow: 0 4px 16px rgba(0,0,0,.2); padding: 40px; display: flex; flex-direction: column; justify-content: center; }
.ppt-slide h1 { margin: 0 0 10px; font-size: 30px; color: #C43E1C; } .ppt-slide h3 { margin: 0; font-weight: 400; color: #555; } .ppt-foot { margin-top: auto; font-size: 11px; color: #aaa; }
.acc-tables { font-size: 13px; color: #555; margin-bottom: 12px; }
.note-body { flex: 1; display: flex; flex-direction: column; } .note-tabs { display: flex; gap: 2px; padding: 8px 12px 0; background: #faf6fa; } .note-tabs span { padding: 7px 14px; font-size: 13px; color: #80397B; background: #efe3ef; border-radius: 4px 4px 0 0; } .note-tabs span.on { background: #fff; font-weight: 600; }
.note-page { flex: 1; padding: 20px 28px; outline: none; font-size: 14px; line-height: 1.7; } .note-page h2 { color: #80397B; }
.pub-wrap { flex: 1; background: #d7d7db; display: flex; justify-content: center; padding: 20px; overflow: auto; }
.pub-flyer { width: 460px; background: #fff; box-shadow: 0 4px 16px rgba(0,0,0,.2); } .pub-head { background: #077568; color: #fff; padding: 24px; font-size: 22px; font-weight: 700; } .pub-cols { padding: 20px 24px; column-count: 2; column-gap: 20px; font-size: 13px; line-height: 1.6; color: #444; }

/* Browser */
.browser { display: flex; flex-direction: column; height: 100%; }
.browser-bar { padding: 8px 10px; border-bottom: 1px solid #e4e4e6; background: #f7f7f9; }
.browser-url { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #e0e0e0; border-radius: 16px; padding: 7px 14px; font-size: 13px; color: #666; }
.browser-view { flex: 1; overflow-y: auto; }

/* RDP */
.rdp { height: 100%; position: relative; overflow: hidden; background-size: cover; background-position: center; display: flex; flex-direction: column; }
.rdp-icons { position: absolute; top: 14px; left: 14px; display: grid; gap: 16px; }
.rdp-ico { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 78px; color: #fff; cursor: pointer; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.rdp-ico svg { width: 36px; height: 36px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.rdp-ico span { font-size: 11.5px; text-align: center; }
.rdp-ico:hover { background: rgba(255,255,255,.12); border-radius: 6px; }
.rdp-taskbar { margin-top: auto; height: 40px; background: rgba(18,22,34,.82); display: flex; align-items: center; gap: 8px; padding: 0 10px; }
.rdp-start { width: 30px; height: 30px; border: none; background: var(--header-bg); border-radius: 5px; color: #fff; display: flex; align-items: center; justify-content: center; } .rdp-start svg { width: 18px; height: 18px; }
.rdp-tb-clock { margin-left: auto; color: #e5e9ef; font-size: 12px; }
.rdp-win { position: absolute; top: 56px; left: 80px; width: 360px; height: 210px; background: #fff; border-radius: 6px; box-shadow: 0 18px 50px rgba(0,0,0,.4); overflow: hidden; display: flex; flex-direction: column; }
.rdp-win-tb { height: 32px; background: var(--win-titlebar); display: flex; align-items: center; padding: 0 6px 0 12px; font-size: 12px; border-bottom: 1px solid #e0dce6; } .rdp-win-tb .spacer { flex: 1; } .rdp-win-tb button { width: 26px; height: 24px; border: none; background: transparent; color: #555; border-radius: 4px; } .rdp-win-tb button:hover { background: #ded9e4; }
.rdp-win-body { flex: 1; padding: 14px; font-size: 13px; color: #333; overflow: auto; }

/* scrollbars */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-thumb { background: #c7c7cd; border-radius: 6px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: #aeaeb6; background-clip: padding-box; border: 3px solid transparent; }
.term-out::-webkit-scrollbar-thumb { background: #3a3a3a; background-clip: padding-box; }

/* responsive */
@media (max-width: 720px) {
  .sf-brand { padding: 0 14px; font-size: 16px; }
  .sf-tab { width: 64px; }
  .sf-main { padding: 16px 14px calc(var(--taskbar-h) + 16px); }
  .gw-row label, .gw-spacer { width: 90px; }
  .gw-inner { gap: 30px; }
}

/* ============================================================= */
/* THEME-VARIANTEN (umschaltbar im Menü)                         */
/* ============================================================= */
:root[data-theme="dark"] {
  --page-bg:#1d1d21; --card-bg:#2a2a30; --card-border:#3a3a42; --card-hover:#54545e;
  --title-color:#e8e8ec; --card-text:#d8d8de; --link:#56b6d6;
  --win-titlebar:#2f2f37; --win-border:#43434d;
}
:root[data-theme="dark"] body { background:#1d1d21; color:#e0e0e4; }
:root[data-theme="dark"] .sf-rule { border-color:#34343c; }
:root[data-theme="dark"] .sf-search-box { background:#2a2a30; border-color:#3a3a42; }
:root[data-theme="dark"] .sf-search-box input { background:transparent; color:#e0e0e4; }
:root[data-theme="dark"] .card-menu,
:root[data-theme="dark"] .sf-menu,
:root[data-theme="dark"] .details-flyout,
:root[data-theme="dark"] .toast { background:#2a2a30; border-color:#3a3a42; color:#e0e0e4; }
:root[data-theme="dark"] .sf-menu-item,
:root[data-theme="dark"] .card-menu button,
:root[data-theme="dark"] .bg-menu button { color:#e0e0e4; }
:root[data-theme="dark"] .sf-menu-item:hover,
:root[data-theme="dark"] .card-menu button:hover { background:#36363e; }
:root[data-theme="dark"] .sf-menu-head,
:root[data-theme="dark"] .sf-menu-section { border-color:#3a3a42; }

:root[data-theme="blue"] {
  --header-bg:#15467a; --tab-active-bg:#2f6aa8; --tab-hover-bg:#1d5790;
  --accent:#1f78c4; --accent-hover:#1b68ab; --accent-soft:#e4f0fa; --link:#176bb3;
  --taskbar-bg:#10243a;
  --gw-c1:#2a7fb0; --gw-c2:#1d4e7e; --gw-c3:#3a6ea5; --gw-c4:#13365a;
}

/* ============================================================= */
/* 2-Faktor                                                      */
/* ============================================================= */
.gw-2fa-hint { color:rgba(255,255,255,.82); font-size:14px; margin:0 0 18px; max-width:400px; }
.gw-2fa-input { width:100%; height:46px; text-align:center; letter-spacing:8px; font-size:20px; border:1px solid #cfcfcf; border-radius:2px; padding:0 12px; }
.gw-2fa-input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); }
.gw-2fa-demo { color:rgba(255,255,255,.55); font-size:12px; margin-top:16px; }
.gw-btn-ghost { flex:0 0 auto; padding:0 22px; height:42px; border:1px solid rgba(255,255,255,.4); background:transparent; color:#fff; border-radius:2px; font-size:14px; }
.gw-btn-ghost:hover { background:rgba(255,255,255,.1); }

/* ============================================================= */
/* Menü-Abschnitte + Segmented (Theme/Sprache)                   */
/* ============================================================= */
.sf-menu-section { padding:8px; border-bottom:1px solid var(--card-border); margin-bottom:4px; }
.sf-menu-label { font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:#999; margin-bottom:6px; }
.sf-seg { display:flex; gap:4px; }
.sf-seg button { flex:1; border:1px solid var(--card-border); background:transparent; padding:6px 8px; font-size:12px; border-radius:5px; color:var(--title-color); }
.sf-seg button.on { background:var(--accent); color:#fff; border-color:var(--accent); }

/* ============================================================= */
/* Banner + Sub-Tabs + Filter + Kategorien                       */
/* ============================================================= */
.sf-banners { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(210px,1fr); gap:14px; overflow-x:auto; margin-bottom:22px; padding-bottom:4px; }
.sf-banner { text-align:left; border:none; border-radius:4px; padding:18px; color:#fff; min-height:90px; display:flex; flex-direction:column; justify-content:center; cursor:pointer; position:relative; }
.sf-banner strong { font-size:16px; } .sf-banner span { font-size:12px; opacity:.9; margin-top:4px; }
.sf-banner em { position:absolute; top:12px; right:14px; font-style:normal; font-size:11px; background:rgba(255,255,255,.22); padding:2px 8px; border-radius:10px; }
.sf-banner:hover { filter:brightness(1.08); }

.sf-head-left { display:flex; align-items:center; gap:20px; }
.sf-subtabs { display:flex; gap:6px; }
.sf-subtab { border:none; background:transparent; font-size:14px; color:#888; padding:6px 4px; border-bottom:2px solid transparent; }
.sf-subtab:hover { color:var(--title-color); }
.sf-subtab.active { color:var(--link); border-bottom-color:var(--link); font-weight:600; }

.sf-filterbar { grid-column:1/-1; display:flex; align-items:center; gap:12px; margin-bottom:6px; }
.sf-filterbar span { font-weight:600; color:var(--title-color); }
.sf-filterbar button { border:1px solid var(--card-border); background:transparent; border-radius:14px; padding:4px 12px; font-size:12px; color:var(--link); cursor:pointer; }

.sf-catsec { margin-bottom:26px; }
.sf-cathead { font-size:15px; color:var(--title-color); margin:0 0 14px; font-weight:600; }
.sf-cathead span { color:#999; font-weight:400; font-size:13px; }

/* ============================================================= */
/* Details-Flyout                                                */
/* ============================================================= */
.flyout-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.28); z-index:150; }
.details-flyout { position:fixed; top:0; right:0; width:340px; max-width:90vw; height:100%; background:var(--card-bg); border-left:1px solid var(--card-border); box-shadow:-10px 0 40px rgba(0,0,0,.2); z-index:160; transform:translateX(100%); transition:transform .2s ease; padding:22px; overflow-y:auto; }
.details-flyout.on { transform:none; }
.fly-head { display:flex; align-items:flex-start; gap:14px; }
.fly-ic { width:50px; height:50px; flex-shrink:0; } .fly-ic svg { width:50px; height:50px; }
.fly-head h2 { margin:0; font-size:18px; color:var(--title-color); }
.fly-cat { font-size:12px; color:#999; margin-top:4px; }
.fly-close { margin-left:auto; border:none; background:transparent; font-size:16px; color:#999; cursor:pointer; }
.fly-desc { font-size:14px; color:var(--card-text); line-height:1.6; margin:18px 0; }
.fly-meta { border-top:1px solid var(--card-border); }
.fly-meta > div { display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--card-border); font-size:13px; }
.fly-meta span { color:#999; } .fly-meta b { color:var(--title-color); font-weight:600; }
.fly-actions { display:flex; gap:10px; margin-top:20px; }
.fly-open { flex:1; border:none; background:var(--accent); color:#fff; padding:11px; border-radius:4px; font-size:14px; font-weight:600; cursor:pointer; }
.fly-open:hover { background:var(--accent-hover); }
.fly-fav { flex:1; border:1px solid var(--card-border); background:transparent; color:var(--link); padding:11px; border-radius:4px; font-size:13px; cursor:pointer; }

/* ============================================================= */
/* Verbindungs-Overlay                                           */
/* ============================================================= */
.connecting { position:fixed; inset:0; background:rgba(30,25,38,.55); z-index:300; display:flex; align-items:center; justify-content:center; }
.connecting-box { background:#fff; border-radius:8px; padding:30px 36px; width:320px; max-width:90vw; text-align:center; box-shadow:0 20px 60px rgba(0,0,0,.35); }
.connecting-ic { width:56px; height:56px; margin:0 auto 14px; } .connecting-ic svg { width:56px; height:56px; }
.connecting-title { font-size:16px; font-weight:600; color:#333; }
.connecting-sub { font-size:12.5px; color:#999; margin:6px 0 16px; }
.connecting-bar { height:6px; background:#eee; border-radius:3px; overflow:hidden; }
.connecting-fill { height:100%; width:0; background:var(--accent); }

/* ============================================================= */
/* Toasts + Snap                                                 */
/* ============================================================= */
.toasts { position:fixed; right:16px; bottom:16px; z-index:320; display:flex; flex-direction:column; gap:10px; }

/* Ablage für minimierte Fenster (ersetzt die Taskleiste) */
.min-dock { position:fixed; left:12px; bottom:12px; z-index:90; display:flex; gap:8px; flex-wrap:wrap; max-width:64vw; }
.min-item { display:flex; align-items:center; gap:8px; height:38px; padding:0 14px; border:1px solid var(--card-border); background:var(--card-bg); border-radius:8px; box-shadow:0 4px 14px rgba(0,0,0,.14); font-size:13px; color:var(--title-color); max-width:200px; cursor:pointer; }
.min-item:hover { border-color:var(--card-hover); }
.mi-ic { width:18px; height:18px; display:flex; flex-shrink:0; } .mi-ic svg { width:18px; height:18px; }
.mi-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.toast { display:flex; align-items:center; gap:12px; background:#fff; border:1px solid var(--card-border); border-left:4px solid var(--accent); border-radius:6px; padding:12px 16px; min-width:240px; max-width:330px; box-shadow:0 8px 24px rgba(0,0,0,.18); transform:translateX(130%); transition:transform .25s ease; }
.toast.on { transform:none; }
.toast-ic { width:26px; height:26px; flex-shrink:0; } .toast-ic svg { width:26px; height:26px; }
.toast-body { display:flex; flex-direction:column; }
.toast-body strong { font-size:13.5px; color:var(--title-color); } .toast-body span { font-size:12px; color:#999; }

.snap-preview { position:fixed; z-index:95; background:color-mix(in srgb, var(--accent) 22%, transparent); border:2px solid var(--accent); border-radius:6px; pointer-events:none; transition:all .07s ease; }

/* Fokus-Sichtbarkeit (Barrierefreiheit) */
.sf-card:focus-visible, .desk-card:focus-visible, .sf-tab:focus-visible, .sf-banner:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* App-Icons als PNG (aus der DB) – Größen passend zu den SVG-Containern */
.app-img { display:block; object-fit:contain; }
.sc-ic img { width:54px; height:54px; }
.win-ic img { width:17px; height:17px; }
.mi-ic img { width:18px; height:18px; }
.fly-ic img { width:50px; height:50px; }
.connecting-ic img { width:56px; height:56px; }

/* ============================================================= */
/* ADMIN-Bereich                                                 */
/* ============================================================= */
.admin-overlay { position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:400; display:flex; align-items:center; justify-content:center; padding:24px; }
.admin-panel { background:var(--card-bg); color:var(--title-color); width:920px; max-width:100%; height:82vh; max-height:730px; border-radius:10px; box-shadow:0 30px 80px rgba(0,0,0,.45); display:flex; flex-direction:column; overflow:hidden; }
.admin-head { display:flex; align-items:center; gap:14px; padding:16px 20px; border-bottom:1px solid var(--card-border); }
.admin-head h2 { margin:0; font-size:18px; }
.admin-badge { font-size:12px; padding:3px 10px; border-radius:12px; }
.admin-badge.on { background:#e3f6ea; color:#1d7a46; } .admin-badge.off { background:#fdf0e3; color:#a5671b; }
:root[data-theme="dark"] .admin-badge.on { background:#1d3a2a; color:#6fd79e; } :root[data-theme="dark"] .admin-badge.off { background:#3a2e1d; color:#e0b36a; }
.admin-close { margin-left:auto; border:none; background:transparent; font-size:18px; color:#999; cursor:pointer; }
.admin-body { flex:1; display:flex; min-height:0; }
.admin-left { width:320px; border-right:1px solid var(--card-border); display:flex; flex-direction:column; }
.admin-list-head { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; border-bottom:1px solid var(--card-border); font-size:13px; color:#888; }
.admin-newbtn { border:1px solid var(--accent); color:var(--accent); background:transparent; border-radius:5px; padding:5px 10px; font-size:12px; cursor:pointer; }
.admin-newbtn:hover { background:var(--accent-soft); }
.admin-list { flex:1; overflow-y:auto; padding:6px; }
.admin-row { display:flex; align-items:center; gap:10px; width:100%; border:none; background:transparent; padding:8px 10px; border-radius:6px; text-align:left; cursor:pointer; }
.admin-row:hover { background:var(--accent-soft); } .admin-row.sel { background:var(--accent-soft); outline:1px solid var(--accent); }
.ar-ic { width:28px; height:28px; display:flex; flex-shrink:0; } .ar-ic svg, .ar-ic img { width:28px; height:28px; object-fit:contain; }
.ar-main { display:flex; flex-direction:column; min-width:0; } .ar-main strong { font-size:13px; } .ar-main span { font-size:11px; color:#999; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.admin-form { flex:1; overflow-y:auto; padding:18px 22px; display:flex; flex-direction:column; gap:10px; }
.admin-form h3 { margin:0 0 4px; font-size:16px; }
.af-label { display:flex; flex-direction:column; gap:4px; font-size:12.5px; color:#888; }
.af-label small { color:#aaa; font-weight:400; }
.af-label input, .af-label select, .af-label textarea { border:1px solid var(--card-border); background:var(--card-bg); color:var(--title-color); border-radius:5px; padding:8px 10px; font-size:13px; font-family:inherit; }
.af-label input:disabled { background:#f0f0f2; color:#888; } :root[data-theme="dark"] .af-label input:disabled { background:#333; }
.af-row { display:flex; gap:12px; } .af-row .af-label { flex:1; }
.af-drop { border:2px dashed var(--card-border); border-radius:8px; min-height:118px; display:flex; align-items:center; justify-content:center; cursor:pointer; text-align:center; color:#999; font-size:13px; transition:border-color .15s, background .15s; }
.af-drop:hover, .af-drop:focus-visible { border-color:var(--accent); outline:none; }
.af-drop.drag { border-color:var(--accent); background:var(--accent-soft); }
.af-drop img { max-width:96px; max-height:96px; object-fit:contain; }
.admin-actions { display:flex; gap:10px; margin-top:6px; }
.admin-save { border:none; background:var(--accent); color:#fff; padding:10px 18px; border-radius:5px; font-size:14px; font-weight:600; cursor:pointer; }
.admin-save:hover { background:var(--accent-hover); }
.admin-del { border:1px solid #e0534d; background:transparent; color:#e0534d; padding:10px 16px; border-radius:5px; font-size:13px; cursor:pointer; }
.admin-del:hover { background:#fdeceb; }
.admin-msg { font-size:13px; min-height:18px; }
.admin-msg.ok { color:#1d7a46; } .admin-msg.err { color:#c0392b; }
@media (max-width:760px){ .admin-body{flex-direction:column} .admin-left{width:auto;max-height:180px;border-right:none;border-bottom:1px solid var(--card-border)} }