* { box-sizing:border-box; margin:0; padding:0; }
html,body { min-height:100%; }
body { font-family:Arial,Helvetica,sans-serif; background:#f3f3f5; color:#2b2b2b; }

.ff-page { min-height:100vh; }
.ff-topbar { position:relative; height:58px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:0 34px; background:linear-gradient(90deg,#7c0d0d 0%,#b31818 55%,#8f1010 100%); color:#fff; border-bottom:1px solid rgba(255,255,255,.12); box-shadow:0 3px 12px rgba(0,0,0,.14); overflow:visible; }
/*
.ff-topbar-left,.ff-topbar-right { display:flex; align-items:center; }
.ff-brand { font-size:19px; font-weight:700; white-space:nowrap; letter-spacing:.01em; }
*/

.ff-topbar-left,.ff-topbar-right { display:flex; align-items:center; }
.ff-topbar-left { width:0; min-width:0; padding-left:0; position:relative; z-index:5; }
.ff-brand-stack { display:none; }
.ff-brand { font-size:18px; font-weight:800; white-space:nowrap; letter-spacing:.01em; color:#fff; }
.ff-brand-sub { display:none; }
.ff-brand-logo { width:auto; height:42px; display:block; object-fit:contain; filter:drop-shadow(0 10px 20px rgba(0,0,0,.28)); margin-right:0; }
.ff-brand-link-logo-only { position:absolute; left:64px; top:-62px; display:block; z-index:6; pointer-events:auto; }
.ff-brand-logo-large { height:190px; margin:0; display:block; }



.ff-nav { display:flex; align-items:center; gap:34px; margin-left:0; }
.ff-nav a { color:#fff; text-decoration:none; font-size:13px; font-weight:700; padding:6px 0; border-bottom:2px solid transparent; transition:color .18s ease,border-color .18s ease,opacity .18s ease; }
.ff-nav a:hover { color:#f3dede; border-bottom-color:#e1b4b4; }
.ff-nav a.active { border-bottom-color:#fff; }
.ff-topbar-right { font-size:12px; font-weight:700; white-space:nowrap; }
.ff-user-divider { margin:0 6px; opacity:.9; }
.ff-logoff-link { color:#fff; text-decoration:none; }

.ff-dashboard { max-width:1320px; margin:0 auto; padding:22px 28px 34px; }
.ff-search-wrap { margin-bottom:14px; }
.ff-search { width:296px; height:40px; border:1px solid #b9b9c2; outline:none; border-radius:999px; padding:0 20px; background:linear-gradient(90deg,#b31818 0%,#8f1010 100%); color:#fff; font-size:13px; box-shadow:0 3px 10px rgba(124,13,13,.12); }
.ff-search::placeholder { color:#f6dddd; }

.ff-cards { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:18px; }
.ff-card { background:#fff; border:1px solid #e2e2e8; border-radius:18px; padding:18px 20px 16px; box-shadow:0 6px 18px rgba(17,17,17,.05); min-height:144px; }

.ff-card-head { display:flex; align-items:center; gap:0; padding-bottom:10px; border-bottom:1px solid #ececef; margin-bottom:14px; }
.ff-card-head h3 { font-size:17px; color:#7c0d0d; font-weight:700; }

.ff-card-icon-wrap { width:34px; flex:0 0 34px; display:flex; align-items:center; justify-content:flex-start; margin-right:10px; margin-left:0; }
.ff-card-icon { width:auto; height:auto; border-radius:0; position:relative; display:flex; align-items:center; justify-content:center; box-shadow:none; background:none !important; }
.ff-card-icon::before { line-height:1; font-weight:400; }

.ff-icon-delivery::before { content:"🚚"; font-size:24px; }
.ff-icon-orders::before { content:"📋"; font-size:24px; }
.ff-icon-shipping::before { content:"📦"; font-size:24px; }
.ff-icon-inventory::before { content:"📊"; font-size:24px; }

.ff-card-body { display:flex; flex-direction:column; gap:10px; }
.ff-card-stat { display:flex; align-items:baseline; gap:10px; color:#3a3a3f; }
.ff-card-stat strong { font-size:28px; line-height:1; font-weight:800; color:#111111; }
.ff-card-stat span { font-size:18px; color:#595961; }
.ff-card-substat { display:flex; align-items:baseline; gap:8px; color:#4f4f57; }
.ff-card-substat strong { font-size:18px; font-weight:700; color:#9d1111; }
.ff-card-substat span { font-size:16px; }

.ff-progress-wrap { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.ff-progress-bar { width:120px; height:8px; border-radius:999px; background:#ececef; overflow:hidden; }
.ff-progress-bar span { display:block; height:100%; background:#c59a2a; border-radius:999px; }

.ff-panels { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
.ff-panel { background:#fff; border:1px solid #e2e2e8; border-radius:18px; padding:18px 20px 14px; box-shadow:0 6px 18px rgba(17,17,17,.05); }
.ff-panel h3 { font-size:17px; color:#7c0d0d; font-weight:700; margin-bottom:14px; }
.ff-panel-large { min-height:340px; }

.ff-line-chart { position:relative; height:170px; border-bottom:1px solid #ececef; margin-bottom:14px; overflow:hidden; }
.ff-line-grid { position:absolute; inset:0; background:repeating-linear-gradient(to bottom,#efeff2 0,#efeff2 1px,transparent 1px,transparent 28px); }
.ff-line-area { position:absolute; left:7%; right:8%; bottom:26px; height:94px; background:linear-gradient(180deg,rgba(157,17,17,.22),rgba(157,17,17,.04)); clip-path:polygon(0% 76%,16% 48%,30% 58%,44% 32%,58% 52%,74% 20%,100% 36%,100% 100%,0% 100%); }
.ff-line-path { position:absolute; left:7%; right:8%; top:30px; bottom:26px; border-bottom:3px solid #9d1111; clip-path:polygon(0% 76%,16% 48%,30% 58%,44% 32%,58% 52%,74% 20%,100% 36%,100% 40%,74% 24%,58% 56%,44% 36%,30% 62%,16% 52%,0% 80%); background:#9d1111; }
.ff-line-points span { position:absolute; width:12px; height:12px; border-radius:50%; background:#fff; border:3px solid #9d1111; transform:translate(-50%,-50%); z-index:2; }
.ff-line-labels { position:absolute; left:9%; right:8%; bottom:0; display:flex; justify-content:space-between; font-size:12px; color:#6a6a72; }

.ff-panel-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.ff-panel-stat { padding:4px 0; }
.ff-panel-stat strong { display:block; font-size:17px; color:#7c0d0d; margin-bottom:4px; }
.ff-panel-stat span { display:block; font-size:12px; color:#6a6a72; }
.ff-panel-stat-green strong { color:#2f7d32; }
.ff-panel-stat-orange strong { color:#b87416; }

.ff-bar-chart { height:170px; display:flex; align-items:flex-end; justify-content:space-between; gap:12px; border-bottom:1px solid #ececef; padding:6px 24px 0 24px; margin-bottom:10px; }
.ff-bar-group { display:flex; align-items:flex-end; gap:4px; height:100%; min-width:42px; justify-content:center; }
.ff-bar { width:18px; border-radius:0; display:block; }
.ff-bar-green { background:#5d8f34; }
.ff-bar-lime { background:#88a63a; }
.ff-bar-yellow { background:#c59a2a; }
.ff-bar-orange { background:#b87416; }
.ff-bar-blue { background:#9f9fa8; }
.ff-bar-blue-dark { background:#6e6e77; }
.ff-bar-red { background:#9d1111; }

.ff-bar-labels { display:flex; justify-content:space-around; font-size:12px; color:#55555d; margin-bottom:10px; }

.ff-bottom-panels .ff-panel { min-height:164px; }

.ff-alert-row,.ff-shipment-row { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 0; border-top:1px solid #ececef; }
.ff-alert-row:first-of-type,.ff-shipment-row:first-of-type { border-top:none; }
.ff-alert-left { display:flex; align-items:center; gap:12px; }
.ff-alert-dot { width:16px; height:16px; border-radius:50%; display:inline-block; flex:0 0 16px; }
.ff-alert-red { background:#9d1111; }
.ff-alert-yellow { background:#c59a2a; }
.ff-alert-title { font-size:14px; font-weight:700; color:#202024; }
.ff-alert-sub { font-size:12px; color:#8a2b2b; margin-top:2px; }
.ff-alert-right { font-size:12px; color:#6a6a72; white-space:nowrap; }

.ff-shipment-title { font-size:14px; font-weight:700; color:#202024; }
.ff-shipment-sub { font-size:12px; color:#6a6a72; margin-top:2px; }
.ff-badge { min-width:126px; text-align:center; padding:8px 12px; border-radius:4px; font-size:12px; font-weight:700; white-space:nowrap; }
.ff-badge-blue { background:#9d1111; color:#fff; }
.ff-badge-green { background:#ece5d2; color:#7c5b10; }

@media (max-width:1260px) {
  .ff-cards { grid-template-columns:repeat(2,1fr); }
}
/*
@media (max-width:980px) {
  .ff-topbar { height:auto; padding:14px 18px; flex-wrap:wrap; }
  .ff-nav { order:3; width:100%; justify-content:flex-start; flex-wrap:wrap; gap:20px; }
  .ff-panels { grid-template-columns:1fr; }
}
*/
@media (max-width:980px) {
  .ff-topbar { height:auto; min-height:58px; padding:12px 18px 14px; flex-wrap:wrap; align-items:flex-start; }
  .ff-topbar-left { width:0; min-width:0; padding-left:0; }
  .ff-brand-logo { margin-right:0; }
  .ff-brand-link-logo-only { position:absolute; left:18px; top:6px; }
  .ff-brand-logo-large { height:84px; margin:0; }
  .ff-nav { order:3; width:100%; justify-content:flex-start; flex-wrap:wrap; gap:20px; margin-left:0; padding-top:10px; }
  .ff-topbar-right { padding-top:0; }
  .ff-panels { grid-template-columns:1fr; }
}



@media (max-width:640px) {
  .ff-dashboard { padding:18px 14px 24px; }
  .ff-search { width:100%; }
  .ff-cards { grid-template-columns:1fr; }
  .ff-panel-stats { grid-template-columns:1fr; }
  .ff-progress-wrap,.ff-alert-row,.ff-shipment-row { flex-direction:column; align-items:flex-start; }
}
/*
.ff-brand-link,.ff-brand-link:link,.ff-brand-link:visited,.ff-brand-link:hover,.ff-brand-link:active { text-decoration:none; color:#fff; display:inline-flex; align-items:center; }
*/
.ff-brand-link,.ff-brand-link:link,.ff-brand-link:visited,.ff-brand-link:hover,.ff-brand-link:active { text-decoration:none; color:#fff; display:inline-flex; align-items:center; gap:0; }
.ff-brand-link-logo-only:hover .ff-brand-logo-large { transform:translateY(-1px); }

.ff-module-hero { position:relative; display:flex; align-items:flex-start; justify-content:space-between; gap:20px; background:linear-gradient(135deg,#ffffff 0%,#fcf8f8 100%); border:1px solid #e2e2e8; border-radius:22px; padding:30px 30px; box-shadow:0 12px 30px rgba(17,17,17,.07); margin-bottom:22px; overflow:hidden; }
.ff-module-hero::before { content:""; position:absolute; top:-70px; right:-70px; width:220px; height:220px; border-radius:50%; background:radial-gradient(circle,rgba(157,17,17,.14) 0%,rgba(157,17,17,0) 68%); pointer-events:none; }
.ff-module-hero::after { content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:linear-gradient(180deg,#7c0d0d 0%,#b31818 100%); }

.ff-module-kicker { position:relative; z-index:1; display:inline-flex; align-items:center; min-height:28px; padding:0 12px; border-radius:999px; background:#f7eaea; border:1px solid #ead1d1; font-size:11px; font-weight:800; color:#8a1717; text-transform:uppercase; letter-spacing:.12em; margin-bottom:12px; }
.ff-module-hero h1 { position:relative; z-index:1; font-size:38px; line-height:1.05; color:#7c0d0d; margin-bottom:10px; letter-spacing:-.02em; }
.ff-module-hero p { position:relative; z-index:1; max-width:820px; font-size:15px; line-height:1.75; color:#5f5f67; }

.ff-module-back { position:relative; z-index:1; display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 18px; border-radius:12px; background:linear-gradient(90deg,#9d1111 0%,#7c0d0d 100%); color:#fff; text-decoration:none; font-size:13px; font-weight:800; white-space:nowrap; box-shadow:0 10px 22px rgba(124,13,13,.18); transition:transform .18s ease,box-shadow .18s ease,background .18s ease; }
.ff-module-back:hover { background:linear-gradient(90deg,#7c0d0d 0%,#5f0909 100%); transform:translateY(-1px); box-shadow:0 14px 26px rgba(124,13,13,.22); }

.ff-module-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }

.ff-module-card { position:relative; background:#fff; border:1px solid #e2e2e8; border-radius:20px; padding:24px; box-shadow:0 8px 22px rgba(17,17,17,.06); min-height:190px; transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease; overflow:hidden; }
.ff-module-card::before { content:""; position:absolute; left:0; top:0; right:0; height:5px; background:linear-gradient(90deg,#7c0d0d 0%,#b31818 55%,#c59a2a 100%); }
.ff-module-card:hover { transform:translateY(-4px); box-shadow:0 16px 32px rgba(17,17,17,.09); border-color:#d9d1d1; }

.ff-module-card h3 { font-size:19px; line-height:1.2; color:#7c0d0d; margin-bottom:14px; letter-spacing:-.01em; }
.ff-module-card p { font-size:14px; line-height:1.72; color:#5f5f67; margin-bottom:8px; }
.ff-module-card p:last-child { margin-bottom:0; }
.ff-module-card strong { color:#111111; font-weight:800; }

.ff-module-card p strong:first-child { display:inline-block; min-width:132px; color:#7c0d0d; }

@media (max-width:980px) {
  .ff-module-hero { flex-direction:column; align-items:flex-start; padding:24px 22px; }
  .ff-module-hero h1 { font-size:32px; }
  .ff-module-grid { grid-template-columns:1fr; }
}

@media (max-width:640px) {
  .ff-module-hero { padding:22px 18px; border-radius:18px; }
  .ff-module-kicker { min-height:26px; padding:0 10px; font-size:10px; }
  .ff-module-hero h1 { font-size:28px; }
  .ff-module-card { padding:20px 18px; min-height:auto; border-radius:18px; }
  .ff-module-card p strong:first-child { min-width:110px; }
}
.ff-section-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:26px 0 14px; }
.ff-section-head h2 { font-size:22px; line-height:1.15; color:#7c0d0d; letter-spacing:-.01em; }
.ff-section-head p { font-size:13px; color:#6a6a72; }

.ff-data-panel { background:#fff; border:1px solid #e2e2e8; border-radius:20px; box-shadow:0 8px 22px rgba(17,17,17,.06); overflow:hidden; }
.ff-data-panel + .ff-module-grid { margin-top:22px; }
.ff-inline-metrics + .ff-data-panel { margin-top:18px; }
.ff-data-panel-head { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:18px 22px; border-bottom:1px solid #ececef; background:linear-gradient(180deg,#fff 0%,#fcf8f8 100%); }
.ff-data-panel-head h3 { font-size:18px; color:#7c0d0d; margin:0; }
.ff-data-panel-head span { font-size:12px; font-weight:700; color:#8a8a93; text-transform:uppercase; letter-spacing:.08em; }

.ff-table-wrap { width:100%; overflow-x:auto; }
.ff-table { width:100%; border-collapse:collapse; min-width:860px; }
.ff-table thead th { text-align:left; font-size:12px; font-weight:800; color:#7c0d0d; letter-spacing:.08em; text-transform:uppercase; padding:14px 22px; background:#fcf8f8; border-bottom:1px solid #ececef; white-space:nowrap; }
.ff-table tbody td { padding:16px 22px; font-size:14px; color:#4f4f57; border-bottom:1px solid #f0f0f3; vertical-align:middle; }
.ff-table tbody tr:last-child td { border-bottom:none; }
.ff-table tbody tr:hover { background:#fff9f9; }

.ff-ship-visuals { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:22px; }
.ff-ship-visual-card { position:relative; background:linear-gradient(135deg,#ffffff 0%,#fcf8f8 100%); border:1px solid #e2e2e8; border-radius:20px; padding:22px 22px 20px; box-shadow:0 8px 22px rgba(17,17,17,.06); overflow:hidden; min-height:190px; }
.ff-ship-visual-card::before { content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:linear-gradient(180deg,#7c0d0d 0%,#b31818 60%,#c59a2a 100%); }
.ff-ship-visual-top { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:16px; }
.ff-ship-visual-icon { width:66px; height:66px; border-radius:18px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#9d1111 0%,#7c0d0d 100%); box-shadow:0 12px 24px rgba(124,13,13,.18); flex:0 0 66px; }
.ff-ship-visual-icon span { font-size:30px; line-height:1; }
.ff-ship-visual-card h3 { font-size:20px; line-height:1.15; color:#7c0d0d; margin:0 0 10px; }
.ff-ship-visual-card p { font-size:14px; line-height:1.7; color:#5f5f67; margin:0 0 14px; }
.ff-ship-visual-meta { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.ff-ship-visual-number { font-size:30px; font-weight:800; line-height:1; color:#111111; }
.ff-ship-visual-label { display:block; font-size:12px; font-weight:700; color:#7c0d0d; margin-top:6px; }
.ff-ship-visuals + .ff-data-panel { margin-top:20px; }

.ff-ship-table .ff-table thead th { background:#faf6f2; }
.ff-ship-table .ff-table tbody tr:hover { background:#fff7f2; }

@media (max-width:980px) {
  .ff-ship-visuals { grid-template-columns:1fr; }
}

.ff-cell-strong { font-weight:800; color:#111111; }
.ff-cell-muted { color:#7a7a82; }

.ff-status { display:inline-flex; align-items:center; justify-content:center; min-height:30px; padding:0 12px; border-radius:999px; font-size:12px; font-weight:800; white-space:nowrap; }
.ff-status-red { background:#f7dede; color:#8f1010; }
.ff-status-gold { background:#f3ead2; color:#8a6612; }
.ff-status-green { background:#e3f1e2; color:#2f7d32; }
.ff-status-gray { background:#ededf1; color:#676772; }

.ff-inline-metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:18px; }
.ff-inline-metric { background:#fff; border:1px solid #e2e2e8; border-radius:18px; padding:18px 20px; box-shadow:0 8px 22px rgba(17,17,17,.05); }
.ff-inline-metric strong { display:block; font-size:26px; line-height:1; color:#111111; margin-bottom:8px; }
.ff-inline-metric span { display:block; font-size:13px; font-weight:700; color:#7c0d0d; margin-bottom:4px; }
.ff-inline-metric small { display:block; font-size:12px; color:#6a6a72; }

@media (max-width:980px) {
  .ff-inline-metrics { grid-template-columns:repeat(2,1fr); }
}

@media (max-width:640px) {
  .ff-section-head { flex-direction:column; align-items:flex-start; }
  .ff-inline-metrics { grid-template-columns:1fr; }
}

@media (max-width:640px) {
  .ff-section-head { flex-direction:column; align-items:flex-start; }
  .ff-inline-metrics { grid-template-columns:1fr; }
}

.ff-card,.ff-panel { transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease, background-color .22s ease; }
.ff-card:hover,.ff-panel:hover { transform:translateY(-4px); box-shadow:0 16px 30px rgba(17,17,17,.09); border-color:#d8caca; }

.ff-card-icon,.ff-card-icon::before { transition:transform .22s ease, filter .22s ease; }
.ff-card:hover .ff-card-icon,.ff-card:hover .ff-card-icon::before { transform:scale(1.08); filter:drop-shadow(0 8px 12px rgba(157,17,17,.14)); }

.ff-nav a { position:relative; transition:color .18s ease, border-color .18s ease, opacity .18s ease, transform .18s ease; }
.ff-nav a::after { content:""; position:absolute; left:0; bottom:-2px; width:100%; height:2px; background:#ffffff; transform:scaleX(0); transform-origin:left; transition:transform .22s ease, opacity .22s ease; opacity:.9; }
.ff-nav a:hover { color:#fff4f4; transform:translateY(-1px); border-bottom-color:transparent; }
.ff-nav a:hover::after,.ff-nav a.active::after { transform:scaleX(1); }

.ff-search { transition:box-shadow .22s ease, transform .22s ease, border-color .22s ease; }
.ff-search:focus { box-shadow:0 0 0 4px rgba(157,17,17,.10), 0 12px 24px rgba(124,13,13,.18); transform:translateY(-1px); border-color:#8f1010; }
.ff-search-wrap { position:relative; z-index:20; }
.ff-search-shell { position:relative; width:296px; }
.ff-search { width:100%; }

.ff-search-results { position:absolute; top:48px; left:0; width:100%; background:#ffffff; border:1px solid #e2e2e8; border-radius:18px; box-shadow:0 18px 36px rgba(17,17,17,.12); padding:8px; overflow:hidden; }
.ff-search-results[hidden] { display:none; }

.ff-search-group + .ff-search-group { margin-top:6px; padding-top:6px; border-top:1px solid #efeff2; }
.ff-search-group-label { padding:6px 10px 4px; font-size:11px; font-weight:800; letter-spacing:.10em; text-transform:uppercase; color:#8b8b93; }

.ff-search-item { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; padding:10px 12px; border:none; border-radius:12px; background:transparent; text-align:left; cursor:pointer; transition:background-color .18s ease, transform .18s ease; }
.ff-search-item:hover,.ff-search-item.ff-search-item-active { background:#faf4f4; transform:translateX(2px); }

.ff-search-item-main { min-width:0; }
.ff-search-item-title { display:block; font-size:14px; font-weight:700; color:#2a2a30; }
.ff-search-item-sub { display:block; margin-top:2px; font-size:12px; color:#6c6c74; }

.ff-search-item-tag { flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; min-height:24px; padding:0 10px; border-radius:999px; background:#f7eaea; border:1px solid #ead1d1; font-size:11px; font-weight:800; color:#8a1717; }

.ff-search-empty { padding:12px 14px; font-size:13px; color:#6c6c74; }

@media (max-width:640px) {
  .ff-search-shell { width:100%; }
}
.ff-alert-row,.ff-shipment-row { border-radius:12px; transition:background-color .18s ease, transform .18s ease; }
.ff-alert-row:hover,.ff-shipment-row:hover { background:#fcf7f7; transform:translateX(3px); }

.ff-badge { transition:transform .18s ease, box-shadow .18s ease, filter .18s ease; }
.ff-shipment-row:hover .ff-badge { transform:translateY(-1px); box-shadow:0 8px 16px rgba(17,17,17,.08); }

.ff-alert-dot { box-shadow:0 0 0 rgba(157,17,17,0); animation:ffPulseDot 2.2s infinite; }
.ff-alert-yellow { animation-duration:2.8s; }

@keyframes ffPulseDot {
  0% { transform:scale(1); box-shadow:0 0 0 0 rgba(157,17,17,.22); }
  70% { transform:scale(1.04); box-shadow:0 0 0 8px rgba(157,17,17,0); }
  100% { transform:scale(1); box-shadow:0 0 0 0 rgba(157,17,17,0); }
}

.ff-reveal { opacity:0; transform:translateY(18px); }
.ff-visible { opacity:1; transform:translateY(0); }

.ff-progress-bar span { transition:width 1.2s cubic-bezier(.22,1,.36,1); }

.ff-bar { transition:height .95s cubic-bezier(.22,1,.36,1), transform .18s ease, filter .18s ease; transform-origin:bottom; }
.ff-bar:hover { transform:translateY(-2px); filter:brightness(1.04); }

.ff-line-area,.ff-line-path { opacity:0; transform:translateY(10px) scaleY(.96); transform-origin:bottom; transition:opacity .6s ease, transform .8s cubic-bezier(.22,1,.36,1); }
.ff-line-area.ff-chart-visible,.ff-line-path.ff-chart-visible { opacity:1; transform:translateY(0) scaleY(1); }

.ff-point-hidden { opacity:0; transform:translate(-50%,-50%) scale(.35); transition:opacity .32s ease, transform .32s ease; }
.ff-point-hidden.ff-point-visible { opacity:1; transform:translate(-50%,-50%) scale(1); }

.ff-card-stat strong,.ff-card-substat strong,.ff-panel-stat strong { will-change:contents; }

.ff-card-shine { position:relative; overflow:hidden; isolation:isolate; }
.ff-card-shine::after { content:""; position:absolute; top:-30%; left:-120%; width:58%; height:170%; background:linear-gradient(115deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.10) 35%, rgba(255,255,255,.32) 50%, rgba(255,255,255,.10) 65%, rgba(255,255,255,0) 100%); transform:skewX(-24deg); opacity:0; pointer-events:none; z-index:1; }
.ff-card-shine.ff-shine-run::after { animation:ffCardShine 1.15s ease; }

.ff-card-shine > * { position:relative; z-index:2; }

@keyframes ffCardShine {
  0% { left:-120%; opacity:0; }
  10% { opacity:1; }
  100% { left:145%; opacity:0; }
}

.ff-help-card { position:relative; overflow:visible; }
.ff-help-trigger { position:absolute; top:14px; right:14px; width:22px; height:22px; border:none; border-radius:50%; background:#f5ecec; color:#8f1010; font-size:13px; font-weight:800; line-height:22px; text-align:center; cursor:pointer; box-shadow:0 2px 8px rgba(17,17,17,.08); transition:transform .18s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease; z-index:4; }
.ff-help-trigger:hover,.ff-help-trigger:focus-visible { background:#9d1111; color:#fff; transform:translateY(-1px) scale(1.05); box-shadow:0 10px 18px rgba(157,17,17,.18); outline:none; }

.ff-help-bubble { position:absolute; top:42px; right:14px; width:240px; max-width:calc(100% - 28px); padding:10px 12px; border-radius:12px; background:#25252b; color:#fff; font-size:12px; line-height:1.45; box-shadow:0 14px 28px rgba(17,17,17,.22); opacity:0; visibility:hidden; transform:translateY(6px); transition:opacity .18s ease, transform .18s ease, visibility .18s ease; z-index:5; pointer-events:none; }
.ff-help-bubble::before { content:""; position:absolute; top:-6px; right:14px; width:12px; height:12px; background:#25252b; transform:rotate(45deg); }

.ff-help-card:hover .ff-help-bubble,
.ff-help-card:focus-within .ff-help-bubble { opacity:1; visibility:visible; transform:translateY(0); }

.ff-card.ff-help-card .ff-help-trigger { top:12px; right:12px; }
.ff-panel.ff-help-card .ff-help-trigger { top:14px; right:14px; }

.ff-card-shine.ff-shine-hover::after { animation:ffCardShine 1.05s ease; }
.ff-card-link { cursor:pointer; }
.ff-card-link:focus-visible { outline:none; box-shadow:0 0 0 4px rgba(157,17,17,.14), 0 16px 30px rgba(17,17,17,.09); transform:translateY(-4px); }
.ff-card-link .ff-card-head h3,.ff-card-link .ff-card-stat span,.ff-card-link .ff-card-substat span { transition:color .18s ease; }
.ff-card-link:hover .ff-card-head h3 { color:#7f0f0f; }

@media (max-width:640px) {
  .ff-help-bubble { right:10px; left:10px; width:auto; max-width:none; }
  .ff-help-bubble::before { right:18px; }
}