.roast-page {
    max-width: 960px;
    margin: 0 auto;
    padding: 70px 20px;
}

.roast-header {
    text-align: center;
    margin-bottom: 36px;
}

.roast-header h1 {
    font-size: clamp(48px, 7vw, 88px);
    font-weight: 900;
}

.roast-header p {
    color: var(--muted);
    font-size: 19px;
}

.roast-form {
    background: var(--card);
    padding: 28px;
    border-radius: 22px;
    border: 1px solid #2a2a2a;
}

textarea,
select {
    width: 100%;
    background: #0f0f0f;
    color: white;
    border: 1px solid #333;
    border-radius: 12px;
    padding: 16px;
    font-size: 17px;
}

textarea {
    min-height: 190px;
    resize: vertical;
}

/* Three fields, not two. This was 1fr 1fr with three children in it, which
   dropped the tone select onto a second row on its own at half width beside an
   empty cell. auto-fit degrades through 2-up on a tablet instead of jumping
   straight from 3 to 1, and the media query below still forces a single column
   at the small breakpoint. */
.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 18px;
    margin-top: 18px;
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-field label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #a5a5a5;
}

button {
    width: 100%;
    margin-top: 20px;
    background: var(--pink);
    color: white;
    border: none;
    border-radius: 12px;
    padding: 17px;
    font-weight: 900;
    font-size: 18px;
}

.loading {
    margin-top: 30px;
    text-align: center;
    color: var(--pink);
    font-weight: 900;
}

.hidden {
    display: none;
}

.result-card {
    margin-top: 45px;
    background: #f8f8f8;
    color: #111;
    border-radius: 24px;
    padding: 36px;
}

.result-top {
    display: flex;
    justify-content: space-between;
    gap: 25px;
    align-items: center;
    border-bottom: 1px solid #ddd;
    padding-bottom: 24px;
    margin-bottom: 26px;
}

.result-stamp {
    border: 5px solid var(--pink);
    color: var(--pink);
    border-radius: 999px;
    padding: 15px 24px;
    font-weight: 900;
    text-transform: uppercase;
}

.result-score {
    font-size: 72px;
    font-weight: 900;
}

.result-score span {
    font-size: 26px;
}

.result-block {
    margin-top: 26px;
}

.result-block h2 {
    color: var(--pink);
    font-weight: 900;
}

.rewrite {
    background: #ffe7f0;
    padding: 24px;
    border-radius: 16px;
}

@media (max-width: 700px) {
    .form-row,
    .result-top {
        grid-template-columns: 1fr;
        flex-direction: column;
        align-items: flex-start;
    }
}

.rewrite-box{

    background:#fff5fa;

    border-radius:15px;

    padding:25px;

    margin-bottom:20px;

}

/* A Hinge rewrite comes back as prompts on separate lines, and a <p> collapses
   newlines to spaces, so without this the structure is destroyed on the way to
   the page no matter what the model returned. It also fixes the copy button,
   which uses innerText and therefore copies what is rendered rather than what
   is in the source. */
.rewrite-box p{

    white-space:pre-wrap;

}

.copy-btn{

    background:#111;

    color:white;

    border:none;

    border-radius:10px;

    padding:14px 25px;

    font-weight:bold;

    transition:.25s;

}

.copy-btn:hover{

    background:#ff2d7a;

}

.comparison-card {
    margin-top: 40px;
    background: #181818;
    color: white;
    border-radius: 20px;
    padding: 35px;
    text-align: center;
}

.comparison-card h2 {
    color: #ff2d7a;
    font-weight: 900;
}

.comparison-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    margin: 35px 0;
    flex-wrap: wrap;
}

.comparison-box {
    background: #0f0f0f;
    border: 1px solid #333;
    border-radius: 18px;
    padding: 25px;
    width: 230px;
}

.comparison-score {
    font-size: 72px;
    font-weight: 900;
    color: #ff2d7a;
}

.comparison-badge {
    margin-top: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.comparison-arrow {
    font-size: 54px;
    color: #ff2d7a;
    font-weight: 900;
}

.improvement {
    font-size: 34px;
    font-weight: 900;
    color: #4ade80;
}
.verdict-stamp {
    width: 170px;
    height: 170px;
    border: 7px solid currentColor;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(-8deg);
    font-weight: 900;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.05;
    padding: 20px;
    letter-spacing: 1px;
}

.verdict-stamp span {
    font-size: 20px;
}

.mini-stamp {
    display: inline-block;
    margin-top: 12px;
    padding: 9px 15px;
    border: 3px solid currentColor;
    border-radius: 999px;
    font-weight: 900;
    text-transform: uppercase;
    font-size: 13px;
}

.certified-fire {
    color: #22c55e;
}

.solid {
    color: #3b82f6;
}

.mid-energy {
    color: #eab308;
}

.needs-work {
    color: #f97316;
}

.max-cringe {
    color: #ef4444;
}


.share-brand span {
    color: #ff2d7a;
}

.share-tagline {
    color: #b7b7b7;
    margin-bottom: 30px;
    font-weight: 700;
}


.share-scores p {
    margin: 0;
    color: #b7b7b7;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 13px;
}

.share-scores strong {
    display: block;
    font-size: 76px;
    line-height: .9;
    color: #ff2d7a;
}

.share-scores small {
    display: block;
    margin-top: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.share-arrow {
    font-size: 54px;
    color: #ff2d7a;
    font-weight: 900;
}

.share-improvement {
    margin: 35px auto 20px;
    display: inline-block;
    background: #22c55e;
    color: #071107;
    padding: 14px 26px;
    border-radius: 999px;
    font-size: 28px;
    font-weight: 900;
}

.share-footer {
    margin-top: 18px;
    color: #b7b7b7;
    font-weight: 800;
}

.download-btn {
    max-width: 560px;
    display: block;
    margin: 0 auto 40px;
    background: white;
    color: #111;
    border: none;
    border-radius: 12px;
    padding: 16px;
    font-weight: 900;
}

.download-btn:hover {
    background: #ff2d7a;
    color: white;
}
.share-card-v2 {
    max-width: 760px;
    margin: 48px auto 22px;
    padding: 36px;
    border-radius: 28px;
    background:
        radial-gradient(circle at top right, rgba(255, 45, 122, 0.22), transparent 38%),
        linear-gradient(135deg, #090909, #181818);
    border: 1px solid rgba(255, 45, 122, 0.35);
    color: white;
    box-shadow: 0 30px 90px rgba(0,0,0,.45);
}

.share-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 34px;
}

.share-logo {
    font-size: 34px;
    font-weight: 950;
    letter-spacing: -1px;
}

.share-logo span {
    color: #ff2d7a;
}

.share-tag {
    color: #b7b7b7;
    font-weight: 800;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.share-main {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 28px;
}

.share-score-block {
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 22px;
    padding: 28px 22px;
    text-align: center;
}

.share-score-block p {
    margin: 0 0 10px;
    color: #b7b7b7;
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.share-score-block strong {
    display: block;
    font-size: 84px;
    line-height: .9;
    font-weight: 950;
    color: #ff2d7a;
}

.share-score-block small {
    display: inline-block;
    margin-top: 18px;
    padding: 8px 14px;
    border: 2px solid currentColor;
    border-radius: 999px;
    font-weight: 950;
    text-transform: uppercase;
    font-size: 12px;
}

.share-arrow-v2 {
    font-size: 56px;
    color: #ff2d7a;
    font-weight: 950;
}

.share-gain {
    margin: 34px auto 0;
    width: fit-content;
    background: #22c55e;
    color: #061006;
    padding: 13px 24px;
    border-radius: 999px;
    font-size: 24px;
    font-weight: 950;
}

.share-bottom {
    margin-top: 28px;
    text-align: center;
    color: #8f8f8f;
    font-weight: 800;
}

.download-btn {
    max-width: 760px;
    display: block;
    margin: 0 auto 44px;
    background: white;
    color: #111;
    border: none;
    border-radius: 14px;
    padding: 16px;
    font-weight: 950;
}

.download-btn:hover {
    background: #ff2d7a;
    color: white;
}

/* Share and Download sit side by side, and wrap to a stack on a narrow
   screen. Share is the pink one because it is the action with a business
   reason to exist. Download is the escape hatch, not the headline. */
.share-actions {
    max-width: 760px;
    margin: 0 auto 44px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.share-actions .share-btn,
.share-actions .download-btn {
    flex: 1 1 240px;
    margin: 0;
    max-width: none;
}

.share-btn {
    border: none;
    border-radius: 14px;
    padding: 16px;
    font-weight: 950;
    background: #ff2d7a;
    color: white;
    cursor: pointer;
    transition: .25s;
}

.share-btn:hover {
    background: #ff5a95;
}

.share-btn:disabled {
    opacity: .65;
    cursor: default;
}

@media (max-width: 700px) {
    .share-main {
        grid-template-columns: 1fr;
    }

    .share-arrow-v2 {
        transform: rotate(90deg);
        text-align: center;
    }

    .share-top {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}