/* Externalized styles to satisfy CSP (no 'unsafe-inline'). */

        :root {
            --bg: #0b0c10;
            --card: #151820;
            --ink: #e7ecf3;
            --muted: #a9b1bd;
            --accent: #7ee787;
            --blue: #1f6feb;
            --highlight: #fdff00;
            --radius: 15px;
            --shadow: 0 6px 24px rgba(0, 0, 0, .25);
            --border: #2a3144;
            --border2: #2e3650;
            --success: #1fbf75;
            --danger: #e23b3b;
            --pending: #caa64e;
            --pill-bg: #0e1117;
            --pill-br: #3a425a;
        }

        * {
            box-sizing: border-box
        }

        html {
            -webkit-text-size-adjust: 100%
        }

        body {
            margin: 0;
            font-family: Verdana, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
            letter-spacing: .8px;
            line-height: 1.7;
            background: linear-gradient(120deg, #0a0b0e, #0d1117 40%, #0a0b0e);
            color: var(--ink);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            text-rendering: optimizeLegibility;
            font-kerning: normal;
        }

        .page {
            background: var(--card);
            border: 2px solid var(--border);
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            padding: 28px 24px;
            max-width: 1200px;
            width: 94%;
        }

        header.top {
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            /* sinistra | centro | destra */
            align-items: center;
            gap: 12px;
            margin-bottom: 8px;
        }

        header.top .last-upd {
            justify-self: end
        }

        header.top .spacer {
            display: block
        }

        /* colonna vuota a sinistra */


        .last-upd {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: var(--pill-bg);
            border: 1px solid var(--pill-br);
            padding: 6px 10px;
            border-radius: 999px;
            font-size: 12px;
            font-weight: 800;
            letter-spacing: .8px;
            color: #dce7f7
        }

        .last-upd .dot {
            width: 8px;
            height: 8px;
            border-radius: 999px;
            background: var(--accent);
            box-shadow: 0 0 6px rgba(126, 231, 135, .7)
        }

        h1 {
            font-size: 26px;
            margin: 0 0 10px;
            color: var(--accent);
            text-shadow: 1px 1px 2px #000;
            letter-spacing: .8px
        }

        p {
            color: var(--muted);
            font-size: 15px;
            margin: 0 0 14px
        }

        .badge {
            display: inline-block;
            background: var(--highlight);
            color: #0b0c10;
            border: 2px solid #cacc00;
            padding: 2px 26px;
            border-radius: 999px;
            font-weight: 900;
            font-size: 16px;
            letter-spacing: .8px;
            box-shadow: 0 0 12px rgba(253, 255, 0, .4);
            text-transform: uppercase;
            margin: 0 auto 12px
        }

        .badge .seal-dot {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 26px;
            height: 26px;
            margin-left: 4px;
            border-radius: 50%;
            background: #0b0c10;
            color: #fdff00;
            border: 2px solid #cacc00;
            font-size: 12px;
            line-height: 1;
            box-shadow: 0 0 6px rgba(253, 255, 0, .25);
        }

        h2 {
            font-size: 16px;
            color: var(--blue);
            border-bottom: 1px dashed var(--border2);
            padding-bottom: 6px;
            margin: 0 0 10px;
            text-transform: uppercase;
            letter-spacing: .8px
        }

        .panel {
            background: #0b0c10;
            border: 2px solid var(--border2);
            border-radius: 12px;
            padding: 16px;
            margin: 14px 0
        }

        .tips-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 16px;
            margin-top: 6px
        }

        @media (min-width:820px) {
            .tips-grid {
                grid-template-columns: 1fr 1fr
            }
        }

        .tip-card {
            background: #0b0c10;
            border: 2px solid var(--border2);
            border-radius: 12px;
            padding: 16px;
            text-align: left;
            position: relative
        }

        .lock-banner {
            position: absolute;
            right: 12px;
            top: 12px;
            background: #291a14;
            color: #ffd6a8;
            border: 1px solid #5a3b2b;
            border-radius: 999px;
            padding: 6px 10px;
            font-weight: 800;
            font-size: 12px;
            letter-spacing: .8px;
            display: none
        }

        .tip-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            margin-bottom: 8px
        }

        .tip-title {
            font-weight: 800;
            letter-spacing: .8px
        }

        .tip-title span {
            color: var(--accent)
        }

        .btn-green {
            font-family: Verdana;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 12px 18px;
            border-radius: 50px;
            font-weight: 800;
            font-size: 16px;
            text-decoration: none;
            box-shadow: var(--shadow);
            border: none;
            cursor: pointer;
            letter-spacing: .8px;
            min-width: 180px;
            background: var(--accent);
            color: #0b0c10;
            text-align: center
        }

        .btn-green[disabled] {
            opacity: .55;
            cursor: not-allowed;
            filter: grayscale(.2)
        }

        .btn-green:hover {
            opacity: .92
        }

        .icon {
            font-size: 18px;
            line-height: 1
        }

        .row {
            display: flex;
            align-items: center;
            gap: 8px;
            margin: 8px 0;
            flex-wrap: wrap
        }

        .key {
            color: #a9b1bd;
            font-size: 13px;
            letter-spacing: .8px;
            min-width: 64px;
            text-align: left
        }

        .val {
            font-size: 15px;
            letter-spacing: .4px
        }

        .muted {
            color: var(--muted);
            font-size: 13px
        }
/* NEW: postponed chip */
.chip-postponed {
  background: #1a1324;   /* deep violet */
  color: #e6d9ff;
  border-color: #44305d;
}

        .chip {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-weight: 900;
            font-size: 12px;
            padding: 6px 10px;
            border-radius: 999px;
            border: 1px solid #2a3144;
            letter-spacing: .8px
        }

        .chip-attempt {
            background: #0e1117;
            color: #e6eef9
        }

        .chip-off {
            opacity: .55;
            filter: grayscale(.35)
        }

        /* Visual "off" for attempt when no forecast today */
        .chip-pending {
            background: #2c230f;
            color: #ffe6a6;
            border-color: #4a3a14
        }

        .chip-hit {
            background: #0f231a;
            color: #b8f2d4;
            border-color: #1f4a38
        }

        .chip-miss {
            background: #2b1212;
            color: #ffc9c9;
            border-color: #5a1f1f
        }

        .date-pill {
            display: inline-block;
            padding: 7px 13px;
            border-radius: 999px;
            background: linear-gradient(180deg, #121828, #0c1220);
            border: 1px solid #3d4a72;
            color: #fff;
            font-weight: 900;
            letter-spacing: .8px;
            font-size: 13px;
            box-shadow: 0 0 0 2px rgba(61, 74, 114, .15), inset 0 0 18px rgba(255, 255, 255, .04)
        }

        .time-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 6px 10px;
            border-radius: 999px;
            background: #0e1117;
            border: 1px solid #39425a;
            color: #dfe8fb;
            font-weight: 800;
            font-size: 12px;
            letter-spacing: .px
        }

        .time-badge .icon {
            font-size: 14px
        }

        .time-text {
            white-space: nowrap
        }

        @media (max-width:520px) {
            .time-text {
                white-space: normal
            }
        }

        .pay-marks {
            margin-top: 6px;
            display: flex;
            align-items: center;
            gap: 10px;
            opacity: .95;
            justify-content: center
        }

        .pay-marks img {
            height: 34px;
            vertical-align: middle;
            border-radius: 4px
        }

        footer {
            margin-top: 24px;
            font-size: 12px;
            color: #a9b1bd;
            line-height: 1.45
        }

        ul.results {
            padding-left: 18px;
            margin: 6px 0 0
        }

        ul.results li {
            margin: 2px 0
        }

        .showmore {
            font-size: 12px;
            color: #cfe4ff;
            text-decoration: underline;
            cursor: pointer;
            margin-top: 6px;
            display: inline-block;
            /* <- always visible */
            /* before: display:none */
        }

        .results-list {
          list-style: none;
          padding-left: 0;
        }


/* Results page: lists and ROI containers */
.results-list { list-style: none; padding-left: 0; margin: 0; }
.results-list li { margin: 6px 0; }

.roi-wrap {
  background: #0b0c10;
  border: 1px solid var(--border2);
  border-radius: 12px;
  padding: 10px;
  overflow: hidden;
}


/* --- Utilities to replace inline style attributes (CSP-friendly) --- */
.hidden { display: none !important; }
/* use when you previously had style="display:flex" */
.show-flex { display: flex !important; }
/* use when you previously had style="display:inline-flex" */
.show-inline-flex { display: inline-flex !important; }
/* use when you previously had style="white-space:nowrap" */
.nowrap { white-space: nowrap !important; }
/* optional helper if you used cursor or similar inline tweaks */
.pointer { cursor: pointer !important; }



/* Stripe badge container */
.badge-stripe {
  /* Keep layout consistent and CSP-safe (no inline styles) */
  align-items: center;     /* center icon and text vertically */
  gap: 10px;               /* space between icon and text */
  background: #fff;        /* white pill background */
  border-radius: 6px;      /* rounded corners */
  padding: 6px 10px;       /* comfortable touch target */
}

/* Make the SVG crisp without distortion */
.badge-stripe svg {
  height: 22px;            /* tweak 20–24px if needed */
  width: auto;             /* keep aspect ratio */
  display: inline-block;   /* predictable sizing */
}

/* Badge text styling (moved from inline style) */
.badge-stripe__text {
  color: #0b0c10;          /* dark text color for contrast */
  font-weight: 900;        /* bold label */
  letter-spacing: .8px;    /* subtle tracking */
  line-height: 1;          /* align neatly with the icon */
}