/* ================================================================
   FluxDay design rendszer v3 — "visszafogottság + precizitás"
   Négy képernyő-szint: telefon · laptop · 24" · 34" ultrawide
   Egy akcentus, hairline vonalak, tabular számok, csendes mozgás.
   ================================================================ */
:root{
  --bg:#0b0b0d;
  --surface:linear-gradient(180deg,rgba(255,255,255,.038),rgba(255,255,255,.02));
  --surface-solid:#141418;
  --surface-2:rgba(255,255,255,.05);
  --hairline:rgba(255,255,255,.065);
  --hairline-strong:rgba(255,255,255,.12);
  --text:#f1f1f5;
  --text-2:#c8cad4;
  --muted:#81859a;
  --accent:#8688f2;
  --accent-soft:rgba(134,136,242,.12);
  --accent-ink:#0d0d14;
  --ok:#3cc795;
  --ok-soft:rgba(60,199,149,.11);
  --warn:#e3ab55;
  --danger:#e57070;
  --gold:#d6b464;
  --r-lg:18px;
  --r-md:12px;
  --r-sm:9px;
  --font:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-d:'Inter Tight','Inter',system-ui,sans-serif;
  --ease:cubic-bezier(.23,.7,.16,1);
  --lift:0 14px 44px -16px rgba(0,0,0,.6);
  --content-max:1240px;
  --gap:18px;
}
*{margin:0;padding:0;box-sizing:border-box}
::selection{background:rgba(134,136,242,.3)}
html{color-scheme:dark;scroll-behavior:smooth}
body{
  /* a gradiens alap — magán a body-n, minden mögött, garantáltan látszik */
  background:
    radial-gradient(1150px 660px at 72% -10%, rgba(134,136,242,.24), transparent 62%),
    radial-gradient(880px 620px at -8% 108%, rgba(60,199,149,.11), transparent 58%),
    radial-gradient(760px 540px at 105% 64%, rgba(112,114,238,.13), transparent 60%),
    linear-gradient(180deg,#0e0e13 0%,var(--bg) 42%);
  background-attachment:fixed;
  color:var(--text);
  font-family:var(--font);
  font-size:15px;line-height:1.6;font-weight:440;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* lassan sodródó extra fényréteg a base fölött */
.glow{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.glow::before{
  content:"";position:absolute;inset:-22%;
  background:
    radial-gradient(600px 480px at 70% 8%, rgba(134,136,242,.18), transparent 62%),
    radial-gradient(540px 460px at 6% 92%, rgba(60,199,149,.09), transparent 60%);
  filter:blur(44px);
  animation:drift 30s var(--ease) infinite alternate;
  will-change:transform,opacity;
}
@keyframes drift{
  0%{transform:translate3d(0,0,0) scale(1);opacity:.75}
  50%{transform:translate3d(-2%,1.6%,0) scale(1.05);opacity:1}
  100%{transform:translate3d(1.8%,-1.4%,0) scale(1.02);opacity:.8}
}
.shell,.login-wrap,.portal-wrap{position:relative;z-index:1}

a{color:var(--accent);text-decoration:none;transition:color .18s var(--ease)}
a:hover{color:#a9aaf8}
h1,h2,h3,.logo,.stat-num,.hchip-num,.cc-name,.pp-title{font-family:var(--font-d);letter-spacing:-.022em}
h1{font-size:clamp(24px,1.6vw + 14px,32px);font-weight:720;line-height:1.18}
h2{font-size:18px;font-weight:640}
.grad{color:var(--accent)}
.muted{color:var(--muted)}
.small{font-size:12.5px}
.ok-text{color:var(--ok)}
.danger-text{color:var(--danger)}
.warn-text{color:var(--warn)}
.strike{text-decoration:line-through;opacity:.5}
.hide{display:none}
.stat-num,.pill,.keret-head,.hchip-num,.plan-time,.cal-num,.mc-label{font-variant-numeric:tabular-nums}

/* ---------- belépő mozgás: rövid, halk ---------- */
@keyframes rise{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.main > *, .portal-wrap > *{animation:rise .45s var(--ease) both}
.main > *:nth-child(2),.portal-wrap > *:nth-child(2){animation-delay:.04s}
.main > *:nth-child(3),.portal-wrap > *:nth-child(3){animation-delay:.08s}
.main > *:nth-child(4),.portal-wrap > *:nth-child(4){animation-delay:.12s}
.main > *:nth-child(n+5),.portal-wrap > *:nth-child(n+5){animation-delay:.16s}

/* ---------- váz ---------- */
.shell{display:flex;min-height:100vh}
.sidebar{
  width:228px;flex-shrink:0;display:flex;flex-direction:column;
  padding:26px 14px 18px;
  position:sticky;top:0;height:100vh;
  border-right:1px solid var(--hairline);
  background:rgba(11,11,14,.62);
  backdrop-filter:blur(22px) saturate(140%);
  -webkit-backdrop-filter:blur(22px) saturate(140%);
}
.logo{font-size:19px;font-weight:780;padding:0 12px 26px;letter-spacing:-.03em}
.logo span{color:var(--accent)}
.logo.big{font-size:29px;padding:0 0 4px}
.sidebar nav{display:flex;flex-direction:column;gap:2px;flex:1}
.sidebar a{
  position:relative;
  display:flex;align-items:center;gap:12px;
  color:var(--muted);font-weight:510;font-size:13.5px;letter-spacing:-.005em;
  padding:9px 12px;border-radius:var(--r-md);
  transition:color .2s var(--ease), background .2s var(--ease);
}
.sidebar a svg{width:18px;height:18px;flex-shrink:0;stroke-width:1.6}
.sidebar a:hover{color:var(--text);background:rgba(255,255,255,.04);text-decoration:none}
.sidebar a.on{color:var(--text);background:var(--accent-soft)}
.sidebar a.on::before{
  content:"";position:absolute;left:-14px;top:9px;bottom:9px;width:2px;
  border-radius:99px;background:var(--accent);
}
.sidebar a.on svg{color:var(--accent)}
.sidebar-bottom{display:flex;flex-direction:column;gap:2px;border-top:1px solid var(--hairline);padding-top:12px}

.main{
  flex:1 1 auto;min-width:0;
  max-width:calc(var(--content-max) + 80px);
  margin:0 auto;
  padding:36px clamp(20px,3vw,44px) 80px;
}

/* ---------- fejléc ---------- */
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:26px;flex-wrap:wrap}
.page-head p{margin-top:4px;font-size:14px}
.head-flex{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.head-flex.space{justify-content:space-between;width:100%}

/* ---------- kártyák ---------- */
.card{
  background:var(--surface);
  border:1px solid var(--hairline);
  border-radius:var(--r-lg);
  padding:22px 24px;margin-bottom:var(--gap);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
.card-title{
  font-size:11px;font-weight:640;text-transform:uppercase;letter-spacing:.13em;
  color:var(--muted);margin-bottom:16px;
}
/* kétoldalas szekciócím: szűk képernyőn a hint a cím alá csúszik */
.card-title.ct-split{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;min-width:0}
.ct-hint{text-transform:none;letter-spacing:0;font-weight:500;min-width:0}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);align-items:start}
.bento{display:grid;grid-template-columns:1.12fr 1fr;gap:var(--gap);align-items:start}
.bento-col{display:flex;flex-direction:column;gap:var(--gap);min-width:0}
.bento-col .card{margin-bottom:0}

/* ---------- gombok ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  border:1px solid var(--hairline-strong);
  background:rgba(255,255,255,.045);color:var(--text);
  padding:9px 18px;border-radius:999px;
  font-family:var(--font);font-size:13.5px;font-weight:590;letter-spacing:-.008em;
  cursor:pointer;transition:all .2s var(--ease);
}
.btn:hover{border-color:rgba(134,136,242,.55);background:rgba(255,255,255,.07);text-decoration:none;color:var(--text)}
.btn:active{transform:scale(.975)}
.btn:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn.primary{
  background:var(--accent);border:1px solid transparent;color:var(--accent-ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 4px 16px -6px rgba(134,136,242,.45);
}
.btn.primary:hover{background:#989af5}
.btn.ok{background:var(--ok-soft);border-color:rgba(60,199,149,.3);color:var(--ok)}
.btn.ok:hover{border-color:rgba(60,199,149,.6)}
.btn.danger{background:rgba(229,112,112,.07);border-color:rgba(229,112,112,.28);color:var(--danger)}
.btn.danger:hover{border-color:rgba(229,112,112,.55)}
.btn.ghost{background:transparent}
.btn.block{width:100%;margin-top:6px}
.small-btn{padding:6px 14px;font-size:12.5px}
.icon-btn{background:none;border:none;color:var(--muted);cursor:pointer;font-size:13px;padding:5px 7px;border-radius:7px;transition:all .18s var(--ease)}
.icon-btn:hover{color:var(--danger);background:rgba(229,112,112,.09)}
.icon-btn.pin.active{color:var(--gold)}

/* ---------- űrlapok ---------- */
label{display:block;font-size:12.5px;font-weight:560;color:var(--muted);margin:12px 0 6px}
input,select,textarea{
  width:100%;
  background:rgba(0,0,0,.3);
  border:1px solid var(--hairline-strong);
  color:var(--text);border-radius:var(--r-md);
  padding:9px 13px;
  font-family:var(--font);font-size:14px;outline:none;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
input:hover,select:hover,textarea:hover{border-color:rgba(255,255,255,.2)}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(134,136,242,.16)}
textarea{resize:vertical}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.form-grid .full{grid-column:1/-1}
.form-grid button{margin-top:16px}
.inline-form{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:8px}
.inline-form input,.inline-form select{width:auto;flex:1;min-width:120px}
.stack{display:flex;flex-direction:column}
.stack button{margin-top:12px}
.copy-row{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.copy-row input{flex:1;min-width:180px;font-size:12.5px;color:var(--muted);font-family:ui-monospace,'Cascadia Mono',monospace}
.check-row{display:flex;align-items:center;gap:8px;font-weight:440;color:var(--text);font-size:14px;margin:0;cursor:pointer}
.check-row input{width:auto;accent-color:var(--accent)}

/* ---------- visszajelzések ---------- */
.flash{padding:12px 16px;border-radius:var(--r-md);margin-bottom:16px;font-size:14px;animation:rise .4s var(--ease) both}
.flash.ok{background:var(--ok-soft);border:1px solid rgba(60,199,149,.28);color:var(--ok)}
.flash.danger{background:rgba(229,112,112,.08);border:1px solid rgba(229,112,112,.28);color:var(--danger)}
.flash.info{background:var(--accent-soft);border:1px solid rgba(134,136,242,.26);color:var(--text-2)}
.alert-bar{border-color:rgba(227,171,85,.2)}
.alert-bar ul{list-style:none;display:flex;flex-direction:column;gap:8px;font-size:14px}
.alert-title{font-size:11px;font-weight:640;text-transform:uppercase;letter-spacing:.13em;color:var(--warn);margin-bottom:12px}

/* ---------- dashboard ---------- */
.plan-row{display:flex;gap:16px;padding:11px 0;border-bottom:1px solid var(--hairline)}
.plan-row:last-child{border-bottom:none;padding-bottom:2px}
.plan-time{font-weight:620;font-size:12.5px;color:var(--accent);min-width:96px;padding-top:3px}
.plan-title{font-weight:560}
.plan-sub{font-size:12.5px}

.mini-project{
  display:flex;align-items:center;gap:13px;padding:11px 12px;margin:0 -12px;
  border-radius:var(--r-md);color:var(--text);
  transition:background .18s var(--ease);
}
.mini-project:hover{background:var(--surface-2);text-decoration:none}
.mp-mid{flex:1;min-width:0}
.mp-title{font-weight:560;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pill{
  background:rgba(255,255,255,.045);border:1px solid var(--hairline-strong);
  border-radius:99px;padding:4px 13px;font-size:12.5px;font-weight:590;white-space:nowrap;
}
.pill.gold{color:var(--gold);border-color:rgba(214,180,100,.28);background:rgba(214,180,100,.06)}
.pill.ok-pill{color:var(--ok);border-color:rgba(60,199,149,.3);background:var(--ok-soft)}
.pill.warn-pill{color:var(--warn);border-color:rgba(227,171,85,.3);background:rgba(227,171,85,.07)}
.pill.danger-pill{color:var(--danger);border-color:rgba(229,112,112,.35);background:rgba(229,112,112,.08)}

.avatar{
  width:37px;height:37px;border-radius:12px;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg,#8688f2,#6668d8);
  color:#fff;font-weight:680;font-size:12.5px;font-family:var(--font-d);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
}
.avatar.lg{width:54px;height:54px;font-size:18px;border-radius:16px}
.avatar.sm{width:30px;height:30px;font-size:11px;border-radius:9px}
.dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.dot.run{background:var(--accent)}
.dot.done{background:var(--ok)}

/* ---------- keretek ---------- */
.keret{margin-bottom:18px}
.keret:last-of-type{margin-bottom:10px}
.keret-head{display:flex;justify-content:space-between;font-size:13.5px;margin-bottom:7px;gap:10px;flex-wrap:wrap}
.bar{height:6px;background:rgba(255,255,255,.06);border-radius:99px;overflow:hidden}
.bar-fill{
  height:100%;min-width:2px;border-radius:99px;background:var(--accent);
  animation:barIn .9s var(--ease) both;transform-origin:left;
}
@keyframes barIn{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.bar-fill.warn{background:var(--warn)}
.bar-fill.danger{background:var(--danger)}
.bar.slim{height:4px;margin-top:11px}

.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:var(--gap)}
.stat{margin-bottom:0;padding:20px 22px}
.stat-num{font-size:21px;font-weight:720;letter-spacing:-.03em}
.stat .muted{font-size:12.5px;margin-top:3px}
.stat-row.quad .stat-num{font-size:19px}

/* havi grafikon */
.month-chart{display:flex;align-items:flex-end;gap:7px;height:118px;padding-top:6px}
.mc-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:6px;cursor:default}
.mc-bar{
  width:100%;max-width:26px;min-height:3px;border-radius:5px 5px 2px 2px;
  background:rgba(255,255,255,.09);
  transition:background .2s var(--ease);
  animation:barGrow .8s var(--ease) both;transform-origin:bottom;
}
@keyframes barGrow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.mc-col:hover .mc-bar{background:rgba(134,136,242,.55)}
.mc-bar.now{background:var(--accent)}
.mc-label{font-size:10px;color:var(--muted);font-weight:600}

/* ---------- projekt hub ---------- */
.hub{display:grid;grid-template-columns:308px 1fr;gap:var(--gap);align-items:start}
/* a grid-cellák alapból min-width:auto — enélkül a pipeline kifeszíti az oldalt */
.hub-list,.hub-detail{min-width:0}
.hub-list{padding:12px;max-height:calc(100vh - 190px);overflow-y:auto;position:sticky;top:24px}
.hub-list::-webkit-scrollbar{width:8px}
.hub-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.09);border-radius:99px}
.hub-client{font-size:10.5px;font-weight:680;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);padding:14px 10px 7px}
.hub-item{
  display:flex;gap:10px;align-items:center;padding:9px 10px;
  border-radius:var(--r-md);color:var(--text);border:1px solid transparent;
  transition:all .18s var(--ease);
}
.hub-item:hover{background:var(--surface-2);text-decoration:none}
.hub-item.sel{background:var(--accent-soft);border-color:rgba(134,136,242,.28)}
.hub-item .mp-title{font-size:13.5px;max-width:190px}

/* pipeline — nyugodt csempék, akcentus a futó fázison */
.pipeline{display:flex;gap:8px;flex-wrap:wrap}
.pipeline form{flex:1;min-width:96px;display:flex}
.stage{
  flex:1;min-width:96px;display:flex;flex-direction:column;align-items:center;gap:5px;
  background:rgba(0,0,0,.22);
  border:1px solid var(--hairline);border-radius:14px;
  padding:13px 8px;color:var(--muted);
  font-family:var(--font);font-size:11.5px;font-weight:590;
  cursor:pointer;text-align:center;
  transition:all .22s var(--ease);
}
button.stage:hover{border-color:rgba(134,136,242,.45);color:var(--text);transform:translateY(-1px)}
.stage.on{
  color:var(--accent);border-color:rgba(134,136,242,.5);
  background:linear-gradient(180deg,rgba(134,136,242,.13),rgba(0,0,0,.22));
}
.stage.past{color:var(--text-2);background:rgba(255,255,255,.05);border-color:var(--hairline-strong)}
.stage.done-stage{color:var(--gold);border-color:rgba(214,180,100,.35)}
.stage-ic{font-size:17px}
.pipeline.compact .stage{padding:9px 6px;min-width:76px;font-size:10.5px;border-radius:11px}
.pipeline.compact .stage-ic{font-size:13px}

.comment{
  background:rgba(0,0,0,.2);border:1px solid var(--hairline);
  border-left:2px solid var(--accent);border-radius:11px;
  padding:12px 14px;margin-bottom:10px;
}
.comment p{margin:5px 0 9px;color:var(--text-2)}
.review-box{border:1px solid var(--hairline-strong);border-radius:var(--r-md);padding:13px;margin-bottom:12px;background:rgba(0,0,0,.18)}
.review-box.approved{border-color:rgba(60,199,149,.38)}
.review-box.changes{border-color:rgba(227,171,85,.38)}
.review-box .copy-row{margin:9px 0 0}
details{margin-bottom:10px}
details summary{list-style:none;user-select:none}
details summary::-webkit-details-marker{display:none}
details[open] summary{margin-bottom:8px}
details .stack{background:rgba(0,0,0,.2);border:1px solid var(--hairline);border-radius:var(--r-md);padding:14px;animation:rise .32s var(--ease) both}

.link-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--hairline)}
.link-row:last-child{border-bottom:none}
.link-row form{display:inline}

/* ---------- ügyfelek ---------- */
.client-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(216px,1fr));gap:14px}
.client-card{display:flex;flex-direction:column;gap:9px;color:var(--text);margin-bottom:0;transition:all .22s var(--ease)}
.client-card:hover{border-color:rgba(134,136,242,.38);text-decoration:none;transform:translateY(-2px);box-shadow:var(--lift)}
.cc-name{font-weight:680;font-size:16px}

/* ---------- naptár ---------- */
.cal-card{padding:14px 16px}
.cal-scroll{overflow-x:auto}
.cal-head{display:grid;grid-template-columns:repeat(7,1fr);gap:7px;text-align:center;font-size:10.5px;font-weight:640;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);padding:6px 0 12px}
.cal-week{display:grid;grid-template-columns:repeat(7,1fr);gap:7px;margin-bottom:7px}
.cal-day{
  display:block;min-height:104px;background:rgba(0,0,0,.18);border:1px solid var(--hairline);
  border-radius:12px;padding:7px 8px;overflow:hidden;color:var(--text);
  transition:border-color .18s var(--ease), background .18s var(--ease);
}
a.cal-day:hover{border-color:rgba(134,136,242,.4);background:rgba(255,255,255,.03);text-decoration:none}
.cal-day.dim{opacity:.3}
.cal-day.today{border-color:rgba(134,136,242,.6);background:var(--accent-soft)}
.cal-day.sel-day{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.cal-num{font-size:12px;font-weight:640;color:var(--muted);margin-bottom:4px}
.cal-day.today .cal-num{color:var(--accent)}
.tag{display:block;font-size:10.5px;border-radius:6px;padding:2.5px 7px;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;font-weight:540}
.tag.shift{background:rgba(134,136,242,.13);color:#b0b1f7}
.tag.night{background:rgba(134,136,242,.2);color:#c4c5fa}
.tag.uni{background:var(--ok-soft);color:var(--ok)}
.tag.deadline{background:rgba(229,112,112,.12);color:var(--danger)}
.tag.event{background:rgba(214,180,100,.1);color:var(--gold)}
.cal-more{font-size:10.5px;color:var(--muted);font-weight:600;padding:1px 7px}
.day-panel{border-color:rgba(134,136,242,.28)}
.day-panel .plan-row{align-items:center}

/* ---------- egyetem ---------- */
.uni-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.uni-day{margin-bottom:0}

/* ---------- login ---------- */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.login-card{width:100%;max-width:384px;text-align:center;padding:42px 34px;animation:rise .5s var(--ease) both;box-shadow:var(--lift)}
.login-card form{text-align:left;margin-top:16px}

/* ---------- ügyfél portál ---------- */
.portal-wrap{max-width:920px;margin:0 auto;padding:48px clamp(18px,3vw,28px) 64px}
.hero-chips{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:22px}
.hchip{
  display:flex;flex-direction:column;gap:2px;
  background:var(--surface);border:1px solid var(--hairline);
  border-radius:var(--r-md);padding:14px 20px;min-width:132px;
}
.hchip-num{font-size:19px;font-weight:720;letter-spacing:-.03em}
.hchip-label{font-size:11.5px;color:var(--muted);font-weight:540}
.hchip.pay{border-color:rgba(214,180,100,.3)}
.hchip.pay .hchip-num{color:var(--gold)}
.portal-project{padding:17px 0;border-bottom:1px solid var(--hairline)}
.portal-project:last-child{border-bottom:none}
.portal-project .pipeline{margin-top:11px}
.pp-title{font-size:15.5px;font-weight:640}
.pp-links{display:flex;gap:8px;flex-wrap:wrap;margin-top:11px}
.link-pill{font-weight:540;color:var(--text-2);transition:all .18s var(--ease)}
.link-pill:hover{border-color:rgba(134,136,242,.5);color:var(--text);text-decoration:none}
.review-cta{margin-top:13px;width:100%;padding:12px}
.empty{text-align:center;padding:28px 16px}
.empty p{margin:2px 0}
.portal-foot{
  text-align:center;margin-top:38px;padding-top:22px;
  border-top:1px solid var(--hairline);
  font-size:11.5px;letter-spacing:.04em;color:var(--muted);
}
.portal-foot b{color:var(--text-2);font-weight:600}
.video-frame{position:relative;padding-top:56.25%;border-radius:14px;overflow:hidden;background:#000;box-shadow:var(--lift)}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:none}
.review-video{width:100%;border-radius:14px;background:#000;box-shadow:var(--lift)}


/* ---------- fizetés & számla (portál) ---------- */
a.hchip{color:var(--text);transition:border-color .2s var(--ease), transform .2s var(--ease)}
a.hchip:hover{border-color:rgba(214,180,100,.55);text-decoration:none;transform:translateY(-1px)}
.pay-total{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 0 2px;margin-top:6px;border-top:1px solid var(--hairline-strong);
  font-weight:640;
}
.pay-sum{font-family:var(--font-d);font-size:21px;font-weight:750;letter-spacing:-.02em;color:var(--gold);font-variant-numeric:tabular-nums}
.pay-data{display:flex;flex-direction:column}
.pd-row{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--hairline);font-size:14px;flex-wrap:wrap}
.pd-row:last-child{border-bottom:none}
.mono{font-family:ui-monospace,'Cascadia Mono',monospace;font-size:13.5px;letter-spacing:.02em}

/* ---------- üzenőfal ---------- */
.msg-thread{display:flex;flex-direction:column;gap:12px;max-height:380px;overflow-y:auto;padding:2px}
.msg{display:flex;flex-direction:column;max-width:78%}
.msg.mine{align-self:flex-end;align-items:flex-end}
.msg.theirs{align-self:flex-start;align-items:flex-start}
.msg-bubble{
  padding:9px 14px;border-radius:15px;font-size:14px;line-height:1.5;
  background:rgba(255,255,255,.05);border:1px solid var(--hairline);
  white-space:pre-wrap;word-break:break-word;
}
.msg.mine .msg-bubble{background:rgba(134,136,242,.2);border-color:rgba(134,136,242,.26);border-bottom-right-radius:5px}
.msg.theirs .msg-bubble{border-bottom-left-radius:5px}
.msg-meta{margin-top:3px;font-size:11px;padding:0 4px}

/* ---------- Flux asszisztens ---------- */
.assistant{border-color:rgba(134,136,242,.2)}
.live-dot{
  display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--accent);margin-right:7px;vertical-align:1px;
  animation:livePulse 2.6s var(--ease) infinite;
}
@keyframes livePulse{0%,100%{opacity:1}50%{opacity:.35}}
.insight{
  display:flex;align-items:flex-start;gap:12px;padding:12px;margin:0 -12px;
  border-radius:var(--r-md);color:var(--text);position:relative;
  transition:background .18s var(--ease);
}
.insight:hover{background:var(--surface-2);text-decoration:none}
.insight::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:2px;border-radius:99px}
.insight.p1::before{background:var(--danger)}
.insight.p2::before{background:var(--warn)}
.insight.p3::before{background:var(--accent)}
.insight.p4::before{background:var(--ok)}
.insight-ic{font-size:16px;width:26px;text-align:center;flex-shrink:0;padding-top:1px;margin-left:9px}
.insight-mid{flex:1;min-width:0}
.insight-title{font-weight:620;font-size:14px}
.insight-body{font-size:12.5px;line-height:1.55;margin-top:2px}
.insight-go{color:var(--muted);font-size:15px;padding-top:2px;transition:all .18s var(--ease)}
.insight:hover .insight-go{color:var(--accent);transform:translateX(2px)}

/* ---------- értesítések ---------- */
.nav-badge{
  margin-left:auto;background:var(--accent);color:var(--accent-ink);
  font-size:10.5px;font-weight:720;border-radius:99px;padding:1px 7px;
  min-width:19px;text-align:center;
}
.notif{
  display:flex;align-items:center;gap:14px;padding:13px 12px;margin:0 -12px;
  border-radius:var(--r-md);color:var(--text);border-bottom:1px solid var(--hairline);
  transition:background .18s var(--ease);
}
.notif:last-child{border-bottom:none}
.notif:hover{background:var(--surface-2);text-decoration:none}
.notif.unread{background:rgba(134,136,242,.05)}
.notif.unread .notif-text{font-weight:620}
.notif-ic{font-size:18px;width:34px;text-align:center;flex-shrink:0}
.notif-mid{flex:1;min-width:0}
.notif-text{font-size:14.5px}


/* ---------- mobil app-nézet elemei (desktopon rejtve) ---------- */
.m-top,.m-tabbar,.m-more{display:none}

/* ================================================================
   KÉPERNYŐ-SZINTEK
   ================================================================ */

/* 24" és kisebb desktop (alap fentebb) — laptop finomítás */
@media(max-width:1180px){
  .hub{grid-template-columns:264px 1fr}
  :root{--gap:15px}
}
@media(max-width:1020px){
  .grid-2,.bento{grid-template-columns:1fr}
  .hub{grid-template-columns:1fr}
  .hub-list{position:static;max-height:340px}
  .stat-row{grid-template-columns:1fr 1fr}
}

/* telefon — külön app-nézet: alsó tab-bar, felső fejléc, nincs sidebar */
@media(max-width:760px){
  html,body{overflow-x:hidden;max-width:100vw}
  body{background-attachment:scroll}
  img,iframe,video{max-width:100%}

  /* váz */
  .sidebar{display:none}
  .shell{flex-direction:column}
  .main{padding:14px 14px calc(86px + env(safe-area-inset-bottom))}

  /* felső fejléc */
  .m-top{
    display:flex;align-items:center;justify-content:space-between;
    position:sticky;top:0;z-index:60;
    padding:12px 16px;
    background:rgba(11,11,13,.78);
    backdrop-filter:blur(20px) saturate(140%);
    -webkit-backdrop-filter:blur(20px) saturate(140%);
    border-bottom:1px solid var(--hairline);
  }
  .m-top .logo{padding:0;font-size:17px}
  .m-bell{position:relative;color:var(--muted);padding:6px;display:flex}
  .m-bell.on,.m-bell:hover{color:var(--accent)}
  .m-bell svg{width:21px;height:21px;stroke-width:1.6}
  .m-badge{
    position:absolute;top:0;right:-2px;
    background:var(--accent);color:var(--accent-ink);
    font-size:9.5px;font-weight:720;border-radius:99px;
    padding:0 5px;min-width:16px;height:16px;line-height:16px;text-align:center;
  }

  /* alsó tab-bar */
  .m-tabbar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:rgba(11,11,13,.82);
    backdrop-filter:blur(22px) saturate(150%);
    -webkit-backdrop-filter:blur(22px) saturate(150%);
    border-top:1px solid var(--hairline);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .m-tabbar a,.m-tabbar button{
    flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
    padding:6px 2px;border:none;background:none;cursor:pointer;
    color:var(--muted);font-family:var(--font);font-size:10px;font-weight:580;
    border-radius:10px;transition:color .18s var(--ease);
  }
  .m-tabbar svg{width:21px;height:21px;stroke-width:1.6}
  .m-tabbar .on{color:var(--accent)}
  .m-tabbar a:hover{text-decoration:none}

  /* Több menü */
  .m-more.open{
    display:flex;flex-direction:column;
    position:fixed;right:12px;bottom:calc(70px + env(safe-area-inset-bottom));z-index:59;
    background:var(--surface-solid);border:1px solid var(--hairline-strong);
    border-radius:16px;padding:8px;min-width:210px;
    box-shadow:var(--lift);animation:rise .25s var(--ease) both;
  }
  .m-more a{color:var(--text);padding:11px 14px;border-radius:10px;font-size:14.5px;font-weight:540}
  .m-more a:hover{background:var(--surface-2);text-decoration:none}
  .m-more a.on{color:var(--accent);background:var(--accent-soft)}

  /* tipográfia és térköz */
  h1{font-size:22px}
  h2{font-size:16px;overflow-wrap:anywhere}
  .page-head{margin-bottom:16px;gap:10px}
  .page-head > .head-flex{width:100%}
  .card{padding:15px 14px;border-radius:16px}
  :root{--gap:12px}

  /* túllógás-védelem mindenhol */
  .head-flex{min-width:0}
  .head-flex > *{min-width:0}
  .pill{max-width:100%;overflow:hidden;text-overflow:ellipsis}
  .plan-row,.link-row,.day-panel .plan-row{flex-wrap:wrap;row-gap:4px}
  .plan-time{min-width:78px}
  .copy-row input{flex:1 1 100%;min-width:0}
  .copy-row .btn{width:100%}
  .mp-title{white-space:normal;overflow-wrap:anywhere}
  .hub-item .mp-title{max-width:none}
  .insight{margin:0 -8px;padding:11px 8px}
  .notif{margin:0 -8px;padding:12px 8px}
  .mini-project{margin:0 -8px;padding:10px 8px}
  details .stack{padding:12px}
  .msg{max-width:92%}

  /* űrlapok */
  input,select,textarea{font-size:16px} /* iOS zoom ellen */
  .form-grid{grid-template-columns:1fr}
  .inline-form input,.inline-form select{min-width:100%;flex:1 1 100%}
  .inline-form button{width:100%}

  /* komponensek */
  .btn{white-space:normal;text-align:center}
  .btn.block{padding-left:12px;padding-right:12px}
  .pipeline{flex-wrap:nowrap;overflow-x:auto;margin:0 -14px;padding:0 14px 8px;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
  .pipeline form,.pipeline .stage{min-width:86px;flex:0 0 auto;scroll-snap-align:start}
  .stat-row,.stat-row.quad{grid-template-columns:1fr 1fr;gap:10px}
  .stat{padding:14px 13px}
  .stat-num,.stat-row.quad .stat-num{font-size:16px}
  .hero-chips{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .hchip{min-width:0;padding:11px 13px}
  .hchip-num{font-size:15.5px}
  /* pötty-naptár: minden kifér, a részletek a nap-panelben */
  .cal-inner{min-width:0}
  .cal-card{padding:12px 8px}
  .cal-head{gap:3px;font-size:9px;letter-spacing:.03em}
  .cal-head div{overflow:hidden;text-overflow:ellipsis}
  .cal-week{gap:3px;margin-bottom:3px}
  .cal-day{min-height:56px;padding:6px 3px;border-radius:9px;text-align:center}
  .cal-num{margin-bottom:4px;font-size:11.5px}
  .cal-day .tag{
    display:inline-block;width:6px;height:6px;padding:0;margin:1px;
    border-radius:99px;font-size:0;line-height:0;vertical-align:middle;
  }
  .cal-day .tag.shift{background:#8688f2}
  .cal-day .tag.night{background:#a9aaf8}
  .cal-day .tag.uni{background:var(--ok)}
  .cal-day .tag.deadline{background:var(--danger)}
  .cal-day .tag.event{background:var(--gold)}
  .cal-more{display:block;font-size:9px;padding:2px 0 0;color:var(--muted)}
  .month-chart{height:84px}
  .client-grid{grid-template-columns:1fr 1fr;gap:10px}
  .review-cta{padding:13px}
  .portal-wrap{padding:16px 14px 44px}
}

/* 27"+ / nagy desktop */
@media(min-width:1720px){
  :root{--content-max:1360px;--gap:22px}
  .main{padding-top:44px}
  .card{padding:26px 28px}
}

/* 34" ultrawide — a tartalom középre ül, a gradiens kitölti a széleket */
@media(min-width:2200px){
  :root{--content-max:1480px;--gap:24px}
  body{font-size:15.5px}
  .sidebar{width:248px;padding:32px 18px 22px}
  .sidebar a{font-size:14px;padding:10px 13px}
  h1{font-size:34px}
  .stat-num{font-size:23px}
  .cal-day{min-height:118px}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}


/* ========== SZÁMLÁK MODUL ========== */
.dropzone{
  display:block;border:1.5px dashed var(--hairline-strong);border-radius:var(--r-md);
  padding:26px 20px;cursor:pointer;text-align:center;
  background:rgba(255,255,255,.02);transition:all .2s var(--ease);
}
.dropzone:hover{border-color:rgba(134,136,242,.5);background:var(--accent-soft)}
.dropzone.drag{border-color:var(--accent);background:var(--accent-soft);transform:scale(1.005)}
.dz-inner{display:flex;flex-direction:column;align-items:center;gap:7px}
.dz-ic{font-size:30px;opacity:.85}
.dz-text{font-size:14px;color:var(--text-2)}
.dz-text b{color:var(--text);font-weight:640}
.dz-file{margin-top:2px}

.inv-row{
  display:flex;align-items:center;gap:14px;padding:14px 4px;
  border-bottom:1px solid var(--hairline);
}
.inv-row:last-child{border-bottom:none}
.inv-date{
  min-width:82px;font-size:12.5px;color:var(--muted);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.inv-mid{flex:1;min-width:0}
.inv-title{font-size:14.5px;font-weight:560;color:var(--text);overflow-wrap:anywhere}
.inv-title .muted{font-weight:440}
.inv-amount{
  font-size:15px;font-weight:680;color:var(--text);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.inv-actions{display:flex;gap:6px;align-items:center;flex-shrink:0}

@media(max-width:760px){
  .inv-row{flex-wrap:wrap;gap:8px 12px}
  .inv-date{min-width:70px}
  .inv-mid{flex:1 1 100%;order:3}
  .inv-actions{margin-left:auto}
}