:root {
    --blue: #005EB8;
    --orange: #F96302;
    --green: #10b981;
    --ink: #18181b;
    --muted: #71717a;
    --line: #e4e4e7;
    --bg: #fafafa;
    --ios: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  }
  * { box-sizing: border-box; }

  .ftd { max-width: 1080px; margin: 40px auto; padding: 0 16px; }
  .ftd-tabs { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 32px; }
  .ftd-tab { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 10px 18px; font: 600 15px "Hanken Grotesk"; cursor: pointer; color: var(--muted); }
  .ftd-tab[aria-selected="true"] { background: var(--blue); border-color: var(--blue); color: #fff; }

  .ftd-who { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin: -12px 0 28px; }
  .ftd-who span { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; font-size: 14px; color: var(--muted); }
  .ftd-who b { color: var(--ink); }
  .ftd-who i { font-style: normal; font-weight: 600; padding: 2px 8px; border-radius: 999px; margin-left: 2px; }
  .ftd-who i.wa { background: #dcfce7; color: #15803d; }
  .ftd-who i.sms { background: #dbeafe; color: #1d4ed8; }
  .ftd-who i.portal { background: #f4f4f5; color: var(--ink); }
  .ftd-who i.email { background: #ffedd5; color: #c2410c; }

  .ftd-stage { position: relative; min-height: 660px; display: flex; justify-content: flex-end; align-items: flex-start; }
  .ftd-stage.solo { justify-content: center; min-height: 0; }
  .ftd-stage.solo .ftd-phonewrap { position: static; }
  .ftd-stage.solo .ftd-desk { display: none; }
  .ftd-label {
    font: 600 11px "JetBrains Mono";
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 10px;
    text-align: center;
    line-height: 1.3;
  }

  /* ---------- Phone (iOS Messages) ---------- */
  .ftd-phonewrap {
    position: absolute;
    left: 24px;
    top: 40px;
    z-index: 2;
    width: 280px;
  }
  .ftd-phonewrap > .ftd-label {
    width: 100%;
    max-width: 280px;
    padding: 0 6px;
    box-sizing: border-box;
    white-space: normal;
    overflow-wrap: break-word;
  }
  .ftd-desk > .ftd-label {
    max-width: 100%;
  }
  .ftd-phone { width: 280px; height: 588px; background: #0b0b0c; border-radius: 46px; padding: 11px; box-shadow: 0 0 0 2px #2a2a2c, 0 30px 60px rgba(0,0,0,.28); }
  .ftd-screen { position: relative; height: 100%; background: #000; border-radius: 36px; overflow: hidden; display: flex; flex-direction: column; font-family: var(--ios); color: #fff; }
  .ftd-status { display: flex; justify-content: space-between; align-items: center; padding: 14px 26px 0; font-weight: 600; font-size: 15px; height: 40px; }
  .ftd-batt { width: 24px; height: 11px; border: 1.5px solid #fff; border-radius: 3px; position: relative; padding: 1px; }
  .ftd-batt::before { content: ""; display: block; height: 100%; background: #fff; border-radius: 1px; }
  .ftd-batt::after { content: ""; position: absolute; right: -4px; top: 3px; width: 2px; height: 4px; background: #fff; border-radius: 0 1px 1px 0; }
  .ftd-nav { display: grid; grid-template-columns: 32px 1fr 32px; align-items: center; padding: 6px 12px 10px; background: rgba(28,28,30,.92); border-bottom: .5px solid #2c2c2e; }
  .ftd-nav svg { width: 22px; height: 22px; stroke: #0A84FF; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
  .ftd-contact { text-align: center; }
  .ftd-contact .ftd-av { width: 40px; height: 40px; margin: 0 auto 4px; border-radius: 50%; background: linear-gradient(180deg, #6b7280, #4b5563); display: grid; place-items: center; font-weight: 600; font-size: 17px; }
  .ftd-contact b { font-size: 12.5px; font-weight: 600; }
  .ftd-msgs { flex: 1; overflow-y: auto; scrollbar-width: none; padding: 10px 12px 8px; display: flex; flex-direction: column; gap: 3px; scroll-behavior: smooth; }
  .ftd-msgs::-webkit-scrollbar { display: none; }
  .ftd-msgs > * { flex-shrink: 0; }
  .ftd-day { text-align: center; color: #8e8e93; font-size: 11.5px; font-weight: 600; margin: 4px 0 8px; }
  .ftd-msg { position: relative; max-width: 76%; padding: 7px 12px; border-radius: 18px; font-size: 15px; line-height: 1.3; animation: ftd-pop .3s ease-out both; margin-top: 6px; }
  .ftd-msg.bot { background: #3a3a3c; align-self: flex-start; }
  .ftd-msg.me { background: #0A84FF; align-self: flex-end; }
  .ftd-msg.bot::before, .ftd-msg.me::before { content: ""; position: absolute; bottom: 0; width: 14px; height: 16px; }
  .ftd-msg.bot::before { left: -5px; background: #3a3a3c; border-bottom-right-radius: 14px 12px; }
  .ftd-msg.me::before { right: -5px; background: #0A84FF; border-bottom-left-radius: 14px 12px; }
  .ftd-msg.bot::after, .ftd-msg.me::after { content: ""; position: absolute; bottom: 0; width: 10px; height: 16px; background: #000; }
  .ftd-msg.bot::after { left: -10px; border-bottom-right-radius: 10px; }
  .ftd-msg.me::after { right: -10px; border-bottom-left-radius: 10px; }
  .ftd-msg.photo { padding: 0; background: none; overflow: visible; }
  .ftd-msg.photo::before, .ftd-msg.photo::after { display: none; }
  .ftd-msg.photo .ftd-photo { width: 168px; height: 124px; border-radius: 18px; }
  .ftd-msg.preview { padding: 0; width: 210px; overflow: hidden; }
  .ftd-msg.preview::before, .ftd-msg.preview::after { display: none; }
  .ftd-msg.preview .ftd-photo-row { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
  .ftd-msg.preview .ftd-photo { height: 78px; border-radius: 0; }
  .ftd-msg.preview .cap { padding: 7px 11px 9px; display: flex; flex-direction: column; gap: 2px; }
  .ftd-msg.preview b { font-size: 13px; font-weight: 600; }
  .ftd-msg.preview small { font-size: 12px; color: #aeaeb2; }
  .ftd-receipt { align-self: flex-end; font-size: 11px; color: #8e8e93; margin: 2px 4px 0 0; animation: ftd-pop .3s both; }
  .ftd-typing { align-self: flex-start; background: #3a3a3c; border-radius: 18px; padding: 11px 13px; display: flex; gap: 4px; margin-top: 6px; animation: ftd-pop .2s both; }
  .ftd-typing i { width: 7px; height: 7px; border-radius: 50%; background: #8e8e93; animation: ftd-dot 1s infinite; }
  .ftd-typing i:nth-child(2) { animation-delay: .15s; } .ftd-typing i:nth-child(3) { animation-delay: .3s; }
  .ftd-input { display: flex; align-items: center; gap: 8px; padding: 8px 10px 26px; background: #1c1c1e; position: relative; }
  .ftd-input .plus { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #636366; color: #8e8e93; display: grid; place-items: center; font-size: 18px; line-height: 1; }
  .ftd-input .field { flex: 1; height: 32px; border: 1px solid #3a3a3c; border-radius: 16px; padding: 0 12px; display: flex; align-items: center; color: #636366; font-size: 14px; }
  .ftd-input::after { content: ""; position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); width: 104px; height: 4px; border-radius: 3px; background: #fff; }

  .ftd-input .mic { display: none; }
  .ftd-msg.rich { max-width: 88%; }
  .ftd-sum b { display: block; margin-bottom: 6px; }
  .ftd-sum .row { display: flex; align-items: center; gap: 7px; padding: 4px 0; font-size: 14px; border-top: .5px solid rgba(255,255,255,.12); }
  .ftd-sum .row i { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
  .ftd-sum .row span { margin-left: auto; font-size: 12px; opacity: .75; white-space: nowrap; }
  .ftd-sum i.g { background: #34d399; } .ftd-sum i.o { background: #fb923c; } .ftd-sum i.r { background: #f87171; }

  /* WhatsApp theme */
  .ftd-screen:not(.wa) .ftd-nav.wa, .ftd-screen.wa .ftd-nav.ios { display: none; }
  .ftd-screen.wa { background: #0b141a; color: #e9edef; }
  .ftd-nav.wa { display: flex; align-items: center; gap: 8px; background: #1f2c34; border-bottom: 0; padding: 8px 12px 10px 8px; }
  .ftd-nav.wa svg { stroke: #e9edef; }
  .ftd-nav.wa .ftd-av { width: 34px; height: 34px; border-radius: 50%; background: #00a884; display: grid; place-items: center; font-weight: 600; font-size: 15px; }
  .ftd-nav.wa b { display: block; font-size: 15px; font-weight: 600; }
  .ftd-nav.wa small { color: #8696a0; font-size: 12px; }
  .wa .ftd-day { align-self: center; background: #1f2c34; color: #8696a0; padding: 4px 10px; border-radius: 8px; }
  .wa .ftd-msg { border-radius: 10px; }
  .wa .ftd-msg.bot, .wa .ftd-msg.bot::before, .wa .ftd-typing { background: #1f2c34; }
  .wa .ftd-msg.me, .wa .ftd-msg.me::before { background: #005c4b; }
  .wa .ftd-msg::after { background: #0b141a; }
  .wa .ftd-msg.photo { background: none; }
  .wa .ftd-receipt { color: #53bdeb; font-size: 12px; }
  .wa .ftd-input { background: #0b141a; }
  .wa .ftd-input .plus { border: 0; color: #8696a0; font-size: 24px; }
  .wa .ftd-input .field { background: #1f2c34; border: 0; border-radius: 20px; color: #8696a0; }
  .wa .ftd-input .mic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #00a884; }
  .ftd-input .mic svg { width: 16px; height: 16px; fill: #0b141a; }
  .wa .ftd-status { background: #1f2c34; }

  .ftd-photo {
    border-radius: 8px;
    background: #d4d4d8;
    position: relative;
    overflow: hidden;
  }
  .ftd-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .ftd-msg.photo .ftd-photo img { min-height: 124px; }

  .ftd-screen.mail { background: #f2f2f7; color: #111; }
  .ftd-screen.mail .ftd-status { color: #111; }
  .ftd-screen.mail .ftd-batt { border-color: #111; }
  .ftd-screen.mail .ftd-batt::before { background: #111; }
  .ftd-screen.mail .ftd-batt::after { background: #111; }
  .ftd-screen.mail .ftd-nav.ios,
  .ftd-screen.mail .ftd-nav.wa { display: none; }
  .ftd-email {
    margin: 8px 10px 16px;
    background: #fff;
    border-radius: 14px;
    padding: 14px 14px 16px;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    animation: ftd-pop .35s both;
  }
  .ftd-email-meta { font-size: 12px; color: #71717a; margin-bottom: 10px; }
  .ftd-email-meta div { display: flex; gap: 8px; margin-bottom: 4px; }
  .ftd-email-meta span { width: 36px; flex-shrink: 0; }
  .ftd-email-meta b { color: #18181b; font-weight: 600; }
  .ftd-email-meta .subj { margin-top: 8px; font-size: 15px; font-weight: 700; color: #18181b; line-height: 1.3; }
  .ftd-email p { margin: 0 0 12px; font-size: 14px; line-height: 1.4; color: #27272a; }
  .ftd-email-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
  .ftd-email-photos .ftd-photo { height: 120px; border-radius: 10px; }
  .ftd-email-link { color: #005EB8; font-weight: 600; font-size: 13px; }

  /* ---------- Desktop email (customer) ---------- */
  .ftd-mail-desk { display: none; flex: 1; min-height: 0; grid-template-columns: 200px 1fr; background: #f8fafc; }
  .ftd-stage.email-desk .ftd-app { display: none; }
  .ftd-stage.email-desk .ftd-mail-desk { display: grid; }
  .ftd-mail-side {
    border-right: 1px solid var(--line);
    background: #fff;
    padding: 14px 10px;
  }
  .ftd-mail-side-title {
    font: 600 11px "JetBrains Mono";
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 12px;
    padding: 0 6px;
  }
  .ftd-mail-item {
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 10px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--muted);
    background: #fafafa;
  }
  .ftd-mail-item b { color: var(--ink); font-size: 13px; }
  .ftd-mail-item span { font-size: 12px; line-height: 1.3; }
  .ftd-mail-item.on {
    border-color: var(--blue);
    background: #e8f1fb;
    box-shadow: 0 0 0 3px rgba(0, 94, 184, .1);
  }
  .ftd-mail-pane {
    padding: 18px 20px;
    overflow: auto;
    background: #f1f5f9;
  }
  .ftd-mail-empty {
    height: 100%;
    min-height: 280px;
    display: grid;
    place-items: center;
    color: #a1a1aa;
    font-weight: 500;
    font-size: 14px;
  }
  .ftd-desk-email {
    background: #fff;
    border-radius: 12px;
    padding: 18px 20px 20px;
    border: 1px solid var(--line);
    box-shadow: 0 10px 28px rgba(0,0,0,.06);
    animation: ftd-pop .35s both;
    max-width: 520px;
  }
  .ftd-desk-email p { margin: 0 0 14px; font-size: 15px; line-height: 1.45; color: #27272a; }

  /* ---------- Desktop (PM Portal in a laptop) ---------- */
  .ftd-desk { width: 790px; margin-right: 20px; }
  .ftd-laptop { background: #1c1c1e; border-radius: 18px 18px 0 0; padding: 14px 14px 18px; box-shadow: 0 0 0 1px #3f3f46 inset; }
  .ftd-base { height: 14px; margin: 0 -44px; background: linear-gradient(#e4e4e7, #a1a1aa); border-radius: 0 0 16px 16px; position: relative; box-shadow: 0 18px 30px rgba(0,0,0,.12); }
  .ftd-base::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 120px; height: 6px; background: #c4c4c8; border-radius: 0 0 8px 8px; }
  .ftd-win { background: #fff; border-radius: 6px; overflow: hidden; height: 470px; display: flex; flex-direction: column; }
  .ftd-chrome { display: flex; align-items: center; gap: 12px; height: 34px; padding: 0 12px; background: #f4f4f5; border-bottom: 1px solid var(--line); }
  .ftd-dots { display: flex; gap: 6px; }
  .ftd-dots i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
  .ftd-dots i:nth-child(2) { background: #febc2e; } .ftd-dots i:nth-child(3) { background: #28c840; }
  .ftd-url { flex: 1; max-width: 340px; margin: 0 auto; height: 22px; border-radius: 6px; background: #fff; border: 1px solid var(--line); font: 500 11.5px "JetBrains Mono"; color: var(--muted); display: grid; place-items: center; }
  .ftd-app { flex: 1; display: grid; grid-template-columns: 220px 1fr; min-height: 0; }
  .ftd-side { border-right: 1px solid var(--line); padding: 14px 10px 14px 70px; background: #fcfcfd; }
  .ftd-logo { font-weight: 700; font-size: 15px; padding: 0 8px 14px; display: flex; align-items: center; gap: 7px; }
  .ftd-logo i { width: 18px; height: 18px; border-radius: 5px; background: var(--blue); }
  .ftd-side a { display: block; padding: 7px 8px; border-radius: 7px; font-size: 13.5px; color: var(--muted); text-decoration: none; font-weight: 500; }
  .ftd-side a.on { background: #e8f1fb; color: var(--blue); font-weight: 600; }
  .ftd-main { padding: 18px 20px; overflow: hidden; }
  .ftd-main-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
  .ftd-main-head b { font-size: 19px; }
  .ftd-main-head small { font: 500 12px "JetBrains Mono"; color: var(--muted); }
  .ftd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .ftd-card { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; min-height: 76px; transition: border-color .3s, box-shadow .3s, background .3s; }
  .ftd-card.wide { grid-column: 1 / -1; }
  .ftd-card h4 { margin: 0 0 8px; font: 600 11px "JetBrains Mono"; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
  .ftd-card .v { font-size: 15px; font-weight: 600; }
  .ftd-empty { color: #d4d4d8; font-weight: 500; }
  .ftd-card.flash { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(0,94,184,.12); }
  .ftd-card.warn { border-color: var(--orange); background: #fff7f0; }
  .ftd-card.warn h4 { color: var(--orange); }
  .ftd-card.ok { border-color: var(--green); background: #f0fdf7; }
  .ftd-card.ok h4 { color: #047857; }
  .ftd-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14.5px; }
  .ftd-list li { display: flex; justify-content: space-between; gap: 8px; animation: ftd-pop .35s both; }
  .ftd-list li em { font-style: normal; font: 500 12px "JetBrains Mono"; color: var(--muted); }
  .ftd-media { display: flex; gap: 8px; }
  .ftd-thumb { width: 92px; animation: ftd-pop .35s both; }
  .ftd-thumb .ftd-photo { height: 62px; }
  .ftd-tag { display: inline-block; margin-top: 4px; font: 600 10.5px "JetBrains Mono"; color: var(--blue); background: #e8f1fb; border-radius: 999px; padding: 2px 7px; }
  .ftd-plink { margin: 10px 0 8px; color: var(--blue); font-weight: 600; font-size: 14px; }
  .ftd-bar { height: 10px; background: #f4f4f5; border-radius: 999px; overflow: hidden; margin-top: 4px; }
  .ftd-bar i { display: block; height: 100%; width: 0; background: var(--green); border-radius: 999px; transition: width .8s ease; }
  .ftd-pill { display: inline-block; font: 600 11px "JetBrains Mono"; padding: 3px 8px; border-radius: 999px; }
  .ftd-pill.ok { background: #d1fae5; color: #047857; }
  .ftd-pill.warn { background: #ffedd5; color: #c2410c; }
  .ftd-pill.wait { background: #f4f4f5; color: var(--muted); }
  .ftd-btns { display: flex; gap: 8px; margin-top: 10px; }
  .ftd-btn { border-radius: 8px; padding: 7px 12px; font: 600 13px "Hanken Grotesk"; border: 1px solid var(--line); background: #fff; transition: transform .15s, background .2s; }
  .ftd-btn.primary { background: var(--blue); border-color: var(--blue); color: #fff; }
  .ftd-btn.press { transform: scale(.94); background: #004a93; }

  .ftd-gantt { --lw: 104px; position: relative; display: flex; flex-direction: column; gap: 7px; font-size: 13px; }
  .ftd-gantt .gh, .ftd-gantt .gr { display: grid; grid-template-columns: var(--lw) 1fr; align-items: center; }
  .ftd-gantt .gh div { display: grid; grid-template-columns: repeat(5, 1fr); font: 500 11px "JetBrains Mono"; color: var(--muted); }
  .ftd-gantt .gt { position: relative; height: 16px; overflow: hidden; background: repeating-linear-gradient(90deg, transparent 0 calc(20% - 1px), #f1f1f3 calc(20% - 1px) 20%); }
  .ftd-gantt .gb { position: absolute; top: 2px; height: 12px; border-radius: 6px; background: #c7d2fe; overflow: hidden; transition: left .8s ease, background .4s; }
  .ftd-gantt .gb b { display: block; height: 100%; width: 0; background: var(--green); transition: width .8s ease; }
  .ftd-gantt .gb.done { background: var(--green); }
  .ftd-gantt .gb.plan { background: #bfdbfe; }
  .ftd-gantt .gb.risk { background: #fdba74; }
  .ftd-gantt em { position: absolute; top: 0; font: 600 10.5px "JetBrains Mono"; font-style: normal; color: #c2410c; transition: left .8s ease; }
  .ftd-gantt::after { content: ""; position: absolute; top: 16px; bottom: 0; width: 2px; background: var(--orange); left: calc(var(--lw) + (100% - var(--lw)) * .3); }
  .ftd-att { width: 100%; border-collapse: collapse; font-size: 13.5px; }
  .ftd-att th { text-align: left; font: 500 11px "JetBrains Mono"; color: var(--muted); padding-bottom: 4px; }
  .ftd-att td { padding: 3px 0; }
  .ftd-att td + td, .ftd-att th + th { text-align: right; font-family: "JetBrains Mono"; font-size: 12.5px; padding-left: 16px; }
  .ftd-att tfoot td { border-top: 1px solid var(--line); padding-top: 6px; font-weight: 600; }

  .ftd-replay { display: block; margin: 26px auto 0; background: none; border: 0; color: var(--blue); font: 600 14px "Hanken Grotesk"; cursor: pointer; }

  @keyframes ftd-pop { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }
  @keyframes ftd-dot { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } }

  @media (max-width: 1000px) {
    .ftd-stage { flex-direction: column; align-items: center; min-height: 0; gap: 32px; }
    .ftd-phonewrap { position: static; }
    .ftd-desk { width: 100%; max-width: 640px; margin-right: 0; }
    .ftd-base { margin: 0 -16px; }
    .ftd-app { grid-template-columns: 1fr; }
    .ftd-side { display: none; }
    .ftd-mail-desk { grid-template-columns: 1fr; }
    .ftd-mail-side { display: none; }
  }
  @media (max-width: 520px) {
    .ftd-grid { grid-template-columns: 1fr; }
    .ftd-win { height: auto; min-height: 420px; }
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
  }