:root {
    --bg: #f5f3ef;
    --card: #ffffff;
    --ink: #23201c;
    --muted: #8a8378;
    --primary: #2f6df0;
    --primary-d: #1f57c9;
    --success: #1f9d55;
    --success-d: #178045;
    --line: #e7e2d9;
    --accent: #fff6e0;
}
* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--bg);
    color: var(--ink);
    line-height: 1.5;
    padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}
.card {
    max-width: 540px;
    margin: 24px auto;
    background: var(--card);
    border-radius: 18px;
    padding: 26px 22px;
    box-shadow: 0 6px 24px rgba(0,0,0,.06);
}
h1 { font-size: 1.5rem; margin: 0 0 10px; }
.lead { color: #4a463f; margin: 0 0 18px; }
.muted { color: var(--muted); font-weight: normal; font-size: .9em; }
.error { color: #c0392b; background: #fdecea; padding: 10px 12px; border-radius: 10px; }

label { display: block; font-weight: 600; margin: 14px 0 6px; }
input[type=text] {
    width: 100%;
    padding: 14px;
    font-size: 1.1rem;
    border: 1.5px solid var(--line);
    border-radius: 12px;
    background: #fff;
}
input[type=text]:focus { outline: none; border-color: var(--primary); }

textarea {
    display: block;
    width: 100%;
    padding: 12px;
    margin: 0 0 12px;          /* keep clear of the copy button below */
    font-size: 1rem;
    line-height: 1.45;
    border: 1.5px solid var(--line);
    border-radius: 12px;
    resize: vertical;
    font-family: inherit;
    background: #fbfaf7;
    vertical-align: top;
}

.copybox { margin-top: 10px; }
.copybox label {
    display: block;
    font-size: .85rem;
    color: var(--muted);
    font-weight: 600;
    margin-bottom: 6px;
}
.copybox .btn.block { margin-top: 0; }   /* textarea already provides the gap */

.btn {
    display: inline-block;
    border: none;
    border-radius: 12px;
    padding: 15px 18px;
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    transition: background .15s, transform .05s;
}
.btn:active { transform: translateY(1px); }
.btn.block { display: block; width: 100%; margin-top: 12px; }
.btn.primary { background: var(--primary); color: #fff; }
.btn.primary:hover { background: var(--primary-d); }
.btn.success { background: var(--success); color: #fff; font-size: 1.2rem; padding: 18px; }
.btn.success:hover { background: var(--success-d); }
.btn.ghost { background: transparent; color: var(--muted); border: 1.5px solid var(--line); }
.btn.ghost:hover { background: #faf8f4; }
.mt { margin-top: 6px; }

.steps { list-style: none; counter-reset: step; padding: 0; margin: 8px 0 20px; }
.steps li {
    counter-increment: step;
    position: relative;
    padding: 14px 14px 14px 50px;
    border: 1.5px solid var(--line);
    border-radius: 14px;
    margin-bottom: 12px;
    background: #fdfcfa;
}
.steps li::before {
    content: counter(step);
    position: absolute;
    left: 12px; top: 14px;
    width: 26px; height: 26px;
    background: var(--primary);
    color: #fff;
    border-radius: 50%;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    font-size: .9rem;
}
.substeps { margin: 8px 0 0; padding-left: 20px; }
.substeps li { margin: 4px 0; }
.searchbox, .identifier {
    margin-top: 6px;
    padding: 10px 12px;
    background: #fff;
    border: 1.5px dashed var(--line);
    border-radius: 10px;
    font-weight: 600;
}
.identifier { font-weight: 500; }
.match {
    margin-top: 8px;
    padding: 10px 12px;
    background: #eef5ff;
    border: 1.5px solid #cfe0fb;
    border-radius: 10px;
    font-size: .95rem;
}
.price {
    display: inline-block;
    margin-top: 8px;
    padding: 5px 12px;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--success-d);
    background: #eafaf0;
    border: 1.5px solid #bfe6cd;
    border-radius: 10px;
}
.price-note { font-size: .78rem; font-weight: 400; color: var(--muted); }
.hintline { margin-top: 6px; color: #4a463f; }
.searchinput {
    display: block;
    width: 100%;
    margin: 6px 0 10px;
    padding: 12px;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ink);
    background: #fff;
    border: 1.5px dashed var(--line);
    border-radius: 10px;
}
.searchinput:focus { outline: none; border-color: var(--primary); }
.suggestion {
    margin-top: 8px;
    padding: 12px;
    background: var(--accent);
    border-radius: 10px;
    font-size: .95rem;
}

.progress { color: var(--muted); font-size: .9rem; margin-bottom: 10px; }
.progress.big { font-size: 1.15rem; color: var(--success-d); font-weight: 700; margin: 10px 0; }

.referral { margin: 16px 0; }
.referral p { margin: 0 0 10px; }

.foot { text-align: center; color: var(--muted); font-size: .85rem; padding: 8px 0 24px; }

/* Progress dashboard */
.stats { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 18px; }
.stat { flex: 1 1 120px; background: #fdfcfa; border: 1.5px solid var(--line);
        border-radius: 12px; padding: 12px; text-align: center; }
.stat .num { display: block; font-size: 1.6rem; font-weight: 800; color: var(--primary-d); }
.stat .lbl { font-size: .8rem; color: var(--muted); }
.ptable { width: 100%; border-collapse: collapse; font-size: .92rem; }
.ptable th, .ptable td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); }
.ptable td:last-child, .ptable th:last-child { text-align: right; white-space: nowrap; }
.ptable tr.low td:last-child { color: #c0392b; }
.ptable tr.ok td:last-child { color: var(--success-d); }
.vlist { list-style: none; padding: 0; columns: 2; column-gap: 18px; }
.vlist li { padding: 3px 0; }
h2 { font-size: 1.05rem; margin: 20px 0 8px; }