/* FreelancerTimezone — sub-pages. Matches the FTZ Pages Pro design tokens. */

.ftzs{
  --bg:#060d1f; --card:#0d1829; --card-2:#101f36; --line:rgba(56,189,248,.12); --line-2:rgba(56,189,248,.28);
  --text:#e2eeff; --text-2:#a8c4e0; --muted:#4d6d8a; --accent:#38bdf8;
  --green:#4ade80; --orange:#fb923c; --yellow:#facc15; --purple:#c084fc;
  --mono:'Space Mono',ui-monospace,monospace; --font:'Outfit',system-ui,-apple-system,sans-serif;
  background:var(--bg); color:var(--text); font-family:var(--font); overflow-x:hidden;
}
.ftzs *,.ftzs *::before,.ftzs *::after{box-sizing:border-box;margin:0;padding:0}
.ftzs a{text-decoration:none}
.ftzs-c{max-width:1300px;margin:0 auto;padding:0 20px}

/* ── HERO ── */
.ftzs-hero{padding:64px 0 40px;text-align:center}
.ftzs-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(74,222,128,.08);border:1px solid rgba(74,222,128,.22);border-radius:100px;padding:6px 15px;font-family:var(--mono);font-size:.68rem;letter-spacing:1px;text-transform:uppercase;color:var(--green);margin-bottom:20px}
.ftzs-dot{width:6px;height:6px;border-radius:50%;background:var(--green);animation:ftzsPulse 1.5s infinite}
.ftzs-h1{font-size:clamp(1.9rem,5vw,3.2rem);font-weight:900;line-height:1.08;letter-spacing:-.5px;margin-bottom:16px}
.ftzs-h1 em{font-style:normal;color:var(--accent)}
.ftzs-sub{max-width:620px;margin:0 auto;color:var(--muted);font-size:clamp(.92rem,2vw,1.05rem);line-height:1.7}
.ftzs-h2{font-size:clamp(1.3rem,3vw,2rem);font-weight:800;margin-bottom:20px}

/* ── CONTROLS ── */
.ftzs-controls{display:flex;flex-direction:column;align-items:center;gap:16px;margin-bottom:28px}
.ftzs-input{width:100%;max-width:460px;background:var(--card);border:1px solid var(--line);color:var(--text);padding:13px 18px;border-radius:14px;font-size:.95rem;font-family:var(--font);outline:none;transition:border-color .2s,box-shadow .2s}
.ftzs-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(56,189,248,.15)}
.ftzs-input::placeholder{color:var(--muted)}
.ftzs-pills{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.ftzs-pill{background:var(--card);border:1px solid var(--line);color:var(--muted);padding:7px 16px;border-radius:100px;font-size:.8rem;font-weight:500;font-family:var(--font);cursor:pointer;transition:all .15s}
.ftzs-pill:hover{border-color:var(--line-2);color:var(--text-2)}
.ftzs-pill.on{background:rgba(56,189,248,.1);border-color:var(--accent);color:var(--accent)}

/* ── STATS ── */
.ftzs-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:28px}
.ftzs-stat{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 12px;text-align:center}
.ftzs-num{display:block;font-family:var(--mono);font-size:1.6rem;font-weight:700;line-height:1;margin-bottom:6px}
.c-green{color:var(--green)} .c-orange{color:var(--orange)} .c-yellow{color:var(--yellow)} .c-muted{color:var(--muted)}
.ftzs-lbl{font-family:var(--mono);font-size:.65rem;letter-spacing:.5px;text-transform:uppercase;color:var(--muted)}

/* ── CARD GRID ── */
.ftzs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px;padding-bottom:56px}
.ftzs-card{position:relative;overflow:hidden;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px;animation:ftzsUp .35s ease both;transition:transform .25s,border-color .25s,box-shadow .25s}
.ftzs-grid .ftzs-card:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(0,0,0,.35)}
.ftzs-card.s-working{border-color:rgba(74,222,128,.3)}
.ftzs-card.s-evening{border-color:rgba(251,146,60,.25)}
.ftzs-card.s-morning{border-color:rgba(250,204,21,.25)}
.ftzs-card.s-sleeping{opacity:.78}
.ftzs-topline{position:absolute;top:0;left:0;right:0;height:2px}
.s-working .ftzs-topline{background:linear-gradient(90deg,transparent,var(--green),transparent)}
.s-evening .ftzs-topline{background:linear-gradient(90deg,transparent,var(--orange),transparent)}
.s-morning .ftzs-topline{background:linear-gradient(90deg,transparent,var(--yellow),transparent)}
.s-sleeping .ftzs-topline{background:linear-gradient(90deg,transparent,var(--muted),transparent);opacity:.35}

.ftzs-card-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:14px}
.ftzs-flag{font-size:1.7rem;line-height:1;flex-shrink:0}
.ftzs-flag-sm{font-size:1.1rem}
.ftzs-card-id{min-width:0;flex:1}
.ftzs-name{font-size:.95rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ftzs-tzlbl{font-family:var(--mono);font-size:.58rem;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── STATUS BADGE ── */
.ftzs-st{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:100px;font-family:var(--mono);font-size:.62rem;font-weight:700;white-space:nowrap;flex-shrink:0;background:rgba(77,109,138,.12);color:var(--muted);border:1px solid rgba(77,109,138,.25)}
.ftzs-st.b-working{background:rgba(74,222,128,.12);color:var(--green);border-color:rgba(74,222,128,.3)}
.ftzs-st.b-evening{background:rgba(251,146,60,.12);color:var(--orange);border-color:rgba(251,146,60,.3)}
.ftzs-st.b-morning{background:rgba(250,204,21,.12);color:var(--yellow);border-color:rgba(250,204,21,.3)}
.ftzs-st.b-weekend{background:rgba(192,132,252,.12);color:var(--purple);border-color:rgba(192,132,252,.3)}
.ftzs-pd{width:5px;height:5px;border-radius:50%;background:currentColor;flex-shrink:0}
.ftzs-st.b-working .ftzs-pd{animation:ftzsPulse 1.4s infinite}

/* ── TIME ── */
.ftzs-time{font-family:var(--mono);font-size:1.75rem;font-weight:700;letter-spacing:1px;line-height:1;margin-bottom:4px;color:var(--muted)}
.s-working .ftzs-time{color:var(--green)}
.s-evening .ftzs-time{color:var(--orange)}
.s-morning .ftzs-time{color:var(--yellow)}
.ftzs-date{font-family:var(--mono);font-size:.66rem;color:var(--muted);margin-bottom:14px}
.ftzs-time-sm{font-family:var(--mono);font-size:.9rem;color:var(--text-2);white-space:nowrap}

/* ── TIMELINE ── */
.ftzs-tl{margin-bottom:14px}
.ftzs-tl-lbl{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.55rem;color:var(--muted);margin-bottom:5px}
.ftzs-tl-lbl.full{margin-top:8px}
.ftzs-track{position:relative;height:6px;background:rgba(255,255,255,.05);border-radius:3px}
.ftzs-work{position:absolute;top:0;height:100%;border-radius:3px;background:var(--muted);opacity:.55;transition:left .3s,width .3s}
.s-working .ftzs-work{background:var(--green)}
.s-evening .ftzs-work{background:var(--orange)}
.s-morning .ftzs-work{background:var(--yellow)}
.ftzs-work.them{background:var(--accent);opacity:.5}
.ftzs-work.ov{background:var(--green);opacity:.9}
.ftzs-nowmark{position:absolute;top:-4px;width:2px;height:14px;border-radius:1px;background:#fff;box-shadow:0 0 6px rgba(255,255,255,.7)}

/* ── ROWS ── */
.ftzs-rows{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
.ftzs-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:7px 11px;background:rgba(255,255,255,.03);border-radius:9px;font-size:.76rem}
.ftzs-row .k{color:var(--muted);flex-shrink:0}
.ftzs-row .v{color:var(--text-2);font-size:.72rem;text-align:right}
.ftzs-advice{padding:10px 12px;border-radius:9px;font-family:var(--mono);font-size:.68rem;line-height:1.5;background:rgba(77,109,138,.06);border:1px dashed rgba(77,109,138,.2);color:var(--muted)}
.s-working .ftzs-advice{background:rgba(74,222,128,.06);border-color:rgba(74,222,128,.22);color:var(--green)}
.s-evening .ftzs-advice{background:rgba(251,146,60,.06);border-color:rgba(251,146,60,.22);color:var(--orange)}
.s-morning .ftzs-advice{background:rgba(250,204,21,.06);border-color:rgba(250,204,21,.22);color:var(--yellow)}
.ftzs-empty{grid-column:1/-1;text-align:center;padding:56px 20px;color:var(--muted);font-family:var(--mono);font-size:.85rem}

/* ── TABLE (Rates) ── */
.ftzs-tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:16px;background:var(--card);margin-bottom:20px}
.ftzs-table{width:100%;border-collapse:collapse;min-width:640px}
.ftzs-table th{text-align:left;padding:14px 18px;font-family:var(--mono);font-size:.64rem;letter-spacing:1px;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line);white-space:nowrap}
.ftzs-table td{padding:14px 18px;border-bottom:1px solid rgba(56,189,248,.07);font-size:.88rem;vertical-align:middle}
.ftzs-table tr:last-child td{border-bottom:none}
.ftzs-table tr.ftzs-card{background:none;border:none;border-radius:0;padding:0;animation:none;transition:background .15s}
.ftzs-table tr.ftzs-card:hover{background:rgba(56,189,248,.04)}
.ftzs-table tr.s-sleeping{opacity:.6}
.ftzs-rate{font-family:var(--mono);font-weight:700;color:var(--accent);white-space:nowrap}
.ftzs-per{color:var(--muted);font-weight:400;font-size:.7rem;margin-left:2px}
.ftzs-foot{color:var(--muted);font-size:.78rem;line-height:1.6;padding-bottom:56px;max-width:680px}

/* ── CALCULATOR ── */
.ftzs-calc{padding-bottom:56px}
.ftzs-calc-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:stretch;margin-bottom:20px}
.ftzs-calc-side{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px;text-align:center}
.ftzs-lab{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.ftzs-select{width:100%;background:var(--card-2);border:1px solid var(--line);color:var(--text);padding:11px 14px;border-radius:11px;font-size:.9rem;font-family:var(--font);cursor:pointer;outline:none;margin-bottom:18px}
.ftzs-select:focus{border-color:var(--accent)}
.ftzs-bigtime{font-family:var(--mono);font-size:clamp(1.8rem,4vw,2.6rem);font-weight:700;letter-spacing:1px;line-height:1;color:var(--accent)}
.ftzs-calc-mid{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-width:120px}
.ftzs-swap{width:44px;height:44px;border-radius:50%;background:var(--card);border:1px solid var(--line);color:var(--accent);font-size:1.2rem;cursor:pointer;transition:all .15s}
.ftzs-swap:hover{border-color:var(--accent);background:rgba(56,189,248,.1)}
.ftzs-diff{font-family:var(--mono);font-size:.8rem;color:var(--text-2);text-align:center;line-height:1.5}

.ftzs-overlap{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px;margin-bottom:20px}
.ftzs-overlap-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:16px}
.ftzs-overlap-head .ftzs-lab{margin-bottom:0}
.ftzs-overlap-len{font-family:var(--mono);font-size:1.1rem;font-weight:700;color:var(--green)}
.ftzs-bars{display:flex;flex-direction:column;gap:12px}
.ftzs-bar{display:flex;align-items:center;gap:12px}
.ftzs-bar-lab{font-family:var(--mono);font-size:.62rem;color:var(--muted);width:52px;flex-shrink:0;text-transform:uppercase}
.ftzs-bar .ftzs-track{flex:1}
.ftzs-overlap-note{margin-top:14px;color:var(--text-2);font-size:.85rem;line-height:1.6}

.ftzs-meeting{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px}
.ftzs-range{width:100%;margin:6px 0 18px;accent-color:#38bdf8}
.ftzs-meeting-out{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ftzs-meeting-out>div{background:var(--card-2);border:1px solid var(--line);border-radius:11px;padding:12px 14px}
.ftzs-meeting-out strong{font-family:var(--mono);font-size:1rem;color:var(--text)}
.ftzs-meeting-out .ftzs-lab{margin-bottom:6px}

/* ── PLATFORMS ── */
.ftzs-plat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:18px;padding-bottom:40px}
.ftzs-plat-grid.one{grid-template-columns:minmax(0,640px);padding-bottom:24px}
.ftzs-plat{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px}
.ftzs-plat-head{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.ftzs-plat-icon{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-weight:700;font-size:1.05rem;flex-shrink:0;background:color-mix(in srgb,var(--pc) 16%,transparent);border:1px solid color-mix(in srgb,var(--pc) 45%,transparent);color:var(--pc)}
.ftzs-plat-name{font-size:1.1rem;font-weight:800;line-height:1.2}
.ftzs-plat-peak{font-family:var(--mono);font-size:.62rem;color:var(--muted)}
.ftzs-plat-blurb{color:var(--text-2);font-size:.86rem;line-height:1.65;margin-bottom:18px}

.ftzs-gauge{margin-bottom:18px}
.ftzs-gauge-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.ftzs-gauge-head .ftzs-lab{margin-bottom:0}
.ftzs-gauge-head strong{font-family:var(--mono);font-size:1.2rem;color:var(--green)}
.ftzs-gauge .ftzs-work{background:var(--green);opacity:.85;left:0}
.ftzs-gauge-note{display:block;margin-top:8px;font-family:var(--mono);font-size:.64rem;color:var(--muted)}

.ftzs-mix{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.ftzs-mix-row{display:grid;grid-template-columns:96px 1fr 40px 74px;align-items:center;gap:10px;font-size:.74rem}
.ftzs-mix-lab{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ftzs-mix-bar{height:5px;background:rgba(255,255,255,.05);border-radius:3px;overflow:hidden}
.ftzs-mix-bar i{display:block;height:100%;background:var(--accent);opacity:.6;border-radius:3px}
.ftzs-mix-pct{font-family:var(--mono);color:var(--text-2);text-align:right}
.ftzs-mix-st{font-family:var(--mono);font-size:.58rem;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);text-align:right}
.ftzs-mix-st.on{color:var(--green)}

.ftzs-btn{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:#06111f;padding:11px 22px;border-radius:100px;font-weight:700;font-size:.86rem;transition:opacity .15s,transform .15s}
.ftzs-btn:hover{opacity:.88;transform:translateY(-1px);color:#06111f}
.ftzs-btn.ghost{background:transparent;border:1px solid var(--line-2);color:var(--accent)}
.ftzs-btn.ghost:hover{background:rgba(56,189,248,.08);color:var(--accent)}
.ftzs-tips{padding-bottom:56px;max-width:760px}
.ftzs-tip-list{display:flex;flex-direction:column;gap:12px;margin:0 0 24px;padding-left:20px;color:var(--text-2);font-size:.9rem;line-height:1.7}
.ftzs-tip-list li::marker{color:var(--accent);font-family:var(--mono);font-weight:700}

/* ── MOTION ── */
@keyframes ftzsUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes ftzsPulse{0%,100%{opacity:1}50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.ftzs *{animation:none!important;transition:none!important}}

/* ── RESPONSIVE ── */
@media (max-width:900px){
  .ftzs-calc-grid{grid-template-columns:1fr}
  .ftzs-calc-mid{flex-direction:row;min-width:0;padding:4px 0}
  .ftzs-meeting-out{grid-template-columns:1fr}
}
@media (max-width:680px){
  .ftzs-hero{padding:40px 0 28px}
  .ftzs-stats{grid-template-columns:1fr 1fr}
  .ftzs-grid{grid-template-columns:1fr}
  .ftzs-plat-grid{grid-template-columns:1fr}
  .ftzs-mix-row{grid-template-columns:80px 1fr 36px 60px;font-size:.68rem}
}