/* MonHero OS — Fő stíluslap
 * ~1800 sor: design tokens, layout, komponensek, dashboard, CRM,
 * feladatok, naptár, csapat, akadémia, AI Központ, Mony AI, modal,
 * dark mode, mobil, akadálymentesség
 */

  /* ═══════════════════════════════════════════════════════════════════
     MONHERO OS — CSS TARTALOMJEGYZÉK
     ═══════════════════════════════════════════════════════════════════
     Ez a Blokk 1 (fő stíluslap, ~1770 sor). A prompt szerinti 18-szekció
     sorrend, de a jelenlegi fájlban a rétegek egymáson vannak (utólagos
     hozzáadások). Használd Ctrl+F-fel navigáláshoz.

     1. Design tokenek & változók        → :root (L14–47)
     2. Reset & globális alapstílusok    → body, h1..3, mono (L60–68)
     3. App shell & layout               → #app, #app.ready (L79–85)
     4. Navigáció & sidebar              → .sidebar, .nav-item (L118–200)
     5. Közös UI-komponensek             → .card, .badge, .btn, .avatar (L268–348)
     6. Dashboard                        → .p-*, view-dashboard.premium (L1216–1600)
     7. CRM                              → .crm-*, .crm-mony-* (L215–668)
     8. Feladatkezelés                   → .task-card (L256–260) + kis szórt szabályok
     9. Naptár & időpontok               → .cal-*, .train-cal-* (L1198–1215, 949+)
    10. Meetingek (Live Meeting)         → külön Blokk 2 (L6603+)
    11. Munkatársak & csapat             → .karr-*, .team-* (kis blokkok)
    12. Akadémia & képzések              → .akademia-*, .quiz-* (szórt)
    13. AI Központ                       → .cc-*, .cc-tab-* (L381–398)
    14. Mony AI                          → .mony-*, .p-mony-* + Blokk 3 (L6664+)
    15. Modalok & toastok                → .modal, .toast, prémium modal (L496–668, L754–768)
    16. Mobil & reszponzív szabályok     → @media (L50–70, minden szekció végén)
    17. Dark mode                        → [data-theme="dark"] felülírások (szórt)
    18. Akadálymentesség & reduced motion → prefers-reduced-motion (L253–261, L1106)

     Blokk 2 (L6603+, 7 sor): Live Meeting animációk + floating panel
     Blokk 3 (L6664+, 24 sor): Mony chat widget (globális jobb alsó gomb)
     Blokk 4 (L8262+, 9 sor): Iframe srcdoc dokumentum-stílus (Kódex export)
     Blokk 5 (L8825+, 4 sor): Karrier target button
     ═══════════════════════════════════════════════════════════════════ */

  :root{
    /* Színek — márkarendszer */
    --green-900:#0E3B27; --green-700:#146B45; --green-600:#1B7A4D; --green-500:#2E9563;
    --green-100:#E4F3EA; --green-50:#F2FAF5;
    /*  A háttér világosszürke, a kártya fehér — ez a rétegzés alapja.
        Tiszta fehér alapon nem tudna kiemelkedni a kártya.  */
    --ink:#151A17; --muted:#66756D; --line:#E7EAE7; --bg:#F2F4F2; --surface:#FFFFFF;
    --surface-2:#FAFBFA;   /* kártya a kártyán */
    --amber:#B5730A; --amber-bg:#FBF1E1; --red:#B4413A; --red-bg:#FBEEEC;

    /* Mony AI — lila akcentus */
    --mony-500:#7C3AED; --mony-400:#A78BFA; --mony-100:#EDE9FE;

    /* Elrendezés — sarkok, árnyékok */
    /*  Sarkok — nagyobbak, lágyabbak. Egyetlen skála, mindenhol ebből.  */
    --radius:22px; --radius-sm:14px; --radius-xs:11px; --radius-lg:28px; --radius-full:9999px;

    /*  Betűtípusok egy helyen. Ha vissza akarod állítani a régit,
        elég ezt a három sort átírni Inter / Space Grotesk / JetBrains Mono-ra.  */
    --betu-szoveg:'Geist', 'Inter', -apple-system, 'SF Pro Text', system-ui, 'Segoe UI', sans-serif;
    --betu-cim:'Bricolage Grotesque', 'Space Grotesk', 'Geist', sans-serif;
    --betu-szam:'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;

    /*  Árnyékok — lágyak, két rétegben. Ezek emelik ki a kártyát,
        nem a keret.  */
    --shadow-sm: 0 1px 2px rgba(16,24,32,0.04), 0 1px 1px rgba(16,24,32,0.03);
    --shadow-md: 0 2px 8px rgba(16,24,32,0.05), 0 1px 2px rgba(16,24,32,0.04);
    --shadow-lg: 0 8px 24px rgba(16,24,32,0.07), 0 2px 6px rgba(16,24,32,0.04);
    --shadow-xl: 0 20px 48px rgba(16,24,32,0.11), 0 4px 12px rgba(16,24,32,0.05);

    /* Térköz-skála (4px alapú) */
    --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px;
    --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px;

    /* Tipográfia */
    --fs-xs:11px; --fs-sm:12.5px; --fs-md:13.5px; --fs-lg:16px; --fs-xl:20px; --fs-2xl:26px;
    --fw-normal:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-black:800;

    /* Z-index rétegek (dokumentált szintek) */
    --z-base:1; --z-sticky:10; --z-header:100; --z-dropdown:1000;
    --z-tooltip:5000; --z-modal:9000; --z-live-meeting:9995; --z-widget:9998; --z-toast:10000;

    /* Animation timing */
    --dur-fast:120ms; --dur-normal:200ms; --dur-slow:350ms;
    --ease-standard:cubic-bezier(.2,.8,.2,1); --ease-emphasis:cubic-bezier(0.4,0,0.2,1);

    /* Breakpoint referenciák (JS-ből használható) */
    --bp-mobile:640px; --bp-tablet:900px; --bp-desktop:1200px;
  }

  /* ═══ Mobil érintőméretek — WCAG 2.1 AA (44×44px minimum) ═══ */
  @media (max-width: 900px){
    button, .btn, .btn-primary, .btn-secondary,
    .nav-item, [role="button"], input[type="checkbox"], input[type="radio"] {
      min-height: 44px;
    }
    button.icon-btn, .icon-btn {
      min-width: 44px; min-height: 44px;
    }
    /* Inputok: kényelmes tapintás, iOS zoom megelőzés */
    input, select, textarea {
      font-size: 16px !important; /* iOS auto-zoom kikapcsolás */
      min-height: 44px;
    }
    textarea { min-height: 88px; }
    /* Táblázat sorok tap area */
    table td, table th { padding: 12px 10px; }
  }
  [data-theme="dark"]{
    --ink:#EDF2EE; --muted:#93A099; --line:#233026; --bg:#0C120E; --surface:#121A15;
    --green-100:#173425; --green-50:#0F1E16;
    --shadow-md: 0 8px 30px rgba(0,0,0,0.45);
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html,body{height:100%;}
  body{
    font-family:var(--betu-szoveg);
    background:var(--bg); color:var(--ink); min-height:100vh;
    transition:background .35s ease, color .35s ease;
    -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
    /*  Szűkebb betűköz: nagy méretben szedettebb, kicsiben olvashatóbb  */
    letter-spacing:-.011em;
    /*  Azonos szélességű számjegyek — nem ugrálnak a számlálók  */
    font-variant-numeric:tabular-nums;
  }
  h1,h2,h3, .display{ font-family:var(--betu-cim); letter-spacing:-0.028em; }
  .mono{ font-family:var(--betu-szam); }
  button{ font-family:inherit; cursor:pointer; }
  a{ color:inherit; text-decoration:none; }

  /* ---------- App shell ---------- */
  #app{ display:none; min-height:100vh; }
  #app.ready{ display:flex; height:100vh; overflow:hidden; }
  /* keskeny kijelzőn (nincs oldalsáv) az ablak görgessen */
  @media (max-width:900px){
    #app.ready{ height:auto; min-height:100vh; overflow:visible; }
  }

  /* ---------- Auth screen ---------- */
  #authScreen{
    min-height:100vh; display:flex; align-items:center; justify-content:center;
    background:#071e13; color:#fff;
    padding:20px; position:relative; overflow:hidden;
    perspective:1400px;
  }

  /* ── Rétegzett háttér ────────────────────────────────────────
     Öt réteg, eltérő sebességgel. A --px/--py a kurzor helyzete,
     ezt egyetlen helyen állítja a JS; a CSS szorozza rétegenként. */
  #authScreen .szinpad{ position:absolute; inset:-6%; z-index:0; }
  #authScreen .r{
    position:absolute; inset:0;
    background-repeat:no-repeat; background-position:center bottom; background-size:cover;
    will-change:transform; transition:transform .5s cubic-bezier(.2,.8,.2,1);
  }
  #authScreen .r1{ background-image:radial-gradient(120% 80% at 50% 0%, #14603f 0%, #0b2c1c 55%, #071e13 100%);
    transform:translate3d(calc(var(--px,0) *  6px), calc(var(--py,0) *  4px), 0); }
  #authScreen .r2{ transform:translate3d(calc(var(--px,0) * 16px), calc(var(--py,0) * 10px), 0);
    animation:authSodrodik 26s ease-in-out infinite; }
  #authScreen .r3{ transform:translate3d(calc(var(--px,0) * 30px), calc(var(--py,0) * 18px), 0);
    animation:authSodrodik 34s ease-in-out infinite reverse; }
  #authScreen .r4{ transform:translate3d(calc(var(--px,0) * 52px), calc(var(--py,0) * 30px), 0); }
  #authScreen .r5{ transform:translate3d(calc(var(--px,0) * 84px), calc(var(--py,0) * 46px), 0); }
  @keyframes authSodrodik{
    0%,100%{ background-position:center bottom; }
    50%    { background-position:53% bottom; }
  }
  #authScreen .kod{
    position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(to bottom, rgba(7,30,19,.62) 0%, transparent 38%, rgba(7,30,19,.55) 100%);
  }
  #authScreen .szemcse{
    position:absolute; inset:0; opacity:.05; pointer-events:none;
    background-image:radial-gradient(#fff 1px, transparent 1px); background-size:3px 3px;
  }
  /* Animált rács-háttér: az egér alatti cellák zölden felvillannak, majd lassan elhalványulnak */
  #authGrid{
    position:absolute; inset:0; z-index:0;
    display:grid; gap:1px; background:#E8F0EA;
  }
  #authGrid .gcell{ background:#fff; transition: background 1.6s ease-out; }
  #authGrid .gcell.on{ background:#16A34A; transition: background 0s; }
  #authGrid .gcell.on2{ background:#4ADE80; transition: background 0s; }
  /* Fehér elmosás a kártya körül, hogy a rács ne zavarjon */
  #authVeil{
    position:absolute; inset:0; z-index:1; pointer-events:none;
    background: radial-gradient(ellipse 620px 520px at 50% 50%, rgba(255,255,255,.95) 0%, rgba(255,255,255,.72) 38%, rgba(255,255,255,0) 70%);
  }
  /* ── Üvegkártya ─────────────────────────────────────────────── */
  .auth-card{
    width:100%; max-width:400px;
    background:rgba(255,255,255,.10);
    border:1px solid rgba(255,255,255,.18);
    border-radius:31px; padding:34px 32px 30px;
    backdrop-filter:blur(24px) saturate(1.35);
    -webkit-backdrop-filter:blur(24px) saturate(1.35);
    box-shadow:0 30px 70px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.22);
    position:relative; z-index:2; text-align:center;
    transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
    transition:transform .25s cubic-bezier(.2,.8,.2,1);
    animation:authErkezes .7s cubic-bezier(.2,.9,.2,1) both;
  }
  @keyframes authErkezes{
    from{ opacity:0; transform:translateY(26px) scale(.96); }
    to  { opacity:1; transform:none; }
  }
  /* Fénycsík a kurzor körül */
  .auth-card::before{
    content:''; position:absolute; inset:0; border-radius:31px; pointer-events:none;
    background:radial-gradient(340px circle at var(--mx,50%) var(--my,0%),
               rgba(255,255,255,.16), transparent 60%);
    opacity:0; transition:opacity .3s;
  }
  .auth-card:hover::before{ opacity:1; }

  /* A kártya belseje sötét háttéren */
  .auth-card .auth-intro{ color:rgba(255,255,255,.72); }
  .auth-card .auth-intro-co{ color:#fff; }
  .auth-card .field label{ color:rgba(255,255,255,.78); }
  .auth-card input{
    background:rgba(255,255,255,.07) !important;
    border-color:rgba(255,255,255,.18) !important;
    color:#fff !important;
  }
  .auth-card input::placeholder{ color:rgba(255,255,255,.38); }
  .auth-card input:focus{
    border-color:#6fd6a5 !important;
    box-shadow:0 0 0 4px rgba(111,214,165,.16) !important;
  }
  .auth-card .auth-switch a{ color:#6fd6a5; }
  .auth-card .field{ text-align:left; }

  @media (prefers-reduced-motion: reduce){
    #authScreen .r, .auth-card{ transition:none; animation:none; transform:none !important; }
  }
  @media (hover:none){
    #authScreen .r{ transform:none !important; }
    .auth-card{ transform:none !important; }
  }

  /* A logó és a név középen */
  .auth-brand{ display:flex; align-items:center; gap:10px; margin-bottom:22px; }
  .auth-brand-kozep{ flex-direction:column; gap:8px; margin-bottom:18px; }
  .auth-brand-kozep .brand-mark{ width:52px; height:52px; border-radius:19px;
    background:rgba(255,255,255,.12); padding:8px; }
  .auth-brand-kozep .auth-brand-name{ font-size:14px; letter-spacing:.04em;
    text-transform:uppercase; opacity:.65; font-weight:700; }
  .brand-mark{
    width:32px; height:32px; border-radius:11px;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0; overflow:hidden;
  }
  .brand-mark img{ width:100%; height:100%; object-fit:contain; }
  .auth-brand-name{ font-weight:600; font-size:16px; }
  .auth-title{ font-size:29px; font-weight:800; letter-spacing:-.02em; margin-bottom:5px; }
  .auth-sub{ font-size:13.5px; color:rgba(255,255,255,.72); margin-bottom:24px; }
  .field{ display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
  .field label{ font-size:12.5px; font-weight:600; }
  input:not([type]), input[type=text], input[type=email], input[type=password],
  input[type=number], input[type=tel], input[type=url], input[type=search],
  textarea{
    border:1px solid var(--line); border-radius:var(--radius-sm); padding:10px 12px;
    font-size:13.5px; font-family:inherit; background:var(--bg); color:var(--ink); width:100%;
    transition:border-color .15s ease, box-shadow .15s ease;
  }
  input:focus, textarea:focus{ outline:none; border-color:var(--green-500); box-shadow:0 0 0 3px var(--green-100); }
  .btn-primary{
    padding:11px 20px; border-radius:var(--radius-sm); border:none; background:var(--green-600);
    color:white; font-size:13.5px; font-weight:600; width:100%; box-shadow:var(--shadow-sm);
    display:flex; align-items:center; justify-content:center; gap:7px;
  }
  .btn-primary:hover{ background:var(--green-700); }
  .btn-primary:disabled{ opacity:.6; cursor:default; }
  .auth-switch{ text-align:center; font-size:12.5px; color:var(--muted); margin-top:16px; }
  .auth-switch a{ color:var(--green-600); font-weight:600; }
  .auth-error{
    background:var(--red-bg); color:var(--red); font-size:12.5px; padding:9px 12px;
    border-radius:var(--radius-sm); margin-bottom:14px; display:none;
  }
  .auth-error.show{ display:block; }
  .auth-note{
    font-size:11px; color:var(--muted); margin-top:16px; padding-top:14px; border-top:1px solid var(--line);
    line-height:1.5;
  }

  /* ---------- Sidebar ---------- */
  .sidebar{ width:248px; flex-shrink:0; background:var(--surface); border-right:1px solid var(--line); padding:20px 14px; display:flex; flex-direction:column; gap:4px; height:100vh; position:sticky; top:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; transition:width .25s ease, padding .25s ease; }
  .sidebar.icon-only{ width:68px; padding:20px 8px; }
  .sidebar.icon-only .brand-sub, .sidebar.icon-only .brand-text{ display:none; }
  .sidebar.icon-only .brand{ justify-content:center; }
  /* ── Icon-only mód ────────────────────────────────────────────
     Csak a FŐ menük (Áttekintés, Termelés, Tanterem, Közösség,
     Vezetői központ, Fiók) ikonjai látszanak. Az almenük egy
     kinyíló panelben jelennek meg a szekcióra kattintva — így
     nem zsúfolódik 30 ikon egymás alá. */
  .sidebar .nav-section-icon{ display:none; }
  .sidebar .nav-section-icon svg{ width:20px; height:20px; }

  .sidebar.icon-only .nav-section-icon{ display:flex; align-items:center; justify-content:center; }
  .sidebar.icon-only .nav-section-label{
    display:flex; justify-content:center; align-items:center;
    padding:11px 0; margin:3px 0; border-radius:14px;
    cursor:pointer; position:relative; font-size:0; letter-spacing:0;
    transition:background .15s ease, color .15s ease;
  }
  .sidebar.icon-only .nav-section-label:hover{ background:var(--green-50); color:var(--ink); }
  .sidebar.icon-only .nav-section-label.flyout-open{ background:var(--green-100); color:var(--green-700); }
  .sidebar.icon-only .nav-section-label .chev{ display:none; }

  /* Az almenü alapból rejtve — csak kattintásra, panelként */
  .sidebar.icon-only .nav-section-items{ display:none; }

  /* A szekció neve buborékban, hoverre */
  .sidebar.icon-only .nav-section-label::after{
    content: attr(data-title); position:absolute; left:calc(100% + 10px); top:50%; transform:translateY(-50%);
    background:var(--ink); color:#fff; padding:5px 10px; border-radius:8px; font-size:12px; font-weight:500;
    white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .15s; z-index:1000;
    box-shadow:0 4px 12px rgba(0,0,0,0.15);
  }
  .sidebar.icon-only .nav-section-label:hover::after{ opacity:1; }
  .sidebar.icon-only .nav-section-label.flyout-open::after{ opacity:0; }

  /* Kinyíló panel — fixed, hogy a sidebar görgetése ne vágja le */
  .nav-flyout{
    position:fixed; z-index:1400; min-width:226px; max-width:280px;
    max-height:74vh; overflow-y:auto;
    background:var(--surface); border:1px solid var(--line);
    border-radius:18px; padding:7px;
    box-shadow:0 14px 44px rgba(0,0,0,.15);
    display:flex !important; flex-direction:column; gap:2px;
    animation:navFlyIn .16s var(--ease-out, ease-out);
  }
  @keyframes navFlyIn{ from{ opacity:0; transform:translateX(-6px); } to{ opacity:1; transform:none; } }
  .nav-flyout-title{
    font-size:10.5px; text-transform:uppercase; letter-spacing:.06em;
    color:var(--muted); font-weight:700; padding:5px 10px 7px;
  }
  .nav-flyout .nav-item{
    display:flex !important; align-items:center; gap:10px;
    padding:9px 11px; font-size:13px; justify-content:flex-start;
  }
  .nav-flyout .nav-item svg{ width:17px; height:17px; }
  .nav-flyout .nav-item::after{ display:none; }

  /* A sidebar sávjában maradó elemek (pl. Dashboard) ikonként */
  .sidebar.icon-only .nav-item{ padding:10px 0; justify-content:center; position:relative; font-size:0; gap:0; }
  .sidebar.icon-only .nav-item > *:not(svg){ display:none; }
  .sidebar.icon-only .nav-item svg{ width:20px; height:20px; opacity:1; }
  .sidebar.icon-only .nav-item::after{
    content: attr(data-label); position:absolute; left:calc(100% + 10px); top:50%; transform:translateY(-50%);
    background:var(--ink); color:#fff; padding:5px 10px; border-radius:8px; font-size:12px; font-weight:500;
    white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .15s; z-index:1000;
    box-shadow:0 4px 12px rgba(0,0,0,0.15);
  }
  .sidebar.icon-only .nav-item:hover::after{ opacity:1; }
  .sidebar.icon-only .sidebar-footer{ flex-direction:column; padding:8px 4px; gap:6px; }
  .sidebar.icon-only .sidebar-footer > *:not(.logout-btn):not(.avatar){ display:none; }
  .sidebar.icon-only #sbCollapseBtn .sbCollapseLabel{ display:none; }
  .sidebar.icon-only #sbCollapseBtn{ width:36px; padding:0; }
  .sidebar.icon-only #sbCollapseBtn .sbCollapseIcon{ transform:rotate(180deg); }
  #sbCollapseRow{ display:flex; padding:4px 2px 10px; border-bottom:1px solid var(--line); margin-bottom:8px; }
  .sidebar.icon-only #sbCollapseRow{ justify-content:center; padding:2px 0 10px; }
  #sbCollapseBtn{
    width:100%; height:34px; padding:0 12px; border-radius:11px; border:1px solid var(--line);
    background:var(--bg); color:var(--muted); cursor:pointer;
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    font-size:11.5px; font-weight:600; letter-spacing:.02em;
    transition:background .15s, color .15s, border-color .15s;
  }
  #sbCollapseBtn:hover{ background:var(--surface); color:var(--ink); border-color:var(--green-400,#6FCF97); }
  #sbCollapseBtn .sbCollapseIcon{ transition:transform .35s cubic-bezier(.4,0,.2,1); flex-shrink:0; }
  #sbCollapseBtn:hover .sbCollapseIcon{ transform:translateX(-3px); }
  .sidebar.icon-only #sbCollapseBtn:hover .sbCollapseIcon{ transform:rotate(180deg) translateX(-3px); }
  /* vékony görgetősáv a menüben, csak ha tényleg kell */
  .sidebar::-webkit-scrollbar{ width:6px; }
  .sidebar::-webkit-scrollbar-thumb{ background:var(--line); border-radius:3px; }
  .sidebar::-webkit-scrollbar-track{ background:transparent; }
  .brand{ display:flex; align-items:center; gap:10px; padding:6px 8px 22px 8px; }
  .brand-sub{ font-size:11px; color:var(--muted); margin-top:-2px;}
  .nav-section-label{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); padding:14px 10px 6px 10px; font-weight:600; user-select:none; display:flex; align-items:center; gap:6px; transition:color .15s; }
  .nav-section-label.clickable{ cursor:pointer; }
  .nav-section-label.clickable:hover{ color:var(--ink); }
  .nav-section-label .chev{ margin-left:auto; transition:transform .25s ease; font-size:10px; opacity:.6; }
  .nav-section-label.collapsed .chev{ transform:rotate(-90deg); }
  .nav-section-items{ display:grid; grid-template-rows:1fr; transition:grid-template-rows .28s ease; }
  .nav-section-items.collapsed{ grid-template-rows:0fr; }
  .nav-section-inner{ overflow:hidden; min-height:0; }
  /* ── Folyékony üveg kijelölés ────────────────────────────────
     A kijelölés nem ugrik: átfolyik az új menüpontba. Útközben
     megnyúlik a mozgás irányában, érkezéskor visszaugrik. */
  .sidebar{ position:relative; }
  .nav-uveg{
    position:absolute; left:8px; right:8px; top:0; height:0; z-index:0;
    border-radius:var(--radius-sm); opacity:0; pointer-events:none;
    background:linear-gradient(135deg, rgba(26,165,104,.17), rgba(26,165,104,.09));
    backdrop-filter:blur(10px) saturate(1.4);
    -webkit-backdrop-filter:blur(10px) saturate(1.4);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.65), 0 3px 12px rgba(26,165,104,.15);
    transition:top .34s cubic-bezier(.34,1.5,.44,1),
               height .34s cubic-bezier(.34,1.5,.44,1),
               transform .34s cubic-bezier(.34,1.5,.44,1),
               opacity .18s;
    will-change:top,height,transform;
  }
  .nav-uveg.lathato{ opacity:1; }
  /*  A becsukott szakasz elrejti a tartalmát — ilyenkor az üveg is tűnjön el  */
  .nav-section-items.collapsed{ overflow:hidden; }
  .nav-uveg.nyulik-le{ transform:scaleY(1.14); transform-origin:top center; }
  .nav-uveg.nyulik-fel{ transform:scaleY(1.14); transform-origin:bottom center; }
  .nav-uveg::after{
    content:''; position:absolute; inset:0; border-radius:inherit; opacity:0;
    background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.5) 50%, transparent 70%);
  }
  .nav-uveg.villan::after{ animation:navAtfut .42s ease-out; }
  @keyframes navAtfut{
    from{ opacity:.85; transform:translateX(-55%); }
    to  { opacity:0;   transform:translateX(55%); }
  }
  [data-theme="dark"] .nav-uveg{
    background:linear-gradient(135deg, rgba(26,165,104,.24), rgba(26,165,104,.13));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 3px 12px rgba(0,0,0,.25);
  }
  /* Görgetéskor és összecsukott sávban ne lógjon ki */
  .sidebar.icon-only .nav-uveg{ left:6px; right:6px; }
  @media (prefers-reduced-motion: reduce){
    .nav-uveg{ transition:opacity .18s; }
    .nav-uveg.villan::after{ animation:none; }
  }

  .nav-item{ position:relative; z-index:1; display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:var(--radius-sm); font-size:13.5px; font-weight:500; color:var(--muted); transition:color .3s ease, transform .16s var(--ease-out); }
  .nav-item svg{ width:17px; height:17px; flex-shrink:0; opacity:.85;}
  .nav-item:hover{ background:var(--green-50); color:var(--ink); cursor:pointer; transform:translateX(2px); }
  .nav-item.active{ background:transparent; color:var(--green-700); font-weight:600; }
  [data-theme="dark"] .nav-item.active{ color:var(--green-500); }
  .nav-item.disabled{ opacity:.4; cursor:default; }
  .nav-item.disabled:hover{ background:none; color:var(--muted); }
  .soon-tag{ margin-left:auto; font-size:9.5px; padding:2px 6px; border-radius:25px; background:var(--line); color:var(--muted); font-weight:600; }
  .sidebar-footer{ margin-top:auto; padding-top:14px; border-top:1px solid var(--line); display:flex; align-items:center; gap:9px; padding-left:8px; }
  .avatar{ width:28px; height:28px; border-radius:50%; background:var(--green-100); color:var(--green-700); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; flex-shrink:0; overflow:hidden; }
  .avatar img{ width:100%; height:100%; border-radius:50%; object-fit:cover; image-rendering:auto; -webkit-backface-visibility:hidden; backface-visibility:hidden; }
  .footer-name{ font-size:12.5px; font-weight:600; }
  .footer-role{ font-size:11px; color:var(--muted); }
  .logout-btn{ margin-left:auto; color:var(--muted); background:none; border:none; padding:6px; border-radius:10px; }
  .logout-btn:hover{ background:var(--red-bg); color:var(--red); }
  .logout-btn svg{ width:15px; height:15px; }

  /* ---------- Main ---------- */
  .main{ flex:1; display:flex; flex-direction:column; min-width:0; }
  .topbar{ height:60px; flex-shrink:0; display:flex; align-items:center; justify-content:space-between; padding:0 28px; border-bottom:1px solid var(--line); background:var(--surface); }
  .topbar-title{ font-size:15px; font-weight:600; }
  .topbar-date{ font-size:12px; color:var(--muted); margin-top:1px;}
  .icon-btn{ width:34px; height:34px; border-radius:13px; border:1px solid var(--line); background:var(--surface); display:flex; align-items:center; justify-content:center; color:var(--muted); transition:all .15s ease; }
  .icon-btn:hover{ background:var(--green-50); color:var(--green-700); border-color:var(--green-100); }
  .icon-btn svg{ width:16px; height:16px; }
  .content{ flex:1; overflow-y:auto; padding:28px; }
  /* ── CRM: Mony figyelő-robot ─────────────────────────────── */
  @keyframes crmMonyFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-3px); } }
  .crm-mony-body{ animation:crmMonyFloat 3s ease-in-out infinite; transform-origin:center; }

  /* pislogás */
  @keyframes crmMonyBlink{ 0%,92%,100%{ transform:scaleY(1); } 96%{ transform:scaleY(0.1); } }
  /* körbenézés — jobbra-balra pásztáz, mintha átnézné a listát */
  @keyframes crmMonyLook{
    0%,18%{ transform:translateX(0); }
    28%,44%{ transform:translateX(3.5px); }
    54%,70%{ transform:translateX(-3.5px); }
    80%,100%{ transform:translateX(0); }
  }
  .crm-mony-eyes{ animation:crmMonyBlink 4.4s ease-in-out infinite, crmMonyLook 6s ease-in-out infinite; transform-origin:36px 33px; transform-box:fill-box; }

  /* antenna villog, amikor "észrevesz" valamit */
  @keyframes crmMonyAntenna{ 0%,100%{ opacity:1; r:3.5; } 50%{ opacity:.45; r:4.4; } }
  .crm-mony-antenna{ animation:crmMonyAntenna 1.8s ease-in-out infinite; }

  /* nagyító mozog, mintha vizsgálna */
  @keyframes crmMonyScan{ 0%,100%{ transform:rotate(0deg); } 50%{ transform:rotate(-9deg); } }
  .crm-mony-arm{ animation:crmMonyScan 2.6s ease-in-out infinite; transform-origin:52px 55px; transform-box:fill-box; }

  /* szkennelő kör: kifut, majd eltűnik */
  @keyframes crmMonyPulse{
    0%{ r:16; opacity:0; }
    35%{ opacity:.5; }
    100%{ r:34; opacity:0; }
  }
  .crm-mony-scan{ animation:crmMonyPulse 3.4s ease-out infinite; }

  /* ha van elmaradás, a robot élénkebb: gyorsabb antenna + piros árnyalat */
  #crmInsights.has-alert .crm-mony-antenna{ animation-duration:.75s; fill:var(--red); }
  #crmInsights.has-alert .crm-mony-scan{ stroke:var(--red); animation-duration:2s; }

  @media (prefers-reduced-motion: reduce){
    .crm-mony-body, .crm-mony-eyes, .crm-mony-antenna, .crm-mony-arm, .crm-mony-scan{ animation:none; }
    /* Globális szabály: minden folyamatos (infinite) animáció leáll, tranzíciók lerövidülnek */
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }

  /* ── CRM szűrőpanel ── */
  .crm-flabel{ display:block; font-size:10.5px; color:var(--muted); font-weight:600; margin-bottom:3px; }
  .task-card{ background:var(--surface); border:1px solid var(--line); border-radius:15px; padding:12px 14px; display:flex; flex-direction:column; gap:8px; box-shadow:var(--shadow-sm); transition:box-shadow .15s ease, transform .15s ease; }
  .task-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-1px); }
  .task-card-head{ display:flex; gap:10px; align-items:flex-start; }
  .task-card-title{ font-weight:600; font-size:13.5px; line-height:1.3; }
  .task-card-desc{ font-size:11.5px; color:var(--muted); margin-top:3px; white-space:pre-wrap; }
  .task-card-foot{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding-top:6px; border-top:1px solid var(--line); }
  .task-card-due{ font-size:10.5px; font-weight:600; padding:3px 8px; border-radius:25px; white-space:nowrap; }
  .task-chips{ display:flex; gap:-4px; align-items:center; }
  .task-chip{ width:22px; height:22px; border-radius:50%; background:var(--green-100); color:var(--green-700); display:inline-flex; align-items:center; justify-content:center; font-size:9px; font-weight:700; margin-left:-4px; border:2px solid var(--surface); overflow:hidden; }
  .task-chip:first-child{ margin-left:0; }
  .crm-fsel, .crm-finp{ width:100%; border:1px solid var(--line); border-radius:10px; padding:6px 8px; font-size:12px; background:var(--bg); color:var(--ink); }

  .view{ display:none; animation:fadeUp .35s ease both; }
  .view.active{ display:block; }

  /* ── Középre igazítás ──────────────────────────────────────
     A nézet tartalma középre kerül, ha van hely mellette.
     A szélesség-korlátos blokkok (inline max-width) sem tapadnak balra. */
  .content{ display:flex; flex-direction:column; align-items:center; }
  .view{ width:100%; max-width:1500px; }
  .view.active > .card[style*="max-width"],
  .view.active > div[style*="max-width"],
  .view.active > .grid[style*="max-width"],
  .view.active > table[style*="max-width"]{ margin-left:auto; margin-right:auto; }
  .view .page-head{ width:100%; }
  @keyframes fadeUp{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }

  .page-head{ margin-bottom:22px; }
  .page-head h1{ font-size:22px; font-weight:600; }
  .page-head p{ color:var(--muted); font-size:13.5px; margin-top:3px; }

  .grid{ display:grid; gap:14px; grid-template-columns:repeat(4, 1fr); }
  .card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow-sm); transition:box-shadow .25s var(--ease-out), transform .25s var(--ease-out), border-color .25s ease; }
  .card:hover{ box-shadow:var(--shadow-md); transform:translateY(-2px); }
  .card-label{ font-size:12px; color:var(--muted); font-weight:500; }
  .card-value{ font-size:26px; font-weight:700; margin-top:8px; font-family:var(--betu-cim); }
  .card-sub{ font-size:12px; color:var(--muted); margin-top:4px; }
  .span-2{ grid-column: span 2; } .span-4{ grid-column: span 4; }
  .row-title{ display:flex; align-items:center; justify-content:space-between; margin-bottom:2px; }
  .row-title h3{ font-size:14px; font-weight:600; }
  .link-mini{ font-size:12px; color:var(--green-600); font-weight:600; cursor:pointer; }
  .link-mini:hover{ text-decoration:underline; }

  .empty-state{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:26px 10px; color:var(--muted); }
  .empty-state svg{ width:30px; height:30px; margin-bottom:10px; opacity:.5; }
  .empty-state .es-title{ font-size:13px; font-weight:600; color:var(--ink); }
  .empty-state .es-sub{ font-size:12px; margin-top:3px; max-width:260px; }
  .empty-cta{ margin-top:12px; font-size:12.5px; font-weight:600; color:white; background:var(--green-600); padding:7px 14px; border-radius:25px; border:none; }
  .empty-cta:hover{ background:var(--green-700); }

  .streak-card{ display:flex; align-items:center; gap:16px; }
  .ring-wrap{ position:relative; width:74px; height:74px; flex-shrink:0; }
  .ring-wrap svg{ transform:rotate(-90deg); }
  .ring-bg{ fill:none; stroke:var(--line); stroke-width:7; }
  .ring-fg{ fill:none; stroke:var(--green-500); stroke-width:7; stroke-linecap:round; transition:stroke-dashoffset .6s ease; }
  .ring-center{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; }
  .ring-num{ font-family:var(--betu-cim); font-weight:700; font-size:19px; }
  .ring-cap{ font-size:9px; color:var(--muted); }

  .eval-list-item{ display:flex; align-items:center; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--line); font-size:13px; }
  .eval-list-item:last-child{ border-bottom:none; }
  .badge{ font-size:11px; padding:2px 8px; border-radius:25px; font-weight:600; }
  /* Mony robot animáció a CRM tab-on */
  .crm-mony-tab .mony-bot{ color:var(--green-600); transition:transform .3s ease; }
  .crm-mony-tab:hover .mony-bot{ transform:translateY(-1px) rotate(-4deg); }
  .crm-mony-tab.selected .mony-bot{ color:#fff; }
  .crm-mony-tab .mony-bot .mony-eye{ animation:monyBlink 4s ease-in-out infinite; transform-origin:center; }
  .crm-mony-tab .mony-bot .mony-spark{ animation:monySpark 2.2s ease-in-out infinite; }
  .crm-mony-tab .mony-bot .mony-antenna{ animation:monyAntenna 2.2s ease-in-out infinite; }
  @keyframes monyBlink { 0%,90%,100%{ transform:scaleY(1);} 93%,97%{ transform:scaleY(.1);} }
  @keyframes monySpark { 0%,100%{ opacity:.35; transform:translateY(0) scale(1);} 50%{ opacity:1; transform:translateY(-1px) scale(1.35);} }
  @keyframes monyAntenna { 0%,100%{ opacity:.6;} 50%{ opacity:1;} }
  .badge-green{ background:var(--green-100); color:var(--green-700); }
  .badge-amber{ background:var(--amber-bg); color:var(--amber); }
  .badge-red{ background:var(--red-bg); color:var(--red); }

  table{ width:100%; border-collapse:collapse; font-size:13px; }
  th{ text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); padding:8px 10px; border-bottom:1px solid var(--line); }
  td{ padding:10px; border-bottom:1px solid var(--line); }
  tr:last-child td{ border-bottom:none; }

  .form-wrap{ max-width:760px; margin:0 auto; }
  .form-section{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:22px 24px; margin-bottom:16px; }
  .form-section h3{ font-size:14.5px; font-weight:600; margin-bottom:4px; }
  .form-section .fs-desc{ font-size:12.5px; color:var(--muted); margin-bottom:16px; }

  /* -- Munkatárs kártya tabek -- */
  .emp-tabs { display:flex; gap:4px; border-bottom:1px solid var(--line); margin:0 -4px 16px; padding:0 4px; overflow-x:auto; }
  .emp-tab { background:none; border:none; padding:10px 14px; font-size:12.5px; font-weight:600; color:var(--muted); cursor:pointer; border-bottom:2px solid transparent; white-space:nowrap; transition:color .15s, border-color .15s; }
  .emp-tab:hover { color:var(--ink); }
  .emp-tab.active { color:var(--green-700); border-bottom-color:var(--green-600); }
  .emp-tabpane { display:none; }
  .emp-tabpane.active { display:block; }

  /* -- Munkatárs modal V2: sidebar navigáció -- */
  .emp-modal-v2 .emp-tab-v2 {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: 10px;
    background: transparent; color: var(--muted);
    font-size: 13px; font-weight: 500;
    border: none; cursor: pointer;
    text-align: left; width: 100%;
    justify-content: flex-start;
    transition: background .15s, color .15s;
    font-family: inherit;
  }
  .emp-modal-v2 .emp-tab-v2:hover { background: var(--surface); color: var(--ink); }
  .emp-modal-v2 .emp-tab-v2.active {
    background: var(--green-100);
    color: var(--green-700);
    font-weight: 700;
  }
  .emp-modal-v2 .emp-tab-v2.active svg { stroke: var(--green-700); }
  @media (max-width: 720px) {
    .emp-modal-v2 .emp-modal-body { grid-template-columns: 1fr !important; }
    .emp-modal-v2 .emp-sidebar { display: none !important; }
  }

  /* -- AI Központ tabek -- */
  .cc-tabs { display:flex; gap:6px; border-bottom:1px solid var(--line); margin-bottom:18px; overflow-x:auto; padding-bottom:0; }
  .cc-tab { background:none; border:none; padding:12px 18px; font-size:13.5px; font-weight:600; color:var(--muted); cursor:pointer; border-bottom:3px solid transparent; white-space:nowrap; transition:color .15s, border-color .15s; }
  .cc-tab:hover { color:var(--ink); }
  .cc-tab.active { color:var(--green-700); border-bottom-color:var(--green-600); }
  .cc-tabpane { display:none; }
  .cc-tabpane.active { display:block; }
  /* Collapsible szekció fejek */
  .cc-tabpane .card > .row-title { cursor: pointer; user-select: none; }
  .cc-tabpane .card.cc-collapsed > *:not(.row-title) { display: none !important; }
  .cc-tabpane .card > .row-title::after { content: '▼'; margin-left: auto; font-size: 10px; color: var(--muted); transition: transform .18s ease; }
  .cc-tabpane .card.cc-collapsed > .row-title::after { transform: rotate(-90deg); }

  /* Súgó tooltip felülírja a card overflow:hidden-t */
  .p-card:has(.help-tip:hover) { overflow: visible !important; }
  .card:has(.help-tip:hover) { overflow: visible !important; }
  .modal-box:has(.help-tip:hover) { overflow: visible !important; }

  /* -- Súgó tooltip (kérdőjel + JS pozícionált popup) -- */
  .help-tip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--green-600, #12864B);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    font-family: 'Inter', sans-serif;
    cursor: help;
    margin-left: 8px;
    vertical-align: middle;
    transition: transform .15s, box-shadow .15s;
    user-select: none;
    box-shadow: 0 2px 6px rgba(18,134,75,0.35);
  }
  .help-tip:hover { transform: scale(1.15); box-shadow: 0 4px 12px rgba(18,134,75,0.55); }
  .help-tip::before { content: '?'; line-height: 1; }
  .help-tip-popup {
    position: fixed;
    background: #10263C;
    color: #fff;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
    max-width: 280px;
    text-align: left;
    z-index: 999999;
    pointer-events: none;
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
    opacity: 0;
    transition: opacity .12s;
  }
  .help-tip-popup.show { opacity: 1; }

  /* -- CRM prémium fejléc: KPI + AI panel -- */
  @media (max-width: 1100px) { .crm-hero { grid-template-columns: 1fr !important; } .crm-hero > div:first-child { grid-template-columns: repeat(2, 1fr) !important; } }
  .crm-kpi {
    position: relative;
    background: linear-gradient(135deg, var(--surface) 0%, var(--bg) 100%);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 14px 14px 26px 14px;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  }
  .crm-kpi:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.08); border-color: var(--green-500); }
  .crm-kpi::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--green-600), transparent); opacity: 0.9;
  }
  .crm-kpi[data-kpi="new"]::before { background: linear-gradient(90deg, #3B82F6, transparent); }
  .crm-kpi[data-kpi="hot"]::before { background: linear-gradient(90deg, #F59E0B, transparent); }
  .crm-kpi[data-kpi="es"]::before { background: linear-gradient(90deg, #A855F7, transparent); }
  .crm-kpi-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 600; }
  .crm-kpi-value { font-family: var(--betu-cim); font-size: 26px; font-weight: 700; margin-top: 2px; color: var(--ink); line-height: 1.1; }
  .crm-kpi-sub { font-size: 10.5px; color: var(--muted); margin-top: 2px; }
  .crm-kpi-spark { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 30px; opacity: 0.6; pointer-events: none; }

  .crm-ai-panel {
    position: relative;
    background: linear-gradient(135deg, #2d1b69 0%, #1a0f3d 60%, #0f0724 100%);
    border-radius: 14px; padding: 14px 16px; color: #fff;
    display: flex; flex-direction: column; gap: 4px;
    overflow: hidden;
    border: 1px solid rgba(127, 232, 164, 0.15);
    box-shadow: 0 10px 30px rgba(45, 27, 105, 0.25);
  }
  .crm-ai-glow {
    position: absolute; top: -30px; right: -30px;
    width: 120px; height: 120px; border-radius: 50%;
    background: radial-gradient(circle, rgba(127, 232, 164, 0.28), transparent 70%);
    animation: crm-ai-pulse 4s ease-in-out infinite; z-index: 1;
  }
  @keyframes crm-ai-pulse { 0%, 100% { transform: scale(1); opacity: 0.5; } 50% { transform: scale(1.15); opacity: 0.9; } }
  .crm-ai-btn {
    margin-top: 10px;
    background: rgba(127, 232, 164, 0.15); color: #7fe8a4;
    border: 1px solid rgba(127, 232, 164, 0.35);
    border-radius: 10px; padding: 7px 12px;
    font-size: 11.5px; font-weight: 600; cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
    align-self: flex-start; position: relative; z-index: 2;
  }
  .crm-ai-btn:hover { background: rgba(127, 232, 164, 0.25); border-color: #7fe8a4; color: #ffffff; }

  /* CRM ügyfélkártya: 2-oszlopos elrendezés (adatok bal, kommentek jobb) */
  @media (max-width: 900px) {
    .crm-alap-grid { grid-template-columns: 1fr !important; }
  }

  /* ═══════════════ CRM MODAL V2 — új dizájn ═══════════════ */
  .crm-modal-v2 .crm-tab-v2 {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: transparent;
    color: var(--muted);
    font-size: 13px;
    font-weight: 500;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background .15s, color .15s;
    width: 100%;
    justify-content: flex-start;
  }
  .crm-modal-v2 .crm-tab-v2:hover {
    background: var(--surface);
    color: var(--ink);
  }
  .crm-modal-v2 .crm-tab-v2.selected {
    background: var(--green-100);
    color: var(--green-700);
    font-weight: 700;
  }
  .crm-modal-v2 .crm-tab-v2.selected svg { stroke: var(--green-700); }
  .crm-tab-badge {
    margin-left: auto;
    background: var(--bg);
    color: var(--muted);
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    min-width: 20px;
    text-align: center;
  }
  .crm-tab-v2.selected .crm-tab-badge {
    background: rgba(18,134,75,0.15);
    color: var(--green-700);
  }
  .crm-quick-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ink);
    cursor: pointer;
    transition: background .15s, border-color .15s, transform .1s;
    width: 100%;
    text-align: left;
    font-family: inherit;
  }
  .crm-quick-btn:hover {
    background: var(--green-50);
    border-color: var(--green-500);
    transform: translateX(2px);
  }
  .crm-quick-btn span { font-size: 15px; }
  /*  Keskeny kepernyon a jobb panel (megjegyzesek, kapcsolatfelvetel,
      gyors muveletek) korabban egyszeruen eltunt. A telefonos appban
      ezert nem latszott a megjegyzes, pedig ott van az adatbazisban.
      Mostantol nem rejtjuk el, hanem a tartalom ALA kerul, teljes
      szelessegben -- ehhez a modal torzse egyben gorget, a harom oszlop
      pedig nem kulon-kulon. */
  @media (max-width: 1100px) {
    .crm-modal-v2 .crm-modal-body {
      grid-template-columns: 200px minmax(0, 1fr) !important;
      overflow-y: auto !important;
    }
    .crm-modal-v2 .crm-modal-content { overflow: visible !important; }
    .crm-modal-v2 .crm-right-panel {
      grid-column: 1 / -1;
      overflow: visible !important;
      border-left: 0;
      border-top: 1px solid var(--line);
    }
    .crm-modal-v2 .crm-sidebar { overflow: visible !important; }
  }
  /*  Telefonon a bal oldali fulsav eddig egyszeruen eltunt -- igy a
      Szerzodesek, Feladatok, Csalad, Ajanlasok fulek elerhetetlenek
      voltak. Mostantol vizszintes, oldalra huzhato sav lesz belole a
      tartalom felett. */
  @media (max-width: 720px) {
    /*  minmax(0,1fr) es nem 1fr: az utobbi az oszlopot a legszelesebb
        gyerek min-content merethez igazitja, es a vizszintes fulsav
        miatt az ~495px lenne -- az urlap kilogna a kepernyorol. */
    .crm-modal-v2 .crm-modal-body { grid-template-columns: minmax(0, 1fr) !important; }
    .crm-modal-v2 .crm-modal-content,
    .crm-modal-v2 .crm-right-panel { min-width: 0; }

    /*  Vizszintesen semmi ne logjon ki: a fuleken van par fix szelessegu
        sor (idopont, gyors muveletek), azok telefonon tordeljenek. */
    .crm-modal-v2 .crm-modal-content > * { max-width: 100%; }
    .crm-modal-v2 .crm-modal-content select,
    .crm-modal-v2 .crm-modal-content input,
    .crm-modal-v2 .crm-modal-content textarea { max-width: 100%; }
    .crm-modal-v2 .crm-modal-content [style*="display:flex"],
    .crm-modal-v2 .crm-modal-content [style*="display: flex"] { flex-wrap: wrap; }

    /*  A !important itt nem stilus, hanem kenyszer: az elemen inline
        `flex-direction:column; gap:2px; padding:14px 10px` ul, azt
        mashogy nem lehet felulirni. */
    .crm-modal-v2 .crm-sidebar {
      display: flex !important;
      flex-direction: row !important;
      align-items: center !important;
      gap: 6px !important;
      padding: 9px 10px !important;
      border-right: 0 !important;
      border-bottom: 1px solid var(--line);
      overflow-x: auto !important;
      overflow-y: hidden !important;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      position: sticky;
      top: 0;
      z-index: 3;
    }
    .crm-modal-v2 .crm-sidebar::-webkit-scrollbar { display: none; }
    .crm-modal-v2 .crm-sidebar > button {
      flex: 0 0 auto;
      white-space: nowrap;
      width: auto;
      padding: 8px 12px;
      font-size: 12.5px;
    }
    /*  A tanacsado-csik a sav aljan ul -- vizszintesen nincs ertelme */
    .crm-modal-v2 .crm-sidebar > div[style*="margin-top:auto"] { display: none !important; }

    /*  Lablec: egy sor, ket gomb. A ritkan hasznalt Archivalas/Torles
        ikonra fogy, a Mentes kapja a maradek helyet -- eddig harom
        sorba tordelt a felirata. */
    .crm-modal-v2 .crm-modal-footer {
      padding: 10px 12px;
      gap: 8px;
      padding-bottom: calc(10px + env(safe-area-inset-bottom));
    }
    .crm-modal-v2 .crm-modal-footer button {
      padding: 11px 12px !important;
      font-size: 13px !important;
      white-space: nowrap;
      margin-left: 0 !important;
    }
    /*  A ritkan hasznalt gomboknal csak az ikon marad -- a feliratot
        kulon span hordozza, igy kiszamithatoan tunik el (az emojira
        ::first-letter nem megbizhato). */
    .mh-gombfelirat { display: none; }
    .crm-modal-v2 .crm-modal-footer #crmArchiveBtn,
    .crm-modal-v2 .crm-modal-footer #crmDeleteBtn { padding: 11px 14px !important; font-size: 15px !important; }
    .crm-modal-v2 .crm-modal-footer .btn-primary { flex: 1; min-width: 0; }
    .crm-modal-v2 .crm-modal-footer #crmAutoSaveIndicator { display: none; }
  }
  .field-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; }
  textarea{ resize:vertical; min-height:56px; }
  .auto-pct{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--muted); margin-top:4px; }
  .pct-bar{ flex:1; height:5px; border-radius:13px; background:var(--line); overflow:hidden; }
  .pct-fill{ height:100%; background:var(--green-500); border-radius:13px; transition:width .3s ease; }
  .pct-num{ font-family:'JetBrains Mono'; font-weight:600; font-size:11.5px; min-width:34px; text-align:right; }
  .toggle-yn{ display:flex; gap:8px; }
  .akademia-path-card{ transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
  .akademia-path-card:hover{ transform: translateY(-3px) scale(1.03); box-shadow: var(--shadow-md); border-color: var(--green-500) !important; }
  .akademia-path-card:active{ transform: translateY(-1px) scale(1.01); }
  .toggle-yn button{ flex:1; padding:8px; border-radius:var(--radius-sm); border:1px solid var(--line); background:var(--bg); font-size:12.5px; font-weight:600; color:var(--muted); }
  .toggle-yn button.selected{ background:var(--green-600); border-color:var(--green-600); color:white; }
  .conditional{ display:none; margin-top:10px; }
  .conditional.show{ display:block; }
  .slider-wrap{ display:flex; align-items:center; gap:14px; }
  input[type=range]{ flex:1; accent-color: var(--green-600); height:4px; }
  .slider-num{ width:42px; height:42px; border-radius:15px; background:var(--green-600); color:white; display:flex; align-items:center; justify-content:center; font-weight:700; font-family:var(--betu-cim); flex-shrink:0; }
  .submit-row{ display:flex; justify-content:flex-end; gap:10px; padding:6px 0 40px 0; }
  .btn-secondary{ padding:10px 18px; border-radius:var(--radius-sm); border:1px solid var(--line); background:var(--surface); font-size:13.5px; font-weight:600; color:var(--ink); }
  .btn-secondary:hover{ background:var(--green-50); }
  .btn-primary.form-btn{ width:auto; }

  .toast{ position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--ink); color:var(--bg); padding:12px 20px; border-radius:15px; font-size:13px; font-weight:500; opacity:0; pointer-events:none; display:flex; align-items:center; gap:9px; box-shadow:0 10px 30px rgba(0,0,0,.25); transition:all .3s cubic-bezier(.2,.8,.2,1); z-index:12000; }
  .toast.show{ opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto; }
  .toast.error{ background:var(--red); }
  .toast svg{ width:15px; height:15px; flex-shrink:0; }

  .modal-overlay{
    position:fixed; inset:0; background:rgba(10,15,12,0.45); display:none;
    align-items:center; justify-content:center; z-index:60; padding:20px;
  }
  .modal-overlay.show{ display:flex; }
  .modal-box{
    background:var(--surface); border-radius:var(--radius); padding:24px;
    width:100%; max-width:440px; box-shadow:var(--shadow-md);
  }
  .modal-box h3{ font-size:16px; font-weight:600; margin-bottom:16px; }
  .modal-box-wide{ max-width:680px; max-height:82vh; overflow-y:auto; }
  .hist-entry{ border:1px solid var(--line); border-radius:var(--radius-sm); padding:16px; margin-bottom:12px; }
  .hist-entry-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
  .hist-entry-date{ font-size:12.5px; font-weight:600; }
  .hist-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; font-size:12.5px; margin-bottom:10px; }
  .hist-grid div span{ display:block; color:var(--muted); font-size:11px; }
  .hist-list-label{ font-size:11.5px; font-weight:600; color:var(--muted); margin-top:10px; margin-bottom:4px; }
  .hist-list{ font-size:12.5px; line-height:1.6; padding-left:16px; margin:0; }
  .hist-quote{ font-size:12.5px; color:var(--muted); font-style:italic; margin-top:10px; padding-top:10px; border-top:1px solid var(--line); }

  .kodex-item{ border:1px solid var(--line); border-radius:var(--radius); margin-bottom:10px; overflow:hidden; background:var(--surface); }
  .kodex-head{ display:flex; align-items:center; gap:12px; padding:16px 18px; cursor:pointer; user-select:none; }
  .kodex-head:hover{ background:var(--green-50); }
  .kodex-icon{ font-size:20px; flex-shrink:0; }
  .kodex-title{ font-size:14.5px; font-weight:600; flex:1; }
  .kodex-chev{ color:var(--muted); font-size:12px; transition:transform .2s ease; flex-shrink:0; }
  .kodex-item.open .kodex-chev{ transform:rotate(180deg); }
  .kodex-body{ display:none; padding:0 20px 20px 52px; font-size:13px; line-height:1.65; }
  .kodex-item.open .kodex-body{ display:block; }
  .kodex-body h4{ font-size:13.5px; font-weight:600; margin:16px 0 6px 0; color:var(--green-700); }
  [data-theme="dark"] .kodex-body h4{ color:var(--green-500); }
  .kodex-body h4:first-child{ margin-top:0; }
  .kodex-body p{ margin-bottom:10px; color:var(--ink); }
  .kodex-body ul, .kodex-body ol{ margin:0 0 12px 18px; }
  .kodex-body li{ margin-bottom:5px; }
  .kodex-body .email-block{
    background:var(--green-50); border:1px solid var(--green-100); border-radius:var(--radius-sm);
    padding:14px 16px; margin:10px 0 16px 0; font-size:12.5px; white-space:pre-wrap; line-height:1.6;
  }
  .kodex-body table{ width:100%; border-collapse:collapse; margin-bottom:14px; font-size:12.5px; }
  .kodex-body table th, .kodex-body table td{ border:1px solid var(--line); padding:6px 8px; text-align:left; vertical-align:top; }
  .kodex-body table th{ background:var(--green-50); }
  .kodex-sub{ font-size:12.5px; font-weight:600; margin:12px 0 4px 0; }

  .loading-spin{ width:16px; height:16px; border:2px solid rgba(255,255,255,.4); border-top-color:white; border-radius:50%; animation:spin .7s linear infinite; }
  @keyframes spin{ to{ transform:rotate(360deg);} }

  @media (max-width:900px){
    .grid{ grid-template-columns:repeat(2,1fr); }
    .span-2, .span-4{ grid-column:span 2; }
    .field-row{ grid-template-columns:1fr; }
    .sidebar{
      position:fixed; top:0; left:0; height:100vh; width:280px; z-index:1000;
      transform:translateX(-100%); transition:transform .28s ease;
      box-shadow:0 8px 32px rgba(0,0,0,.18);
    }
    .sidebar.open{ transform:translateX(0); }
    #sidebarOverlay{
      position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:999;
      opacity:0; pointer-events:none; transition:opacity .2s ease;
    }
    #sidebarOverlay.show{ opacity:1; pointer-events:auto; }
    #navBurger{ display:flex !important; }
    #statCards{ grid-template-columns:repeat(2,1fr) !important; }
  }
  #navBurger{
    display:none; width:38px; height:38px; align-items:center; justify-content:center;
    border-radius:13px; border:1px solid var(--line); background:var(--surface); color:var(--ink);
    cursor:pointer; margin-right:10px; flex-shrink:0;
  }
  #navBurger:hover{ background:var(--bg); }

  /* ============================================================
     PRÉMIUM RÉTEG — finomított tokenek, mikrointerakciók,
     oldalváltás-animációk. A meglévő szabályok UTÁN áll, így
     felülír, de a szerkezethez nem nyúl.
     ============================================================ */
  :root{
    --shadow-sm: 0 1px 2px rgba(15,30,20,0.05), 0 1px 3px rgba(15,30,20,0.04);
    --shadow-md: 0 2px 4px rgba(15,30,20,0.04), 0 6px 16px rgba(15,30,20,0.06), 0 16px 40px rgba(15,30,20,0.06);
    --shadow-lg: 0 4px 8px rgba(15,30,20,0.05), 0 12px 28px rgba(15,30,20,0.09), 0 32px 64px rgba(15,30,20,0.10);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --focus-ring: 0 0 0 3px rgba(46,149,99,0.25);
  }
  [data-theme="dark"]{
    --shadow-md: 0 2px 4px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.4);
    --shadow-lg: 0 4px 8px rgba(0,0,0,0.35), 0 16px 48px rgba(0,0,0,0.5);
    --focus-ring: 0 0 0 3px rgba(46,149,99,0.4);
  }

  body{ text-rendering:optimizeLegibility; }
  h1{ letter-spacing:-0.022em; }
  h2,h3{ letter-spacing:-0.014em; }

  /* --- Oldalváltás: finom belépő animáció --- */
  @keyframes viewEnter{
    from{ opacity:0; transform:translateY(8px); }
    to{ opacity:1; transform:translateY(0); }
  }
  .view.active{ animation:viewEnter .38s var(--ease-out); }

  /* --- Gombok: emelkedés hoverre, benyomódás kattintásra --- */
  .btn-primary, .btn-secondary{
    transition:transform .18s var(--ease-out), box-shadow .18s var(--ease-out),
               background .18s ease, border-color .18s ease, color .18s ease, opacity .18s ease;
    will-change:transform;
  }
  .btn-primary:hover:not(:disabled){ transform:translateY(-1px); box-shadow:0 4px 12px rgba(27,122,77,0.28); }
  .btn-primary:active:not(:disabled){ transform:translateY(0) scale(0.985); box-shadow:0 1px 4px rgba(27,122,77,0.2); }
  .btn-secondary:hover:not(:disabled){ transform:translateY(-1px); box-shadow:var(--shadow-sm); border-color:var(--green-500); }
  .btn-secondary:active:not(:disabled){ transform:translateY(0) scale(0.985); }
  button:disabled{ cursor:not-allowed; opacity:0.55; }

  /* --- Beviteli mezők: kifinomult fókusz-gyűrű --- */
  input[type="text"], input[type="number"], input[type="email"], input[type="password"], input[type="date"], textarea, select{
    transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
  }
  input:focus, textarea:focus, select:focus{
    outline:none; border-color:var(--green-500) !important; box-shadow:var(--focus-ring);
  }

  /* --- Modern select stílus: saját chevron ikonnal, natív helyett --- */
  select{
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 12px center;
    background-size:12px;
    padding-right:34px !important;
    cursor:pointer;
    font-weight:500;
  }
  select:hover{
    border-color:var(--green-500) !important;
    background-color:var(--surface);
  }
  select:focus{
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%232E9563' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  }
  body[data-theme="dark"] select{
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a3a8b4' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  }
  select option{ padding:6px 8px; }

  /* --- Akadálymentesség: billentyűzetes fókusz mindenhol látható --- */
  button:focus-visible, .nav-item:focus-visible, a:focus-visible, [onclick]:focus-visible{
    outline:none; box-shadow:var(--focus-ring); border-radius:10px;
  }

  /* --- Táblázatok: sor-hover --- */
  tbody tr{ transition:background .14s ease; }
  tbody tr:hover{ background:var(--green-50); }
  [data-theme="dark"] tbody tr:hover{ background:rgba(46,149,99,0.07); }

  /* --- Modal: belépő animáció --- */
  @keyframes modalIn{
    from{ opacity:0; transform:translateY(14px) scale(0.985); }
    to{ opacity:1; transform:translateY(0) scale(1); }
  }
  .modal-overlay{ transition:opacity .22s ease; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
  .modal-overlay.show .modal-box{ animation:modalIn .32s var(--ease-out); box-shadow:var(--shadow-lg); }

  /* --- Toast: rugós belépés --- */
  @keyframes toastIn{
    from{ opacity:0; transform:translateY(12px) scale(0.96); }
    to{ opacity:1; transform:translateY(0) scale(1); }
  }
  #toast.show{ animation:toastIn .34s var(--ease-spring); box-shadow:var(--shadow-lg); }

  /* --- Jelvények, avatarok: apró élet --- */
  .badge{ transition:transform .16s var(--ease-out); }
  .avatar{ transition:transform .2s var(--ease-spring), box-shadow .2s ease; }
  .avatar:hover{ transform:scale(1.06); }

  /* --- Kodex-foldok: sima nyitás-érzet a fejlécen --- */
  .kodex-head{ transition:background .16s ease; border-radius:13px; }
  .kodex-head:hover{ background:var(--green-50); }
  [data-theme="dark"] .kodex-head:hover{ background:rgba(46,149,99,0.07); }
  .kodex-chev{ transition:transform .28s var(--ease-out); }

  /* --- Görgetősáv: diszkrét, egységes --- */
  *::-webkit-scrollbar{ width:9px; height:9px; }
  *::-webkit-scrollbar-track{ background:transparent; }
  *::-webkit-scrollbar-thumb{ background:var(--line); border-radius:10px; border:2px solid transparent; background-clip:content-box; }
  *::-webkit-scrollbar-thumb:hover{ background:var(--muted); background-clip:content-box; }

  /* --- Betöltés: lélegző empty-state --- */
  @keyframes breathe{ 0%,100%{ opacity:0.55; } 50%{ opacity:1; } }
  .empty-state{ animation:breathe 1.8s ease-in-out infinite; }

  /* --- Kijelölés színe --- */
  ::selection{ background:rgba(46,149,99,0.22); }

  /* --- Mony AI robot: lebegés, integetés, pislogás --- */
  @keyframes monyFloat{
    0%,100%{ transform:translateY(0); }
    50%{ transform:translateY(-4px); }
  }
  .mony-body{ animation:monyFloat 3.2s ease-in-out infinite; transform-origin:center; }

  @keyframes monyWave{
    0%, 55%, 100%{ transform:rotate(0deg); }
    62%{ transform:rotate(-22deg); }
    70%{ transform:rotate(14deg); }
    78%{ transform:rotate(-22deg); }
    86%{ transform:rotate(0deg); }
  }
  .mony-arm{ animation:monyWave 4s ease-in-out infinite; transform-origin:52px 55px; }

  @keyframes monyBlink{
    0%, 93%, 100%{ transform:scaleY(1); }
    95%, 97%{ transform:scaleY(0.12); }
  }
  .mony-eyes{ animation:monyBlink 4.6s ease-in-out infinite; transform-origin:36px 33px; }

  @keyframes monyAntenna{
    0%,100%{ opacity:1; }
    50%{ opacity:0.45; }
  }
  .mony-antenna{ animation:monyAntenna 2.2s ease-in-out infinite; }

  /* --- Progressz-sávok: 0-ról töltődnek ki --- */
  @keyframes barGrow{ from{ width:0; } }
  div[style^="height:100%; width:"]{ animation: barGrow .9s var(--ease-out); }
  #salesProgressBar{ transition: width .9s var(--ease-out); }

  /* --- Donutok: cikkelyenként rajzolódnak ki --- */
  @keyframes donutIn{ from{ opacity:0; transform:scale(0.72); } to{ opacity:1; transform:scale(1); } }
  .donut-seg{ animation: donutIn .5s var(--ease-out) backwards; transform-origin:65px 65px; }
  .donut-seg:nth-child(2){ animation-delay:.07s; }
  .donut-seg:nth-child(3){ animation-delay:.14s; }
  .donut-seg:nth-child(4){ animation-delay:.21s; }
  .donut-seg:nth-child(5){ animation-delay:.28s; }
  .donut-seg:nth-child(6){ animation-delay:.35s; }

  /* --- Skeleton-betöltők --- */
  @keyframes shimmer{ from{ background-position:200% 0; } to{ background-position:-200% 0; } }
  .empty-state.skel{ animation:none; padding:14px 6px; }
  /*  Vízszintes táblákban (Projektek, Ügyfelek oszlopai) a doboz a
      tartalmára zsugorodott, a százalékos csíkok így nulla szélesek
      lettek — töltés közben üresnek látszott a lap.  */
  .empty-state.skel{ width:100%; }
  .skeleton-line{
    height:11px; border-radius:8px; margin:9px 0;
    background:linear-gradient(90deg, var(--line) 25%, var(--green-50) 50%, var(--line) 75%);
    background-size:200% 100%; animation: shimmer 1.4s linear infinite;
  }
  [data-theme="dark"] .skeleton-line{ background:linear-gradient(90deg, var(--line) 25%, rgba(46,149,99,0.12) 50%, var(--line) 75%); background-size:200% 100%; }
  .skeleton-line.w60{ width:60%; } .skeleton-line.w90{ width:90%; } .skeleton-line.w75{ width:75%; }

  /* --- Feladat-pipálás --- */
  @keyframes checkPop{ 0%{ transform:scale(1); } 45%{ transform:scale(1.35); } 100%{ transform:scale(1); } }
  #taskListContent input[type="checkbox"]{ accent-color: var(--green-600); }
  #taskListContent input[type="checkbox"]:checked{ animation: checkPop .32s var(--ease-spring); }

  /* --- Toast: megrajzolódó ikon + hibánál rázkódás --- */
  #toast svg path{ stroke-dasharray:34; stroke-dashoffset:0; }
  #toast svg.draw path{ animation: iconDraw .5s var(--ease-out) forwards; }
  @keyframes iconDraw{ from{ stroke-dashoffset:34; } to{ stroke-dashoffset:0; } }
  @keyframes toastShake{ 0%,100%{ transform:translateX(0); } 20%{ transform:translateX(-5px); } 40%{ transform:translateX(5px); } 60%{ transform:translateX(-3px); } 80%{ transform:translateX(3px); } }
  #toast.error.show{ animation: toastIn .34s var(--ease-spring), toastShake .45s .3s ease-in-out; }

  /* --- Streak-láng --- */
  @keyframes flameFlicker{
    0%,100%{ transform:scale(1) rotate(-2deg); opacity:1; }
    30%{ transform:scale(1.08) rotate(2deg); opacity:0.92; }
    60%{ transform:scale(0.95) rotate(-1deg); opacity:1; }
  }
  .streak-flame{ display:inline-block; animation: flameFlicker 1.1s ease-in-out infinite; transform-origin:50% 90%; }

  /* --- "+XP" felúszó felirat --- */
  @keyframes xpFloat{
    0%{ opacity:0; transform:translate(-50%, 0) scale(0.8); }
    18%{ opacity:1; transform:translate(-50%, -14px) scale(1.05); }
    100%{ opacity:0; transform:translate(-50%, -64px) scale(1); }
  }
  .xp-float{
    position:fixed; left:50%; top:38%; z-index:9999; pointer-events:none;
    font-family:var(--betu-cim); font-weight:700; font-size:22px; color:var(--green-600);
    text-shadow:0 2px 10px rgba(46,149,99,0.3); animation: xpFloat 1.25s var(--ease-out) forwards;
  }

  /* --- Konfetti --- */
  @keyframes confettiFall{
    0%{ transform:translateY(-10vh) rotate(0deg); opacity:1; }
    100%{ transform:translateY(105vh) rotate(660deg); opacity:0.5; }
  }
  .confetti-piece{
    position:fixed; top:0; width:9px; height:13px; z-index:9998; pointer-events:none;
    animation: confettiFall 1.5s ease-in forwards; border-radius:2px;
  }

  /* --- Mony robot reakciók --- */
  #monyRobot.listening .mony-antenna{ animation-duration:.45s; }
  #monyRobot.listening .mony-eyes circle{ r:3.8; }
  @keyframes monyNod{ 0%,100%{ transform:rotate(0deg); } 30%{ transform:rotate(5deg); } 60%{ transform:rotate(-3deg); } }
  #monyRobot.nod .mony-body{ animation: monyFloat 3.2s ease-in-out infinite, monyNod .8s var(--ease-out); }
  .wave2x .mony-arm{ animation: monyWave 1s ease-in-out 2 !important; }
  #monyRobotMini{ cursor:pointer; }

  /* --- Üres állapot illusztráció --- */
  @keyframes emptyFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-5px); } }
  .es-illu{ animation: emptyFloat 2.6s ease-in-out infinite; margin-bottom:6px; opacity:0.8; }
  .empty-state.static{ animation:none; }

  /* --- Dashboard: lépcsőzetes belépés --- */
  #view-dashboard .grid > *{ animation: viewEnter .45s var(--ease-out) backwards; }
  #view-dashboard .grid > *:nth-child(1){ animation-delay:.03s; }
  #view-dashboard .grid > *:nth-child(2){ animation-delay:.08s; }
  #view-dashboard .grid > *:nth-child(3){ animation-delay:.13s; }
  #view-dashboard .grid > *:nth-child(4){ animation-delay:.18s; }
  #view-dashboard .grid > *:nth-child(5){ animation-delay:.23s; }
  #view-dashboard .grid > *:nth-child(6){ animation-delay:.28s; }
  #view-dashboard .grid > *:nth-child(7){ animation-delay:.33s; }
  #view-dashboard .grid > *:nth-child(8){ animation-delay:.38s; }

  /* --- Tréningek: prémium nézet --- */
  .train-hero{
    background:linear-gradient(135deg, #1a4d3a 0%, #0f2e22 60%, #123527 100%);
    border-radius:var(--radius); padding:28px 30px; color:white;
    display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
    box-shadow:var(--shadow-md); position:relative; overflow:hidden;
  }
  .train-hero::after{
    content:''; position:absolute; top:-40%; right:-10%; width:340px; height:340px;
    background:radial-gradient(circle, rgba(74,222,128,0.14) 0%, transparent 70%); pointer-events:none;
  }
  .train-count-chip{
    background:rgba(255,255,255,0.09); border:1px solid rgba(255,255,255,0.14);
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
    border-radius:15px; padding:10px 14px; text-align:center; min-width:62px;
  }
  .train-count-chip .num{ font-family:var(--betu-cim); font-size:22px; font-weight:700; line-height:1; }
  .train-count-chip .lbl{ font-size:10px; opacity:0.65; margin-top:4px; text-transform:uppercase; letter-spacing:0.06em; }

  .train-cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
  .train-cal-dow{ font-size:10px; color:var(--muted); text-align:center; text-transform:uppercase; letter-spacing:0.05em; padding:4px 0; }
  .train-cal-day{
    aspect-ratio:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
    border-radius:11px; font-size:12px; cursor:default; position:relative;
    transition:background .15s ease, transform .15s var(--ease-out), color .15s ease;
  }
  .train-cal-day.has-training{ cursor:pointer; font-weight:600; }
  .train-cal-day.has-training:hover{ background:var(--green-100); transform:scale(1.12); }
  .train-cal-day .dot{ width:5px; height:5px; border-radius:50%; background:var(--green-500); margin-top:2px; }
  .train-cal-day.today{ box-shadow:inset 0 0 0 1.5px var(--green-500); }
  .train-cal-day.selected{ background:var(--green-600); color:white; }
  .train-cal-day.selected .dot{ background:white; }
  .train-cal-day.other{ opacity:0.3; }

  .train-session-card{
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
    padding:16px 18px; margin-bottom:10px; display:flex; align-items:center; gap:16px; flex-wrap:wrap;
    transition:box-shadow .22s var(--ease-out), transform .22s var(--ease-out), border-color .22s ease;
  }
  .train-session-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-2px); }
  .train-session-card.highlight{ border-color:var(--green-500); box-shadow:0 0 0 3px rgba(46,149,99,0.15); }
  .train-session-icon{
    width:44px; height:44px; border-radius:15px; background:var(--green-100);
    display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--green-700);
  }
  .train-att-btn{
    border:1.5px solid var(--line); background:var(--surface); color:var(--ink);
    border-radius:14px; padding:9px 18px; font-size:12.5px; font-weight:600; cursor:pointer;
    transition:all .2s var(--ease-out); font-family:inherit;
  }
  .train-att-btn:hover{ transform:translateY(-1px); border-color:var(--green-500); }
  .train-att-btn.on-yes{ background:var(--green-600); border-color:var(--green-600); color:white; box-shadow:0 3px 10px rgba(27,122,77,0.3); }
  .train-att-btn.on-no{ background:var(--ink); border-color:var(--ink); color:var(--surface); }
  @keyframes attPick{ 0%{ transform:scale(1); } 45%{ transform:scale(1.08); } 100%{ transform:scale(1); } }
  .train-att-btn.on-yes, .train-att-btn.on-no{ animation: attPick .3s var(--ease-spring); }

  .train-tl-item{ display:flex; gap:12px; position:relative; padding:0 0 16px 0; }
  .train-tl-item::before{
    content:''; position:absolute; left:11px; top:26px; bottom:-2px; width:2px; background:var(--line);
  }
  .train-tl-item:last-child::before{ display:none; }
  .train-tl-dot{
    width:24px; height:24px; border-radius:50%; flex-shrink:0; display:flex; align-items:center;
    justify-content:center; font-size:11px; font-weight:700; z-index:1;
  }

  .train-ai-btn{
    background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.14); color:white;
    border-radius:13px; padding:9px 12px; font-size:12px; text-align:left; cursor:pointer;
    transition:background .18s ease, transform .18s var(--ease-out); font-family:inherit;
  }
  .train-ai-btn:hover{ background:rgba(255,255,255,0.16); transform:translateX(3px); }

  /* --- Szűrő-gombok kijelölt állapota (Feladataim, Csapat, Struktúra fa) --- */
  .btn-secondary.selected{
    background:var(--green-600); border-color:var(--green-600); color:white;
    box-shadow:0 2px 8px rgba(27,122,77,0.25);
  }
  .btn-secondary.selected .badge{ background:rgba(255,255,255,0.2); color:white; }

  /* --- Ranglista 1. helyezett: csillogó név-effekt --- */
  @keyframes champShimmer{
    0%{ background-position:0% 50%; }
    100%{ background-position:200% 50%; }
  }
  @keyframes champCrown{
    0%,100%{ transform:translateY(0) rotate(-8deg); }
    50%{ transform:translateY(-2px) rotate(8deg); }
  }
  .champ-name{
    position:relative;
    font-weight:700 !important;
    background:linear-gradient(90deg, #B8860B 0%, #FFD700 20%, #FFF6C4 35%, #FFD700 50%, #E6A817 70%, #FFD700 85%, #B8860B 100%);
    background-size:200% auto;
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent;
    animation:champShimmer 2.6s linear infinite;
  }
  .champ-name::after{
    content:'👑';
    -webkit-text-fill-color:initial;
    margin-left:5px; font-size:0.85em;
    display:inline-block;
    animation:champCrown 1.6s ease-in-out infinite;
  }
  [data-theme="dark"] .champ-name{
    background:linear-gradient(90deg, #C9971A 0%, #FFD700 20%, #FFFDE7 35%, #FFD700 50%, #F0B429 70%, #FFD700 85%, #C9971A 100%);
    background-size:200% auto;
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent;
  }

  /* ============ EXTRA ANIMÁCIÓS RÉTEG ============ */

  /* Stat-kártyák belépő stagger (a nézet első kártyasoránál) */
  @keyframes statPop{ from{ opacity:0; transform:translateY(10px) scale(0.98); } to{ opacity:1; transform:translateY(0) scale(1); } }
  .view.active .grid > .card{ animation:statPop .42s var(--ease-out) both; }
  .view.active .grid > .card:nth-child(1){ animation-delay:.02s; }
  .view.active .grid > .card:nth-child(2){ animation-delay:.08s; }
  .view.active .grid > .card:nth-child(3){ animation-delay:.14s; }
  .view.active .grid > .card:nth-child(4){ animation-delay:.20s; }
  .view.active .grid > .card:nth-child(5){ animation-delay:.26s; }

  /* Ikon-buborékok a stat-kártyákban: lágy megjelenés + hover-pörgés */
  .card > div[style*="border-radius:15px"][style*="flex-shrink:0"]{ transition:transform .3s var(--ease-spring); }
  .card:hover > div[style*="border-radius:15px"][style*="flex-shrink:0"]{ transform:scale(1.08) rotate(-4deg); }

  /* Listaelemek / poszt-kártyák lágy belépés */
  @keyframes itemFade{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:translateY(0); } }
  #feedList > .card{ animation:itemFade .4s var(--ease-out) both; }
  #feedList > .card:nth-child(1){ animation-delay:.02s; }
  #feedList > .card:nth-child(2){ animation-delay:.07s; }
  #feedList > .card:nth-child(3){ animation-delay:.12s; }
  #feedList > .card:nth-child(4){ animation-delay:.17s; }
  #feedList > .card:nth-child(n+5){ animation-delay:.2s; }

  /* Gombok: fényes átsuhanás hoverre a primary gombon */
  .btn-primary{ position:relative; overflow:hidden; }
  .btn-primary::after{
    content:''; position:absolute; top:0; left:-120%; width:60%; height:100%;
    background:linear-gradient(100deg, transparent, rgba(255,255,255,0.35), transparent);
    transform:skewX(-18deg); transition:none; pointer-events:none;
  }
  .btn-primary:hover:not(:disabled)::after{ animation:btnSheen .7s var(--ease-out); }
  @keyframes btnSheen{ from{ left:-120%; } to{ left:130%; } }

  /* Jelvények: apró rugós beugrás + hover */
  @keyframes badgePop{ 0%{ transform:scale(0.6); opacity:0; } 60%{ transform:scale(1.12); } 100%{ transform:scale(1); opacity:1; } }
  .badge{ animation:badgePop .32s var(--ease-spring) both; }
  .badge:hover{ transform:scale(1.08); }

  /* Fejléc-ikon a page-head-ben: lágy lebegés */
  @keyframes headIconFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-3px); } }
  .page-head > div[style*="border-radius:16px"]{ animation:headIconFloat 3.4s ease-in-out infinite; }

  /* Progress / lead-sávok: növekedő betöltés */
  @keyframes barFill{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

  /* Donut-diagramok konténerei: lágy skálázó megjelenés */
  canvas{ animation:donutIn .5s var(--ease-out) both; }

  /* Ikon-gombok (fejléc): rugós hover */
  .icon-btn{ transition:transform .2s var(--ease-spring), background .18s ease, color .18s ease; }
  .icon-btn:hover{ transform:translateY(-1px) scale(1.06); }
  .icon-btn:active{ transform:scale(0.94); }

  /* Legördülő menük (értesítés): belépő */
  @keyframes dropIn{ from{ opacity:0; transform:translateY(-6px) scale(0.98); } to{ opacity:1; transform:translateY(0) scale(1); } }
  #notificationsDropdown[style*="block"], #feedNotifDropdown[style*="block"]{ animation:dropIn .22s var(--ease-out); }

  /* Szavazás-sávok: kitöltő animáció */
  @keyframes pollBar{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

  /* Sidebar nav-ikonok: hover-emelés */
  .nav-item svg{ transition:transform .18s var(--ease-spring); }
  .nav-item:hover svg{ transform:scale(1.12); }

  /* Lightbox belépő */
  @keyframes lightboxIn{ from{ opacity:0; } to{ opacity:1; } }
  #lightboxContent img, #lightboxContent iframe{ animation:statPop .3s var(--ease-out) both; }

  .gcal-tab{ border:none; background:transparent; padding:5px 12px; border-radius:10px; font-size:12px; font-weight:600; color:var(--muted); cursor:pointer; }
  .gcal-tab.active{ background:var(--surface); color:var(--green-700); box-shadow:0 1px 3px rgba(0,0,0,0.08); }
  /* Naptár rács — keskeny képernyőn egy oszlop */
  @media (max-width: 1000px){
    #gcalGrid{ grid-template-columns:1fr !important; }
  }
  /* Profil kétoszlopos rács — keskeny képernyőn egy oszlop */
  @media (max-width: 980px){
    #profileGrid{ grid-template-columns:1fr !important; }
    #examsGrid{ grid-template-columns:1fr !important; }
    #kanbanModalGrid{ grid-template-columns:1fr !important; }
    #appGrid{ grid-template-columns:1fr !important; }
  }

  /* --- Akadálymentesség: mozgás-érzékenyeknek minden animáció kikapcsol --- */
  @media (prefers-reduced-motion: reduce){
    *, *::before, *::after{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; }
  }

  /* ---------- Kanban tábla (új dizájn) ---------- */
  .kb-stats{ display:grid; grid-template-columns:repeat(auto-fit, minmax(190px,1fr)); gap:14px; margin:14px 0 20px 0; }
  .kb-stat{
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
    padding:16px 18px; display:flex; align-items:center; gap:14px; box-shadow:var(--shadow-sm);
  }
  .kb-stat-icon{ width:46px; height:46px; border-radius:18px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .kb-stat-icon svg{ width:22px; height:22px; }
  .kb-stat-label{ font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
  .kb-stat-value{ font-family:var(--betu-cim); font-size:28px; font-weight:700; line-height:1.15; }
  .kb-stat-sub{ font-size:11px; font-weight:600; margin-top:2px; }
  .kb-ring{ width:52px; height:52px; margin-left:auto; flex-shrink:0; }

  .kb-board{ display:flex; gap:16px; align-items:flex-start; overflow-x:auto; padding-bottom:14px; }
  .kb-col{
    flex:0 0 292px; background:var(--surface); border:1px solid var(--line);
    border-radius:var(--radius); padding:14px; min-height:160px;
    display:flex; flex-direction:column; gap:10px; transition:background .15s ease, border-color .15s ease;
  }
  .kb-col.drag-over{ background:var(--green-50); border-color:var(--green-500); }
  .kb-col-head{ display:flex; align-items:center; gap:8px; padding:2px 2px 4px 2px; }
  .kb-col-head svg{ width:16px; height:16px; flex-shrink:0; }
  .kb-col-title{ font-size:12px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; }
  .kb-count{ font-size:10.5px; font-weight:700; padding:2px 9px; border-radius:25px; background:var(--bg); border:1px solid var(--line); color:var(--muted); }
  .kb-add{
    width:100%; padding:9px; border:1px dashed var(--line); border-radius:var(--radius-sm);
    background:var(--bg); color:var(--muted); font-size:12px; font-weight:600;
    transition:border-color .15s ease, color .15s ease, background .15s ease;
  }
  .kb-add:hover{ border-color:var(--green-500); color:var(--green-600); background:var(--green-50); }
  .kb-cards{ display:flex; flex-direction:column; gap:10px; min-height:8px; }
  .kb-card{
    background:var(--bg); border:1px solid var(--line); border-radius:18px;
    padding:13px 14px; cursor:pointer; box-shadow:var(--shadow-sm);
    transition:transform .15s var(--ease-out), box-shadow .15s ease, border-color .15s ease;
  }
  .kb-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:var(--green-500); }
  .kb-card-top{ display:flex; align-items:flex-start; gap:8px; }
  .kb-card-title{ font-size:13px; font-weight:600; line-height:1.35; flex:1; }
  .kb-card-menu{ color:var(--muted); font-size:15px; line-height:1; padding:0 2px; flex-shrink:0; }
  .kb-tag{ display:inline-block; font-size:10px; font-weight:700; padding:3px 9px; border-radius:9px; margin-top:8px; }
  .kb-progress{ display:flex; align-items:center; gap:9px; margin-top:11px; }
  .kb-progress-track{ flex:1; height:5px; border-radius:25px; background:var(--line); overflow:hidden; }
  .kb-progress-fill{ height:100%; border-radius:25px; transition:width .5s var(--ease-out); }
  .kb-progress-pct{ font-size:10.5px; font-weight:700; color:var(--muted); }
  .kb-card-foot{ display:flex; align-items:center; gap:11px; margin-top:11px; }
  .kb-meta{ display:inline-flex; align-items:center; gap:4px; font-size:10.5px; font-weight:600; color:var(--muted); }
  .kb-meta svg{ width:12.5px; height:12.5px; }
  .kb-due{ margin-left:auto; font-size:10px; font-weight:700; padding:3px 8px; border-radius:9px; display:inline-flex; align-items:center; gap:4px; }
  .kb-due svg{ width:11px; height:11px; }
  .kb-avatar{
    width:24px; height:24px; border-radius:50%; background:var(--green-600); color:#fff;
    display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:700;
    overflow:hidden; flex-shrink:0;
  }
  .kb-avatar img{ width:100%; height:100%; object-fit:cover; }
  .kb-title-input{
    width:100%; border:1px solid var(--green-500); border-radius:10px; padding:5px 8px;
    font-size:13px; font-weight:600; font-family:inherit; background:var(--surface); color:var(--ink);
    box-shadow:0 0 0 3px var(--green-100); outline:none;
  }
  .kb-cf{ display:flex; align-items:baseline; gap:6px; font-size:10.5px; margin-top:7px; }
  .kb-cf-name{ font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; font-size:9.5px; flex-shrink:0; }
  .kb-cf-value{ font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .kb-field-row{ display:flex; gap:8px; margin-bottom:8px; align-items:center; }
  .kb-field-row input{ flex:1; }
  .kb-field-row .kb-field-name{ flex:0 0 38%; }
  .kb-field-del{
    border:1px solid var(--line); background:var(--bg); color:var(--muted); border-radius:10px;
    width:30px; height:34px; flex-shrink:0; font-size:14px; line-height:1;
  }
  .kb-field-del:hover{ color:var(--red); border-color:var(--red); }
  .kb-col-title{ cursor:text; }
  .kb-col-del{
    margin-left:auto; border:none; background:none; color:var(--muted); font-size:12px;
    padding:2px 5px; border-radius:8px; opacity:0; transition:opacity .15s ease, color .15s ease;
  }
  .kb-col-head:hover .kb-col-del{ opacity:1; }
  .kb-col-del:hover{ color:var(--red); background:var(--red-bg); }
  /* Oszlop műveletek: mindig látszanak, hogy ne kelljen rájuk találni */
  .kb-col-muv{ margin-left:auto; display:flex; gap:2px; flex-shrink:0; }
  .kb-col-ik{
    border:none; background:none; color:var(--muted); font-size:12px; line-height:1;
    padding:3px 6px; border-radius:8px; cursor:pointer; opacity:.55; transition:opacity .15s ease, color .15s ease, background .15s ease;
  }
  .kb-col-head:hover .kb-col-ik{ opacity:1; }
  .kb-col-ik:hover{ background:var(--bg); color:var(--ink); opacity:1; }
  .kb-col-ik.piros:hover{ color:var(--red); background:var(--red-bg); }
  .kb-new-col{
    flex:0 0 180px; min-height:120px; border:1px dashed var(--line); border-radius:var(--radius);
    background:none; color:var(--muted); font-size:12.5px; font-weight:600;
    display:flex; align-items:center; justify-content:center; gap:7px;
    transition:border-color .15s ease, color .15s ease, background .15s ease;
  }
  .kb-new-col:hover{ border-color:var(--green-500); color:var(--green-600); background:var(--green-50); }

  /* --- Naptár (Időpontok) --- */
  .cal-toolbar{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .cal-tabs{ display:flex; gap:2px; background:var(--bg); border:1px solid var(--line); border-radius:13px; padding:3px; }
  .cal-tab{ border:none; background:transparent; padding:5px 13px; font-size:12px; font-weight:600; color:var(--muted); border-radius:10px; cursor:pointer; transition:all .15s ease; }
  .cal-tab:hover{ color:var(--ink); }
  .cal-tab.active{ background:var(--surface); color:var(--green-700); box-shadow:0 1px 3px rgba(0,0,0,.08); }
  .cal-event-block{ position:absolute; border-radius:10px; padding:4px 8px; overflow:hidden; cursor:pointer; z-index:2; transition:transform .12s ease, box-shadow .12s ease; }
  .cal-event-block:hover{ transform:translateY(-1px); box-shadow:0 3px 10px rgba(0,0,0,.12); z-index:4; }
  .cal-month-cell{ min-height:84px; padding:4px 5px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); cursor:pointer; transition:background .12s ease; }
  .cal-month-cell:hover{ background:var(--green-50); }
  .cal-mini-day{ position:relative; text-align:center; font-size:11px; padding:4px 0 8px 0; border-radius:10px; cursor:pointer; font-weight:600; }
  .cal-mini-day:hover{ background:var(--green-50); }
  .cal-mini-day.today{ background:var(--green-600); color:#fff; }
  .cal-mini-day.sel:not(.today){ outline:1.5px solid var(--green-600); }
  .cal-mini-dot{ position:absolute; left:50%; transform:translateX(-50%); bottom:3px; width:4px; height:4px; border-radius:50%; background:var(--green-600); }
  .cal-mini-day.today .cal-mini-dot{ background:#fff; }
  @media (max-width: 1100px){ #calLayout{ grid-template-columns:1fr !important; } }

  /* =========================================================
     PRÉMIUM DASHBOARD (view-dashboard.premium) — dark-first
     ========================================================= */
  #view-dashboard.premium {
    --p-panel: rgba(255,255,255,0.04);
    --p-panel-hi: rgba(255,255,255,0.07);
    --p-border: rgba(255,255,255,0.08);
    --p-text: #F1F5F9;
    --p-muted: #94A3B8;
    --p-green-hi: #34C759;
    --p-teal: #06B6D4;
    --p-purple: #A855F7;
    --p-gold: #F59E0B;
    --p-blue: #3B82F6;
    padding: 0 !important;
    position: relative;
    background: linear-gradient(180deg, #0B1220 0%, #0F172A 100%);
    color: var(--p-text);
    min-height: 100vh;
    overflow-x: clip;
  }
  body[data-theme="light"] #view-dashboard.premium {
    --p-panel: rgba(255,255,255,0.65);
    --p-panel-hi: rgba(255,255,255,0.85);
    --p-border: rgba(15,23,42,0.08);
    --p-text: #0F172A;
    --p-muted: #64748B;
    background: linear-gradient(180deg, #F8FAFC 0%, #F1F5F9 100%);
  }
  .p-bg-glow { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
  .p-bg-glow::before, .p-bg-glow::after {
    content: ''; position: absolute; width: 500px; height: 500px; border-radius: 50%;
    filter: blur(120px); opacity: 0.32;
    animation: pBlobFloat 20s ease-in-out infinite;
  }
  .p-bg-glow::before { top: -100px; left: -100px; background: radial-gradient(circle, #2E9563 0%, transparent 70%); }
  .p-bg-glow::after  { top: 30%; right: -150px; background: radial-gradient(circle, #A855F7 0%, transparent 70%); animation-delay: -10s; }
  @keyframes pBlobFloat {
    0%,100% { transform: translate(0,0) scale(1); }
    33%    { transform: translate(60px,-40px) scale(1.1); }
    66%    { transform: translate(-40px,60px) scale(0.95); }
  }
  body[data-theme="light"] .p-bg-glow::before,
  body[data-theme="light"] .p-bg-glow::after { opacity: 0.14; }

  .p-inner { position: relative; z-index: 1; padding: 22px 26px 28px 26px; max-width: 1600px; }
  .p-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
  .p-hero-title { font-size: 34px; font-weight: 800; letter-spacing: -0.03em; margin: 0 0 6px 0; }
  .p-hero-sub { font-size: 13.5px; color: var(--p-muted); margin: 0; }

  .p-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px; }
  @media (max-width: 1200px) { .p-kpi-grid { grid-template-columns: repeat(2, 1fr); } }
  .p-kpi {
    position: relative; padding: 18px 20px; border-radius: 20px; overflow: hidden;
    background: var(--p-panel); border: 1px solid var(--p-border);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    transition: transform .25s cubic-bezier(0.4,0,0.2,1), box-shadow .25s;
  }
  .p-kpi:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0,0,0,0.25); }
  .p-kpi-label { font-size: 11px; font-weight: 600; color: var(--p-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; }
  .p-kpi-value { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
  .p-kpi-delta { font-size: 11px; font-weight: 600; margin-top: 8px; color: var(--p-muted); }
  .p-kpi-delta.up { color: var(--p-green-hi); }
  .p-kpi-delta.down { color: #EF4444; }
  .p-kpi-bar { height: 4px; border-radius: 3px; background: rgba(255,255,255,0.08); margin-top: 12px; overflow: hidden; }
  body[data-theme="light"] .p-kpi-bar { background: rgba(15,23,42,0.08); }
  .p-kpi-bar-fill { height: 100%; border-radius: 3px; animation: pBarGrow 1.2s cubic-bezier(0.16,1,0.3,1); }
  @keyframes pBarGrow { from { width: 0 !important; } }
  .p-kpi.green .p-kpi-bar-fill { background: linear-gradient(90deg, #2E9563, var(--p-green-hi)); }
  .p-kpi.purple .p-kpi-bar-fill { background: linear-gradient(90deg, var(--p-purple), #EC4899); }
  .p-kpi.blue .p-kpi-bar-fill { background: linear-gradient(90deg, var(--p-blue), var(--p-teal)); }
  .p-kpi.gold .p-kpi-bar-fill { background: linear-gradient(90deg, var(--p-gold), #FBBF24); }
  .p-kpi.green .p-kpi-value { color: var(--p-green-hi); }
  .p-kpi.purple .p-kpi-value { color: var(--p-purple); }
  .p-kpi.blue .p-kpi-value { color: var(--p-teal); }
  .p-kpi.gold .p-kpi-value { color: var(--p-gold); }

  .p-main-grid { display: grid; grid-template-columns: 1fr 340px; gap: 16px; align-items: start; margin-bottom: 20px; }
  @media (max-width: 1200px) {
    .p-main-grid { grid-template-columns: 1fr; }
    /* Prompt szerinti hierarchia: mobilon a Mony napi összefoglaló előre kerül */
    .p-main-grid .p-mony-panel { order: -1; }
    .p-main-grid .p-main-col { order: 1; }
  }

  .p-panel {
    position: relative; padding: 18px 20px; border-radius: 20px;
    background: var(--p-panel); border: 1px solid var(--p-border);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    transition: box-shadow .18s;
  }
  .p-panel:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.2); }
  .p-panel h3 { font-size: 13.5px; font-weight: 700; margin: 0 0 14px 0; display: flex; align-items: center; gap: 8px; letter-spacing: -0.01em; }
  .p-panel h3 .p-badge { margin-left: auto; font-size: 10px; padding: 2px 8px; border-radius: 20px; background: rgba(46,149,99,0.15); color: var(--p-green-hi); font-weight: 700; letter-spacing: 0.04em; }
  .p-panel-row { display: grid; grid-template-columns: 1.3fr 1fr 1.3fr; gap: 14px; margin-bottom: 18px; }
  @media (max-width: 900px) { .p-panel-row { grid-template-columns: 1fr; } }

  .p-timeline-item { display: flex; gap: 14px; padding: 8px 0; align-items: center; }
  .p-timeline-time { font-size: 11px; font-weight: 700; color: var(--p-muted); min-width: 44px; }
  .p-timeline-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--p-green-hi); box-shadow: 0 0 12px currentColor; flex-shrink: 0; }
  .p-timeline-content { flex: 1; padding: 8px 12px; background: rgba(255,255,255,0.03); border-radius: 12px; border: 1px solid var(--p-border); min-width: 0; }
  body[data-theme="light"] .p-timeline-content { background: rgba(15,23,42,0.03); }
  .p-timeline-title { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .p-timeline-sub { font-size: 10.5px; color: var(--p-muted); margin-top: 2px; }

  .p-donut { display: flex; align-items: center; gap: 14px; position: relative; }
  .p-donut-wrap { position: relative; width: 120px; height: 120px; flex-shrink: 0; }
  .p-donut-svg { width: 100%; height: 100%; }
  .p-donut-circle { fill: none; stroke-width: 12; transform: rotate(-90deg); transform-origin: center; transition: stroke-dashoffset 1s cubic-bezier(0.16,1,0.3,1); }
  .p-donut-bg { stroke: rgba(255,255,255,0.06); }
  body[data-theme="light"] .p-donut-bg { stroke: rgba(15,23,42,0.06); }
  .p-donut-fill { stroke: var(--p-green-hi); stroke-linecap: round; filter: drop-shadow(0 0 6px currentColor); }
  .p-donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
  .p-donut-num { font-size: 24px; font-weight: 800; line-height: 1; }
  .p-donut-sub { font-size: 10px; color: var(--p-muted); margin-top: 3px; }
  .p-donut-list { flex: 1; display: flex; flex-direction: column; gap: 8px; font-size: 12px; min-width: 0; }
  .p-donut-list-item { display: flex; align-items: center; gap: 8px; }
  .p-donut-list-item .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
  .p-donut-list-item strong { font-size: 14px; font-weight: 800; }

  .p-notif-item { padding: 10px 8px; border-bottom: 1px solid var(--p-border); cursor: pointer; transition: background .15s; border-radius: 8px; }
  .p-notif-item:hover { background: rgba(255,255,255,0.03); }
  body[data-theme="light"] .p-notif-item:hover { background: rgba(15,23,42,0.03); }
  .p-notif-item:last-child { border-bottom: 0; }
  .p-notif-title { font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
  .p-notif-icon { width: 26px; height: 26px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; }
  .p-notif-sub { font-size: 10.5px; color: var(--p-muted); margin-top: 3px; margin-left: 34px; }
  .p-notif-time { font-size: 10px; color: var(--p-muted); margin-left: auto; }

  .p-mony-panel {
    background: linear-gradient(155deg, rgba(88,28,135,0.55), rgba(15,23,42,0.8));
    border: 1px solid rgba(168,85,247,0.25);
    border-radius: 20px; padding: 18px 20px; position: relative; overflow: hidden; min-height: 320px;
  }
  body[data-theme="light"] .p-mony-panel {
    background: linear-gradient(155deg, rgba(168,85,247,0.15), rgba(255,255,255,0.7));
  }
  .p-mony-panel::before {
    content: ''; position: absolute; top: -50px; right: -50px; width: 200px; height: 200px;
    background: radial-gradient(circle, rgba(168,85,247,0.25), transparent 70%);
    animation: pMonyGlow 4s ease-in-out infinite;
  }
  @keyframes pMonyGlow { 0%,100% { transform: scale(1); opacity: 0.7; } 50% { transform: scale(1.15); opacity: 1; } }
  .p-mony-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; position: relative; z-index: 2; }
  .p-mony-avatar { width: 36px; height: 36px; border-radius: 12px; background: linear-gradient(135deg, #A855F7, #7C3AED); display: flex; align-items: center; justify-content: center; font-size: 18px; box-shadow: 0 0 20px rgba(168,85,247,0.5); }
  .p-mony-name { font-size: 15px; font-weight: 700; color: var(--p-text); }
  .p-mony-beta { font-size: 9px; padding: 2px 8px; border-radius: 20px; background: rgba(255,255,255,0.15); font-weight: 700; color: #E9D5FF; }
  .p-mony-hello { color: var(--p-text); font-size: 15px; font-weight: 600; margin-bottom: 4px; position: relative; z-index: 2; }
  .p-mony-lead { color: var(--p-muted); font-size: 12.5px; margin-bottom: 14px; position: relative; z-index: 2; line-height: 1.5; }
  .p-mony-item {
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px; padding: 10px 12px; margin-bottom: 8px;
    font-size: 12px; color: var(--p-text); display: flex; align-items: center; gap: 10px;
    position: relative; z-index: 2; transition: background .18s;
  }
  body[data-theme="light"] .p-mony-item { background: rgba(255,255,255,0.7); border-color: rgba(15,23,42,0.06); }
  .p-mony-item:hover { background: rgba(255,255,255,0.09); }
  .p-mony-item-icon { width: 28px; height: 28px; border-radius: 8px; background: rgba(168,85,247,0.2); display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
  .p-mony-cta {
    display: block; width: 100%; margin-top: 12px; padding: 12px;
    border: 0; border-radius: 12px;
    background: linear-gradient(135deg, #A855F7, #7C3AED);
    color: #fff; font-size: 12.5px; font-weight: 700; cursor: pointer;
    position: relative; z-index: 2;
    box-shadow: 0 4px 20px rgba(168,85,247,0.35);
    transition: transform .18s, box-shadow .18s;
  }
  .p-mony-cta:hover { transform: translateY(-2px); box-shadow: 0 6px 28px rgba(168,85,247,0.55); }
  .p-mony-char {
    position: absolute; right: -20px; bottom: -20px; height: 88%; z-index: 1;
    filter: drop-shadow(0 8px 24px rgba(168,85,247,0.35));
    animation: pMonyFloat 6s ease-in-out infinite; pointer-events: none;
  }
  @keyframes pMonyFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

  .p-fin-value { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; margin: 4px 0; }
  .p-fin-delta { font-size: 12px; font-weight: 700; color: var(--p-green-hi); margin-bottom: 12px; }

  .p-akademia-progress { width: 100%; height: 8px; background: rgba(255,255,255,0.08); border-radius: 4px; overflow: hidden; margin: 10px 0 12px; }
  body[data-theme="light"] .p-akademia-progress { background: rgba(15,23,42,0.08); }
  .p-akademia-progress-fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, #2E9563, var(--p-green-hi)); animation: pBarGrow 1.2s; }

  .p-status-bar {
    display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px;
    margin-top: 18px; padding: 16px 20px;
    background: var(--p-panel); border: 1px solid var(--p-border); border-radius: 20px;
    backdrop-filter: blur(14px);
  }
  @media (max-width: 900px) { .p-status-bar { grid-template-columns: repeat(3, 1fr); } }
  .p-status-item { display: flex; flex-direction: column; gap: 2px; }
  .p-status-label { font-size: 10px; color: var(--p-muted); text-transform: uppercase; letter-spacing: 0.04em; }
  .p-status-value { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; }
  .p-status-item.time .p-status-value { font-family: var(--betu-szam); color: var(--p-green-hi); }

  .p-mood-row { display: flex; gap: 6px; margin-top: 8px; }
  .p-mood-btn {
    flex: 1; padding: 8px 4px; border: 1px solid var(--p-border); border-radius: 10px;
    background: var(--p-panel); color: var(--p-text); cursor: pointer;
    font-size: 10px; font-weight: 600; text-align: center;
    transition: transform .15s, border-color .15s, background .15s;
  }
  .p-mood-btn:hover { transform: translateY(-2px); border-color: var(--p-green-hi); }
  .p-mood-btn.selected { border-color: var(--p-green-hi); background: rgba(52,199,89,0.1); }
  .p-mood-emoji { font-size: 18px; display: block; margin-bottom: 2px; }

  /* -- Premium: hero-banner (kép esetén) -- */
  .p-hero-banner { position: relative; height: 220px; border-radius: 22px; overflow: hidden; margin-bottom: 22px; box-shadow: 0 8px 30px rgba(0,0,0,0.25); }
  .p-hero-img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; display: block; }
  .p-hero-overlay { position: absolute; inset: 0; padding: 32px; background: linear-gradient(90deg, rgba(11,18,32,0.9) 0%, rgba(11,18,32,0.55) 40%, rgba(11,18,32,0.15) 65%, transparent 85%); display: flex; flex-direction: column; justify-content: flex-end; }
  .p-hero-sub-white { font-size: 14px; color: rgba(255,255,255,0.92); margin: 0; text-shadow: 0 1px 8px rgba(0,0,0,0.35); }
  .p-hero-title { text-shadow: 0 2px 12px rgba(0,0,0,0.35); }

  /* -- Premium kártyák -- */
  .p-card { position: relative; background: var(--p-panel); border: 1px solid var(--p-border); border-radius: 18px; padding: 16px 18px; backdrop-filter: blur(14px); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; overflow: hidden; }
  .p-card:hover { transform: translateY(-2px); border-color: rgba(52,199,89,0.35); box-shadow: 0 12px 32px rgba(52,199,89,0.08); }
  .p-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
  .p-card-title { font-size: 13px; font-weight: 700; color: var(--p-text); letter-spacing: -0.01em; }
  .p-chip { margin-left: auto; font-size: 10px; padding: 3px 9px; border-radius: 20px; background: rgba(52,199,89,0.12); color: var(--p-green-hi); font-weight: 700; letter-spacing: 0.04em; }

  /* -- KPI kártyák -- */
  .p-kpi { background: var(--p-panel); border: 1px solid var(--p-border); border-radius: 18px; padding: 18px 20px; backdrop-filter: blur(14px); position: relative; overflow: hidden; transition: transform .18s ease, border-color .18s ease; }
  .p-kpi:hover { transform: translateY(-3px); border-color: rgba(52,199,89,0.3); }
  .p-kpi::before { content:''; position:absolute; top:-40px; right:-40px; width:120px; height:120px; border-radius:50%; background: radial-gradient(circle, rgba(52,199,89,0.15) 0%, transparent 70%); pointer-events:none; }
  .p-kpi[data-kpi="done"]::before { background: radial-gradient(circle, rgba(168,85,247,0.15) 0%, transparent 70%); }
  .p-kpi[data-kpi="appt"]::before { background: radial-gradient(circle, rgba(6,182,212,0.15) 0%, transparent 70%); }
  .p-kpi[data-kpi="clients"]::before { background: radial-gradient(circle, rgba(245,158,11,0.15) 0%, transparent 70%); }
  .p-kpi-label { font-size: 11px; color: var(--p-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; font-weight: 600; }
  .p-kpi-value { font-family: var(--betu-cim); font-size: 32px; font-weight: 800; letter-spacing: -0.03em; color: var(--p-text); margin-bottom: 4px; }
  .p-kpi-sub { font-size: 11.5px; color: var(--p-muted); margin-bottom: 10px; }
  .p-kpi-progress { height: 4px; background: rgba(255,255,255,0.06); border-radius: 4px; overflow: hidden; }
  body[data-theme="light"] .p-kpi-progress { background: rgba(15,23,42,0.08); }
  .p-kpi-progress-bar { height: 100%; border-radius: 4px; transition: width .8s ease-out; }

  /* -- Fő rács kiegészítők -- */
  .p-main-col { display: flex; flex-direction: column; gap: 16px; }
  .p-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  @media (max-width: 900px) { .p-grid-2 { grid-template-columns: 1fr; } }
  .p-secondary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
  @media (max-width: 900px) { .p-secondary-grid { grid-template-columns: 1fr; } }

  /* -- Timeline (mai naptáram) -- */
  .p-timeline { display: flex; flex-direction: column; gap: 8px; max-height: 300px; overflow-y: auto; }
  .p-timeline-item { display: flex; gap: 12px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,0.02); border-left: 3px solid var(--p-green-hi); transition: background .15s; }
  body[data-theme="light"] .p-timeline-item { background: rgba(15,23,42,0.03); }
  .p-timeline-item:hover { background: rgba(52,199,89,0.08); }
  .p-timeline-time { font-family: var(--betu-szam); font-weight: 700; color: var(--p-green-hi); font-size: 12.5px; min-width: 46px; }
  .p-timeline-body { flex: 1; min-width: 0; }
  .p-timeline-title { font-size: 13px; font-weight: 600; color: var(--p-text); }
  .p-timeline-sub { font-size: 11px; color: var(--p-muted); margin-top: 2px; }
  .p-empty { padding: 16px; text-align: center; color: var(--p-muted); font-size: 12px; }
  .p-card-corner-icon { position: absolute; right: 8px; bottom: 8px; width: 64px; height: 64px; object-fit: contain; opacity: 0.75; pointer-events: none; }

  /* -- Feladat donut -- */
  .p-donut-wrap { display: flex; align-items: center; gap: 16px; padding: 6px 0; }
  .p-donut { width: 130px; height: 130px; flex-shrink: 0; }
  #dashDonutCircle { transition: stroke-dasharray .8s ease-out; filter: drop-shadow(0 0 8px rgba(52,199,89,0.4)); }
  .p-donut-legend { display: flex; flex-direction: column; gap: 8px; font-size: 12px; color: var(--p-muted); }
  .p-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }

  /* -- Értesítés lista -- */
  .p-notif-list { display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow-y: auto; }
  .p-notif-item { padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,0.02); font-size: 12px; cursor: pointer; transition: background .15s; }
  body[data-theme="light"] .p-notif-item { background: rgba(15,23,42,0.03); }
  .p-notif-item:hover { background: rgba(52,199,89,0.1); }
  .p-notif-title { font-weight: 600; color: var(--p-text); }
  .p-notif-time { font-size: 10px; color: var(--p-muted); margin-top: 2px; }

  /* -- Mony panel -- */
  .p-mony-panel { position: relative; background: linear-gradient(160deg, #2d1b69 0%, #1a0f3d 100%); border-radius: 22px; padding: 22px; overflow: hidden; min-height: 380px; display: flex; flex-direction: column; border: 1px solid rgba(168,85,247,0.25); box-shadow: 0 12px 40px rgba(168,85,247,0.15); }
  .p-mony-panel::before { content:''; position:absolute; top:-60px; right:-60px; width:200px; height:200px; border-radius:50%; background: radial-gradient(circle, rgba(168,85,247,0.4) 0%, transparent 70%); animation: pMonyGlow 4s ease-in-out infinite; }
  @keyframes pMonyGlow { 0%,100% { transform: scale(1); opacity: 0.4; } 50% { transform: scale(1.15); opacity: 0.7; } }
  .p-mony-content { position: relative; z-index: 2; color: #fff; max-width: 62%; }
  .p-mony-badge { display: inline-block; padding: 4px 10px; border-radius: 20px; background: rgba(255,255,255,0.12); font-size: 10px; font-weight: 700; letter-spacing: 0.04em; color: #fff; margin-bottom: 14px; }
  .p-mony-title { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 8px; }
  .p-mony-text { font-size: 13px; line-height: 1.6; opacity: 0.92; }
  .p-mony-char { position: absolute; right: -14px; bottom: -10px; height: 100%; max-height: 380px; width: auto; z-index: 1; pointer-events: none; filter: drop-shadow(0 8px 24px rgba(0,0,0,0.4)); }

  /* -- Light mode Mony panel: világoslila háttér + sötét szöveg (kontraszt) -- */
  body[data-theme="light"] .p-mony-panel {
    background: linear-gradient(160deg, #F5EFFF 0%, #E9DAFF 100%);
    border-color: rgba(168,85,247,0.35);
    box-shadow: 0 12px 40px rgba(168,85,247,0.18);
  }
  body[data-theme="light"] .p-mony-panel::before {
    background: radial-gradient(circle, rgba(168,85,247,0.35) 0%, transparent 70%);
  }
  body[data-theme="light"] .p-mony-content { color: #1F1147; }
  body[data-theme="light"] .p-mony-badge { background: rgba(76,29,149,0.12); color: #4C1D95; }
  body[data-theme="light"] .p-mony-title { color: #0F0728; }
  body[data-theme="light"] .p-mony-text { color: #3B2668; opacity: 1; }
  body[data-theme="light"] .p-mony-char { filter: drop-shadow(0 8px 24px rgba(76,29,149,0.35)); }
  /* Light mode: a Mony napi-kihívás kártya belső gombjának kontrasztja */
  body[data-theme="light"] .p-mony-content button[onclick] {
    background: rgba(76,29,149,0.12) !important;
    color: #4C1D95 !important;
  }
  body[data-theme="light"] .p-mony-content button[onclick]:hover {
    background: rgba(76,29,149,0.22) !important;
  }

  /* =============================================================
     LIGHT MODE — explicit kontraszt-felülírások a Prémium Dashboardhoz
     ============================================================= */
  /* Hero banner szöveg: mindig fehér (a családi kép miatt) */
  #view-dashboard.premium .p-hero-title,
  body[data-theme="light"] #view-dashboard.premium .p-hero-banner .p-hero-title,
  body[data-theme="light"] #view-dashboard.premium .p-hero-sub-white {
    color: #fff !important;
  }
  /* KPI-k */
  body[data-theme="light"] #view-dashboard.premium .p-kpi-value { color: #0F172A; }
  body[data-theme="light"] #view-dashboard.premium .p-kpi-label,
  body[data-theme="light"] #view-dashboard.premium .p-kpi-sub { color: #64748B; }
  body[data-theme="light"] #view-dashboard.premium .p-kpi-progress { background: rgba(15,23,42,0.08); }
  /* Kártya címek */
  body[data-theme="light"] #view-dashboard.premium .p-card-title { color: #0F172A; }
  body[data-theme="light"] #view-dashboard.premium .p-chip { background: rgba(52,199,89,0.14); color: #059669; }
  /* Timeline */
  body[data-theme="light"] #view-dashboard.premium .p-timeline-title { color: #0F172A; }
  body[data-theme="light"] #view-dashboard.premium .p-timeline-sub { color: #64748B; }
  body[data-theme="light"] #view-dashboard.premium .p-timeline-time { color: #059669; }
  /* Feladat donut */
  body[data-theme="light"] #view-dashboard.premium #dashDonutValue { fill: #0F172A; }
  body[data-theme="light"] #view-dashboard.premium .p-donut svg text { fill: #0F172A; }
  body[data-theme="light"] #view-dashboard.premium .p-donut-legend { color: #334155; }
  body[data-theme="light"] #view-dashboard.premium .p-donut circle[fill="none"]:first-child { stroke: rgba(15,23,42,0.08); }
  /* Értesítések */
  body[data-theme="light"] #view-dashboard.premium .p-notif-item { background: rgba(15,23,42,0.03); }
  body[data-theme="light"] #view-dashboard.premium .p-notif-item:hover { background: rgba(52,199,89,0.08); }
  body[data-theme="light"] #view-dashboard.premium .p-notif-title { color: #0F172A; }
  body[data-theme="light"] #view-dashboard.premium .p-notif-time { color: #64748B; }
  /* Pénzügyi + akadémia */
  body[data-theme="light"] #view-dashboard.premium .p-fin-value,
  body[data-theme="light"] #view-dashboard.premium .p-lesson { color: #0F172A; }
  body[data-theme="light"] #view-dashboard.premium .p-fin-sub { color: #64748B; }
  /* Gyors műveletek */
  body[data-theme="light"] #view-dashboard.premium .p-quick { color: #0F172A; }
  body[data-theme="light"] #view-dashboard.premium .p-quick:hover { background: rgba(52,199,89,0.08); }
  /* Napi hangulat + mood */
  body[data-theme="light"] #view-dashboard.premium .p-mood-btn { color: #0F172A; }
  /* Feed */
  body[data-theme="light"] #view-dashboard.premium .p-feed { color: #0F172A; }
  body[data-theme="light"] #view-dashboard.premium .p-empty { color: #64748B; }
  /* Alsó státuszsor */
  body[data-theme="light"] #view-dashboard.premium .p-status-value { color: #0F172A; }
  body[data-theme="light"] #view-dashboard.premium .p-status-label { color: #64748B; }
  body[data-theme="light"] #view-dashboard.premium .p-status-item.time .p-status-value { color: #059669; }
  /* Timeline háttér light */
  body[data-theme="light"] #view-dashboard.premium .p-timeline-item { background: rgba(15,23,42,0.03); }
  body[data-theme="light"] #view-dashboard.premium .p-timeline-item:hover { background: rgba(52,199,89,0.08); }
  /* Plain header (ha nincs family kép) */
  body[data-theme="light"] #view-dashboard.premium .p-hero .p-hero-title { color: #0F172A !important; text-shadow: none; }
  body[data-theme="light"] #view-dashboard.premium .p-hero .p-hero-sub { color: #64748B; }

  /* -- Pénzügyi widget spark -- */
  .p-fin-value { font-family: var(--betu-cim); font-size: 28px; font-weight: 800; color: var(--p-text); margin-bottom: 4px; letter-spacing: -0.02em; }
  .p-fin-sub { font-size: 12px; color: var(--p-muted); margin-bottom: 12px; }
  .p-fin-spark { width: 100%; height: 60px; }

  /* -- Akadémia lecke -- */
  .p-lesson { font-size: 12.5px; color: var(--p-text); padding: 8px 4px; }

  /* -- Gyors műveletek -- */
  .p-quick-actions { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 20px; }
  @media (max-width: 900px) { .p-quick-actions { grid-template-columns: repeat(2, 1fr); } }
  .p-quick { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px; border: 1px solid var(--p-border); border-radius: 14px; background: var(--p-panel); color: var(--p-text); font-size: 11.5px; font-weight: 600; cursor: pointer; transition: transform .15s, border-color .15s, background .15s; backdrop-filter: blur(14px); }
  .p-quick:hover { transform: translateY(-3px); border-color: var(--p-green-hi); background: var(--p-panel-hi); box-shadow: 0 8px 20px rgba(52,199,89,0.15); }
  .p-quick-icon { font-size: 22px; }

  /* -- Napi hangulat card -- */
  .p-mood-card { margin-bottom: 20px; }

  /* -- Feed lista (születésnapok, események) -- */
  .p-feed { display: flex; flex-direction: column; gap: 6px; max-height: 160px; overflow-y: auto; font-size: 12px; }
  .p-feed .empty-state { padding: 10px; color: var(--p-muted); }

  /* -- Alsó footer banner -- */
  .p-footer-banner { position: relative; height: 200px; border-radius: 22px; overflow: hidden; margin-bottom: 20px; box-shadow: 0 8px 30px rgba(0,0,0,0.25); }
  .p-footer-img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .p-footer-overlay { position: absolute; inset: 0; padding: 28px 32px; background: linear-gradient(90deg, rgba(11,18,32,0.9) 0%, rgba(11,18,32,0.4) 55%, transparent 80%); display: flex; flex-direction: column; justify-content: center; }
  .p-footer-title { font-size: 24px; font-weight: 800; color: #fff; margin: 0 0 6px 0; letter-spacing: -0.02em; text-shadow: 0 2px 8px rgba(0,0,0,0.4); }
  .p-footer-sub { font-size: 13px; color: rgba(255,255,255,0.92); margin: 0 0 14px 0; text-shadow: 0 1px 6px rgba(0,0,0,0.4); }
  .p-footer-cta { align-self: flex-start; padding: 10px 20px; border: none; border-radius: 12px; background: linear-gradient(135deg, var(--p-green-hi), #7fe8a4); color: #0B1220; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: transform .15s, box-shadow .15s; }
  .p-footer-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(52,199,89,0.4); }

  /* -- Animált robotok a footer bannerben -- */
  .p-footer-robots {
    position: absolute; left: 0; right: 0; bottom: 8px; height: 90px;
    width: 100%; pointer-events: none; z-index: 3;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4));
  }
  .p-robot { transform-box: fill-box; }
  /* Sétáló bal→jobb */
  .p-robot-walker { animation: pWalkerLR 22s linear infinite; transform: translate(-40px, 45px); }
  @keyframes pWalkerLR {
    0%   { transform: translate(-40px, 45px); }
    50%  { transform: translate(800px, 45px); }
    50.01% { transform: translate(-40px, 45px); }
    100% { transform: translate(-40px, 45px); }
  }
  /* Sétáló jobb→bal (dobozzal) */
  .p-robot-walker-rev { animation: pWalkerRL 26s linear infinite; transform: translate(820px, 50px) scaleX(-1); }
  @keyframes pWalkerRL {
    0%   { transform: translate(820px, 50px) scaleX(-1); }
    50%  { transform: translate(-40px, 50px) scaleX(-1); }
    50.01% { transform: translate(820px, 50px) scaleX(-1); }
    100% { transform: translate(820px, 50px) scaleX(-1); }
  }
  /* Járó animáció — test/láb ritmus */
  .p-robot-bounce { animation: pWalkBounce 0.5s ease-in-out infinite; transform-origin: center bottom; }
  @keyframes pWalkBounce {
    0%,100% { transform: translateY(0); }
    50%     { transform: translateY(-2px); }
  }
  .p-robot-leg-l { animation: pLegL 0.5s ease-in-out infinite; transform-origin: top center; }
  .p-robot-leg-r { animation: pLegR 0.5s ease-in-out infinite; transform-origin: top center; }
  @keyframes pLegL {
    0%,100% { transform: rotate(15deg); }
    50%     { transform: rotate(-15deg); }
  }
  @keyframes pLegR {
    0%,100% { transform: rotate(-15deg); }
    50%     { transform: rotate(15deg); }
  }
  .p-robot-arm-l { animation: pLegR 0.5s ease-in-out infinite; transform-origin: 0 15px; }
  .p-robot-arm-r { animation: pLegL 0.5s ease-in-out infinite; transform-origin: 0 15px; }

  /* Kalapácsoló */
  .p-robot-hammer-arm { animation: pHammer 0.6s ease-in-out infinite; transform-origin: 9px 15px; }
  @keyframes pHammer {
    0%,100% { transform: rotate(0deg); }
    40%     { transform: rotate(-40deg); }
    60%     { transform: rotate(-40deg); }
  }
  .p-robot-spark { animation: pSpark 0.6s ease-in-out infinite; opacity: 0; }
  @keyframes pSpark {
    0%,45% { opacity: 0; transform: translate(0,0); }
    50%    { opacity: 1; transform: translate(2px,-2px); }
    100%   { opacity: 0; transform: translate(6px,-8px); }
  }

  /* Bólogató */
  .p-robot-nod-head { animation: pNod 2.4s ease-in-out infinite; transform-origin: 0 12px; }
  @keyframes pNod {
    0%,100% { transform: rotate(0deg); }
    35%     { transform: rotate(-8deg); }
    65%     { transform: rotate(-8deg); }
    80%     { transform: rotate(2deg); }
  }
  .p-robot-nod-body { animation: pNodBody 2.4s ease-in-out infinite; transform-origin: 0 30px; }
  @keyframes pNodBody {
    0%,100% { transform: translateY(0); }
    50%     { transform: translateY(-1px); }
  }

  /* -- Dashboard dolgozó robot a hero-banner jobb szélén -- */
  .p-worker-robot {
    position: absolute;
    right: 32px;
    bottom: 0;
    width: 160px;
    height: 190px;
    z-index: 3;
    pointer-events: none;
    filter: drop-shadow(0 6px 16px rgba(0,0,0,0.4));
    animation: pWrEntry .8s ease-out;
  }
  @keyframes pWrEntry {
    0% { transform: translateY(20px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
  }
  .p-worker-robot svg { width: 100%; height: 100%; }
  /* Test-ringás */
  .p-wr-robot { animation: pWrBodyBounce 3s ease-in-out infinite; transform-origin: 66px 78px; }
  @keyframes pWrBodyBounce {
    0%,100% { transform: translateY(0); }
    50%     { transform: translateY(-1.5px); }
  }
  /* Fej: néha oldalra billen */
  .p-wr-head { animation: pWrHeadTilt 6s ease-in-out infinite; transform-origin: 66px 45px; }
  @keyframes pWrHeadTilt {
    0%,45%,100% { transform: rotate(0deg); }
    50%,55%     { transform: rotate(-6deg); }
  }
  /* Pislog */
  .p-wr-eyelid { transform-origin: center top; animation: pWrBlink 5s ease-in-out infinite; }
  @keyframes pWrBlink {
    0%,90%,100% { transform: scaleY(0); }
    92%,94%     { transform: scaleY(6); }
  }
  /* Antenna villog */
  .p-wr-antenna { animation: pWrAntenna 1.5s ease-in-out infinite; transform-origin: 66px 22px; }
  @keyframes pWrAntenna {
    0%,100% { opacity: 1; transform: scale(1); }
    50%     { opacity: 0.6; transform: scale(0.8); }
  }
  /* Karok gépelnek — bal és jobb ellentétes fázisban */
  .p-wr-arm-l { animation: pWrTypeL 0.35s ease-in-out infinite; transform-origin: 52px 60px; }
  .p-wr-arm-r { animation: pWrTypeR 0.35s ease-in-out infinite; transform-origin: 80px 60px; }
  @keyframes pWrTypeL {
    0%,100% { transform: rotate(0deg); }
    50%     { transform: rotate(-4deg) translateY(-2px); }
  }
  @keyframes pWrTypeR {
    0%,100% { transform: rotate(0deg); }
    50%     { transform: rotate(4deg) translateY(2px); }
  }
  /* Kódsorok mozognak */
  .p-wr-code rect { animation: pWrCodeType 2.4s steps(6) infinite; transform-origin: 46px center; }
  .p-wr-code rect:nth-child(1) { animation-delay: 0s; }
  .p-wr-code rect:nth-child(2) { animation-delay: 0.4s; }
  .p-wr-code rect:nth-child(3) { animation-delay: 0.8s; }
  .p-wr-code rect:nth-child(4) { animation-delay: 1.2s; }
  .p-wr-code rect:nth-child(5) { animation-delay: 1.6s; }
  @keyframes pWrCodeType {
    0%       { transform: scaleX(0); opacity: 0.3; }
    30%,100% { transform: scaleX(1); opacity: 1; }
  }
  /* Kávé gőz felszáll */
  .p-wr-steam { animation: pWrSteam 2s ease-in-out infinite; transform-origin: bottom center; opacity: 0; }
  @keyframes pWrSteam {
    0%   { transform: translateY(2px) scale(0.7); opacity: 0; }
    30%  { opacity: 0.7; }
    100% { transform: translateY(-8px) scale(1); opacity: 0; }
  }
  /* Árnyék pulzál */
  .p-wr-shadow { animation: pWrShadow 3s ease-in-out infinite; transform-origin: 60px 128px; }
  @keyframes pWrShadow {
    0%,100% { transform: scale(1); opacity: 0.18; }
    50%     { transform: scale(0.95); opacity: 0.14; }
  }

  /* Kis képernyőn kisebb robot */
  @media (max-width: 900px) {
    .p-worker-robot { width: 100px; height: 118px; right: 16px; }
  }

  /* -- Sidebar címke visszaállítás (a premium miatt kerüljük a body theme override-t) -- */
  #view-dashboard.premium .p-mood-btn { color: var(--p-text); background: var(--p-panel); border-color: var(--p-border); }
  /* --- AI Központ modern csapat-kártya (folytatás) --- */
  .cc-card-modern{ position:relative; background:linear-gradient(140deg, #1e3a5f 0%, #142a48 55%, #0d1f38 100%); color:#fff; border-radius:18px; padding:0; overflow:hidden; cursor:pointer; min-height:340px; box-shadow:0 4px 14px rgba(20,42,72,0.14); transition:transform .18s ease, box-shadow .18s ease; display:flex; flex-direction:column; }
  .cc-card-modern:hover{ transform:translateY(-3px); box-shadow:0 10px 26px rgba(20,42,72,0.22); }
  .cc-card-head{ position:relative; padding:14px 16px 10px 16px; min-height:120px; overflow:hidden; }
  .cc-card-head::before{ content:''; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg, #d81b60 0%, #ad1457 60%, transparent 100%); }
  .cc-card-photo{ position:absolute; top:8px; right:10px; width:92px; height:110px; overflow:hidden; border-radius:13px; background:rgba(255,255,255,0.06); display:flex; align-items:center; justify-content:center; }
  .cc-card-photo img{ width:100%; height:100%; object-fit:cover; }
  .cc-card-photo .cc-initials{ font-size:26px; font-weight:800; color:rgba(255,255,255,0.85); letter-spacing:-0.02em; }
  .cc-name-first{ font-size:12px; opacity:0.75; font-weight:500; }
  .cc-name-last{ font-size:20px; font-weight:800; letter-spacing:-0.02em; margin-top:1px; line-height:1.15; max-width:60%; overflow-wrap:break-word; }
  .cc-rank-chip{ display:inline-block; margin-top:8px; padding:4px 14px 4px 12px; background:linear-gradient(90deg, #d81b60, #ad1457); border-radius:4px; font-size:10.5px; font-weight:800; letter-spacing:0.06em; color:#fff; clip-path:polygon(0 0, calc(100% - 8px) 0, 100% 100%, 0 100%); }
  .cc-rank-chip.gold{ background:linear-gradient(90deg, #d4a017, #a67c00); }
  .cc-metrics-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0; }
  .cc-metric{ padding:9px 14px; display:flex; align-items:center; justify-content:space-between; font-size:12px; font-weight:700; border-top:1px solid rgba(255,255,255,0.05); }
  .cc-metric.left{ background:rgba(255,255,255,0.02); }
  .cc-metric.right{ background:linear-gradient(90deg, #b8144a, #8f0e3a); color:#fff; }
  .cc-metric.right.muted{ background:rgba(30,58,95,0.65); }
  .cc-metric-label{ opacity:0.85; font-weight:600; }
  .cc-metric-label.strong{ opacity:1; font-weight:700; }
  .cc-metric-value{ font-weight:800; }
  .cc-metric-value.warn{ color:#ffd166; }
  .cc-metric-value.bad{ color:#ff6b6b; }
  .cc-metric-value.good{ color:#95e5b3; }
  .cc-card-foot{ margin-top:auto; padding:10px 14px; text-align:center; font-size:11px; font-weight:700; letter-spacing:0.04em; color:#fff; }
  /* --- AI Központ lista nézet --- */
  .cc-table{ width:100%; border-collapse:collapse; font-size:12px; }
  .cc-table th{ text-align:left; padding:10px 8px; font-size:10.5px; text-transform:uppercase; letter-spacing:0.04em; color:var(--muted); font-weight:700; border-bottom:1px solid var(--line); background:var(--bg); }
  .cc-table td{ padding:10px 8px; border-bottom:1px solid var(--line); }
  .cc-table tr.cc-row:hover{ background:var(--bg); cursor:pointer; }
  .cc-table .cc-mini-av{ width:32px; height:32px; border-radius:50%; background:var(--bg); display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; overflow:hidden; margin-right:8px; vertical-align:middle; }
  .cc-table .cc-mini-av img{ width:100%; height:100%; object-fit:cover; }
  /* ═══════════════════════════════════════════════════════════════
     FELADATOK 2.0 — AI prioritásos feladatkezelő
     ═══════════════════════════════════════════════════════════════ */
  .tk-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-bottom:18px; }
  .tk-head h1{ font-size:27px; font-weight:700; letter-spacing:-.4px; margin:0; }
  .tk-head p{ font-size:13px; color:var(--muted); margin:3px 0 0; }
  .tk-head-actions{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
  .tk-ghost{ display:inline-flex; align-items:center; gap:7px; background:var(--surface); border:1px solid var(--line);
    border-radius:14px; padding:8px 13px; font-size:12.5px; font-weight:600; color:var(--ink); cursor:pointer; transition:.15s; }
  .tk-ghost:hover{ border-color:var(--green-500); color:var(--green-700); }
  .tk-select{ border:1px solid var(--line); border-radius:14px; padding:8px 11px; font-size:12.5px; background:var(--surface); color:var(--ink); }
  .tk-cta{ width:auto !important; padding:9px 18px !important; font-size:13px; border-radius:14px; }

  .tk-tabs{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-bottom:18px; }
  .tk-tab{ display:inline-flex; align-items:center; gap:7px; background:var(--surface); border:1px solid var(--line);
    border-radius:14px; padding:8px 14px; font-size:12.5px; font-weight:600; color:var(--ink); cursor:pointer; transition:.15s; }
  .tk-tab:hover{ border-color:#C9DED0; }
  .tk-tab.selected{ background:var(--green-600, #2E9563); border-color:var(--green-600, #2E9563); color:#fff; }
  .tk-chip-count{ background:rgba(0,0,0,.06); border-radius:25px; padding:1px 7px; font-size:10.5px; font-weight:700; }
  .tk-tab.selected .tk-chip-count{ background:rgba(255,255,255,.22); color:#fff; }
  .tk-tabs-right{ margin-left:auto; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
  .tk-tabs-right .tk-select{ padding:6px 10px; font-size:11.5px; max-width:200px; }
  @media (max-width:900px){
    .tk-tabs-right{ margin-left:0; width:100%; margin-top:8px; }
  }
  .tk-viewswitch{ display:inline-flex; border:1px solid var(--line); border-radius:13px; overflow:hidden; background:var(--surface); }
  .tk-viewswitch button{ border:0; background:none; padding:8px 12px; font-size:13px; cursor:pointer; color:var(--muted); }
  .tk-viewswitch button.selected{ background:var(--green-50, #F1F8F3); color:var(--green-700); }

  .tk-layout{ display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:18px; align-items:start; }
  .tk-main{ min-width:0; display:flex; flex-direction:column; gap:16px; }
  .tk-side{ display:flex; flex-direction:column; gap:14px; position:sticky; top:14px; }
  .tk-card{ background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:16px; box-shadow:0 1px 2px rgba(16,40,24,.04); }
  .tk-card-title{ font-size:13px; font-weight:700; }

  /* Mai fókusz */
  .tk-focus{ background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:18px 18px 8px;
    box-shadow:0 1px 3px rgba(16,40,24,.05); }
  .tk-focus-head{ display:flex; align-items:flex-start; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
  .tk-focus-title{ font-size:17px; font-weight:700; letter-spacing:-.2px; display:flex; align-items:center; gap:8px; }
  .tk-focus-sub{ font-size:11.5px; color:var(--muted); margin-top:2px; }
  .tk-focus-row{ display:grid; grid-template-columns:32px 34px minmax(150px,1.5fr) 68px minmax(130px,1.2fr) 92px 132px;
    gap:12px; align-items:center; padding:12px 6px; border-top:1px solid var(--line); }
  .tk-focus-row:first-of-type{ border-top:0; }
  .tk-rank{ width:26px; height:26px; border-radius:50%; background:var(--green-600,#2E9563); color:#fff;
    display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; }
  .tk-ticon{ width:32px; height:32px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:15px; }
  .tk-score{ text-align:center; }
  .tk-score b{ font-size:16px; font-weight:700; color:var(--green-700); }
  .tk-score span{ display:block; font-size:9.5px; color:var(--muted); }

  /* Feladatsor */
  .tk-group{ background:var(--surface); border:1px solid var(--line); border-radius:18px; overflow:hidden; }
  .tk-group-head{ display:flex; align-items:center; gap:9px; padding:11px 15px; cursor:pointer; user-select:none; }
  .tk-group-head:hover{ background:var(--bg); }
  .tk-group-head h4{ margin:0; font-size:13px; font-weight:700; }
  .tk-group-body{ display:flex; flex-direction:column; }
  /*  Az utolsó oszlop eddig „auto" volt, ezért soronként más széles
      lett — attól függően, van-e potenciál-címke a gombok mellett.
      Emiatt csúsztak el az oszlopok. Most fix szélességű.  */
  .tk-row{ display:grid; grid-template-columns:24px 32px minmax(150px,2fr) 100px 82px 132px 62px 150px;
    gap:11px; align-items:center; padding:11px 15px; border-top:1px solid var(--line); transition:background .12s; }
  /*  A beégetett világos árnyalat sötét módban vakított — token
      alapján számolt, halvány kiemelés kell helyette.  */
  .tk-row:hover{ background:color-mix(in srgb, var(--ink) 4%, transparent); }
  .tk-row.done{ opacity:.5; }
  .tk-row-title{ font-size:13px; font-weight:600; cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .tk-row-sub{ font-size:11px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .tk-cat{ display:inline-block; font-size:10.5px; font-weight:600; padding:3px 9px; border-radius:9px; white-space:nowrap; }
  .tk-prio{ display:inline-flex; align-items:center; gap:4px; font-size:10.5px; font-weight:700; padding:3px 9px; border-radius:9px; white-space:nowrap; }
  .tk-pot{ font-size:11.5px; font-weight:700; color:var(--green-700); white-space:nowrap; }
  .tk-pot span{ display:block; font-size:9.5px; font-weight:400; color:var(--muted); }
  .tk-qa{ display:flex; gap:5px; align-items:center; justify-content:flex-end;
    min-width:0; overflow:hidden; }
  .tk-qa .tk-pot{ overflow:hidden; text-overflow:ellipsis; }
  .tk-qa button{ border:1px solid var(--line); background:var(--surface); border-radius:10px; width:28px; height:28px;
    display:flex; align-items:center; justify-content:center; font-size:12.5px; cursor:pointer; color:var(--ink); transition:.12s; }
  .tk-qa button:hover{ border-color:var(--green-500); background:var(--green-50,#F1F8F3); }
  .tk-wait{ font-size:10.5px; color:#C2660C; font-weight:600; }

  /* Mony kártya */
  .tk-mony{ background:linear-gradient(150deg,#241a5e,#151038); border-radius:20px; padding:17px; color:#fff; }
  .tk-mony-cta{ display:flex; gap:6px; flex-wrap:wrap; margin-top:14px; }
  .tk-mony-cta button{ background:rgba(255,255,255,.11); border:1px solid rgba(255,255,255,.16); color:#fff;
    border-radius:11px; padding:6px 11px; font-size:11px; cursor:pointer; transition:.15s; }
  .tk-mony-cta button:hover{ background:rgba(255,255,255,.2); }

  /* Jobb oldali panel (új feladat / smart inbox) */
  /* A feladat-űrlap középre került — oldalról becsúszva könnyű volt
     eltéveszteni, és a jobb szélen elveszett a hosszabb űrlap. */
  .tk-sheet-overlay{ display:none; position:fixed; inset:0; background:rgba(9,20,13,.46); z-index:1300;
    justify-content:center; align-items:center; padding:24px;
    backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }
  .tk-sheet-overlay.show{ display:flex; }
  /* Akkora, mint az ügyfélkártya — kétoszlopos elrendezéssel */
  .tk-sheet{ width:100%; max-width:1180px; max-height:96vh; height:auto;
    background:var(--surface); display:flex; flex-direction:column; border-radius:22px; overflow:hidden;
    box-shadow:0 24px 60px rgba(0,0,0,.28); animation:tkSlide .2s ease-out; }
  @keyframes tkSlide{ from{ transform:translateY(16px) scale(.985); opacity:.4; } to{ transform:none; opacity:1; } }
  @media (max-width:640px){
    .tk-sheet-overlay{ padding:0; align-items:flex-end; }
    .tk-sheet{ max-width:100%; max-height:94vh; border-radius:22px 18px 0 0; }
  }
  .tk-sheet-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:18px 20px; border-bottom:1px solid var(--line); }
  .tk-sheet-body{ flex:1; overflow-y:auto; padding:16px 20px; display:flex; flex-direction:column; gap:13px; }
  .tk-sheet-foot{ display:flex; gap:9px; padding:14px 20px; border-top:1px solid var(--line); }
  .tk-ai-input{ margin:14px 20px 0; background:var(--green-50,#F1F8F3); border:1px solid #D9EADF; border-radius:15px; padding:12px; }
  .tk-ai-input textarea{ width:100%; min-height:62px; border:1px solid var(--line); border-radius:11px; padding:9px 11px;
    font-size:12.5px; font-family:inherit; resize:vertical; background:var(--surface); color:var(--ink); }
  .tk-typeahead{ display:none; position:relative; border:1px solid var(--line); border-radius:13px; margin-top:4px;
    background:var(--surface); max-height:190px; overflow-y:auto; box-shadow:var(--shadow-md); z-index:5; }
  .tk-typeahead div{ padding:8px 11px; font-size:12.5px; cursor:pointer; }
  .tk-typeahead div:hover{ background:var(--bg); }

  @media (max-width:1180px){
    .tk-layout{ grid-template-columns:minmax(0,1fr); }
    .tk-side{ position:static; }
  }
  @media (max-width:760px){
    .tk-row{ grid-template-columns:24px 30px 1fr 108px; }
    .tk-row > .tk-hide-sm{ display:none; }
    .tk-focus-row{ grid-template-columns:26px 30px 1fr 96px; }
    .tk-focus-row > .tk-hide-sm{ display:none; }
  }

  /* A szerződés-ablak mindig az ügyfélkártya FÖLÖTT nyíljon meg,
     bezárásakor pedig az ügyfélkártya marad láthatóan alatta. */
  /* A szerződés-ablak rétege lentebb, az egységes rétegrendnél van beállítva */
  #kanbanCardModalOverlay{ z-index:1400; }

/* ── Karbantartási jelző (jobb alul) ─────────────────────────────── */
#maintBanner.mnt-card{
  position:fixed; right:20px; bottom:20px; z-index:9500;
  width:min(400px, calc(100vw - 32px));
  background:linear-gradient(135deg,#F3FAF5 0%,#FFFFFF 58%,#EAF6EE 100%);
  border:1px solid #D7E8DC; border-radius:25px;
  box-shadow:0 18px 44px rgba(16,44,28,.18);
  padding:18px 20px; overflow:hidden;
  animation:mntIn .45s cubic-bezier(.2,.9,.3,1.3);
}
@keyframes mntIn{ from{ opacity:0; transform:translateY(18px) scale(.97); } to{ opacity:1; transform:none; } }
#maintBanner .mnt-body{ position:relative; z-index:2; max-width:236px; }
#maintBanner .mnt-icon{
  width:38px; height:38px; border-radius:14px; background:#E4F3EA;
  display:flex; align-items:center; justify-content:center; font-size:19px; margin-bottom:12px;
}
#maintBanner .mnt-title{ font-size:20px; font-weight:800; letter-spacing:-.02em; margin-bottom:6px; color:var(--ink); }
#maintBanner .mnt-msg{ font-size:12.5px; line-height:1.5; color:var(--muted); margin-bottom:12px; }
#maintBanner .mnt-row{
  display:flex; align-items:center; gap:10px;
  background:#fff; border:1px solid #E1EDE5; border-radius:16px;
  padding:9px 12px; margin-bottom:8px;
}
#maintBanner .mnt-row-ic{ font-size:16px; }
#maintBanner .mnt-row-lbl{ font-size:10.5px; color:var(--muted); font-weight:600; }
#maintBanner .mnt-row-val{ font-size:17px; font-weight:800; letter-spacing:-.01em; }
#maintBanner .mnt-cd{ color:var(--green-600); font-variant-numeric:tabular-nums; }
#maintBanner .mnt-close{
  position:absolute; top:12px; right:14px; z-index:3;
  background:none; border:none; font-size:16px; color:var(--muted); cursor:pointer; line-height:1;
}
#maintBanner .mnt-close:hover{ color:var(--ink); }
#maintBanner .mnt-robot{
  position:absolute; right:-6px; bottom:-4px; width:150px; height:auto; z-index:1;
  animation:mntFloat 3.4s ease-in-out infinite;
}
@keyframes mntFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }
#maintBanner.mnt-live{ background:linear-gradient(135deg,#FFF6EC 0%,#FFFFFF 60%,#FFEFE0 100%); border-color:#F3DCC2; }
#maintBanner.mnt-live .mnt-icon{ background:#FDEBD8; }
#maintBanner.mnt-live .mnt-cd{ color:#C2620E; }
@media (max-width:640px){
  #maintBanner.mnt-card{ right:12px; left:12px; bottom:12px; width:auto; padding:16px; }
  #maintBanner .mnt-robot{ width:110px; opacity:.5; }
  #maintBanner .mnt-body{ max-width:none; }
}

/* ── AI heti kiértékelés: nyomtatás / PDF ─────────────────────────── */
@media print{
  body.aw-printing > *{ display:none !important; }
  body.aw-printing #app{ display:block !important; }
  body.aw-printing #app > *:not(.main),
  body.aw-printing .sidebar,
  body.aw-printing .topbar,
  body.aw-printing #maintBanner{ display:none !important; }
  body.aw-printing .view:not(#view-evaluation){ display:none !important; }
  body.aw-printing #view-evaluation > *:not(#aiWeekEvalWrap){ display:none !important; }
  body.aw-printing #aiWeekEvalWrap .aw-noprint,
  body.aw-printing #aiWeekEvalWrap select,
  body.aw-printing #aiWeekEvalWrap input,
  body.aw-printing #aiWeekEvalWrap button{ display:none !important; }
  body.aw-printing #awReport, body.aw-printing #awAiText{ break-inside:avoid; box-shadow:none; }
  body.aw-printing .kodex-body{ display:block !important; height:auto !important; }
  @page{ margin:14mm; }
}

/* Feladatok — határidő gyorsszerkesztő a soron */
/*  A dátumválasztó a Határidő oszlopba került — a gombok közt nem
    fért el, ezért lógott ki a képből.  */
.tk-due-cell{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.tk-due-cell > span{
  font-size:11px; font-weight:600; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
.tk-due-inp{
  border:1px solid var(--line); border-radius:9px; padding:3px 6px;
  font-size:11px; background:var(--surface); color:var(--ink);
  width:100%; max-width:126px;
}
.tk-due-inp:hover{ border-color:var(--green-500); }
.tk-row .tk-sel{ accent-color:var(--green-600); margin-right:2px; }

/* Becsukható kártyák az Admin és a Csapat kezelése oldalon is */
#view-admin .card > .row-title,
#view-team-admin .card > .row-title{ cursor:pointer; user-select:none; }
#view-admin .card.cc-collapsed > *:not(.row-title),
#view-team-admin .card.cc-collapsed > *:not(.row-title){ display:none !important; }
#view-admin .card > .row-title::after,
#view-team-admin .card > .row-title::after{
  content:'▼'; margin-left:auto; font-size:10px; color:var(--muted); transition:transform .18s ease;
}
#view-admin .card.cc-collapsed > .row-title::after,
#view-team-admin .card.cc-collapsed > .row-title::after{ transform:rotate(-90deg); }

/* Feladatok — tömeges kijelölés */
.tk-row.tk-picked{ background:var(--green-50); box-shadow:inset 3px 0 0 var(--green-600); }
.tk-row input.tk-sel, table input.tk-sel{ accent-color:var(--green-600); width:16px; height:16px; }

/* ── Feladat-űrlap (új dizájn) ─────────────────────────────────── */
/* A feladat-űrlap akkora, mint az ügyfélkártya — a régi 520px szűk volt */
.tf-sheet{ max-width:1180px; }
.tf-sheet .tk-sheet-body{ gap:0; background:var(--bg); }

.tf-sec{ background:var(--surface); border:1px solid var(--line); border-radius:18px;
         padding:14px 15px 15px; margin-bottom:12px; }
.tf-sec-h{ display:flex; align-items:center; gap:9px; font-size:12.5px; font-weight:800;
           color:var(--ink); margin-bottom:12px; letter-spacing:.2px; }
.tf-num{ display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px;
         border-radius:50%; background:var(--green-600); color:#fff; font-size:11px; font-weight:800; flex:none; }

.tf-field{ display:flex; flex-direction:column; gap:5px; margin-bottom:11px; }
.tf-field:last-child{ margin-bottom:0; }
.tf-field > label{ font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; }
.tf-field input[type=text], .tf-field input[type=date], .tf-field input[type=number],
.tf-field select, .tf-field textarea{
  width:100%; border:1px solid var(--line); border-radius:13px; padding:9px 11px;
  font-size:13px; background:var(--bg); color:var(--ink); font-family:inherit; }
.tf-field textarea{ resize:vertical; min-height:62px; }
.tf-field input:focus, .tf-field select:focus, .tf-field textarea:focus{
  outline:none; border-color:var(--green-500); box-shadow:0 0 0 3px rgba(45,150,90,.12); }
.tf-field select[multiple]{ padding:5px; }

.tf-req{ color:var(--red); font-weight:800; }
.tf-hint{ font-size:10.5px; color:var(--muted); line-height:1.4; }
.tf-count{ font-size:10.5px; color:var(--muted); text-align:right; }
.tf-grid{ display:grid; grid-template-columns:1fr 1fr; gap:11px; }
@media (max-width:520px){ .tf-grid{ grid-template-columns:1fr; } }

.tf-chips{ display:flex; gap:6px; flex-wrap:wrap; margin-top:2px; }
.tf-chips button{ border:1px solid var(--line); background:var(--bg); color:var(--ink);
  border-radius:999px; padding:4px 11px; font-size:11px; font-weight:600; cursor:pointer; font-family:inherit; }
.tf-chips button:hover{ border-color:var(--green-500); color:var(--green-700); background:var(--green-50); }
.tf-chips button.on{ background:var(--green-600); border-color:var(--green-600); color:#fff; }

.tf-switch{ position:relative; display:inline-block; width:40px; height:22px; flex:none; }
.tf-switch input{ opacity:0; width:0; height:0; position:absolute; }
.tf-switch span{ position:absolute; inset:0; background:var(--line); border-radius:999px; transition:.18s; }
.tf-switch span:before{ content:''; position:absolute; width:16px; height:16px; left:3px; top:3px;
  background:#fff; border-radius:50%; transition:.18s; box-shadow:0 1px 3px rgba(0,0,0,.25); }
.tf-switch input:checked + span{ background:var(--green-600); }
.tf-switch input:checked + span:before{ transform:translateX(18px); }

.tf-sheet .tk-sheet-foot{ background:var(--surface); }
#tfSaveBtn{ white-space:nowrap; }
.tf-field select[multiple]{ min-height:76px; }
.tf-sheet .tk-sheet-foot .btn-primary,
.tf-sheet .tk-sheet-foot .btn-secondary{ font-size:12.5px; padding:11px 12px; }
.tf-grid > .tf-field{ align-self:start; }
.tf-grid{ margin-bottom:11px; }
.tf-grid:last-child{ margin-bottom:0; }
.tf-grid > .tf-field{ margin-bottom:0; }

  /* ── Feladat kereső & szűrő ─────────────────────────────────── */
  .tk-search{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; background:var(--surface); border:1px solid var(--line); border-radius:15px; padding:10px 12px; margin-bottom:12px; }
  .tk-search-main{ position:relative; display:flex; align-items:center; flex:1 1 240px; min-width:190px; }
  .tk-search-ico{ position:absolute; left:11px; font-size:12px; opacity:.55; pointer-events:none; }
  .tk-search-main input{ width:100%; padding:8px 30px; border:1px solid var(--line); border-radius:25px; font-size:12.5px; background:var(--bg); color:var(--ink); }
  .tk-search-x{ position:absolute; right:7px; border:0; background:transparent; color:var(--muted); font-size:12px; line-height:1; padding:4px 5px; cursor:pointer; border-radius:50%; }
  .tk-search-x:hover{ background:var(--green-50); color:var(--green-700); }
  .tk-search select, .tk-search input[type="date"]{ border:1px solid var(--line); border-radius:11px; padding:7px 9px; font-size:12px; background:var(--bg); color:var(--ink); }
  .tk-search .tk-fx{ border-color:var(--green-500); color:var(--green-700); font-weight:700; }
  .tk-search-info{ font-size:11.5px; color:var(--muted); margin-left:auto; white-space:nowrap; }
  .tk-hl{ background:var(--green-100); color:var(--green-900); border-radius:3px; padding:0 1px; }
  [data-theme="dark"] .tk-hl{ color:var(--ink); }
  @media (max-width:760px){
    .tk-search{ gap:6px; }
    .tk-search-main{ flex:1 1 100%; }
    .tk-search-info{ margin-left:0; width:100%; }
  }

  /* ══════════════════════════════════════════════════════════════
     Dátum- és időmezők — egységes, letisztult megjelenés
     A böngésző natív stílusa helyett ugyanaz a keret, sarok,
     tipográfia és fókuszgyűrű, mint a többi beviteli mezőnél.
     ══════════════════════════════════════════════════════════════ */
  input[type="date"], input[type="month"], input[type="week"],
  input[type="time"], input[type="datetime-local"]{
    -webkit-appearance:none;
    appearance:none;
    box-sizing:border-box;
    border:1px solid var(--line);
    border-radius:var(--radius-sm);
    padding:9px 11px;
    font-family:inherit;
    font-size:13px;
    font-variant-numeric:tabular-nums;
    letter-spacing:0;
    line-height:1.25;
    min-height:38px;
    background:var(--bg);
    color:var(--ink);
    transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
  }
  input[type="date"]:hover, input[type="month"]:hover, input[type="week"]:hover,
  input[type="time"]:hover, input[type="datetime-local"]:hover{
    border-color:var(--green-100);
  }
  input[type="date"]:focus, input[type="month"]:focus, input[type="week"]:focus,
  input[type="time"]:focus, input[type="datetime-local"]:focus{
    outline:none; border-color:var(--green-500); box-shadow:var(--focus-ring);
  }
  input[type="date"]:disabled, input[type="month"]:disabled,
  input[type="time"]:disabled, input[type="datetime-local"]:disabled{
    background:var(--line); color:var(--muted); opacity:.75;
  }

  /* A belső mezőrészek a felület tipográfiáját kövessék */
  input[type="date"]::-webkit-datetime-edit,
  input[type="month"]::-webkit-datetime-edit,
  input[type="time"]::-webkit-datetime-edit,
  input[type="datetime-local"]::-webkit-datetime-edit{
    font-family:inherit; padding:0; color:var(--ink);
  }
  input[type="date"]::-webkit-datetime-edit-fields-wrapper,
  input[type="month"]::-webkit-datetime-edit-fields-wrapper,
  input[type="time"]::-webkit-datetime-edit-fields-wrapper{ padding:0; }
  input[type="date"]::-webkit-datetime-edit-text,
  input[type="month"]::-webkit-datetime-edit-text,
  input[type="time"]::-webkit-datetime-edit-text{ color:var(--muted); padding:0 1px; }
  input[type="date"]::-webkit-datetime-edit-year-field:focus,
  input[type="date"]::-webkit-datetime-edit-month-field:focus,
  input[type="date"]::-webkit-datetime-edit-day-field:focus,
  input[type="time"]::-webkit-datetime-edit-hour-field:focus,
  input[type="time"]::-webkit-datetime-edit-minute-field:focus{
    background:var(--green-100); color:var(--green-900); border-radius:4px; outline:none;
  }

  /* Naptár-ikon: halk, kattintható, a zöld arculathoz igazítva */
  input[type="date"]::-webkit-calendar-picker-indicator,
  input[type="month"]::-webkit-calendar-picker-indicator,
  input[type="week"]::-webkit-calendar-picker-indicator,
  input[type="time"]::-webkit-calendar-picker-indicator,
  input[type="datetime-local"]::-webkit-calendar-picker-indicator{
    opacity:.42;
    cursor:pointer;
    margin:0 -2px 0 6px;
    padding:3px;
    border-radius:5px;
    filter:grayscale(1);
    transition:opacity .15s ease, background .15s ease;
  }
  input[type="date"]::-webkit-calendar-picker-indicator:hover,
  input[type="month"]::-webkit-calendar-picker-indicator:hover,
  input[type="time"]::-webkit-calendar-picker-indicator:hover,
  input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover{
    opacity:.9; background:var(--green-50);
  }

  /* Firefox: a beépített törlés-gomb ne rontsa a ritmust */
  input[type="date"]::-moz-focus-inner{ border:0; padding:0; }

  [data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
  [data-theme="dark"] input[type="month"]::-webkit-calendar-picker-indicator,
  [data-theme="dark"] input[type="week"]::-webkit-calendar-picker-indicator,
  [data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator,
  [data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator{
    filter:invert(1) grayscale(1); opacity:.55;
  }

  /* A .field / .tf-field / .crm-fsel konténerekben teljes szélesség */
  .field input[type="date"], .field input[type="month"], .field input[type="time"],
  .field input[type="datetime-local"],
  .tf-field input[type="date"], .tf-field input[type="month"], .tf-field input[type="time"]{
    width:100%;
  }

  /* Kompakt helyek: sorbeli és szűrősávos dátummezők maradjanak alacsonyak */
  input.tk-due-inp[type="date"],
  .tk-search input[type="date"],
  #tkBulkBar input[type="date"],
  .crm-fsel[type="date"]{
    min-height:0; padding:6px 9px; font-size:12px;
  }

  /* ══════════════════════════════════════════════════════════════
     Egységes űrlap-alapok — minden beviteli típusra, az egész OS-ben.
     Csak ott hat, ahol nincs saját (specifikusabb) stílus, így a
     meglévő kompakt sávok és egyedi mezők érintetlenek maradnak.
     ══════════════════════════════════════════════════════════════ */
  input:not([type]),
  input[type="text"], input[type="email"], input[type="password"],
  input[type="number"], input[type="tel"], input[type="url"],
  input[type="search"], textarea, select{
    box-sizing:border-box;
    border:1px solid var(--line);
    border-radius:var(--radius-sm);
    background:var(--bg);
    color:var(--ink);
    font-family:inherit;
    font-size:13px;
    line-height:1.35;
    transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
  }
  input:not([type]), input[type="text"], input[type="email"], input[type="password"],
  input[type="number"], input[type="tel"], input[type="url"], input[type="search"], select{
    min-height:38px;
    padding:9px 11px;
  }
  textarea{ padding:10px 12px; resize:vertical; min-height:72px; }

  input:not([type]):hover, input[type="text"]:hover, input[type="email"]:hover,
  input[type="password"]:hover, input[type="number"]:hover, input[type="tel"]:hover,
  input[type="url"]:hover, input[type="search"]:hover, textarea:hover{
    border-color:var(--green-100);
  }

  /* Helykitöltő szöveg — halkabb, nem versenyez a tartalommal */
  input::placeholder, textarea::placeholder{ color:var(--muted); opacity:.75; }

  /* Letiltott és csak-olvasható állapot */
  input:disabled, textarea:disabled, select:disabled,
  input[readonly], textarea[readonly]{
    background:var(--line); color:var(--muted); opacity:.8; cursor:not-allowed;
  }

  /* Számmezők: ne ugráljon a léptető nyilacska */
  input[type="number"]{ -moz-appearance:textfield; }
  input[type="number"]::-webkit-outer-spin-button,
  input[type="number"]::-webkit-inner-spin-button{
    -webkit-appearance:none; margin:0;
  }
  input[type="number"]:hover::-webkit-inner-spin-button,
  input[type="number"]:focus::-webkit-inner-spin-button{
    -webkit-appearance:inner-spin-button; opacity:.6;
  }

  /* Kereső típusú mezők: natív X gomb elrejtése (saját törlőgomb van) */
  input[type="search"]::-webkit-search-decoration,
  input[type="search"]::-webkit-search-cancel-button{ -webkit-appearance:none; }

  /* Jelölőnégyzet és rádiógomb — arculati zöld, kényelmes méret */
  input[type="checkbox"], input[type="radio"]{
    accent-color:var(--green-600);
    width:16px; height:16px;
    cursor:pointer;
    flex-shrink:0;
  }
  input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible{
    outline:none; box-shadow:var(--focus-ring); border-radius:4px;
  }

  /* Fájlfeltöltés — a natív gomb helyett arculati stílus */
  input[type="file"]{
    font-family:inherit; font-size:12.5px; color:var(--muted);
    border:1px dashed var(--line); border-radius:var(--radius-sm);
    padding:9px 11px; background:var(--bg); width:100%;
  }
  input[type="file"]::file-selector-button{
    font-family:inherit; font-size:12px; font-weight:700;
    border:1px solid var(--line); border-radius:10px;
    padding:6px 12px; margin-right:10px;
    background:var(--surface); color:var(--green-700); cursor:pointer;
    transition:background .15s ease, border-color .15s ease;
  }
  input[type="file"]::file-selector-button:hover{
    background:var(--green-50); border-color:var(--green-100);
  }

  /* Csúszka */
  input[type="range"]{ accent-color:var(--green-600); }

  /* Kötelező mező jelölése és hibás állapot */
  input:user-invalid, textarea:user-invalid, select:user-invalid{
    border-color:var(--red);
  }

  /* Automatikus kitöltés: ne törje meg a témát */
  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus{
    -webkit-text-fill-color:var(--ink);
    -webkit-box-shadow:0 0 0 40px var(--bg) inset;
    transition:background-color 9999s ease-in-out 0s;
  }

  /* Kompakt helyek: a sűrű szűrő- és eszközsávokban maradjon alacsony */
  .tk-search input, .tk-search select,
  #tkBulkBar input, #tkBulkBar select,
  .tk-due-inp, .crm-fsel, .tk-select,
  .gcal-tab, td input, td select, th input, th select{
    min-height:0;
  }

  /* A fókuszgyűrű minden mezőn a legutolsó szó — típustól függetlenül */
  input:focus, textarea:focus, select:focus{
    outline:none; border-color:var(--green-500) !important; box-shadow:var(--focus-ring);
  }

  /* ══════════════════════════════════════════════════════════════
     Struktúra fa — klasszikus organogram
     A szülő középen, alatta a gyerekek vízszintesen, összekötő
     vonalakkal. A vonalakat CSS rajzolja, nincs szükség SVG-re.
     ══════════════════════════════════════════════════════════════ */
  .ot-wrap{
    display:flex; gap:56px; align-items:flex-start; justify-content:center;
    padding:24px 12px 40px; min-width:min-content;
  }
  .ot-root{ display:inline-block; text-align:center; }

  /* A gyerekek sora */
  .ot-children{
    display:flex; justify-content:center; align-items:flex-start;
    position:relative; padding-top:26px;
  }
  /* Függőleges csonk a szülőtől lefelé */
  .ot-children::before{
    content:''; position:absolute; top:0; left:50%;
    width:2px; height:26px; background:var(--line); transform:translateX(-1px);
  }

  .ot-child{ position:relative; padding:26px 9px 0; text-align:center; }
  /* Függőleges csonk a gyerek fölött */
  .ot-child::after{
    content:''; position:absolute; top:0; left:50%;
    width:2px; height:26px; background:var(--line); transform:translateX(-1px);
  }
  /* Vízszintes összekötő — a szélső elemeknél félig */
  .ot-child::before{
    content:''; position:absolute; top:0; height:2px; background:var(--line);
    left:0; right:0;
  }
  .ot-child:first-child::before{ left:50%; }
  .ot-child:last-child::before{  right:50%; }
  .ot-child:only-child::before{  display:none; }

  /* ── A kártya ─────────────────────────────────────────────── */
  .ot-card{
    display:inline-block; position:relative; width:186px;
    border:1px solid var(--line); border-radius:15px; overflow:hidden;
    background:var(--surface); cursor:pointer; text-align:center;
    box-shadow:0 1px 3px rgba(0,0,0,.05);
    transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  }
  .ot-card:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 22px rgba(0,0,0,.10);
    border-color:var(--green-500);
  }
  .ot-card.is-me{ border-color:var(--green-500); box-shadow:0 0 0 2px var(--green-100); }
  .ot-card.is-cand{ border-style:dashed; border-color:#E0B65C; opacity:.8; }
  .ot-card.is-assz{ border-style:dashed; border-color:#E9A5C0; }

  .ot-head{
    font-size:9.5px; font-weight:800; letter-spacing:.06em;
    padding:5px 8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .ot-body{ padding:11px 10px 12px; }
  .ot-av{
    width:40px; height:40px; font-size:14px; margin:0 auto 7px;
    border:2px solid var(--surface); box-shadow:0 0 0 1px var(--line);
  }
  .ot-av img{ width:100%; height:100%; border-radius:50%; object-fit:cover; }
  .ot-name{
    font-weight:700; font-size:12.5px; line-height:1.3; color:var(--ink);
    word-break:break-word;
  }
  .ot-me{ color:var(--muted); font-weight:400; }
  .ot-sub{ font-size:10px; color:var(--muted); margin-top:3px; }

  @media (max-width:760px){
    .ot-card{ width:150px; }
    .ot-child{ padding:22px 5px 0; }
    .ot-wrap{ gap:28px; }
  }

  /* ══════════════════════════════════════════════════════════════
     Szövegszerkesztő — félkövér, dőlt, aláhúzott, kiemelés…
     A textarea rejtve marad és hordozza az értéket, fölötte egy
     szerkeszthető felület jeleníti meg a formázott szöveget.
     ══════════════════════════════════════════════════════════════ */
  .mh-ed-wrap{
    border:1px solid var(--line); border-radius:var(--radius-sm);
    background:var(--bg); overflow:hidden;
    transition:border-color .18s ease, box-shadow .18s ease;
  }
  .mh-ed-wrap:focus-within{ border-color:var(--green-500); box-shadow:var(--focus-ring); }

  .mh-ed-bar{
    display:flex; align-items:center; gap:2px; flex-wrap:wrap;
    padding:5px 6px; border-bottom:1px solid var(--line);
    background:var(--surface); position:sticky; top:0; z-index:2;
  }
  .mh-ed-btn{
    min-width:28px; height:28px; padding:0 7px;
    border:1px solid transparent; border-radius:9px;
    background:transparent; color:var(--muted);
    font-size:12.5px; font-weight:700; line-height:1; cursor:pointer;
    display:inline-flex; align-items:center; justify-content:center;
    transition:background .13s ease, color .13s ease, border-color .13s ease;
  }
  .mh-ed-btn:hover{ background:var(--green-50); color:var(--green-700); }
  .mh-ed-btn.on{ background:var(--green-100); color:var(--green-700); border-color:var(--green-100); }
  .mh-ed-sep{ width:1px; height:17px; background:var(--line); margin:0 4px; }

  .mh-ed-area{
    min-height:120px; max-height:60vh; overflow-y:auto;
    padding:11px 13px; font-size:13.5px; line-height:1.65;
    color:var(--ink); outline:none; white-space:pre-wrap; word-break:break-word;
  }
  .mh-ed-area:empty::before{
    content:attr(data-ph); color:var(--muted); opacity:.7; pointer-events:none;
  }
  .mh-ed-area b, .mh-ed-area strong{ font-weight:700; }
  .mh-ed-area u{ text-decoration:underline; }
  .mh-ed-area s{ text-decoration:line-through; opacity:.75; }
  .mh-ed-area mark{ background:#FEF3C7; color:var(--ink); border-radius:3px; padding:0 2px; }
  .mh-ed-area h3{ font-size:15px; font-weight:800; margin:10px 0 4px; }
  .mh-ed-area ul, .mh-ed-area ol{ margin:6px 0 6px 20px; }
  .mh-ed-area li{ margin:2px 0; }
  .mh-ed-area a{ color:var(--green-700); text-decoration:underline; }
  .mh-ed-area blockquote{
    margin:8px 0; padding:5px 12px;
    border-left:3px solid var(--green-500); background:var(--green-50);
    border-radius:0 8px 8px 0;
  }

  /* Ugyanez a formázás a megjelenítéskor (nem szerkeszthető helyeken) */
  .mh-rich{ line-height:1.65; word-break:break-word; }
  .mh-rich mark{ background:#FEF3C7; border-radius:3px; padding:0 2px; }
  .mh-rich h3{ font-size:14.5px; font-weight:800; margin:9px 0 3px; }
  .mh-rich ul, .mh-rich ol{ margin:5px 0 5px 20px; }
  .mh-rich a{ color:var(--green-700); text-decoration:underline; }
  .mh-rich blockquote{
    margin:7px 0; padding:5px 11px;
    border-left:3px solid var(--green-500); background:var(--green-50);
    border-radius:0 8px 8px 0;
  }
  [data-theme="dark"] .mh-ed-area mark, [data-theme="dark"] .mh-rich mark{
    background:#7c5f14; color:#fff;
  }

  /* Kattintható név a listanézetekben — a hover jelzi, hogy megnyitható */
  td[onclick*="openCrmModal"], td[onclick*="openHrCandModal"]{
    transition:color .13s ease;
  }
  td[onclick*="openCrmModal"]:hover, td[onclick*="openHrCandModal"]:hover{
    color:var(--green-700);
    text-decoration:underline;
    text-underline-offset:2px;
  }

  /* Rövid bemutatkozó a belépő képernyőn — csak akkor látszik,
     ha valaki nincs bejelentkezve. */
  .auth-intro{
    text-align:center;
    padding:0 4px 18px;
    margin-bottom:16px;
    border-bottom:1px solid var(--line);
  }
  .auth-intro-co{
    font-size:10px; font-weight:700; letter-spacing:.13em;
    text-transform:uppercase; color:var(--muted); margin-bottom:6px;
  }
  .auth-intro-txt{
    font-size:12.5px; line-height:1.55; color:var(--muted);
  }
  .auth-intro-link{
    display:inline-block; margin-top:8px;
    font-size:11.5px; font-weight:600; color:var(--green-700);
    text-decoration:none; cursor:pointer;
  }
  .auth-intro-link:hover{ text-decoration:underline; }

  /* Tréning-jelentkezés: kérdéses állapot */
  .train-att-btn.on-maybe{
    background:#FEF3C7; border-color:#F3DEB8; color:#B45309; font-weight:700;
  }

/* ── Szavazó-címke megjegyzés-buborékkal ──────────────────────────
   A Toborzás → Szavazás fülön a névre húzva megjelenik a szavazó
   rövid indoklása. Tisztán CSS, nincs hozzá JavaScript. */
.hr-voter{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:2px 8px;
  border-radius:999px;
  font-size:10px;
  font-weight:600;
  cursor:help;
}
.hr-voter-tip{
  position:absolute;
  bottom:calc(100% + 8px);
  left:50%;
  transform:translateX(-50%) translateY(4px);
  min-width:170px;
  max-width:290px;
  width:max-content;
  padding:9px 12px;
  border-radius:13px;
  background:#1F2937;
  color:#F9FAFB;
  font-size:11.5px;
  font-weight:500;
  line-height:1.45;
  text-align:left;
  white-space:normal;
  box-shadow:0 6px 22px rgba(0,0,0,.28);
  opacity:0;
  visibility:hidden;
  transition:opacity .16s ease, transform .16s ease;
  z-index:1200;
  pointer-events:none;
}
/* A buborék alatti kis nyíl a névre mutat */
.hr-voter-tip::after{
  content:'';
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%);
  border:6px solid transparent;
  border-top-color:#1F2937;
}
.hr-voter:hover .hr-voter-tip,
.hr-voter:focus-visible .hr-voter-tip{
  opacity:1;
  visibility:visible;
  transform:translateX(-50%) translateY(0);
}

/* ── Csendes PG — vezérfonal sorok ────────────────────────────────── */
.pg-row{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:9px 0;
  border-bottom:1px solid var(--line);
}
.pg-row:last-child{ border-bottom:none; }
.pg-txt{
  font-size:12.5px;
  line-height:1.5;
  color:var(--ink);
}
/* Kipipált pont halványabb, de olvasható marad */
.pg-row.pg-done .pg-txt{
  color:var(--muted);
  text-decoration:line-through;
  text-decoration-color:var(--line);
}

/* ── Feladat lezárása / újranyitása ────────────────────────────────
   Korábban csak egy „✓" jel állt a sor végén, amit sokan nem
   találtak meg. Feliratos, zöld gomb lépett a helyére. */
/* A .tk-qa button 28x28-ra kényszerít — a feliratos gombnak szélesebb kell */
.tk-qa .tk-close-btn,
.tk-qa .tk-reopen-btn{ width:auto !important; height:auto !important; }

.tk-close-btn{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:6px 14px;
  border:1px solid var(--green-600);
  border-radius:11px;
  background:var(--green-600);
  color:#fff;
  font-size:11.5px;
  font-weight:700;
  font-family:inherit;
  white-space:nowrap;
  cursor:pointer;
  transition:background .15s, transform .1s;
}
.tk-close-btn::before{ content:'✓'; font-weight:800; }
.tk-close-btn:hover{ background:var(--green-700); border-color:var(--green-700); }
.tk-close-btn:active{ transform:scale(.97); }

.tk-reopen-btn{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:6px 12px;
  border:1px solid var(--line);
  border-radius:11px;
  background:var(--surface);
  color:var(--muted);
  font-size:11.5px;
  font-weight:600;
  font-family:inherit;
  white-space:nowrap;
  cursor:pointer;
}
.tk-reopen-btn:hover{ color:var(--ink); border-color:var(--muted); }

/* Keskeny kijelzőn csak a pipa marad, hogy elférjen */
@media (max-width: 720px){
  .tk-close-btn{ padding:6px 10px; font-size:0; gap:0; }
  .tk-close-btn::before{ font-size:13px; }
  .tk-reopen-btn{ padding:6px 10px; font-size:0; }
  .tk-reopen-btn::before{ content:'↩'; font-size:13px; }
}

/* ── Súgó-buborék (kérdőjel a mezők címkéjében) ───────────────────
   Az űrlapmezők mellé tehető magyarázat. Egérrel ráhúzva vagy
   billentyűzettel rááltalva jelenik meg. */
.mh-help{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:15px;
  height:15px;
  margin-left:5px;
  border-radius:50%;
  background:var(--green-100);
  color:var(--green-700);
  font-size:10.5px;
  font-weight:800;
  cursor:help;
  position:relative;
  vertical-align:middle;
  user-select:none;
}
.mh-help:hover{ background:var(--green-600); color:#fff; }

.mh-help-tip{
  position:absolute;
  bottom:calc(100% + 9px);
  left:50%;
  transform:translateX(-50%) translateY(5px);
  width:300px;
  max-width:78vw;
  padding:11px 13px;
  border-radius:14px;
  background:#1F2937;
  color:#F9FAFB;
  font-size:11.5px;
  font-weight:400;
  line-height:1.55;
  text-align:left;
  letter-spacing:0;
  text-transform:none;
  box-shadow:0 8px 26px rgba(0,0,0,.3);
  opacity:0;
  visibility:hidden;
  transition:opacity .16s ease, transform .16s ease;
  z-index:1400;
  pointer-events:none;
}
.mh-help-tip::after{
  content:'';
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%);
  border:6px solid transparent;
  border-top-color:#1F2937;
}
.mh-help:hover .mh-help-tip,
.mh-help:focus .mh-help-tip,
.mh-help:focus-visible .mh-help-tip{
  opacity:1;
  visibility:visible;
  transform:translateX(-50%) translateY(0);
}
.mh-help-tip strong{ color:#fff; }
.mh-help-tip em{ color:#A7F3D0; font-style:normal; font-weight:600; }

/* ── Ügyfélkártya a feladat-fiók fölött ───────────────────────────
   A feladat-szerkesztő fiók z-indexe 1300, az ügyfélkártyáé viszont
   csak 60 volt — ezért a kártya a fiók MÖGÖTT nyílt meg, elhomályosítva.
   A CRM-kártya mindig a legfelső réteg legyen. */
/* ── Modális rétegrend ─────────────────────────────────────────────
   A rétegek évek alatt szétestek: a CRM-kártya 60-on, a feladat-fiók
   1300-on, a szerződés-szerkesztő 1500-on volt. Ezért nyílt meg a
   kártya a fiók mögött, a szerződés pedig a kártya mögött.

   Az elv: ami MÁSIK ablakból nyílik, annak feljebb kell lennie.

     1300  feladat-fiók, egyéb alap ablakok
     1600  CRM ügyfélkártya            (feladatból is nyílhat)
     1700  szerződés / eladás ablakai  (kártyából nyílnak)
     1750  jelölt, PG, meeting-jegyzet (kártyából nyílnak)
     1790  feladatlap                  (BÁRMELYIK kártyából nyílik)
     1795  a feladatlapból nyíló ablakok
     1900  megerősítő és értesítő ablakok (mindenek fölött)          */

#crmModalOverlay{ z-index:1600 !important; }
#tkClientOverlay{ z-index:1550 !important; }

/*  A feladatlap MINDEN kártyából nyílhat — ügyfélből, jelöltből,
    szerződésből —, ezért a legfelső réteg alá kell kerülnie, de
    minden kártya fölé. Korábban 1650-en volt, és a jelölt-ablak
    (1750) eltakarta.  */
#tkSheetOverlay{ z-index:1790 !important; }

/* Az ügyfélkártyából nyíló ablakok — fölé kell kerülniük */
#contractModalOverlay,
#saleDetailOverlay,
#salesNewModalOverlay{ z-index:1700 !important; }

/*  A feladatlapból nyíló ablakok — a lap (1790) fölé  */
#tkInboxOverlay{ z-index:1795 !important; }
#gcalEventModalOverlay{ z-index:1796 !important; }

#hrCandModalOverlay,
#pgModalOverlay,
#lifeInviteOverlay,
#emailComposeOverlay,
#historyModalOverlay,
#readerModalOverlay,
#taskInviteOverlay{ z-index:1750 !important; }

/* Megerősítő és értesítő ablakok — mindig legfelül */
#genericModalOverlay,
#evalPopupOverlay,
#liveMeetingOverlay{ z-index:1900 !important; }

/*  A dátumválasztó és a legördülők a feladatlap fölött is
    kattinthatók maradjanak  */
#tkSheetOverlay .modal-box{ isolation:isolate; }

/* ── Űrlapmezők egységes mérete ────────────────────────────────────
   A select és a dátum-mezők kimaradtak az általános input-szabályból,
   ezért laposabbak voltak a szövegmezőknél. A .field konténeren belül
   most mindegyik ugyanúgy néz ki. */
.field select,
.field input[type="date"],
.field input[type="month"],
.field input[type="time"],
.tf-field select,
.tf-field input[type="date"],
.tf-field input[type="month"]{
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:10px 12px;
  font-size:13.5px;
  font-family:inherit;
  background:var(--bg);
  color:var(--ink);
  width:100%;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.field select:focus,
.field input[type="date"]:focus,
.tf-field select:focus{
  outline:none;
  border-color:var(--green-500);
  box-shadow:0 0 0 3px var(--green-100);
}

/* ── Rendezvények leírása — szerkesztőből érkező HTML ──────────────
   A leírás rich-text mezőből jön (div/br/b/lista). Itt fogjuk vissza,
   hogy a kártyán ne törje szét a tipográfiát. */
.ce-desc > div:empty{ display:none; }
.ce-desc > *:first-child{ margin-top:0; }
.ce-desc > *:last-child{ margin-bottom:0; }
.ce-desc p, .ce-desc div{ margin:0 0 3px; }
.ce-desc b, .ce-desc strong{ color:var(--ink); font-weight:700; }
.ce-desc ul, .ce-desc ol{ margin:4px 0 4px 18px; padding:0; }
.ce-desc li{ margin-bottom:2px; }
.ce-desc a{ color:var(--green-700); text-decoration:underline; }
.ce-desc h1, .ce-desc h2, .ce-desc h3, .ce-desc h4{
  font-size:13px; font-weight:700; color:var(--ink); margin:7px 0 3px;
}
.ce-desc table{ border-collapse:collapse; margin:5px 0; font-size:12px; }
.ce-desc td, .ce-desc th{ border:1px solid var(--line); padding:3px 7px; }


/* ── Tréningek a munkatárs kártyáján ────────────────────────────── */
.mts-list{ display:flex; flex-direction:column; gap:7px; }
.mts-row{ display:flex; align-items:flex-start; gap:11px; border:1px solid var(--line);
  border-radius:15px; padding:10px 12px; background:var(--surface); }
.mts-row.done{ background:var(--green-50, #F0FAF4); border-color:var(--green-200, #cdeadb); }
.mts-tick{ width:26px; height:26px; border-radius:10px; border:1.5px solid var(--line);
  background:var(--surface); color:var(--muted); cursor:pointer; font-size:13px; font-weight:800;
  flex-shrink:0; transition:background .12s ease, border-color .12s ease; }
.mts-tick:hover{ border-color:var(--green-500); }
.mts-tick.on{ background:var(--green-600); border-color:var(--green-600); color:#fff; }
.mts-mid{ flex:1; min-width:0; }
.mts-t{ font-size:12.5px; font-weight:700; }
.mts-s{ font-size:11px; color:var(--muted); margin-top:2px; }
.mts-notes{ display:flex; flex-direction:column; gap:5px; margin-top:7px; }
.mts-note{ font-size:11.5px; line-height:1.5; background:var(--bg); border-left:3px solid var(--line);
  border-radius:9px; padding:6px 9px; }
.mts-note span{ display:block; font-size:9.5px; font-weight:800; text-transform:uppercase;
  letter-spacing:.04em; color:var(--muted); margin-bottom:2px; }
.mts-note.sajat{ background:#f3faf6; border-left-color:var(--green-500, #1aa568); }
.mts-note.own{ background:#FFFBF0; border-left-color:#F59E0B; margin-top:7px; }
.mts-edit{ padding:4px 10px; font-size:12px; flex-shrink:0; }


/* ── Esemény dátumkocka és részvételi mód ───────────────────────── */
.ce-date{ width:76px; border:1px solid var(--line); border-radius:18px; overflow:hidden;
  text-align:center; background:var(--surface); flex-shrink:0; }
.ce-date-m{ background:var(--green-700, #12724A); color:#fff; font-size:10px; font-weight:800;
  letter-spacing:.07em; padding:5px 0; }
.ce-date.past .ce-date-m{ background:var(--line); color:var(--muted); }
.ce-date-d{ font-size:30px; font-weight:800; line-height:1.1; padding:8px 0 2px; }
.ce-date-t{ font-size:12px; color:var(--muted); padding-bottom:8px; font-weight:600; }
.ce-mod{ font-size:10.5px; font-weight:700; padding:2px 9px; border-radius:25px;
  background:var(--bg); color:var(--muted); border:1px solid var(--line); }
.ce-mod.online{ background:#E6F0FB; color:#1D4ED8; border-color:#c9ddf6; }
.ce-mod.valaszt{ background:#EDE9FE; color:#6D28D9; border-color:#ddd6fe; }


/* ── Esemény-szerkesztő: görgethető törzs, rögzített fejléc és lábléc ── */
.ce-modal{ display:flex; flex-direction:column; max-height:88vh; padding:0; overflow:hidden; }
.ce-modal-h{ margin:0; padding:18px 24px 14px; border-bottom:1px solid var(--line); flex-shrink:0; }
.ce-modal-body{ flex:1; overflow-y:auto; padding:16px 24px; }
.ce-modal-f{ flex-shrink:0; padding:14px 24px !important; border-top:1px solid var(--line);
  background:var(--surface); margin-top:0 !important; }
.ce-modal .field{ margin-bottom:12px; }
.ce-modal textarea#ceDescription{ min-height:120px; }
.ce-modal .mh-area{ max-height:220px; overflow-y:auto; }
@media (max-height:720px){
  .ce-modal{ max-height:94vh; }
  .ce-modal-body{ padding:12px 20px; }
  .ce-modal textarea#ceDescription{ min-height:90px; }
}

.mts-extra{ margin-top:14px; padding-top:12px; border-top:1px solid var(--line); }
.mts-extra-h{ display:flex; align-items:center; gap:9px; font-size:12.5px; font-weight:800; margin-bottom:3px; }
.mts-extra-c{ font-size:10.5px; font-weight:700; color:var(--green-700, #12724A);
  background:var(--green-100); border-radius:25px; padding:2px 9px; }
.mts-extra-s{ font-size:11px; color:var(--muted); margin-bottom:9px; line-height:1.5; }
.mts-extra .mts-row{ margin-bottom:7px; }


/* ── Feladat-szerkesztő: kétoszlopos elrendezés a nagyobb ablakban ── */
@media (min-width:1000px){
  .tk-sheet-body{
    display:grid;
    grid-template-columns:1.45fr 1fr;
    grid-auto-flow:row dense;
    align-items:start;
    gap:16px 18px;
    padding:20px 24px;
  }
  /* Az ügyfélsáv és az AI-mező végig ér */
  #tmClientBar, .tk-ai-input, #tfSecAi{ grid-column:1 / -1; }
  /* Már csak két blokk van: az alapadatok és a megjegyzések.
     Az alapadatok kapják a szélesebb hasábot, a megjegyzések mellé. */
  .tk-sheet-body > .tf-sec:nth-of-type(1){ grid-column:1; }
  #tfSecNotes{ grid-column:2; }

  .tf-sec{ margin-bottom:0; }
  .tk-sheet-body textarea#taskDesc{ min-height:150px; }
  .tk-sheet-head{ padding:18px 22px; }
  .tk-sheet-foot{ padding:14px 22px; }
}

/* A határidő gyorsgombjai rendezett rácsban, ne törjenek szét */
.tf-chips{ display:grid; grid-template-columns:repeat(4, 1fr); gap:5px; margin-top:7px; }
.tf-chips button{ border:1px solid var(--line); background:var(--surface); color:var(--muted);
  border-radius:11px; padding:5px 4px; font-size:10.5px; font-weight:700; cursor:pointer;
  white-space:nowrap; transition:border-color .12s ease, color .12s ease; }
.tf-chips button:hover{ border-color:var(--green-500); color:var(--green-700); }
@media (max-width:520px){ .tf-chips{ grid-template-columns:repeat(3, 1fr); } }


/* ── Feladat-űrlap: levegősebb, nagyobb betűk ───────────────────── */
.tf-sec{ padding:18px 20px 20px; }
.tf-sec-h{ font-size:14px; margin-bottom:14px; }
.tf-field label{ font-size:11.5px; }
.tf-field input, .tf-field select, .tf-field textarea{ font-size:13.5px; padding:11px 13px; }
.tf-hint{ font-size:11.5px; line-height:1.55; }
#taskDesc, .tf-sec .mh-area{ min-height:170px; font-size:13.5px; line-height:1.65; }
#taskSubject{ font-weight:600; }
.tk-sheet-head h3, .tk-sheet-head .tf-head-title{ font-size:16px; }
.tk-sheet-foot .btn-primary, .tk-sheet-foot .btn-secondary{ font-size:13px !important; padding:12px 18px !important; }

/* A megjegyzés-oszlop ne szoruljon össze */
#tfSecNotes #tmNotesList{ max-height:none; }
#tfSecNotes textarea, #tfSecNotes input{ font-size:12.5px; }

@media (max-width:999px){
  .tf-sheet{ max-width:760px; }
}


/* ══════════════════════════════════════════════════════════════
   ÚJ FORMANYELV — rétegek vonalak helyett

   A kártyák kerete halványabb lesz, a mélységet az árnyék adja.
   Sűrű táblázatoknál a vonal marad, mert ott olvashatóbb.
   ══════════════════════════════════════════════════════════════ */

.card{
  border-color:transparent;
  box-shadow:var(--shadow-md);
  border-radius:var(--radius);
}
.card:hover{ box-shadow:var(--shadow-lg); }

/*  Kártya a kártyán mindig világosabb, mint ami alatta van  */
.card .card{ background:var(--surface-2); box-shadow:var(--shadow-sm); }

/*  Gombok: lágyabb sarok, rugalmas lenyomás  */
.btn-primary, .btn-secondary{
  border-radius:var(--radius-sm);
  transition:transform .12s, box-shadow .2s, background .2s;
}
.btn-primary:active, .btn-secondary:active{ transform:scale(.97); }
.btn-primary{ box-shadow:0 4px 14px rgba(26,165,104,.26); }
.btn-primary:hover{ box-shadow:0 6px 18px rgba(26,165,104,.32); }
.btn-secondary{ border-color:transparent; box-shadow:var(--shadow-md); }
.btn-secondary:hover{ box-shadow:var(--shadow-lg); }

/*  Mezők: keret helyett világos alap, fókuszban zöld gyűrű  */
input:not([type]), input[type=text], input[type=email], input[type=password],
input[type=number], input[type=tel], input[type=url], input[type=search],
input[type=date], input[type=datetime-local], input[type=time], select, textarea{
  border-color:transparent;
  background:var(--bg);
  border-radius:var(--radius-sm);
}
input:focus, select:focus, textarea:focus{
  background:var(--surface);
  box-shadow:0 0 0 3px var(--green-100), var(--shadow-sm);
}

/*  Jelvények és pilulák  */
.badge, .pill, .soon-tag{ border-radius:var(--radius-full); }

/*  Táblázatok: itt MARAD a vonal, mert sűrű adatnál olvashatóbb  */
table th, table td{ border-color:var(--line); }

/*  Modális ablakok: nagyobb sarok, mélyebb árnyék  */
.modal-box, .tk-sheet, .crm-modal-v2{
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-xl);
}

/*  Az oldalsáv is kártya legyen  */
.sidebar{ background:var(--surface); border-right:none; box-shadow:var(--shadow-sm); }

[data-theme="dark"] .card{ border-color:var(--line); }
[data-theme="dark"] .btn-secondary{ border-color:var(--line); }
[data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea{
  border-color:var(--line);
}


/* ══════════════════════════════════════════════════════════════
   DASHBOARD FEJLÉC — időzített kártyák
   ══════════════════════════════════════════════════════════════ */
.dh-szinpad{
  position:relative; height:380px; border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow-lg); background:#0b2c1c; margin-bottom:18px;
}
@media(max-width:820px){ .dh-szinpad{ height:430px; } }

.dh-hatterek{ position:absolute; inset:0; }
.dh-hatter{
  position:absolute; inset:0; opacity:0; transition:opacity .7s ease;
  background-size:cover; background-position:center;
}
.dh-hatter.aktiv{ opacity:1; }
.dh-szinpad::after{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:2;
  background:linear-gradient(105deg, rgba(4,18,11,.86) 0%, rgba(4,18,11,.55) 46%, rgba(4,18,11,.12) 100%);
}
.dh-repulo{
  position:absolute; z-index:6; border-radius:var(--radius); overflow:hidden;
  background-size:cover; background-position:center; pointer-events:none;
}

.dh-szoveg{
  position:absolute; z-index:3; left:40px; right:220px; top:50%; transform:translateY(-50%);
  max-width:520px; color:#fff;
}
@media(max-width:820px){
  .dh-szoveg{ left:20px; right:20px; top:26px; transform:none; max-width:none; }
}
.dh-cimke{
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(255,255,255,.16); backdrop-filter:blur(8px);
  border-radius:var(--radius-full); padding:5px 13px;
  font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
}
.dh-focim{ font-size:33px; font-weight:800; letter-spacing:-.03em; line-height:1.08; margin:12px 0 8px; }
@media(max-width:820px){ .dh-focim{ font-size:24px; } }
.dh-leiras{ font-size:13.5px; line-height:1.6; opacity:.85; margin:0 0 18px; }
.dh-tovabb{
  display:inline-flex; align-items:center; gap:9px;
  background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.25);
  backdrop-filter:blur(10px); color:#fff; border-radius:var(--radius-full);
  padding:11px 22px; font-size:13px; font-weight:700; cursor:pointer;
  transition:background .2s, transform .12s;
}
.dh-tovabb:hover{ background:rgba(255,255,255,.24); }
.dh-tovabb:active{ transform:scale(.97); }
.dh-szoveg.uszik{ animation:dhBeuszik .5s cubic-bezier(.2,.8,.2,1) both; }
@keyframes dhBeuszik{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
@media(max-width:820px){
  .dh-szoveg.uszik{ animation-name:dhBeuszikM; }
  @keyframes dhBeuszikM{ from{ opacity:0; } to{ opacity:1; } }
}

.dh-kartyak{
  position:absolute; z-index:4; right:24px; bottom:24px;
  display:flex; gap:11px; align-items:flex-end;
}
@media(max-width:820px){
  .dh-kartyak{ left:20px; right:20px; bottom:18px; overflow-x:auto; padding-bottom:4px; }
}
.dh-kicsi{
  position:relative; width:124px; height:164px; flex-shrink:0;
  border-radius:var(--radius); overflow:hidden; cursor:pointer;
  background-size:cover; background-position:center;
  box-shadow:0 8px 24px rgba(0,0,0,.34);
  transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s;
}
.dh-kicsi:hover{ transform:translateY(-5px); box-shadow:0 14px 34px rgba(0,0,0,.42); }
.dh-kicsi::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(4,18,11,.85) 0%, transparent 55%);
}
.dh-kicsi.aktiv{ transform:translateY(-8px); box-shadow:0 16px 38px rgba(0,0,0,.46); }
.dh-kicsi.aktiv::after{
  content:''; position:absolute; inset:0; border-radius:inherit;
  border:2px solid rgba(255,255,255,.75); pointer-events:none;
}
.dh-tu{ position:absolute; top:8px; right:9px; font-size:11px; z-index:2; }
.dh-k-szoveg{ position:absolute; left:10px; right:10px; bottom:13px; color:#fff; z-index:1; }
.dh-k-cimke{ font-size:8px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; opacity:.72; }
.dh-k-cim{ font-size:11.5px; font-weight:800; line-height:1.25; margin-top:3px; }
.dh-k-sav{ position:absolute; left:0; right:0; bottom:0; height:3px; background:rgba(255,255,255,.22); z-index:2; }
.dh-k-sav>span{ display:block; height:100%; width:0; background:#fff; }
.dh-kicsi.aktiv .dh-k-sav>span{ animation:dhTelik var(--dh-ido, 7s) linear forwards; }
@keyframes dhTelik{ from{ width:0; } to{ width:100%; } }
.dh-szinpad.all .dh-k-sav>span{ animation-play-state:paused; }

.dh-kezel{
  position:absolute; z-index:5; top:18px; right:22px;
  background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.25);
  backdrop-filter:blur(10px); color:#fff; border-radius:var(--radius-full);
  padding:8px 15px; font-size:11.5px; font-weight:700; cursor:pointer;
}
.dh-kezel:hover{ background:rgba(255,255,255,.26); }


/* ══════════════════════════════════════════════════════════════
   ÜVEG OLDALSÁV

   Három réteg: torzítás (SVG), elmosás, majd fény az élen.
   A torzítás Chrome-ban és Edge-ben látszik; Firefoxban sima
   elmosás marad, ami szintén jól néz ki.
   ══════════════════════════════════════════════════════════════ */
.sidebar{
  position:relative; isolation:isolate;
  background:transparent; border-right:none;
  box-shadow:0 8px 30px rgba(11,44,28,.08);
}

/*  A régi kétrétegű üveg helyét a .uveg-lap vette át — lásd lentebb.  */

/*  A csúszó jelölő is üvegből  */
.nav-uveg{
  background:linear-gradient(135deg, rgba(255,255,255,.60), rgba(255,255,255,.32));
  backdrop-filter:blur(6px) saturate(1.5);
  -webkit-backdrop-filter:blur(6px) saturate(1.5);
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.9),
    inset -1px -1px 0 rgba(255,255,255,.5),
    0 3px 12px rgba(11,44,28,.12);
}
[data-theme="dark"] .nav-uveg{
  background:linear-gradient(135deg, rgba(26,165,104,.26), rgba(26,165,104,.14));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 3px 12px rgba(0,0,0,.28);
}

/* ── Menü-tipográfia ────────────────────────────────────────── */
.nav-item{ font-size:14px; font-weight:500; letter-spacing:-.012em; }
.nav-item.active{ font-weight:650; }
.nav-section-label{
  font-size:10px; font-weight:700; text-transform:uppercase;
  letter-spacing:.12em; color:#94A29A;
}
/*  A darabszám külön pilulán, hogy ne folyjon össze a névvel  */
.nav-item .soon-tag, .nav-item .nav-badge{
  margin-left:auto; font-size:11px; font-weight:650;
  background:rgba(11,44,28,.07); color:#5A6B62;
  border-radius:var(--radius-full); padding:2px 8px;
  font-variant-numeric:tabular-nums; letter-spacing:0;
}
.nav-item.active .soon-tag, .nav-item.active .nav-badge{
  background:rgba(26,165,104,.16); color:var(--green-700);
}


/* ══════════════════════════════════════════════════════════════
   A HÓNAP EMBERE — dashboard blokk
   A kép felfelé kilóg a keretből, alatta talajárnyék, mögötte
   fénykör. Lassan lebeg, az árnyék vele mozdul.
   ══════════════════════════════════════════════════════════════ */
.honap{
  position:relative; display:grid; grid-template-columns:280px 1fr; gap:40px; align-items:end;
  background:linear-gradient(135deg, var(--green-50, #EDF7F1) 0%, var(--green-100, #DAEEE2) 100%);
  border-radius:var(--radius-lg); padding:0 44px 38px; min-height:280px;
  margin:0 0 18px;
}
@media(max-width:900px){
  .honap{ grid-template-columns:1fr; gap:16px; padding:0 22px 26px; text-align:center; }
}

.honap-kep{ position:relative; align-self:end; margin-top:-44px; }
.honap-kep img{
  position:relative; z-index:2; display:block; width:100%; max-width:280px; margin:0 auto;
  filter:drop-shadow(0 24px 28px rgba(11,44,28,.26));
  animation:honapLebeg 6s ease-in-out infinite;
}
@keyframes honapLebeg{
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(-9px); }
}
.honap-fenykor{
  position:absolute; z-index:1; left:50%; top:44%; transform:translate(-50%,-50%);
  width:250px; height:250px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.92) 0%, rgba(255,255,255,0) 68%);
}
.honap-arnyek{
  position:absolute; z-index:0; left:50%; bottom:2px; transform:translateX(-50%);
  width:180px; height:18px; border-radius:50%;
  background:radial-gradient(ellipse, rgba(11,44,28,.20) 0%, transparent 70%);
  animation:honapArnyek 6s ease-in-out infinite;
}
@keyframes honapArnyek{
  0%,100%{ transform:translateX(-50%) scale(1); opacity:.9; }
  50%    { transform:translateX(-50%) scale(.88); opacity:.6; }
}
@media(max-width:900px){
  .honap-kep{ margin:-34px auto 0; max-width:210px; }
  .honap-fenykor{ width:185px; height:185px; }
}

.honap-tart{ padding:40px 0 0; }
@media(max-width:900px){ .honap-tart{ padding-top:0; } }

.honap-kalap{ font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.14em; color:var(--green-600, #16915B); }
.honap-nev{ font-family:var(--betu-cim); font-weight:700;
  font-size:clamp(23px, 2.6vw, 33px); letter-spacing:-.03em; line-height:1.08;
  margin:9px 0 14px; }
.honap-idezet{
  font-family:var(--betu-cim); font-size:18px; font-weight:500;
  line-height:1.5; letter-spacing:-.02em; padding-left:18px; margin:0 0 14px;
  border-left:3px solid var(--green-500, #1AA568);
}
@media(max-width:900px){ .honap-idezet{ padding-left:0; border-left:none; font-size:16px; } }
.honap-szoveg{ font-size:14px; line-height:1.65; color:var(--muted); margin:0; }

.honap-szamok{ display:flex; gap:26px; margin-top:22px; flex-wrap:wrap; }
@media(max-width:900px){ .honap-szamok{ justify-content:center; gap:20px; } }
.honap-szamok b{ display:block; font-family:var(--betu-cim);
  font-size:21px; font-weight:700; letter-spacing:-.025em; }
.honap-szamok span{ font-size:11.5px; color:var(--muted); }

.honap-szerk{
  position:absolute; z-index:3; top:16px; right:18px;
  background:rgba(255,255,255,.72); border:1px solid rgba(11,44,28,.10);
  backdrop-filter:blur(10px); color:var(--green-700, #12724A);
  border-radius:var(--radius-full); padding:7px 14px;
  font-size:11.5px; font-weight:650; cursor:pointer; font-family:inherit;
}
.honap-szerk:hover{ background:var(--surface); }

[data-theme="dark"] .honap{
  background:linear-gradient(135deg, #12281d 0%, #16351f 100%);
}
[data-theme="dark"] .honap-fenykor{
  background:radial-gradient(circle, rgba(26,165,104,.22) 0%, transparent 68%);
}


/*  Ha még nincs kép, a bal hasáb nem foglal helyet  */
.honap:has(img[style*="display: none"]){ grid-template-columns:1fr; }
.honap img[style*="display: none"] ~ *{ }
.honap-kep:has(img[style*="display: none"]){ display:none; }


/* ══════════════════════════════════════════════════════════════
   DASHBOARD — WEBOLDALAS ELRENDEZÉS  (#view-dashboard.web)

   Nem alkalmazás-rács, hanem magazinszerű belső oldal:
     · teljes szélességű sávok, váltakozó háttérrel
     · nagy, szerkesztőségi tipográfia
     · vezércikk + oldalsó hírlista
     · sötét számsáv, ami megtöri a ritmust
   ══════════════════════════════════════════════════════════════ */

#view-dashboard.web{
  --w-hatter:#F4F6F4;  --w-felulet:#FFFFFF;
  --w-sotet:#0B2C1C;
  --w-ink:#111815;     --w-muted:#5F6E66;  --w-halvany:#93A29A;
  --w-vonal:#E6EAE7;
  --w-zold-50:#EDF7F1; --w-zold-100:#DAEEE2;
  --w-zold-500:#1AA568; --w-zold-700:#12724A;
  --w-piros:#DC3B33;   --w-sarga:#C8891A;
  --w-arny-1:0 1px 2px rgba(16,24,32,.05);
  --w-arny-2:0 2px 10px rgba(16,24,32,.07);
  --w-arny-3:0 10px 30px rgba(16,24,32,.10);
  --w-sav-x:clamp(18px, 5vw, 72px);
}
[data-theme="dark"] #view-dashboard.web{
  --w-hatter:#0C1512;  --w-felulet:#131E1A;
  --w-sotet:#081A11;
  --w-ink:#E8EFEA;     --w-muted:#93A79C;  --w-halvany:#6E8579;
  --w-vonal:#1E2C26;
  --w-zold-50:#132A1F; --w-zold-100:#17362554;
  --w-arny-1:0 1px 2px rgba(0,0,0,.30);
  --w-arny-2:0 2px 12px rgba(0,0,0,.34);
  --w-arny-3:0 12px 34px rgba(0,0,0,.44);
}

/*  Felülírjuk a régi prémium (sötét, gradiens) alapot  */
#view-dashboard.premium.web{
  padding:0 !important;
  background:var(--w-hatter);
  color:var(--w-ink);
  min-height:100vh;
  overflow-x:clip;
  font-variant-numeric:tabular-nums;
}
#view-dashboard.web .p-bg-glow{ display:none; }

/* ── Tipográfia ──────────────────────────────────────────────── */
#view-dashboard.web .w-h-nagy{
  font-family:var(--betu-cim); font-weight:700; letter-spacing:-.035em;
  font-size:clamp(28px, 3.8vw, 46px); line-height:1.05; margin:0; color:var(--w-ink);
}
#view-dashboard.web .w-h-kozep{
  font-family:var(--betu-cim); font-weight:700; letter-spacing:-.028em;
  font-size:clamp(21px, 2.4vw, 29px); line-height:1.15; margin:0; color:var(--w-ink);
}
#view-dashboard.web .w-h-kicsi{
  font-family:var(--betu-cim); font-weight:600; letter-spacing:-.02em;
  font-size:17px; margin:0; color:var(--w-ink);
}
#view-dashboard.web .w-kalap{
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.16em;
  color:var(--w-zold-500);
}
#view-dashboard.web .w-bevezeto{ font-size:15.5px; line-height:1.65; color:var(--w-muted); margin:0; }

/* ── Sávok ───────────────────────────────────────────────────── */
#view-dashboard.web .w-sav{ padding:58px var(--w-sav-x); }
#view-dashboard.web .w-sav.w-szuk{ padding-top:40px; padding-bottom:40px; }
#view-dashboard.web .w-sav.w-feher{ background:var(--w-felulet); }
#view-dashboard.web .w-sav.w-sotet{ background:var(--w-sotet); color:#fff; }
#view-dashboard.web .w-kozep{ max-width:1240px; margin:0 auto; }

#view-dashboard.web .w-sav-fej{
  display:flex; align-items:flex-end; gap:18px; margin-bottom:26px; flex-wrap:wrap;
}
#view-dashboard.web .w-sav-fej .w-h-kozep{ margin-top:8px; }
#view-dashboard.web .w-link{
  margin-left:auto; font-size:13.5px; font-weight:600; color:var(--w-zold-700);
  cursor:pointer; white-space:nowrap;
}
#view-dashboard.web .w-link:hover{ text-decoration:underline; }
#view-dashboard.web .w-sav.w-sotet .w-h-kozep,
#view-dashboard.web .w-sav.w-sotet .w-h-kicsi{ color:#fff; }
#view-dashboard.web .w-sav.w-sotet .w-kalap,
#view-dashboard.web .w-sav.w-sotet .w-link{ color:#8fe6b8; }

/* ── HERO — teljes szélességű ────────────────────────────────── */
#view-dashboard.web .w-hero-sav{ position:relative; }
#view-dashboard.web .w-hero-sav .dh-szinpad{
  height:min(72vh, 560px); border-radius:0; margin:0; box-shadow:none;
}
@media(max-width:820px){ #view-dashboard.web .w-hero-sav .dh-szinpad{ height:440px; } }
#view-dashboard.web .dh-szoveg{ left:var(--w-sav-x); max-width:560px; }
#view-dashboard.web .dh-focim{
  font-family:var(--betu-cim); letter-spacing:-.035em; line-height:1.04;
  font-size:clamp(28px, 4vw, 48px);
}
#view-dashboard.web .dh-leiras{ font-size:15.5px; line-height:1.65; max-width:480px; }
#view-dashboard.web .dh-kartyak{ right:var(--w-sav-x); }
@media(max-width:820px){
  #view-dashboard.web .dh-szoveg{ left:20px; right:20px; }
  #view-dashboard.web .dh-kartyak{ left:20px; right:20px; }
}
#view-dashboard.web .w-hero-gombok{ display:flex; gap:10px; flex-wrap:wrap; }
#view-dashboard.web .w-gomb-tomor{
  display:inline-flex; align-items:center; gap:9px; border:none;
  border-radius:var(--radius-full); padding:12px 24px;
  font-family:inherit; font-size:13px; font-weight:700; cursor:pointer;
  background:var(--w-zold-500); color:#fff;
  box-shadow:0 8px 22px rgba(26,165,104,.34);
  transition:transform .12s, box-shadow .2s;
}
#view-dashboard.web .w-gomb-tomor:hover{ box-shadow:0 10px 26px rgba(26,165,104,.42); }
#view-dashboard.web .w-gomb-tomor:active{ transform:scale(.97); }

/*  Tartalék fejléc, ha nincs egy hero-lap sem  */
#view-dashboard.web .w-fejlec-kep{ position:relative; height:320px; overflow:hidden; }
#view-dashboard.web .w-fejlec-img{ width:100%; height:100%; object-fit:cover; display:block; }
#view-dashboard.web .w-fejlec-arny{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center;
  padding:0 var(--w-sav-x); color:#fff;
  background:linear-gradient(100deg, rgba(6,22,14,.88) 0%, rgba(6,22,14,.55) 48%, rgba(6,22,14,.08) 100%);
}
#view-dashboard.web .w-fejlec-cim{
  font-family:var(--betu-cim); font-size:clamp(26px,3.4vw,42px);
  font-weight:700; letter-spacing:-.03em; margin:0 0 8px;
}
#view-dashboard.web .w-fejlec-alcim{ font-size:15px; opacity:.85; margin:0; }
#view-dashboard.web .w-fejlec-sima{ padding:46px var(--w-sav-x) 0; }

/* ── MA — teendő kártyák ─────────────────────────────────────── */
#view-dashboard.web .w-teendok{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media(max-width:900px){ #view-dashboard.web .w-teendok{ grid-template-columns:1fr; } }
#view-dashboard.web .w-teendo{
  display:flex; align-items:center; gap:16px; background:var(--w-felulet);
  border-radius:22px; padding:20px 22px; box-shadow:var(--w-arny-2);
  cursor:pointer; transition:box-shadow .22s, transform .14s;
}
#view-dashboard.web .w-teendo:hover{ box-shadow:var(--w-arny-3); transform:translateY(-2px); }
#view-dashboard.web .w-t-ikon{
  width:48px; height:48px; border-radius:14px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:20px;
}
#view-dashboard.web .w-t-szam{
  font-family:var(--betu-cim); font-size:29px; font-weight:700; line-height:1;
}
#view-dashboard.web .w-t-cim{ font-size:14px; font-weight:600; margin-top:4px; color:var(--w-ink); }
#view-dashboard.web .w-t-alcim{ font-size:12.5px; color:var(--w-muted); margin-top:3px; }

/* ── Napi munkaterület ───────────────────────────────────────── */
#view-dashboard.web .w-munka-racs{
  display:grid; grid-template-columns:1.55fr 1fr; gap:22px; align-items:start;
}
@media(max-width:1100px){ #view-dashboard.web .w-munka-racs{ grid-template-columns:1fr; } }
#view-dashboard.web .w-oszlop{ display:flex; flex-direction:column; gap:16px; }

/*  A meglévő .p-card kártyák magazin-bőrbe öltöztetve  */
#view-dashboard.web .p-card{
  background:var(--w-felulet); border:1px solid var(--w-vonal);
  border-radius:22px; padding:20px 22px; box-shadow:var(--w-arny-2);
  backdrop-filter:none; color:var(--w-ink);
}
#view-dashboard.web .p-card:hover{ box-shadow:var(--w-arny-3); }
#view-dashboard.web .p-card-title{
  font-family:var(--betu-cim); font-size:15px; font-weight:600;
  letter-spacing:-.015em; color:var(--w-ink);
}
#view-dashboard.web .p-chip{
  background:var(--w-zold-50); color:var(--w-zold-700);
  border-radius:var(--radius-full); padding:4px 10px;
  font-size:10px; font-weight:700; letter-spacing:.07em;
}
#view-dashboard.web .p-empty{ font-size:12.5px; color:var(--w-muted); padding:8px 0; }
#view-dashboard.web .p-timeline-item{ border-left-color:var(--w-zold-500); }
#view-dashboard.web .p-timeline-title{ color:var(--w-ink); }
#view-dashboard.web .p-timeline-sub,
#view-dashboard.web .p-notif-time{ color:var(--w-muted); }
#view-dashboard.web .p-timeline-time{ color:var(--w-zold-700); }
#view-dashboard.web .p-notif-item{ border-color:var(--w-vonal); }
#view-dashboard.web .p-notif-item:hover{ background:var(--w-zold-50); }
#view-dashboard.web .p-notif-title{ color:var(--w-ink); }
#view-dashboard.web .p-feed{ color:var(--w-ink); }
#view-dashboard.web .p-fin-value{ color:var(--w-ink); }
#view-dashboard.web .p-fin-sub{ color:var(--w-muted); }
#view-dashboard.premium.web .p-mood-btn{
  background:var(--w-felulet); border:1px solid var(--w-vonal); color:var(--w-ink);
}
#view-dashboard.premium.web .p-mood-btn:hover{ border-color:var(--w-zold-500); }
#view-dashboard.web .w-feladat-sor{
  display:flex; align-items:center; gap:9px; padding:8px 10px;
  border-radius:12px; background:var(--w-zold-50); cursor:pointer;
}
#view-dashboard.web .p-mony-panel{ border-radius:26px; }

/* ── Hírek — vezércikk + lista ───────────────────────────────── */
#view-dashboard.web .w-cikk-racs{
  display:grid; grid-template-columns:1.5fr 1fr; gap:26px; align-items:start;
}
@media(max-width:960px){ #view-dashboard.web .w-cikk-racs{ grid-template-columns:1fr; } }
#view-dashboard.web .w-vezer{
  background:var(--w-felulet); border-radius:30px; overflow:hidden;
  box-shadow:var(--w-arny-2); cursor:pointer; transition:box-shadow .22s, transform .14s;
}
#view-dashboard.web .w-vezer:hover{ box-shadow:var(--w-arny-3); transform:translateY(-2px); }
#view-dashboard.web .w-vezer-kep{ height:260px; background-size:cover; background-position:center; }
#view-dashboard.web .w-vezer-tart{ padding:24px 26px 26px; }
#view-dashboard.web .w-vezer-meta{
  display:flex; align-items:center; gap:9px; font-size:12px;
  color:var(--w-halvany); margin-top:14px;
}
#view-dashboard.web .w-mini-arc{
  width:26px; height:26px; border-radius:var(--radius-full);
  background:var(--w-zold-100); color:var(--w-zold-700);
  display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700;
}
#view-dashboard.web .w-hir{ display:flex; gap:15px; padding:16px 0; cursor:pointer; }
#view-dashboard.web .w-hir + .w-hir{ border-top:1px solid var(--w-vonal); }
#view-dashboard.web .w-hir:hover .w-hir-cim{ color:var(--w-zold-700); }
#view-dashboard.web .w-hir-kep{
  width:80px; height:68px; border-radius:15px; flex-shrink:0;
  background-size:cover; background-position:center; background-color:var(--w-zold-100);
}
#view-dashboard.web .w-hir-cim{
  font-size:14.5px; font-weight:600; line-height:1.35;
  color:var(--w-ink); transition:color .18s;
}
#view-dashboard.web .w-hir-meta{ font-size:11.5px; color:var(--w-halvany); margin-top:5px; }

/* ── Sötét számsáv ───────────────────────────────────────────── */
#view-dashboard.web .w-szamok{ display:grid; grid-template-columns:repeat(4,1fr); gap:28px; }
@media(max-width:900px){ #view-dashboard.web .w-szamok{ grid-template-columns:repeat(2,1fr); gap:24px; } }
#view-dashboard.web .w-szam-ertek{
  font-family:var(--betu-cim); font-size:clamp(26px,3.2vw,40px);
  font-weight:700; letter-spacing:-.03em; line-height:1; color:#fff;
}
#view-dashboard.web .w-szam-cimke{ font-size:12.5px; opacity:.62; margin-top:8px; color:#fff; }
#view-dashboard.web .w-szam-sav{
  height:5px; background:rgba(255,255,255,.14); border-radius:var(--radius-full);
  overflow:hidden; margin-top:12px; max-width:170px;
}
#view-dashboard.web .w-szam-sav>div{ height:100%; background:#4ade80; border-radius:var(--radius-full); }
#view-dashboard.web .w-allapot{
  display:flex; flex-wrap:wrap; gap:26px; margin-top:34px; padding-top:22px;
  border-top:1px solid rgba(255,255,255,.12);
}
#view-dashboard.web .w-allapot-elem{ min-width:96px; }
#view-dashboard.web .w-allapot-cimke{
  font-size:10.5px; text-transform:uppercase; letter-spacing:.12em; opacity:.5; color:#fff;
}
#view-dashboard.web .w-allapot-ertek{
  font-family:var(--betu-cim); font-size:17px; font-weight:700;
  margin-top:4px; color:#fff;
}
#view-dashboard.web .w-sotet .p-fin-spark{ height:46px; max-width:200px; }

/* ── Eseménykártyák ──────────────────────────────────────────── */
#view-dashboard.web .w-esem-racs{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media(max-width:900px){ #view-dashboard.web .w-esem-racs{ grid-template-columns:1fr; } }
#view-dashboard.web .w-esem{
  position:relative; border-radius:30px; overflow:hidden; height:220px;
  background-size:cover; background-position:center; cursor:pointer;
  box-shadow:var(--w-arny-2); transition:transform .22s, box-shadow .22s;
}
#view-dashboard.web .w-esem:hover{ transform:translateY(-4px); box-shadow:var(--w-arny-3); }
#view-dashboard.web .w-esem::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(4,18,11,.9) 0%, rgba(4,18,11,.22) 55%, transparent 100%);
}
#view-dashboard.web .w-esem-tart{ position:absolute; left:20px; right:20px; bottom:18px; z-index:1; color:#fff; }
#view-dashboard.web .w-esem-datum{
  font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; opacity:.82;
}
#view-dashboard.web .w-esem-cim{
  font-family:var(--betu-cim); font-size:19px; font-weight:600;
  letter-spacing:-.02em; margin-top:5px;
}
#view-dashboard.web .w-esem-alsor{ font-size:12px; opacity:.75; margin-top:4px; }

/* ── Akadémia CTA ────────────────────────────────────────────── */
#view-dashboard.web .w-cta{
  display:grid; grid-template-columns:1fr auto; gap:28px; align-items:center;
  background:var(--w-felulet); border-radius:30px; padding:30px 34px; box-shadow:var(--w-arny-2);
}
@media(max-width:760px){ #view-dashboard.web .w-cta{ grid-template-columns:1fr; } }
#view-dashboard.web .w-halado{
  height:9px; background:var(--w-hatter); border-radius:var(--radius-full);
  overflow:hidden; margin:14px 0 8px; max-width:400px;
}
#view-dashboard.web .w-halado>div{
  height:100%; width:0; background:linear-gradient(90deg,#2dd4bf,#1aa568);
  border-radius:var(--radius-full); transition:width .6s ease;
}

/* ── Csapat-hasáb ────────────────────────────────────────────── */
#view-dashboard.web .w-harmas{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media(max-width:900px){ #view-dashboard.web .w-harmas{ grid-template-columns:1fr; } }

/* ── Gyors elérés ────────────────────────────────────────────── */
#view-dashboard.web .w-pilulak{ display:flex; gap:10px; flex-wrap:wrap; }
#view-dashboard.web .w-pilula{
  display:inline-flex; align-items:center; gap:8px; background:var(--w-felulet);
  border:none; color:var(--w-ink); font-family:inherit;
  border-radius:var(--radius-full); padding:12px 20px; font-size:13.5px; font-weight:600;
  box-shadow:var(--w-arny-1); cursor:pointer; transition:box-shadow .18s, transform .12s;
}
#view-dashboard.web .w-pilula:hover{ box-shadow:var(--w-arny-2); transform:translateY(-2px); }

/* ── A hónap embere a magazinsávban ──────────────────────────── */
#view-dashboard.web .honap{ margin:0; }

/* ── Alsó banner + lábléc ────────────────────────────────────── */
#view-dashboard.web .w-also-banner{ position:relative; height:220px; overflow:hidden; }
#view-dashboard.web .w-also-banner img{ width:100%; height:100%; object-fit:cover; display:block; }
#view-dashboard.web .w-also-arny{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center;
  padding:0 var(--w-sav-x); color:#fff;
  background:linear-gradient(90deg, rgba(6,22,14,.9) 0%, rgba(6,22,14,.42) 55%, transparent 82%);
}
#view-dashboard.web .w-lablec{
  padding:28px var(--w-sav-x); border-top:1px solid var(--w-vonal);
  font-size:12.5px; color:var(--w-halvany);
}
#view-dashboard.web .w-lablec-sor{ display:flex; gap:16px; flex-wrap:wrap; max-width:1240px; margin:0 auto; }

/*  Apró igazítások a weboldalas dashboardhoz  */
#view-dashboard.web .p-card{ position:relative; }
#view-dashboard.web .p-mood-row{ flex-wrap:wrap; gap:7px; }
#view-dashboard.premium.web .p-mood-btn{ flex:1 1 88px; font-size:11px; padding:9px 6px; }
#view-dashboard.web .p-notif-list{ max-height:200px; }
#view-dashboard.web .p-feed{ max-height:190px; }
#view-dashboard.web .honap-szerk{ top:14px; right:16px; }


/* ══════════════════════════════════════════════════════════════
   LIQUID GLASS OLDALSÁV

   Négy réteg egymáson:
     1. torzítás — SVG displacement map, ettől „folyik" az üveg
     2. elmosás  — backdrop-filter, ez adja a mélységet
     3. testszín — halvány, hűvös réteg, hogy a szöveg olvasható legyen
     4. él-fény  — belső csúcsfény a felső és bal peremen (specular)

   A menüpont mögötti csúszó pirula ugyanezt a négy réteget kapja
   kicsiben. Firefoxban a torzítás kimarad, marad a sima üveg.
   ══════════════════════════════════════════════════════════════ */

/*  Halvány színfoltok a lap szélén — ez az, amit az üveg megtör.
    Enélkül nincs mit refraktálni, és lapos marad a hatás.  */
#app.ready{ position:relative; }
/*  Fontos: a fényfoltok negatív rétegen ülnek, és NEM adunk
    z-index-et az #app gyerekeinek. Ha adnánk, a .main önálló
    rétegkontextust nyitna, és a benne lévő felugró ablakok soha
    nem kerülhetnének a body szintű ügyfélkártya fölé.  */
#app.ready::before{
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(46% 38% at 4% 8%,   rgba(26,165,104,.20), transparent 70%),
    radial-gradient(40% 36% at 1% 52%,  rgba(45,212,191,.16), transparent 72%),
    radial-gradient(42% 40% at 10% 98%, rgba(120,180,255,.16), transparent 74%);
  filter:blur(10px);
}
[data-theme="dark"] #app.ready::before{
  background:
    radial-gradient(46% 38% at 4% 8%,   rgba(26,165,104,.26), transparent 70%),
    radial-gradient(40% 36% at 1% 52%,  rgba(20,140,140,.22), transparent 72%),
    radial-gradient(42% 40% at 10% 98%, rgba(70,110,190,.20), transparent 74%);
}

/* ── A panel maga ────────────────────────────────────────────── */
/*  Fontos: itt nincs isolation:isolate — az elszigetelt réteg
    „backdrop root"-ot csinál, és akkor az üveg nem látná a mögötte
    lévő oldalt, vagyis nem lenne mit megtörnie.  */
.sidebar{
  position:sticky; top:12px; isolation:auto;
  height:calc(100vh - 24px);
  margin:12px 0 12px 12px;
  padding:16px 12px;
  border-radius:30px;
  background:transparent; border:none;
  box-shadow:
    0 18px 50px rgba(11,44,28,.14),
    0 2px 8px  rgba(11,44,28,.06);
  overflow:visible;
}
/*  A görgetés a belső listán történik, hogy a lekerekítés megmaradjon  */
.sidebar{ overflow-y:auto; overflow-x:hidden; scrollbar-width:thin; }

/*  Az üveglap nem görget együtt a menüvel: rögzített, a panel
    méretére szabva. A menüpontok fölötte, saját rétegben állnak.  */
.sidebar .uveg-lap{
  position:fixed; left:12px; top:12px;
  width:248px; height:calc(100vh - 24px);
  border-radius:30px; z-index:0; pointer-events:none;
  transition:width .25s ease;
}
.sidebar.icon-only .uveg-lap{ width:68px; border-radius:26px; }

/*  1–2. réteg — törés és elmosás  */
.sidebar .uveg-lap::before{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  backdrop-filter:blur(26px) saturate(2.1) brightness(1.10);
  -webkit-backdrop-filter:blur(26px) saturate(2.1) brightness(1.10);
  filter:url(#mhFolyekonyUveg);
}
/*  3–4. réteg — testszín és él-fény  */
.sidebar .uveg-lap::after{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(150deg,
    rgba(255,255,255,.34) 0%,
    rgba(255,255,255,.18) 42%,
    rgba(255,255,255,.28) 100%);
  box-shadow:
    inset  1px  1px 0 rgba(255,255,255,.95),
    inset -1px -1px 0 rgba(255,255,255,.55),
    inset  0    0   0 1px rgba(255,255,255,.35),
    inset  0   22px 34px -22px rgba(255,255,255,.9),
    inset  0  -26px 40px -26px rgba(11,44,28,.10);
}
.sidebar > *{ position:relative; z-index:1; }
.sidebar > .uveg-lap{ z-index:0; }

[data-theme="dark"] .sidebar{
  box-shadow:0 20px 56px rgba(0,0,0,.50), 0 2px 8px rgba(0,0,0,.35);
}
[data-theme="dark"] .sidebar .uveg-lap::after{
  background:linear-gradient(150deg,
    rgba(22,34,28,.42) 0%,
    rgba(16,26,21,.30) 45%,
    rgba(22,34,28,.38) 100%);
  box-shadow:
    inset  1px  1px 0 rgba(255,255,255,.16),
    inset -1px -1px 0 rgba(255,255,255,.05),
    inset  0    0   0 1px rgba(255,255,255,.07),
    inset  0   22px 34px -22px rgba(255,255,255,.14);
}

.sidebar::-webkit-scrollbar{ width:5px; }
.sidebar::-webkit-scrollbar-thumb{ background:rgba(11,44,28,.14); border-radius:3px; }
[data-theme="dark"] .sidebar::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.12); }

/* ── A csúszó pirula — ugyanaz az üveg, kicsiben ─────────────── */
.nav-uveg{
  left:7px; right:7px; border-radius:15px; overflow:hidden;
  background:linear-gradient(140deg,
    rgba(255,255,255,.72) 0%,
    rgba(226,247,236,.42) 48%,
    rgba(255,255,255,.60) 100%);
  backdrop-filter:blur(8px) saturate(2);
  -webkit-backdrop-filter:blur(8px) saturate(2);
  box-shadow:
    inset  1px  1px 0 rgba(255,255,255,1),
    inset -1px -1px 0 rgba(255,255,255,.6),
    inset  0    0   0 1px rgba(26,165,104,.16),
    0 4px 14px rgba(11,44,28,.13),
    0 1px 2px  rgba(11,44,28,.06);
}
/*  A pirula saját törése + fénycsík a tetején — ettől lesz domború  */
.nav-uveg::before{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  backdrop-filter:saturate(1.4);
  -webkit-backdrop-filter:saturate(1.4);
  filter:url(#mhUvegPirula);
  background:linear-gradient(to bottom, rgba(255,255,255,.55) 0%, transparent 46%);
}
[data-theme="dark"] .nav-uveg{
  background:linear-gradient(140deg,
    rgba(26,165,104,.30) 0%,
    rgba(26,165,104,.16) 50%,
    rgba(45,212,191,.20) 100%);
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.22),
    inset 0 0 0 1px rgba(255,255,255,.10),
    0 4px 16px rgba(0,0,0,.34);
}
[data-theme="dark"] .nav-uveg::before{
  background:linear-gradient(to bottom, rgba(255,255,255,.16) 0%, transparent 46%);
}

/* ── Menüpontok ──────────────────────────────────────────────── */
/*  Az üveg átlátszóbb lett, ezért a feliratok kapnak egy halvány
    árnyékot: így bármilyen háttér fölött elválnak.  */
.sidebar .nav-item,
.sidebar .nav-section-label,
.sidebar .brand-name,
.sidebar .sidebar-footer{ text-shadow:0 1px 2px rgba(255,255,255,.55); }
[data-theme="dark"] .sidebar .nav-item,
[data-theme="dark"] .sidebar .nav-section-label,
[data-theme="dark"] .sidebar .brand-name,
[data-theme="dark"] .sidebar .sidebar-footer{ text-shadow:0 1px 3px rgba(0,0,0,.65); }

.nav-item{
  border-radius:15px; padding:10px 12px; gap:11px;
  transition:color .25s ease, transform .18s var(--ease-out), background .2s ease;
}
.nav-item:hover{
  background:rgba(255,255,255,.42);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  color:var(--ink); transform:translateX(2px);
}
.nav-item.active{ background:transparent; }
.nav-item.active svg{ opacity:1; }
[data-theme="dark"] .nav-item:hover{
  background:rgba(255,255,255,.07);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
}

.nav-section-label{ padding:14px 12px 6px; }
.sidebar .nav-section-label{ color:rgba(11,44,28,.42); }
[data-theme="dark"] .sidebar .nav-section-label{ color:rgba(255,255,255,.36); }

/*  Darabszám-pilulák üvegből  */
.nav-item .soon-tag, .nav-item .nav-badge{
  background:rgba(255,255,255,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(11,44,28,.06);
  color:#4C5D54;
}
[data-theme="dark"] .nav-item .soon-tag,
[data-theme="dark"] .nav-item .nav-badge{
  background:rgba(255,255,255,.10); color:rgba(255,255,255,.72);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}

/* ── Fejléc, összecsukó gomb, lábléc ─────────────────────────── */
.sidebar .brand{ padding:6px 8px 12px; }
.sidebar .brand-mark{
  border-radius:14px; overflow:hidden;
  box-shadow:0 4px 14px rgba(11,44,28,.18), inset 0 1px 0 rgba(255,255,255,.7);
}
#sbCollapseRow{ border-bottom:1px solid rgba(255,255,255,.5); padding:2px 2px 10px; }
[data-theme="dark"] #sbCollapseRow{ border-bottom-color:rgba(255,255,255,.08); }
#sbCollapseBtn{
  border:none; border-radius:13px;
  background:rgba(255,255,255,.48);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 1px 3px rgba(11,44,28,.07);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
#sbCollapseBtn:hover{ background:rgba(255,255,255,.72); color:var(--green-700); }
[data-theme="dark"] #sbCollapseBtn{
  background:rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
}
[data-theme="dark"] #sbCollapseBtn:hover{ background:rgba(255,255,255,.14); }

.sidebar-footer{
  border-top:1px solid rgba(255,255,255,.5);
  margin-top:auto; padding:12px 8px 4px;
}
[data-theme="dark"] .sidebar-footer{ border-top-color:rgba(255,255,255,.08); }
.sidebar .avatar{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 2px 8px rgba(11,44,28,.14);
}
.logout-btn{ border-radius:12px; }
.logout-btn:hover{ background:rgba(255,255,255,.5); }
[data-theme="dark"] .logout-btn:hover{ background:rgba(255,255,255,.10); }

/* ── Kirepülő almenü — szintén üvegből ───────────────────────── */
.nav-flyout{
  border:none; border-radius:22px; padding:8px;
  background:rgba(255,255,255,.58);
  backdrop-filter:blur(20px) saturate(1.9);
  -webkit-backdrop-filter:blur(20px) saturate(1.9);
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.95),
    inset 0 0 0 1px rgba(255,255,255,.4),
    0 18px 50px rgba(11,44,28,.20);
}
[data-theme="dark"] .nav-flyout{
  background:rgba(20,30,25,.72);
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.12),
    inset 0 0 0 1px rgba(255,255,255,.06),
    0 18px 50px rgba(0,0,0,.55);
}
.nav-flyout .nav-item{ border-radius:13px; }

/* ── Szűkített (ikonos) mód ──────────────────────────────────── */
.sidebar.icon-only{ padding:16px 8px; border-radius:26px; }
.sidebar.icon-only .nav-uveg{ left:5px; right:5px; }
.sidebar.icon-only .nav-item{ border-radius:14px; }

/* ── Mobil: teljes magasságú fiók, jobb oldalt lekerekítve ───── */
@media (max-width:900px){
  /*  Telefonon fiók, nem oszlop: kicsúszik a képernyőről, és csak
      a menügombra jön elő. A sticky pozíciót itt felül kell írni,
      különben helyet foglal és jobbra tolja a tartalmat.  */
  .sidebar{
    position:fixed; top:0; left:0; z-index:1000;
    width:min(86vw, 300px); height:100vh; margin:0;
    transform:translateX(-100%); transition:transform .28s ease;
    border-radius:0 28px 28px 0; padding:18px 12px;
    box-shadow:0 8px 32px rgba(0,0,0,.22);
  }
  .sidebar.open{ transform:translateX(0); }
  .sidebar.icon-only{ width:min(86vw, 300px); padding:18px 12px; }
  .sidebar .uveg-lap,
  .sidebar.icon-only .uveg-lap{
    left:0; top:0; width:100%; height:100%; border-radius:0 28px 28px 0;
  }
  #app.ready::before{ display:none; }
  /*  Semmi ne lógjon ki oldalra  */
  #app.ready{ overflow-x:hidden; }
  .main{ min-width:0; width:100%; }
}

/*  Gyenge gépen és csökkentett mozgásnál a törés kimarad  */
@media (max-width:900px), (prefers-reduced-motion: reduce){
  .sidebar .uveg-lap::before{
    filter:none;
    backdrop-filter:blur(20px) saturate(1.7);
    -webkit-backdrop-filter:blur(20px) saturate(1.7);
  }
  .nav-uveg::before{ filter:none; }
}
/*  Ahol nincs backdrop-filter, ott tömör felület, hogy olvasható maradjon  */
@supports not (backdrop-filter: blur(1px)){
  .sidebar .uveg-lap::after{ background:var(--surface); }
  .nav-flyout{ background:var(--surface); }
}

/*  A magazin-sávok a teljes szélességet használják — a tartalom
    ne fusson keskeny hasábban a képernyő közepén.  */
#view-dashboard.web .w-kozep{ max-width:none; margin:0; }
#view-dashboard.web{ --w-sav-x:clamp(18px, 3.4vw, 46px); }

/*  Nagy képernyőn több oszlop fér el a hír- és eseménysávban  */
@media (min-width:1500px){
  #view-dashboard.web .w-cikk-racs{ grid-template-columns:1.7fr 1fr; }
  #view-dashboard.web .w-munka-racs{ grid-template-columns:2fr 1fr; }
}
@media (min-width:1700px){
  #view-dashboard.web .w-esem-racs{ grid-template-columns:repeat(4,1fr); }
  #view-dashboard.web .w-teendok{ grid-template-columns:repeat(3,1fr); }
}

/*  A hero szövege ne nyúljon el a széles sávban  */
#view-dashboard.web .dh-szoveg{ max-width:640px; }

/*  Az átúsztatás legyen puha — nincs több kirepülő kártya  */
#view-dashboard.web .dh-hatter{ transition:opacity .55s ease; }
.dh-repulo{ display:none !important; }

/*  A weboldalas dashboard a teljes tartalomsávot elfoglalja:
    a .content 28px-es kerete és az 1500px-es korlát itt nem kell.  */
body.dashboard-active .content{ padding:0; align-items:stretch; }
.content:has(#view-dashboard.web.active){ padding:0; align-items:stretch; }
#view-dashboard.web{ max-width:none; width:100%; }

/*  A fejléc-sor (cím + kereső) marad a megszokott behúzással  */
body.dashboard-active .topbar{ padding-left:28px; padding-right:28px; }

/* ══════════════════════════════════════════════════════════════
   LEBEGŐ FEJLÉCSÁV — üvegpirula a tartalom fölött
   A sáv maga eltűnik: nincs háttere, kerete, címe. Csak a kereső
   és a három ikon marad, egy lebegő üvegpirulába zárva.
   ══════════════════════════════════════════════════════════════ */
.main{ position:relative; }
.topbar{
  position:absolute; top:0; left:0; right:0; z-index:60;
  height:auto; padding:14px 22px; gap:10px;
  background:transparent; border-bottom:none;
  justify-content:flex-end; pointer-events:none;
}
.topbar-cim{ display:none; }
#navBurger{ pointer-events:auto; }

.topbar-eszkozok{
  pointer-events:auto; flex:0 1 auto !important;
  padding:7px 8px 7px 10px; border-radius:var(--radius-full);
  background:rgba(255,255,255,.74);
  backdrop-filter:blur(22px) saturate(1.9);
  -webkit-backdrop-filter:blur(18px) saturate(1.9);
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.95),
    inset 0 0 0 1px rgba(255,255,255,.42),
    0 10px 30px rgba(11,44,28,.14),
    0 2px 6px rgba(11,44,28,.07);
}
[data-theme="dark"] .topbar-eszkozok{
  background:rgba(18,28,23,.80);
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.12),
    inset 0 0 0 1px rgba(255,255,255,.07),
    0 12px 34px rgba(0,0,0,.5);
}
.topbar-eszkozok > div:first-child{ max-width:300px; }
.topbar-eszkozok #globalSearchInput{
  border:none !important;
  background:rgba(255,255,255,.80) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85);
}
.topbar-eszkozok #globalSearchInput:focus{
  background:rgba(255,255,255,.9) !important;
  box-shadow:0 0 0 3px rgba(26,165,104,.18);
}
[data-theme="dark"] .topbar-eszkozok #globalSearchInput{
  background:rgba(255,255,255,.08) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
}
.topbar-eszkozok .icon-btn{
  border:none; background:rgba(255,255,255,.72);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
.topbar-eszkozok .icon-btn:hover{ background:rgba(255,255,255,.85); }
[data-theme="dark"] .topbar-eszkozok .icon-btn{ background:rgba(255,255,255,.08); }
[data-theme="dark"] .topbar-eszkozok .icon-btn:hover{ background:rgba(255,255,255,.16); }

/*  A tartalom a sáv alá csúszik, de a tetején marad hely a pirulának  */
.content{ padding-top:72px; }
body.dashboard-active .content{ padding:0; }
#view-dashboard.web .w-hero-sav .dh-szinpad,
#view-dashboard.web .w-fejlec-kep{ }
/*  A hero tetején a pirula sötét háttéren ül — világosabb üveg kell  */
/*  Sötét hero fölött sötét üveg: így a fehér szöveg mindig olvasható,
    és a pirula nem olvad bele a háttérbe.  */
body.dashboard-active .topbar-eszkozok{
  background:rgba(10,26,18,.52);
  backdrop-filter:blur(22px) saturate(1.6);
  -webkit-backdrop-filter:blur(22px) saturate(1.6);
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.28),
    inset 0 0 0 1px rgba(255,255,255,.16),
    0 12px 34px rgba(0,0,0,.38);
}
body.dashboard-active .topbar-eszkozok #globalSearchInput{
  background:rgba(255,255,255,.14) !important; color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
}
body.dashboard-active .topbar-eszkozok #globalSearchInput::placeholder{ color:rgba(255,255,255,.82); }
body.dashboard-active .topbar-eszkozok #globalSearchInput:focus{
  background:rgba(255,255,255,.95) !important; color:var(--ink);
  box-shadow:0 0 0 3px rgba(26,165,104,.35);
}
body.dashboard-active .topbar-eszkozok .icon-btn{
  background:rgba(255,255,255,.14); color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
}
body.dashboard-active .topbar-eszkozok .icon-btn:hover{ background:rgba(255,255,255,.30); color:#fff; }
body.dashboard-active .topbar-eszkozok > div:first-child svg{ color:rgba(255,255,255,.9) !important; }

@media (max-width:900px){
  .topbar{ padding:10px 14px; }
  .topbar-eszkozok{ flex:1 1 auto !important; }
  .content{ padding-top:66px; }
}

/*  Ügyfélkezelő — a Mony-figyelő és a számok egyetlen dobozban  */
#crmStats{
  display:grid; grid-template-columns:repeat(5,1fr); gap:0;
  margin-top:16px; padding-top:14px;
  border-top:1px solid var(--line);
}
@media (max-width:1000px){ #crmStats{ grid-template-columns:repeat(3,1fr); row-gap:12px; } }
@media (max-width:620px){ #crmStats{ grid-template-columns:repeat(2,1fr); } }
.crm-stat{ padding:0 14px; border-left:1px solid var(--line); }
.crm-stat:first-child{ border-left:none; padding-left:2px; }
@media (max-width:1000px){ .crm-stat:nth-child(3n+1){ border-left:none; } }
@media (max-width:620px){ .crm-stat:nth-child(odd){ border-left:none; } }
.crm-stat-cimke{ font-size:11px; color:var(--muted); }
.crm-stat-ertek{
  font-family:var(--betu-cim); font-size:24px; font-weight:700;
  margin-top:2px; line-height:1.1;
}

/*  Ügyfélkezelő teljes szélességben — mint a dashboard  */
.crm-teljes{ max-width:none; width:100%; }
/*  A .content középre igazít és 1500px-nél megáll — a CRM-nél ez elmarad.  */
.content:has(#view-crm.active){ align-items:stretch; padding-left:22px; padding-right:22px; }
#view-crm{ max-width:none; width:100%; }

/*  Feladataim teljes szélességben  */
.content:has(#view-feladataim.active){ align-items:stretch; padding-left:22px; padding-right:22px; }
#view-feladataim{ max-width:none; width:100%; }
@media (min-width:1500px){ .tk-layout{ grid-template-columns:minmax(0,1fr) 360px; } }

/*  Konverziós tölcsér  */
.kt-lepcso{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
@media (max-width:900px){ .kt-lepcso{ grid-template-columns:1fr; } }
.kt-lepes-fej{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.kt-lepes-cimke{ font-size:11px; color:var(--muted); }
.kt-lepes-ertek{ font-family:var(--betu-cim); font-size:22px; font-weight:700; }
.kt-sav{ height:7px; background:var(--line); border-radius:var(--radius-full); overflow:hidden; margin-top:6px; }
.kt-sav > div{ height:100%; border-radius:var(--radius-full); transition:width .5s ease; }
.kt-atmenet{ font-size:10.5px; color:var(--muted); margin-top:5px; }

/* ══════════════════════════════════════════════════════════════
   SÖTÉT MÓD — jelzőszínek és biztonsági háló

   Két rész:
     1) Négy jelzőszín-változó (zöld / sárga / kék / piros pasztell),
        ami világos és sötét módban is olvasható hátteret ad.
     2) Biztonsági háló: ahol a kód még bedrótozott világos színt
        használ soron belüli stílusban, ott sötét módban felülírjuk.
        Ez nem szépségtapasz helyett van, hanem amellett — a fő
        nézeteket egyenként is átállítottuk változókra.
   ══════════════════════════════════════════════════════════════ */
:root{
  --jelzes-zold:#EEF8F2;  --jelzes-zold-ink:#12724A;
  --jelzes-sarga:#FDF0DC; --jelzes-sarga-ink:#8A5A08;
  --jelzes-kek:#EAF1FB;   --jelzes-kek-ink:#1E40AF;
  --jelzes-piros:#FDF1F0; --jelzes-piros-ink:#B4413A;
}
[data-theme="dark"]{
  --jelzes-zold:#12291D;  --jelzes-zold-ink:#7FE8A4;
  --jelzes-sarga:#2A2113; --jelzes-sarga-ink:#E9B764;
  --jelzes-kek:#141F31;   --jelzes-kek-ink:#93B8F5;
  --jelzes-piros:#2A1614; --jelzes-piros-ink:#F09189;
}

/* ── 1. Fehér hátterek, amiket még nem cseréltünk változóra ──── */
[data-theme="dark"] [style*="background:#fff"],
[data-theme="dark"] [style*="background: #fff"],
[data-theme="dark"] [style*="background:#FFF"],
[data-theme="dark"] [style*="background:white"],
[data-theme="dark"] [style*="background-color:#fff"],
[data-theme="dark"] [style*="background:#FAFBFA"],
[data-theme="dark"] [style*="background:#F8FAFC"],
[data-theme="dark"] [style*="background:#FBFBFB"],
[data-theme="dark"] [style*="background:#f9fafb"],
[data-theme="dark"] [style*="background:#eef2f4"]{
  background:var(--surface) !important;
}

/* ── 2. Sötét szövegszínek világos alapra tervezve ───────────── */
[data-theme="dark"] [style*="color:#0F172A"],
[data-theme="dark"] [style*="color:#111"],
[data-theme="dark"] [style*="color:#1e293b"],
[data-theme="dark"] [style*="color:#1E293B"],
[data-theme="dark"] [style*="color:#334155"],
[data-theme="dark"] [style*="color:#374151"],
[data-theme="dark"] [style*="color:#000"]{
  color:var(--ink) !important;
}
[data-theme="dark"] [style*="color:#64748b"],
[data-theme="dark"] [style*="color:#64748B"],
[data-theme="dark"] [style*="color:#94a3b8"],
[data-theme="dark"] [style*="color:#94A3B8"],
[data-theme="dark"] [style*="color:#6B7280"]{
  color:var(--muted) !important;
}

/* ── 3. Pasztell jelzőhátterek — sötétben nem vakítanak ─────── */
[data-theme="dark"] [style*="background:#E4F3EA"],
[data-theme="dark"] [style*="background:#eaf7f0"],
[data-theme="dark"] [style*="background:#e4f4ec"],
[data-theme="dark"] [style*="background:#f3faf6"],
[data-theme="dark"] [style*="background:#E7F3EC"],
[data-theme="dark"] [style*="background:#eef8f2"],
[data-theme="dark"] [style*="background:#DCFCE7"]{
  background:var(--jelzes-zold) !important; color:var(--jelzes-zold-ink) !important;
}
[data-theme="dark"] [style*="background:#FEF3C7"],
[data-theme="dark"] [style*="background:#FCE9D6"],
[data-theme="dark"] [style*="background:#fdf0dc"],
[data-theme="dark"] [style*="background:#FDF0DC"],
[data-theme="dark"] [style*="background:#FDF4E3"],
[data-theme="dark"] [style*="background:#FFFCF5"],
[data-theme="dark"] [style*="background:#FEF9C3"]{
  background:var(--jelzes-sarga) !important; color:var(--jelzes-sarga-ink) !important;
}
[data-theme="dark"] [style*="background:#DCEBFB"],
[data-theme="dark"] [style*="background:#DBEAFE"],
[data-theme="dark"] [style*="background:#eaf1fb"],
[data-theme="dark"] [style*="background:#E0F2FE"],
[data-theme="dark"] [style*="background:#EDE7F6"],
[data-theme="dark"] [style*="background:#EDE9FE"],
[data-theme="dark"] [style*="background:#F3E8FF"]{
  background:var(--jelzes-kek) !important; color:var(--jelzes-kek-ink) !important;
}
[data-theme="dark"] [style*="background:#fdecea"],
[data-theme="dark"] [style*="background:#FDECEA"],
[data-theme="dark"] [style*="background:#FDECEC"],
[data-theme="dark"] [style*="background:#FDE0E0"],
[data-theme="dark"] [style*="background:#FEE2E2"],
[data-theme="dark"] [style*="background:#FEF2F2"],
[data-theme="dark"] [style*="background:#fdf1f0"]{
  background:var(--jelzes-piros) !important; color:var(--jelzes-piros-ink) !important;
}

/*  A jelzőblokkokon belüli címke és szöveg örökölje a színt —
    különben a szülő színe csak a keretre látszana.  */
[data-theme="dark"] [style*="background:#fdecea"] *,
[data-theme="dark"] [style*="background:#FEF3C7"] *,
[data-theme="dark"] [style*="background:#DCEBFB"] *,
[data-theme="dark"] [style*="background:#eaf7f0"] *{ color:inherit !important; }

/* ── 4. Vizsgaközpont és Tréningközpont apró javítások ───────── */
[data-theme="dark"] #view-exams .ins.g{ color:var(--jelzes-zold-ink); }
[data-theme="dark"] #view-exams .ins.a{ color:var(--jelzes-sarga-ink); }
[data-theme="dark"] #view-exams .ins.b{ color:var(--jelzes-kek-ink); }
[data-theme="dark"] #trDash .kpi.red{ color:var(--jelzes-piros-ink); }
[data-theme="dark"] #trDash .kpi.red *{ color:inherit; }

/*  Táblázat-fejlécek és sorok  */
[data-theme="dark"] #view-trainings .tr-tbl th{ background:var(--bg); }
[data-theme="dark"] #view-exams table th{ background:var(--bg); }

/*  Zöld gradiens fejlécek fehér szöveggel — maradjanak fehérek  */
[data-theme="dark"] [style*="linear-gradient"] [style*="color:#fff"],
[data-theme="dark"] .p-mony-panel *{ color:inherit !important; }

/* ══════════════════════════════════════════════════════════════
   LEGÖRDÜLŐK NYILA — a mozaikos chevron javítása

   A saját chevron háttérképként ül a select-en. Több későbbi
   szabály (és néhány soron belüli stílus) a `background`
   rövidítéssel írja felül a hátteret, ami nullázza a képet, az
   ismétlést és a pozíciót — sötét módban ettől csempézett a nyíl.
   Itt egyben, a lap végén állítjuk vissza mind a négy tulajdonságot.
   ══════════════════════════════════════════════════════════════ */
select{
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;
  background-position:right 12px center !important;
  background-size:12px 12px !important;
  padding-right:34px !important;
}
body[data-theme="dark"] select{
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23A3B0A8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
}
select:focus{
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%232E9563' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
}

/*  Sötét módban a legördülő lista is sötét legyen, ne vakítson  */
body[data-theme="dark"] select,
body[data-theme="dark"] select option{
  background-color:var(--surface); color:var(--ink);
}

/*  Több soros választó (multiple) — ott nem kell nyíl  */
select[multiple], select[size]:not([size="1"]){
  background-image:none !important; padding-right:11px !important;
}

/* ══════════════════════════════════════════════════════════════
   KARBANTARTÁSI ZÁROLÁS — teljes képernyős fedőlap

   Amikor az admin bekapcsolja a zárolást, a munkatársak ezt látják
   az OS helyett. Admin és vezető átlát rajta, hogy dolgozni tudjon.
   ══════════════════════════════════════════════════════════════ */
.zar{
  position:fixed; inset:0; z-index:100000;
  display:flex; align-items:center; justify-content:center;
  padding:24px; overflow:hidden;
  background:radial-gradient(120% 90% at 50% 0%, #14603f 0%, #0B2C1C 55%, #061a10 100%);
  color:#fff; text-align:center;
  animation:zarBe .45s ease both;
}
@keyframes zarBe{ from{ opacity:0; } to{ opacity:1; } }

/*  Lassan lélegző fénykörök a háttérben  */
.zar-hatter{ position:absolute; inset:0; pointer-events:none; }
.zar-kor{
  position:absolute; left:50%; top:50%; border-radius:50%;
  border:1px solid rgba(127,232,164,.16); transform:translate(-50%,-50%);
  animation:zarLuktet 7s ease-in-out infinite;
}
.zar-kor.k1{ width:340px; height:340px; }
.zar-kor.k2{ width:560px; height:560px; animation-delay:-2.3s; }
.zar-kor.k3{ width:820px; height:820px; animation-delay:-4.6s; }
@keyframes zarLuktet{
  0%,100%{ opacity:.20; transform:translate(-50%,-50%) scale(1); }
  50%    { opacity:.55; transform:translate(-50%,-50%) scale(1.05); }
}

.zar-doboz{ position:relative; z-index:1; max-width:520px; width:100%; }

.zar-ikon{ width:88px; height:88px; margin:0 auto 22px; color:#7fe8a4; }
.zar-ikon svg{ width:100%; height:100%; display:block; }
.zar-fogaskerek-nagy{ transform-origin:60px 60px; animation:zarForog 14s linear infinite; }
@keyframes zarForog{ to{ transform:rotate(360deg); } }

.zar-cimke{
  font-size:11px; font-weight:800; letter-spacing:.2em; text-transform:uppercase;
  color:#7fe8a4; margin-bottom:12px;
}
.zar-cim{
  font-family:var(--betu-cim); font-weight:700; letter-spacing:-.03em;
  font-size:clamp(25px, 4.4vw, 38px); line-height:1.12; margin:0 0 14px;
}
.zar-szoveg{ font-size:15px; line-height:1.65; opacity:.8; margin:0 auto; max-width:420px; }

.zar-sav{
  display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin:26px 0 24px;
}
.zar-sav-elem{
  flex:1 1 170px; max-width:220px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.13);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-radius:18px; padding:14px 16px;
}
.zar-sav-cimke{ font-size:10.5px; text-transform:uppercase; letter-spacing:.13em; opacity:.6; }
.zar-sav-ertek{
  font-family:var(--betu-cim); font-size:21px; font-weight:700;
  margin-top:5px; letter-spacing:-.02em;
}
.zar-ora{ font-variant-numeric:tabular-nums; }

.zar-gombok{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.zar-gomb{
  border:none; border-radius:var(--radius-full); padding:12px 26px;
  font-family:inherit; font-size:13.5px; font-weight:700; cursor:pointer;
  background:#1AA568; color:#fff; box-shadow:0 8px 24px rgba(26,165,104,.36);
  transition:transform .12s, box-shadow .2s;
}
.zar-gomb:hover{ box-shadow:0 10px 28px rgba(26,165,104,.46); }
.zar-gomb:active{ transform:scale(.97); }
.zar-gomb.halk{
  background:rgba(255,255,255,.12); color:#fff;
  border:1px solid rgba(255,255,255,.22); box-shadow:none;
}
.zar-gomb.halk:hover{ background:rgba(255,255,255,.2); }

.zar-lab{ margin-top:28px; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; opacity:.4; }

/*  Zárolás alatt semmi ne görögjön a háttérben  */
body.zarolva{ overflow:hidden; }

/*  Adminnak: keskeny csík fölül, hogy tudja, a többiek zárolva vannak  */
.zar-admin-csik{
  position:fixed; top:0; left:0; right:0; z-index:99999;
  background:#B4413A; color:#fff; text-align:center;
  font-size:11.5px; font-weight:700; letter-spacing:.04em; padding:5px 12px;
}
body.zar-admin .topbar{ top:26px; }
@media(max-width:900px){ .zar-kor.k3{ display:none; } }

/* ══════════════════════════════════════════════════════════════
   TÁBORTŰZ — a karbantartási képernyő fő látványa

   Minden CSS-ből van: az égbolt, a fenyők sziluettje, a lángok
   és a felszálló parázs. Kattintásra a tűz fellobban.
   ══════════════════════════════════════════════════════════════ */
.tuz-szinpad{
  position:relative; width:100%; height:230px; margin:0 auto 26px;
  border-radius:24px; overflow:hidden; cursor:pointer;
  background:linear-gradient(180deg, #0a1430 0%, #10203f 42%, #14243f 70%, #101b2c 100%);
  box-shadow:0 18px 50px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.06);
  user-select:none;
}
@media(max-width:560px){ .tuz-szinpad{ height:190px; } }

/*  Csillagok — JS szórja ki őket  */
.tuz-eg{ position:absolute; inset:0; }
.tuz-eg i{
  position:absolute; width:2px; height:2px; border-radius:50%;
  background:#fff; opacity:.7; animation:tuzPislog 3.4s ease-in-out infinite;
}
@keyframes tuzPislog{ 0%,100%{ opacity:.22; } 50%{ opacity:.9; } }

.tuz-fak{ position:absolute; left:0; right:0; bottom:0; width:100%; height:72%; }

/*  A tűz fénye a tájon  */
.tuz-fenykor{
  position:absolute; left:50%; bottom:-40px; transform:translateX(-50%);
  width:420px; height:300px; pointer-events:none;
  background:radial-gradient(ellipse at 50% 72%,
    rgba(255,150,50,.42) 0%, rgba(255,95,20,.16) 35%, transparent 70%);
  animation:tuzLuktet 2.8s ease-in-out infinite;
}
@keyframes tuzLuktet{
  0%,100%{ opacity:.78; transform:translateX(-50%) scale(1); }
  50%    { opacity:1;   transform:translateX(-50%) scale(1.05); }
}

/*  A lángok  */
.tuz-mag{
  position:absolute; left:50%; bottom:34px; transform:translateX(-50%);
  width:74px; height:96px;
}
.tuz-mag .lang{
  position:absolute; bottom:0; left:50%; border-radius:50% 50% 42% 42%;
  filter:blur(5px); mix-blend-mode:screen; transform-origin:bottom center;
}
.lang.l1{ width:60px; height:78px; margin-left:-30px;
  background:radial-gradient(ellipse at 50% 88%, #ff8a1e 0%, #ff5b0d 46%, rgba(255,60,0,0) 74%);
  animation:tuzTancol 1.5s ease-in-out infinite; }
.lang.l2{ width:44px; height:62px; margin-left:-22px;
  background:radial-gradient(ellipse at 50% 88%, #ffc23c 0%, #ff8a1e 52%, rgba(255,120,0,0) 78%);
  animation:tuzTancol 1.15s ease-in-out infinite reverse; }
.lang.l3{ width:26px; height:42px; margin-left:-13px;
  background:radial-gradient(ellipse at 50% 88%, #fff2b0 0%, #ffc23c 55%, rgba(255,190,60,0) 80%);
  animation:tuzTancol .82s ease-in-out infinite; }
.lang.l4{ width:34px; height:52px; margin-left:-32px;
  background:radial-gradient(ellipse at 50% 88%, #ff7a12 0%, rgba(255,90,10,0) 72%);
  animation:tuzTancol 1.32s ease-in-out infinite .2s; }
.lang.l5{ width:34px; height:52px; margin-left:0px;
  background:radial-gradient(ellipse at 50% 88%, #ff7a12 0%, rgba(255,90,10,0) 72%);
  animation:tuzTancol 1.24s ease-in-out infinite .4s reverse; }
@keyframes tuzTancol{
  0%,100%{ transform:scaleY(1)   scaleX(1)    skewX(0deg); }
  25%    { transform:scaleY(1.13) scaleX(.93) skewX(-3deg); }
  50%    { transform:scaleY(.94)  scaleX(1.07) skewX(2deg); }
  75%    { transform:scaleY(1.08) scaleX(.96)  skewX(3deg); }
}
.tuz-belso{
  position:absolute; bottom:2px; left:50%; margin-left:-9px;
  width:18px; height:24px; border-radius:50%;
  background:radial-gradient(circle, #fffbe8 0%, #ffd76a 60%, rgba(255,200,80,0) 80%);
  filter:blur(2px); animation:tuzSziv 1.1s ease-in-out infinite;
}
@keyframes tuzSziv{ 0%,100%{ opacity:.85; transform:scale(1); } 50%{ opacity:1; transform:scale(1.18); } }

.tuz-hasabok{
  position:absolute; left:50%; bottom:16px; transform:translateX(-50%);
  width:190px; height:58px; filter:drop-shadow(0 -4px 10px rgba(255,120,30,.35));
}

/*  Felszálló parázs  */
.tuz-parazs{ position:absolute; inset:0; pointer-events:none; }
.tuz-parazs span{
  position:absolute; bottom:44px; width:3px; height:3px; border-radius:50%;
  background:#ffb347; box-shadow:0 0 6px rgba(255,150,40,.9);
  animation:tuzSzall linear forwards;
}
@keyframes tuzSzall{
  0%  { opacity:0; transform:translate(0,0) scale(.6); }
  12% { opacity:1; }
  100%{ opacity:0; transform:translate(var(--dx,0px), var(--dy,-150px)) scale(.2); }
}

.tuz-felirat{
  position:absolute; left:0; right:0; bottom:9px; text-align:center;
  font-size:9.5px; font-weight:700; letter-spacing:.28em; text-transform:uppercase;
  color:#fff; pointer-events:none;
  text-shadow:0 1px 6px rgba(0,0,0,.7), 0 0 14px rgba(0,0,0,.5);
  animation:tuzFelirat 3.2s ease-in-out infinite;
}
@keyframes tuzFelirat{ 0%,100%{ opacity:.75; } 50%{ opacity:1; } }

/*  Kattintásra fellobban  */
.tuz-szinpad.lobban .tuz-mag{ animation:tuzLobban .75s cubic-bezier(.2,.8,.2,1); }
.tuz-szinpad.lobban .tuz-fenykor{ animation:tuzFenyLobban .75s ease-out; }
@keyframes tuzLobban{
  0%  { transform:translateX(-50%) scale(1); }
  35% { transform:translateX(-50%) scale(1.42) translateY(-8px); }
  100%{ transform:translateX(-50%) scale(1); }
}
@keyframes tuzFenyLobban{
  0%  { opacity:.8;  transform:translateX(-50%) scale(1); }
  35% { opacity:1;   transform:translateX(-50%) scale(1.3); }
  100%{ opacity:.8;  transform:translateX(-50%) scale(1); }
}

@media (prefers-reduced-motion: reduce){
  .tuz-szinpad .lang, .tuz-belso, .tuz-fenykor, .tuz-eg i, .tuz-felirat{ animation:none; }
}


/* ══════════════════════════════════════════════════════════════
   TELEFONRA SZABVA  (≤ 600 px)

   Ami az asztali nézetben rács, az itt egy hasáb. Ami ott lebegő
   ablak, az itt alulról felcsúszó lap. A tapintható elemek elérik
   a 40 pixeles minimumot, a beviteli mezők pedig a 16 pixeles
   betűméretet — az iOS enélkül ránagyít a mezőre.
   ══════════════════════════════════════════════════════════════ */

/*  Az iPhone alsó sávja és a bevágás alá ne kerüljön tartalom  */
@supports (padding: env(safe-area-inset-bottom)){
  @media (max-width:900px){
    .content{
      padding-left:calc(14px + env(safe-area-inset-left));
      padding-right:calc(14px + env(safe-area-inset-right));
      padding-bottom:calc(24px + env(safe-area-inset-bottom));
    }
    .sidebar{ padding-bottom:calc(18px + env(safe-area-inset-bottom)); }
    .tk-sheet{ padding-bottom:env(safe-area-inset-bottom); }
  }
}

/*  A mobil böngészők címsora miatt a 100vh túl magas — a dvh pontos  */
@supports (height: 100dvh){
  @media (max-width:900px){
    #app.ready{ height:100dvh; }
    .sidebar{ height:100dvh; }
    .zar{ min-height:100dvh; }
  }
}

@media (max-width:600px){

  /* ── Alapok ──────────────────────────────────────────────── */
  .content{ padding:14px; padding-top:64px; }
  h1{ font-size:20px; }
  .page-head h1{ font-size:19px; }
  .page-head p{ font-size:12px; }
  .card{ padding:14px; border-radius:16px; }
  .grid{ grid-template-columns:1fr !important; }
  .span-2, .span-4{ grid-column:span 1; }
  #statCards{ grid-template-columns:repeat(2,1fr) !important; }

  /*  iOS nem nagyít rá, ha a mező legalább 16 px  */
  input, select, textarea{ font-size:16px !important; }
  button, .btn-secondary, .btn-primary, .trbtn, .tcur-chip{ min-height:40px; }

  /* ── Lebegő fejléc ───────────────────────────────────────── */
  .topbar{ padding:9px 12px; gap:8px; }
  .topbar-eszkozok{
    flex:1 1 auto !important; padding:5px 6px 5px 8px; gap:6px;
  }
  .topbar-eszkozok > div:first-child{ max-width:none; flex:1; }
  .topbar-eszkozok .icon-btn{ width:36px; height:36px; }

  /* ── Oldalsáv fiók ───────────────────────────────────────── */
  .sidebar{ width:min(86vw, 300px); }
  .nav-item{ padding:12px; font-size:14px; }

  /* ── Weboldalas dashboard ────────────────────────────────── */
  #view-dashboard.web{ --w-sav-x:16px; }
  #view-dashboard.web .w-sav{ padding-top:34px; padding-bottom:34px; }
  #view-dashboard.web .w-sav.w-szuk{ padding-top:26px; padding-bottom:26px; }
  #view-dashboard.web .w-hero-sav .dh-szinpad{ height:400px; }
  #view-dashboard.web .dh-focim{ font-size:26px; }
  #view-dashboard.web .dh-leiras{ font-size:14px; }
  #view-dashboard.web .dh-kartyak{ gap:8px; }
  #view-dashboard.web .w-sav-fej{ margin-bottom:18px; }
  #view-dashboard.web .w-link{ margin-left:0; width:100%; }
  #view-dashboard.web .w-teendok,
  #view-dashboard.web .w-munka-racs,
  #view-dashboard.web .w-cikk-racs,
  #view-dashboard.web .w-esem-racs,
  #view-dashboard.web .w-harmas,
  #view-dashboard.web .p-grid-2{ grid-template-columns:1fr !important; }
  #view-dashboard.web .w-szamok{ grid-template-columns:repeat(2,1fr); gap:20px; }
  #view-dashboard.web .w-szam-ertek{ font-size:26px; }
  #view-dashboard.web .w-allapot{ gap:18px; margin-top:24px; }
  #view-dashboard.web .w-allapot-elem{ min-width:calc(50% - 9px); }
  #view-dashboard.web .w-vezer-kep{ height:190px; }
  #view-dashboard.web .w-esem{ height:180px; }
  #view-dashboard.web .w-cta{ grid-template-columns:1fr; padding:22px; }
  #view-dashboard.web .w-cta .w-gomb-tomor{ width:100%; justify-content:center; }
  #view-dashboard.web .w-pilulak{
    flex-wrap:nowrap; overflow-x:auto; padding-bottom:6px;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  #view-dashboard.web .w-pilulak::-webkit-scrollbar{ display:none; }
  #view-dashboard.web .w-pilula{ flex:0 0 auto; }
  #view-dashboard.web .w-also-banner{ height:150px; }

  /* ── Táblázatok: vízszintesen görgethetők ────────────────── */
  .card table, .dettable, table.dettable{ min-width:520px; }
  .card > div[style*="overflow-x"]{ -webkit-overflow-scrolling:touch; }
  /*  Ahol nincs görgető burkoló, a kártya maga görgessen  */
  #ktCsapatHost, #leadsTable, #teamAdminTable, #trDash .card{
    overflow-x:auto; -webkit-overflow-scrolling:touch;
  }

  /* ── Ablakok: alulról felcsúszó lap ──────────────────────── */
  .modal-overlay{ padding:0; align-items:flex-end; }
  .modal-box{
    max-width:100%; width:100%; border-radius:20px 20px 0 0;
    max-height:92dvh; overflow-y:auto; padding:18px;
    padding-bottom:calc(18px + env(safe-area-inset-bottom, 0px));
  }
  .modal-box-wide{ max-width:100%; max-height:92dvh; }
  .tk-sheet{ max-height:92dvh; }
  .tk-sheet-head, .tk-sheet-body, .tk-sheet-foot{ padding-left:14px; padding-right:14px; }
  .tk-sheet-foot{ padding-bottom:calc(14px + env(safe-area-inset-bottom, 0px)); }
  .tk-sheet-foot button{ flex:1; }

  /* ── Fülsávok: görgethetők, ne törjenek több sorba ───────── */
  #empTabBar, .tcur-chips, #view-exams .vc-tabs, #trDash .ttabs{
    flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  #empTabBar::-webkit-scrollbar, .tcur-chips::-webkit-scrollbar,
  #view-exams .vc-tabs::-webkit-scrollbar, #trDash .ttabs::-webkit-scrollbar{ display:none; }
  #empTabBar > *, .tcur-chips > *{ flex:0 0 auto; }

  /* ── Konverziós tölcsér ──────────────────────────────────── */
  #view-dashboard .kt-lepcso, .kt-lepcso{ grid-template-columns:1fr; gap:10px; }
  .kt-lepes-ertek{ font-size:19px; }

  /* ── Ügyfélkezelő ────────────────────────────────────────── */
  #crmStats{ grid-template-columns:repeat(2,1fr); }
  .crm-stat{ padding:0 8px; }
  .crm-stat-ertek{ font-size:20px; }

  /* ── Tréning és vizsga nézetek ───────────────────────────── */
  #trDash .td-wrap, #akadPeopleHost .td-wrap{ grid-template-columns:1fr !important; }
  #trDash .td-mini{ grid-template-columns:repeat(2,1fr); }
  #trDash .kpis, #akadPeopleHost .kpis{ grid-template-columns:repeat(2,1fr) !important; }
  .tuz-szinpad{ height:170px; }

  /* ── Karbantartási zárolás ───────────────────────────────── */
  .zar{ padding:18px; }
  .zar-cim{ font-size:24px; }
  .zar-szoveg{ font-size:14px; }
  .zar-gombok .zar-gomb{ flex:1; }

  /* ── Értesítő buborékok ne lógjanak ki ───────────────────── */
  .toast, #toastHost{ left:12px; right:12px; max-width:none; }
}

/*  Nagyon keskeny készülék (≤ 380 px)  */
@media (max-width:380px){
  #view-dashboard.web .w-szamok{ grid-template-columns:1fr; }
  #statCards{ grid-template-columns:1fr !important; }
  .topbar-eszkozok .icon-btn:nth-child(n+3){ display:none; }
}

/*  Fekvő telefon: alacsony, de széles — a hero ne egye meg a képernyőt  */
@media (max-height:520px) and (orientation:landscape){
  #view-dashboard.web .w-hero-sav .dh-szinpad{ height:82vh; }
  .modal-box, .tk-sheet{ max-height:96dvh; }
}

/*  A dashboard jobb hasábja: rangsor és hangulat egymás alatt  */
#view-dashboard.web .w-munka-racs > .p-card,
#view-dashboard.web .w-munka-racs > .p-mood-card{ align-self:start; }
#view-dashboard.web .w-munka-racs{ align-items:start; }
#view-dashboard.web #dashLeaderboard{ max-height:none; }

/* ══════════════════════════════════════════════════════════════
   ÉRTÉKESÍTÉS — két hasábos elrendezés

   Balra az elemzés (grafikon, negyedévek, csapat, lista), jobbra
   az összegzés (várható fizetés, cél, IA, termék mix, rangsor).
   ══════════════════════════════════════════════════════════════ */
/*  Teljes szélesség — a tartalomsáv kerete adja az egyetlen behúzást  */
.content:has(#view-ertekesites.active){ align-items:stretch; padding-left:22px; padding-right:22px; }
#view-ertekesites{ max-width:none; width:100%; }
.ert-lap{ max-width:none; width:100%; }
.ert-racs{
  display:grid; grid-template-columns:minmax(0,1fr) 360px;
  gap:16px; align-items:start; margin-bottom:16px;
}
@media (min-width:1700px){ .ert-racs{ grid-template-columns:minmax(0,1fr) 400px; } }
@media (max-width:1200px){ .ert-racs{ grid-template-columns:minmax(0,1fr); } }
.ert-fo, .ert-oldal{ display:flex; flex-direction:column; gap:16px; min-width:0; }
.ert-fo > .card, .ert-oldal > .card{ margin-bottom:0; }
.ert-oldal{ position:sticky; top:78px; }
@media (max-width:1200px){ .ert-oldal{ position:static; } }

/*  A konverziós tölcsér nyíl-szalagja  */
.ert-lap .kt-lepcso{
  display:flex; gap:0; grid-template-columns:none; flex-wrap:wrap;
}
.ert-lap .kt-lepes{
  flex:1 1 160px; min-width:150px; position:relative;
  padding:14px 18px 14px 30px;
  background:var(--surface); border:1px solid var(--line);
  border-left:none; margin-left:-14px;
  clip-path:polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%, 14px 50%);
}
.ert-lap .kt-lepes:first-child{
  margin-left:0; border-left:1px solid var(--line);
  border-radius:14px 0 0 14px;
  clip-path:polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
  padding-left:20px;
}
.ert-lap .kt-lepes-fej{ flex-direction:column; align-items:flex-start; gap:2px; }
.ert-lap .kt-lepes-ertek{ font-size:24px; line-height:1.1; order:-1; }
.ert-lap .kt-lepes-cimke{ font-size:11.5px; }
.ert-lap .kt-sav{ display:none; }
.ert-lap .kt-atmenet{ margin-top:4px; }
@media (max-width:820px){
  .ert-lap .kt-lepes{
    flex:1 1 100%; margin-left:0; border-left:1px solid var(--line);
    clip-path:none; border-radius:14px; padding-left:18px;
  }
  .ert-lap .kt-lepes:first-child{ clip-path:none; }
}

/*  A jobb hasáb kártyái legyenek tömörebbek  */
.ert-oldal .card{ padding:16px 18px; }
.ert-oldal .row-title h3{ font-size:12.5px; }

/*  Értékesítés — eszközgombok a jobb hasábban  */
.ert-eszkozok{ margin-top:14px; padding-top:12px; border-top:1px solid var(--line); }
.ert-eszkoz-cim{
  font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.1em;
  color:var(--muted); margin-bottom:8px;
}
.ert-eszkoz{
  display:flex; align-items:center; gap:10px; width:100%;
  border:1px solid var(--line); background:var(--surface); color:var(--ink);
  border-radius:14px; padding:11px 13px; margin-bottom:7px;
  font-family:inherit; font-size:12.5px; font-weight:600; text-align:left;
  cursor:pointer; transition:border-color .18s, transform .12s, box-shadow .18s;
}
.ert-eszkoz:last-child{ margin-bottom:0; }
.ert-eszkoz:hover{
  border-color:var(--green-500); transform:translateY(-1px);
  box-shadow:0 4px 14px rgba(16,40,24,.08);
}
.ert-eszkoz > span:nth-child(2){ flex:1; }
.ert-eszkoz-nyil{ color:var(--muted); font-size:15px; }

/*  Az ablakba emelt kártya ne tűnjön kétszeresen keretezettnek  */
#ertEszkozHost > .card{ border:none; box-shadow:none; padding:0; }
#ertEszkozHost .kodex-head{ cursor:default; }
#ertEszkozHost .kodex-chev{ display:none; }

/*  Teljesítmény áttekintés — ne nőjön túl nagyra a széles hasábban  */
#salesPerfChart svg{ max-height:190px; }
#salesPerfChart{ max-width:820px; }

/*  A Bricolage Grotesque optikai tengelye: nagy címnél lazább,
    kis címnél tömörebb rajzolat — így marad olvasható mindkettő.  */
h1, .w-h-nagy, .zar-cim{ font-variation-settings:'opsz' 72; }
h2, .w-h-kozep{ font-variation-settings:'opsz' 40; }
h3, .w-h-kicsi, .card-value{ font-variation-settings:'opsz' 20; }

/*  A Geist számjegyei azonos szélességűek — a táblázatok így nem ugrálnak  */
table, .card-value, .kt-lepes-ertek, .w-szam-ertek,
.p-kpi-value, .p-fin-value, .crm-kpi-value{ font-variant-numeric:tabular-nums; }

/*  Saját kérdőív-linkek a profilban  */
.kiv-sor{
  border:1px solid var(--line); border-radius:18px; padding:15px 17px;
  margin-bottom:12px; background:var(--surface);
}
.kiv-sor:last-child{ margin-bottom:0; }
.kiv-fej{ display:flex; align-items:flex-start; gap:11px; }
.kiv-ikon{
  width:36px; height:36px; border-radius:12px; background:var(--green-50,#F1F8F3);
  display:flex; align-items:center; justify-content:center; font-size:17px; flex-shrink:0;
}
.kiv-cim{ font-size:14px; font-weight:700; }
.kiv-leiras{ font-size:11.5px; color:var(--muted); margin-top:2px; }
.kiv-url{
  font-family:var(--betu-szam); font-size:12px; color:var(--green-700);
  background:var(--bg); border-radius:11px; padding:9px 12px;
  margin:12px 0 11px; word-break:break-all;
}
/*  A .btn-primary alapbol width:100%, ezert a gombsorban az elso gomb
    egesz sort elfoglalt, a masik ketto ala csuszott. Itt a tartalmukhoz
    igazodnak. */
.kiv-gombok{ display:flex; gap:8px; flex-wrap:wrap; }
.kiv-gombok > *{ width:auto; flex:0 0 auto; }

/*  Kérdőívek menü  */
.kiv-lap{ max-width:1200px; }
.kiv-valasz{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:12px 0; border-bottom:1px solid var(--line);
}
.kiv-valasz:last-child{ border-bottom:none; }
.kiv-v-fej{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; flex:1; min-width:0; }
.kiv-v-nev{ font-size:13.5px; font-weight:700; }
.kiv-v-tel{ font-size:12.5px; color:var(--green-700); text-decoration:none; }
.kiv-v-tel:hover{ text-decoration:underline; }
.kiv-v-datum{ font-size:11.5px; color:var(--muted); margin-left:auto; white-space:nowrap; }
.kiv-v-gombok{ display:flex; gap:7px; flex-wrap:wrap; }
@media (max-width:600px){
  .kiv-v-datum{ margin-left:0; }
  .kiv-v-gombok button{ flex:1; }
}

/*  Már felvett kitöltés — halványabb sor  */
.kiv-valasz.felvett{ opacity:.62; }
.kiv-valasz.felvett:hover{ opacity:1; }

/*  Kontaktlista — feltöltés és nevek  */
.kl-dobo{
  margin-top:14px; border:2px dashed var(--line); border-radius:20px;
  padding:28px 20px; text-align:center; cursor:pointer;
  transition:border-color .18s, background .18s;
}
.kl-dobo:hover, .kl-dobo.be{ border-color:var(--green-500); background:var(--green-50,#F1F8F3); }

.kl-betu{
  font-family:var(--betu-cim); font-size:12px; font-weight:700;
  color:var(--green-700); letter-spacing:.08em;
  padding:14px 0 6px; border-bottom:1px solid var(--line); margin-bottom:4px;
}
.kl-sor{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:9px 0; border-bottom:1px solid var(--line);
}
.kl-sor:last-child{ border-bottom:none; }
.kl-sor.kesz{ opacity:.55; }
.kl-sor.kesz:hover{ opacity:1; }
.kl-nev{ font-size:13.5px; font-weight:600; flex:1; min-width:150px; }
.kl-gombok{ display:flex; gap:7px; flex-wrap:wrap; }
@media (max-width:600px){ .kl-gombok button{ flex:1; } }

.kivTabBtn{ border:1px solid transparent; background:none; }

/*  Kontaktlista — szerkeszthető táblázat  */
.kl-tabla{ width:100%; border-collapse:collapse; font-size:13px; min-width:680px; }
.kl-tabla th{
  text-align:left; padding:8px 10px; border-bottom:1px solid var(--line);
  font-size:10.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted);
}
.kl-tabla td{ padding:5px 10px; border-bottom:1px solid var(--line); vertical-align:middle; }
.kl-tsor.kesz{ opacity:.55; }
.kl-tsor.kesz:hover{ opacity:1; }
.kl-tsor.huzva{ opacity:.35; }
.kl-tsor.cel td{ border-top:2px solid var(--green-600); }

.kl-fogo{
  cursor:grab; color:var(--halvany,#93A29A); user-select:none;
  text-align:center; font-size:15px; line-height:1;
}
.kl-fogo:active{ cursor:grabbing; }

/*  A szerkeszthető mezők látszódjanak annak: halvány keret és
    háttér már alapállapotban is, nem csak ráhúzáskor.  */
.kl-tabla input{
  width:100%; border:1px solid var(--line); border-radius:10px;
  padding:7px 10px; font-family:inherit; font-size:13px;
  background:var(--bg); color:var(--ink);
  transition:border-color .15s, background .15s, box-shadow .15s;
}
.kl-tabla input:hover{ border-color:var(--green-500); background:var(--surface); }
.kl-tabla input:focus{
  outline:none; border-color:var(--green-500); background:var(--surface);
  box-shadow:0 0 0 3px rgba(46,149,99,.16);
}
.kl-tabla input::placeholder{ color:var(--halvany,#93A29A); }
.kl-tabla input[readonly]{ border-color:transparent; background:transparent; }

/*  Az állapot legördülő: keret, nyíl és halvány háttér, hogy
    ránézésre is látszódjon, hogy választani lehet — üresen is.  */
.kl-allapot{
  width:100%; border:1px solid var(--line); border-radius:999px;
  padding:7px 30px 7px 12px;
  font-family:inherit; font-size:11.5px; font-weight:700; cursor:pointer;
  appearance:none; -webkit-appearance:none; text-align:left;
  transition:border-color .15s, box-shadow .15s;
}
.kl-allapot:hover{ border-color:var(--green-500); }
.kl-allapot:focus{ outline:none; box-shadow:0 0 0 3px rgba(46,149,99,.18); }
/*  Üres állapot: szürke, „válassz" jellegű megjelenés  */
.kl-allapot[data-ures="1"]{ background:var(--bg) !important; color:var(--muted) !important; }

.kl-imp{ position:relative; display:inline-block; }
.kl-menu{
  position:absolute; right:0; top:calc(100% + 5px); z-index:50;
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  box-shadow:0 12px 32px rgba(16,40,24,.16); padding:5px; min-width:170px;
}
.kl-menu button{
  display:block; width:100%; text-align:left; border:none; background:none;
  padding:9px 12px; border-radius:10px; font-family:inherit; font-size:12.5px;
  font-weight:600; color:var(--ink); cursor:pointer;
}
.kl-menu button:hover{ background:var(--green-50,#F1F8F3); color:var(--green-700); }

.kl-x{
  border:none; background:none; color:var(--halvany,#93A29A);
  font-size:14px; cursor:pointer; padding:4px 7px; margin-left:6px; border-radius:8px;
}
.kl-x:hover{ color:var(--red); background:var(--jelzes-piros); }

/*  Kontaktlista — kérdőív oszlop  */
.kl-kerdsel{
  width:100%; border:1px solid var(--line); border-radius:10px;
  padding:6px 9px; font-family:inherit; font-size:11.5px;
  background:var(--surface); color:var(--muted); cursor:pointer;
}
.kl-kerdsel:hover{ border-color:var(--green-500); color:var(--ink); }
.kl-kerd{ display:flex; align-items:center; gap:5px; }
.kl-mini{
  border:none; background:none; cursor:pointer; padding:3px 5px;
  border-radius:7px; font-size:12px; color:var(--muted); line-height:1;
}
.kl-mini:hover{ background:var(--green-50,#F1F8F3); color:var(--green-700); }

/*  A saját nyíl a kontaktlista legördülőin — a globális select-nyíl
    itt nem érvényesül, mert a háttérszínt soronként állítjuk.  */
.kl-tabla td{ position:relative; }
.kl-allapot, .kl-kerdsel{
  background-image:none !important; padding-right:30px !important;
}
.kl-nyil{
  position:absolute; right:18px; top:50%; transform:translateY(-50%);
  pointer-events:none; font-size:10px; color:var(--muted); line-height:1;
}

/*  Kontaktlista lapozó  */
.kl-lapozo{
  display:flex; align-items:center; justify-content:center; gap:14px;
  padding:16px 0 4px; font-size:12.5px; color:var(--muted);
}
.kl-lapozo button{ padding:7px 14px; font-size:12px; }
.kl-lapozo button:disabled{ opacity:.4; cursor:default; }

/*  Kereshető kérdőív-mező  */
.kl-kerdwrap{ position:relative; }
.kl-kerdwrap .kl-kerdsel{ padding-right:26px !important; }
.kl-kerdwrap::after{
  content:'🔍'; position:absolute; right:9px; top:50%; transform:translateY(-50%);
  font-size:10px; opacity:.45; pointer-events:none;
}

/* ══════════════════════════════════════════════════════════════
   HETI KIÉRTÉKELÉS — csapat-szakasz és állapotjelzés
   ══════════════════════════════════════════════════════════════ */

/*  Amit a rendszer lát a kézzel beírt szám mellett  */
.rendszer-ertek{
  font-size:11px; color:var(--muted); margin-top:5px; line-height:1.4;
}
.rendszer-ertek.elter{
  color:var(--jelzes-sarga-ink); background:var(--jelzes-sarga);
  border-radius:9px; padding:5px 9px; font-weight:600;
}
.rendszer-ertek.elter::before{ content:'⚠ '; }

/*  A csapatom — automatikus összesítő + egy csapat-összefoglaló  */
.et-auto{
  border:1px solid var(--line); border-radius:16px; background:var(--surface);
  padding:14px 16px; margin-bottom:14px;
}
.et-auto-fej{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:11px; }
.et-auto-cim{ font-size:13.5px; font-weight:700; }
.et-auto-al{ font-size:11.5px; color:var(--muted); }
.et-kpik{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:9px; margin-bottom:12px; }
@media (max-width:600px){ .et-kpik{ grid-template-columns:1fr; } }
.et-kpi{
  background:var(--green-50); border-radius:12px; padding:10px 12px;
  display:flex; flex-direction:column; gap:2px;
}
.et-kpi b{ font-family:var(--betu-cim); font-size:19px; color:var(--green-700); }
.et-kpi span{ font-size:11px; color:var(--muted); }
.et-osz-cimke{ display:block; font-size:12.5px; font-weight:700; margin:4px 0 6px; }
.et-osz-mezo{
  width:100%; border:1px solid var(--line); border-radius:12px; padding:11px 13px;
  font-family:inherit; font-size:13.5px; line-height:1.55; background:var(--bg); color:var(--ink);
  resize:vertical; min-height:110px;
}
.et-osz-mezo:focus{ outline:none; border-color:var(--green-500); background:var(--surface); }

.et-sor{
  border:1px solid var(--line); border-radius:16px;
  padding:13px 15px; margin-bottom:11px; background:var(--surface);
}
.et-sor:last-child{ margin-bottom:0; }
.et-fej{ display:flex; align-items:center; gap:11px; flex-wrap:wrap; }
.et-nev{ font-size:13.5px; font-weight:700; }
.et-alcim{ font-size:11px; color:var(--muted); margin-top:1px; }
.et-pont{ display:flex; gap:3px; flex-wrap:wrap; }
.et-sc{
  width:26px; height:26px; border-radius:8px; cursor:pointer;
  border:1px solid var(--line); background:var(--surface); color:var(--ink);
  font-family:inherit; font-size:11px; font-weight:600; line-height:1;
  transition:background .12s, border-color .12s;
}
.et-sc:hover{ border-color:var(--green-500); }
.et-sc.on{ background:var(--green-600); border-color:var(--green-600); color:#fff; }
.et-mezok{ display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:11px; }
@media (max-width:760px){ .et-mezok{ grid-template-columns:1fr; } .et-pont{ width:100%; } }
.et-mezok input{
  border:1px solid var(--line); border-radius:11px; padding:10px 12px;
  font-family:inherit; font-size:13px; background:var(--bg); color:var(--ink);
}
.et-mezok input:focus{ outline:none; border-color:var(--green-500); background:var(--surface); }
.et-oszt{
  display:flex; align-items:center; gap:7px; margin-top:10px;
  font-size:11.5px; color:var(--muted); cursor:pointer;
}
.et-oszt input{ accent-color:var(--green-600); }

/*  Munkatárs-kártya: rejtett műveletek  */
.wev-kartya{ position:relative; }
.wev-tobb{
  border:1px solid var(--line); background:var(--surface); color:var(--muted);
  border-radius:11px; padding:7px 11px; font-size:14px; cursor:pointer; line-height:1;
}
.wev-tobb:hover{ border-color:var(--green-500); color:var(--green-700); }
.wev-menu{
  position:absolute; right:0; top:calc(100% - 6px); z-index:40;
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  box-shadow:0 12px 32px rgba(16,40,24,.16); padding:5px; min-width:220px;
}
.wev-menu button{
  display:block; width:100%; text-align:left; border:none; background:none;
  padding:9px 12px; border-radius:10px; font-family:inherit; font-size:12.5px;
  font-weight:600; color:var(--ink); cursor:pointer;
}
.wev-menu button:hover{ background:var(--green-50,#F1F8F3); color:var(--green-700); }

/* ══════════════════════════════════════════════════════════════
   HETI ÉRTÉKELÉS — közös kártyanyelv
   A csapat- és az egyéni ablak ugyanezeket használja.
   ══════════════════════════════════════════════════════════════ */
.wev-kpik{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  gap:10px; margin-bottom:16px;
}
.wev-kpik.ketto{ grid-template-columns:repeat(2, minmax(0,1fr)); }
@media (max-width:900px){ .wev-kpik{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:560px){ .wev-kpik, .wev-kpik.ketto{ grid-template-columns:1fr; } }

.wev-kpi{
  background:var(--surface); border:1px solid var(--line);
  border-left:3px solid var(--wk); border-radius:14px; padding:12px 14px;
  min-width:0;
}
.wev-kpi-fej{ display:flex; align-items:center; gap:7px; }
.wev-kpi-ikon{
  width:22px; height:22px; border-radius:7px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:12px;
  background:color-mix(in srgb, var(--wk) 14%, transparent);
}
.wev-kpi-cimke{
  font-size:10.5px; color:var(--muted); font-weight:700;
  text-transform:uppercase; letter-spacing:.04em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.wev-kpi-ertek{
  font-family:var(--betu-cim); font-size:21px; font-weight:700;
  color:var(--wk); margin-top:6px; display:flex; align-items:baseline; gap:6px;
}
.wev-kpi-per{ font-family:var(--betu-szoveg); font-size:12.5px; font-weight:500; color:var(--muted); }
.wev-kpi-pct{ margin-left:auto; font-family:var(--betu-szoveg); font-size:13px; font-weight:700; }
.wev-kpi-alcim{ font-size:11px; color:var(--muted); margin-top:3px; }

/*  Szövegblokkok hasábokban  */
.wev-hasabok{
  display:grid; grid-template-columns:1.35fr 1fr 1fr; gap:12px; margin-bottom:12px;
}
.wev-hasabok.harom{ grid-template-columns:repeat(3, minmax(0,1fr)); }
@media (max-width:860px){ .wev-hasabok, .wev-hasabok.harom{ grid-template-columns:1fr; } }

.wev-blokk{
  background:var(--surface); border:1px solid var(--line);
  border-left:3px solid var(--wb); border-radius:13px; padding:12px 14px;
  min-width:0;
}
.wev-blokk-cim{
  font-size:10.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; color:var(--wb); margin-bottom:6px;
}
.wev-blokk-szoveg{ font-size:12.5px; line-height:1.6; white-space:pre-wrap; }
.wev-lista{ margin:0; padding-left:16px; font-size:12.5px; line-height:1.65; }
.wev-lista li{ margin-bottom:3px; }

/*  Összecsukható személykártyák  */
.wev-szemely{
  border:1px solid var(--line); border-radius:15px;
  overflow:hidden; margin-bottom:10px; background:var(--surface);
}
.wev-szemely-fej{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  padding:9px 13px; background:var(--bg); cursor:pointer;
}
.wev-szemely-fej:hover{ background:var(--green-50,#F1F8F3); }
.wev-sz-nev{ font-weight:700; font-size:12.5px; }
.wev-sz-szerep{ font-size:10.5px; color:var(--muted); }
.wev-sz-szam{ margin-left:auto; font-size:11px; color:var(--muted); }
.wev-sz-nyil{ font-size:13px; color:var(--muted); padding-left:6px; }
.wev-szemely-tart{ padding:12px 13px; }
.wev-sz-cimke{
  font-size:10px; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; margin-bottom:8px;
}
.wev-sz-cimke.sajat{ color:var(--mony-500); }
.wev-sz-cimke.vezetoi{ color:var(--green-700); margin-top:14px; }
.wev-sz-ures{
  font-size:11.5px; color:var(--muted); padding:9px 0;
  border-top:1px solid var(--line); margin-top:10px;
}

/*  A nyitott műveleti menü kerüljön a szomszédos kártyák fölé.
    A kártyák saját rétegkontextust nyitnak (átmenet + árnyék),
    ezért a menü z-indexe önmagában nem volt elég.  */
.wev-kartya.menu-nyitva{ position:relative; z-index:120; }
.kl-sor.menu-nyitva, .kiv-valasz.menu-nyitva{ position:relative; z-index:120; }
.wev-menu, .kl-menu{ z-index:130; }

/*  A kontaktlista sorai is kaphatnak kiemelést nyitott menünél  */
.kl-tsor.menu-nyitva{ position:relative; z-index:120; }

/*  Heti kiértékelés — teljes szélesség, mint a többi nagy nézetnél  */
.content:has(#view-evaluation.active){ align-items:stretch; padding-left:22px; padding-right:22px; }
#view-evaluation{ max-width:none; width:100%; }
#view-evaluation .form-wrap,
#view-evaluation .eval-pane{ max-width:none; width:100%; margin:0; }

/*  A saját kiértékelés űrlapja olvasható szélességű marad, a csapat
    és a listák viszont kitöltik a lapot — a hosszú sorokat nehéz
    olvasni, egy űrlapnál ez nem nyereség.  */
#view-evaluation .eval-pane[data-vpane="sajat"] > .form-wrap{ max-width:900px; }
#view-evaluation #evalTeamSection{ max-width:none; }

/*  A csapat-szakasz sorai szélesebb helyen három hasábra bomlanak  */
@media (min-width:1300px){
  .et-mezok{ grid-template-columns:1fr 1fr; }
  #view-evaluation .eval-pane[data-vpane="sajat"] > .form-wrap{ max-width:1100px; }
}

/*  Az értékelő ablakok szélesebbek: a három hasáb így elfér  */
#genericModalOverlay .modal-box{ max-width:min(1400px, 94vw); width:100%; }

/*  A kártya műveletei egy sorban: gomb és a három pont egymás mellett  */
.wev-muveletek{
  position:relative; display:flex; align-items:center;
  gap:6px; flex-wrap:nowrap; flex-shrink:0;
}
.wev-muveletek .wev-menu{ top:calc(100% + 6px); }
.wev-muveletek .wev-menu.felfele{ top:auto; bottom:calc(100% + 6px); }

/*  Szélesebb ablakban a kártyarács is több oszlopot kap  */
@media (min-width:1200px){
  #genericModalOverlay .wev-kpik{ grid-template-columns:repeat(4, minmax(0,1fr)); }
  #genericModalOverlay .wev-kpik.ketto{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}

/*  AI Központ — teljes szélesség  */
.content:has(#view-command-center.active){ align-items:stretch; padding-left:22px; padding-right:22px; }
#view-command-center{ max-width:none; width:100%; }
.cc-lap{ max-width:none; width:100%; }

/*  A munkatárs-kártyák rácsa a szélesebb helyet is kitölti  */
#ccCards{ grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)) !important; }
@media (min-width:1700px){
  #ccCards{ grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)) !important; }
}

/* ══════════════════════════════════════════════════════════════
   HETI KIÉRTÉKELÉS — lista balra, részletek jobbra
   Végig lehet menni a csapaton anélkül, hogy ablakot nyitnál.
   ══════════════════════════════════════════════════════════════ */
.wev-munka{
  display:grid; grid-template-columns:300px minmax(0,1fr);
  gap:16px; align-items:start;
}
@media (max-width:1000px){ .wev-munka{ grid-template-columns:1fr; } }

.wev-oldallista{
  background:var(--surface); border:1px solid var(--line);
  border-radius:18px; padding:8px; position:sticky; top:78px;
  max-height:calc(100vh - 110px); overflow-y:auto;
}
@media (max-width:1000px){ .wev-oldallista{ position:static; max-height:none; } }

/*  Csoportok  */
.wev-csoport + .wev-csoport{ margin-top:6px; }
.wev-csoport-fej{
  display:flex; align-items:center; gap:8px; cursor:pointer;
  padding:8px 10px; border-radius:11px;
}
.wev-csoport-fej:hover{ background:var(--bg); }
.wev-csoport-nyil{ font-size:12px; color:var(--muted); width:12px; }
.wev-csoport-cim{
  font-size:10.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; color:var(--muted);
}
.wev-csoport-db{
  margin-left:auto; font-size:11px; font-weight:700; color:var(--muted);
  background:var(--bg); border-radius:999px; padding:2px 8px;
}
.wev-csoport-gomb{ padding:4px 10px !important; font-size:10.5px !important; margin-left:6px; }

/*  Egy sor a listában  */
.wev-sor{
  display:flex; align-items:center; gap:9px;
  padding:8px 10px; border-radius:12px; cursor:pointer;
  transition:background .14s ease;
}
.wev-sor:hover{ background:var(--bg); }
.wev-sor.kivalasztott{ background:var(--green-50,#F1F8F3); box-shadow:inset 2px 0 0 var(--green-600); }
.wev-sor-nev{ flex:1; min-width:0; font-size:12.5px; font-weight:600; line-height:1.25; }
.wev-sor-nev > div:first-child{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wev-sor-alcim{ font-size:10.5px; color:var(--muted); font-weight:500; }
.wev-pont{ width:8px; height:8px; border-radius:50%; flex-shrink:0; }

/*  Hathetes mini trend  */
.wev-trend{ display:flex; align-items:flex-end; gap:2px; height:16px; flex-shrink:0; }
.wev-trend i{ width:3px; background:var(--green-600); border-radius:2px; display:block; }

/*  A jobb hasáb  */
.wev-reszletek{
  background:var(--surface); border:1px solid var(--line);
  border-radius:18px; padding:18px 20px; min-height:320px;
}
.wev-r-fej{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding-bottom:14px; border-bottom:1px solid var(--line); margin-bottom:16px;
}
.wev-r-nev{ font-size:16px; font-weight:700; }
.wev-r-alcim{ font-size:11.5px; color:var(--muted); margin-top:2px; }

/* ══════════════════════════════════════════════════════════════
   CSAPAT-ÉRTÉKELÉS TÁBLÁZATA
   Egyetlen lista: a sor kattintható, alatta nyílik a leírás.
   ══════════════════════════════════════════════════════════════ */
.wte-fej{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.wte-cim{
  font-size:11px; color:var(--muted); font-weight:700;
  text-transform:uppercase; letter-spacing:.05em;
}
.wte-tobb-btn{ margin-left:auto; padding:5px 12px !important; font-size:11px !important; }

.wte-tabla-doboz{ border:1px solid var(--line); border-radius:13px; overflow:hidden; }
.wte-tabla{ width:100%; border-collapse:collapse; font-size:11.5px; }
.wte-tabla th{
  padding:8px 9px; font-size:10px; color:var(--muted); font-weight:700;
  text-align:center; background:var(--bg); border-bottom:1px solid var(--line);
}
.wte-tabla th.bal, .wte-tabla td.bal{ text-align:left; }
.wte-tabla td{ padding:8px 9px; text-align:center; border-bottom:1px solid var(--line); }
.wte-tabla tfoot td{ background:var(--bg); font-weight:700; border-bottom:none; }

/*  A ritkábban kellő oszlopok alapból rejtve  */
.wte-tabla .extra{ display:none; }
.wte-tabla-doboz.extra-lathato .extra{ display:table-cell; }

.wte-sor.nyithato{ cursor:pointer; }
.wte-sor.nyithato:hover td{ background:var(--green-50,#F1F8F3); }
.wte-sor.nyitva td{ background:var(--green-50,#F1F8F3); }
.wte-sor.inaktiv td{ opacity:.45; }
.wte-sor.inaktiv:hover td{ opacity:1; }
.wte-inaktiv{
  font-size:9.5px; font-weight:700; color:var(--red);
  background:var(--jelzes-piros); border-radius:999px;
  padding:1px 7px; margin-left:6px;
}
.wte-nyil{ color:var(--muted); font-size:12px; }
.wte-leiras > td{ padding:14px 16px !important; background:var(--surface) !important; text-align:left; }

/*  Nyolc szám egy sorban a széles ablakban  */
@media (min-width:1200px){
  .wev-kpik.nyolc{ grid-template-columns:repeat(4, minmax(0,1fr)); }
}
@media (min-width:1500px){
  .wev-kpik.nyolc{ grid-template-columns:repeat(8, minmax(0,1fr)); }
  .wev-kpik.nyolc .wev-kpi-ertek{ font-size:18px; }
  .wev-kpik.nyolc .wev-kpi-cimke{ font-size:9.5px; }
}

/* ══════════════════════════════════════════════════════════════
   LEBEGŐ KÁRTYÁK A DASHBOARD HERÓJÁN
   A mai számaidból élnek: lassan úsznak, és finoman követik
   az egeret. Csökkentett mozgásnál állva maradnak.
   ══════════════════════════════════════════════════════════════ */
.dh-lebegok{ position:absolute; inset:0; pointer-events:none; z-index:3; }

.dh-lebego{
  position:absolute; display:flex; align-items:center; gap:11px;
  background:rgba(255,255,255,.94); color:#111815;
  border-radius:16px; padding:11px 16px;
  box-shadow:0 14px 34px rgba(0,0,0,.24);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  white-space:nowrap;
  animation:dhLebeg 6s ease-in-out infinite;
  transform:translate3d(calc(var(--px,0) * -14px), calc(var(--py,0) * -9px), 0);
  transition:transform .6s cubic-bezier(.2,.8,.2,1);
}
.dh-lebego b{ display:block; font-family:var(--betu-cim); font-size:13.5px; font-weight:700; }
.dh-lebego span{ display:block; font-size:11.5px; color:#5F6E66; margin-top:1px; }
.dh-lebego-ikon{
  width:30px; height:30px; border-radius:50%; color:#fff; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:14px;
}

/*  A három hely — külön ütemben úsznak, hogy ne mozogjanak együtt  */
.dh-lebego.l1{ left:calc(var(--w-sav-x) + 260px); top:14%;  animation-delay:0s; }
.dh-lebego.l2{ right:calc(var(--w-sav-x) + 230px); top:44%; animation-delay:-2s; }
.dh-lebego.l3{ left:calc(var(--w-sav-x) + 340px); bottom:16%; animation-delay:-4s; }

@keyframes dhLebeg{
  0%,100%{ margin-top:0; }
  50%    { margin-top:-13px; }
}

/*  Szűk helyen elvennék a teret a hero szövegétől  */
@media (max-width:1400px){ .dh-lebego.l3{ display:none; } }
@media (max-width:1150px){ .dh-lebegok{ display:none; } }

@media (prefers-reduced-motion: reduce){
  .dh-lebego{ animation:none; transition:none; }
}

/*  A mintázatos hero-háttér rétegei: a rács fix méretű, a fénykörök
    és a pászma viszont kitöltik a felületet. A background-size:cover
    egymagában széthúzná a rácsot, ezért rétegenként adjuk meg.  */
#view-dashboard.web .dh-hatter{
  background-size:cover, cover, cover, 64px 64px, 64px 64px, cover;
  background-position:center;
  background-repeat:no-repeat, no-repeat, no-repeat, repeat, repeat, no-repeat;
}

/*  A háttér lassan úszik — alig észrevehető, de él tőle a felület  */
#view-dashboard.web .dh-hatter.aktiv{ animation:dhHatterUszik 26s ease-in-out infinite; }
@keyframes dhHatterUszik{
  0%,100%{ background-position:center, center, center, 0 0, 0 0, center; }
  50%    { background-position:center, center, 120% center, 64px 32px, 32px 64px, center; }
}
@media (prefers-reduced-motion: reduce){
  #view-dashboard.web .dh-hatter.aktiv{ animation:none; }
}

/*  A kis lapkák ugyanezt a mintát viselik, csak sűrűbb ráccsal  */
#view-dashboard.web .dh-kicsi{
  background-size:cover, cover, cover, 26px 26px, 26px 26px, cover;
  background-repeat:no-repeat, no-repeat, no-repeat, repeat, repeat, no-repeat;
}

/* ══════════════════════════════════════════════════════════════
   HITELKALKULÁTOR
   Balra a bemenet csúszkákkal, jobbra a sötét eredménykártya.
   ══════════════════════════════════════════════════════════════ */
.kalk-lap{ max-width:1200px; }
.kalk-racs{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; align-items:start; }
@media (max-width:900px){ .kalk-racs{ grid-template-columns:1fr; } }

.kalk-mezo{ margin-bottom:20px; }
.kalk-mezo label{
  display:block; font-size:11.5px; font-weight:700; color:var(--muted);
  text-transform:uppercase; letter-spacing:.05em; margin-bottom:8px;
}
.kalk-be{ position:relative; display:flex; align-items:center; }
.kalk-be input{
  flex:1; border:1.5px solid var(--line); border-radius:14px;
  padding:13px 52px 13px 15px; font-family:var(--betu-cim);
  font-size:19px; font-weight:700; background:var(--bg); color:var(--ink);
  transition:border-color .18s ease, background .18s ease;
}
.kalk-be input:focus{ outline:none; border-color:var(--green-500); background:var(--surface); }
.kalk-utotag{
  position:absolute; right:16px; font-size:13px; font-weight:600;
  color:var(--muted); pointer-events:none;
}

/*  Csúszka  */
.kalk-mezo input[type="range"]{
  width:100%; margin-top:11px; appearance:none; -webkit-appearance:none;
  height:5px; border-radius:3px; background:var(--line); cursor:pointer;
}
.kalk-mezo input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; width:20px; height:20px; border-radius:50%;
  background:var(--green-600); border:3px solid var(--surface);
  box-shadow:0 2px 8px rgba(16,40,24,.22); cursor:grab;
}
.kalk-mezo input[type="range"]::-moz-range-thumb{
  width:20px; height:20px; border-radius:50%; background:var(--green-600);
  border:3px solid var(--surface); box-shadow:0 2px 8px rgba(16,40,24,.22); cursor:grab;
}
.kalk-sugo{ font-size:11.5px; color:var(--muted); margin-top:6px; }

.kalk-valto{ padding:14px 0 6px; border-top:1px solid var(--line); margin-top:4px; }
.kalk-kapcs{
  display:flex; align-items:center; gap:9px; font-size:13.5px;
  font-weight:600; cursor:pointer;
}
.kalk-kapcs input{ accent-color:var(--green-600); width:18px; height:18px; }

/*  Eredménykártya  */
.kalk-eredmeny{
  background:linear-gradient(150deg, #0B2C1C 0%, #14603F 70%, #1AA568 160%);
  border-radius:var(--radius); padding:26px 28px; color:#fff;
  box-shadow:var(--shadow-md); position:sticky; top:78px;
}
@media (max-width:900px){ .kalk-eredmeny{ position:static; } }

.kalk-fo{ padding-bottom:20px; border-bottom:1px solid rgba(255,255,255,.16); }
.kalk-fo-cimke{
  font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.08em; opacity:.72;
}
.kalk-fo-ertek{
  font-family:var(--betu-cim); font-size:clamp(30px,4vw,40px); font-weight:700;
  letter-spacing:-.03em; margin:6px 0 4px; line-height:1.05;
}
.kalk-fo-alcim{ font-size:12.5px; opacity:.75; }

.kalk-szamok{ padding:18px 0; display:flex; flex-direction:column; gap:11px; }
.kalk-szam{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.kalk-szam span{ font-size:13px; opacity:.8; }
.kalk-szam b{ font-family:var(--betu-cim); font-size:16px; font-weight:700; }
.kalk-szam b[style*="--red"]{ color:#FF9C94 !important; }
.kalk-szam b[style*="green-700"]{ color:#7fe8a4 !important; }

/*  Tőke–kamat arány  */
.kalk-arany{ padding:6px 0 18px; }
.kalk-arany-sav{
  display:flex; height:28px; border-radius:9px; overflow:hidden;
  font-size:11px; font-weight:700;
}
.kalk-arany-sav span{
  display:flex; align-items:center; justify-content:center;
  transition:width .5s cubic-bezier(.2,.8,.2,1);
}
.kalk-arany-sav .toke{ background:#7fe8a4; color:#0B2C1C; }
.kalk-arany-sav .kamat{ background:rgba(255,255,255,.22); color:#fff; }
.kalk-arany-jel{ display:flex; gap:16px; margin-top:9px; font-size:11.5px; opacity:.8; }
.kalk-arany-jel i{
  display:inline-block; width:9px; height:9px; border-radius:3px; margin-right:5px;
}
.kalk-arany-jel .toke{ background:#7fe8a4; }
.kalk-arany-jel .kamat{ background:rgba(255,255,255,.32); }

.kalk-gombok{ display:flex; gap:8px; flex-wrap:wrap; }
/*  A gombok a SÖTÉT eredménykártyán világosak, a világos kártyákon
    (előszűrés, okoshitel) viszont normál kinézetűek — eddig ott is
    fehér szöveget kaptak fehér alapon, ezért tűntek üresnek.  */
.kalk-eredmeny .kalk-gombok .btn-secondary{
  background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.2); color:#fff;
}
.kalk-eredmeny .kalk-gombok .btn-secondary:hover{ background:rgba(255,255,255,.2); }

.esz-eredmeny .kalk-gombok .btn-secondary,
.ok-eredmeny .kalk-gombok .btn-secondary{
  background:var(--surface); border:1px solid var(--line); color:var(--ink);
}
.esz-eredmeny .kalk-gombok .btn-secondary:hover,
.ok-eredmeny .kalk-gombok .btn-secondary:hover{
  border-color:var(--green-500); color:var(--green-700);
}

/*  Ütemterv  */
.kalk-tabla{ width:100%; border-collapse:collapse; font-size:12.5px; min-width:520px; }
.kalk-tabla th{
  text-align:right; padding:9px 12px; background:var(--bg);
  border-bottom:1px solid var(--line); font-size:10.5px;
  text-transform:uppercase; letter-spacing:.05em; color:var(--muted);
}
.kalk-tabla th:first-child, .kalk-tabla td:first-child{ text-align:left; }
.kalk-tabla td{ padding:9px 12px; text-align:right; border-bottom:1px solid var(--line); }
.kalk-tabla tr:hover td{ background:var(--green-50,#F1F8F3); }
.kalk-tabla tr.elotorlesztes td{
  background:var(--jelzes-zold); font-weight:700;
}

/* ══════════════════════════════════════════════════════════════
   ELŐSZŰRÉS
   ══════════════════════════════════════════════════════════════ */
.kalkTabBtn{ border:1px solid transparent; background:none; }

.esz-sor{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:600px){ .esz-sor{ grid-template-columns:1fr; } }
.esz-sel{
  width:100%; border:1.5px solid var(--line); border-radius:14px;
  padding:14px 15px; font-family:inherit; font-size:13.5px; font-weight:600;
  background:var(--bg); color:var(--ink); cursor:pointer;
}
.esz-sel:focus{ outline:none; border-color:var(--green-500); background:var(--surface); }

.esz-eredmeny{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:24px 26px;
  position:sticky; top:78px;
}
@media (max-width:900px){ .esz-eredmeny{ position:static; } }

.esz-fej{
  display:flex; align-items:center; gap:14px;
  padding-bottom:18px; border-bottom:1px solid var(--line); margin-bottom:18px;
}
.esz-ikon{
  width:52px; height:52px; border-radius:16px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:26px;
  background:color-mix(in srgb, var(--esz) 13%, transparent);
}
.esz-cimke{
  font-family:var(--betu-cim); font-size:23px; font-weight:700;
  color:var(--esz); letter-spacing:-.02em; line-height:1.15;
}
.esz-alcim{ font-size:12.5px; color:var(--muted); margin-top:3px; }

.esz-mutatok{ display:flex; flex-direction:column; gap:11px; margin-bottom:16px; }
.esz-mutato{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.esz-mutato span{ font-size:13px; color:var(--muted); }
.esz-mutato b{ font-family:var(--betu-cim); font-size:16.5px; font-weight:700; }

.esz-sav{
  position:relative; height:9px; border-radius:5px;
  background:var(--line); overflow:hidden; margin-bottom:8px;
}
.esz-sav-belso{ height:100%; border-radius:5px; transition:width .5s cubic-bezier(.2,.8,.2,1); }
.esz-sav-jel{
  display:block; font-size:10.5px; color:var(--muted);
  position:absolute; top:14px; left:0;
}

.esz-lista{ display:flex; flex-direction:column; gap:9px; margin-top:26px; }
.esz-gond{
  display:flex; gap:11px; border-radius:14px; padding:13px 15px;
  font-size:13px; line-height:1.55;
}
.esz-gond.stop{ background:var(--jelzes-piros); }
.esz-gond.figyelem{ background:var(--jelzes-sarga); }
.esz-gond-ikon{ font-size:15px; flex-shrink:0; line-height:1.4; }
.esz-gond b{ display:block; margin-bottom:2px; }
.esz-gond.stop b{ color:var(--jelzes-piros-ink); }
.esz-gond.figyelem b{ color:var(--jelzes-sarga-ink); }
.esz-gond span{ display:block; color:var(--muted); font-size:12.5px; }

.esz-rendben{
  margin-top:26px; background:var(--jelzes-zold); color:var(--jelzes-zold-ink);
  border-radius:14px; padding:13px 15px; font-size:13px; font-weight:600;
}

.esz-lablec{
  margin-top:16px; padding-top:14px; border-top:1px solid var(--line);
  font-size:11px; color:var(--muted); line-height:1.6;
}

/*  Kereshető ügyfélválasztó a kalkulátorokhoz  */
.kalk-ulista{
  margin-top:10px; max-height:280px; overflow-y:auto;
  border:1px solid var(--line); border-radius:14px; padding:5px;
}
.kalk-usor{
  display:flex; align-items:baseline; gap:9px; flex-wrap:wrap;
  padding:10px 12px; border-radius:11px; cursor:pointer;
  font-size:13.5px; transition:background .14s ease;
}
.kalk-usor:hover{ background:var(--bg); }
.kalk-usor.kiv{ background:var(--green-50,#F1F8F3); font-weight:700; box-shadow:inset 2px 0 0 var(--green-600); }
.kalk-usor small{ color:var(--muted); font-size:11.5px; margin-left:auto; }
.kalk-ures{ padding:18px 12px; text-align:center; font-size:12.5px; color:var(--muted); }

/* ══════════════════════════════════════════════════════════════
   OKOSHITEL
   ══════════════════════════════════════════════════════════════ */
.ok-irany{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
@media (max-width:600px){ .ok-irany{ grid-template-columns:1fr; } }
.ok-irany-gomb{
  border:1.5px solid var(--line); background:var(--surface); color:var(--muted);
  border-radius:14px; padding:12px 14px; font-family:inherit;
  font-size:12.5px; font-weight:600; cursor:pointer; text-align:left;
  transition:border-color .18s ease, color .18s ease, background .18s ease;
}
.ok-irany-gomb:hover{ border-color:var(--green-500); }
.ok-irany-gomb.aktiv{
  border-color:var(--green-600); background:var(--green-50,#F1F8F3);
  color:var(--green-700); font-weight:700;
}

.ok-eredmeny{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:24px 26px; position:sticky; top:78px;
}
@media (max-width:900px){ .ok-eredmeny{ position:static; } }

.ok-fej{
  display:flex; align-items:center; gap:14px;
  padding-bottom:18px; border-bottom:1px solid var(--line); margin-bottom:18px;
}
.ok-ikon{
  width:52px; height:52px; border-radius:16px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:26px;
  background:var(--green-50,#F1F8F3);
}
.ok-fej.nem .ok-ikon{ background:var(--jelzes-sarga); }
.ok-cimke{
  font-family:var(--betu-cim); font-size:23px; font-weight:700;
  color:var(--green-700); letter-spacing:-.02em; line-height:1.15;
}
.ok-fej.nem .ok-cimke{ color:var(--jelzes-sarga-ink); }
.ok-alcim{ font-size:12.5px; color:var(--muted); margin-top:3px; line-height:1.55; }

.ok-nagy{
  background:linear-gradient(150deg, #0B2C1C 0%, #14603F 80%, #1AA568 170%);
  border-radius:18px; padding:20px 22px; color:#fff; margin-bottom:18px;
}
.ok-nagy-cimke{
  font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.08em; opacity:.72;
}
.ok-nagy-ertek{
  font-family:var(--betu-cim); font-size:clamp(27px,3.6vw,35px); font-weight:700;
  letter-spacing:-.03em; margin:6px 0 4px; line-height:1.05;
}
.ok-nagy-alcim{ font-size:12px; opacity:.78; }

.ok-osszeg{
  margin-top:18px; padding-top:16px; border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:9px;
}
.ok-osszeg-sor{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.ok-osszeg-sor span{ font-size:12.5px; color:var(--muted); }
.ok-osszeg-sor b{ font-family:var(--betu-cim); font-size:15px; font-weight:700; }
.ok-osszeg-sor.kiemelt{
  background:var(--jelzes-zold); border-radius:12px;
  padding:11px 14px; margin-top:4px;
}
.ok-osszeg-sor.kiemelt span{ color:var(--jelzes-zold-ink); font-weight:600; }
.ok-osszeg-sor.kiemelt b{ color:var(--jelzes-zold-ink); font-size:17px; }

/*  Grafikon  */
.ok-svg{ width:100%; height:260px; display:block; }
.ok-jelmagyarazat{
  display:flex; gap:18px; flex-wrap:wrap; margin-top:10px;
  font-size:11.5px; color:var(--muted);
}
.ok-jelmagyarazat i{
  display:inline-block; width:10px; height:10px;
  border-radius:3px; margin-right:6px;
}

/*  Okoshitel grafikon — egérkövető buborék  */
.ok-grafwrap{ position:relative; cursor:crosshair; }
.ok-svg #okKurzorVonal,
.ok-svg #okKurzorH,
.ok-svg #okKurzorM{ transition:opacity .18s ease; pointer-events:none; }

.ok-buborek{
  position:absolute; top:14px; z-index:5; pointer-events:none;
  background:var(--zold-900, #0B2C1C); color:#fff;
  border-radius:14px; padding:12px 15px; min-width:210px;
  box-shadow:0 12px 32px rgba(11,44,28,.28);
  transition:opacity .18s ease;
}
.ok-b-ev{
  font-size:10.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:.08em; opacity:.65; margin-bottom:8px;
}
.ok-b-sor{
  display:flex; align-items:baseline; gap:8px;
  font-size:12.5px; margin-bottom:5px;
}
.ok-b-sor i{
  width:9px; height:9px; border-radius:3px; flex-shrink:0;
  display:inline-block; transform:translateY(-1px);
}
.ok-b-sor span{ opacity:.8; }
.ok-b-sor b{ margin-left:auto; font-family:var(--betu-cim); font-weight:700; }
.ok-b-sor.kul{
  margin-top:8px; padding-top:8px; margin-bottom:0;
  border-top:1px solid rgba(255,255,255,.18);
}

/*  Kalkulációk az ügyfélkártyán  */
.kalk-tetel{
  display:flex; align-items:flex-start; gap:13px;
  border:1px solid var(--line); border-radius:16px;
  padding:14px 16px; margin-bottom:10px; background:var(--surface);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.kalk-tetel:hover{ border-color:var(--green-500); box-shadow:var(--shadow-sm); }
.kalk-tetel:last-child{ margin-bottom:0; }

.kalk-t-ikon{
  width:38px; height:38px; border-radius:12px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:17px;
  background:color-mix(in srgb, var(--kt) 13%, transparent);
}
.kalk-t-szoveg{ flex:1; min-width:0; }
.kalk-t-cim{ font-size:14px; font-weight:700; }
.kalk-t-ossz{ font-size:12.5px; color:var(--muted); margin-top:3px; line-height:1.5; }
.kalk-t-datum{ font-size:11px; color:var(--halvany,#93A29A); margin-top:5px; }
.kalk-t-gombok{ display:flex; align-items:center; gap:5px; flex-shrink:0; }
@media (max-width:600px){
  .kalk-tetel{ flex-wrap:wrap; }
  .kalk-t-gombok{ width:100%; margin-top:8px; }
}

/*  Megtakarítás — a sávok külön dobozban  */
.mg-savok{
  display:flex; flex-direction:column; gap:9px;
  margin:18px 0; padding:16px; border-radius:16px; background:var(--bg);
}
.mg-sav{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.mg-sav-cimke{ font-size:12.5px; color:var(--muted); display:flex; align-items:center; }
.mg-sav-cimke i{
  display:inline-block; width:10px; height:10px;
  border-radius:3px; margin-right:7px;
}
.mg-sav b{ margin-left:auto; font-family:var(--betu-cim); font-size:15.5px; font-weight:700; }
.mg-sav small{ width:100%; font-size:11px; color:var(--halvany,#93A29A); padding-left:17px; }

/* ══════════════════════════════════════════════════════════════
   CSED / GYED
   ══════════════════════════════════════════════════════════════ */
.cg-ertekek{
  display:grid; grid-template-columns:1fr 1fr; gap:9px 16px;
  background:var(--bg); border-radius:14px; padding:14px 16px;
}
@media (max-width:600px){ .cg-ertekek{ grid-template-columns:1fr; } }
.cg-ertekek > div{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.cg-ertekek span{ font-size:12px; color:var(--muted); }
.cg-ertekek b{ font-family:var(--betu-cim); font-size:13.5px; font-weight:700; }

.cg-lepcso{ display:flex; flex-direction:column; gap:10px; margin:18px 0; }
.cg-lepes{
  border:1px solid var(--line); border-left:3px solid var(--cg);
  border-radius:14px; padding:13px 16px; background:var(--surface);
}
.cg-lepes-fej{ display:flex; align-items:baseline; gap:10px; }
.cg-lepes-fej b{ font-size:14px; color:var(--cg); }
.cg-lepes-fej span{ font-size:11.5px; color:var(--muted); margin-left:auto; }
.cg-lepes-ertek{
  font-family:var(--betu-cim); font-size:20px; font-weight:700; margin:5px 0 3px;
}
.cg-lepes-ertek small{ font-size:12px; font-weight:500; color:var(--muted); margin-left:5px; }
.cg-lepes-jel{ font-size:11.5px; color:var(--muted); line-height:1.5; }

.cg-figyelem{
  background:var(--jelzes-sarga); color:var(--jelzes-sarga-ink);
  border-radius:13px; padding:12px 15px; font-size:12.5px;
  line-height:1.6; margin-bottom:16px;
}

/*  Idővonal  */
.cg-sav{
  display:flex; height:44px; border-radius:13px; overflow:hidden;
  box-shadow:var(--shadow-sm);
}
.cg-sav-resz{
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:12.5px; font-weight:700; white-space:nowrap;
  transition:width .5s cubic-bezier(.2,.8,.2,1);
}
.cg-sav-jelek{
  display:flex; justify-content:space-between;
  font-size:11.5px; color:var(--muted); margin-top:8px;
}

/* ══════════════════════════════════════════════════════════════
   KHR-KIVONAT BEOLVASÁSA
   ══════════════════════════════════════════════════════════════ */
.khr-dobo{
  display:flex; align-items:flex-start; gap:12px;
  margin-top:12px; border:2px dashed var(--line); border-radius:16px;
  padding:14px 16px; cursor:pointer;
  transition:border-color .18s ease, background .18s ease;
}
.khr-dobo:hover, .khr-dobo.be{ border-color:var(--green-500); background:var(--green-50,#F1F8F3); }
.khr-ikon{ font-size:22px; line-height:1.2; }
.khr-dobo b{ display:block; font-size:13px; }
.khr-dobo span{ display:block; font-size:11.5px; color:var(--muted); margin-top:3px; line-height:1.55; }

.khr-tolt, .khr-hiba{
  margin-top:12px; border-radius:13px; padding:12px 15px; font-size:12.5px; line-height:1.6;
}
.khr-tolt{ background:var(--bg); color:var(--muted); }
.khr-hiba{ background:var(--jelzes-piros); color:var(--jelzes-piros-ink); }

.khr-lap{
  margin-top:12px; border:1px solid var(--line);
  border-radius:16px; padding:16px; background:var(--surface);
}
.khr-fej b{ display:block; font-size:13.5px; }
.khr-fej span{ display:block; font-size:11.5px; color:var(--muted); margin-top:2px; }

.khr-figyelem{
  margin:12px 0; border-radius:12px; padding:11px 14px;
  font-size:12.5px; line-height:1.6;
}
.khr-figyelem.stop{ background:var(--jelzes-piros); color:var(--jelzes-piros-ink); }
.khr-figyelem.ok{ background:var(--jelzes-zold); color:var(--jelzes-zold-ink); }

.khr-tetelek{ display:flex; flex-direction:column; gap:7px; }
.khr-tetel{
  display:flex; align-items:center; gap:11px;
  border:1px solid var(--line); border-radius:13px;
  padding:11px 13px; cursor:pointer; transition:opacity .18s ease, border-color .18s ease;
}
.khr-tetel:hover{ border-color:var(--green-500); }
.khr-tetel.ki{ opacity:.42; }
.khr-tetel input{ accent-color:var(--green-600); width:18px; height:18px; flex-shrink:0; }
.khr-t-szoveg{ flex:1; min-width:0; }
.khr-t-cim{ font-size:13px; font-weight:700; }
.khr-t-alcim{ font-size:11px; color:var(--muted); margin-top:2px; line-height:1.5; }
.khr-t-szam{ text-align:right; flex-shrink:0; }
.khr-t-szam b{ font-family:var(--betu-cim); font-size:14px; font-weight:700; }
.khr-t-szam small{ display:block; font-size:10.5px; color:var(--halvany,#93A29A); }

.khr-osszeg{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  margin-top:14px; padding-top:13px; border-top:1px solid var(--line);
}
.khr-osszeg span{ font-size:12.5px; color:var(--muted); }
.khr-osszeg b{ font-family:var(--betu-cim); font-size:18px; font-weight:700; color:var(--green-700); }

.khr-lablec{ font-size:11px; color:var(--muted); margin-top:11px; line-height:1.6; }

/* ══════════════════════════════════════════════════════════════
   LEAD-KIOSZTÁSI NAPLÓ
   ══════════════════════════════════════════════════════════════ */
.lnaplo-nap{ margin-bottom:14px; }
.lnaplo-nap:last-child{ margin-bottom:0; }
.lnaplo-nap-fej{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  padding:6px 0 8px; border-bottom:1px solid var(--line); margin-bottom:6px;
}
.lnaplo-nap-fej span{
  font-size:10.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; color:var(--muted);
}
.lnaplo-nap-fej b{ font-size:11.5px; color:var(--green-700); }

.lnaplo-sor{
  display:flex; align-items:flex-start; gap:12px;
  padding:9px 10px; border-radius:12px;
  transition:background .14s ease;
}
.lnaplo-sor:hover{ background:var(--bg); }
.lnaplo-ido{
  font-family:var(--betu-szam); font-size:11.5px; color:var(--muted);
  flex-shrink:0; padding-top:1px; width:42px;
}
.lnaplo-szoveg{ flex:1; min-width:0; font-size:13px; }
.lnaplo-nyil{ color:var(--muted); margin:0 5px; }
.lnaplo-db{
  flex-shrink:0; font-size:11px; font-weight:700;
  background:var(--green-100); color:var(--green-700);
  border-radius:999px; padding:3px 10px;
}
.lnaplo-ugyfelek{
  display:flex; gap:5px; flex-wrap:wrap; margin-top:5px;
}
.lnaplo-ugyfelek span{
  font-size:11px; background:var(--bg); border:1px solid var(--line);
  border-radius:999px; padding:2px 9px; cursor:pointer;
  transition:filter .14s ease, border-color .14s ease, color .14s ease;
}
.lnaplo-ugyfelek span b{ font-weight:700; opacity:.85; }
.lnaplo-ugyfelek span:not(.tobb):hover{ filter:brightness(.94); }
.lnaplo-ugyfelek span:hover{ border-color:var(--green-500); color:var(--green-700); }
.lnaplo-ugyfelek .tobb{ background:none; border-style:dashed; color:var(--muted); }

/*  Lead — mire jelentkezett  */
.lead-szakasz{
  display:inline-block; font-weight:700; white-space:nowrap;
  background:color-mix(in srgb, var(--lsz) 14%, transparent);
  color:var(--lsz); border-radius:999px; padding:3px 9px;
}
.lead-szuro-sor{ display:flex; gap:6px; flex-wrap:wrap; }
.lead-szuro{
  border:1px solid var(--line); background:var(--surface);
  border-radius:999px; padding:5px 11px; font-family:inherit;
  font-size:11px; font-weight:600; color:var(--muted); cursor:pointer;
  transition:border-color .16s ease, color .16s ease, background .16s ease;
}
.lead-szuro b{ font-weight:700; margin-left:3px; }
.lead-szuro:hover{ border-color:var(--lsz); color:var(--lsz); }
.lead-szuro.aktiv{
  border-color:var(--lsz); color:var(--lsz);
  background:color-mix(in srgb, var(--lsz) 11%, transparent);
}

/*  Gyorsgombok dátummezők alá  */
.gyorsdatum{ display:flex; gap:5px; flex-wrap:wrap; margin-top:6px; }
.gyorsdatum button{
  border:1px solid var(--line); background:var(--surface); color:var(--muted);
  border-radius:999px; padding:4px 10px; font-family:inherit;
  font-size:11px; font-weight:600; cursor:pointer;
  transition:border-color .16s ease, color .16s ease;
}
.gyorsdatum button:hover{ border-color:var(--green-500); color:var(--green-700); }

/*  Esemény — kik jelentkeztek  */
/* „Nem veszek részt" — piros, hogy ránézésre elváljon az „Ott leszek"-től */
.btn-secondary.ce-nem-gomb{
  color:#fff; border-color:#C9423F; background:#C9423F;
  box-shadow:0 4px 14px rgba(201,66,63,.25);
}
.btn-secondary.ce-nem-gomb:hover{
  color:#fff; border-color:#B13431; background:#B13431;
}
.ce-nem-cimke{
  font-size:11.5px; font-weight:600; color:#E5484D; text-align:center;
}

.ce-jelentkezok{
  cursor:pointer; border-bottom:1px dashed var(--line);
  transition:color .16s ease, border-color .16s ease;
}
.ce-jelentkezok:hover{ color:var(--green-700); border-color:var(--green-500); }

.ejel-blokk{ margin-bottom:18px; }
.ejel-blokk:last-child{ margin-bottom:0; }
.ejel-fej{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  padding-bottom:8px; margin-bottom:8px; border-bottom:2px solid var(--ej);
}
.ejel-fej span{ font-size:12.5px; font-weight:700; color:var(--ej); }
.ejel-fej b{ font-size:12px; color:var(--muted); }
.ejel-sor{
  display:flex; align-items:center; gap:10px;
  padding:8px 10px; border-radius:11px;
}
.ejel-sor:hover{ background:var(--bg); }
.ejel-sor img, .ejel-betuk{
  width:30px; height:30px; border-radius:50%; flex-shrink:0;
  object-fit:cover;
}
.ejel-betuk{
  background:var(--green-100); color:var(--green-700);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700;
}
.ejel-nev{ font-size:13.5px; font-weight:600; }
.ejel-ures{ font-size:12px; color:var(--muted); padding:8px 10px; }
.ejel-nezet{ display:flex; gap:6px; margin-bottom:14px; }
.ejel-nezet button{
  flex:1; border:1.5px solid var(--line); background:var(--bg); color:var(--muted);
  border-radius:10px; padding:8px 10px; font-size:12px; font-weight:700; cursor:pointer;
}
.ejel-nezet button.on{ border-color:var(--green-600); color:var(--green-700); background:var(--green-100); }
.ejel-chip{ margin-left:auto; font-size:10.5px; font-weight:700; color:var(--green-700); white-space:nowrap; }
.ejel-chip.nem{ color:#D9534F; }
.ce-mod.cel{ background:#FEF3C7; color:#92400E; }
.ce-tabla{ color:#92400E; font-weight:700; text-decoration:none; }
.ce-tabla:hover{ text-decoration:underline; }

/*  Toborzás — mi lett a találkozóval  */
.hr-eredmeny{ display:flex; flex-direction:column; gap:9px; }
.hr-eredmeny button{
  display:flex; align-items:center; gap:13px; width:100%;
  border:1.5px solid var(--line); background:var(--surface);
  border-radius:15px; padding:14px 16px; cursor:pointer;
  font-family:inherit; text-align:left;
  transition:border-color .16s ease, background .16s ease;
}
.hr-eredmeny button:hover{ border-color:var(--green-500); background:var(--green-50,#F1F8F3); }
.hr-eredmeny span{ font-size:22px; flex-shrink:0; }
.hr-eredmeny b{ display:block; font-size:14px; color:var(--ink); }
.hr-eredmeny small{ display:block; font-size:11.5px; color:var(--muted); margin-top:2px; }

/*  Ajánlói oldal — beérkezett ajánlások  */
/*  Az ajánlás egy teljes szélességű kártya: fejléc, alatta az ajánlottak,
    az üzenet és a gombok — nem egy sorba préselve, mint a kérdőív-válaszok  */
.kiv-valasz.aj-sor{ flex-direction:column; align-items:stretch; gap:0; }
.aj-sor .kiv-v-fej{ flex:none; }
.aj-sor .kiv-v-gombok{ justify-content:flex-end; }
.aj-ember > button{ flex-shrink:0; width:auto; white-space:nowrap; }
.aj-emberek{ display:flex; flex-direction:column; gap:7px; margin:10px 0; }
.aj-ember{
  display:flex; align-items:center; gap:12px;
  background:var(--bg); border-radius:13px; padding:10px 13px;
}
.aj-ember > div{ flex:1; min-width:0; }
.aj-ember b{ display:block; font-size:13.5px; }
.aj-ember a{
  display:inline-block; font-size:12px; color:var(--green-700);
  text-decoration:none; margin-top:2px;
}
.aj-ember a:hover{ text-decoration:underline; }
.aj-ember span{ display:block; font-size:11.5px; color:var(--muted); margin-top:3px; line-height:1.5; }
.aj-uzenet{
  background:var(--jelzes-sarga); color:var(--jelzes-sarga-ink);
  border-radius:12px; padding:10px 13px; font-size:12.5px;
  line-height:1.6; margin-bottom:10px;
}

/*  Bejelentkezés — emlékezz rám  */
.login-emlekezz{
  display:flex; align-items:center; gap:9px;
  font-size:13px; color:var(--muted); cursor:pointer;
  margin:2px 0 14px;
}
.login-emlekezz input{ accent-color:var(--green-600); width:17px; height:17px; margin:0; }
.login-emlekezz:hover span{ color:var(--ink); }

/*  Szerződés — banki specialista kiemelése  */
.ctr-spec-kiemelt input{
  border-color:var(--green-500) !important;
  background:var(--green-50,#F1F8F3) !important;
}
.ctr-spec-kiemelt label{ color:var(--green-700); }

/* ══════════════════════════════════════════════════════════════
   KANBAN — oszlopok mozgatása
   A fejlécet megfogva az egész oszlop áthúzható.
   ══════════════════════════════════════════════════════════════ */
.kb-col-head{ cursor:grab; }
.kb-col-head:active{ cursor:grabbing; }
.kb-col-fogo{
  color:var(--halvany,#93A29A); font-size:13px; line-height:1;
  letter-spacing:-1px; margin-right:2px; opacity:0;
  transition:opacity .16s ease;
}
.kb-col:hover .kb-col-fogo{ opacity:1; }

.kb-col.kb-col-huzva{ opacity:.4; }

/*  A beszúrás helyét vastag vonal jelzi  */
.kb-col.col-left{ box-shadow:inset 4px 0 0 var(--green-600); }
.kb-col.col-right{ box-shadow:inset -4px 0 0 var(--green-600); }

/*  A cím kijelölése ne induljon el húzás közben  */
.kb-col-head .kb-col-title{ user-select:none; }

/*  Üzenőfal — kik lájkolták  */
.feed-likek{
  font-size:11.5px; color:var(--muted); cursor:pointer;
  border-bottom:1px dashed var(--line);
  transition:color .16s ease, border-color .16s ease;
}
.feed-likek:hover{ color:var(--green-700); border-color:var(--green-500); }

/* ══════════════════════════════════════════════════════════════
   AJÁNLÓI LINK az ügyfélkártyán
   ══════════════════════════════════════════════════════════════ */
.ref-doboz{
  border:1px solid var(--line); border-radius:16px;
  padding:15px 17px; background:var(--bg);
}
.ref-doboz.halvany{ font-size:12px; color:var(--muted); line-height:1.6; }
.ref-fej{ display:flex; align-items:flex-start; gap:12px; }
.ref-fej > span:first-child{ font-size:19px; line-height:1.2; }
.ref-fej b{ display:block; font-size:13.5px; }
.ref-fej > div > span{
  display:block; font-size:11.5px; color:var(--muted);
  margin-top:3px; line-height:1.55;
}
.ref-kod{
  font-family:var(--betu-szam, monospace); font-size:14px; font-weight:700;
  letter-spacing:.1em; color:var(--green-700);
  background:var(--green-100); border-radius:9px; padding:4px 11px;
  margin-left:auto; flex-shrink:0;
}
.ref-url{
  font-size:11.5px; color:var(--muted); word-break:break-all;
  background:var(--surface); border:1px solid var(--line);
  border-radius:10px; padding:9px 12px; margin:11px 0;
}
.ref-gombok{ display:flex; gap:7px; flex-wrap:wrap; }

.ref-erkezett{
  margin-top:12px; border:1px solid var(--line);
  border-radius:16px; padding:13px 15px; background:var(--surface);
}
.ref-erkezett-fej{
  font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; color:var(--green-700); margin-bottom:9px;
}
.ref-sor{
  display:flex; align-items:center; gap:10px;
  padding:7px 0; border-top:1px solid var(--line); font-size:13px;
}
.ref-sor:first-of-type{ border-top:none; }
.ref-sor > span:first-child{ flex:1; font-weight:600; }
.ref-sor small{ font-size:11px; color:var(--muted); }
.ref-jut{
  font-size:10.5px; font-weight:700; border-radius:999px;
  padding:3px 10px; cursor:pointer; white-space:nowrap;
  background:var(--bg); color:var(--muted);
  transition:filter .14s ease;
}
.ref-jut:hover{ filter:brightness(.94); }
.ref-jut.jar{ background:var(--jelzes-sarga); color:var(--jelzes-sarga-ink); }
.ref-jut.kiadva{ background:var(--jelzes-zold); color:var(--jelzes-zold-ink); }

/* ══════════════════════════════════════════════════════════════
   VESZTESÉGI TÖLCSÉR — hol vesztjük el az ügyfeleket
   ══════════════════════════════════════════════════════════════ */
.veszt-lista{ display:flex; flex-direction:column; gap:9px; }
.veszt-sor{
  display:grid; grid-template-columns:150px 1fr 44px 44px;
  align-items:center; gap:12px;
}
@media (max-width:640px){
  .veszt-sor{ grid-template-columns:110px 1fr 38px 38px; gap:8px; }
}
.veszt-cimke{
  font-size:12.5px; font-weight:600; text-align:right;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.veszt-sav{
  height:22px; background:var(--bg); border-radius:7px; overflow:hidden;
}
.veszt-sav span{
  display:block; height:100%; border-radius:7px;
  transition:width .6s cubic-bezier(.2,.8,.2,1);
}
.veszt-db{
  font-family:var(--betu-cim); font-size:14px; font-weight:700; text-align:right;
}
.veszt-pct{ font-size:11.5px; color:var(--muted); text-align:right; }
.veszt-sor.fo .veszt-cimke{ color:var(--red); }
.veszt-sor.fo .veszt-db{ color:var(--red); }

.veszt-osszegzes{
  margin-top:14px; background:var(--jelzes-sarga); color:var(--jelzes-sarga-ink);
  border-radius:13px; padding:12px 15px; font-size:12.5px; line-height:1.65;
}

/* ══════════════════════════════════════════════════════════════════
   DOKUMENTUMTÁR
   ══════════════════════════════════════════════════════════════════ */
.dok-lap{ max-width:1080px; }

/*  Kiemelt beépített anyag  */
.dok-kiemelt{
  display:flex; align-items:center; gap:16px; cursor:pointer;
  background:linear-gradient(120deg, var(--green-50,#F0FAF4), var(--surface));
  border:1px solid var(--line); border-radius:20px; padding:18px 20px;
  margin-bottom:18px; transition:border-color .2s, transform .2s;
}
.dok-kiemelt:hover{ border-color:var(--green-600); transform:translateY(-1px); }
.dok-kiemelt-ic{
  width:48px; height:48px; border-radius:16px; background:var(--surface);
  border:1px solid var(--line); display:flex; align-items:center;
  justify-content:center; font-size:22px; flex-shrink:0;
}
.dok-kiemelt-c{ font-size:15px; font-weight:700; }
.dok-kiemelt-l{ font-size:12.5px; color:var(--muted); margin-top:2px; }
.dok-kiemelt-gomb{
  margin-left:auto; font-size:12.5px; font-weight:700;
  color:var(--green-700,#12724A); white-space:nowrap;
}

/*  Kereső + nézetváltó  */
.dok-eszkoz{ display:flex; gap:10px; align-items:center; margin-bottom:12px; }
.dok-kereso{
  flex:1; display:flex; align-items:center; gap:9px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:14px; padding:0 14px;
}
.dok-kereso span{ font-size:14px; color:var(--muted); }
.dok-kereso input{
  flex:1; border:none; background:none; outline:none;
  padding:11px 0; font-size:13.5px; color:var(--ink); font-family:inherit;
}
.dok-torol{
  display:none; border:none; background:none; cursor:pointer;
  color:var(--muted); font-size:13px; padding:4px;
}
.dok-nezet{ display:flex; gap:4px; background:var(--bg); border-radius:12px; padding:3px; }
.dok-nezet button{
  border:none; background:none; cursor:pointer; padding:7px 11px;
  border-radius:9px; font-size:14px; color:var(--muted);
}
.dok-nezet button.be{ background:var(--surface); color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.08); }

/*  Kategória-csippek  */
.dok-csippek{ display:flex; gap:7px; flex-wrap:wrap; margin-bottom:16px; }
.dok-csipp{
  display:flex; align-items:center; gap:7px; cursor:pointer;
  border:1px solid var(--line); background:var(--surface);
  border-radius:999px; padding:7px 14px; font-size:12.5px;
  font-weight:600; color:var(--ink); font-family:inherit;
}
.dok-csipp span{
  font-size:11px; font-weight:700; color:var(--muted);
  background:var(--bg); border-radius:8px; padding:1px 7px;
}
.dok-csipp.be{ background:var(--green-700,#12724A); color:#fff; border-color:transparent; }
.dok-csipp.be span{ background:rgba(255,255,255,.22); color:#fff; }

/*  Dokumentumkártyák  */
.dok-racs{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:12px; }
.dok-lista{ display:flex; flex-direction:column; gap:8px; }
.dok-kartya{
  display:flex; align-items:center; gap:13px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:18px; padding:14px 16px; transition:border-color .2s, box-shadow .2s;
}
.dok-kartya:hover{ border-color:var(--green-600); box-shadow:0 4px 16px -8px rgba(16,24,32,.2); }
.dok-ikon{
  width:46px; height:46px; border-radius:14px; flex-shrink:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
}
.dok-ikon span{ font-size:17px; line-height:1; }
.dok-ikon b{ font-size:8px; font-weight:800; letter-spacing:.04em; }
.dok-tx{ flex:1; min-width:0; }
.dok-c{
  font-size:13.5px; font-weight:700; line-height:1.35;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.dok-meta{
  display:flex; gap:8px; flex-wrap:wrap; align-items:center;
  font-size:11px; color:var(--muted); margin-top:4px;
}
.dok-kat{
  background:var(--green-50,#F0FAF4); color:var(--green-700,#12724A);
  border-radius:8px; padding:2px 8px; font-weight:700;
}
.dok-muv{ display:flex; gap:6px; flex-shrink:0; }
.dok-muv .btn-secondary{ padding:6px 12px; font-size:12px; }
.dok-muv .dok-torles{ padding:6px 10px; color:var(--red); }

/*  Rács nézetben a gombok a kártya alá kerülnek  */
.dok-racs .dok-kartya{ flex-wrap:wrap; align-items:flex-start; }
.dok-racs .dok-muv{ width:100%; margin-top:4px; }
.dok-racs .dok-muv .btn-secondary{ flex:1; }
.dok-racs .dok-muv .dok-torles{ flex:0 0 auto; }

/*  Feltöltés: húzd ide  */
.dok-dobo{
  border:2px dashed var(--line); border-radius:18px; padding:28px 20px;
  text-align:center; cursor:pointer; transition:border-color .2s, background .2s;
}
.dok-dobo:hover, .dok-dobo.ra{ border-color:var(--green-600); background:var(--green-50,#F0FAF4); }
.dok-dobo-ic{ font-size:22px; color:var(--green-700,#12724A); }
.dok-dobo-c{ font-size:13.5px; font-weight:700; margin-top:6px; word-break:break-all; }
.dok-dobo-l{ font-size:11.5px; color:var(--muted); margin-top:3px; }

/*  Kódex fejezetek  */
.dok-kodex-sor{
  display:flex; align-items:center; gap:12px; cursor:pointer;
  padding:12px 14px; border-radius:14px; border:1px solid var(--line);
  margin-bottom:7px; transition:border-color .18s, background .18s;
}
.dok-kodex-sor:hover{ border-color:var(--green-600); background:var(--green-50,#F0FAF4); }
.dok-kodex-ic{ font-size:17px; }
.dok-kodex-c{ flex:1; font-size:13.5px; font-weight:600; }
.dok-kodex-ny{ color:var(--muted); font-size:17px; }

@media (max-width:640px){
  .dok-racs{ grid-template-columns:1fr; }
  .dok-eszkoz{ flex-wrap:wrap; }
}


/*  Kiemelt anyagok egymás alatt  */
.dok-kiemeltek .dok-kiemelt{ margin-bottom:10px; }
.dok-kiemeltek > #docKiemeltek:empty{ display:none; }

/*  Semmi az akadémiában ne nyúlhasson a tartalom méretére kerekítve  */

/*  Ösvény-szalag: a „hol tartasz" fejléc  */
.ak-szalag{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  background:linear-gradient(120deg, var(--green-600,#1B7A4D), var(--green-700,#146B45));
  color:#fff; border-radius:18px; padding:16px 20px; margin-bottom:22px;
}
.ak-szalag-l{ font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; opacity:.8; }
.ak-szalag-c{ font-size:16px; font-weight:800; margin-top:2px; }
.ak-szalag-sav{ flex:1; min-width:140px; height:8px; background:rgba(255,255,255,.22); border-radius:99px; overflow:hidden; }
.ak-szalag-sav>div{ height:100%; background:#FFC800; border-radius:99px; transition:width .5s; }

/*  Hibás év a dátummezőben — látszódjon, mielőtt elmentik  */
input.datum-rossz{ border-color:#D9534F !important; box-shadow:0 0 0 3px rgba(217,83,79,.12) !important; }

/* ══════════════════════════════════════════════════════════════
   DASHBOARD TELEFONON
   A hero eddig egymásra torlódott: a kis lapkák a szöveg fölé
   csúsztak, a fejléc rátakart a címre. Telefonon inkább egymás
   alá kerül minden, és a lapkák a szöveg alatt görögnek.
   ══════════════════════════════════════════════════════════════ */
@media (max-width:820px){
  /*  A hero nem próbál teljes képernyős lenni  */
  #view-dashboard .dh-hero,
  #view-dashboard.web .dh-hero{
    min-height:auto; height:auto; padding:74px 0 16px;
    display:flex; flex-direction:column;
  }

  /*  A szöveg kapjon levegőt a felső sávtól  */
  #view-dashboard .dh-szoveg,
  #view-dashboard.web.web3 .dh-szoveg{
    position:relative; margin:0 16px; padding:18px 18px 20px;
    max-width:none; border-radius:20px;
  }
  #view-dashboard .dh-focim,
  #view-dashboard.web.web3 .dh-focim{ font-size:26px; line-height:1.2; }
  #view-dashboard .dh-leiras{ font-size:14px; }

  /*  A lapkák a szöveg alá, vízszintesen görgetve  */
  #view-dashboard .dh-kartyak{
    position:static; margin:16px 0 0; padding:0 16px 6px;
    left:auto; right:auto; bottom:auto;
    overflow-x:auto; scrollbar-width:none;
  }
  #view-dashboard .dh-kartyak::-webkit-scrollbar{ display:none; }
  #view-dashboard .dh-kicsi{ width:132px; height:112px; }
  #view-dashboard .dh-kicsi.aktiv{ transform:none; }
  #view-dashboard .dh-kicsi:hover{ transform:none; }

  /*  A háttérkép ne nyúljon a szöveg alá  */
  #view-dashboard .dh-hatter{ opacity:.5; }
  #view-dashboard.web.web3 .w3-erdo{ height:280px; }

  /*  Lebegő kártyák telefonon sosem kellenek  */
  #view-dashboard .dh-lebegok, #view-dashboard .dh-lebego{ display:none !important; }
}

@media (max-width:480px){
  #view-dashboard .dh-focim,
  #view-dashboard.web.web3 .dh-focim{ font-size:23px; }
  #view-dashboard .dh-kicsi{ width:120px; height:104px; }
}

/* ══════════════════════════════════════════════════════════════
   OLDALSÁV TELEFONON
   A fiók a képernyő széléről csúszik be, tömör háttérrel. Az
   üveghatás telefonon átengedte a mögötte lévő lapot, ezért
   olvashatatlanná vált a menü.
   ══════════════════════════════════════════════════════════════ */
@media (max-width:900px){
  .sidebar{
    width:min(86vw, 320px);
    padding:calc(env(safe-area-inset-top, 0px) + 16px) 12px
            calc(env(safe-area-inset-bottom, 0px) + 16px);
    background:var(--surface);
    border-right:1px solid var(--line);
    box-shadow:0 0 60px rgba(0,0,0,.28);
  }

  /*  Az üveglap telefonon nem kell — a menü legyen tömör  */
  .sidebar .uveg-lap{ display:none; }

  /*  Nagyobb, ujjal is kényelmes menüpontok  */
  .sidebar .nav-item{
    min-height:48px; padding:12px 14px; border-radius:14px; font-size:15px;
  }
  .sidebar .nav-item svg{ width:20px; height:20px; }
  .sidebar .nav-section-label{
    font-size:11px; letter-spacing:.1em; padding:16px 14px 6px; opacity:.75;
  }

  /*  A márkasor és a felhasználó doboza is kapjon levegőt  */
  .sidebar .brand{ padding:2px 8px 14px; }
  .sidebar-user{
    position:sticky; bottom:0; margin-top:10px; padding:12px;
    background:var(--surface); border-top:1px solid var(--line);
  }

  /*  Sötétebb fátyol, hogy a menü elváljon a laptól  */
  #sidebarOverlay{ background:rgba(6,16,11,.55); backdrop-filter:blur(2px); }

  /*  Az „Elrejtés" gomb telefonon értelmetlen  */
  .sidebar .collapse-btn, .sidebar #sidebarCollapse{ display:none; }
}

/*  Telefonon nincs csak ikonos mód — a fiók mindig teljes  */
@media (max-width:900px){
  .sidebar.icon-only{ width:min(86vw, 320px); padding-left:12px; padding-right:12px; }
  .sidebar.icon-only .brand-text,
  .sidebar.icon-only .nav-section-label,
  .sidebar.icon-only .sidebar-user > div{ display:block !important; }
  .sidebar.icon-only .nav-item{ justify-content:flex-start; padding:12px 14px; }
  .sidebar.icon-only .nav-item span{ display:inline !important; }
  .sidebar.icon-only .uveg-lap{ display:none; }
}

/* ══════════════════════════════════════════════════════════════
   LENYÍLÓ PANELEK TELEFONON
   Az értesítések és az üzenetek doboza fix szélességgel jobbra
   volt igazítva, ezért kilógott a képernyőről. Telefonon inkább
   a fejléc alatt, teljes szélességben nyílik.
   ══════════════════════════════════════════════════════════════ */
@media (max-width:640px){
  #notificationsDropdown, #feedNotifDropdown{
    position:fixed !important;
    top:calc(env(safe-area-inset-top, 0px) + 62px) !important;
    left:10px !important; right:10px !important;
    width:auto !important;
    max-height:min(70vh, 560px) !important;
    border-radius:18px !important;
    box-shadow:0 24px 50px -20px rgba(0,0,0,.4) !important;
  }
  /*  A fejléc gombjai ne torlódjanak  */
  .topbar-eszkozok{ gap:6px !important; }
  .topbar-eszkozok .icon-btn{ width:38px; height:38px; }
  #notifMarkAllBtn{ font-size:11px; padding:6px 11px; }
}

/* ══════════════════════════════════════════════════════════════
   KÖSZÖNTŐ SÁV
   Egy sor a hero fölött: bal oldalt a név, jobbra a mai számok.
   Korábban két helyen is szerepelt ugyanaz — ez maradt.
   ══════════════════════════════════════════════════════════════ */
.dh-koszonto{
  display:flex; align-items:flex-end; gap:20px; flex-wrap:wrap;
  max-width:1500px; margin:0 auto 14px; padding:22px 24px 0;
}
/*  Saját nevek: a .dh-k-* előtag a hero kis lapkáié, azt nem
    szabad átvenni — attól nőttek meg a lapkák feliratai.  */
.dh-uv-bal{ flex:1; min-width:220px; }
.dh-uv-kalap{
  display:block; font:600 10.5px var(--betu-alap, inherit); letter-spacing:.14em;
  text-transform:uppercase; color:var(--green-600);
}
.dh-uv-cim{
  margin:6px 0 0; font-family:var(--betu-cim); font-size:clamp(22px, 2.4vw, 32px);
  font-weight:700; letter-spacing:-.02em; color:var(--ink);
}
.dh-uv-savok{ display:flex; gap:8px; flex-wrap:wrap; padding-bottom:4px; }
.dh-uv-sav{
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 13px; border-radius:999px; background:var(--surface);
  border:1px solid var(--line); font-size:12px; color:var(--muted);
}
.dh-uv-sav b{ font-family:var(--betu-cim); font-size:13.5px; color:var(--ink); }

@media (max-width:820px){
  .dh-koszonto{ padding:16px 16px 0; margin-bottom:10px; gap:12px; }
  .dh-uv-cim{ font-size:21px; }
  .dh-uv-savok{ width:100%; }
  .dh-uv-sav{ flex:1; justify-content:center; padding:7px 10px; }
}

/*  Kérdőív-kitöltés törlése — halkan, de elérhetően  */
.kiv-torol{
  padding:6px 10px !important; font-size:12px !important;
  color:var(--muted);
}
.kiv-torol:hover{ color:#D9534F; border-color:rgba(217,83,79,.4); }

/*  Struktúrafa — akadémia-állapot a kártyán  */
.ot-akad{ display:flex; gap:5px; justify-content:center; flex-wrap:wrap; margin-top:6px; }
.ot-akad span{
  font-size:10px; font-weight:700; padding:2px 7px; border-radius:6px;
  background:var(--bg); color:var(--muted); border:1px solid var(--line);
}
.ot-akad .ot-cs{ background:var(--green-100); color:var(--green-700); border-color:transparent; }
.ot-akad .ot-ha.kesz, .ot-akad .ot-tr.kesz{
  background:rgba(46,149,99,.14); color:var(--green-700); border-color:rgba(46,149,99,.35);
}

/* ══════════════════════════════════════════════════════════════
   SÖTÉT MÓD — halvány kiemelések
   Több helyen beégetett világos árnyalat volt a hover, ami sötét
   háttéren kivilágított. Ezek helyett a szöveg színéből számolt,
   alig látható réteg kerül rá.
   ══════════════════════════════════════════════════════════════ */
[data-theme="dark"] .tk-row:hover,
[data-theme="dark"] .cc-table tr.cc-row:hover,
[data-theme="dark"] tbody tr:hover,
[data-theme="dark"] .kalk-tabla tr:hover td,
[data-theme="dark"] .cal-month-cell:hover,
[data-theme="dark"] .cal-mini-day:hover,
[data-theme="dark"] .kodex-head:hover,
[data-theme="dark"] .honap-szerk:hover{
  background:rgba(255,255,255,.05);
}

[data-theme="dark"] .nav-item:hover,
[data-theme="dark"] .icon-btn:hover,
[data-theme="dark"] .btn-secondary:hover,
[data-theme="dark"] .tk-qa button:hover,
[data-theme="dark"] .tk-search-x:hover,
[data-theme="dark"] .tf-chips button:hover,
[data-theme="dark"] .sidebar.icon-only .nav-section-label:hover{
  background:rgba(46,149,99,.14);
  color:var(--ink);
}

[data-theme="dark"] .kb-add:hover,
[data-theme="dark"] .kb-new-col:hover{
  background:rgba(46,149,99,.1);
}

/*  Kiválasztott és kiemelt sorok is halkabbak  */
[data-theme="dark"] .tk-row.tk-picked{ background:rgba(46,149,99,.12); }

/* ══════════════════════════════════════════════════════════════
   AI KÖZPONT — Ma fül és csapatválasztó
   ══════════════════════════════════════════════════════════════ */
.cc-tab b{ font-size:10.5px; padding:1px 7px; border-radius:7px;
  background:rgba(196,68,63,.12); color:#C4443F; margin-left:6px; }
.cc-tab b:empty{ display:none; }

.cc-szamok{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:11px; margin-bottom:14px; }
.cc-szam{ background:var(--surface); border:1px solid var(--line); border-radius:16px;
  padding:15px; box-shadow:var(--shadow-sm); }
.cc-szam b{ display:block; font-family:var(--betu-cim); font-size:24px; font-weight:700;
  letter-spacing:-.02em; }
.cc-szam span{ font-size:11.5px; color:var(--muted); }
.cc-szam.baj{ border-color:rgba(196,68,63,.3); }
.cc-szam.baj b{ color:#C4443F; }

.cc-teendo{ display:flex; align-items:flex-start; gap:13px; padding:15px 0;
  border-top:1px solid var(--line); }
.cc-teendo:first-child{ border-top:0; }
.cc-rang{ width:28px; height:28px; display:grid; place-items:center; flex:none;
  font-family:var(--betu-cim); font-size:12px; font-weight:800;
  color:var(--muted); background:var(--green-50);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); }
.cc-teendo.elso .cc-rang{ background:linear-gradient(160deg,var(--green-600),var(--green-500));
  color:#fff; }
.cc-t{ flex:1; min-width:0; }
.cc-t b{ display:block; font-size:14px; font-weight:600; }
.cc-t em{ display:block; font-style:normal; font-size:11.5px; color:var(--muted); margin-top:3px; }
.cc-miert{ display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.cc-miert span{ font-size:10.5px; padding:3px 9px; border-radius:8px;
  background:var(--bg); color:var(--muted); border:1px solid var(--line); }
.cc-gombok{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; }

.cc-valaszto{ position:relative; margin-left:auto; }
.cc-csapat{ border:1px solid var(--line); background:var(--surface); color:var(--ink);
  border-radius:999px; padding:8px 15px; font-size:12.5px; font-weight:600; cursor:pointer; }
.cc-csapat:hover{ border-color:var(--green-500); }
.cc-legordul{ position:absolute; right:0; top:calc(100% + 8px); z-index:30;
  width:min(330px, 86vw); background:var(--surface); border:1px solid var(--line);
  border-radius:16px; padding:10px; box-shadow:var(--shadow-md); display:none; }
.cc-legordul.on{ display:block; }
.cc-kereso{ display:flex; align-items:center; gap:9px; padding:0 12px; margin-bottom:8px;
  border-radius:999px; background:var(--bg); border:1.5px solid transparent; }
.cc-kereso:focus-within{ border-color:var(--green-500); background:var(--surface); }
.cc-kereso svg{ width:16px; height:16px; color:var(--muted); flex:none; }
.cc-kereso input{ flex:1; border:0; background:none; outline:none; padding:10px 0;
  font-size:13px; color:var(--ink); }
.cc-lgtest{ max-height:min(52vh,360px); overflow-y:auto; }
.cc-lgcimke{ font-size:10px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); padding:10px 10px 5px; }
.cc-lgsor{ display:flex; align-items:center; gap:10px; width:100%; border:0; background:none;
  cursor:pointer; padding:9px 10px; border-radius:12px; text-align:left; color:var(--ink);
  font-family:inherit; }
.cc-lgsor:hover{ background:var(--green-50); }
.cc-lgsor.on{ background:var(--green-100); }
.cc-lgsor .t{ flex:1; min-width:0; }
.cc-lgsor .t b{ display:block; font-size:13px; font-weight:600; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; }
.cc-lgsor .t em{ display:block; font-style:normal; font-size:11px; color:var(--muted); margin-top:1px; }
.cc-lgsor .db{ font-family:var(--betu-cim); font-size:11.5px; font-weight:700; color:var(--muted); }
.cc-av{ width:28px; height:28px; display:grid; place-items:center; flex:none;
  background:linear-gradient(150deg,var(--green-600),var(--green-500)); color:#fff;
  font-family:var(--betu-cim); font-size:10px; font-weight:800;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); }
.cc-lgures{ padding:16px 10px; text-align:center; font-size:12.5px; color:var(--muted); }

@media (max-width:700px){
  .cc-valaszto{ margin-left:0; width:100%; }
  .cc-csapat{ width:100%; }
  .cc-legordul{ left:0; right:0; width:auto; }
}

/* ══════════════════════════════════════════════════════════════
   AI KÖZPONT — soros nézet (egy sor = egy ember)
   ══════════════════════════════════════════════════════════════ */
.ccs-tabla{ background:var(--surface); border:1px solid var(--line);
  border-radius:16px; padding:6px 14px 10px; overflow-x:auto; }
.ccs-fej, .ccs-sor{
  display:grid; grid-template-columns:minmax(190px,2fr) repeat(6, minmax(78px,1fr)) minmax(120px,1.2fr);
  gap:10px; align-items:center; min-width:960px;
}
.ccs-fej{ font-size:10.5px; font-weight:600; letter-spacing:.07em; text-transform:uppercase;
  color:var(--muted); padding:10px 4px 8px; border-bottom:1px solid var(--line); }
.ccs-fej span:not(:first-child){ text-align:center; }
.ccs-sor{ padding:11px 4px; border-top:1px solid var(--line); cursor:pointer;
  border-radius:10px; transition:background .12s; }
.ccs-sor:first-of-type{ border-top:0; }
.ccs-sor:hover{ background:color-mix(in srgb, var(--ink) 4%, transparent); }
.ccs-ki{ display:flex; align-items:center; gap:10px; min-width:0; }
.ccs-av{ width:34px; height:34px; flex:none; display:grid; place-items:center; object-fit:cover;
  background:linear-gradient(150deg,var(--green-600),var(--green-500)); color:#fff;
  font-family:var(--betu-cim); font-size:11px; font-weight:800;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); }
.ccs-ki b{ display:block; font-size:13.5px; font-weight:600; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; }
.ccs-ki em{ display:block; font-style:normal; font-size:11px; color:var(--muted); margin-top:2px; }
.ccs-mero{ text-align:center; font-family:var(--betu-cim); font-size:14px; font-weight:700; }
.ccs-mero small{ display:block; font-family:var(--betu-szoveg); font-size:9.5px; font-weight:400;
  color:var(--muted); margin-top:3px; }
.ccs-mero.baj{ color:#C4443F; }
.ccs-mero.jo{ color:var(--green-700); }
.ccs-sav{ display:block; height:4px; border-radius:99px; background:var(--bg);
  overflow:hidden; margin-top:5px; }
.ccs-sav i{ display:block; height:100%; border-radius:99px;
  background:linear-gradient(90deg,var(--green-600),var(--green-500)); }
.ccs-allapot{ text-align:center; }
.ccs-allapot small{ display:block; font-size:9.5px; color:var(--muted); margin-top:4px; }
.ccs-cimke{ display:inline-block; padding:3px 10px; border-radius:999px;
  font-family:var(--betu-cim); font-size:10.5px; font-weight:700; }
.ccs-cimke.red, .ccs-cimke.critical{ background:rgba(196,68,63,.12); color:#C4443F; }
.ccs-cimke.orange, .ccs-cimke.warn{ background:rgba(201,138,18,.16); color:#8A5E0C; }
.ccs-cimke.yellow{ background:rgba(224,182,92,.2); color:#8A5E0C; }
.ccs-cimke.green, .ccs-cimke.good{ background:rgba(46,149,99,.14); color:var(--green-700); }
[data-theme="dark"] .ccs-sor:hover{ background:rgba(255,255,255,.05); }

/* ══════════════════════════════════════════════════════════════
   AI KÖZPONT — új felület
   ══════════════════════════════════════════════════════════════ */
.ak-fej{ display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:18px; }
.ak-fej h1{ font-family:var(--betu-cim); font-size:26px; font-weight:700; letter-spacing:-.02em; margin:0; }
.ak-fej p{ font-size:13px; color:var(--muted); margin:5px 0 0; }

.ak-fulek{ display:flex; gap:5px; flex-wrap:wrap; margin-bottom:18px; padding:5px;
  border:1px solid var(--line); border-radius:999px; background:var(--surface); width:max-content; max-width:100%; }
.ak-ful{ border:0; background:none; padding:10px 18px; cursor:pointer; border-radius:999px;
  font-family:var(--betu-cim); font-size:13px; font-weight:600; color:var(--muted);
  display:flex; align-items:center; gap:8px; transition:.18s; }
.ak-ful:hover{ color:var(--ink); }
.ak-ful.active{ color:#fff; background:linear-gradient(120deg,var(--green-700),var(--green-500));
  box-shadow:0 10px 24px -14px rgba(27,122,77,.9); }
.ak-ful b{ font-size:10px; padding:2px 7px; border-radius:7px;
  background:rgba(196,68,63,.12); color:#C4443F; }
.ak-ful b:empty{ display:none; }
.ak-ful.active b{ background:rgba(255,255,255,.22); color:#fff; }
.ak-pane{ display:none; }
.ak-pane.active{ display:block; animation:akBe .25s ease; }
@keyframes akBe{ from{ opacity:0; transform:translateY(8px); } }

.ak-szamok{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:11px; margin-bottom:14px; }
.ak-szam{ background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:15px; }
.ak-szam b{ display:block; font-family:var(--betu-cim); font-size:23px; font-weight:700; letter-spacing:-.02em; }
.ak-szam span{ font-size:11.5px; color:var(--muted); }
.ak-szam.baj{ border-color:rgba(196,68,63,.3); } .ak-szam.baj b{ color:#C4443F; }
.ak-szam.jo b{ color:var(--green-700); }

.ak-teendo{ display:flex; align-items:flex-start; gap:13px; padding:15px 0; border-top:1px solid var(--line); }
.ak-teendo:first-child{ border-top:0; }
.ak-rang{ width:28px; height:28px; display:grid; place-items:center; flex:none;
  font-family:var(--betu-cim); font-size:12px; font-weight:800; color:var(--muted);
  background:var(--green-50); clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); }
.ak-teendo.elso .ak-rang{ background:linear-gradient(160deg,var(--green-600),var(--green-500)); color:#fff; }
.ak-t{ flex:1; min-width:0; }
.ak-t b{ display:block; font-size:14px; font-weight:600; }
.ak-t em{ display:block; font-style:normal; font-size:11.5px; color:var(--muted); margin-top:3px; }
.ak-miert{ display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.ak-miert span{ font-size:10.5px; padding:3px 9px; border-radius:8px;
  background:var(--bg); color:var(--muted); border:1px solid var(--line); }
.ak-gombok{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; }

.ak-chip{ border:1px solid var(--line); background:var(--surface); border-radius:999px;
  padding:7px 14px; cursor:pointer; font-size:12.5px; font-weight:600; color:var(--muted); }
.ak-chip:hover{ color:var(--ink); border-color:var(--green-500); }
.ak-chip.active{ background:var(--green-700); color:#fff; border-color:transparent; }
.ak-alfulek{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; }

.ak-sorkereso{ display:flex; align-items:center; gap:9px; padding:0 14px; margin-bottom:12px;
  border-radius:999px; background:var(--bg); border:1.5px solid transparent; }
.ak-sorkereso:focus-within{ border-color:var(--green-500); background:var(--surface); }
.ak-sorkereso svg{ width:16px; height:16px; color:var(--muted); flex:none; }
.ak-sorkereso input{ flex:1; border:0; background:none; outline:none; padding:10px 0;
  font-size:13.5px; color:var(--ink); }

.ak-tabla{ overflow-x:auto; }
.ak-fej-sor, .ak-sor{ display:grid;
  grid-template-columns:minmax(190px,2fr) repeat(6, minmax(76px,1fr)) minmax(100px,1fr);
  gap:10px; align-items:center; min-width:940px; }
.ak-fej-sor.forras, .ak-sor.forras{ grid-template-columns:minmax(170px,2fr) repeat(5, minmax(80px,1fr)); min-width:760px; }
.ak-fej-sor.lead, .ak-sor.lead{ grid-template-columns:minmax(190px,2fr) repeat(4, minmax(90px,1fr)); min-width:700px; }
.ak-fej-sor.ajanlas, .ak-sor.ajanlas{ grid-template-columns:minmax(190px,2fr) repeat(3, minmax(100px,1fr)); min-width:620px; }
.ak-fej-sor.sztenderd, .ak-sor.sztenderd{ grid-template-columns:minmax(190px,2fr) repeat(3, minmax(120px,1fr)); min-width:680px; }
.ak-fej-sor.megtartas, .ak-sor.megtartas{ grid-template-columns:minmax(220px,3fr) minmax(90px,1fr); min-width:0; }
.ak-fej-sor{ font-size:10.5px; font-weight:600; letter-spacing:.07em; text-transform:uppercase;
  color:var(--muted); padding:8px 4px; border-bottom:1px solid var(--line); }
.ak-fej-sor span:not(:first-child){ text-align:center; }
.ak-sor{ padding:11px 4px; border-top:1px solid var(--line); cursor:pointer;
  border-radius:10px; transition:background .12s; }
.ak-sor:hover{ background:color-mix(in srgb, var(--ink) 4%, transparent); }
.ak-ki{ display:flex; align-items:center; gap:10px; min-width:0; }
.ak-av{ width:34px; height:34px; flex:none; display:grid; place-items:center; object-fit:cover;
  background:linear-gradient(150deg,var(--green-600),var(--green-500)); color:#fff;
  font-family:var(--betu-cim); font-size:11px; font-weight:800;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); }
.ak-av.kicsi{ width:27px; height:27px; font-size:10px; }
.ak-ki b{ display:block; font-size:13.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ak-ki em{ display:block; font-style:normal; font-size:11px; color:var(--muted); margin-top:2px; }
.ak-mero{ text-align:center; font-family:var(--betu-cim); font-size:14px; font-weight:700; }
.ak-mero small{ display:block; font-family:var(--betu-szoveg); font-size:9.5px; font-weight:400;
  color:var(--muted); margin-top:3px; }
.ak-mero.baj{ color:#C4443F; } .ak-mero.jo{ color:var(--green-700); }
.ak-sav{ display:block; height:4px; border-radius:99px; background:var(--bg); overflow:hidden; margin-top:5px; }
.ak-sav i{ display:block; height:100%; border-radius:99px;
  background:linear-gradient(90deg,var(--green-600),var(--green-500)); }
.ak-allapot{ text-align:center; }
.ak-cimke{ display:inline-block; padding:3px 10px; border-radius:999px;
  font-family:var(--betu-cim); font-size:10.5px; font-weight:700; }
.ak-cimke.piros{ background:rgba(196,68,63,.12); color:#C4443F; }
.ak-cimke.sarga{ background:rgba(201,138,18,.16); color:#8A5E0C; }
.ak-cimke.okker{ background:rgba(224,182,92,.2); color:#8A5E0C; }
.ak-cimke.zold{ background:rgba(46,149,99,.14); color:var(--green-700); }

.ak-tolcser{ display:flex; flex-direction:column; gap:9px; }
.ak-lepcso{ display:flex; align-items:center; gap:12px; }
.ak-lepcso .nev{ width:150px; font-size:12.5px; font-weight:600; }
.ak-lepcso .rud{ flex:1; height:32px; border-radius:11px; background:var(--bg);
  overflow:hidden; border:1px solid var(--line); }
.ak-lepcso .rud i{ display:block; height:100%;
  background:linear-gradient(90deg,var(--green-700),var(--green-500));
  animation:akNo 1s cubic-bezier(.2,.8,.2,1) both; }
@keyframes akNo{ from{ width:0 !important; } }
.ak-lepcso .db{ width:130px; text-align:right; font-family:var(--betu-cim); font-size:14px; font-weight:700; }
.ak-lepcso .db small{ display:block; font-family:var(--betu-szoveg); font-size:10.5px;
  font-weight:400; color:var(--muted); margin-top:2px; }
.ak-veszt{ display:flex; align-items:center; gap:10px; padding:11px 0;
  border-top:1px solid var(--line); font-size:12.5px; }
.ak-veszt .n{ flex:1; color:var(--muted); }
.ak-veszt .e{ font-family:var(--betu-cim); font-size:13.5px; font-weight:700; color:#C4443F; }

.ak-info{ display:flex; gap:12px; padding:14px 16px; border-radius:16px; margin-top:14px;
  background:var(--green-50); border:1px solid var(--green-100);
  font-size:12.5px; color:var(--muted); line-height:1.6; }
.ak-info b{ color:var(--ink); }

.ak-valaszto{ position:relative; margin-left:auto; }
.ak-csapatgomb{ border:1px solid var(--line); background:var(--surface); color:var(--ink);
  border-radius:999px; padding:9px 16px; font-size:12.5px; font-weight:600; cursor:pointer; }
.ak-csapatgomb:hover{ border-color:var(--green-500); }
.ak-legordul{ position:absolute; right:0; top:calc(100% + 8px); z-index:30;
  width:min(330px,86vw); background:var(--surface); border:1px solid var(--line);
  border-radius:16px; padding:10px; box-shadow:var(--shadow-md); display:none; }
.ak-legordul.on{ display:block; }
.ak-kereso{ display:flex; align-items:center; gap:9px; padding:0 12px; margin-bottom:8px;
  border-radius:999px; background:var(--bg); border:1.5px solid transparent; }
.ak-kereso:focus-within{ border-color:var(--green-500); background:var(--surface); }
.ak-kereso svg{ width:16px; height:16px; color:var(--muted); flex:none; }
.ak-kereso input{ flex:1; border:0; background:none; outline:none; padding:10px 0;
  font-size:13px; color:var(--ink); }
.ak-lgtest{ max-height:min(52vh,360px); overflow-y:auto; }
.ak-lgcimke{ font-size:10px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); padding:10px 10px 5px; }
.ak-lgsor{ display:flex; align-items:center; gap:10px; width:100%; border:0; background:none;
  cursor:pointer; padding:9px 10px; border-radius:12px; text-align:left; color:var(--ink); font-family:inherit; }
.ak-lgsor:hover{ background:var(--green-50); }
.ak-lgsor.on{ background:var(--green-100); }
.ak-lgsor .t{ flex:1; min-width:0; }
.ak-lgsor .t b{ display:block; font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ak-lgsor .t em{ display:block; font-style:normal; font-size:11px; color:var(--muted); margin-top:1px; }
.ak-lgsor .db{ font-family:var(--betu-cim); font-size:11.5px; font-weight:700; color:var(--muted); }
.ak-lgures{ padding:16px 10px; text-align:center; font-size:12.5px; color:var(--muted); }

[data-theme="dark"] .ak-sor:hover{ background:rgba(255,255,255,.05); }
[data-theme="dark"] .ak-info{ background:rgba(46,149,99,.08); border-color:rgba(46,149,99,.2); }

@media (max-width:700px){
  .ak-valaszto{ margin-left:0; width:100%; }
  .ak-csapatgomb{ width:100%; }
  .ak-legordul{ left:0; right:0; width:auto; }
  .ak-fulek{ width:100%; overflow-x:auto; flex-wrap:nowrap; }
  .ak-ful{ flex:none; white-space:nowrap; }
}

/* ══════════════════════════════════════════════════════════════
   MUNKATÁRS MENEDZSMENT — web3 felület
   Élő háttér, üvegkártyák, pirula-fülek. A funkciók ugyanazok,
   csak a szerkezet lett átláthatóbb.
   ══════════════════════════════════════════════════════════════ */
.emb-web3{ position:relative; isolation:isolate; }

.emb-aurora, .emb-racs{ position:absolute; inset:-40px -20px auto; height:520px;
  z-index:0; pointer-events:none; overflow:hidden; }
.emb-aurora i{ position:absolute; display:block; border-radius:50%; filter:blur(90px); opacity:.3; }
.emb-aurora i:nth-child(1){ width:46vw; height:46vw; left:-10vw; top:-16vw;
  background:radial-gradient(circle, rgba(46,149,99,.5), transparent 65%); }
.emb-aurora i:nth-child(2){ width:38vw; height:38vw; right:-8vw; top:2vw;
  background:radial-gradient(circle, rgba(78,168,255,.34), transparent 65%); }
.emb-aurora i:nth-child(3){ width:30vw; height:30vw; left:34vw; top:8vw;
  background:radial-gradient(circle, rgba(124,240,180,.32), transparent 68%); }
.emb-racs{
  background-image:linear-gradient(rgba(46,149,99,.07) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(46,149,99,.07) 1px, transparent 1px);
  background-size:58px 58px;
  mask-image:radial-gradient(ellipse at 50% 0%, #000 18%, transparent 74%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 0%, #000 18%, transparent 74%);
}
[data-theme="dark"] .emb-aurora i{ opacity:.36; }

.emb-fej{ position:relative; z-index:1; display:flex; align-items:center; gap:16px;
  flex-wrap:wrap; margin-bottom:20px; }
.emb-ikon{ width:52px; height:52px; flex:none; display:grid; place-items:center;
  color:#fff; background:linear-gradient(150deg, var(--green-700), var(--green-500));
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  box-shadow:0 14px 30px -16px rgba(27,122,77,.9); }
.emb-ikon svg{ width:24px; height:24px; }
.emb-cim h1{ font-family:var(--betu-cim); font-size:26px; font-weight:700;
  letter-spacing:-.02em; margin:0;
  background:linear-gradient(100deg, var(--green-900), var(--green-500) 60%, #2563EB);
  -webkit-background-clip:text; background-clip:text; color:transparent; }
[data-theme="dark"] .emb-cim h1{
  background:linear-gradient(100deg, #fff, #7CF0B4 60%, #8CC7FF);
  -webkit-background-clip:text; background-clip:text; }
.emb-cim p{ font-size:13px; color:var(--muted); margin:4px 0 0; }

.emb-kpi{ margin-left:auto; display:flex; gap:10px; flex-wrap:wrap; }
.emb-kpi-elem{ min-width:118px; padding:12px 15px; border-radius:16px;
  background:color-mix(in srgb, var(--surface) 82%, transparent);
  border:1px solid var(--line); backdrop-filter:blur(14px);
  box-shadow:0 16px 34px -28px rgba(20,60,40,.7); }
.emb-kpi-elem b{ display:block; font-family:var(--betu-cim); font-size:21px; font-weight:700;
  letter-spacing:-.02em; }
.emb-kpi-elem span{ font-size:11px; color:var(--muted); }
.emb-kpi-elem.kiemelt{ border-color:var(--green-500); }
.emb-kpi-elem.kiemelt b{ color:var(--green-700); }

.emb-fulek{ position:relative; z-index:1; display:flex; gap:5px; flex-wrap:wrap;
  margin-bottom:20px; padding:5px; width:max-content; max-width:100%;
  border:1px solid var(--line); border-radius:999px;
  background:color-mix(in srgb, var(--surface) 84%, transparent); backdrop-filter:blur(14px); }
.empTabBtn{ display:flex; align-items:center; gap:8px; border:0; background:none;
  padding:10px 17px; border-radius:999px; cursor:pointer;
  font-family:var(--betu-cim); font-size:13px; font-weight:600; color:var(--muted);
  transition:.18s; white-space:nowrap; }
.empTabBtn:hover{ color:var(--ink); }
.empTabBtn.on{ color:#fff;
  background:linear-gradient(120deg, var(--green-700), var(--green-500));
  box-shadow:0 10px 24px -14px rgba(27,122,77,.9); }
.empTabBtn .ik{ font-size:14px; line-height:1; }
.empTabBtn b{ font-size:10px; padding:2px 7px; border-radius:7px;
  background:rgba(46,149,99,.14); color:var(--green-700); }
.empTabBtn b:empty{ display:none; }
.empTabBtn.on b{ background:rgba(255,255,255,.24); color:#fff; }

/*  A fülek tartalma is az üveg-rétegre kerül  */
.emb-web3 .emberek-pane{ position:relative; z-index:1; }
.emb-web3 .emberek-pane > .card,
.emb-web3 .emberek-pane .card{
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter:blur(14px);
}

@media (max-width:700px){
  .emb-kpi{ margin-left:0; width:100%; }
  .emb-kpi-elem{ flex:1; min-width:0; }
  .emb-fulek{ width:100%; overflow-x:auto; flex-wrap:nowrap; }
  .empTabBtn{ flex:none; }
}

/*  Munkatárs menedzsment — alfülek és új panelek  */
.emb-alfulek{ display:flex; gap:6px; flex-wrap:wrap; margin:-8px 0 18px; position:relative; z-index:1; }
.empSubBtn{ display:flex; align-items:center; gap:7px; padding:8px 15px; border-radius:999px;
  border:1px solid var(--line); background:var(--surface); cursor:pointer;
  font-size:12.5px; font-weight:600; color:var(--muted); }
.empSubBtn:hover{ color:var(--ink); border-color:var(--green-500); }
.empSubBtn.on{ background:var(--green-700); color:#fff; border-color:transparent; }
.empSubBtn b{ font-size:10px; padding:1px 6px; border-radius:6px;
  background:rgba(46,149,99,.14); color:var(--green-700); }
.empSubBtn b:empty{ display:none; }
.empSubBtn.on b{ background:rgba(255,255,255,.24); color:#fff; }

.ak-fej-sor.szerkezet, .ak-sor.szerkezet{
  grid-template-columns:minmax(200px,2fr) 110px 130px 130px; min-width:600px; }

/* ══════════════════════════════════════════════════════════════
   MUNKATÁRS MENEDZSMENT — új felület (teszt)
   ══════════════════════════════════════════════════════════════ */
.mu-web3{ position:relative; isolation:isolate; }
.mu-aurora, .mu-racs{ position:absolute; inset:-40px -20px auto; height:520px;
  z-index:0; pointer-events:none; overflow:hidden; }
.mu-aurora i{ position:absolute; display:block; border-radius:50%; filter:blur(90px); opacity:.28; }
.mu-aurora i:nth-child(1){ width:46vw; height:46vw; left:-10vw; top:-16vw;
  background:radial-gradient(circle, rgba(46,149,99,.5), transparent 65%); }
.mu-aurora i:nth-child(2){ width:38vw; height:38vw; right:-8vw; top:2vw;
  background:radial-gradient(circle, rgba(78,168,255,.34), transparent 65%); }
.mu-racs{ background-image:linear-gradient(rgba(46,149,99,.07) 1px,transparent 1px),
  linear-gradient(90deg, rgba(46,149,99,.07) 1px, transparent 1px); background-size:58px 58px;
  mask-image:radial-gradient(ellipse at 50% 0%,#000 18%,transparent 74%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 0%,#000 18%,transparent 74%); }

.mu-fej{ position:relative; z-index:1; display:flex; align-items:center; gap:16px;
  flex-wrap:wrap; margin-bottom:18px; }
.mu-hatszog{ width:52px; height:52px; flex:none; display:grid; place-items:center; color:#fff;
  background:linear-gradient(150deg,var(--green-700),var(--green-500));
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  box-shadow:0 14px 30px -16px rgba(27,122,77,.9); }
.mu-hatszog svg{ width:24px; height:24px; }
.mu-fej h1{ font-family:var(--betu-cim); font-size:26px; font-weight:700; letter-spacing:-.02em;
  margin:0; background:linear-gradient(100deg,var(--green-900),var(--green-500) 60%,#2563EB);
  -webkit-background-clip:text; background-clip:text; color:transparent; }
[data-theme="dark"] .mu-fej h1{ background:linear-gradient(100deg,#fff,#7CF0B4 60%,#8CC7FF);
  -webkit-background-clip:text; background-clip:text; }
.mu-fej p{ font-size:13px; color:var(--muted); margin:4px 0 0; }
.mu-gombok{ margin-left:auto; display:flex; gap:8px; flex-wrap:wrap; }

.mu-fulek{ position:relative; z-index:1; display:flex; gap:5px; flex-wrap:wrap; margin-bottom:14px;
  padding:5px; width:max-content; max-width:100%; border:1px solid var(--line); border-radius:999px;
  background:color-mix(in srgb, var(--surface) 84%, transparent); backdrop-filter:blur(14px); }
.mu-ful{ display:flex; align-items:center; gap:8px; border:0; background:none; padding:11px 20px;
  border-radius:999px; cursor:pointer; font-family:var(--betu-cim); font-size:13.5px; font-weight:600;
  color:var(--muted); transition:.18s; white-space:nowrap; }
.mu-ful:hover{ color:var(--ink); }
.mu-ful.on{ color:#fff; background:linear-gradient(120deg,var(--green-700),var(--green-500));
  box-shadow:0 10px 24px -14px rgba(27,122,77,.9); }
.mu-ful b{ font-size:10px; padding:2px 7px; border-radius:7px;
  background:rgba(46,149,99,.14); color:var(--green-700); }
.mu-ful.on b{ background:rgba(255,255,255,.24); color:#fff; }

.mu-alfulek{ position:relative; z-index:1; display:flex; gap:6px; flex-wrap:wrap; margin-bottom:16px; }
.mu-alful{ padding:8px 15px; border-radius:999px; border:1px solid var(--line);
  background:var(--surface); cursor:pointer; font-size:12.5px; font-weight:600; color:var(--muted); }
.mu-alful:hover{ color:var(--ink); border-color:var(--green-500); }
.mu-alful.on{ background:var(--green-700); color:#fff; border-color:transparent; }
.mu-alful-db{ display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px;
  padding:0 5px; margin-left:4px; border-radius:999px; background:#E5484D; color:#fff; font-size:10.5px; font-weight:700; }
.mu-gomb.halvany{ background:transparent; color:var(--green-700); border:1px solid var(--line); box-shadow:none; }
.mu-gomb.halvany:hover{ border-color:var(--green-500); }

.mu-web3 > div:not(.mu-aurora):not(.mu-racs){ position:relative; z-index:1; }

.mu-kpik{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:11px; margin-bottom:16px; }
.mu-kpi{ position:relative; padding:15px; border-radius:16px; overflow:hidden;
  background:color-mix(in srgb, var(--surface) 86%, transparent); border:1px solid var(--line);
  backdrop-filter:blur(14px); box-shadow:0 18px 40px -32px rgba(20,60,40,.6); }
.mu-kpi b{ display:block; font-family:var(--betu-cim); font-size:23px; font-weight:700; letter-spacing:-.02em; }
.mu-kpi span{ font-size:11.5px; color:var(--muted); }
.mu-kpi.baj b{ color:#C4443F; } .mu-kpi.jo b{ color:var(--green-700); } .mu-kpi.var b{ color:#8A5E0C; }

.mu-vezerlo{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:14px; }
.mu-kereso{ display:flex; align-items:center; gap:9px; padding:0 14px; border-radius:999px;
  background:var(--surface); border:1.5px solid var(--line); min-width:230px; flex:1; max-width:360px; }
.mu-kereso:focus-within{ border-color:var(--green-500); }
.mu-kereso svg{ width:16px; height:16px; color:var(--muted); flex:none; }
.mu-kereso input{ flex:1; border:0; background:none; outline:none; padding:11px 0;
  font-size:13.5px; color:var(--ink); }
.mu-szuro{ padding:9px 13px; border-radius:12px; border:1px solid var(--line);
  background:var(--surface); color:var(--ink); font-size:12.5px; }
.mu-valto{ display:flex; gap:4px; padding:4px; border-radius:999px; background:var(--surface);
  border:1px solid var(--line); }
.mu-valto button{ border:0; background:none; border-radius:999px; padding:7px 14px; cursor:pointer;
  font-size:12px; font-weight:600; color:var(--muted); }
.mu-valto button.on{ background:var(--green-700); color:#fff; }
.mu-gomb{ padding:9px 16px; border:0; border-radius:12px; font-family:var(--betu-cim);
  font-size:12.5px; font-weight:700; color:#fff; cursor:pointer;
  background:linear-gradient(120deg,var(--green-700),var(--green-500));
  box-shadow:0 12px 26px -16px rgba(27,122,77,.9); }
.mu-gomb.halk{ background:var(--surface); color:var(--muted); border:1px solid var(--line); box-shadow:none; }
.mu-minigomb{ padding:6px 11px; border-radius:9px; border:1px solid var(--line); background:none;
  cursor:pointer; font-size:11px; font-weight:600; color:var(--muted); }
.mu-ures{ padding:22px; text-align:center; font-size:13px; color:var(--muted); }

.mu-av{ width:44px; height:44px; flex:none; display:grid; place-items:center; object-fit:cover;
  overflow:hidden; background:linear-gradient(150deg,var(--green-600),var(--green-500)); color:#fff;
  font-family:var(--betu-cim); font-size:13px; font-weight:800;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); }
.mu-av.kicsi{ width:34px; height:34px; font-size:11px; }
.mu-av.mini{ width:28px; height:28px; font-size:9.5px; }

.mu-racs-ember{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:12px; }
.mu-ember{ position:relative; padding:16px; border-radius:18px; overflow:hidden; cursor:pointer;
  background:color-mix(in srgb, var(--surface) 88%, transparent); border:1px solid var(--line);
  backdrop-filter:blur(14px); box-shadow:0 18px 40px -32px rgba(20,60,40,.6); transition:.16s; }
.mu-ember:hover{ transform:translateY(-2px); border-color:var(--green-500); }
.mu-ember::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg,var(--green-700),var(--green-500)); }
.mu-ember.figyel::before{ background:linear-gradient(180deg,#E0A93C,#C98A12); }
.mu-ember.baj::before{ background:linear-gradient(180deg,#E0645F,#C4443F); }
.mu-efej{ display:flex; align-items:center; gap:12px; margin-bottom:13px; }
.mu-enev{ flex:1; min-width:0; }
.mu-enev b{ display:block; font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mu-enev em{ display:block; font-style:normal; font-size:11.5px; color:var(--muted); margin-top:2px; }
.mu-szint{ font-family:var(--betu-cim); font-size:10.5px; font-weight:700; padding:4px 10px;
  border-radius:999px; background:rgba(46,149,99,.14); color:var(--green-700); flex:none; }
.mu-esorok{ display:flex; flex-direction:column; gap:7px; font-size:12px; }
.mu-esor{ display:flex; align-items:center; gap:8px; color:var(--muted); }
.mu-esor .c{ flex:1; min-width:0; }
.mu-esor .v{ font-size:12px; font-weight:600; color:var(--ink); }
.mu-esor .v.baj{ color:#C4443F; } .mu-esor .v.jo{ color:var(--green-700); }
.mu-jelzok{ display:flex; gap:6px; flex-wrap:wrap; margin-top:12px; }
.mu-jelzo{ font-size:10px; font-weight:700; padding:3px 9px; border-radius:8px;
  background:rgba(46,149,99,.1); color:var(--green-700); }
.mu-jelzo.sarga{ background:rgba(201,138,18,.16); color:#8A5E0C; }
.mu-jelzo.piros{ background:rgba(196,68,63,.12); color:#C4443F; }
.mu-emuv{ display:flex; gap:6px; margin-top:13px; padding-top:12px; border-top:1px solid var(--line); }
.mu-emuv button{ flex:1; padding:8px; border-radius:10px; border:1px solid var(--line);
  background:none; cursor:pointer; font-size:11.5px; font-weight:600; color:var(--muted); }
.mu-emuv button.fo{ background:linear-gradient(120deg,var(--green-700),var(--green-500));
  color:#fff; border-color:transparent; }

.mu-lista{ background:color-mix(in srgb, var(--surface) 88%, transparent); border:1px solid var(--line);
  border-radius:18px; backdrop-filter:blur(14px); padding:4px 16px 12px; overflow-x:auto; }
.mu-fejsor, .mu-sor{ display:grid; gap:12px; align-items:center; }
.mu-fejsor{ font-size:10.5px; font-weight:600; letter-spacing:.07em; text-transform:uppercase;
  color:var(--muted); padding:14px 4px 10px; border-bottom:1px solid var(--line); }
.mu-fejsor span:not(:first-child){ text-align:center; }
.mu-sor{ padding:11px 4px; border-top:1px solid var(--line); cursor:pointer; border-radius:10px; }
.mu-sor:hover{ background:color-mix(in srgb, var(--ink) 4%, transparent); }
.mu-ki{ display:flex; align-items:center; gap:11px; min-width:0; }
.mu-mero{ text-align:center; font-size:12.5px; font-weight:600; }
.mu-mero.baj{ color:#C4443F; } .mu-mero.jo{ color:var(--green-700); }
.mu-mini{ font-size:11.5px; color:var(--muted); text-align:center; }
.mu-fejsor.ember, .mu-sor.ember{ grid-template-columns:minmax(200px,2fr) minmax(140px,1.3fr) 80px 100px 90px 110px 110px; min-width:940px; }
.mu-fejsor.szerkezet, .mu-sor.szerkezet{ grid-template-columns:minmax(200px,2fr) 110px 130px 130px; min-width:600px; }
.mu-fejsor.forras, .mu-sor.forras{ grid-template-columns:minmax(160px,2fr) 90px 110px 100px 100px; min-width:620px; }
.mu-fejsor.forras2, .mu-sor.forras2{ grid-template-columns:minmax(160px,2fr) 90px 90px 90px 100px 90px; min-width:700px; }
.mu-fejsor.lead, .mu-sor.lead{ grid-template-columns:36px minmax(190px,2fr) 130px 120px 100px; min-width:700px; }
.mu-fejsor.hasznos, .mu-sor.hasznos{ grid-template-columns:minmax(210px,2fr) 110px 140px 120px; min-width:660px; }
.mu-sor input[type=checkbox]{ width:17px; height:17px; accent-color:var(--green-700); }
.mu-korona, .mu-sor .korona{ width:16px; flex:none; font-size:12px; }
.mu-sor .behuz{ width:16px; flex:none; }

.mu-kartya{ background:color-mix(in srgb, var(--surface) 88%, transparent); border:1px solid var(--line);
  border-radius:18px; padding:18px; backdrop-filter:blur(14px); }
.mu-kartya + .mu-kartya{ margin-top:14px; }
.mu-kcim{ display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.mu-kcim b{ font-family:var(--betu-cim); font-size:15px; font-weight:800; }
.mu-kcim span{ font-size:12px; color:var(--muted); }
.mu-kcim i{ margin-left:auto; font-style:normal; }
.mu-info{ display:flex; gap:12px; padding:14px 16px; border-radius:16px; margin-top:14px;
  background:var(--green-50); border:1px solid var(--green-100);
  font-size:12.5px; color:var(--muted); line-height:1.6; }
.mu-info b{ color:var(--ink); }
[data-theme="dark"] .mu-info{ background:rgba(46,149,99,.08); border-color:rgba(46,149,99,.2); }
.mu-veszt{ display:flex; align-items:center; gap:10px; padding:11px 0;
  border-top:1px solid var(--line); font-size:12.5px; }
.mu-veszt .n{ flex:1; color:var(--muted); }
.mu-cimke{ font-family:var(--betu-cim); font-size:10.5px; font-weight:700; padding:3px 10px; border-radius:999px; }
.mu-cimke.zold{ background:rgba(46,149,99,.14); color:var(--green-700); }
.mu-cimke.sarga{ background:rgba(201,138,18,.16); color:#8A5E0C; }
.mu-cimke.piros{ background:rgba(196,68,63,.12); color:#C4443F; }

.mu-teendok{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:11px; margin-bottom:16px; }
.mu-teendo{ display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:16px;
  background:color-mix(in srgb, var(--surface) 86%, transparent); border:1px solid var(--line);
  backdrop-filter:blur(14px); }
.mu-teendo .ik{ width:38px; height:38px; flex:none; display:grid; place-items:center;
  border-radius:12px; font-size:16px; }
.mu-teendo.surgos{ border-color:rgba(196,68,63,.35); } .mu-teendo.surgos .ik{ background:rgba(196,68,63,.12); }
.mu-teendo.var .ik{ background:rgba(201,138,18,.16); } .mu-teendo.ok .ik{ background:rgba(46,149,99,.14); }
.mu-teendo b{ display:block; font-family:var(--betu-cim); font-size:18px; font-weight:700; }
.mu-teendo span span{ font-size:11.5px; color:var(--muted); }

.mu-tabla{ display:flex; gap:12px; overflow-x:auto; padding-bottom:10px; }
.mu-oszlop{ flex:0 0 270px; border-radius:18px; padding:12px; max-height:66vh; overflow-y:auto;
  background:color-mix(in srgb, var(--surface) 86%, transparent); border:1px solid var(--line);
  backdrop-filter:blur(14px); }
.mu-oszlop.ra{ border-color:var(--green-500); background:var(--green-50); }
.mu-ofej{ display:flex; align-items:center; gap:9px; margin-bottom:11px; }
.mu-pont{ width:9px; height:9px; border-radius:3px; flex:none; }
.mu-ofej b{ flex:1; font-family:var(--betu-cim); font-size:12.5px; font-weight:700; }
.mu-odb{ font-family:var(--betu-cim); font-size:10.5px; font-weight:700; padding:2px 8px;
  border-radius:8px; background:rgba(46,149,99,.12); color:var(--green-700); }
.mu-oures{ padding:14px 6px; text-align:center; font-size:11.5px; color:var(--muted); }
.mu-jelolt{ position:relative; padding:12px; border-radius:14px; background:var(--bg);
  border:1px solid var(--line); margin-bottom:8px; cursor:pointer; overflow:hidden; }
.mu-jelolt:hover{ border-color:var(--green-500); }
.mu-jelolt::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--green-500); }
.mu-jelolt.lejart::before{ background:#C4443F; } .mu-jelolt.ma::before{ background:#C98A12; }
.mu-jfej{ display:flex; align-items:center; gap:10px; margin-bottom:9px; }
.mu-jnev{ flex:1; min-width:0; }
.mu-jnev b{ display:block; font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mu-jnev em{ display:block; font-style:normal; font-size:11px; color:var(--muted); margin-top:1px; }
.mu-jsor{ display:flex; gap:7px; font-size:11.5px; color:var(--muted); margin-bottom:6px; }
.mu-jsor a{ color:var(--green-700); text-decoration:none; font-weight:600; }
.mu-jelek{ display:flex; gap:5px; flex-wrap:wrap; margin-top:8px; }
.mu-jel{ font-size:9.5px; font-weight:700; padding:3px 8px; border-radius:7px;
  background:rgba(46,149,99,.1); color:var(--green-700); }
.mu-jel.kek{ background:rgba(37,99,235,.1); color:#2563EB; }
.mu-jel.piros{ background:rgba(196,68,63,.12); color:#C4443F; }
.mu-jel.arany{ background:rgba(201,138,18,.16); color:#8A5E0C; }
.mu-jel.szurke{ background:rgba(120,130,125,.12); color:var(--muted); }
.mu-datum{ display:flex; align-items:center; gap:6px; margin-top:9px; padding-top:9px;
  border-top:1px solid var(--line); font-size:10.5px; font-weight:600; color:var(--muted); }
.mu-datum.lejart{ color:#C4443F; } .mu-datum.ma{ color:#8A5E0C; }

.mu-szavgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:12px; }
.mu-szav{ border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--bg); }
.mu-szavvideo{ position:relative; aspect-ratio:16/9; background:#0B0F0D; display:grid;
  place-items:center; cursor:pointer; }
.mu-szavvideo::after{ content:"▶"; position:absolute; width:50px; height:50px; border-radius:50%;
  background:rgba(255,255,255,.92); color:var(--green-700); display:grid; place-items:center; font-size:17px; }
.mu-szavvideo.nincs{ background:var(--line); cursor:default; }
.mu-szavvideo.nincs::after{ content:""; }
.mu-szavvideo span{ position:absolute; left:10px; bottom:10px; font-size:10.5px; font-weight:700;
  color:#fff; background:rgba(0,0,0,.5); padding:3px 9px; border-radius:7px; }
.mu-szavvideo.nincs span{ color:var(--muted); background:none; }
.mu-szavtest{ padding:14px; }
.mu-pontsor{ display:flex; align-items:center; gap:13px; margin:12px 0 10px; }
.mu-pontszam{ font-family:var(--betu-cim); font-size:26px; font-weight:700; line-height:1;
  color:var(--muted); text-align:center; min-width:56px; }
.mu-pontszam small{ display:block; font-family:var(--betu-szoveg); font-size:9.5px;
  font-weight:400; color:var(--muted); margin-top:3px; }
.mu-pontszam.jo{ color:var(--green-700); } .mu-pontszam.baj{ color:#C4443F; }
.mu-pontsav{ flex:1; min-width:0; }
.mu-sav{ height:6px; border-radius:99px; background:var(--bg); overflow:hidden; margin-bottom:6px;
  border:1px solid var(--line); }
.mu-sav i{ display:block; height:100%; background:linear-gradient(90deg,var(--green-700),var(--green-500)); }
.mu-szavdb{ display:flex; justify-content:space-between; font-size:11px; color:var(--muted); }
.mu-pontgombok{ display:flex; gap:4px; }
.mu-pontgombok .p{ flex:1; padding:9px 0; border-radius:9px; border:1px solid var(--line);
  background:none; cursor:pointer; font-family:var(--betu-cim); font-size:13px; font-weight:700; color:var(--muted); }
.mu-pontgombok .p:hover{ border-color:var(--green-500); color:var(--ink); }
.mu-pontgombok .p.jo:hover{ color:var(--green-700); } .mu-pontgombok .p.baj:hover{ color:#C4443F; }
.mu-pontgombok .p.on{ background:linear-gradient(120deg,var(--green-700),var(--green-500));
  color:#fff; border-color:transparent; }
.mu-sajatpont{ width:100%; padding:10px; border-radius:12px; border:1px solid var(--line);
  background:none; cursor:pointer; font-size:12.5px; font-weight:600; color:var(--muted); }
.mu-sajatpont b{ color:var(--ink); font-family:var(--betu-cim); font-size:14px; }
.mu-szavmegj{ margin-top:10px; padding:10px 12px; border-radius:11px; background:var(--green-50);
  border:1px solid var(--line); font-size:11.5px; color:var(--muted); line-height:1.55; }
.mu-szavmegj b{ color:var(--ink); font-weight:600; }
.mu-szavmasok{ margin-top:10px; display:flex; flex-direction:column; gap:7px; }
.mu-szavmasok .egy{ display:flex; gap:9px; font-size:11.5px; color:var(--muted); }
.mu-szavmasok .egy .pt{ flex:none; min-width:22px; text-align:center; font-family:var(--betu-cim);
  font-size:11px; font-weight:700; padding:2px 6px; border-radius:6px;
  background:rgba(120,130,125,.14); color:var(--muted); }
.mu-szavmasok .egy .pt.jo{ background:rgba(46,149,99,.16); color:var(--green-700); }
.mu-szavmasok .egy .pt.baj{ background:rgba(196,68,63,.14); color:#C4443F; }
.mu-szavmasok .egy .ki{ font-weight:600; color:var(--ink); white-space:nowrap; }
.mu-gyorsok{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:16px; }
.mu-gyorsok button{ padding:6px 12px; border-radius:999px; border:1px solid var(--line);
  background:none; cursor:pointer; font-size:11.5px; font-weight:600; color:var(--muted); }
.mu-gyorsok button:hover{ color:var(--ink); border-color:var(--green-500); }

.mu-tolcser{ display:flex; flex-direction:column; gap:9px; }
.mu-lepcso{ display:flex; align-items:center; gap:12px; }
.mu-lepcso .nev{ width:160px; font-size:12.5px; font-weight:600; }
.mu-lepcso .rud{ flex:1; height:32px; border-radius:11px; background:var(--bg);
  overflow:hidden; border:1px solid var(--line); }
.mu-lepcso .rud i{ display:block; height:100%;
  background:linear-gradient(90deg,var(--green-700),var(--green-500)); }
.mu-lepcso .db{ width:110px; text-align:right; font-family:var(--betu-cim); font-size:14px; font-weight:700; }
.mu-lepcso .db small{ display:block; font-family:var(--betu-szoveg); font-size:10.5px;
  font-weight:400; color:var(--muted); margin-top:2px; }

.mu-racstabla{ overflow-x:auto; }
.mu-kerettabla{ width:100%; border-collapse:separate; border-spacing:0; min-width:1040px; }
.mu-kerettabla th, .mu-kerettabla td{ padding:8px 6px; text-align:center;
  border-bottom:1px solid var(--line); white-space:nowrap; }
.mu-kerettabla thead th{ position:sticky; top:0; z-index:2; background:var(--surface);
  font-size:10.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); }
.mu-kerettabla thead th.most{ color:var(--green-700); font-weight:800; }
.mu-kerettabla .nevcella{ text-align:left; min-width:210px; position:sticky; left:0; z-index:1;
  background:var(--surface); }
.mu-kerettabla thead .nevcella{ z-index:3; }
.mu-kerettabla .ki{ display:flex; align-items:center; gap:9px; min-width:0; }
.mu-kerettabla .enev b{ font-size:13px; font-weight:600; }
.mu-kerettabla tr.vez .enev b{ color:var(--green-700); }
.mu-kerettabla td.most{ background:rgba(46,149,99,.06); }
.mu-kerettabla td.jovo{ opacity:.4; }
.mu-kerettabla td.ossz, .mu-kerettabla th.ossz{ font-family:var(--betu-cim); font-size:13px;
  font-weight:700; color:var(--green-700); background:var(--surface); position:sticky; right:0;
  z-index:1; border-left:1px solid var(--line); }
.mu-rcella{ width:52px; padding:7px 4px; border:1px solid var(--line); border-radius:9px;
  background:var(--bg); color:var(--ink); font-family:var(--betu-cim); font-size:12.5px;
  font-weight:600; text-align:center; -moz-appearance:textfield; }
.mu-rcella::-webkit-outer-spin-button, .mu-rcella::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.mu-rcella:focus{ outline:none; border-color:var(--green-500); box-shadow:0 0 0 3px rgba(46,149,99,.14); }
.mu-kerettabla tr.csfej{ cursor:pointer; }
.mu-kerettabla tr.csfej th, .mu-kerettabla tr.csfej td{ background:rgba(46,149,99,.05);
  font-family:var(--betu-cim); font-size:12px; font-weight:700; color:var(--ink); }
.mu-kerettabla tr.csfej .nyil{ color:var(--muted); margin-right:8px; }
.mu-kerettabla tr.csfej .db{ font-family:var(--betu-szoveg); font-size:11px; font-weight:400;
  color:var(--muted); margin-left:8px; }
.mu-kerettabla tr.csfej .onallo{ font-size:9px; padding:2px 7px; border-radius:999px;
  background:rgba(37,99,235,.14); color:#2563EB; margin-left:8px; }
.mu-kerettabla tfoot th, .mu-kerettabla tfoot td{ background:var(--surface);
  font-family:var(--betu-cim); font-size:13px; font-weight:700; border-top:2px solid var(--line); border-bottom:0; }

.mu-csapatfej{ display:flex; align-items:center; gap:10px; padding:12px 4px 9px; margin-top:10px;
  border-top:1px solid var(--line); flex-wrap:wrap; }
.mu-csapatfej:first-child{ border-top:0; margin-top:0; }
.mu-csapatfej b{ font-family:var(--betu-cim); font-size:12.5px; font-weight:700; }
.mu-csapatfej .onallo{ font-family:var(--betu-cim); font-size:9.5px; font-weight:700;
  padding:3px 9px; border-radius:999px; background:rgba(37,99,235,.12); color:#2563EB; }
.mu-csapatfej .db{ font-size:11px; color:var(--muted); }
.mu-csapatfej .ossz{ margin-left:auto; font-family:var(--betu-cim); font-size:11.5px;
  font-weight:700; color:var(--green-700); }

.mu-naplo{ margin-top:14px; border-radius:18px; padding:18px 20px;
  background:linear-gradient(135deg, rgba(46,149,99,.14), rgba(46,149,99,.06));
  border:1px solid rgba(46,149,99,.28); }
.mu-naplofej{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.mu-naplofej .ik{ width:38px; height:38px; flex:none; display:grid; place-items:center;
  border-radius:12px; background:rgba(46,149,99,.18); font-size:17px; }
.mu-naplofej b{ display:block; font-family:var(--betu-cim); font-size:14.5px; font-weight:800; }
.mu-naplofej em{ display:block; font-style:normal; font-size:11.5px; color:var(--muted); margin-top:2px; }
.mu-naplosor{ display:flex; align-items:center; gap:12px; padding:10px 0;
  border-top:1px solid rgba(46,149,99,.18); font-size:12.5px; flex-wrap:wrap; }
.mu-naplosor .dt{ flex:none; min-width:82px; font-family:var(--betu-cim); font-size:11.5px;
  font-weight:600; color:var(--green-700); }
.mu-naplosor .n{ flex:1; min-width:180px; color:var(--muted); }
.mu-naplosor .n b{ color:var(--ink); font-weight:600; }
.mu-naplosor .cimke{ font-family:var(--betu-cim); font-size:10.5px; font-weight:700;
  padding:3px 10px; border-radius:999px; background:rgba(46,149,99,.18); color:var(--green-700); }

.mu-fatyol{ position:fixed; inset:0; z-index:120; background:rgba(11,20,15,.5);
  backdrop-filter:blur(3px); display:none; }
.mu-fatyol.on{ display:block; }
/*  A fejléc alatt kezdődik, hogy a keresősávot ne takarja el  */
.mu-fiok{ position:fixed; top:72px; right:0; bottom:0; width:min(440px,92vw); z-index:121;
  border-top-left-radius:20px;
  background:var(--bg); border-left:1px solid var(--line); overflow-y:auto;
  box-shadow:-24px 0 60px -30px rgba(0,0,0,.5);
  transform:translateX(100%); transition:transform .25s cubic-bezier(.2,.8,.2,1); }
.mu-fiok.on{ transform:none; }
.mu-fiokfej{ display:flex; align-items:center; gap:12px; padding:20px; border-bottom:1px solid var(--line); }
.mu-fiokfej b{ flex:1; font-family:var(--betu-cim); font-size:16px; font-weight:700; }
.mu-zar{ border:0; background:none; font-size:18px; color:var(--muted); cursor:pointer; }
.mu-fioktest{ padding:20px; }
.mu-mezo{ display:block; margin-bottom:14px; }
.mu-mezo span{ display:block; font-size:11.5px; font-weight:600; color:var(--muted); margin-bottom:6px; }
.mu-mezo span i{ font-style:normal; font-weight:400; color:var(--muted); opacity:.8; }
.mu-mezo select, .mu-mezo input, .mu-mezo textarea{ width:100%; padding:11px 13px;
  border:1px solid var(--line); border-radius:12px; background:var(--surface); color:var(--ink);
  font-size:13.5px; font-family:inherit; }
.mu-mezo textarea{ resize:vertical; line-height:1.55; }
.mu-pipa{ display:flex; align-items:center; gap:10px; padding:11px 13px; border:1px solid var(--line);
  border-radius:12px; margin-bottom:9px; cursor:pointer; font-size:13px; }
.mu-pipa input{ accent-color:var(--green-700); width:17px; height:17px; }
.mu-veszelyes{ margin-top:20px; padding-top:16px; border-top:1px solid var(--line); }
.mu-veszelyes button{ width:100%; padding:11px; border-radius:12px;
  border:1px solid rgba(196,68,63,.35); background:none; color:#C4443F;
  font-family:var(--betu-cim); font-size:12.5px; font-weight:700; cursor:pointer; }

.nav-uj{ font-size:9px; font-weight:800; padding:2px 6px; border-radius:6px; margin-left:6px;
  background:rgba(37,99,235,.16); color:#2563EB; }

@media (max-width:700px){
  .mu-gombok{ margin-left:0; width:100%; }
  .mu-fulek{ width:100%; overflow-x:auto; flex-wrap:nowrap; }
  .mu-ful{ flex:none; }
}
.mu-fejsor.jelolt, .mu-sor.jelolt{ grid-template-columns:minmax(200px,2fr) 140px 120px minmax(130px,1fr) 110px 80px; min-width:880px; }
.mu-jdb{ font-size:11.5px; color:var(--muted); margin:-4px 0 12px 4px; }

/*  Munkatárs ÚJ — lapozó, választólista, csak olvasható cellák  */
.mu-lapozo{ display:flex; align-items:center; gap:5px; flex-wrap:wrap; margin-top:12px; }
.mu-lapinfo{ font-size:11.5px; color:var(--muted); }
.mu-lapgomb{ min-width:32px; padding:7px 10px; border-radius:10px; border:1px solid var(--line);
  background:var(--surface); cursor:pointer; font-family:var(--betu-cim); font-size:12px;
  font-weight:700; color:var(--muted); }
.mu-lapgomb:hover:not(:disabled){ border-color:var(--green-500); color:var(--ink); }
.mu-lapgomb.on{ background:var(--green-700); color:#fff; border-color:transparent; }
.mu-lapgomb:disabled{ opacity:.35; cursor:default; }
.mu-lappont{ color:var(--muted); padding:0 2px; }

.mu-valasztolista{ max-height:min(46vh,340px); overflow-y:auto; margin-bottom:14px;
  border:1px solid var(--line); border-radius:14px; padding:6px; }
.mu-valaszto{ display:flex; align-items:center; gap:10px; width:100%; border:0; background:none;
  cursor:pointer; padding:9px 10px; border-radius:11px; text-align:left; color:var(--ink);
  font-family:inherit; }
.mu-valaszto:hover{ background:var(--green-50); }
.mu-valaszto.on{ background:var(--green-100); }
.mu-valaszto .t{ flex:1; min-width:0; }
.mu-valaszto .t b{ display:block; font-size:13px; font-weight:600; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; }
.mu-valaszto .t em{ display:block; font-style:normal; font-size:11px; color:var(--muted); margin-top:1px; }
.mu-valaszto .pipa{ color:var(--green-700); font-weight:800; }

.mu-rertek{ display:inline-block; min-width:38px; padding:6px 8px; border-radius:9px;
  background:var(--bg); border:1px solid var(--line); font-family:var(--betu-cim);
  font-size:12.5px; font-weight:600; }
.mu-rertek.ures{ color:var(--muted); opacity:.5; border-color:transparent; background:none; }

/*  Munkatárs ÚJ — lead-statisztikák  */
.mu-statsor{ display:grid; grid-template-columns:1.6fr 1fr; gap:14px; margin-bottom:14px; }
@media (max-width:900px){ .mu-statsor{ grid-template-columns:1fr; } }

.mu-oszlopdiag{ display:flex; align-items:flex-end; gap:8px; height:220px; padding-top:20px; }
.mu-oszlopelem{ flex:1; display:flex; flex-direction:column; align-items:center;
  justify-content:flex-end; height:100%; min-width:0; }
.mu-oszlopelem .ert{ font-family:var(--betu-cim); font-size:12.5px; font-weight:700; margin-bottom:6px; }
.mu-oszlopelem .rud{ width:100%; max-width:56px; border-radius:10px 10px 4px 4px;
  background:linear-gradient(180deg,var(--green-600),var(--green-700));
  animation:muNo .7s cubic-bezier(.2,.8,.2,1) both; }
.mu-oszlopelem .rud.csucs{ background:linear-gradient(180deg,#2E9563,#1B7A4D); }
.mu-oszlopelem .rud.mely{ background:linear-gradient(180deg,#D06661,#C4443F); }
@keyframes muNo{ from{ height:0 !important; } }
.mu-oszlopelem .cimke{ font-size:11px; color:var(--muted); margin-top:8px; text-align:center;
  border-top:1px solid var(--line); padding-top:8px; width:100%; }
.mu-oszlopelem .cimke i{ display:block; font-style:normal; font-size:10px; font-weight:700; margin-top:2px; }
.mu-oszlopelem .cimke i.fel{ color:var(--green-700); }
.mu-oszlopelem .cimke i.le{ color:#C4443F; }

.mu-reszesedes{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.mu-gyuru{ width:130px; height:130px; border-radius:50%; flex:none; display:grid; place-items:center;
  -webkit-mask:radial-gradient(circle, transparent 54%, #000 55%);
  mask:radial-gradient(circle, transparent 54%, #000 55%); position:relative; }
.mu-gyuru span{ position:absolute; inset:0; display:grid; place-items:center; text-align:center;
  -webkit-mask:none; mask:none; }
.mu-gyuru b{ display:block; font-family:var(--betu-cim); font-size:20px; font-weight:700; color:var(--ink); }
.mu-gyuru em{ display:block; font-style:normal; font-size:10px; color:var(--muted); }
.mu-jelmagyar{ flex:1; min-width:180px; display:flex; flex-direction:column; gap:7px; }
.mu-jelmagyar .sor{ display:flex; align-items:center; gap:9px; font-size:12px; }
.mu-jelmagyar .szin{ width:9px; height:9px; border-radius:50%; flex:none; }
.mu-jelmagyar .nev{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mu-jelmagyar .db{ font-family:var(--betu-cim); font-weight:700; color:var(--muted); }

.mu-kerettabla.idoszak{ min-width:640px; }
.mu-kerettabla.idoszak .nevcella{ min-width:150px; font-weight:600; font-size:12.5px; }
.mu-kerettabla.idoszak tr.most th, .mu-kerettabla.idoszak tr.most td{ background:rgba(46,149,99,.06); }
.mu-sugo{ font-size:11px; color:var(--muted); padding:8px 4px 4px; opacity:.8; }

/*  Kiosztási napló — kinek, mennyit, milyen forrásból  */
.mu-naplodb{ margin-left:auto; font-size:11px; color:var(--muted); }
.mu-naploelem{ border-top:1px solid rgba(46,149,99,.18); }
.mu-naploelem:first-of-type{ border-top:0; }
.mu-naplo .mu-naploelem .mu-naplosor{ border-top:0; cursor:pointer; }
.mu-naplosor .forras{ font-size:10px; font-weight:700; padding:2px 8px; border-radius:7px;
  background:rgba(255,255,255,.55); color:var(--green-700); border:1px solid rgba(46,149,99,.2); }
[data-theme="dark"] .mu-naplosor .forras{ background:rgba(255,255,255,.08); }
.mu-naplosor .nyil{ color:var(--muted); font-size:13px; width:14px; text-align:center; }
.mu-naplonevek{ display:none; flex-wrap:wrap; gap:6px; padding:2px 0 12px 82px; }
.mu-naplonevek.on{ display:flex; }
.mu-naplonevek .ugyfel{ display:inline-flex; align-items:center; gap:6px; font-size:11px;
  padding:4px 10px; border-radius:999px; background:rgba(255,255,255,.5);
  border:1px solid rgba(46,149,99,.18); color:var(--ink); }
[data-theme="dark"] .mu-naplonevek .ugyfel{ background:rgba(255,255,255,.06); }
.mu-naplonevek .ugyfel em{ font-style:normal; font-size:9.5px; font-weight:700; color:var(--green-700); }
@media (max-width:700px){ .mu-naplonevek{ padding-left:0; } }

/*  Munkatárs ÚJ — teljes szélesség, a képernyő széléig  */
#view-munkatars-uj{ max-width:none; width:100%; }
.content:has(#view-munkatars-uj.active){ align-items:stretch; }
#view-munkatars-uj.active > .card[style*="max-width"],
#view-munkatars-uj.active > div[style*="max-width"]{ margin-left:0; margin-right:0; }
.mu-oszlopelem.folyo .rud{ background:linear-gradient(180deg,#9BC7AC,#7FB396); }
.mu-oszlopelem .cimke i.most{ color:var(--muted); font-weight:600; }

/*  Munkatárs ÚJ — betöltő animáció  */
.mu-tolto{ background:color-mix(in srgb, var(--surface) 88%, transparent);
  border:1px solid var(--line); border-radius:18px; padding:18px 20px;
  backdrop-filter:blur(14px); margin-bottom:14px; }
.mu-tolto-fej{ display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.mu-tolto-fej b{ display:block; font-family:var(--betu-cim); font-size:14.5px; font-weight:700; }
.mu-tolto-fej em{ display:block; font-style:normal; font-size:12px; color:var(--muted); margin-top:3px; }

/*  Három hatszög, egymás után pulzálva  */
.mu-porgo{ display:flex; gap:5px; flex:none; }
.mu-porgo i{ width:14px; height:16px; display:block;
  background:linear-gradient(150deg,var(--green-600),var(--green-500));
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  animation:muHatszog 1.1s ease-in-out infinite; }
.mu-porgo i:nth-child(2){ animation-delay:.15s; }
.mu-porgo i:nth-child(3){ animation-delay:.3s; }
@keyframes muHatszog{
  0%,100%{ opacity:.25; transform:translateY(0) scale(.85); }
  40%{ opacity:1; transform:translateY(-5px) scale(1); }
}

.mu-toltosav{ height:5px; border-radius:99px; background:var(--bg); overflow:hidden; }
.mu-toltosav i{ display:block; height:100%; width:8%; border-radius:99px;
  background:linear-gradient(90deg,var(--green-700),var(--green-500));
  transition:width .5s cubic-bezier(.2,.8,.2,1); }

/*  Csontváz-elemek — a végleges elrendezés körvonala  */
.mu-vaz{ border-radius:10px; background:linear-gradient(90deg,
    color-mix(in srgb, var(--ink) 5%, transparent) 25%,
    color-mix(in srgb, var(--ink) 10%, transparent) 37%,
    color-mix(in srgb, var(--ink) 5%, transparent) 63%);
  background-size:400% 100%; animation:muCsillam 1.4s linear infinite; }
@keyframes muCsillam{ from{ background-position:100% 0; } to{ background-position:-100% 0; } }
.mu-vaz.vaz-cim{ height:15px; width:180px; margin-bottom:16px; }
.mu-vaz.vaz-sor{ height:38px; margin-bottom:9px; }

.mu-vazdiag{ display:flex; align-items:flex-end; gap:8px; height:180px; }
.mu-vazdiag span{ flex:1; border-radius:10px 10px 4px 4px;
  background:color-mix(in srgb, var(--ink) 7%, transparent);
  animation:muLuk 1.3s ease-in-out infinite; }
@keyframes muLuk{ 0%,100%{ opacity:.4; } 50%{ opacity:.85; } }
.mu-vazgyuru{ width:130px; height:130px; border-radius:50%; margin:10px auto;
  border:14px solid color-mix(in srgb, var(--ink) 8%, transparent);
  border-top-color:var(--green-500); animation:muPorog 1s linear infinite; }
@keyframes muPorog{ to{ transform:rotate(360deg); } }
.mu-olvas{ padding:11px 13px; border:1px solid var(--line); border-radius:12px;
  background:var(--bg); font-size:13.5px; color:var(--ink); }
.mu-olvas em{ display:block; font-style:normal; font-size:11px; color:var(--muted); margin-top:3px; }

/*  Munkatárs ÚJ — csapatonkénti bontás  */
.mu-csoport{ margin-bottom:18px; }
.mu-csoportfej{ display:flex; align-items:center; gap:11px; padding:11px 14px; margin-bottom:11px;
  border-radius:14px; cursor:pointer; flex-wrap:wrap;
  background:color-mix(in srgb, var(--green-50) 86%, transparent);
  border:1px solid var(--green-100); transition:.15s; }
.mu-csoportfej:hover{ border-color:var(--green-500); }
[data-theme="dark"] .mu-csoportfej{ background:rgba(46,149,99,.08); border-color:rgba(46,149,99,.2); }
.mu-csoportfej .nyil{ color:var(--muted); font-size:14px; width:12px; flex:none; }
.mu-csoportfej .cim{ min-width:0; }
.mu-csoportfej .cim b{ display:block; font-family:var(--betu-cim); font-size:13.5px; font-weight:700; }
.mu-csoportfej .cim em{ display:block; font-style:normal; font-size:11px; color:var(--muted); margin-top:2px; }
.mu-csoportfej .onallo{ font-family:var(--betu-cim); font-size:9.5px; font-weight:700;
  padding:3px 9px; border-radius:999px; background:rgba(37,99,235,.12); color:#2563EB; }
.mu-csoportfej .szamok{ margin-left:auto; font-size:11.5px; color:var(--muted); }
.mu-csoportfej .szamok b{ font-family:var(--betu-cim); color:var(--green-700); }
.mu-jelmagyar .sor.halk{ opacity:.6; border-top:1px solid var(--line); padding-top:7px; margin-top:2px; }

/*  Nyitó gomb a csoportok elé  */
.mu-nyito{ width:26px; height:26px; flex:none; display:inline-grid; place-items:center;
  border-radius:9px; margin-right:9px; vertical-align:middle;
  background:var(--surface); border:1px solid var(--line); color:var(--muted);
  transition:transform .2s cubic-bezier(.2,.8,.2,1), background .15s, color .15s; }
.mu-nyito svg{ width:14px; height:14px; }
.mu-csoportfej:hover .mu-nyito,
.mu-kerettabla tr.csfej:hover .mu-nyito{ background:var(--green-700); color:#fff; border-color:transparent; }
.mu-csoportfej.nyitva .mu-nyito,
.mu-kerettabla tr.csfej.nyitva .mu-nyito{ transform:rotate(90deg);
  background:var(--green-700); color:#fff; border-color:transparent; }
.mu-kerettabla tr.csfej .nyitjel{ color:var(--green-700); font-weight:600; }

/* ══════════════════════════════════════════════════════════════
   ÉLŐ DIAGRAMOK
   A kitöltések lassan úszó fénycsíkot kapnak, hogy a felület
   éljen. Nem villog, nem vonja el a figyelmet a számokról.
   ══════════════════════════════════════════════════════════════ */

/*  Közös fénycsík — a kitöltés fölött halad át  */
.mu-lepcso .rud i,
.mu-oszlopelem .rud,
.mu-sav i,
.mu-toltosav i,
.mu-rertek{ position:relative; overflow:hidden; }

.mu-lepcso .rud i::after,
.mu-oszlopelem .rud::after,
.mu-sav i::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(115deg,
    transparent 20%,
    rgba(255,255,255,.34) 42%,
    rgba(255,255,255,.5) 50%,
    rgba(255,255,255,.34) 58%,
    transparent 80%);
  background-size:260% 100%;
  animation:muFeny 3.4s ease-in-out infinite;
}
@keyframes muFeny{
  0%{ background-position:180% 0; }
  60%,100%{ background-position:-80% 0; }
}

/*  A tölcsér lépcsői egymás után indulnak, ettől lesz „folyó" hatás  */
.mu-tolcser .mu-lepcso:nth-child(1) .rud i::after{ animation-delay:0s; }
.mu-tolcser .mu-lepcso:nth-child(2) .rud i::after{ animation-delay:.22s; }
.mu-tolcser .mu-lepcso:nth-child(3) .rud i::after{ animation-delay:.44s; }
.mu-tolcser .mu-lepcso:nth-child(4) .rud i::after{ animation-delay:.66s; }
.mu-tolcser .mu-lepcso:nth-child(5) .rud i::after{ animation-delay:.88s; }
.mu-tolcser .mu-lepcso:nth-child(6) .rud i::after{ animation-delay:1.1s; }

/*  Az oszlopdiagramnál balról jobbra fut végig  */
.mu-oszlopdiag .mu-oszlopelem:nth-child(1) .rud::after{ animation-delay:0s; }
.mu-oszlopdiag .mu-oszlopelem:nth-child(2) .rud::after{ animation-delay:.12s; }
.mu-oszlopdiag .mu-oszlopelem:nth-child(3) .rud::after{ animation-delay:.24s; }
.mu-oszlopdiag .mu-oszlopelem:nth-child(4) .rud::after{ animation-delay:.36s; }
.mu-oszlopdiag .mu-oszlopelem:nth-child(5) .rud::after{ animation-delay:.48s; }
.mu-oszlopdiag .mu-oszlopelem:nth-child(6) .rud::after{ animation-delay:.6s; }
.mu-oszlopdiag .mu-oszlopelem:nth-child(7) .rud::after{ animation-delay:.72s; }
.mu-oszlopdiag .mu-oszlopelem:nth-child(8) .rud::after{ animation-delay:.84s; }
.mu-oszlopdiag .mu-oszlopelem:nth-child(9) .rud::after{ animation-delay:.96s; }
.mu-oszlopdiag .mu-oszlopelem:nth-child(10) .rud::after{ animation-delay:1.08s; }
.mu-oszlopdiag .mu-oszlopelem:nth-child(11) .rud::after{ animation-delay:1.2s; }
.mu-oszlopdiag .mu-oszlopelem:nth-child(12) .rud::after{ animation-delay:1.32s; }

/*  A csúcs és a mélypont enyhén lélegzik, hogy kiugorjon  */
.mu-oszlopelem .rud.csucs{ animation:muNo .7s cubic-bezier(.2,.8,.2,1) both, muLelegzik 3.2s ease-in-out infinite .7s; }
.mu-oszlopelem .rud.mely{ animation:muNo .7s cubic-bezier(.2,.8,.2,1) both, muLelegzik 3.2s ease-in-out infinite 1.1s; }
@keyframes muLelegzik{
  50%{ filter:brightness(1.14) saturate(1.1); }
}

/*  Az oszlopok belépéskor alulról nőnek, sorban  */
.mu-oszlopelem .rud{ animation:muNo .7s cubic-bezier(.2,.8,.2,1) both; }
.mu-oszlopdiag .mu-oszlopelem:nth-child(n) .rud{ animation-delay:calc(var(--i, 0) * .05s); }

/*  A tölcsér sávjai szélesedve jelennek meg  */
.mu-lepcso .rud i{ animation:muSzeles .8s cubic-bezier(.2,.8,.2,1) both; }
@keyframes muSzeles{ from{ width:0 !important; } }

/*  A gyűrű lassan körbefordul egyszer, amikor megjelenik  */
.mu-gyuru{ animation:muGyuruBe .9s cubic-bezier(.2,.8,.2,1) both; }
@keyframes muGyuruBe{
  from{ transform:rotate(-90deg) scale(.9); opacity:0; }
  to{ transform:none; opacity:1; }
}

/*  Aki kevesebb mozgást szeretne, annak nyugodt marad  */
@media (prefers-reduced-motion: reduce){
  .mu-lepcso .rud i::after,
  .mu-oszlopelem .rud::after,
  .mu-sav i::after{ animation:none; }
  .mu-oszlopelem .rud.csucs,
  .mu-oszlopelem .rud.mely{ animation:muNo .7s cubic-bezier(.2,.8,.2,1) both; }
}

/*  AI Központ — direkt csapatok  */
.ak-csoport{ margin-bottom:16px; }
.ak-csoportfej{ display:flex; align-items:center; gap:11px; padding:11px 14px; margin-bottom:10px;
  border-radius:14px; cursor:pointer; flex-wrap:wrap;
  background:color-mix(in srgb, var(--green-50) 86%, transparent);
  border:1px solid var(--green-100); transition:.15s; }
.ak-csoportfej:hover{ border-color:var(--green-500); }
[data-theme="dark"] .ak-csoportfej{ background:rgba(46,149,99,.08); border-color:rgba(46,149,99,.2); }
.ak-csoportfej .cim{ min-width:0; }
.ak-csoportfej .cim b{ display:block; font-family:var(--betu-cim); font-size:13.5px; font-weight:700; }
.ak-csoportfej .cim em{ display:block; font-style:normal; font-size:11px; color:var(--muted); margin-top:2px; }
.ak-csoportfej .szamok{ margin-left:auto; font-size:11.5px; color:var(--muted); }
.ak-csoportfej .szamok b{ font-family:var(--betu-cim); color:var(--green-700); }
.ak-av.mini{ width:28px; height:28px; font-size:9.5px; }

.ak-nyito{ width:26px; height:26px; flex:none; display:grid; place-items:center; border-radius:9px;
  background:var(--surface); border:1px solid var(--line); color:var(--muted);
  transition:transform .2s cubic-bezier(.2,.8,.2,1), background .15s, color .15s; }
.ak-nyito svg{ width:14px; height:14px; }
.ak-csoportfej:hover .ak-nyito{ background:var(--green-700); color:#fff; border-color:transparent; }
.ak-csoportfej.nyitva .ak-nyito{ transform:rotate(90deg);
  background:var(--green-700); color:#fff; border-color:transparent; }

.ak-valto{ display:inline-flex; gap:4px; padding:4px; border-radius:999px;
  background:var(--surface); border:1px solid var(--line); vertical-align:middle; }
.ak-valto button{ border:0; background:none; border-radius:999px; padding:6px 13px; cursor:pointer;
  font-size:12px; font-weight:600; color:var(--muted); }
.ak-valto button.on{ background:var(--green-700); color:#fff; }

/*  Szavazás — határidő és döntés  */
.mu-hatarido{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin:10px 0;
  padding:9px 12px; border-radius:11px; font-size:11.5px; color:var(--muted);
  background:rgba(201,138,18,.1); border:1px solid rgba(201,138,18,.22); }
.mu-hatarido b{ color:#8A5E0C; font-family:var(--betu-cim); }
.mu-hatarido .mu-minigomb{ margin-left:auto; }
.mu-hatarido.surgos{ background:rgba(196,68,63,.1); border-color:rgba(196,68,63,.28); }
.mu-hatarido.surgos b{ color:#C4443F; }
.mu-hatarido.lejart{ background:var(--bg); border-color:var(--line); }
.mu-hatarido.nincs{ background:var(--bg); border-color:var(--line); }
.mu-szav.zarva{ opacity:.82; }
.mu-szav.zarva .mu-szavvideo::after{ opacity:.7; }

.mu-dontes{ margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }
.mu-dontes .cim{ display:block; font-size:11px; color:var(--muted); margin-bottom:8px; }
.mu-dontes .gombok{ display:flex; gap:6px; }
.mu-dontes button{ flex:1; padding:9px 6px; border-radius:10px; border:1px solid var(--line);
  background:none; cursor:pointer; font-size:11.5px; font-weight:600; color:var(--muted); }
.mu-dontes .tovabb{ background:linear-gradient(120deg,var(--green-700),var(--green-500));
  color:#fff; border-color:transparent; }
.mu-dontes .elutasit:hover{ color:#C4443F; border-color:rgba(196,68,63,.4); }
.mu-dontes .kesobb:hover{ color:#8A5E0C; border-color:rgba(201,138,18,.4); }
.mu-regisztral{ width:100%; margin-top:9px; padding:8px; border-radius:10px; border:0; cursor:pointer;
  background:linear-gradient(120deg,var(--green-700),var(--green-500)); color:#fff;
  font-family:var(--betu-cim); font-size:11.5px; font-weight:700; }
.mu-regisztral:hover{ filter:brightness(1.06); }
.mu-mentessor{ display:flex; gap:9px; margin-top:18px; }
.mu-mentessor .mu-gomb{ flex:1; padding:12px; }
.mu-mentessor .mu-gomb:disabled{ opacity:.6; cursor:default; }

/* ── Időpontfoglaló (Ügyfélkör bővítés) ───────────────────────── */
.fog-figy{ display:flex; gap:10px; align-items:flex-start; background:var(--jelzes-sarga, #FFF6DB);
  color:var(--jelzes-sarga-ink, #7A5A00); border-radius:12px; padding:10px 12px; margin-bottom:10px; font-size:12px; line-height:1.5; }
.fog-figy a{ color:inherit; font-weight:700; }
.fog-kapcs{ display:flex; gap:10px; align-items:flex-start; font-size:12.5px; margin-bottom:14px; cursor:pointer; }
.fog-kapcs input{ margin-top:3px; width:16px; height:16px; }
.fog-kapcs small{ color:var(--muted); font-size:11px; }
.fog-racs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px; margin-bottom:14px; }
.fog-racs label, .fog-bemut{ display:flex; flex-direction:column; gap:5px; font-size:11.5px; color:var(--muted); font-weight:600; }
.fog-racs select, .fog-bemut textarea, .fog-nap input[type=time]{ border:1px solid var(--line); border-radius:9px;
  padding:7px 9px; font:inherit; font-size:12.5px; background:var(--surface); color:var(--ink); }
.fog-bemut{ margin:6px 0 14px; } .fog-bemut small{ font-weight:400; }
.fog-napok{ display:grid; gap:6px; margin-bottom:12px; }
.fog-nap{ display:flex; align-items:center; gap:8px; font-size:12.5px; }
.fog-napnev{ width:120px; display:flex; align-items:center; gap:7px; cursor:pointer; }
.fog-nap input[type=time]:disabled{ opacity:.45; }
.fog-idopont{ font-size:12.5px; margin:6px 0 2px; color:var(--ink); }
.fog-idopont.jovo b{ color:#5B3FC4; }

/* ══ CSAPAT TÉRKÉP (MapLibre, vektoros) ═════════════════════════ */
.ct{ display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:18px; align-items:start; }
.ct-fo{ display:grid; gap:14px; min-width:0; }
.ct-kartya{ background:var(--surface,#fff); border:1px solid var(--line,#e6eae7); border-radius:22px;
  box-shadow:0 14px 40px rgba(11,44,28,.06); }
.ct-terkepkartya{ padding:18px 18px 16px; }
.ct-fej{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:12px; }
.ct-cim{ margin-right:auto; }
.ct-cim h1{ font-family:var(--betu-cim, inherit); font-size:22px; margin:0; letter-spacing:-.01em; }
.ct-cim p{ margin:2px 0 0; font-size:12.5px; color:var(--muted,#5f6e66); }
.ct-szurok{ display:flex; gap:4px; background:var(--bg,#f4f6f4); border-radius:999px; padding:4px; flex-wrap:wrap; }
.ct-szuro{ border:0; background:none; border-radius:999px; padding:7px 14px; font:inherit; font-size:12px;
  font-weight:600; color:var(--muted,#5f6e66); cursor:pointer; transition:.2s; }
.ct-szuro:hover{ color:var(--ink,#111815); }
.ct-szuro.on{ background:linear-gradient(135deg,#1aa568,#12724a); color:#fff; box-shadow:0 6px 16px rgba(18,114,74,.3); }
.ct-regio{ position:relative; }
.ct-regiogomb{ display:flex; align-items:center; gap:7px; border:1px solid var(--line,#e6eae7); background:var(--surface,#fff);
  border-radius:12px; padding:8px 12px; font:inherit; font-size:12px; color:var(--ink,#111815); cursor:pointer; }
.ct-regiomenu{ position:absolute; right:0; top:calc(100% + 6px); z-index:60; background:var(--surface,#fff); border:1px solid var(--line,#e6eae7);
  border-radius:14px; box-shadow:0 18px 40px rgba(0,0,0,.12); padding:6px; min-width:200px; display:grid; }
.ct-regiomenu[hidden]{ display:none; }
.ct-regiomenu button{ text-align:left; border:0; background:none; font:inherit; font-size:12.5px; padding:8px 10px; border-radius:9px; cursor:pointer; color:var(--ink,#111815); }
.ct-regiomenu button:hover{ background:var(--bg,#f4f6f4); }

.ct-szinpad{ position:relative; height:clamp(460px, 64vh, 720px); border-radius:18px; overflow:hidden; isolation:isolate;
  background:linear-gradient(180deg,#e8f4f7,#dcefe3); }
.ct-map, .ct-map.maplibregl-map{ position:absolute !important; inset:0; width:100%; height:100%; }
.ct-map .maplibregl-canvas{ outline:none; }
.ct-map .maplibregl-ctrl-attrib{ font-size:10px; background:rgba(255,255,255,.75); }
.ct-map .maplibregl-ctrl-bottom-right{ right:64px; }
/* a keret szélén finom köd, hogy a térkép „lebegjen” */
.ct-szinpad::after{ content:''; position:absolute; inset:0; pointer-events:none; z-index:2; border-radius:18px;
  box-shadow:inset 0 0 60px 18px rgba(232,244,247,.85); }
.ct-felho{ position:absolute; pointer-events:none; border-radius:50%; filter:blur(22px); opacity:.45; z-index:3;
  background:radial-gradient(circle at 40% 45%, #fff 0 38%, rgba(255,255,255,.7) 50%, rgba(255,255,255,0) 72%); }
.ct-felho.f1{ width:380px; height:170px; left:-120px; top:-60px; animation:ctFelho 70s linear infinite; }
.ct-felho.f2{ width:440px; height:190px; right:-160px; bottom:-40px; animation:ctFelho 90s linear infinite reverse; }
@keyframes ctFelho{ 0%{ translate:0 0; } 50%{ translate:60px 10px; } 100%{ translate:0 0; } }

.ct-mk{ position:relative; display:flex; flex-direction:column; align-items:center; cursor:default; }
.ct-mk-b{ position:relative; display:flex; align-items:center; gap:8px; border:0; background:none; padding:0 0 10px; cursor:pointer;
  font:inherit; animation:ctLeb 4.2s ease-in-out infinite; }
.ct-mk.nagy .ct-mk-b{ translate:calc(50% - 30px) 0; }
@keyframes ctLeb{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-4px); } }
.ct-mk-b::after{ content:''; position:absolute; left:50%; bottom:0; width:2px; height:12px; margin-left:-1px;
  background:linear-gradient(#10b981, rgba(16,185,129,0)); }
.ct-mk.nagy .ct-mk-b::after{ left:30px; }
.ct-talp{ position:relative; width:14px; height:14px; margin-top:-3px; border-radius:50%;
  background:radial-gradient(circle,#fff 0 28%, #10b981 30% 58%, rgba(16,185,129,0) 72%); box-shadow:0 0 14px #34d399; }
.ct-talp i{ position:absolute; inset:-10px; border-radius:50%; border:2px solid rgba(16,185,129,.7); animation:ctPulzus 2.6s ease-out infinite; }
@keyframes ctPulzus{ 0%{ transform:scale(.35); opacity:.9; } 100%{ transform:scale(1.9); opacity:0; } }
.ct-av, .ct-av-k, .ct-av-l{ border-radius:50%; object-fit:cover; flex-shrink:0; background:#12724a; color:#fff;
  display:inline-flex; align-items:center; justify-content:center; font-weight:700; }
.ct-av{ width:46px; height:46px; border:3px solid #fff; font-size:15px; transition:transform .2s;
  box-shadow:0 0 0 2.5px #10b981, 0 10px 22px rgba(8,60,40,.38); }
.ct-mk.nagy .ct-av{ width:60px; height:60px; font-size:18px; }
.ct-mk.sajat .ct-av{ box-shadow:0 0 0 3px #f5b83d, 0 0 20px rgba(245,184,61,.75), 0 10px 22px rgba(8,60,40,.38); }
.ct-mk-b:hover .ct-av{ transform:scale(1.07); }
.ct-tavoli .ct-av{ width:34px; height:34px; font-size:12px; border-width:2px; }
.ct-tavoli .ct-mk.nagy .ct-av{ width:44px; height:44px; font-size:14px; }
.ct-tavoli .ct-mk.nagy .ct-mk-b{ translate:calc(50% - 22px) 0; }
.ct-tavoli .ct-mk.nagy .ct-mk-b::after{ left:22px; }
.ct-tavoli .ct-cimke{ padding:5px 10px 5px 9px; } .ct-tavoli .ct-cimke b{ font-size:12px; } .ct-tavoli .ct-cimke small{ font-size:10.5px; }
/*  Több munkatárs egy településen: egymásra csúszó képek  */
.ct-halom{ display:inline-flex; align-items:center; }
.ct-halom-e{ position:relative; display:inline-flex; }
.ct-halom-e + .ct-halom-e{ margin-left:-18px; }
.ct-mk.nagy .ct-halom .ct-av{ width:52px; height:52px; font-size:16px; }
.ct-mk.nagy .ct-mk-b{ translate:calc(50% - 26px) 0; }
.ct-mk.nagy .ct-mk-b::after{ left:26px; }
.ct-mk.sajat .ct-halom-e + .ct-halom-e .ct-av{ box-shadow:0 0 0 2.5px #10b981, 0 10px 22px rgba(8,60,40,.38); }
.ct-av.ct-tobb{ background:#0f5f3e; font-size:14px; letter-spacing:-.02em; }
.ct-tavoli .ct-mk.nagy .ct-halom .ct-av{ width:36px; height:36px; font-size:12px; }
.ct-tavoli .ct-halom-e + .ct-halom-e{ margin-left:-13px; }
.ct-tavoli .ct-mk.nagy .ct-mk-b{ translate:calc(50% - 18px) 0; }
.ct-tavoli .ct-mk.nagy .ct-mk-b::after{ left:18px; }
.ct-cimke{ display:grid; line-height:1.2; text-align:left; background:rgba(255,255,255,.93); backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.95); border-radius:14px; padding:8px 14px 8px 12px;
  box-shadow:0 10px 26px rgba(8,60,40,.2); white-space:nowrap; }
.ct-cimke b{ font-size:14px; color:#111815; }
.ct-cimke small{ font-size:11.5px; color:#5f6e66; }
.ct-cimke.rejtett{ position:absolute; left:calc(100% + 8px); top:calc(50% - 5px); translate:0 -50%; opacity:0; pointer-events:none; transition:opacity .18s; }
.ct-mk-b:hover .ct-cimke.rejtett, .ct-mk.nyitott .ct-cimke.rejtett{ opacity:1; }

.ct-pop{ position:absolute; left:50%; bottom:calc(100% + 6px); transform:translateX(-50%); width:270px; background:rgba(255,255,255,.97);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-radius:16px; box-shadow:0 22px 50px rgba(8,60,40,.28);
  padding:10px; cursor:default; animation:ctPopBe .22s ease-out; color:#111815; text-align:left; }
@keyframes ctPopBe{ from{ opacity:0; translate:0 6px; } to{ opacity:1; translate:0 0; } }
.ct-pop-fej{ display:flex; align-items:center; gap:8px; padding:2px 4px 8px; border-bottom:1px solid #e6eae7; margin-bottom:6px; }
.ct-pop-fej b{ font-size:13.5px; } .ct-pop-fej span{ font-size:11px; color:#5f6e66; margin-right:auto; }
.ct-pop-fej button{ border:0; background:#f1f4f2; width:24px; height:24px; border-radius:50%; cursor:pointer; font-size:15px; line-height:1; }
.ct-pop-lista{ display:grid; gap:4px; max-height:230px; overflow:auto; }
.ct-pop-sor{ display:flex; align-items:center; gap:8px; padding:5px 4px; border-radius:10px; }
.ct-pop-sor.kiemelt{ background:#edf7f1; }
.ct-av-k{ width:32px; height:32px; font-size:11px; }
.ct-pop-nev{ font-size:12.5px; font-weight:600; margin-right:auto; }
.ct-pop-ker{ display:block; font-size:10.5px; font-weight:500; color:#5f6e66; } .ct-pop-nev em{ font-style:normal; color:#5f6e66; font-weight:400; }

.ct-betolt{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:20; background:rgba(255,255,255,.94);
  padding:12px 18px; border-radius:14px; font-size:13px; color:#33424c; box-shadow:0 10px 30px rgba(0,0,0,.1); text-align:center; max-width:80%; }
.ct-statok{ position:absolute; left:14px; bottom:14px; z-index:10; display:flex; gap:10px; }
.ct-stat{ display:flex; align-items:center; gap:12px; background:rgba(255,255,255,.92); backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px); border-radius:16px; padding:12px 16px; box-shadow:0 10px 26px rgba(8,60,40,.14); color:#111815; }
.ct-stat-ikon{ font-size:20px; }
.ct-stat small{ display:block; font-size:11px; color:#5f6e66; }
.ct-stat b{ font-family:var(--betu-cim, inherit); font-size:22px; line-height:1.1; }
.ct-stat em{ font-style:normal; font-size:10.5px; font-weight:700; color:#12724a; background:#daeee2; border-radius:999px; padding:2px 8px; }
.ct-zoom{ position:absolute; right:14px; bottom:34px; z-index:10; display:grid; gap:8px; }
.ct-zoom button{ width:40px; height:40px; border:0; border-radius:12px; background:rgba(255,255,255,.94); color:#12724a;
  font-size:20px; cursor:pointer; box-shadow:0 8px 20px rgba(8,60,40,.16); display:flex; align-items:center; justify-content:center; }
.ct-zoom button:hover{ background:#fff; }
.ct-zoom .ct-nezetgomb{ font-size:12.5px; font-weight:800; letter-spacing:.02em; }
.ct-zoom .ct-nezetgomb.on{ background:linear-gradient(135deg,#1aa568,#12724a); color:#fff; }

.ct-banner{ display:flex; align-items:center; gap:22px; overflow:hidden; padding:0 26px 0 0; min-height:136px;
  background:linear-gradient(100deg, var(--surface,#fff) 0%, #edf7f1 100%); }
.ct-banner-kep{ align-self:stretch; width:34%; min-width:180px; background:url('../img/csapat-terkep-banner.webp') center/cover;
  -webkit-mask-image:linear-gradient(90deg,#000 55%,transparent); mask-image:linear-gradient(90deg,#000 55%,transparent); }
.ct-banner-szoveg{ flex:1; padding:18px 0; }
.ct-banner h3{ margin:0 0 6px; font-family:var(--betu-cim, inherit); font-size:18px; color:#0b2c1c; }
.ct-banner p{ margin:0 0 12px; font-size:12.5px; color:var(--muted,#5f6e66); max-width:460px; line-height:1.55; }
.ct-cta{ border:0; border-radius:999px; padding:9px 20px; background:linear-gradient(135deg,#1aa568,#12724a); color:#fff;
  font:inherit; font-size:12.5px; font-weight:700; cursor:pointer; box-shadow:0 8px 18px rgba(18,114,74,.28); }
.ct-kezi{ font-family:'Caveat', cursive; font-size:30px; line-height:.95; color:#12724a; transform:rotate(-8deg); white-space:nowrap; }

.ct-oldal{ padding:18px; position:sticky; top:12px; display:flex; flex-direction:column; max-height:calc(100vh - 40px); }
.ct-oldal-fej{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.ct-oldal-fej h2{ margin:0; font-family:var(--betu-cim, inherit); font-size:20px; }
.ct-db{ font-size:11.5px; font-weight:700; background:var(--bg,#f4f6f4); border-radius:999px; padding:4px 10px; }
.ct-kereso{ display:flex; align-items:center; gap:8px; border:1px solid var(--line,#e6eae7); border-radius:12px; padding:9px 12px;
  color:var(--muted,#5f6e66); margin-bottom:8px; }
.ct-kereso input{ border:0; outline:0; background:none; font:inherit; font-size:12.5px; flex:1; color:var(--ink,#111815); }
.ct-lista{ overflow:auto; display:grid; gap:2px; margin:0 -6px; padding:0 6px; flex:1; min-height:120px; }
.ct-sor{ display:flex; align-items:center; gap:10px; border:0; background:none; padding:9px 6px; border-radius:12px; cursor:pointer;
  font:inherit; text-align:left; color:var(--ink,#111815); border-bottom:1px solid var(--line,#eef1ef); }
.ct-sor:hover, .ct-sor.on{ background:var(--bg,#f4f6f4); }
.ct-av-l{ width:40px; height:40px; font-size:13px; box-shadow:0 0 0 2px var(--surface,#fff), 0 0 0 3px #daeee2; }
.ct-sor-t{ flex:1; min-width:0; display:grid; }
.ct-sor-t b{ font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ct-sor-t b em{ font-style:normal; font-weight:400; color:var(--muted,#5f6e66); }
.ct-sor-t small{ font-size:11px; color:var(--muted,#5f6e66); display:flex; align-items:center; gap:5px; white-space:nowrap; overflow:hidden; }
.ct-pont{ width:6px; height:6px; border-radius:50%; background:#1aa568; flex-shrink:0; }
.ct-pont.nincs{ background:#d0a33a; }
.ct-jel{ font-size:10px; font-weight:700; border-radius:999px; padding:3px 9px; background:#e7f5ec; color:#12724a; white-space:nowrap; }
.ct-jel.kek{ background:#e6f0fb; color:#2563eb; }
.ct-sor > svg{ color:var(--muted,#93a29a); flex-shrink:0; }
.ct-ures{ padding:24px 8px; text-align:center; font-size:12.5px; color:var(--muted,#5f6e66); }
.ct-hozzaad{ width:100%; margin-top:12px; display:flex; align-items:center; gap:12px; border:1px solid #cfe6db; border-radius:16px;
  background:linear-gradient(135deg,#f2faf5,#e5f4eb); padding:12px 14px; cursor:pointer; font:inherit; text-align:left; color:#0b2c1c; }
.ct-hozzaad b{ display:block; font-size:13px; } .ct-hozzaad small{ font-size:11px; color:#5f6e66; }
.ct-hozzaad span:nth-child(2){ flex:1; }
.ct-hozzaad-ikon{ width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,#1aa568,#12724a); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:17px; flex-shrink:0; }
@media (max-width:1180px){
  .ct{ grid-template-columns:1fr; }
  .ct-oldal{ position:static; max-height:none; }
  .ct-lista{ max-height:420px; }
}
@media (max-width:720px){
  .ct-szinpad{ height:480px; }
  .ct-statok{ left:10px; bottom:10px; flex-direction:column; gap:6px; }
  .ct-stat{ padding:8px 12px; } .ct-stat b{ font-size:18px; }
  .ct-banner{ flex-direction:column; align-items:stretch; padding:0; }
  .ct-banner-kep{ width:100%; height:120px; -webkit-mask-image:linear-gradient(#000 60%,transparent); mask-image:linear-gradient(#000 60%,transparent); }
  .ct-banner-szoveg{ padding:0 18px 18px; } .ct-kezi{ display:none; }
  .ct-szuro{ padding:6px 10px; font-size:11px; }
}
@media (prefers-reduced-motion: reduce){
  .ct-talp i, .ct-mk-b, .ct-felho{ animation:none !important; }
}

/*  ── Csapat térkép: teljes oldal + telefon ───────────────────────
    A térkép kitölti a rendelkezésre álló szélességet és magasságot;
    a banner a görgetés alá kerül.  */
#view-csapat-terkep.view{ max-width:none; }
.ct-fo{ grid-template-columns:minmax(0,1fr); }
.ct-fo > *, .ct-oldal{ min-width:0; }
.ct{ grid-template-columns:minmax(0,1fr) 330px; }
.ct-szinpad{ height:max(520px, calc(100vh - 205px)); }
@supports (height:100dvh){ .ct-szinpad{ height:max(520px, calc(100dvh - 205px)); } }
.ct-oldal{ max-height:max(560px, calc(100vh - 100px)); }
@media (max-width:1180px){
  .ct{ grid-template-columns:minmax(0,1fr); }
  .ct-szinpad{ height:max(460px, calc(100vh - 230px)); }
  @supports (height:100dvh){ .ct-szinpad{ height:max(460px, calc(100dvh - 230px)); } }
  .ct-oldal{ max-height:none; }
}
@media (max-width:720px){
  .ct{ gap:12px; }
  .ct-fo{ gap:12px; }
  .ct-kartya{ border-radius:18px; }
  .ct-terkepkartya{ padding:10px 10px 10px; }
  .ct-fej{ gap:8px; margin-bottom:10px; padding:2px 4px 0; }
  .ct-cim{ min-width:0; flex:1; }
  .ct-cim h1{ font-size:18px; } .ct-cim p{ font-size:11.5px; }
  .ct-regio{ order:2; }
  .ct-regiogomb{ padding:7px 10px; font-size:11.5px; }
  .ct-szurok{ order:3; width:100%; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  .ct-szurok::-webkit-scrollbar{ display:none; }
  .ct-szuro{ flex:0 0 auto; white-space:nowrap; }
  .ct-szinpad{ height:max(420px, calc(100vh - 250px)); border-radius:14px; }
  @supports (height:100dvh){ .ct-szinpad{ height:max(420px, calc(100dvh - 250px)); } }
  .ct-szinpad::after{ border-radius:14px; box-shadow:inset 0 0 34px 10px rgba(232,244,247,.8); }
  /*  a számok felül, kis kapszulákban — ne takarják a térképet  */
  .ct-statok{ top:10px; bottom:auto; left:10px; flex-direction:row; gap:6px; }
  .ct-stat{ gap:6px; padding:6px 10px; border-radius:12px; }
  .ct-stat-ikon{ display:none; }
  .ct-stat small{ font-size:9.5px; } .ct-stat b{ font-size:15px; }
  .ct-stat em{ font-size:9.5px; padding:1px 6px; }
  .ct-zoom{ right:10px; bottom:30px; gap:6px; }
  .ct-zoom button{ width:36px; height:36px; font-size:18px; border-radius:10px; }
  .ct-map .maplibregl-ctrl-bottom-right{ right:52px; }
  .ct-map .maplibregl-ctrl-attrib{ font-size:9px; max-width:calc(100% - 20px); }
  /*  jelölők kisebben  */
  .ct-av{ width:38px; height:38px; font-size:13px; border-width:2px; }
  .ct-mk.nagy .ct-av, .ct-mk.nagy .ct-halom .ct-av{ width:42px; height:42px; font-size:14px; }
  .ct-mk.nagy .ct-mk-b{ translate:calc(50% - 21px) 0; }
  .ct-mk.nagy .ct-mk-b::after{ left:21px; }
  .ct-halom-e + .ct-halom-e{ margin-left:-15px; }
  .ct-tavoli .ct-av{ width:30px; height:30px; font-size:11px; }
  .ct-tavoli .ct-mk.nagy .ct-av, .ct-tavoli .ct-mk.nagy .ct-halom .ct-av{ width:32px; height:32px; font-size:11px; }
  .ct-tavoli .ct-mk.nagy .ct-mk-b{ translate:calc(50% - 16px) 0; }
  .ct-tavoli .ct-mk.nagy .ct-mk-b::after{ left:16px; }
  .ct-tavoli .ct-halom-e + .ct-halom-e{ margin-left:-11px; }
  .ct-cimke{ padding:5px 10px 5px 9px; border-radius:11px; }
  .ct-cimke b{ font-size:12px; } .ct-cimke small{ font-size:10.5px; }
  .ct-pop{ width:min(260px, 78vw); }
  /*  országos nézetben a címkék csak koppintásra — ne zsúfolják a kis képernyőt  */
  .ct-tavoli .ct-mk:not(.nyitott) .ct-cimke{ display:none; }
  .ct-oldal{ padding:14px; }
  .ct-lista{ max-height:360px; }
  .ct-banner-szoveg h3{ font-size:16px; }
}

/*  Toborzás — időpont blokk (az ügyfélkártya mintájára)  */
.hr-appt-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:start; }
@media (max-width:1100px){ .hr-appt-grid{ grid-template-columns:1fr; } }

/*  Ügyfélkezelő listanézet — rendező gombok  */
.crm-rend-sor{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-top:10px; padding-top:10px; border-top:1px dashed var(--line); }
.crm-rend-cim{ font-size:11px; font-weight:700; color:var(--muted); margin-right:2px; }
.crm-rend{
  border:1px solid var(--line); background:var(--surface); color:var(--ink);
  border-radius:25px; padding:4px 12px; font-size:11px; font-weight:600; cursor:pointer;
  transition:background .12s ease, border-color .12s ease;
}
.crm-rend:hover{ border-color:var(--green-500); }
.crm-rend.on{ background:var(--green-100); border-color:var(--green-600); color:var(--green-700); }

/* ══ STRUKTÚRA TÉRKÉP ═════════════════════════════════════════════
   Csapatom (fókusz) nézet + teljes fa — a Csapat térkép keretében  */
#view-orgtree.view{ max-width:none; }
.st{ display:grid; grid-template-columns:minmax(0,1fr); gap:18px; align-items:start; }
.st-kartya{ background:var(--surface,#fff); border:1px solid var(--line,#e6eae7); border-radius:22px; box-shadow:0 14px 40px rgba(11,44,28,.06); min-width:0; }
.st-fo{ padding:18px 18px 16px; }
.st-fej{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.st-cim{ margin-right:auto; min-width:0; }
.st-cim h1{ font-family:var(--betu-cim, inherit); font-size:22px; margin:0; letter-spacing:-.01em; }
.st-cim p{ margin:2px 0 0; font-size:12.5px; color:var(--muted,#5f6e66); }
.st-chipsor{ display:flex; gap:4px; background:var(--bg,#f4f6f4); border-radius:999px; padding:4px; flex-wrap:wrap; }
.st-chip{ border:0; background:none; border-radius:999px; padding:7px 14px; font:inherit; font-size:12px; font-weight:600; color:var(--muted,#5f6e66); cursor:pointer; white-space:nowrap; transition:.2s; }
.st-chip:hover{ color:var(--ink,#111815); }
.st-chip.on{ background:linear-gradient(135deg,#1aa568,#12724a); color:#fff; box-shadow:0 6px 16px rgba(18,114,74,.3); }
.st-valaszto{ display:flex; align-items:center; gap:7px; white-space:nowrap; border:1px solid var(--line,#e6eae7); background:var(--surface,#fff); border-radius:12px; padding:7px 11px; font-size:12px; color:var(--ink,#111815); }
.st-valaszto select{ border:0; background:none; font:inherit; font-size:12px; font-weight:600; outline:0; cursor:pointer; color:inherit; max-width:220px; }
.st-regigomb{ border:0; background:none; font:inherit; font-size:11.5px; color:var(--muted,#5f6e66); text-decoration:underline; cursor:pointer; padding:4px; }

.st-tabla{ position:relative; height:max(560px, calc(100vh - 205px)); border-radius:18px; overflow:hidden;
  background:var(--bg,#f1f3ef); border:1px solid var(--line,#e6eae7); }
@supports (height:100dvh){ .st-tabla{ height:max(560px, calc(100dvh - 205px)); } }
.st-gorgeto{ position:absolute; inset:0; overflow:auto; padding:18px 18px 96px; }
.st-betolt{ margin:80px auto; max-width:420px; text-align:center; background:rgba(255,255,255,.94); border-radius:14px; padding:14px 18px; font-size:13px; color:#33424c; box-shadow:0 10px 30px rgba(0,0,0,.08); position:relative; }

.st-lanc{ position:relative; display:flex; align-items:center; gap:6px; flex-wrap:wrap; justify-content:center; margin:0 auto 16px; }
.st-lanc-e{ display:flex; align-items:center; gap:7px; border:1px solid #e3ebe6; background:rgba(255,255,255,.92); border-radius:999px;
  padding:4px 12px 4px 4px; cursor:pointer; font:inherit; font-size:12px; font-weight:600; color:#111815; transition:.15s; max-width:240px; }
.st-lanc-e span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.st-lanc-e:hover{ border-color:#1aa568; }
.st-lanc-e.akt{ background:#12724a; color:#fff; border-color:#12724a; cursor:default; }
.st-lanc-nyil{ color:#93a29a; font-size:13px; }

.st-av{ border-radius:50%; object-fit:cover; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; font-weight:700; color:#fff; background:#12724a; }
.st-av-xs{ width:26px; height:26px; font-size:10px; }
.st-av-s{ width:40px; height:40px; font-size:13px; }
.st-av-m{ width:54px; height:54px; font-size:17px; border:3px solid #fff; box-shadow:0 0 0 2.5px var(--gyuru,#10b981), 0 8px 18px rgba(8,60,40,.18); }
.st-av-l{ width:84px; height:84px; font-size:26px; border:4px solid #fff; box-shadow:0 0 0 3px var(--gyuru,#10b981), 0 14px 30px rgba(8,60,40,.22); }
.en .st-av-m, .en .st-av-l{ box-shadow:0 0 0 3px #f5b83d, 0 0 20px rgba(245,184,61,.6), 0 10px 22px rgba(8,60,40,.2); }

.st-jel{ font-size:10px; font-weight:700; border-radius:999px; padding:3px 9px; background:#e7f5ec; color:#12724a; white-space:nowrap; }
.st-jel.kek{ background:#e6f0fb; color:#2563eb; }
.st-jel.narancs{ background:#fdf0e1; color:#b45309; }
.st-jel.lila{ background:#fbe8f1; color:#b4306b; }

.st-fokusz{ position:relative; max-width:580px; margin:0 auto; background:#fff; color:#111815; border:1px solid #e3ebe6; border-radius:22px;
  box-shadow:0 18px 44px rgba(11,44,28,.12); padding:18px 20px; display:grid; grid-template-columns:auto minmax(0,1fr); gap:16px; align-items:center; }
.st-nev{ font-family:var(--betu-cim, inherit); font-size:20px; font-weight:700; line-height:1.15; }
.st-nev em, .st-tk-nev em, .st-sor-t em{ font-style:normal; font-weight:400; color:#5f6e66; font-size:.8em; }
.st-alcim{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin-top:5px; }
.st-gombok{ grid-column:1/-1; display:flex; gap:8px; flex-wrap:wrap; }
.st-gomb{ border:1px solid #e3ebe6; background:#fff; color:#111815; border-radius:11px; padding:7px 12px; font:inherit; font-size:12px; font-weight:600; cursor:pointer; }
.st-gomb:hover{ border-color:#1aa568; }

.st-es{ display:grid; gap:6px; margin-top:10px; }
.st-es-sor{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.st-es-szam{ font-family:var(--betu-cim, inherit); font-weight:700; font-size:22px; color:#12724a; line-height:1; }
.st-es-egys{ font-size:11.5px; font-weight:700; color:#12724a; }
.st-es-terv{ font-size:11.5px; color:#5f6e66; }
.st-es-sav{ height:7px; border-radius:99px; background:#e6efe9; overflow:hidden; }
.st-es-sav i{ display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,#1aa568,#12724a); }
.st-es-sav i.kesz{ background:linear-gradient(90deg,#f5b83d,#d99a1c); }
.st-es-csapat{ font-size:11.5px; color:#5f6e66; } .st-es-csapat b{ color:#111815; }
.st-akad{ display:flex; gap:5px; flex-wrap:wrap; margin-top:8px; }
.st-akad span{ font-size:10px; font-weight:700; border-radius:7px; padding:2px 7px; background:#f1f5f2; color:#5f6e66; }
.st-akad .cs{ background:#eef2ff; color:#4338ca; }

.st-osszekoto{ width:2px; height:26px; margin:0 auto; background:linear-gradient(#1aa568,rgba(26,165,104,.2)); position:relative; }
.st-alcimsor{ position:relative; display:flex; align-items:center; justify-content:center; gap:10px; margin:0 0 12px; font-size:12px; color:#5f6e66; font-weight:600; }
.st-alcimsor::before, .st-alcimsor::after{ content:''; height:1px; flex:1; max-width:200px; background:linear-gradient(90deg,transparent,#c9ddd1); }
.st-alcimsor::after{ background:linear-gradient(90deg,#c9ddd1,transparent); }

.st-racs{ position:relative; display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px; max-width:1400px; margin:0 auto; }
.st-tk{ position:relative; background:rgba(255,255,255,.97); color:#111815; border:1px solid #e3ebe6; border-top:3px solid var(--csapatszin,#1aa568); border-radius:18px; padding:14px; cursor:pointer;
  transition:transform .15s, box-shadow .15s, border-color .15s; animation:stBe .35s ease both; }
.st-tk:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(11,44,28,.12); }
.st-tk-fej{ display:flex; gap:10px; align-items:center; }
.st-tk-nev{ font-weight:700; font-size:13.5px; line-height:1.2; }
.st-tk-al{ display:flex; gap:5px; align-items:center; margin-top:4px; flex-wrap:wrap; }
.st-tk .st-es-szam{ font-size:19px; }
.st-tk-lab{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:10px; padding-top:9px; border-top:1px dashed #e3ebe6; }
.st-tk-csapat{ font-size:11.5px; font-weight:700; color:#12724a; }
.st-tk-csapat.nincs{ color:#93a29a; font-weight:500; }
.st-tk.jelolt{ border-style:dashed; border-top-style:dashed; background:rgba(255,255,255,.75); }
.st-tk.jelolt .st-av{ opacity:.75; }
.st-tk.halvany{ opacity:.55; }
/*  Csapatom: a mentoráltak csapata lenyílik a mentor sávja alatt  */
.st-csoport{ position:relative; display:grid; gap:12px; max-width:1400px; margin:0 auto; }
.st-csoport.belso{ margin:10px 0 4px 26px; padding-left:18px; border-left:2px dashed #b9d6c5; }
.st-ag{ display:grid; gap:0; }
.st-csoport > .st-racs{ margin:0; width:100%; max-width:none; }
.st-tk.sav{ display:grid; grid-template-columns:minmax(230px,1.1fr) minmax(220px,1.5fr) auto; align-items:center; gap:18px; padding:12px 16px; }
.st-tk.sav:hover{ transform:none; }
.st-tk.sav .st-es{ margin-top:0; }
.st-tk.sav .st-tk-lab{ margin:0; padding:0; border:0; flex-direction:column; align-items:flex-end; gap:6px; }
.st-ag.nyitva > .st-tk.sav{ box-shadow:0 10px 24px rgba(11,44,28,.08); }
.st-tk-gombok{ display:flex; align-items:center; gap:6px; }
.st-lenyit{ font-size:12px; font-weight:700; color:#12724a; background:#e7f5ec; border-radius:999px; padding:5px 11px; white-space:nowrap; }
.st-mini{ border:1px solid #e3ebe6; background:#fff; border-radius:9px; width:30px; height:28px; cursor:pointer; font-size:13px; }
.st-mini:hover{ border-color:#1aa568; }
.st-tk.kiemelt{ border-color:#f5b83d; animation:stKiemel 1.4s ease 3; }
@keyframes stKiemel{ 0%,100%{ box-shadow:0 0 0 0 rgba(245,184,61,0); } 50%{ box-shadow:0 0 0 7px rgba(245,184,61,.38); } }
@keyframes stBe{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

.st-statok{ position:absolute; left:14px; bottom:14px; display:flex; gap:10px; z-index:5; flex-wrap:wrap; max-width:calc(100% - 200px); }
.st-stat{ display:flex; align-items:center; gap:11px; background:rgba(255,255,255,.94); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-radius:16px; padding:10px 15px; box-shadow:0 10px 26px rgba(8,60,40,.14); color:#111815; }
.st-stat-ikon{ font-size:18px; }
.st-stat small{ display:block; font-size:11px; color:#5f6e66; } .st-stat b{ font-family:var(--betu-cim, inherit); font-size:20px; line-height:1.1; }
.st-stat em{ font-style:normal; font-size:10.5px; font-weight:700; color:#12724a; background:#daeee2; border-radius:999px; padding:2px 8px; }
.st-jobbgombok{ position:absolute; right:14px; bottom:14px; display:grid; gap:8px; z-index:5; }
.st-jobbgombok button{ height:40px; min-width:40px; padding:0 12px; border:0; border-radius:12px; background:rgba(255,255,255,.95); color:#12724a;
  font:inherit; font-size:12px; font-weight:700; cursor:pointer; box-shadow:0 8px 20px rgba(8,60,40,.16); }

.st-fakont{ position:absolute; inset:0; overflow:hidden; cursor:grab; touch-action:none; }
.st-fakont.huz{ cursor:grabbing; }
.st [hidden]{ display:none !important; }
/*  Struktúra térkép — a régi fa kártyái, egységgel  */
.st-fa .ot-wrap{ padding:10px 12px 40px; }
.st-ot-es{ margin-top:6px; font-size:10.5px; color:var(--muted,#5f6e66); line-height:1.35; }
.st-ot-es b{ font-family:var(--betu-cim, inherit); font-size:14px; color:var(--green-700,#12724a); }
.st-ot-es small{ font-size:10px; color:var(--muted,#5f6e66); }
.st-ot-es .st-ot-cs{ display:block; }
.st-ot-sav{ display:block; height:4px; margin:4px 14px 0; border-radius:9px; background:var(--line,#e6eae7); overflow:hidden; }
.st-ot-sav i{ display:block; height:100%; border-radius:9px; background:linear-gradient(90deg,#1aa568,#12724a); }
.st-ot-nyitsor{ position:relative; height:0; z-index:3; }
.st-ot-nyit{ position:absolute; left:50%; top:-9px; transform:translateX(-50%); min-width:20px; height:18px; padding:0 7px; border-radius:999px;
  border:1px solid var(--line,#e6eae7); background:var(--surface,#fff); color:var(--green-700,#12724a); font:inherit; font-size:10.5px; font-weight:800;
  line-height:16px; cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,.08); white-space:nowrap; }
.st-ot-nyit:hover{ border-color:var(--green-500,#1aa568); }
.st-fa .ot-card.st-kiemelt{ border-color:#f5b83d; animation:stKiemel 1.4s ease 3; }
.st-fakont{ touch-action:none; }
/*  Kereső a fejlécben — a találatok lenyíló listában  */
.st-fejkereso{ position:relative; display:flex; align-items:center; gap:8px; border:1px solid var(--line,#e6eae7); background:var(--surface,#fff);
  border-radius:12px; padding:7px 11px; color:var(--muted,#5f6e66); min-width:220px; flex:0 1 260px; }
.st-fejkereso input{ border:0; outline:0; background:none; font:inherit; font-size:12.5px; flex:1; min-width:0; color:var(--ink,#111815); }
.st-fejkereso:focus-within{ border-color:#1aa568; box-shadow:0 0 0 3px rgba(26,165,104,.15); }
.st-talalatok{ position:absolute; left:0; top:calc(100% + 6px); z-index:60; width:max(100%, 340px); max-height:360px; overflow:auto;
  background:var(--surface,#fff); border:1px solid var(--line,#e6eae7); border-radius:14px; box-shadow:0 18px 40px rgba(0,0,0,.14); padding:6px; display:grid; gap:2px; }
.st-talalat{ display:flex; align-items:center; gap:9px; border:0; background:none; padding:7px 8px; border-radius:10px; cursor:pointer; text-align:left; width:100%; font:inherit; color:var(--ink,#111815); }
.st-talalat:hover, .st-talalat:focus{ background:var(--bg,#f4f6f4); outline:0; }
.st-talalat-t{ flex:1; min-width:0; display:grid; }
.st-talalat-t b{ font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.st-talalat-t b em{ font-style:normal; font-weight:400; color:var(--muted,#5f6e66); }
.st-talalat-t small{ font-size:10.5px; color:var(--muted,#5f6e66); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.st-fcs.kiemelt{ border-color:#f5b83d; animation:stKiemel 1.4s ease 3; }
.st-fa{ position:absolute; left:0; top:0; transform-origin:0 0; padding:12px 24px 90px; transition:transform .35s ease; }
.st-fa ul{ list-style:none; margin:0; padding:22px 0 0; display:flex; justify-content:center; position:relative; }
.st-fa > ul{ padding-top:0; }
.st-fa li{ position:relative; padding:22px 8px 0; display:flex; flex-direction:column; align-items:center; }
.st-fa li::before, .st-fa li::after{ content:''; position:absolute; top:0; right:50%; width:50%; height:22px; border-top:2px solid #b9d6c5; }
.st-fa li::after{ right:auto; left:50%; border-left:2px solid #b9d6c5; }
.st-fa li:only-child::before, .st-fa li:only-child::after{ display:none; }
.st-fa li:only-child{ padding-top:0; }
.st-fa li:first-child::before, .st-fa li:last-child::after{ border:0 none; }
.st-fa li:last-child::before{ border-right:2px solid #b9d6c5; border-radius:0 10px 0 0; }
.st-fa li:first-child::after{ border-radius:10px 0 0 0; }
.st-fa ul ul::before{ content:''; position:absolute; top:0; left:50%; height:22px; border-left:2px solid #b9d6c5; }
.st-fa > ul > li{ padding-top:0; } .st-fa > ul > li::before, .st-fa > ul > li::after{ display:none; }
.st-fcs{ background:#fff; color:#111815; border:1px solid #e3ebe6; border-top:4px solid var(--csapatszin,#12724a); border-radius:14px; padding:9px 10px; width:160px;
  text-align:center; box-shadow:0 8px 18px rgba(11,44,28,.08); cursor:pointer; }
.st-fcs .st-av-s{ margin:0 auto 5px; box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--gyuru); display:flex; }
.st-fcs.en .st-av-s{ box-shadow:0 0 0 2px #fff, 0 0 0 4px #f5b83d; }
.st-fcs b{ display:block; font-size:12px; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.st-fcs-jel{ display:flex; justify-content:center; gap:4px; margin-top:4px; }
.st-fes{ font-family:var(--betu-cim, inherit); font-weight:700; color:#12724a; font-size:14px; margin-top:3px; }
.st-fes small{ font-family:var(--font, inherit); font-size:10px; color:#5f6e66; font-weight:600; }
.st-fcs.jelolt{ border-style:dashed; }
/*  csapat nélküli csapattagok egymás alatt, egy dobozban  */
.st-fa ul.oszlop{ flex-direction:column; align-items:stretch; gap:6px; padding:10px; background:rgba(255,255,255,.55);
  border:1.5px dashed #b9d6c5; border-radius:16px; }
.st-fa ul.oszlop::before{ display:none; }
.st-fa ul.oszlop > li{ padding:0; }
.st-fa ul.oszlop > li::before, .st-fa ul.oszlop > li::after{ display:none; }
.st-fcs.sor{ width:230px; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:8px; text-align:left;
  padding:7px 9px; border-top-width:1px; border-left:4px solid var(--csapatszin,#12724a); border-radius:12px; }
.st-fcs.sor .st-av-xs{ box-shadow:0 0 0 2px #fff, 0 0 0 3px var(--gyuru); }
.st-fcs.sor.en .st-av-xs{ box-shadow:0 0 0 2px #fff, 0 0 0 3px #f5b83d; }
.st-fcs-t{ display:grid; justify-items:start; gap:2px; min-width:0; }
.st-fcs-t .st-jel{ font-size:9px; padding:1px 7px; }
.st-fcs.sor .st-fes{ margin:0; font-size:13px; white-space:nowrap; text-align:right; }
.st-fcs.sor .st-fes small{ font-size:9.5px; }
.st-nyit{ margin-top:6px; border:1px solid #cfe6db; background:#e7f5ec; color:#12724a; border-radius:999px; font:inherit; font-size:10.5px; font-weight:700; padding:2px 9px; cursor:pointer; }
.st-minimap{ position:absolute; left:14px; bottom:88px; width:170px; height:104px; background:rgba(255,255,255,.92); border-radius:12px; box-shadow:0 8px 20px rgba(8,60,40,.14); z-index:5; overflow:hidden; padding:6px; cursor:pointer; }
.st-minimap canvas{ width:100%; height:100%; display:block; }
.st-minimap small{ position:absolute; left:8px; top:4px; font-size:9.5px; color:#5f6e66; font-weight:700; }

.st-sav{ padding:18px; position:sticky; top:12px; display:flex; flex-direction:column; max-height:max(560px, calc(100vh - 100px)); }
.st-sav-fej{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.st-sav-fej h2{ margin:0; font-family:var(--betu-cim, inherit); font-size:20px; }
.st-db{ font-size:11.5px; font-weight:700; background:var(--bg,#f4f6f4); border-radius:999px; padding:4px 10px; }
.st-kereso{ display:flex; align-items:center; gap:8px; border:1px solid var(--line,#e6eae7); border-radius:12px; padding:9px 12px; margin-bottom:10px; color:var(--muted,#5f6e66); }
.st-kereso input{ border:0; outline:0; background:none; font:inherit; font-size:12.5px; flex:1; color:var(--ink,#111815); min-width:0; }
.st-lista{ overflow:auto; display:grid; gap:2px; margin:0 -6px; padding:0 6px; flex:1; min-height:120px; align-content:start; }
.st-sor{ display:flex; align-items:center; gap:10px; border:0; background:none; padding:8px 6px; border-radius:12px; cursor:pointer; text-align:left; width:100%; font:inherit; color:var(--ink,#111815); }
.st-sor:hover, .st-sor.on{ background:var(--bg,#f4f6f4); }
.st-sor .st-av-s{ box-shadow:0 0 0 2px var(--surface,#fff), 0 0 0 3px #daeee2; }
.st-sor-t{ flex:1; min-width:0; display:grid; }
.st-sor-t b{ font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.st-sor-t small{ font-size:11px; color:var(--muted,#5f6e66); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.st-sor-es{ font-family:var(--betu-cim, inherit); font-size:13px; font-weight:700; color:#12724a; white-space:nowrap; }
.st-sor-es small{ font-size:10px; color:var(--muted,#5f6e66); }
.st-ures{ padding:20px 8px; text-align:center; font-size:12.5px; color:var(--muted,#5f6e66); }
.st-sav-lab{ margin-top:10px; font-size:11px; color:var(--muted,#5f6e66); line-height:1.5; background:var(--bg,#f6faf7); border-radius:12px; padding:9px 11px; }

@media (max-width:1180px){
  .st{ grid-template-columns:minmax(0,1fr); }
  .st-sav{ position:static; max-height:none; } .st-lista{ max-height:420px; }
}
@media (max-width:720px){
  .st{ gap:12px; }
  .st-kartya{ border-radius:18px; }
  .st-fo{ padding:10px; }
  .st-fej{ gap:8px; padding:2px 4px 0; }
  .st-cim{ flex:1; } .st-cim h1{ font-size:18px; } .st-cim p{ font-size:11.5px; }
  .st-fejkereso{ order:2; flex:1 1 100%; min-width:0; }
  .st-valaszto{ order:4; width:100%; } .st-valaszto select{ flex:1; max-width:none; }
  #stSzurok{ order:3; width:100%; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
  #stSzurok::-webkit-scrollbar{ display:none; }
  .st-nezetvalto{ order:3; }
  .st-regigomb{ display:none; }
  .st-tabla{ height:max(440px, calc(100vh - 250px)); border-radius:14px; }
  @supports (height:100dvh){ .st-tabla{ height:max(440px, calc(100dvh - 250px)); } }
  .st-statok{ top:8px; bottom:auto; left:8px; gap:5px; max-width:calc(100% - 16px); }
  .st-stat{ padding:5px 9px; gap:6px; border-radius:11px; } .st-stat b{ font-size:14px; } .st-stat-ikon{ display:none; }
  .st-stat small{ font-size:9.5px; }
  .st-jobbgombok{ right:8px; bottom:8px; gap:6px; }
  .st-jobbgombok button{ height:36px; min-width:36px; }
  .st-minimap{ display:none; }
}
@media (prefers-reduced-motion: reduce){ .st-tk, .st-tk.kiemelt, .st-fa{ animation:none !important; transition:none !important; } }

/* ══ LIVE MEETING PRO — átirat beszélőkkel, jelölők, hangszint ══ */
#liveTranscriptText .lm-sor{ display:grid; grid-template-columns:44px 82px 1fr; gap:8px; padding:6px 8px; border-radius:10px; align-items:baseline; }
#liveTranscriptText .lm-sor + .lm-sor{ margin-top:2px; }
#liveTranscriptText .lm-sor b{ font-size:11.5px; font-weight:800; }
#liveTranscriptText .lm-sor.mic b{ color:#12864B; }
#liveTranscriptText .lm-sor.tab{ background:rgba(37,99,235,0.05); }
#liveTranscriptText .lm-sor.tab b{ color:#2563EB; }
#liveTranscriptText .lm-sor span:last-child{ white-space:pre-wrap; }
#liveTranscriptText .lm-ido{ font-family:var(--betu-szam, inherit); font-size:10.5px; color:#94A3B8; }
#liveTranscriptText .lm-jelolo{ display:flex; gap:8px; align-items:baseline; margin:6px 0; padding:6px 10px; border-radius:10px;
  background:#FEF3C7; color:#92400E; font-size:12px; font-weight:700; }
#liveTranscriptText .lm-elonezet{ color:#64748B; font-style:italic; padding:6px 8px; }
.lm-eszkozsor{ margin-top:10px; padding-top:10px; border-top:1px solid rgba(0,0,0,0.06); display:grid; gap:8px; }
.lm-szintek{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.lm-szint{ display:flex; align-items:center; gap:6px; font-size:11px; color:#475569; }
.lm-szint em{ font-style:normal; font-weight:700; white-space:nowrap; }
.lm-szint i{ display:block; width:90px; height:6px; border-radius:9px; background:rgba(0,0,0,0.07); overflow:hidden; }
.lm-szint i b{ display:block; height:100%; width:100%; transform:scaleX(0); transform-origin:left center; background:linear-gradient(90deg,#93E5B4,#12864B); transition:transform .2s; will-change:transform; }
.lm-szint.ki{ opacity:.45; }
.lm-kis{ margin-left:auto; border:1px solid rgba(37,99,235,0.3); background:#fff; color:#2563EB; border-radius:10px; padding:6px 10px; font-size:11px; font-weight:700; cursor:pointer; }
.lm-jelolok{ display:flex; gap:6px; flex-wrap:wrap; }
.lm-jelolok button{ border:1px solid rgba(0,0,0,0.08); background:#fff; border-radius:999px; padding:5px 11px; font-size:11.5px; font-weight:600; cursor:pointer; color:#334155; }
.lm-jelolok button:hover{ border-color:#12864B; color:#12864B; }
.lm-figyelm{ font-size:11px; color:#B45309; min-height:14px; }
.lm-motor{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:11px; color:#64748B; font-weight:600; }
.lm-motor button{ border:1px solid rgba(0,0,0,0.08); background:#fff; border-radius:999px; padding:4px 10px; font-size:11px; font-weight:600; cursor:pointer; color:#475569; }
.lm-motor button.on{ background:#12864B; border-color:#12864B; color:#fff; }

/*  Rögzítés közben könnyített megjelenés: az elmosott üveghatás és a
    lüktető animációk sokat festenek újra — ezek kikapcsolnak  */
#liveMeetingOverlay.lm-konnyu, #liveMeetingOverlay.lm-konnyu *{ backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
#liveMeetingOverlay.lm-konnyu [style*="rgba(255,255,255,0.7)"]{ background:#fff !important; }
#liveMeetingOverlay.lm-konnyu [style*="animation"]{ animation:none !important; }
#liveTranscriptText{ contain:content; }

/* ══ Live Meeting Extra (js/live-meeting-extra.js) ══════════════ */
/*  Meeting közben a felugró ablakok és az értesítések a meeting fölött  */
body.lmx-aktiv #genericModalOverlay{ z-index:1960 !important; }
body.lmx-aktiv #toast{ z-index:2100 !important; }

.lmx-jobb{ min-height:0; }
.lmx-fulek{ position:sticky; top:0; z-index:2; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:4px; padding:4px;
  background:#fff; border:1px solid rgba(18,134,75,0.12); border-radius:14px; box-shadow:0 4px 14px rgba(0,0,0,0.04); }
.lmx-fulek button{ position:relative; border:none; background:transparent; border-radius:10px; padding:8px 4px; font-size:11.5px; font-weight:700;
  color:#64748B; cursor:pointer; font-family:inherit; white-space:nowrap; }
.lmx-fulek button.on{ background:#12864B; color:#fff; }
.lmx-fulek button i{ display:none; position:absolute; top:5px; right:6px; width:7px; height:7px; border-radius:50%; background:#F59E0B; }
.lmx-fulek button.jelez i{ display:block; }
.lmx-pane{ display:flex; flex-direction:column; gap:12px; }
.lmx-pane[hidden]{ display:none !important; }

.lmx-kartya{ background:#fff; border:1px solid rgba(0,0,0,0.06); border-radius:18px; padding:14px 16px; font-size:12px; color:#374151; line-height:1.5; }
.lmx-fej{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.lmx-fej b{ font-size:12.5px; color:#0F172A; }
.lmx-szamlalo{ margin-left:auto; font-size:11px; font-weight:800; color:#12864B; background:rgba(18,134,75,0.1); border-radius:999px; padding:2px 9px; }
.lmx-szamlalo.figy{ color:#B45309; background:#FEF3C7; }
.lmx-halvany{ color:#94A3B8; font-size:11.5px; }
.lmx-tipp{ color:#94A3B8; font-size:10.5px; margin-top:8px; line-height:1.5; }
.lmx-link{ margin-left:auto; border:none; background:none; color:#12864B; font-size:11px; font-weight:700; cursor:pointer; padding:0; font-family:inherit; }
.lmx-alcim{ font-size:11.5px; color:#475569; font-weight:600; margin-bottom:6px; }
.lmx-input{ border:1px solid rgba(0,0,0,0.1); border-radius:10px; padding:7px 10px; font-size:12px; font-family:inherit; background:#fff; color:#0F172A; min-width:0; box-sizing:border-box; }
.lmx-input.nagy{ flex:1; }
#lmxSugoKeres{ width:100%; }
.lmx-gomb{ border:1px solid rgba(0,0,0,0.1); background:#fff; color:#334155; border-radius:10px; padding:7px 12px; font-size:12px; font-weight:700; cursor:pointer; font-family:inherit; white-space:nowrap; }
.lmx-gomb:hover{ border-color:#12864B; color:#12864B; }
.lmx-gomb.ok{ background:#12864B; border-color:#12864B; color:#fff; }
.lmx-gomb.piros{ background:#DC2626; border-color:#DC2626; color:#fff; }
.lmx-gomb:disabled{ opacity:.6; cursor:default; }
.lmx-x{ border:none; background:rgba(0,0,0,0.05); width:28px; height:28px; border-radius:9px; cursor:pointer; font-size:13px; color:#475569; flex-shrink:0; }
.lmx-szeles{ width:100%; border:1px dashed rgba(18,134,75,0.35); background:rgba(18,134,75,0.04); color:#12864B; border-radius:14px; padding:10px; font-size:12px; font-weight:700; cursor:pointer; font-family:inherit; }
.lmx-fejgomb{ padding:9px 14px; background:#fff; border:1px solid rgba(18,134,75,0.2); border-radius:12px; font-size:12.5px; font-weight:700; color:#12864B; cursor:pointer; font-family:inherit; white-space:nowrap; }
.lmx-fejgomb:hover{ background:#F0F8F4; }

.lmx-tipusok{ display:flex; gap:5px; flex-wrap:wrap; margin-bottom:8px; }
.lmx-tipusok button{ border:1px solid rgba(0,0,0,0.08); background:#fff; border-radius:999px; padding:4px 11px; font-size:11.5px; font-weight:700; cursor:pointer; color:#475569; font-family:inherit; }
.lmx-tipusok button.on{ background:#0F172A; border-color:#0F172A; color:#fff; }
.lmx-sav{ height:5px; border-radius:9px; background:rgba(18,134,75,0.1); overflow:hidden; margin-bottom:8px; }
.lmx-sav i{ display:block; height:100%; background:linear-gradient(90deg,#93E5B4,#12864B); border-radius:9px; transition:width .4s; }
.lmx-kovetkezo{ font-size:11.5px; color:#B45309; background:#FFFBEB; border-radius:10px; padding:6px 9px; margin-bottom:8px; }
.lmx-kovetkezo.ok{ color:#12864B; background:#F0F8F4; }
.lmx-lista{ display:flex; flex-direction:column; gap:2px; }
.lmx-pipa{ display:flex; align-items:flex-start; gap:8px; padding:5px 6px; border-radius:9px; cursor:pointer; font-size:12px; color:#334155; }
.lmx-pipa:hover{ background:rgba(0,0,0,0.03); }
.lmx-pipa input{ margin:2px 0 0; accent-color:#12864B; flex-shrink:0; }
.lmx-pipa span{ flex:1; }
.lmx-pipa.kesz span{ color:#94A3B8; text-decoration:line-through; text-decoration-color:rgba(148,163,184,.6); }
.lmx-pipa em{ font-style:normal; font-size:10px; color:#12864B; font-weight:700; white-space:nowrap; font-family:var(--betu-szam, inherit); }

.lmx-briefing ul, .lmx-hiany ul{ margin:3px 0 0; padding-left:18px; }
.lmx-briefing li{ margin:1px 0; }
.lmx-briefing em{ font-style:normal; color:#94A3B8; font-size:10.5px; }
.lmx-b-sor{ margin-bottom:7px; }
.lmx-profil{ background:rgba(26,165,104,.06); border:1px solid rgba(26,165,104,.18); border-radius:12px; padding:9px 11px; margin-bottom:10px; }
.lmx-p-fej{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:4px; }
.lmx-p-alap{ list-style:none; padding-left:0 !important; margin:4px 0 6px !important; }
.lmx-p-alap li{ margin:2px 0; }
.lmx-p-cimke{ color:#94A3B8; font-size:11px; }
.lmx-p-csop{ margin-top:6px; }
.lmx-p-forras{ margin-top:8px; font-size:10.5px; letter-spacing:.04em; text-transform:uppercase; color:#94A3B8; }
.lmx-p-mony{ margin-top:8px; padding:8px 10px; border-radius:10px; background:rgba(255,255,255,.04); border:1px dashed rgba(148,163,184,.4); line-height:1.5; }
.lmx-b-kerdes{ margin-top:8px; padding:9px 11px; background:linear-gradient(135deg,#FFFBE6,#FEF3C7); border-radius:12px; color:#78350F; }
.lmx-jel{ color:#B45309; font-weight:700; }
.lmx-briefing[hidden], #lmxTenyek[hidden]{ display:none !important; }

.lmx-tenyek{ border-color:rgba(37,99,235,0.25); background:#F8FBFF; }
.lmx-teny{ display:flex; gap:8px; align-items:flex-start; padding:7px 0; border-top:1px solid rgba(0,0,0,0.05); }
.lmx-teny:first-of-type{ border-top:none; }
.lmx-teny > div:first-child{ flex:1; min-width:0; }
.lmx-idezet{ font-size:10.5px; color:#64748B; font-style:italic; margin-top:2px; }
.lmx-teny-gombok{ display:flex; gap:4px; flex-shrink:0; }
.lmx-teny-gombok button{ border:1px solid rgba(0,0,0,0.1); background:#fff; border-radius:8px; padding:4px 8px; font-size:11px; font-weight:700; cursor:pointer; color:#64748B; }
.lmx-teny-gombok button.ok{ background:#2563EB; border-color:#2563EB; color:#fff; }

.lmx-javaslatok{ display:flex; gap:6px; flex-wrap:wrap; }
.lmx-javaslatok:empty{ display:none; }
.lmx-chip{ display:inline-flex; align-items:center; gap:8px; border:1px solid rgba(18,134,75,0.25); background:#fff; color:#0F172A; border-radius:999px;
  padding:6px 8px 6px 13px; font-size:12px; cursor:pointer; font-family:inherit; box-shadow:0 2px 8px rgba(0,0,0,0.05); }
.lmx-chip:hover{ border-color:#12864B; }
.lmx-chip .t{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lmx-chip{ max-width:100%; }
.lmx-chip .x{ width:18px; height:18px; border-radius:50%; background:rgba(0,0,0,0.06); display:inline-flex; align-items:center; justify-content:center; font-size:9px; color:#64748B; }

.lmx-kifogas{ background:#fff; border:1px solid rgba(0,0,0,0.06); border-radius:14px; overflow:hidden; }
.lmx-kifogas.jelzett{ border-color:#F59E0B; }
.lmx-kifogas-fej{ width:100%; display:flex; align-items:center; gap:8px; border:none; background:none; padding:10px 14px; font-size:12.5px; font-weight:700; color:#0F172A; cursor:pointer; text-align:left; font-family:inherit; }
.lmx-kifogas-fej span{ margin-left:auto; color:#94A3B8; }
.lmx-kifogas-test{ padding:0 14px 12px; display:flex; flex-direction:column; gap:6px; }
.lmx-valasz{ font-size:12px; line-height:1.55; color:#334155; background:#F8FAFC; border-left:3px solid #12864B; border-radius:0 10px 10px 0; padding:7px 10px; }
.lmx-kifogas-test .lmx-link{ margin:2px 0 0; align-self:flex-start; }
.lmx-ta{ width:100%; min-height:48vh; box-sizing:border-box; border:1px solid rgba(0,0,0,0.12); border-radius:12px; padding:10px 12px; font-size:12.5px; line-height:1.55; font-family:ui-monospace, Menlo, Consolas, monospace; resize:vertical; }

.lmx-stat-racs{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; margin-bottom:10px; }
.lmx-stat-racs > div{ background:#F8FAFC; border-radius:12px; padding:8px 10px; display:flex; flex-direction:column; }
.lmx-stat-racs em{ font-style:normal; font-size:10.5px; color:#64748B; font-weight:600; }
.lmx-stat-racs b{ font-size:18px; color:#0F172A; font-family:var(--betu-szam, inherit); letter-spacing:-0.01em; }
.lmx-stat-racs small{ font-size:10.5px; color:#94A3B8; }
.lmx-arany{ position:relative; height:22px; border-radius:9px; background:rgba(37,99,235,0.15); overflow:hidden; margin-bottom:10px; }
.lmx-arany i{ position:absolute; left:0; top:0; bottom:0; background:rgba(18,134,75,0.55); }
.lmx-arany span{ position:relative; display:block; text-align:center; font-size:11px; font-weight:700; line-height:22px; color:#0F172A; }
.lmx-arany u{ position:absolute; top:0; bottom:0; width:2px; background:#0F172A; opacity:.5; }
.lmx-tippek{ display:flex; flex-direction:column; gap:5px; font-size:11.5px; color:#475569; }
.lmx-h4{ font-size:13px; margin:16px 0 8px; color:#0F172A; }
.lmx-h4:first-child{ margin-top:0; }
.lmx-tabla-wrap{ overflow-x:auto; }
.lmx-tabla{ width:100%; border-collapse:collapse; font-size:12px; }
.lmx-tabla th{ text-align:left; font-size:10.5px; color:#64748B; font-weight:700; padding:6px 8px; border-bottom:1px solid rgba(0,0,0,0.08); white-space:nowrap; }
.lmx-tabla td{ padding:6px 8px; border-bottom:1px solid rgba(0,0,0,0.05); white-space:nowrap; }

.lmx-fiok{ position:fixed; top:0; right:0; bottom:0; width:min(1000px, 78vw); background:var(--bg, #FAFCFB); z-index:1950;
  box-shadow:-20px 0 60px rgba(0,0,0,0.18); display:flex; flex-direction:column; transform:translateX(105%); transition:transform .25s ease; visibility:hidden; }
.lmx-fiok.nyitva{ transform:none; visibility:visible; }
.lmx-fiok-fej{ display:flex; align-items:center; gap:8px; padding:12px 16px; background:#fff; border-bottom:1px solid rgba(0,0,0,0.06); flex-wrap:wrap; }
.lmx-fiok-fej b{ font-size:14px; }
.lmx-fiok-fej .lmx-halvany{ margin-right:auto; }
.lmx-fiok-test{ flex:1; overflow-y:auto; padding:16px 18px 90px; }

.lmx-modal-hatter{ position:fixed; inset:0; z-index:1990; background:rgba(15,23,42,0.45); display:flex; align-items:center; justify-content:center; padding:16px; }
.lmx-modal-hatter[hidden]{ display:none !important; }
.lmx-modal{ background:#fff; color:#0F172A; border-radius:20px; width:min(560px, 100%); max-height:92vh; display:flex; flex-direction:column; box-shadow:0 30px 80px rgba(0,0,0,0.3); }
.lmx-modal.szeles{ width:min(760px, 100%); }
.lmx-modal-fej{ display:flex; align-items:center; gap:10px; padding:14px 18px; border-bottom:1px solid rgba(0,0,0,0.06); }
.lmx-modal-fej b{ font-size:14.5px; flex:1; }
.lmx-modal-test{ padding:16px 18px; overflow-y:auto; font-size:12.5px; line-height:1.55; }
.lmx-modal-lab{ display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; padding:12px 18px; border-top:1px solid rgba(0,0,0,0.06); }
.lmx-modal-lab .lmx-gomb:first-child:not(:last-child):not(.ok){ margin-right:auto; }
.lmx-hiany{ background:#FFFBEB; color:#78350F; border-radius:12px; padding:9px 12px; margin-bottom:10px; font-size:12px; }
.lmx-hiany.fontos{ background:#FEF2F2; color:#991B1B; }
.lmx-uto-osszefoglalo{ background:#F0F8F4; border-radius:12px; padding:10px 12px; margin-bottom:12px; color:#14532D; }
.lmx-uto-blokk{ border:1px solid rgba(0,0,0,0.06); border-radius:14px; padding:10px 12px; margin-bottom:10px; }
.lmx-uto-sor{ display:flex; gap:6px; align-items:center; margin-bottom:6px; flex-wrap:wrap; }
.lmx-uto-sor input[type="checkbox"]{ accent-color:#12864B; }
.lmx-uto-blokk select.lmx-input{ max-width:100%; }
.lmx-ajanlas{ display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap; }
.lmx-ajanlas img{ border-radius:14px; border:1px solid rgba(0,0,0,0.08); max-width:100%; height:auto; }
.lmx-ajanlas > div{ flex:1; min-width:220px; }
.lmx-url{ font-size:11.5px; color:#475569; word-break:break-all; background:#F8FAFC; border-radius:10px; padding:7px 9px; margin-bottom:8px; }

.lmx-helyre{ position:fixed; top:12px; left:50%; transform:translateX(-50%); z-index:2050; display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  max-width:calc(100vw - 24px); background:#FFFBEB; color:#78350F; border:1px solid #FCD34D; border-radius:14px; padding:9px 12px; font-size:12.5px; box-shadow:0 10px 30px rgba(0,0,0,0.15); }
.lmx-helyre[hidden]{ display:none !important; }
.lmx-helyre button{ border:1px solid #FCD34D; background:#fff; color:#78350F; border-radius:10px; padding:6px 11px; font-size:12px; font-weight:700; cursor:pointer; font-family:inherit; }
.lmx-helyre button.ok{ background:#12864B; border-color:#12864B; color:#fff; }

@media (max-width:1100px){
  .lmx-fiok{ width:100vw; }
  .lmx-fulek button{ font-size:10.5px; }
}

/* ══ Live Meeting — pontos átirat állapotjelző (js/live-meeting-atirat.js) ══ */
.lma-chip{ position:fixed; left:16px; bottom:16px; z-index:2040; display:flex; align-items:center; gap:8px; max-width:min(440px, calc(100vw - 32px));
  background:#0F172A; color:#fff; border-radius:14px; padding:9px 10px 9px 14px; box-shadow:0 12px 32px rgba(0,0,0,.25); font-size:12.5px; }
.lma-chip[hidden]{ display:none !important; }
.lma-chip.kesz{ background:#12864B; }
.lma-szoveg{ display:flex; flex-direction:column; min-width:0; flex:1; }
.lma-szoveg b{ font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lma-szoveg em{ font-style:normal; font-size:11px; opacity:.7; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lma-chip button{ border:none; background:rgba(255,255,255,.14); color:#fff; border-radius:9px; padding:6px 10px; font-size:12px; font-weight:700; cursor:pointer; font-family:inherit; }
.lma-chip button:hover{ background:rgba(255,255,255,.24); }
.lmx-keszulni{ margin:4px 0 0; padding-left:18px; font-size:12.5px; line-height:1.6; }
.lma-chip{ flex-wrap:wrap; }
.lma-beall{ display:none; flex-basis:100%; flex-direction:column; gap:7px; padding:8px 2px 2px; border-top:1px solid rgba(255,255,255,.15); margin-top:4px; font-size:12px; }
.lma-chip.beall .lma-beall{ display:flex; }
.lma-beall label{ display:flex; align-items:center; gap:8px; }
.lma-beall select{ margin-left:auto; border-radius:8px; border:none; padding:4px 8px; font-size:12px; font-family:inherit; }

/* ══ Könnyű Live Meeting (build 856) ═══════════════════════════════
   A meeting-felület mindig könnyített: nincs élő elmosás, átlátszó
   üveghatás, árnyék és lüktető animáció — ezek a gyengébb gépeken a
   Meet videójával közös videókártyát terhelték. Amíg nyitva van, a
   mögötte lévő OS nem rajzolódik. */
body.lm-nyitva #app{ visibility:hidden !important; }
body.lm-nyitva #monyFloatingWidget{ display:none !important; }
#liveMeetingOverlay{ background:#F3F6F4 !important; }
#liveMeetingOverlay, #liveMeetingOverlay *,
#liveVideoControls, #liveVideoControls *{ backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
#liveMeetingOverlay [style*="rgba(255,255,255,0.7)"],
#liveMeetingOverlay [style*="rgba(255,255,255,0.85)"]{ background:#fff !important; }
#liveMeetingOverlay [style*="box-shadow"]{ box-shadow:none !important; }
#liveMeetingOverlay [style*="border-radius:22px"]{ border:1px solid rgba(0,0,0,0.06) !important; }
#liveMeetingOverlay [style*="animation"], #liveMicBtn.recording, #liveMeetingOverlay .lm-szint i b{ animation:none !important; transition:none !important; }
#liveTranscriptText{ contain:layout style; }
#liveTranscriptText .lm-regebbi{ font-size:11px; color:#94A3B8; text-align:center; padding:4px 0 8px; }
.lm-helyi{ display:flex; align-items:center; gap:6px; font-size:11px; color:#64748B; cursor:pointer; }
.lm-helyi em{ font-style:normal; color:#94A3B8; }
.lm-figyelm.vesz{ color:#991B1B; background:#FEF2F2; border:1px solid #FECACA; border-radius:10px; padding:8px 10px; font-size:12px; font-weight:600; }

/* Naptár színek beállítása */
.nsz-sor{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line);flex-wrap:wrap;}
.nsz-cim{flex:0 0 130px;display:flex;flex-direction:column;font-size:13px;}
.nsz-cim small{font-size:10.5px;color:var(--muted);}
.nsz-mintak{display:flex;flex-wrap:wrap;gap:6px;flex:1;min-width:0;}
.nsz-minta{width:26px;height:26px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0;
  background:var(--bg);color:var(--muted);font-size:11px;font-weight:800;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);}
.nsz-minta.on{border-color:var(--surface);box-shadow:0 0 0 2px var(--ink);}
.nsz-minta:hover{transform:scale(1.1);}

/* ── Események: naptár, tagolás, összecsukható leírás ───────── */
.ce-naptar{padding:14px 16px; margin-bottom:14px;}
.ce-naptar-fej{display:flex; align-items:center; gap:10px; margin-bottom:10px; flex-wrap:wrap;}
.ce-naptar-fej b{font-size:14px;}
.ce-naptar-fej .btn-secondary{padding:3px 11px; font-size:14px; line-height:1.2;}
.ce-jelmagy{margin-left:auto; display:flex; gap:12px; flex-wrap:wrap; font-size:11px; color:var(--muted);}
.ce-jelmagy span{display:flex; align-items:center; gap:5px;}
.ce-jelmagy i, .ce-nap .p i{width:7px; height:7px; border-radius:50%; display:inline-block;}
.ce-jelmagy i.sarga, .ce-nap .p i.sarga{background:#F59E0B;}
.ce-jelmagy i.zold,  .ce-nap .p i.zold{background:var(--green-600);}
.ce-jelmagy i.piros, .ce-nap .p i.piros{background:#DC2626;}
.ce-nap .p i.mult{background:var(--line);}
.ce-nevek{display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-bottom:4px;}
.ce-nevek span{text-align:center; font-size:10.5px; font-weight:700; color:var(--muted);}
.ce-racs{display:grid; grid-template-columns:repeat(7,1fr); gap:4px;}
.ce-nap{position:relative; min-height:46px; border:1px solid var(--line); border-radius:10px; background:var(--surface);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; cursor:default; padding:4px 2px;}
.ce-nap .d{font-size:12.5px; font-weight:600; color:var(--ink);}
.ce-nap .p{display:flex; gap:3px; min-height:7px;}
.ce-nap.mas .d{color:var(--muted); opacity:.5;}
.ce-nap.ma{border-color:var(--green-600); box-shadow:inset 0 0 0 1px var(--green-600);}
.ce-nap.van{cursor:pointer; background:var(--bg);}
.ce-nap.van:hover{border-color:var(--green-600);}
.ce-nap.kiv{background:var(--green-100); border-color:var(--green-600);}
.ce-napszuro{display:flex; align-items:center; gap:10px; margin-top:10px; padding-top:10px;
  border-top:1px solid var(--line); font-size:12.5px; font-weight:600;}
.ce-sav{display:flex; align-items:center; gap:12px; padding:12px 16px; margin-bottom:14px;
  border:1px solid #FCD9A1; background:#FFF8EC; border-radius:14px;}
.ce-sav-ik{font-size:20px; flex-shrink:0;}
.ce-sav > div{flex:1; min-width:0;}
.ce-sav b{font-size:13.5px; display:block; color:#92400E;}
.ce-sav em{font-style:normal; font-size:11.5px; color:#B45309;}
.ce-sav button{margin-left:auto; flex-shrink:0; width:auto; white-space:nowrap;}
.ce-sav.on{border-color:var(--green-600); background:var(--green-50);}
.ce-honap{font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); margin:18px 0 8px 2px;}
.ce-kartya.kiemelt{border-color:var(--green-600); box-shadow:0 0 0 2px rgba(27,122,77,.15);}
.ce-kov{font-size:11.5px; font-weight:700; color:var(--green-700); margin-bottom:8px;}
.ce-desc-wrap{position:relative;}
.ce-desc.zart{display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;}
.ce-tovabb{margin-top:4px; background:none; border:0; padding:0; cursor:pointer;
  font-size:11.5px; font-weight:700; color:var(--green-700);}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .ce-sav{border-color:#7C5B1E; background:rgba(245,158,11,.12);}
  :root:not([data-theme="light"]) .ce-sav b{color:#FCD34D;}
  :root:not([data-theme="light"]) .ce-sav em{color:#FBBF24;}
}
:root[data-theme="dark"] .ce-sav{border-color:#7C5B1E; background:rgba(245,158,11,.12);}
:root[data-theme="dark"] .ce-sav b{color:#FCD34D;}
:root[data-theme="dark"] .ce-sav em{color:#FBBF24;}

@media (max-width:760px){
  .ce-sor{flex-wrap:wrap;}
  .ce-sor > div:nth-child(2){flex:1 1 100%; order:2;}
  .ce-gombok{order:3; flex:1 1 100%; flex-direction:row !important; flex-wrap:wrap;}
  .ce-gombok button, .ce-gombok .ce-nem-cimke{flex:1 1 140px;}
  .ce-naptar .ce-nap{min-height:40px;}
  .ce-sav{flex-wrap:wrap;}
  .ce-sav button{margin-left:0; flex:1 1 100%;}
}

/* ── Címtár ─────────────────────────────────────────────────── */
.ct-valaszto{ display:flex; gap:6px; margin:4px 0 12px; }
.ct-chipek{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
.ct-chip{ border:1px solid var(--line); background:var(--surface); color:var(--muted);
  border-radius:25px; padding:6px 13px; font-size:12px; font-weight:600; cursor:pointer; }
.ct-chip:hover{ border-color:var(--green-600); color:var(--green-700); }
.ct-chip.on{ background:var(--green-600); border-color:var(--green-600); color:#fff; }
.ct-szurok{ display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; margin-bottom:8px; }
.ct-szurok label{ display:flex; flex-direction:column; gap:4px; font-size:11px; font-weight:700; color:var(--muted); }
.ct-szurok select, .ct-szurok input[type="text"]{ border:1px solid var(--line); border-radius:9px;
  padding:6px 10px; font-size:12.5px; background:var(--surface); color:var(--ink); min-width:150px; }
.ct-szurok .ct-jelolo{ flex-direction:row; align-items:center; gap:7px; font-weight:600; font-size:12px; }
.ct-sav{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:10px 0 12px; }
.ct-keres{ flex:1 1 220px; border:1px solid var(--line); border-radius:10px; padding:8px 12px;
  font-size:12.5px; background:var(--surface); color:var(--ink); }
.ct-lista{ max-height:520px; overflow:auto; border:1px solid var(--line); border-radius:14px; }
.ct-sor{ display:flex; align-items:center; gap:10px; padding:9px 13px; border-bottom:1px solid var(--line); cursor:pointer; }
.ct-sor:last-child{ border-bottom:0; }
.ct-sor:hover{ background:var(--bg); }
.ct-sor.ki{ opacity:.45; }
.ct-sor input[type="checkbox"]{ width:auto; flex-shrink:0; }
.ct-nev{ display:flex; flex-direction:column; font-size:13px; font-weight:600; flex:1; min-width:0; }
.ct-nev em{ font-style:normal; font-size:11px; color:var(--muted); font-weight:500; }
.ct-kimarad{ flex-shrink:0; font-size:11px; white-space:nowrap; }

/* ── Projektek: Trello-szerű tábla ───────────────────────────── */
#view-kanban.view{ max-width:none; }
#view-kanban .kb-board{
  gap:14px; padding:4px 0 18px; align-items:flex-start;
  overflow-x:auto; overflow-y:hidden; scroll-snap-type:x proximity;
}
#view-kanban .kb-col{ flex:0 0 300px; max-height:calc(100vh - 250px); overflow:hidden; scroll-snap-align:start; }
#view-kanban .kb-cards{ overflow-y:auto; overflow-x:hidden; flex:1; padding-right:2px; }
#view-kanban .kb-cards::-webkit-scrollbar{ width:8px; }
#view-kanban .kb-cards::-webkit-scrollbar-thumb{ background:var(--line); border-radius:8px; }

/* szűrősáv */
.kb-szuro{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:0 0 14px; }
.kb-keres{ flex:1 1 240px; min-width:180px; border:1px solid var(--line); border-radius:11px;
  padding:8px 12px; font-size:12.5px; background:var(--surface); color:var(--ink); }
.kb-szuro-sel{ border:1px solid var(--line); border-radius:11px; padding:8px 10px;
  font-size:12.5px; background:var(--surface); color:var(--ink); }
.kb-szuro-gomb{ border:1px solid var(--line); background:var(--surface); color:var(--muted);
  border-radius:11px; padding:8px 13px; font-size:12px; font-weight:600; cursor:pointer; }
.kb-szuro-gomb:hover{ border-color:var(--green-600); color:var(--green-700); }
.kb-szuro-gomb.on{ background:var(--green-600); border-color:var(--green-600); color:#fff; }

/* címkék és jelzések a kártyán */
.kb-cimkek{ display:flex; gap:4px; flex-wrap:wrap; margin-bottom:7px; }
.kb-cimke{ font-size:9.5px; font-weight:700; color:#fff; padding:2px 8px; border-radius:25px; letter-spacing:.02em; }
.kb-borito{ height:8px; border-radius:8px; margin:-4px -4px 9px; }
.kb-card.archiv{ opacity:.65; }
.kb-meta.kesz{ color:var(--green-700); font-weight:700; }

/* gyors kártyafelvétel */
.kb-gyors{ margin-top:2px; }
.kb-gyors-mezo{ width:100%; border:1px solid var(--green-600); border-radius:13px; padding:10px 12px;
  font:inherit; font-size:12.5px; background:var(--surface); color:var(--ink); resize:vertical; }
.kb-gyors-sor{ display:flex; gap:6px; margin-top:6px; flex-wrap:wrap; }

/* húzási hely két kártya között */
.kb-drop{ height:6px; border-radius:6px; transition:height .12s ease, background .12s ease; }
.kb-drop.ra{ height:38px; background:var(--green-100); border:1.5px dashed var(--green-600); }

/* Megtakarítás: eseti befizetések */
.mg-eseti-sor{ display:flex; gap:8px; align-items:center; margin-bottom:7px; }
.kalk-jelolo{ display:flex; align-items:center; gap:9px; font-size:12.5px; margin:10px 0 2px; cursor:pointer; }
.kalk-jelolo input{ width:auto; }

/* Megtakarítás: célok */
.mg-cel-sor{ display:flex; gap:8px; align-items:center; margin-bottom:7px; flex-wrap:wrap; }
.mg-cel-nev{ flex:1 1 140px; min-width:110px; border:1px solid var(--line); border-radius:11px;
  padding:9px 11px; font-size:13px; background:var(--bg); color:var(--ink); }
.mg-celok{ margin-top:16px; border-top:1px solid var(--line); padding-top:14px; }
.mg-celok-cim{ font-size:11.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); margin-bottom:9px; }
.mg-cel{ border:1px solid var(--line); border-radius:13px; padding:10px 13px; margin-bottom:8px; }
.mg-cel.ok{ border-color:var(--green-600); background:var(--green-50); }
.mg-cel.hiany{ border-color:#F3C7C7; background:#FDF4F4; }
.mg-cel-fej{ display:flex; justify-content:space-between; gap:10px; font-size:13px; flex-wrap:wrap; }
.mg-cel-allapot{ font-size:12px; color:var(--muted); margin-top:5px; line-height:1.55; }
.mg-cel.ok .mg-cel-allapot{ color:var(--green-700); }
.mg-cel-lab{ font-size:11px; color:var(--muted); margin-top:6px; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .mg-cel.hiany{ background:rgba(220,38,38,.08); border-color:rgba(220,38,38,.35); }
}
:root[data-theme="dark"] .mg-cel.hiany{ background:rgba(220,38,38,.08); border-color:rgba(220,38,38,.35); }

/* ── TERVEZET — PÉNZÜGYI DÖNTÉSTÁMOGATÓ ───────────────────────── */
/*  Széles munkafelület: a tervezet dokumentum és műszerfal egyben,
    ezért kilép a kalkulátor keskeny hasábjából.                    */
#view-kalkulator .kalk-pane[data-kpane="tervezet"]{ max-width:none; }
.tv-lap{ max-width:1180px; }
.tv-sor{ display:grid; gap:16px; align-items:start; margin-bottom:16px; }
.tv-sor.ketto{ grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); }
.tv-lap > .card{ margin-bottom:16px; }

.tv-fejlec{ display:flex; align-items:flex-start; justify-content:space-between;
  gap:16px; margin:0 0 14px; flex-wrap:wrap; }
.tv-cim{ font-size:19px; font-weight:700; margin:0 0 3px; letter-spacing:-.015em; }
.tv-meta{ font-size:12px; color:var(--muted); margin-bottom:2px; }
.tv-halvany{ color:var(--muted); font-size:11.5px; line-height:1.5; }
.tv-fejlec-gombok{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.tv-fejlec-gombok button{ padding:8px 14px; font-size:12px; width:auto; flex:0 0 auto; margin:0; }

/*  Lépcsősor — a folyamat állapota az adatokból                    */
.tv-lepcso{ display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin:0 0 16px; }
.tv-lepcso-sor{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.tv-lepes{ display:flex; align-items:center; gap:7px; font-size:12px;
  color:var(--muted); font-weight:600; }
.tv-lepes-jel{ width:20px; height:20px; border-radius:50%; display:grid; place-items:center;
  font-size:10.5px; border:1px solid var(--line); background:var(--surface); }
.tv-lepes.kesz{ color:var(--green-700); }
.tv-lepes.kesz .tv-lepes-jel{ border-color:var(--green-500); color:var(--green-700);
  background:var(--green-100); }
.tv-lepes.aktiv{ color:var(--text, inherit); }
.tv-lepes.aktiv .tv-lepes-jel{ background:var(--green-600, #2F8F63); color:#fff;
  border-color:transparent; }
.tv-lepes-vonal{ width:26px; height:1px; background:var(--line); }
.tv-nezetvalto{ display:flex; border:1px solid var(--line); border-radius:9px; overflow:hidden; }
.tv-nezetvalto button{ border:none; background:none; padding:6px 13px; font-size:11.5px;
  font-weight:600; color:var(--muted); cursor:pointer; width:auto; margin:0; border-radius:0; }
.tv-nezetvalto button.be{ background:var(--green-600, #2F8F63); color:#fff; }

/*  Csempék                                                         */
.tv-csempek{ display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:10px; }
.tv-csempek.negy{ grid-template-columns:repeat(auto-fit, minmax(128px, 1fr)); }
.tv-csempe{ border:1px solid var(--line); border-radius:11px; padding:11px 13px; }
.tv-csempe-ikon{ font-size:15px; display:block; margin-bottom:5px; }
.tv-csempe-cim{ font-size:10.5px; color:var(--muted); text-transform:uppercase;
  letter-spacing:.04em; margin-bottom:3px; }
.tv-csempe-ertek{ font-size:15px; font-weight:700; letter-spacing:-.01em; }
.tv-csempe-forras{ font-size:10px; color:var(--muted); margin-top:4px; }
.tv-csempe.ok{ border-color:var(--green-500); background:var(--green-100); }
.tv-csempe.ok .tv-csempe-ertek{ color:var(--green-700); }
.tv-csempe.fig{ border-color:#E8C79A; background:#FDF3E6; }
.tv-csempe.fig .tv-csempe-ertek{ color:#8A4B06; }
.tv-csempe.baj{ border-color:#EBB6B2; background:#FBE3E1; }
.tv-csempe.baj .tv-csempe-ertek{ color:#B3322C; }

/*  Fő célok                                                        */
.tv-celok{ margin:0; padding-left:18px; }
.tv-celok li{ font-size:12.5px; line-height:1.75; }
.tv-celok li.kesz{ color:var(--muted); text-decoration:line-through; }
.tv-cel-sor{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:6px 0; border-bottom:1px solid var(--line); }
.tv-cel-sor label{ display:flex; align-items:center; gap:8px; font-size:12.5px; cursor:pointer; }
.tv-cel-sor .kesz{ color:var(--muted); text-decoration:line-through; }

/*  Táblázatok                                                      */
.tv-chipek{ display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 12px; }
.tv-chip{ border:1px solid var(--line); background:none; border-radius:999px; width:auto;
  padding:5px 12px; font-size:11.5px; font-weight:600; color:var(--muted); cursor:pointer; }
.tv-chip.be{ background:var(--green-100); border-color:var(--green-500); color:var(--green-700); }
.tv-tabla-doboz{ overflow-x:auto; }
.tv-tabla{ width:100%; border-collapse:collapse; }
.tv-tabla th{ text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.04em;
  color:var(--muted); font-weight:600; padding:7px 9px; border-bottom:1px solid var(--line); }
.tv-tabla td{ padding:8px 9px; border-bottom:1px solid var(--line);
  font-size:12.5px; vertical-align:middle; }
.tv-tabla th.sz, .tv-tabla td.sz{ text-align:right; white-space:nowrap; }
.tv-tabla tr:last-child td{ border-bottom:none; }
.tv-muvelet{ text-align:right; white-space:nowrap; }
.tv-muvelet button{ padding:4px 8px; font-size:11px; line-height:1; margin:0 0 0 3px; width:auto; }
.tv-cella{ width:100%; min-width:80px; border:1px solid transparent; border-radius:6px;
  padding:5px 7px; font:inherit; font-size:12.5px; background:none; color:inherit; }
.tv-cella:hover{ border-color:var(--line); }
.tv-cella:focus{ outline:none; border-color:var(--green-500); background:var(--surface); }
.tv-cella.sz{ text-align:right; font-weight:600; }
.tv-statusz{ border:1px solid var(--line); border-radius:999px; padding:4px 9px;
  font-size:11px; font-weight:600; background:var(--surface); color:var(--muted);
  font-family:inherit; max-width:180px; }
.tv-statusz.ok{ border-color:var(--green-500); background:var(--green-100); color:var(--green-700); }
.tv-statusz.fig{ border-color:#E8C79A; background:#FDF3E6; color:#8A4B06; }
.tv-statusz.baj{ border-color:#EBB6B2; background:#FBE3E1; color:#B3322C; }
.tv-hianyzo{ margin-top:14px; border-top:1px solid var(--line); padding-top:11px; }
.tv-hianyzo-cim{ font-size:10.5px; text-transform:uppercase; letter-spacing:.04em;
  color:var(--muted); margin-bottom:7px; }
.tv-hianyzo-sor{ display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:7px 0; border-bottom:1px solid var(--line); }
.tv-hianyzo-sor:last-child{ border-bottom:none; }
.tv-hianyzo-sor b{ font-size:12.5px; }

/*  Döntési pontok listája                                          */
.tv-dlista{ display:flex; flex-direction:column; gap:6px; }
.tv-dsor{ display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  border:1px solid var(--line); border-radius:10px; padding:9px 12px;
  background:none; color:inherit; cursor:pointer; }
.tv-dsor:hover{ border-color:var(--green-500); background:var(--bg-soft, #f4f8f5); }
.tv-dsor-szam{ width:19px; height:19px; border-radius:50%; background:var(--line);
  color:var(--muted); font-size:10.5px; display:grid; place-items:center; flex:0 0 19px; }
.tv-dsor-ikon{ font-size:15px; }
.tv-dsor-szoveg{ flex:1; min-width:0; }
.tv-dsor-szoveg b{ font-size:12.5px; display:block; }
.tv-dsor-szoveg em{ font-style:normal; font-size:11px; color:var(--muted);
  display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tv-dsor-nyil{ color:var(--muted); font-size:15px; }
.tv-statusz-jel{ font-size:10.5px; font-weight:600; border-radius:999px; padding:3px 10px;
  background:var(--line); color:var(--muted); white-space:nowrap; }
.tv-statusz-jel.ok{ background:var(--green-100); color:var(--green-700); }
.tv-statusz-jel.fig{ background:#FDF3E6; color:#8A4B06; }
.tv-statusz-jel.baj{ background:#FBE3E1; color:#B3322C; }
.tv-dontes-ablak{ max-width:560px; }

/*  Pálya-összehasonlítás                                           */
#tvPalyaKartya{ container-type:inline-size; }
.tv-palya-fo{ display:grid; grid-template-columns:minmax(0,1.75fr) minmax(140px,.72fr);
  gap:14px; align-items:start; }
.tv-graf-jelmagyarazat{ display:flex; gap:14px; font-size:11px; color:var(--muted); margin-bottom:6px; }
.tv-graf-jelmagyarazat .jel{ display:inline-block; width:8px; height:8px; border-radius:50%;
  margin-right:5px; }
.tv-graf-jelmagyarazat .jel.zold{ background:var(--green-600, #2F8F63); }
.tv-graf-jelmagyarazat .jel.szurke{ background:#B7C2BA; }
.tv-vonalgraf{ width:100%; height:auto; min-height:165px; }
.tv-vonalgraf .celvonal{ stroke:#B7C2BA; stroke-width:1; stroke-dasharray:4 4; }
.tv-vonalgraf .racs{ stroke:var(--line); stroke-width:1; }
.tv-vonalgraf .tengely{ font-size:9px; fill:var(--muted); }
.tv-vonalgraf .vonal{ fill:none; stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.tv-vonalgraf .vonal.zold{ stroke:var(--green-600, #2F8F63); }
.tv-vonalgraf .vonal.szurke{ stroke:#B7C2BA; }
.tv-palya-oldal{ display:flex; flex-direction:column; gap:8px; }
.tv-palya-mezo input{ width:100%; border:1px solid var(--line); border-radius:8px;
  padding:6px 9px; font:inherit; font-size:13px; font-weight:600;
  background:var(--surface); color:inherit; }
.tv-palya-mezo input:focus{ outline:none; border-color:var(--green-500); }
.tv-palya-kul{ border:1px solid var(--green-500); background:var(--green-100);
  border-radius:10px; padding:9px 11px; }
.tv-palya-kulonbseg{ font-size:16px; font-weight:700; color:var(--green-700); }
.tv-feltetel{ font-size:10.5px; color:var(--muted); line-height:1.5; margin-top:11px;
  border-top:1px solid var(--line); padding-top:8px; }

/*  Összegzés                                                       */
.tv-osszeg-sor{ display:flex; justify-content:space-between; align-items:baseline;
  font-size:12.5px; padding:7px 0; border-bottom:1px dashed var(--line); }
.tv-osszeg-sor span{ color:var(--muted); }
.tv-osszeg-sor.ok b{ color:var(--green-700); }
.tv-arany{ margin-top:12px; }
.tv-arany-fej{ display:flex; justify-content:space-between; align-items:baseline;
  font-size:11.5px; color:var(--muted); margin-bottom:5px; }
.tv-arany-fej b{ color:inherit; font-size:12.5px; }
.tv-arany-sav{ height:7px; border-radius:999px; background:var(--line); overflow:hidden; }
.tv-arany-sav i{ display:block; height:100%; background:var(--green-600, #2F8F63); }
.tv-arany-sav i.fig{ background:#D98324; }
.tv-arany-sav i.baj{ background:#DC3B33; }
.tv-figyelem{ margin-top:10px; background:#FDF3E6; color:#8A4B06; border-radius:8px;
  padding:9px 12px; font-size:12px; line-height:1.5; }
.tv-tipp{ margin-top:10px; background:var(--bg-soft, #f4f8f5); color:var(--muted);
  border-radius:8px; padding:9px 12px; font-size:11.5px; line-height:1.5; }
.tv-jegyzet{ width:100%; min-height:88px; margin-top:12px; resize:vertical;
  border:1px solid var(--line); border-radius:9px; padding:9px 11px;
  font:inherit; font-size:12.5px; background:var(--surface); color:inherit; }
.tv-jegyzet:focus{ outline:none; border-color:var(--green-500); }

/*  Megosztás                                                       */
.tv-oszt-sor{ display:flex; align-items:center; justify-content:space-between; gap:14px; }
.tv-kapcsolo{ position:relative; flex:0 0 42px; height:24px; cursor:pointer; }
.tv-kapcsolo input{ opacity:0; width:0; height:0; position:absolute; }
.tv-kapcsolo span{ position:absolute; inset:0; border-radius:999px; background:var(--line);
  transition:background .15s; }
.tv-kapcsolo span::after{ content:''; position:absolute; top:3px; left:3px; width:18px; height:18px;
  border-radius:50%; background:#fff; transition:transform .15s; }
.tv-kapcsolo input:checked + span{ background:var(--green-600, #2F8F63); }
.tv-kapcsolo input:checked + span::after{ transform:translateX(18px); }

/*  Ügyfélválasztó, keresés                                         */
.tv-kereso{ position:relative; }
.tv-talalatok{ display:flex; flex-direction:column; gap:4px; margin-top:8px; }
.tv-talalat{ display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  text-align:left; background:none; border:1px solid var(--line); border-radius:8px;
  padding:8px 11px; cursor:pointer; font-size:12.5px; color:inherit; }
.tv-talalat:hover{ border-color:var(--green-500); background:var(--bg-soft, #f4f8f5); }
.tv-talalat em{ font-style:normal; color:var(--muted); font-size:11px; }
.tv-lista{ display:flex; flex-direction:column; gap:6px; }
.tv-lista-sor{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  border:1px solid var(--line); border-radius:9px; padding:9px 12px; }

/*  A döntési pont űrlapja (ablakban)                               */
.tv-dontes{ border:none; padding:0; }
.tv-dontes-fej{ display:flex; flex-wrap:wrap; align-items:center; gap:7px; }
.tv-dontes select, .tv-dontes input[type="date"], .tv-dontes input[type="text"]{
  border:1px solid var(--line); border-radius:7px; padding:6px 9px;
  font-size:12px; background:var(--surface); color:inherit; font-family:inherit; width:100%; }
.tv-dontes-fej select{ width:auto; }
.tv-dontes-mezok, .tv-dontes-sor, .tv-dontes-zaras{
  display:flex; gap:10px; flex-wrap:wrap; margin-top:9px; }
.tv-mezo{ flex:1; min-width:170px; display:flex; flex-direction:column; gap:4px; }
.tv-mezo > span{ font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
.tv-mezo > span em{ font-style:normal; text-transform:none; letter-spacing:0; opacity:.75; }
.tv-mezo textarea{ min-height:56px; resize:vertical; border:1px solid var(--line);
  border-radius:7px; padding:6px 9px; font:inherit; font-size:12px;
  background:var(--surface); color:inherit; }
.tv-mezo textarea:focus, .tv-dontes select:focus, .tv-dontes input:focus{
  outline:none; border-color:var(--green-500); }
.tv-dontes-also{ display:flex; gap:9px; align-items:center; margin-top:9px; }
.tv-megj{ width:100%; margin-top:7px; border:1px solid var(--line); border-radius:7px;
  padding:6px 9px; font-size:12px; background:var(--surface); color:inherit; }
.tv-megj:focus{ outline:none; border-color:var(--green-500); }
.tv-dontes-also .tv-megj{ flex:1; margin-top:0; }
.tv-kesz{ font-size:11px; color:var(--green-700); margin-top:6px; }

/*  Csatolt kalkulációk                                             */
.tv-kalk{ display:flex; align-items:center; gap:10px; border:1px solid var(--line);
  border-radius:9px; padding:8px 11px; margin-bottom:6px; cursor:pointer; }
.tv-kalk.be{ border-color:var(--green-500); background:var(--bg-soft, #f4f8f5); }
.tv-kalk-ikon{ font-size:15px; }
.tv-kalk-szoveg{ flex:1; min-width:0; }
.tv-kalk-szoveg b{ font-size:12.5px; display:block; }
.tv-kalk-szoveg em{ font-style:normal; color:var(--muted); font-size:11px; }
.tv-kalk-elonezet{ margin:-2px 0 8px; padding-left:34px; }
.tv-kalkreszlet{ border:1px solid var(--line); border-radius:10px; padding:12px 14px; margin-bottom:10px; }
.tv-kalkreszlet-fej{ font-weight:700; font-size:12.5px; margin-bottom:2px; }
.tv-kalkreszlet-ossz{ color:var(--muted); font-size:11.5px; margin-bottom:8px; }
.tv-kalktabla, .tv-evtabla{ width:100%; border-collapse:collapse; }
.tv-kalktabla td{ padding:5px 0; border-bottom:1px solid var(--line); font-size:12px; }
.tv-kalktabla td.lab{ color:var(--muted); }
.tv-kalktabla td.sz{ text-align:right; font-weight:600; }
.tv-graf-doboz{ margin:12px 0 2px; }
.tv-graf{ width:100%; height:120px; display:block; }
.tv-graf-cimke{ display:flex; justify-content:space-between; color:var(--muted); font-size:10.5px; }
.tv-evtabla{ margin-top:10px; font-size:11.5px; }
.tv-evtabla th{ text-align:left; padding:5px 8px; font-size:10.5px; text-transform:uppercase;
  letter-spacing:.04em; color:var(--muted); border-bottom:1px solid var(--line); }
.tv-evtabla th.sz, .tv-evtabla td.sz{ text-align:right; }
.tv-evtabla td{ padding:4px 8px; border-bottom:1px solid var(--line); }
.tv-evtabla tr.utolso td{ font-weight:700; background:var(--green-100); }

/*  Verziók, frissülés                                              */
.tv-verzio{ border:1px solid var(--line); border-radius:9px; padding:9px 12px; }
.tv-diff{ display:flex; flex-direction:column; }
.tv-diff:not(:empty){ margin-top:8px; border-top:1px solid var(--line); padding-top:7px; }
.tv-diff-sor{ display:flex; justify-content:space-between; align-items:baseline;
  gap:12px; font-size:12px; padding:4px 0; }
.tv-diff-sor span{ color:var(--muted); }
.tv-diff-sor.uj b{ color:var(--green-700); }
.tv-diff-sor.torolt b{ color:#B3322C; }
.tv-diff-sor.valt b{ color:#C2660C; }
.tv-frissult{ display:flex; gap:14px; align-items:flex-start; justify-content:space-between;
  margin:0 0 16px; background:#FDF3E6; color:#6B3C05;
  border-radius:11px; padding:11px 14px; font-size:12.5px; line-height:1.55; }
.tv-frissult ul{ margin:6px 0 4px; padding-left:18px; }
.tv-frissult li{ margin:2px 0; }
.tv-frissult .tv-halvany{ color:#8A6636; }

/*  Ügyfél nézet                                                    */
.tv-un-racs{ display:flex; flex-wrap:wrap; gap:8px 10px; }
.tv-un-adat{ display:flex; flex-direction:column; gap:2px; border:1px solid var(--line);
  border-radius:9px; padding:8px 13px; min-width:150px; }
.tv-un-adat span{ font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.tv-un-adat b{ font-size:14.5px; }
.tv-un-sor{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:9px 0; border-bottom:1px solid var(--line); }
.tv-un-sor b{ font-size:12.5px; }
.tv-un-allapot{ font-size:11px; color:var(--muted); background:var(--line);
  border-radius:999px; padding:3px 11px; white-space:nowrap; }
.tv-un-allapot.ok{ color:var(--green-700); background:var(--green-100); }
.tv-un-allapot.fig{ color:#C2660C; background:#FCE9D6; }
.tv-un-allapot.baj{ color:#B3322C; background:#FBE3E1; }
.tv-un-dontes{ border:1px solid var(--line); border-radius:10px; padding:11px 13px; margin-bottom:8px; }
.tv-un-dontes-fej{ display:flex; align-items:center; gap:9px; font-weight:700;
  font-size:13px; margin-bottom:8px; }
.tv-un-mezo{ display:flex; gap:10px; padding:5px 0; }
.tv-un-mezo span{ flex:0 0 120px; font-size:10.5px; color:var(--muted);
  text-transform:uppercase; letter-spacing:.04em; padding-top:2px; }
.tv-un-mezo p{ margin:0; font-size:12.5px; line-height:1.55; }
.tv-un-jegyzet{ white-space:pre-wrap; font-size:12.5px; line-height:1.6; }
.tv-ugyfelnezet{ display:grid; grid-template-columns:minmax(0,1fr); gap:16px; max-width:880px; }

@media (max-width:980px){
  .tv-sor.ketto{ grid-template-columns:minmax(0,1fr); }
  .tv-palya-fo{ grid-template-columns:minmax(0,1fr); }
}

/*  Keskeny kártyán a grafikon alá kerülnek a mezők, két hasábban —
    egymás mellett mindkettő összenyomódna                          */
@container (max-width: 560px){
  .tv-palya-fo{ grid-template-columns:minmax(0,1fr); }
  .tv-palya-oldal{ display:grid; grid-template-columns:repeat(auto-fit, minmax(120px,1fr)); }
  .tv-palya-oldal > button{ grid-column:1 / -1; }
}

/*  Halogatás a megtakarítás-kalkulátorban                          */
.mg-halogat{ margin-top:12px; border:1px solid #E8C79A; background:#FDF3E6;
  border-radius:11px; padding:12px 14px; }
.mg-halogat-fej{ font-weight:700; font-size:12.5px; color:#8A4B06; margin-bottom:9px; }
.mg-halogat-racs{ display:grid; grid-template-columns:repeat(auto-fit, minmax(120px,1fr)); gap:10px; }
.mg-halogat-racs b{ font-size:15px; display:block; margin-top:2px; }
.mg-halogat-racs .kalk-sugo{ color:#8A6636; }
.mg-mines{ color:#B3322C; }
.mg-halogat-also{ margin-top:10px; border-top:1px solid #E8C79A; padding-top:9px;
  font-size:12px; line-height:1.55; color:#6B3C05; }
.mg-halogat-also .kalk-sugo{ color:#8A6636; }

/*  Nyugdíjkalkulátor                                               */
.ny-csempek{ display:grid; grid-template-columns:repeat(auto-fit, minmax(160px,1fr));
  gap:10px; margin-top:12px; }
.ny-csempe{ border:1px solid var(--line); border-radius:11px; padding:12px 14px; }
.ny-cim{ font-size:10.5px; color:var(--muted); text-transform:uppercase;
  letter-spacing:.04em; margin-bottom:4px; }
.ny-ertek{ font-size:19px; font-weight:700; letter-spacing:-.015em; }
.ny-csempe.ok{ border-color:var(--green-500); background:var(--green-100); }
.ny-csempe.ok .ny-ertek{ color:var(--green-700); }
.ny-csempe.fig{ border-color:#E8C79A; background:#FDF3E6; }
.ny-csempe.fig .ny-ertek{ color:#8A4B06; }
.ny-csempe.baj{ border-color:#EBB6B2; background:#FBE3E1; }
.ny-csempe.baj .ny-ertek{ color:#B3322C; }
.ny-csempe.zold{ border-color:var(--green-500); }
.ny-csempe.zold .ny-ertek{ color:var(--green-700); }
.ny-javaslat{ margin-top:16px; border-top:1px solid var(--line); padding-top:12px; }
.ny-javaslat-fej{ font-size:12.5px; font-weight:700; }
.ny-magyarazat{ font-size:12.5px; line-height:1.6; margin:12px 0 0; }
.ny-diagram{ margin-top:18px; }
.ny-diagram-fej{ font-size:12.5px; font-weight:700; margin-bottom:8px; }
.ny-svg{ width:100%; height:auto; }
.ny-racs{ stroke:var(--line); stroke-width:1; }
.ny-tengely{ font-size:9px; fill:var(--muted); }
.ny-b-netto{ fill:#4EA8DE; }
.ny-b-nyugdij{ fill:#E9B949; }
.ny-b-hiany{ fill:#D6336C; }
.ny-jelmagyarazat{ display:flex; gap:16px; flex-wrap:wrap; font-size:11px;
  color:var(--muted); margin-top:8px; }
.ny-j{ display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:6px; }
.ny-j.netto{ background:#4EA8DE; }
.ny-j.nyugdij{ background:#E9B949; }
.ny-j.hiany{ background:#D6336C; }
.ny-feltetelek{ margin-top:18px; border-top:1px solid var(--line); padding-top:12px;
  font-size:11.5px; color:var(--muted); line-height:1.6; }
.ny-feltetelek b{ color:inherit; }
.ny-feltetelek ul{ margin:6px 0 0; padding-left:18px; }
.ny-feltetelek li{ margin:3px 0; }

/*  Diagram-buborék: az oszlop mögötti számok az egér alatt          */
.ny-diagram-doboz{ position:relative; }
.ny-fogo{ fill:transparent; cursor:crosshair; }
.ny-oszlop:hover rect:not(.ny-fogo){ filter:brightness(1.08); }
.ny-tipp{ position:absolute; z-index:5; pointer-events:none;
  background:var(--surface); border:1px solid var(--line); border-radius:9px;
  padding:8px 11px; font-size:11.5px; line-height:1.5;
  box-shadow:0 6px 18px rgba(20,40,28,.12); min-width:150px; }
.ny-tipp > b{ display:block; font-size:12px; margin-bottom:4px; }
.ny-tipp div{ display:flex; justify-content:space-between; gap:12px; }
.ny-tipp span{ color:var(--muted); }
.ny-tipp b.hiany{ color:#B3322C; }

/*  Pálya-diagram buborék                                           */
.tv-graf-doboz-rel{ position:relative; }
.tv-fogo{ fill:transparent; cursor:crosshair; }
.tv-tipp-buborek{ position:absolute; z-index:5; pointer-events:none;
  background:var(--surface); border:1px solid var(--line); border-radius:9px;
  padding:8px 11px; font-size:11.5px; line-height:1.5;
  box-shadow:0 6px 18px rgba(20,40,28,.12); min-width:172px; }
.tv-tipp-buborek > b{ display:block; font-size:12px; margin-bottom:4px; }
.tv-tipp-buborek div{ display:flex; justify-content:space-between; gap:12px; }
.tv-tipp-buborek span{ color:var(--muted); }
.tv-tipp-buborek b.zold{ color:var(--green-700); }

/*  Megosztási link                                                 */
.tv-oszt-link{ display:flex; gap:7px; }
.tv-oszt-link input{ flex:1; border:1px solid var(--line); border-radius:8px;
  padding:9px 11px; font:inherit; font-size:12px; background:var(--bg-soft, #f4f8f5);
  color:inherit; }
.tv-oszt-link button{ padding:9px 16px; font-size:12.5px; white-space:nowrap; }

/* ══════════════════════════════════════════════════════════════
   TELEFONOS FEJLÉC — összecsukott kereső, és hely a köszöntőnek

   A lebegő fejléc-pirula a tartalom FÖLÖTT úszik. A dashboardon a
   .content függőleges térköze 0 (a magazin-sávok teljes szélesek),
   ezért a köszöntő alátorlódott, és az üveg elmosta. Két baj volt:
   a pirula telefonon az egész sávot elfoglalta a kereső miatt, és
   a köszöntőnek nem maradt hely fölötte.
   ══════════════════════════════════════════════════════════════ */

/*  Gépen nincs külön kereső gomb — a mező eleve kint van  */
.kereso-gomb{ display:none; }
.kereso-zar{ display:none; }

@media (max-width:820px){
  /*  A kereső egy ikon; a mező csak koppintásra jön elő  */
  .kereso-gomb{ display:inline-flex; pointer-events:auto; }
  .topbar-eszkozok{ flex:0 1 auto !important; }
  .topbar-eszkozok > .kereso-doboz{ display:none; }

  /*  Nyitott állapot: a mező kapja az egész sávot, a többi ikon pihen  */
  .topbar-eszkozok.kereso-nyitva{ flex:1 1 auto !important; }
  .topbar-eszkozok.kereso-nyitva > .kereso-doboz{ display:block; max-width:none; }
  .topbar-eszkozok.kereso-nyitva > .kereso-gomb,
  .topbar-eszkozok.kereso-nyitva > div:not(.kereso-doboz){ display:none; }
  .topbar-eszkozok.kereso-nyitva #globalSearchInput{ padding-right:34px; }

  .kereso-zar{
    display:block; position:absolute; right:6px; top:50%; transform:translateY(-50%);
    width:24px; height:24px; border:none; background:none; cursor:pointer;
    font-size:19px; line-height:1; color:var(--ink); opacity:.55;
  }
  .kereso-zar:hover{ opacity:1; }

  /*  A köszöntő ne bújjon a pirula alá — annyi helyet kap, amennyit
      a pirula elfoglal, plusz a telefon felső biztonsági sávja.  */
  .dh-koszonto{ padding-top:calc(env(safe-area-inset-top, 0px) + 72px); }
}

/* ══════════════════════════════════════════════════════════════
   TELEFONOS ALSÓ SÁV

   A hamburger + oldalsáv helyett telefonon alsó fülsáv visz a négy
   legtöbbet használt helyre, középen a kiemelt "új ügyfél" gombbal.
   A "Továbbiak" ugyanazt a menüt nyitja, ami eddig a hamburger
   mögött volt — így minden nézet elérhető marad.

   Gépen a sáv nem létezik (display:none), ott semmi nem változik.
   ══════════════════════════════════════════════════════════════ */
.mobil-sav{ display:none; }

@media (max-width:820px){
  .mobil-sav{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:900;
    align-items:center; justify-content:space-around; gap:2px;
    padding:8px 6px calc(env(safe-area-inset-bottom, 0px) + 8px);
    background:rgba(255,255,255,.92);
    backdrop-filter:blur(20px) saturate(1.6);
    -webkit-backdrop-filter:blur(20px) saturate(1.6);
    border-top:1px solid var(--line);
    box-shadow:0 -6px 24px rgba(11,44,28,.08);
  }
  [data-theme="dark"] .mobil-sav{ background:rgba(20,32,26,.92); }

  .ms-elem{
    flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:3px;
    border:none; background:none; cursor:pointer; padding:4px 2px;
    color:var(--muted); font-size:10px; font-weight:600; line-height:1.2;
    -webkit-tap-highlight-color:transparent;
  }
  .ms-elem svg{ width:22px; height:22px; }
  .ms-elem span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
  .ms-elem.aktiv{ color:var(--green-700); }

  /*  Mind az öt fül egyforma — a középső sem művelet már, hanem
      nézet, ezért nem emelkedik ki.  */

  /*  A sáv ne takarja a tartalom alját  */
  .content{ padding-bottom:calc(env(safe-area-inset-bottom, 0px) + 78px) !important; }
  body.dashboard-active .content{ padding-bottom:calc(env(safe-area-inset-bottom, 0px) + 78px) !important; }

  /*  A hamburgert az alsó sáv "Továbbiak" gombja váltja ki.
      A !important azért kell, mert egy korábbi szabály telefonon
      kifejezetten előhozza — ott még ez volt az egyetlen navigáció.  */
  #navBurger{ display:none !important; }

  /*  A nézet saját nagy címe marad a lap tetején — a mockupon is az
      a fejléc. Külön fejlécsávra nincs szükség, csak arra, hogy a
      lebegő ikonpirula ne lógjon rá: az a jobb szélen, keskenyen ül.  */
}

/* ══════════════════════════════════════════════════════════════
   IPHONE FELSŐ BIZTONSÁGI SÁV

   Telepített alkalmazásként a lap a `viewport-fit=cover` miatt az
   óra és a töltöttségjelző ALÁ is kifut. A köszöntő már számolt
   ezzel, a lebegő ikonpirula viszont nem: az állapotsáv alatt ült,
   és ott csak egy homályos folt látszott belőle.

   Mindenhol ugyanazt a biztonsági sávot adjuk hozzá, amit a telefon
   mond (`env(safe-area-inset-top)`). Androidon és gépen ez 0, tehát
   ott semmi nem változik.
   ══════════════════════════════════════════════════════════════ */
@media (max-width:900px){
  .topbar{ padding-top:calc(env(safe-area-inset-top, 0px) + 10px); }
  .content{ padding-top:calc(env(safe-area-inset-top, 0px) + 66px); }
}

@media (max-width:820px){
  .topbar{ padding-top:calc(env(safe-area-inset-top, 0px) + 9px); }
  /*  A kezdőlapon a .content térköze 0, ezért a köszöntő maga kéri
      el a helyet — a pirula aljánál lejjebb kell kezdődnie.  */
  .dh-koszonto{ padding-top:calc(env(safe-area-inset-top, 0px) + 72px); }
}

/* ══════════════════════════════════════════════════════════════
   FELADATOK TELEFONON — tiszta kártyalista

   Gépen a sor nyolc oszlopos táblázat. Telefonon abból csak három
   kell: jelölőnégyzet, a feladat neve az ügyféllel, és jobbra a
   határidő-jelvény a dátummal. A többi (kategória, pontszám,
   potenciál, határidő-mező, lezáró gomb) a megnyitott feladatban
   érhető el — a listát nem szabad velük telezsúfolni.
   ══════════════════════════════════════════════════════════════ */
.tk-sm-cell{ display:none; }

@media (max-width:760px){
  .tk-row{
    grid-template-columns:22px minmax(0,1fr) auto !important;
    align-items:center; gap:12px; padding:14px 4px;
    border-bottom:1px solid var(--line); border-radius:0;
  }
  .tk-row:hover{ background:transparent; }
  /*  A !important azert kell, mert ezeken a mezokon beegetett
      style="display:flex" van a markupban -- az enelkul erosebb,
      mint a stiluslap, ezert eddig telefonon is kilatszottak, es
      szetnyomtak a sort.  */
  .tk-row > .tk-ticon,
  .tk-row > .tk-due-cell,
  .tk-row > .tk-qa,
  .tk-row > .tk-hide-sm{ display:none !important; }
  .tk-row .tk-wait{ display:none; }

  .tk-row-title{ font-size:14px; font-weight:600; white-space:normal; line-height:1.35; }
  .tk-row-sub{ font-size:12.5px; margin-top:3px; }

  .tk-sm-cell{
    display:flex; flex-direction:column; align-items:flex-end; gap:5px;
    flex-shrink:0; text-align:right;
  }
  .tk-sm-jelveny{
    display:inline-block; padding:4px 11px; border-radius:999px;
    font-size:11.5px; font-weight:700; white-space:nowrap;
  }
  .tk-sm-datum{ font-size:12px; color:var(--muted); white-space:nowrap; }

  /*  Nagyobb, ujjal is eltalálható jelölőnégyzet  */
  .tk-row > .tk-sel{ width:20px; height:20px; }
}

/* ══════════════════════════════════════════════════════════════
   TELEPÍTETT ALKALMAZÁS — natív viselkedés

   Az .mh-app osztályt a kód teszi a lapra, ha a kezdőképernyőről
   indították. Böngészőben nem kapcsol be: ott a nagyítás sokaknak
   akadálymentességi kérdés, azt nem vesszük el.
   ══════════════════════════════════════════════════════════════ */
html.mh-app,
html.mh-app body{
  /*  Ne gumizzon a lap széle, és ne legyen "húzd le a frissítéshez".
      A magasságot NEM rögzítjük: a telefonos elrendezés a lap
      görgetésére épül, és fix magassággal a tartalom alja
      elérhetetlenné válna.  */
  overscroll-behavior:none;
  /*  Dupla koppintásra ne nagyítson  */
  touch-action:manipulation;
}

/*  Vízszintesen semmi ne mozduljon  */
html.mh-app body{ overflow-x:hidden; }

/*  A felület elemein ne lehessen szöveget jelölni-húzni — a mezőkben
    és a szövegekben viszont igen, különben nem lehetne másolni.  */
html.mh-app .mobil-sav,
html.mh-app .topbar,
html.mh-app .sidebar,
html.mh-app .ms-elem{
  -webkit-user-select:none; user-select:none;
  -webkit-touch-callout:none;
}

/* ══════════════════════════════════════════════════════════════
   KARRIER TERV — a struktúra térkép harmadik nézete

   Ugyanaz a fa-rajz, mint a térképnél: felül te, alatta a helyek,
   amik az adott karrierszinthez kellenek. Ahol van rá embered, ott
   az ő kártyája áll; ahol nincs, ott üres hely várakozik.
   ══════════════════════════════════════════════════════════════ */

/*  A helyek egymás után úsznak be  */
.kt-hely{ animation:ktBeuszik .44s cubic-bezier(.2,.9,.3,1) both; }
@keyframes ktBeuszik{
  from{ opacity:0; transform:translateY(14px) scale(.94); }
  to{ opacity:1; transform:none; }
}
@media (prefers-reduced-motion: reduce){ .kt-hely{ animation:none; } }

/*  Üres hely: ugyanaz a kártyaforma, szaggatott kerettel  */
.ot-card.kt-ures{
  border-style:dashed; border-width:2px; background:transparent; box-shadow:none;
  opacity:.72; cursor:default;
}
.ot-card.kt-ures .ot-head{ opacity:.65; }
.ot-card.kt-ures .kt-av{
  background:transparent; border:2px dashed var(--line);
  color:var(--muted); font-weight:700;
}
.ot-card.kt-ures .ot-name{ color:var(--muted); font-weight:600; }
.ot-card.kt-ures:hover{ opacity:.92; }

/*  A cél sávja a saját kártyám és a helyek között  */
.kt-celsav{
  display:inline-flex; align-items:center; gap:10px; margin:10px auto 2px;
  padding:7px 16px; border-radius:999px;
  background:var(--green-50); border:1px solid var(--green-500);
  font-size:12px; white-space:nowrap;
}
.kt-celsav b{ font-size:12.5px; color:var(--green-700); }
.kt-celsav span{ color:var(--muted); }

/*  Választó a bal felső sarokban  */
.kt-valaszto{
  display:flex; flex-direction:column; gap:7px;
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
  padding:11px 14px; box-shadow:var(--shadow-md, 0 6px 20px rgba(11,44,28,.1));
  max-width:min(92vw, 520px);
}
.kt-sor{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.kt-sor > small{ font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:700; min-width:64px; }
.kt-szintchip{ min-width:44px; }
.kt-szintchip.kt-elert{ color:var(--green-700); }
.kt-valtsor{ flex-wrap:wrap; }
.kt-valtchip{ font-size:11.5px; }
.kt-valtchip em{ font-style:normal; font-weight:800; opacity:.7; margin-left:3px; }
.kt-valtchip.kt-teljes{ color:var(--green-700); }
.kt-valtchip.kt-teljes em{ opacity:1; }
.kt-sugo{ font-size:11px; color:var(--muted); line-height:1.5; }

@media (max-width:820px){
  .kt-valaszto{ padding:9px 11px; gap:5px; }
  .kt-sor > small{ min-width:0; }
}

/*  Jelölt a helyen: ott ül, de látszik, hogy még úton van.
    A számításban külön szerepel — az OVB mérése a tényleges rangot
    nézi, nem a kitűzött célt.  */
.kt-hely.kt-uton{ position:relative; }
.kt-hely.kt-uton .ot-card{
  border-style:dashed; border-width:2px; border-color:#E8B400;
  box-shadow:0 6px 18px rgba(232,180,0,.16);
}
.kt-hely.kt-uton .ot-head{ opacity:.8; }
.kt-utoncimke{
  display:block; margin:6px auto 0; width:max-content; max-width:100%;
  padding:3px 10px; border-radius:999px;
  background:#FDF4E3; color:#B4700A; border:1px solid #F0D48A;
  font-size:10.5px; font-weight:700; white-space:nowrap;
}
.kt-celsav .kt-plusz{
  font-style:normal; color:#B4700A; font-weight:700;
}