/* Formline app — front-end styles. Palette: navy / sea-blue / white / red. */
:root{
  --bg:#eef2f8; --surface:#fff; --surface-2:#f4f7fb; --surface-3:#e9eff7;
  --border:#dde5ef; --border-2:#c8d4e2; --text:#0c1b2e; --text-2:#51637b; --text-3:#8494a8;
  --sea:#1877c9; --sea-2:#1667ad; --sea-soft:#e7f1fb; --sea-line:#cfe3f7; --navy:#0b1f3a;
  --red:#e23b4e; --win:#149457; --draw:#d69220; --loss:#e23b4e;
  --shadow:0 1px 2px rgba(13,30,55,.05),0 10px 26px -14px rgba(13,30,55,.18);
  --shadow-lg:0 30px 70px -24px rgba(11,31,58,.4);
}
body.formline-dark{
  --bg:#060f1c; --surface:#0d2137; --surface-2:#102740; --surface-3:#16324e;
  --border:#1e3a5a; --border-2:#28496e; --text:#e8f0fb; --text-2:#93a7c2; --text-3:#5f7593;
  --sea:#3f9fe0; --sea-2:#6bb6e8; --sea-soft:#10314f; --sea-line:#1e4870;
}
#formline-app{min-height:100vh;background:var(--bg);color:var(--text);font-family:'IBM Plex Sans',system-ui,sans-serif}
.fl-wrap{max-width:1180px;margin:0 auto;padding:0 clamp(16px,4vw,28px)}
.fl-mono{font-family:'IBM Plex Mono',monospace}
.fl-h,.fl-h1,.fl-h2{font-family:'Space Grotesk',sans-serif;letter-spacing:-.02em;color:var(--text);margin:0}
.fl-h1{font-weight:700;font-size:clamp(28px,4.5vw,44px)} .fl-h2{font-weight:700;font-size:clamp(22px,3vw,32px)}
.fl-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow)}
.fl-btn{display:inline-flex;align-items:center;gap:8px;border:none;border-radius:11px;padding:12px 18px;font:600 14px 'IBM Plex Sans';cursor:pointer}
.fl-btn-primary{background:var(--sea);color:#fff;box-shadow:0 8px 20px -8px rgba(24,119,201,.6)}
.fl-btn-ghost{background:var(--surface);color:var(--text);border:1px solid var(--border-2)}
.fl-header{position:sticky;top:0;z-index:50;backdrop-filter:blur(12px);background:rgba(255,255,255,.82);border-bottom:1px solid var(--border)}
body.formline-dark .fl-header{background:rgba(9,20,35,.82)}
.fl-headin{display:flex;align-items:center;gap:22px;height:66px}
.fl-logo{display:flex;align-items:center;gap:11px;cursor:pointer}
.fl-logo b{font-family:'Space Grotesk';font-weight:700;font-size:20px}
.fl-mark{width:36px;height:36px;border-radius:10px;background:linear-gradient(150deg,var(--navy),var(--sea));display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px -3px rgba(24,119,201,.55)}
.fl-nav{display:flex;gap:2px}
.fl-nav button{background:none;border:none;border-radius:9px;padding:8px 13px;font:600 14px 'IBM Plex Sans';color:var(--text-2);cursor:pointer}
.fl-nav button.active{background:var(--sea-soft);color:var(--sea-2)}
.fl-pip{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:5px;font:600 10px 'IBM Plex Mono';color:#fff}
.fl-pip[data-tip]{cursor:help}
.fl-tip{position:absolute;transform:translate(-50%,-100%);background:#0b1f3a;color:#fff;font:600 11.5px/1.3 'IBM Plex Mono',monospace;padding:6px 10px;border-radius:7px;white-space:nowrap;pointer-events:none;z-index:10000;box-shadow:0 6px 20px rgba(0,0,0,.3);display:none}
.fl-tip:after{content:'';position:absolute;left:50%;top:100%;transform:translateX(-50%);border:5px solid transparent;border-top-color:#0b1f3a}
.fl-pip.W{background:var(--win)} .fl-pip.D{background:var(--draw)} .fl-pip.L{background:var(--loss)}
.fl-chip{font-family:'IBM Plex Mono';font-size:12.5px;border:1px solid var(--border-2);background:var(--surface-2);color:var(--text);border-radius:8px;padding:6px 8px;outline:none;cursor:pointer}
.fl-num{font-family:'IBM Plex Mono';font-size:12.5px;font-weight:600;border:1px solid var(--border-2);background:var(--surface);color:var(--text);border-radius:8px;padding:6px;width:54px;text-align:center;outline:none}
#formline-app *, .fl-overlay, .fl-overlay *{box-sizing:border-box}
.fl-input{width:100%;background:var(--surface);border:1px solid var(--border-2);border-radius:11px;padding:12px 15px;font-size:15px;color:var(--text);outline:none}
.fl-rule{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--border);border-radius:11px;padding:9px 10px}
.fl-icon{width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:9px;border:1px solid var(--border);background:var(--surface);color:var(--text-2);cursor:pointer}
.fl-overlay{position:fixed;inset:0;z-index:100;background:rgba(6,15,28,.55);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:20px}
.fl-modal{width:440px;max-width:100%;background:var(--surface);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow-lg);padding:26px}
.fl-price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:860px){.fl-price-grid{grid-template-columns:1fr}.fl-nav{display:none}}
.fl-skel{height:60px;border-radius:11px;background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface-3) 37%,var(--surface-2) 63%);background-size:400% 100%;animation:fl-shim 1.3s infinite}
@keyframes fl-shim{0%{background-position:200% 0}100%{background-position:-200% 0}}
@keyframes fl-spin{to{transform:rotate(360deg)}}
.fl-spin{width:18px;height:18px;border-radius:50%;border:2px solid var(--sea-line);border-top-color:var(--sea);animation:fl-spin .8s linear infinite}