/* FlashyIT client portal. Tokens: black #111, yellow #FFD600 / hover #FFEA00, page #F2F2EF, card #FAFAF7, border #E4E4DF, muted #737373.
   No inline styles are used anywhere in the app (CSP): every look is a class here. */
:root {
  --fz-black: #111111;
  --fz-yellow: #FFD600;
  --fz-yellow-hover: #FFEA00;
  --fz-page: #F2F2EF;
  --fz-card: #FAFAF7;
  --fz-border: #E4E4DF;
  --fz-muted: #737373;
  --fz-display: 'Space Grotesk', system-ui, sans-serif;
  --fz-body: 'DM Sans', system-ui, sans-serif;
  --fz-mono: 'JetBrains Mono', ui-monospace, monospace;
}
*, *::before, *::after { box-sizing: border-box; }
html.fz-lock { overflow: hidden; }
body { margin: 0; background: var(--fz-page); color: var(--fz-black); font-family: var(--fz-body); -webkit-font-smoothing: antialiased; }
a { color: var(--fz-black); }
::selection { background: var(--fz-yellow); color: var(--fz-black); }
input, textarea, select, button { font: inherit; }
h1, h2, p { margin: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--fz-black); outline-offset: 2px; }
.fz-side :focus-visible, .fz-pills :focus-visible, .fz-login__hero :focus-visible, .fz-toast :focus-visible { outline-color: var(--fz-yellow); }
#fz-portal { min-height: 100vh; }
#fz-portal > noscript { display: block; padding: 40px 20px; text-align: center; color: var(--fz-muted); }

@keyframes fz-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fz-drawer { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fz-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes fz-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------------------------------------------------------------- primitives */
.fz-icon { display: block; flex: none; }
.fz-icon--invert { filter: invert(1); }
.fz-icon--flip { transform: rotate(180deg); }
.fz-flag { display: block; flex: none; border-radius: 3px; }
.fz-muted { color: var(--fz-muted); }
.fz-small { font-size: 14px; line-height: 1.5; }
.fz-eyebrow { font-family: var(--fz-mono); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--fz-yellow); }
.fz-spinner { width: 18px; height: 18px; flex: none; border-radius: 50%; border: 2.5px solid rgba(250, 250, 247, .3); border-top-color: var(--fz-yellow); animation: fz-spin .8s linear infinite; }

.fz-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: 14px; padding: 0 18px; min-height: 46px; font-family: var(--fz-display); font-weight: 600; font-size: 15px; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; max-width: 100%; }
.fz-btn > span { min-width: 0; overflow-wrap: anywhere; }
.fz-btn:disabled { cursor: progress; opacity: .85; }
.fz-btn--dark { background: var(--fz-black); color: var(--fz-card); }
.fz-btn--dark:hover:not(:disabled) { box-shadow: 0 14px 28px -12px rgba(17, 17, 17, .6); }
.fz-btn--lg { min-height: 58px; border-radius: 16px; font-weight: 700; font-size: 17px; width: 100%; }
.fz-btn--yellow { background: var(--fz-yellow); color: var(--fz-black); min-height: 44px; border-radius: 12px; }
.fz-btn--yellow:hover { background: var(--fz-yellow-hover); }
.fz-btn--ghost { background: transparent; color: var(--fz-black); border: 1.5px solid var(--fz-black); min-height: 44px; border-radius: 12px; justify-self: start; }
.fz-btn--ghost:hover { background: #FFFFFF; }
.fz-btn--top { min-height: 46px; border-radius: 13px; padding: 0 16px; }

.fz-iconbtn { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--fz-border); background: #FFFFFF; color: var(--fz-black); cursor: pointer; text-decoration: none; padding: 0; }
.fz-iconbtn:hover, .fz-iconbtn.is-active { border-color: var(--fz-black); }
.fz-iconbtn--lg { width: 46px; height: 46px; border-radius: 13px; }
.fz-initials { font-family: var(--fz-display); font-weight: 700; font-size: 15px; }

.fz-badge { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 8px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.fz-badge--yellow { background: var(--fz-yellow); color: var(--fz-black); }
.fz-badge--black { background: var(--fz-black); color: var(--fz-yellow); }
.fz-badge--grey { background: #E6E6E1; color: #3D3D3A; }
.fz-badge--green { background: #E3EEDD; color: #2F5A22; }
.fz-badge--red { background: #FEE4E2; color: #7A271A; }

.fz-card { background: var(--fz-card); border-radius: 24px; padding: 22px; }
.fz-placeholder { text-align: center; padding: 56px 22px; }
.fz-tile { width: 48px; height: 48px; border-radius: 14px; background: var(--fz-yellow); display: grid; place-items: center; }

.fz-brand { display: flex; align-items: center; gap: 10px; color: var(--fz-card); text-decoration: none; position: relative; }
.fz-brand__mark { width: 36px; height: 36px; border-radius: 10px; background: var(--fz-yellow); display: grid; place-items: center; flex: none; }
.fz-brand__mark--sm { width: 34px; height: 34px; }
.fz-brand__name { font-family: var(--fz-display); font-size: 24px; letter-spacing: -0.04em; }
.fz-brand--side .fz-brand__name { font-size: 22px; }
.fz-brand__a { font-weight: 500; }
.fz-brand__b { font-weight: 700; color: var(--fz-yellow); }
.fz-brand--side { padding: 0 8px; }

.fz-alert { background: #FEF3F2; border: 1px solid #FECDCA; color: #7A271A; border-radius: 12px; padding: 12px 14px; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.fz-live:empty { display: none; }

.fz-form { display: grid; gap: 18px; }
.fz-form--tight { gap: 14px; }
.fz-field { display: grid; gap: 8px; }
.fz-field__label { font-weight: 600; font-size: 15px; line-height: 1.35; }
.fz-input { width: 100%; height: 54px; padding: 0 16px; border-radius: 14px; border: 1.5px solid var(--fz-border); background: #FFFFFF; font-size: 16px; color: var(--fz-black); outline: none; }
.fz-input:focus { border-color: var(--fz-black); box-shadow: 0 0 0 4px rgba(255, 214, 0, .5); }
.fz-input[aria-invalid="true"] { border-color: #B42318; }
.fz-input--code { font-family: var(--fz-mono); font-size: 24px; letter-spacing: .4em; text-align: center; padding-left: calc(16px + .4em); }
.fz-check { display: flex; align-items: center; gap: 10px; font-size: 15px; cursor: pointer; }
.fz-check input { width: 20px; height: 20px; margin: 0; accent-color: var(--fz-black); flex: none; }

/* ---------------------------------------------------------------- login */
.fz-login { min-height: 100vh; padding: 12px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 12px; background: var(--fz-card); }
.fz-login__hero { position: relative; overflow: hidden; background: var(--fz-black); color: var(--fz-card); border-radius: 32px; padding: clamp(28px, 4vw, 56px); display: flex; flex-direction: column; justify-content: space-between; gap: 48px; min-height: 320px; }
.fz-login__bolt { position: absolute; right: -60px; bottom: -80px; width: clamp(220px, 30vw, 440px); pointer-events: none; }
.fz-login__pitch { position: relative; display: grid; gap: 20px; max-width: 520px; }
.fz-login__title { font-family: var(--fz-display); font-weight: 700; font-size: clamp(44px, 5.6vw, 88px); line-height: .9; letter-spacing: -0.055em; text-wrap: balance; overflow-wrap: anywhere; hyphens: auto; }
.fz-login__lead { font-size: 18px; line-height: 1.5; color: #CFCFCA; max-width: 40ch; }
.fz-login__person { position: relative; display: flex; align-items: center; gap: 14px; background: #1C1C1C; border-radius: 20px; padding: 14px 16px; max-width: 420px; font-size: 15px; line-height: 1.4; color: #CFCFCA; }
.fz-login__person strong { color: var(--fz-card); font-weight: 600; }
.fz-login__avatar { width: 44px; height: 44px; border-radius: 13px; flex: none; }
.fz-login__main { position: relative; display: grid; place-items: center; padding: clamp(72px, 8vw, 96px) clamp(8px, 3vw, 40px) clamp(24px, 4vw, 56px); }
.fz-login__lang { position: absolute; top: 12px; right: 12px; z-index: 5; }
.fz-login__col { width: 100%; max-width: 420px; display: grid; gap: 28px; animation: fz-in .5s both; }
.fz-login__head { display: grid; gap: 8px; }
.fz-login__welcome { font-family: var(--fz-display); font-weight: 700; font-size: clamp(32px, 9vw, 40px); letter-spacing: -0.045em; line-height: 1; overflow-wrap: anywhere; }
.fz-login__head p { font-size: 16px; }
.fz-card--sent { background: #FFFFFF; border: 1px solid var(--fz-border); border-radius: 20px; display: grid; gap: 14px; }
.fz-card__title { font-family: var(--fz-display); font-weight: 600; font-size: 20px; }
.fz-card__text { font-size: 15px; line-height: 1.5; color: #3D3D3A; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- app frame */
.fz-boot { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; text-align: center; color: var(--fz-muted); }
.fz-boot .fz-spinner { border-color: rgba(17, 17, 17, .15); border-top-color: var(--fz-black); }
.fz-app { min-height: 100vh; display: flex; gap: 12px; padding: 12px; align-items: flex-start; }
.fz-side { position: sticky; top: 12px; width: 264px; flex: none; height: calc(100vh - 24px); overflow-y: auto; background: var(--fz-black); color: var(--fz-card); border-radius: 28px; padding: 20px 14px; display: flex; flex-direction: column; gap: 24px; }
.fz-nav { display: grid; gap: 2px; }
.fz-nav__item, .fz-pill { display: flex; align-items: center; gap: 12px; border-radius: 12px; color: var(--fz-card); text-decoration: none; font-size: 15px; font-weight: 500; transition: background .15s; }
.fz-nav__item { height: 46px; padding: 0 12px; }
.fz-nav__item:hover, .fz-pill:hover { background: #262626; }
.fz-nav__item.is-active, .fz-pill.is-active { background: var(--fz-yellow); color: var(--fz-black); }
.fz-nav__item.is-active:hover, .fz-pill.is-active:hover { background: var(--fz-yellow-hover); }
.fz-nav__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fz-nav__badge { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--fz-yellow); color: var(--fz-black); font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.fz-side__person { margin-top: auto; flex: none; display: grid; gap: 12px; background: #1C1C1C; border-radius: 20px; padding: 16px; }
.fz-side__who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.fz-avatar { width: 44px; height: 44px; border-radius: 13px; flex: none; object-fit: cover; }
.fz-side__text { display: grid; gap: 2px; min-width: 0; }
.fz-side__name { font-family: var(--fz-display); font-weight: 600; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fz-side__sub { font-size: 13px; color: #8C8C88; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.fz-body { flex: 1; min-width: 0; display: grid; gap: 12px; align-content: start; }
.fz-top { background: var(--fz-card); border-radius: 24px; padding: 14px 14px 14px 22px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.fz-top__title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.fz-top__text { display: grid; gap: 2px; min-width: 0; }
.fz-crumb { font-family: var(--fz-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--fz-muted); overflow-wrap: anywhere; }
.fz-top__page { font-family: var(--fz-display); font-weight: 700; font-size: 22px; letter-spacing: -0.03em; overflow-wrap: anywhere; }
.fz-top__actions { display: flex; align-items: center; gap: 8px; }
.fz-pills { display: flex; gap: 6px; overflow-x: auto; background: var(--fz-black); border-radius: 18px; padding: 6px; scrollbar-width: none; }
.fz-pill { flex: none; height: 44px; padding: 0 14px; gap: 8px; font-size: 14px; white-space: nowrap; }
.fz-main { min-width: 0; outline: none; display: grid; gap: 12px; }

/* ---------------------------------------------------------------- language menu */
.fz-lang { position: relative; }
.fz-lang__btn { height: 46px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: 13px; border: 1px solid var(--fz-border); background: #FFFFFF; color: var(--fz-black); cursor: pointer; font-family: var(--fz-display); font-weight: 600; font-size: 14px; }
.fz-lang__btn:hover { border-color: var(--fz-black); }
.fz-lang__list { position: absolute; top: calc(100% + 8px); right: 0; min-width: 180px; background: #FFFFFF; border: 1px solid var(--fz-border); border-radius: 14px; padding: 6px; display: grid; gap: 2px; box-shadow: 0 18px 40px -16px rgba(17, 17, 17, .35); z-index: 70; animation: fz-in .2s both; }
.fz-lang__opt { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 12px; border-radius: 10px; border: 0; background: transparent; color: var(--fz-black); cursor: pointer; font-size: 15px; font-weight: 500; text-align: left; }
.fz-lang__opt:hover, .fz-lang__opt.is-on { background: var(--fz-page); }

/* ---------------------------------------------------------------- dialogs + toast */
.fz-overlay { position: fixed; inset: 0; z-index: 90; background: rgba(17, 17, 17, .5); animation: fz-fade .2s both; }
.fz-overlay--modal { display: grid; place-items: center; padding: 16px; }
.fz-overlay--drawer { z-index: 80; background: rgba(17, 17, 17, .45); }
.fz-dialog { background: var(--fz-card); outline: none; }
.fz-dialog--modal { width: min(560px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; border-radius: 28px; padding: clamp(20px, 3vw, 32px); display: grid; gap: 16px; animation: fz-in .3s both; }
.fz-dialog--drawer { position: fixed; top: 12px; right: 12px; bottom: 12px; width: min(540px, calc(100% - 24px)); border-radius: 28px; z-index: 81; display: flex; flex-direction: column; overflow: hidden; animation: fz-drawer .3s cubic-bezier(.2, .7, .2, 1) both; }
.fz-toast { position: fixed; left: 0; right: 0; bottom: 24px; margin: 0 auto; width: fit-content; z-index: 100; background: var(--fz-black); color: var(--fz-card); border-radius: 16px; padding: 14px 18px; display: flex; align-items: center; gap: 12px; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .6); max-width: calc(100% - 32px); font-size: 15px; animation: fz-in .3s both; }
.fz-toast__mark { width: 28px; height: 28px; border-radius: 9px; background: var(--fz-yellow); display: grid; place-items: center; flex: none; }

/* ---------------------------------------------------------------- small screens */
@media (max-width: 899px) {
  .fz-app { flex-direction: column; align-items: stretch; }
  .fz-top { padding-left: 16px; }
}
@media (max-width: 560px) {
  .fz-btn--top { width: 46px; padding: 0; }
  .fz-btn--top > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .fz-top__page { font-size: 20px; }
}

/* ---------------------------------------------------------------- shared bits for overview / tickets */
.fz-mono { font-family: var(--fz-mono); font-size: 12px; color: var(--fz-muted); overflow-wrap: anywhere; }
.fz-nowrap { white-space: nowrap; }
.fz-normal { font-weight: 400; }
.fz-text { font-size: 15px; color: #3D3D3A; line-height: 1.4; }
.fz-link { border: 0; background: transparent; padding: 0; font-weight: 600; font-size: 14px; cursor: pointer; text-decoration: underline; color: var(--fz-black); }
.fz-h2 { font-family: var(--fz-display); font-weight: 700; font-size: 22px; letter-spacing: -0.03em; }
.fz-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 48px 22px; text-align: center; color: var(--fz-muted); }
.fz-state .fz-spinner { border-color: rgba(17, 17, 17, .15); border-top-color: var(--fz-black); }
.fz-empty { padding: 8px 2px; }
.fz-btn--sm { min-height: 42px; border-radius: 12px; padding: 0 16px; font-size: 14px; }
.fz-btn--outline { background: transparent; color: var(--fz-black); border: 1.5px solid var(--fz-border); }
.fz-btn--outline:hover { border-color: var(--fz-black); }
.fz-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.fz-panel { background: var(--fz-card); border-radius: 28px; padding: clamp(16px, 2.4vw, 28px); display: grid; gap: 14px; align-content: start; min-width: 0; }
.fz-panel__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }

.fz-lowhours { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; background: var(--fz-yellow); border-radius: 20px; padding: 14px 18px; }
.fz-lowhours__text { flex: 1; min-width: 220px; font-size: 15px; line-height: 1.4; }

/* ---------------------------------------------------------------- overview */
.fz-over { display: grid; gap: 12px; min-width: 0; }
.fz-hello { padding: 8px 8px 4px; display: grid; gap: 6px; }
.fz-hello__title { font-family: var(--fz-display); font-weight: 700; font-size: clamp(34px, 4vw, 56px); letter-spacing: -0.05em; line-height: .95; overflow-wrap: anywhere; }
.fz-hello__lead { font-size: 17px; color: #3D3D3A; }
.fz-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 12px; }
.fz-tile-card { border-radius: 28px; padding: 24px; display: grid; gap: 14px; align-content: space-between; min-width: 0; color: inherit; text-decoration: none; }
a.fz-tile-card:hover { box-shadow: 0 18px 36px -18px rgba(17, 17, 17, .6); }
.fz-tile-card--hours { background: var(--fz-black); color: var(--fz-card); grid-template-columns: auto 1fr; gap: 20px; align-items: center; }
.fz-tile-card--plan { background: var(--fz-yellow); color: var(--fz-black); }
.fz-tile-card--invoice { background: #FFFFFF; }
.fz-tile-card__body { display: grid; gap: 6px; min-width: 0; }
.fz-tile-card__row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.fz-tile-card__main { display: grid; gap: 4px; }
.fz-tile-card__sub { font-size: 14px; line-height: 1.4; }
.fz-tile-card--hours .fz-tile-card__sub { color: #CFCFCA; }
.fz-ring { transform: rotate(-90deg); flex: none; }
.fz-big { font-family: var(--fz-display); font-weight: 700; font-size: 40px; letter-spacing: -0.04em; line-height: 1; overflow-wrap: anywhere; }
.fz-big--md { font-size: 32px; }
.fz-label { font-family: var(--fz-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.fz-label--muted { color: var(--fz-muted); }
.fz-tag { height: 26px; padding: 0 10px; border-radius: 8px; background: var(--fz-black); color: var(--fz-yellow); font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; }
.fz-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 12px; }
.fz-panel--list { gap: 4px; }
.fz-panel--list .fz-h2 { margin-bottom: 10px; }
.fz-row { display: grid; gap: 10px; border: 1px solid var(--fz-border); background: #FFFFFF; border-radius: 18px; padding: 16px; color: var(--fz-black); text-decoration: none; }
.fz-row:hover { border-color: var(--fz-black); }
.fz-row__top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.fz-row__title { font-family: var(--fz-display); font-weight: 600; font-size: 17px; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.fz-act { display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--fz-border); }
.fz-act__icon { width: 36px; height: 36px; border-radius: 11px; background: var(--fz-yellow); display: grid; place-items: center; }
.fz-act__text { font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; min-width: 0; }

/* ---------------------------------------------------------------- tickets list */
.fz-panel--tickets { gap: 18px; }
.fz-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.fz-tabs { display: flex; gap: 4px; background: var(--fz-page); border-radius: 14px; padding: 4px; }
.fz-tab { height: 40px; padding: 0 16px; border-radius: 10px; border: 0; background: transparent; font-weight: 600; font-size: 14px; cursor: pointer; color: var(--fz-black); }
.fz-tab.is-on { background: #FFFFFF; box-shadow: 0 1px 4px rgba(17, 17, 17, .12); }
.fz-tab__n { color: var(--fz-muted); font-weight: 500; }
.fz-list { display: grid; gap: 8px; }
.fz-ticket { border: 1px solid var(--fz-border); background: #FFFFFF; border-radius: 18px; padding: 16px 18px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 10px 18px; align-items: center; color: var(--fz-black); text-decoration: none; }
.fz-ticket:hover { border-color: var(--fz-black); }
.fz-ticket__head { display: grid; gap: 4px; grid-column: 1 / -1; min-width: 0; }
.fz-ticket__subject { font-family: var(--fz-display); font-weight: 600; font-size: 17px; overflow-wrap: anywhere; }
.fz-ticket__status { justify-self: start; }
.fz-kv { display: grid; gap: 2px; font-size: 14px; min-width: 0; }
@media (min-width: 700px) {
  .fz-ticket__head { grid-column: span 2; }
}

/* ---------------------------------------------------------------- ticket drawer */
.fz-drawer__head { padding: 22px 22px 18px; border-bottom: 1px solid var(--fz-border); display: grid; gap: 12px; flex: none; }
.fz-drawer__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.fz-drawer__title { font-family: var(--fz-display); font-weight: 700; font-size: 26px; letter-spacing: -0.03em; line-height: 1.1; overflow-wrap: anywhere; }
.fz-drawer__state { padding: 28px 22px; display: flex; justify-content: center; }
.fz-drawer__state .fz-spinner { border-color: rgba(17, 17, 17, .15); border-top-color: var(--fz-black); }
.fz-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fz-chip { height: 28px; padding: 0 10px; border-radius: 8px; background: var(--fz-page); font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; }
.fz-thread { flex: 1; overflow-y: auto; padding: 20px 22px; display: grid; gap: 14px; align-content: start; }
.fz-msg { display: flex; gap: 10px; }
.fz-msg--mine { flex-direction: row-reverse; }
.fz-msg__avatar { width: 34px; height: 34px; border-radius: 10px; flex: none; object-fit: cover; }
.fz-msg__col { max-width: 82%; display: grid; gap: 4px; min-width: 0; }
.fz-msg__bubble { background: #FFFFFF; color: var(--fz-black); border-radius: 16px 16px 16px 4px; padding: 12px 14px; font-size: 15px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.fz-msg--mine .fz-msg__bubble { background: var(--fz-black); color: var(--fz-card); border-radius: 16px 16px 4px 16px; }
.fz-msg__who { font-size: 12px; color: var(--fz-muted); }
.fz-msg--mine .fz-msg__who { text-align: right; }
.fz-reply { padding: 14px; border-top: 1px solid var(--fz-border); display: grid; gap: 8px; flex: none; }
.fz-reply__row { display: flex; gap: 8px; }
.fz-reply__input { flex: 1; min-width: 0; height: 50px; padding: 0 14px; border-radius: 14px; border: 1.5px solid var(--fz-border); background: #FFFFFF; font-size: 15px; outline: none; color: var(--fz-black); }
.fz-reply__input:focus { border-color: var(--fz-black); }
.fz-reply__send { width: 50px; height: 50px; border-radius: 14px; border: 0; background: var(--fz-yellow); display: grid; place-items: center; cursor: pointer; flex: none; }
.fz-reply__send:hover:not(:disabled) { background: var(--fz-yellow-hover); }
.fz-reply__send:disabled { opacity: .5; cursor: default; }

/* ---------------------------------------------------------------- new ticket modal */
.fz-modal__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.fz-modal__titles { display: grid; gap: 4px; }
.fz-modal__title { font-family: var(--fz-display); font-weight: 700; font-size: 28px; letter-spacing: -0.04em; }
.fz-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.fz-cat { height: 40px; padding: 0 14px; border-radius: 11px; border: 1.5px solid var(--fz-border); background: #FFFFFF; font-weight: 600; font-size: 14px; cursor: pointer; color: var(--fz-black); }
.fz-cat.is-on { border-color: var(--fz-black); background: var(--fz-yellow); }
.fz-textarea { width: 100%; padding: 12px 14px; border-radius: 13px; border: 1.5px solid var(--fz-border); background: #FFFFFF; font-size: 15px; line-height: 1.5; outline: none; resize: vertical; color: var(--fz-black); }
.fz-textarea:focus { border-color: var(--fz-black); box-shadow: 0 0 0 4px rgba(255, 214, 0, .5); }
.fz-info { display: flex; gap: 10px; align-items: flex-start; background: var(--fz-page); border-radius: 14px; padding: 12px 14px; font-size: 14px; line-height: 1.45; }
.fz-info .fz-icon { margin-top: 1px; }
.fz-dialog--modal .fz-input { height: 50px; font-size: 15px; }

/* ---------------------------------------------------------------- hours / invoices / plan */
.fz-right { text-align: right; }
.fz-strong { font-weight: 600; }
.fz-hours, .fz-invoices, .fz-plan { display: grid; gap: 12px; min-width: 0; }

.fz-hero { background: var(--fz-black); color: var(--fz-card); border-radius: 28px; padding: clamp(22px, 3vw, 36px); display: grid; gap: 24px; min-width: 0; }
.fz-hero__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px; }
.fz-hero__text { display: grid; gap: 8px; min-width: 0; }
.fz-hero__big { font-family: var(--fz-display); font-weight: 700; font-size: clamp(56px, 8vw, 112px); letter-spacing: -0.06em; line-height: .85; overflow-wrap: anywhere; }
.fz-hero__sub { font-size: 16px; color: #CFCFCA; line-height: 1.4; }
.fz-btn--hero { min-height: 54px; padding: 0 22px; border-radius: 15px; font-weight: 700; font-size: 16px; }
.fz-bar-wrap { display: grid; gap: 8px; }
.fz-bar { display: block; width: 100%; height: 18px; }
.fz-bar-scale { display: flex; justify-content: space-between; font-family: var(--fz-mono); font-size: 12px; color: #8C8C88; }

.fz-rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px; }
.fz-rule { background: var(--fz-card); border-radius: 24px; padding: 20px; display: grid; gap: 8px; align-content: start; }
.fz-rule__icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; }
.fz-rule__icon--yellow { background: var(--fz-yellow); }
.fz-rule__icon--black { background: var(--fz-black); }
.fz-rule__icon--grey { background: var(--fz-border); }
.fz-rule__title { font-family: var(--fz-display); font-weight: 600; font-size: 18px; }
.fz-rule__text { font-size: 14px; line-height: 1.5; color: #3D3D3A; }

.fz-usage { display: grid; }
.fz-usage__row { display: grid; grid-template-columns: minmax(0, 110px) minmax(0, 1fr) minmax(0, 90px) minmax(0, 90px); gap: 12px; padding: 14px 4px; border-top: 1px solid var(--fz-border); font-size: 15px; align-items: center; }
.fz-usage__row--head { border-top: 0; padding: 0 4px 10px; font-family: var(--fz-mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--fz-muted); }
.fz-usage__ticket { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .fz-usage__row { grid-template-columns: minmax(0, 60px) minmax(0, 1fr) minmax(0, 62px) minmax(0, 56px); gap: 6px; font-size: 14px; }
  .fz-usage__row--head { font-size: 10px; letter-spacing: 0; }
}
/* Phones: 16px fields so iOS does not zoom in on focus; text links get a 44px tap area without moving the layout. */
@media (max-width: 899px) {
  .fz-reply__input, .fz-textarea { font-size: 16px; }
  .fz-link { padding: 12px 0; margin: -12px 0; }
}

.fz-totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px; }
.fz-total { background: var(--fz-card); border-radius: 24px; padding: 20px; display: grid; gap: 6px; align-content: start; min-width: 0; }
.fz-total--yellow { background: var(--fz-yellow); }
.fz-total__method { font-family: var(--fz-display); font-weight: 600; font-size: 20px; }
.fz-inv { background: #FFFFFF; border: 1px solid var(--fz-border); border-radius: 18px; padding: 14px 16px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); gap: 10px 18px; align-items: center; }
.fz-inv__main { display: grid; gap: 3px; grid-column: 1 / -1; min-width: 0; }
.fz-inv__desc { font-family: var(--fz-display); font-weight: 600; font-size: 17px; overflow-wrap: anywhere; }
.fz-inv__amount { font-family: var(--fz-display); font-weight: 700; font-size: 18px; }
.fz-inv__status { justify-self: start; }
.fz-inv__actions { display: flex; gap: 6px; flex-wrap: wrap; }
@media (min-width: 700px) {
  .fz-inv__main { grid-column: span 2; }
  .fz-inv__actions { justify-content: flex-end; }
}

.fz-packs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 10px; }
.fz-pack { text-align: left; border-radius: 20px; border: 2px solid var(--fz-border); background: #FFFFFF; color: var(--fz-black); padding: 18px; cursor: pointer; display: grid; gap: 6px; align-content: start; }
.fz-pack:hover { border-color: var(--fz-black); }
.fz-pack.is-on { border-color: var(--fz-black); background: var(--fz-yellow); }
.fz-pack__h { font-family: var(--fz-display); font-weight: 700; font-size: 34px; letter-spacing: -0.04em; line-height: 1; }
.fz-pack__price { font-size: 15px; font-weight: 600; }
.fz-pack__note { font-size: 13px; opacity: .8; overflow-wrap: anywhere; }

.fz-plan__top { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 12px; }
.fz-plan__card { position: relative; overflow: hidden; background: var(--fz-yellow); border-radius: 28px; padding: clamp(22px, 3vw, 36px); display: grid; gap: 20px; align-content: start; min-width: 0; }
.fz-plan__title { display: grid; gap: 4px; }
.fz-plan__name { font-family: var(--fz-display); font-weight: 700; font-size: clamp(44px, 5vw, 72px); letter-spacing: -0.055em; line-height: .9; overflow-wrap: anywhere; }
.fz-plan__price { font-size: 20px; font-weight: 600; }
.fz-plan__features { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fz-plan__features li { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; line-height: 1.4; }
.fz-plan__features .fz-icon { margin-top: 2px; }
.fz-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fz-stat { background: #FFFFFF; border-radius: 18px; padding: 16px; display: grid; gap: 4px; align-content: start; min-width: 0; }
.fz-stat__n { font-family: var(--fz-display); font-weight: 700; font-size: 30px; overflow-wrap: anywhere; }
.fz-facts { margin: 0; display: grid; font-size: 15px; }
.fz-facts__row { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--fz-border); }
.fz-facts dt { color: var(--fz-muted); }
.fz-facts dd { margin: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.fz-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 10px; }
.fz-opt { background: #FFFFFF; border: 1.5px solid var(--fz-border); border-radius: 22px; padding: 20px; display: grid; gap: 12px; align-content: start; }
.fz-opt__name { font-family: var(--fz-display); font-weight: 700; font-size: 22px; }
.fz-opt__blurb { font-size: 14px; line-height: 1.45; color: #3D3D3A; }

/* ---- setup + account (Task 9) */
.fz-setup { gap: 18px; }
.fz-setup__head { display: grid; gap: 6px; max-width: 640px; }
.fz-setup__title { margin: 0; font-family: var(--fz-display); font-weight: 700; font-size: clamp(28px, 3vw, 40px); letter-spacing: -0.045em; line-height: 1; }
.fz-devices { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 10px; }
.fz-device { background: #FFFFFF; border: 1px solid var(--fz-border); border-radius: 20px; padding: 18px; display: grid; gap: 12px; align-content: start; min-width: 0; }
.fz-device__head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.fz-device__icon { width: 44px; height: 44px; border-radius: 13px; background: #F2F2EF; display: grid; place-items: center; flex: none; }
.fz-device__names { display: grid; gap: 2px; min-width: 0; }
.fz-device__name { font-family: var(--fz-display); font-weight: 600; font-size: 17px; overflow-wrap: anywhere; }
.fz-device__note { font-size: 14px; line-height: 1.45; color: #3D3D3A; overflow-wrap: anywhere; }
.fz-account { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 12px; align-items: start; min-width: 0; }
.fz-account__side { display: grid; gap: 12px; min-width: 0; }
.fz-form__pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 14px; }
.fz-input--readonly { background: #F2F2EF; color: var(--fz-muted); cursor: not-allowed; }
.fz-select { appearance: auto; padding-right: 12px; }
.fz-btn--save { justify-self: start; }
.fz-btn--danger { color: #B42318; border-color: #E4B4AF; }
.fz-btn--danger:hover { background: #FEF3F2; }
.fz-switchrow { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 0; border-top: 1px solid var(--fz-border); }
.fz-switchrow__text { display: grid; gap: 2px; min-width: 0; }
.fz-switchrow__label { font-weight: 600; font-size: 15px; }
.fz-switch { width: 52px; height: 30px; border-radius: 15px; border: 0; background: #CFCFCA; position: relative; cursor: pointer; flex: none; padding: 0; transition: background .2s; }
.fz-switch[aria-checked="true"] { background: var(--fz-black); }
.fz-switch__knob { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .2s; }
.fz-switch[aria-checked="true"] .fz-switch__knob { transform: translateX(22px); }

/* Ticket photos */
.fz-photos { display: grid; gap: 8px; }
.fz-photos__list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.fz-photos__item { position: relative; width: 64px; height: 64px; border-radius: 12px; overflow: hidden; background: var(--fz-border); }
.fz-photos__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fz-photos__item.is-error { outline: 2px solid #C0392B; }
.fz-photos__busy { position: absolute; inset: 0; background: rgba(255,255,255,.6); }
.fz-photos__busy::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px; border: 2px solid #111; border-right-color: transparent; border-radius: 50%; animation: fz-spin .8s linear infinite; }
.fz-photos__remove { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border: 0; border-radius: 50%; background: rgba(255,255,255,.92); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.fz-photos__add { position: relative; display: inline-flex; align-items: center; gap: 8px; align-self: start; justify-self: start; min-height: 44px; padding: 0 14px; border-radius: 12px; border: 1.5px dashed var(--fz-border); font-weight: 600; font-size: 14px; cursor: pointer; }
.fz-photos__add:hover { border-color: var(--fz-black); }
.fz-photos__add input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.fz-photos__add:focus-within { box-shadow: 0 0 0 4px rgba(255, 214, 0, .5); }
.fz-photos__add.is-disabled { opacity: .5; cursor: default; }
.fz-photos__note { margin: 0; font-size: 13px; color: #C0392B; }
.fz-msg__photos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.fz-msg__photo { display: block; width: 120px; height: 90px; border-radius: 10px; overflow: hidden; background: rgba(0,0,0,.06); }
.fz-msg__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* flashyHelp app downloads (overview) */
.fz-apps { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.fz-apps__text { display: grid; gap: 4px; }
.fz-apps__text p { margin: 0; }
.fz-apps__btns { display: flex; gap: 10px; flex-wrap: wrap; }
.fz-apps__btn { min-height: 56px; padding: 0 18px; gap: 10px; }
.fz-apps__btn:disabled { opacity: 1; cursor: default; }
.fz-apps__label { display: grid; text-align: left; line-height: 1.2; }
@media (max-width: 720px) {
  .fz-apps { grid-template-columns: 1fr; }
  .fz-apps__btn { flex: 1 1 140px; justify-content: center; }
}

/* flashyHelp computers: live health, checks and remote sessions */
.fz-health { display: inline-flex; align-items: center; gap: 8px; justify-self: start; border: 1px solid var(--fz-border); background: #FAFAF7; border-radius: 999px; padding: 6px 12px; font-weight: 600; font-size: 13px; cursor: pointer; color: var(--fz-black); }
.fz-health__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: #D4D4CF; }
.fz-health--ok .fz-health__dot, .fz-health__dot.fz-health--ok { background: #3FA34D; }
.fz-health--warn .fz-health__dot, .fz-health__dot.fz-health--warn { background: #F5A524; }
.fz-health--bad .fz-health__dot, .fz-health__dot.fz-health--bad { background: #E5484D; }
.fz-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14px; }
.fz-checks li { display: flex; gap: 10px; align-items: baseline; }
.fz-device__actions { display: flex; flex-wrap: wrap; gap: 16px; }
.fz-link--danger { color: #B42318; }
.fz-activity-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 13px; }
.fz-activity-log li { display: grid; gap: 2px; }