/* Flinch — the descending-clock auction.
   Loaded after bootstrap.min.css so it can override it. Custom utilities are
   prefixed `fl-` on purpose: never reuse Bootstrap's .col-* names (a fork
   collided with them once and every field silently collapsed to a third width). */

:root {
  --fl-bg: #0b0b0f;
  --fl-panel: #14141b;
  --fl-panel-2: #1c1c26;
  --fl-line: #2a2a38;
  --fl-ink: #f4f4f8;
  --fl-dim: #9a9aae;
  --fl-hot: #ff4d3d;
  --fl-hot-2: #ff8a3d;
  --fl-cool: #47e0a0;
  --fl-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}

html, body { background: var(--fl-bg); color: var(--fl-ink); }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  display: flex; flex-direction: column; min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
main.py-4 { padding: 0 !important; flex: 1 0 auto; }
a { color: var(--fl-ink); }

.fl-wrap { width: 100%; max-width: 1040px; margin: 0 auto; padding: 0 20px; }

/* ---- nav ---- */
.fl-nav { border-bottom: 1px solid var(--fl-line); background: rgba(11,11,15,.9);
          backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 50; }
.fl-nav-inner { display: flex; align-items: center; gap: 24px; height: 62px; }
.fl-brand { display: flex; align-items: center; gap: 10px; text-decoration: none;
            font-weight: 800; letter-spacing: -.02em; font-size: 19px; }
.fl-brand-word { white-space: nowrap; }
.fl-brand-mark { width: 12px; height: 12px; border-radius: 50%;
                 background: var(--fl-hot); box-shadow: 0 0 14px var(--fl-hot);
                 animation: fl-pulse 1.6s ease-in-out infinite; }
@keyframes fl-pulse { 0%,100% { opacity: 1; transform: scale(1); }
                      50% { opacity: .45; transform: scale(.8); } }
.fl-nav-links { display: flex; gap: 20px; list-style: none; margin: 0; padding: 0;
                margin-left: auto; }
.fl-nav-links a { color: var(--fl-dim); text-decoration: none; font-size: 14.5px;
                  font-weight: 550; }
.fl-nav-links a:hover, .fl-nav-links a.on { color: var(--fl-ink); }
.fl-nav-right { display: flex; align-items: center; gap: 14px; }
.fl-nav-cta { font-size: 14.5px; color: var(--fl-dim); text-decoration: none; }
.fl-lang { position: relative; }
.fl-lang-btn { background: none; border: 1px solid var(--fl-line); color: var(--fl-dim);
               border-radius: 8px; padding: 5px 10px; font-size: 13px; cursor: pointer; }
.fl-lang-menu { display: none; position: absolute; right: 0; top: 120%; z-index: 60;
                background: var(--fl-panel); border: 1px solid var(--fl-line);
                border-radius: 10px; list-style: none; margin: 0; padding: 6px;
                max-height: min(70vh, 380px); overflow-y: auto; min-width: 170px; }
.fl-lang.open .fl-lang-menu { display: block; }
.fl-lang-menu a { display: block; padding: 7px 10px; border-radius: 7px;
                  text-decoration: none; color: var(--fl-dim); font-size: 14px; }
.fl-lang-menu a:hover, .fl-lang-menu a.on { background: var(--fl-panel-2); color: var(--fl-ink); }

/* ---- the clock ---- */
.fl-stage { padding: 46px 0 30px; text-align: center; }
.fl-kicker { color: var(--fl-dim); font-size: 13.5px; letter-spacing: .13em;
             text-transform: uppercase; font-weight: 700; margin-bottom: 14px; }
.fl-price {
  font-family: var(--fl-mono); font-weight: 700; line-height: .92;
  font-size: clamp(64px, 17vw, 168px); letter-spacing: -.045em;
  font-variant-numeric: tabular-nums; margin: 0;
  background: linear-gradient(180deg, var(--fl-ink) 30%, var(--fl-hot-2) 140%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.fl-price .fl-cents { font-size: .46em; vertical-align: super; letter-spacing: -.02em;
                      -webkit-text-fill-color: var(--fl-hot); }
.fl-price.fl-frozen { background: none; -webkit-text-fill-color: var(--fl-dim);
                      color: var(--fl-dim); }
.fl-price.fl-floored { background: none; -webkit-text-fill-color: var(--fl-cool);
                       color: var(--fl-cool); }
.fl-sub { color: var(--fl-dim); font-size: 15.5px; margin-top: 12px; }
.fl-sub b { color: var(--fl-ink); font-weight: 650; }

.fl-meter { height: 4px; background: var(--fl-panel-2); border-radius: 99px;
            max-width: 520px; margin: 22px auto 0; overflow: hidden; }
.fl-meter span { display: block; height: 100%; background: linear-gradient(90deg, var(--fl-hot), var(--fl-hot-2));
                 border-radius: 99px; transition: width .4s linear; }

.fl-take { display: inline-flex; align-items: center; justify-content: center; gap: 10px;
           margin-top: 26px; padding: 17px 40px; border: 0; border-radius: 14px;
           background: var(--fl-hot); color: #fff; font-size: 18px; font-weight: 750;
           cursor: pointer; text-decoration: none;
           box-shadow: 0 10px 34px rgba(255,77,61,.30); transition: transform .12s ease, box-shadow .12s ease; }
.fl-take:hover { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(255,77,61,.42); color: #fff; }
.fl-take:disabled { background: var(--fl-panel-2); color: var(--fl-dim); box-shadow: none;
                    cursor: not-allowed; transform: none; }
.fl-watchers { color: var(--fl-dim); font-size: 13.5px; margin-top: 16px; }
.fl-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%;
          background: var(--fl-cool); margin-right: 6px; vertical-align: middle; }

/* frozen banner */
.fl-freeze { display: none; margin: 20px auto 0; max-width: 560px; padding: 13px 18px;
             border: 1px solid var(--fl-hot); border-radius: 12px;
             background: rgba(255,77,61,.09); color: var(--fl-ink); font-size: 14.5px; }
.fl-freeze.on { display: block; }

/* ---- the holder ---- */
.fl-holder { margin: 34px auto 0; max-width: 720px; border: 1px solid var(--fl-line);
             border-radius: 18px; background: linear-gradient(180deg, var(--fl-panel), var(--fl-bg));
             padding: 26px 28px; text-align: left; }
.fl-holder-tag { color: var(--fl-dim); font-size: 12px; letter-spacing: .13em;
                 text-transform: uppercase; font-weight: 700; }
.fl-holder-name { font-size: 27px; font-weight: 780; letter-spacing: -.02em; margin: 8px 0 4px; }
.fl-holder-name a { text-decoration: none; }
.fl-holder-name a:hover { color: var(--fl-hot-2); }
.fl-holder-line { color: var(--fl-dim); font-size: 15.5px; margin: 0; }
.fl-holder-meta { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 18px;
                  padding-top: 16px; border-top: 1px solid var(--fl-line); }
.fl-holder-meta div { font-size: 13px; color: var(--fl-dim); }
.fl-holder-meta b { display: block; color: var(--fl-ink); font-size: 17px;
                    font-family: var(--fl-mono); font-weight: 650; margin-top: 3px; }
.fl-empty { color: var(--fl-dim); font-style: italic; }

/* ---- sections ---- */
.fl-section { padding: 54px 0; border-top: 1px solid var(--fl-line); margin-top: 54px; }
.fl-h2 { font-size: 25px; font-weight: 780; letter-spacing: -.02em; margin: 0 0 8px; }
.fl-lead { color: var(--fl-dim); font-size: 16px; max-width: 640px; margin: 0 0 26px; }

.fl-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
            gap: 16px; list-style: none; padding: 0; margin: 0; }
.fl-steps li { border: 1px solid var(--fl-line); border-radius: 14px; padding: 20px;
               background: var(--fl-panel); }
.fl-steps h3 { font-size: 15.5px; font-weight: 700; margin: 0 0 7px; }
.fl-steps p { color: var(--fl-dim); font-size: 14px; margin: 0; line-height: 1.55; }
.fl-steps .fl-num { font-family: var(--fl-mono); color: var(--fl-hot); font-size: 13px;
                    font-weight: 700; }

/* ---- ledger ---- */
.fl-table-scroll { overflow-x: auto; }
.fl-table { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 560px; }
.fl-table th { text-align: left; color: var(--fl-dim); font-size: 12px; font-weight: 700;
               letter-spacing: .1em; text-transform: uppercase; padding: 0 14px 12px 0; }
.fl-table td { padding: 14px 14px 14px 0; border-top: 1px solid var(--fl-line);
               vertical-align: top; }
.fl-table .fl-num-cell { font-family: var(--fl-mono); font-variant-numeric: tabular-nums; }
.fl-table a { text-decoration: none; font-weight: 620; }
.fl-table a:hover { color: var(--fl-hot-2); }

/* ---- forms / modal ---- */
.fl-modal { position: fixed; inset: 0; background: rgba(0,0,0,.72); display: none;
            align-items: center; justify-content: center; z-index: 200; padding: 20px; }
.fl-modal.on { display: flex; }
.fl-card { background: var(--fl-panel); border: 1px solid var(--fl-line);
           border-radius: 18px; padding: 28px; width: 100%; max-width: 460px; }
.fl-card h2 { font-size: 21px; font-weight: 780; margin: 0 0 6px; }
.fl-card p.fl-card-sub { color: var(--fl-dim); font-size: 14.5px; margin: 0 0 20px; }
.fl-field { margin-bottom: 15px; }
.fl-field label { display: block; font-size: 13px; color: var(--fl-dim);
                  margin-bottom: 6px; font-weight: 600; }
.fl-field input { width: 100%; background: var(--fl-bg); border: 1px solid var(--fl-line);
                  color: var(--fl-ink); border-radius: 10px; padding: 11px 13px;
                  font-size: 15px; }
.fl-field input:focus { outline: none; border-color: var(--fl-hot); }
.fl-field .fl-hint { font-size: 12.5px; color: var(--fl-dim); margin-top: 5px; }
.fl-err { color: var(--fl-hot); font-size: 14px; margin: 0 0 14px; display: none; }
.fl-err.on { display: block; }
.fl-modal-close { background: none; border: 0; color: var(--fl-dim); font-size: 14px;
                  cursor: pointer; margin-top: 12px; width: 100%; }

/* ---- footer ---- */
.fl-foot { border-top: 1px solid var(--fl-line); padding: 40px 0 32px; margin-top: 60px;
           background: var(--fl-bg); flex-shrink: 0; }
.fl-foot-top { display: flex; flex-wrap: wrap; gap: 28px; justify-content: space-between; }
.fl-foot-brand { font-weight: 800; font-size: 17px; }
.fl-foot-line { color: var(--fl-dim); font-size: 14px; margin: 6px 0 0; max-width: 320px; }
.fl-foot-links { display: flex; flex-wrap: wrap; gap: 8px 20px; list-style: none;
                 margin: 0; padding: 0; align-content: flex-start; }
.fl-foot-links a { color: var(--fl-dim); text-decoration: none; font-size: 14px; }
.fl-foot-links a:hover { color: var(--fl-ink); }
.fl-foot-legal { color: #6b6b80; font-size: 12.5px; margin: 28px 0 0; line-height: 1.6; }

/* generic pages inherited from djangobase (login, account, contact…) */
.card, .modal-content { background: var(--fl-panel); border-color: var(--fl-line); color: var(--fl-ink); }
.form-control, .form-select { background: var(--fl-bg); border-color: var(--fl-line); color: var(--fl-ink); }
.form-control:focus, .form-select:focus { background: var(--fl-bg); color: var(--fl-ink);
                                          border-color: var(--fl-hot); box-shadow: none; }
.btn-primary { background: var(--fl-hot); border-color: var(--fl-hot); }
.btn-primary:hover { background: #e8402f; border-color: #e8402f; }
.text-muted { color: var(--fl-dim) !important; }
.bg-light { background: var(--fl-panel) !important; }

@media (max-width: 640px) {
  /* Do not hide the nav links on mobile — the only other route to Rules and
     the Ledger is the footer, which nobody scrolls to on a one-screen board.
     Shrink and wrap instead. */
  .fl-nav-inner { height: auto; padding: 10px 0; flex-wrap: wrap; gap: 10px 16px; }
  /* space-between pins the first and last link to the viewport edges, which
     clips the last one on a 390px screen. Centre and let it wrap instead. */
  .fl-nav-links { order: 3; width: 100%; margin-left: 0; flex-wrap: wrap;
                  justify-content: center; gap: 6px 16px; }
  .fl-nav-links a { font-size: 13.5px; }
  .fl-nav-right { margin-left: auto; }
  .fl-stage { padding: 34px 0 22px; }
  .fl-holder { padding: 20px; }
  .fl-section { padding: 40px 0; margin-top: 40px; }
}

/* ---- generic pages (auth, legal, account, errors) ------------------------
   These carry the same design as the board so the site does not read as two
   products bolted together. All `fl-` prefixed; nothing borrows a Bootstrap
   utility name. */
.fl-page { padding: 48px 0 20px; }
.fl-narrow { max-width: 520px; margin: 0 auto; }
.fl-mid { max-width: 720px; margin: 0 auto; }
.fl-page-h { font-size: 30px; font-weight: 800; letter-spacing: -.025em; margin: 0 0 10px; }
.fl-page-h.fl-center { text-align: center; }
.fl-dimtext { color: var(--fl-dim); }

.fl-panel { background: var(--fl-panel); border: 1px solid var(--fl-line);
            border-radius: 18px; padding: 28px; }
.fl-input { width: 100%; background: var(--fl-bg); border: 1px solid var(--fl-line);
            color: var(--fl-ink); border-radius: 10px; padding: 11px 13px; font-size: 15px; }
.fl-input:focus { outline: none; border-color: var(--fl-hot); }
textarea.fl-input { resize: vertical; min-height: 120px; }
.fl-block { display: block; width: 100%; }

.fl-alert { border-radius: 12px; padding: 13px 16px; font-size: 14.5px; margin-bottom: 18px; }
.fl-alert ul { margin: 0; padding-left: 18px; }
.fl-alert-bad { border: 1px solid var(--fl-hot); background: rgba(255,77,61,.09); }
.fl-alert-good { border: 1px solid var(--fl-cool); background: rgba(71,224,160,.09); }

.fl-prose h2 { font-size: 19px; font-weight: 720; margin: 30px 0 8px; }
.fl-prose p { color: var(--fl-dim); font-size: 15.5px; line-height: 1.7; margin: 0 0 12px; }
.fl-prose ul { color: var(--fl-dim); font-size: 15.5px; line-height: 1.7; }
.fl-prose a { color: var(--fl-hot-2); }

.fl-rule { border: 0; border-top: 1px solid var(--fl-line); margin: 24px 0; }
.fl-center { text-align: center; }
.fl-stack > * + * { margin-top: 14px; }

.fl-code { font-family: var(--fl-mono); font-size: 92px; font-weight: 700;
           letter-spacing: -.04em; margin: 0; color: var(--fl-hot); }

.fl-danger { background: transparent; border: 1px solid var(--fl-hot); color: var(--fl-hot);
             border-radius: 12px; padding: 12px 22px; font-weight: 650; cursor: pointer;
             font-size: 15px; }
.fl-danger:hover { background: var(--fl-hot); color: #fff; }

/* captcha widget ships its own markup */
.fl-field img { border-radius: 8px; margin-bottom: 8px; }

/* ---- live arrivals (data comes from visits.report, not from us) ---- */
.fl-from { display: flex; flex-wrap: wrap; gap: 8px 14px; justify-content: center;
           align-items: center; margin: 10px 0 0; min-height: 20px; }
.fl-from-label { color: var(--fl-dim); font-size: 12px; letter-spacing: .1em;
                 text-transform: uppercase; font-weight: 700; }
.fl-from-item { color: var(--fl-dim); font-size: 13.5px; }
.fl-from-item b { color: var(--fl-ink); font-family: var(--fl-mono); font-weight: 650; }
.fl-verified { margin: 12px 0 0; font-size: 13.5px; }
.fl-verified a { color: var(--fl-cool); text-decoration: none; font-weight: 620; }
.fl-verified a:hover { text-decoration: underline; }
.fl-tick { font-weight: 700; }
.fl-verified-note { color: var(--fl-dim); margin-left: 8px; }

/* ---- floating credit (desktop + tablet only) ---- */
.fl-made-by { position: fixed; right: 18px; bottom: 18px; z-index: 90;
              display: inline-flex; align-items: center; gap: 8px;
              padding: 9px 15px; border-radius: 99px; text-decoration: none;
              background: rgba(20,20,27,.92); border: 1px solid var(--fl-line);
              color: var(--fl-dim); font-size: 13px; font-weight: 600;
              backdrop-filter: blur(8px); box-shadow: 0 6px 24px rgba(0,0,0,.35);
              transition: color .15s ease, border-color .15s ease, transform .15s ease; }
.fl-made-by:hover { color: var(--fl-ink); border-color: var(--fl-hot);
                    transform: translateY(-2px); }
.fl-made-by-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--fl-hot); }
@media (max-width: 767px) { .fl-made-by { display: none; } }