@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;600;700;800;900&display=swap');

:root {
    font-family: 'Noto Sans Thai', Tahoma, sans-serif;
    color: #31251c;
    background: #f6f2eb;
    font-synthesis: none
}

* {
    box-sizing: border-box
}

body {
    margin: 0
}

.workspace {
    max-width: 1120px;
    margin: auto;
    padding: 46px 24px 24px;
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 32px;
    align-items: start
}

.controls {
    padding: 24px 0;
    position: sticky;
    top: 24px
}

.eyebrow {
    font-size: 11px;
    letter-spacing: 2px;
    color: #9a7139;
    font-weight: 700
}

h1 {
    font-size: 30px;
    margin: 12px 0
}

p {
    font-size: 14px;
    line-height: 1.8;
    color: #7b7064
}

.fields {
    display: grid;
    gap: 22px;
    margin: 30px 0 18px
}

label {
    display: block;
    font-size: 12px;
    font-weight: 600
}

input {
    display: block;
    width: 100%;
    border: 1px solid #d9cbb8;
    border-radius: 10px;
    background: #fffdf8;
    color: #493520;
    padding: 13px 14px;
    margin-top: 8px;
    font: inherit;
    font-size: 18px;
    min-width: 0
}

.input-wrap {
    position: relative
}

.input-wrap input {
    padding-right: 40px;
    font-size: 26px;
    font-weight: 700
}

.input-wrap span {
    position: absolute;
    right: 16px;
    top: 18px;
    color: #94703b
}

input:focus {
    outline: 2px solid #b98c35;
    outline-offset: 3px
}

button {
    width: 100%;
    padding: 14px 18px;
    background: #7c1418;
    color: #fff8e6;
    border: 0;
    border-radius: 10px;
    font: inherit;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    justify-content: space-between
}

button:hover {
    background: #9e171c
}

button:focus-visible,
summary:focus-visible {
    outline: 3px solid #c39435;
    outline-offset: 3px
}

.note {
    font-size: 11px
}

.error {
    color: #a4090c;
    font-size: 12px
}

.board {
    position: relative;
    overflow: hidden;
    padding: 28px 22px 18px;
    border: 3px solid #f6d36a;
    border-radius: 28px;
    background: radial-gradient(ellipse at 0% 60%, #ffe89d88, transparent 35%), radial-gradient(ellipse at 100% 70%, #fff3a0aa, transparent 35%), linear-gradient(135deg, #8a0000 0%, #d82308 22%, #ad0000 45%, #f5c546 67%, #960000 100%);
    box-shadow: 0 18px 55px #6e260b26, inset 0 0 0 5px #9e5b0d, inset 0 0 25px #ffdf75
}

.board-header {
    text-align: center;
    position: relative
}

.ornament {
    color: #ffd768;
    letter-spacing: 5px;
    font-size: 12px
}

h2 {
    font-size: clamp(30px, 4.3vw, 59px);
    font-weight: 900;
    line-height: 1.3;
    color: #fff8dc;
    margin: 12px 0;
    text-shadow: 2px 4px 0 #6e0800, 0 4px 8px #4e0000
}

h2 span {
    color: #ffde58
}

.date-pill {
    display: inline-block;
    min-width: 55%;
    padding: 0 24px;
    border: 3px solid #e5af2d;
    border-radius: 40px;
    background: linear-gradient(#fff8df, #ffeab1);
    box-shadow: 0 3px 5px #5e170766;
    color: #17110b;
    font-size: clamp(24px, 3vw, 38px);
    font-weight: 800
}

.headline-price {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: linear-gradient(130deg, #c40707, #890000);
    border: 3px solid #ffe38b;
    border-radius: 22px;
    padding: 12px 35px;
    margin: 22px 0px 16px;
    box-shadow: 0 0 0 2px #b67c16, 0 5px 12px #53000055
}

.headline-price>span {
    font-weight: 800;
    color: #fffaf0;
    font-size: clamp(55px, 2.4vw, 28px);
    text-shadow: 0 3px 3px #520000
}

.headline-price strong {
    font-size: clamp(32px, 5.2vw, 64px);
    letter-spacing: -2px;
    line-height: 1.3;
    color: #ffdc55;
    text-shadow: 1px 2px 0 #fff1a4, 2px 5px 2px #824800
}

.table-frame {
    border-radius: 24px;
    background: linear-gradient(110deg, #ffecaf, #fff8e6, #f5cd62);
    padding: 10px 14px;
    box-shadow: 0 0 0 2px #e9b23e, 0 4px 14px #6d210b55
}

table {
    width: 100%;
    border-spacing: 0 5px;
    table-layout: fixed
}

th,
td {
    padding: 2px 10px;
    line-height: 1.55;
    border-top: 2px solid #daa331;
    border-bottom: 2px solid #daa331
}

tbody th {
    width: 44%;
    border-radius: 26px 0 0 26px;
    border-left: 2px solid #daa331;
    background: linear-gradient(#cc0805, #990000);
    color: #fffdf0;
    font-size: clamp(19px, 2.9vw, 35px);
    font-weight: 700;
    text-align: center
}

td {
    border-right: 2px solid #daa331;
    border-radius: 0 26px 26px 0;
    background: #fff3d8;
    color: #ac0000;
    text-align: center;
    font-weight: 900;
    font-size: clamp(26px, 4vw, 48px);
    font-variant-numeric: tabular-nums
}

.board-footer {
    text-align: center;
    color: #ffefbd;
    font-size: 10px;
    margin-top: 17px
}

.board-footer span {
    margin: 0 10px
}

.spark {
    position: absolute;
    color: #fff5be;
    text-shadow: 0 0 15px #fff, 0 0 30px #ffc038;
    font-size: 60px;
    pointer-events: none
}

.spark-one {
    top: 20px;
    left: 5px
}

.spark-two {
    bottom: 4px;
    right: 0
}

.formulas {
    grid-column: 2;
    font-size: 12px;
    color: #8e7859
}

.formulas p {
    font-size: 12px
}

summary {
    cursor: pointer
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0)
}

/* Brand palette: midnight navy and metallic gold. */
:root {
    color: #101d3d;
    background: #f1f3f8
}

.eyebrow {
    color: #927029
}

.controls p {
    color: #61708b
}

input {
    border-color: #c7cedd;
    background: #fff;
    color: #09183e
}

input:focus {
    outline-color: #cba64f
}

.input-wrap span {
    color: #a7812e
}

button {
    background: #09183e;
    color: #f9e7ae
}

button:hover {
    background: #1b315c
}

button:disabled {
    opacity: .65;
    cursor: wait
}

.board {
    background: radial-gradient(ellipse at 100% 55%, #304c7777, transparent 55%), linear-gradient(135deg, #040e32, #162e56 65%, #040e32);
    border-color: #e6c66f;
    box-shadow: 0 18px 55px #040e322b, inset 0 0 0 5px #9c782d, inset 0 0 25px #030b27
}

.brand-logo {
    display: block;
    width: 96px;
    height: 96px;
    object-fit: contain;
    margin: 0 auto 10px
}

.ornament {
    color: #e6c66f
}

h2 {
    text-shadow: 2px 4px 0 #020820, 0 4px 8px #020820
}

h2 span {
    color: #f4d77f
}

.date-pill {
    border-color: #cba64f;
    background: linear-gradient(#fff8df, #f4dfa5);
    color: #09183e;
    box-shadow: 0 3px 5px #02082066
}

.headline-price {
    background: linear-gradient(130deg, #152951, #040e32);
    border-color: #e6c66f;
    box-shadow: 0 0 0 2px #9c782d, 0 5px 12px #02082055
}

.headline-price>span {
    text-shadow: 0 3px 3px #020820
}

.headline-price strong {
    color: #f4d77f;
    text-shadow: 1px 2px 0 #fff1a4, 2px 5px 2px #6a5020
}

.table-frame {
    box-shadow: 0 0 0 2px #cba64f, 0 4px 14px #02082055
}

tbody th {
    background: linear-gradient(#152951, #040e32)
}

td {
    color: #09183e
}

.formulas {
    color: #61708b
}

.spark {
    color: #f7e4aa;
    text-shadow: 0 0 15px #fff, 0 0 30px #d4ae51
}

.board.has-background {
    background-image: var(--board-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat
}

input[type=file] {
    font-size: 13px;
    padding: 12px
}

#remove-background {
    margin-bottom: 16px
}

[hidden] {
    display: none !important
}

@media(min-width:1400px) {
    .workspace {
        padding-top: 64px
    }
}

@media(max-width:760px) {
    .workspace {
        max-width: 600px;
        grid-template-columns: 1fr;
        padding: 20px 16px;
        gap: 20px
    }

    .controls {
        position: static;
        padding: 0
    }

    h1 {
        margin: 6px 0;
        font-size: 26px
    }

    .controls>p {
        margin: 4px 0
    }

    .fields {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        margin: 18px 0
    }

    .input-wrap input {
        font-size: 20px
    }

    input {
        font-size: 16px;
        padding: 12px 10px
    }

    .input-wrap span {
        top: 14px
    }

    .note {
        margin-top: 10px !important
    }

    .board {
        padding: 20px 18px 15px
    }

    h2 {
        font-size: clamp(35px, 8vw, 58px)
    }

    .headline-price strong {
        font-size: clamp(32px, 8.5vw, 60px)
    }

    .headline-price>span {
        font-size: clamp(18px, 4.3vw, 28px)
    }

    tbody th {
        font-size: clamp(22px, 5.5vw, 34px)
    }

    td {
        font-size: clamp(30px, 7vw, 46px)
    }

    .formulas {
        grid-column: 1
    }

    .date-pill {
        font-size: 30px
    }

    .table-frame {
        padding: 5px 8px
    }
}

@media print {
    @page {
        size: A4 portrait;
        margin: 12mm
    }

    body {
        background: white
    }

    .workspace {
        display: block;
        padding: 0;
        max-width: 170mm
    }

    .controls,
    .formulas {
        display: none
    }

    .board {
        break-inside: avoid;
        box-shadow: none;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact
    }

    h2 {
        font-size: 58px
    }

    .headline-price strong {
        font-size: 75px
    }

    .headline-price>span {
        font-size: 33px
    }

    tbody th {
        font-size: 35px
    }

    td {
        font-size: 48px
    }
}

.headline-price {
    flex-wrap: nowrap
}

.headline-price>span,
.headline-price strong {
    white-space: nowrap;
    flex-shrink: 0
}