:root {
    --market-ink: #15201c;
    --market-muted: #59645f;
    --market-line: #d8e0dc;
    --market-panel: #f5f8f6;
    --market-dark: #101815;
    --market-green: #1d7a4f;
    --market-red: #a43d45;
    --market-gold: #b0872f;
    --market-code-bg: #18212b;
    --market-code-fg: #edf4f8;
}

body {
    background: #e9eeeb;
    color: var(--market-ink);
}

.market-main {
    width: min(1080px, calc(100% - 32px));
    margin: 0 auto;
    background: #ffffff;
    min-height: 100vh;
    box-shadow: 0 0 32px rgba(0, 0, 0, 0.22);
}

.market-hero,
.market-section {
    padding: 56px clamp(22px, 6vw, 72px);
}

.market-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
    gap: 36px;
    align-items: center;
    border-bottom: 1px solid var(--market-line);
    background:
        linear-gradient(135deg, rgba(29, 122, 79, 0.14), rgba(255, 255, 255, 0) 46%),
        linear-gradient(315deg, rgba(164, 61, 69, 0.1), rgba(255, 255, 255, 0) 34%),
        #ffffff;
}

.market-kicker {
    margin: 0 0 14px;
    color: var(--market-green);
    font: 600 0.86rem/1.4 'Poppins', Verdana, sans-serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.market-hero h1 {
    margin: 0;
    color: var(--market-ink);
    font: 700 clamp(2.2rem, 7vw, 4.6rem)/1.02 'Raleway', Verdana, sans-serif;
    letter-spacing: 0;
}

.market-subtitle {
    max-width: 700px;
    margin: 24px 0 0;
    color: var(--market-muted);
    font: 400 1.12rem/1.75 'Poppins', Verdana, sans-serif;
}

.market-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 30px;
}

.market-button,
.market-secondary-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 18px;
    border-radius: 6px;
    font: 600 0.96rem/1 'Poppins', Verdana, sans-serif;
    text-align: center;
}

.market-button {
    background: var(--market-green);
    color: #ffffff;
}

.market-secondary-link {
    border: 1px solid var(--market-line);
    color: var(--market-green);
    background: #ffffff;
}

.order-book-panel {
    padding: 18px;
    border: 1px solid rgba(21, 32, 28, 0.12);
    border-radius: 8px;
    background: var(--market-dark);
    box-shadow: 0 18px 40px rgba(16, 24, 21, 0.24);
    color: #eef7f2;
    font: 500 0.95rem/1.35 'Poppins', Verdana, sans-serif;
}

.book-header,
.book-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 18px;
    align-items: center;
}

.book-header {
    margin-bottom: 14px;
    color: #aebbb5;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.book-header span:last-child {
    grid-column: span 2;
    text-align: right;
}

.book-side {
    display: grid;
    gap: 8px;
}

.book-row {
    padding: 10px 12px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.06);
}

.book-row strong {
    min-width: 48px;
    text-align: right;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.book-row span:last-child {
    min-width: 34px;
    text-align: right;
}

.ask .book-row {
    border-left: 3px solid var(--market-red);
}

.bid .book-row {
    border-left: 3px solid var(--market-green);
}

.book-row.best {
    background: rgba(255, 255, 255, 0.12);
}

.spread-line {
    margin: 14px 0;
    padding: 10px 12px;
    border-radius: 6px;
    color: #f6e4aa;
    background: rgba(176, 135, 47, 0.16);
    font-size: 0.84rem;
}

.market-section + .market-section {
    border-top: 1px solid var(--market-line);
}

.market-section h2 {
    margin: 0 0 18px;
    color: var(--market-ink);
    font: 700 2rem/1.15 'Raleway', Verdana, sans-serif;
}

.market-section h3 {
    margin: 0 0 10px;
    color: var(--market-ink);
    font: 700 1.25rem/1.25 'Raleway', Verdana, sans-serif;
}

.market-section p {
    max-width: 780px;
    color: var(--market-muted);
    font: 400 1rem/1.75 'Poppins', Verdana, sans-serif;
}

.market-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
    gap: 28px;
    align-items: start;
}

.market-note {
    padding: 20px;
    border: 1px solid var(--market-line);
    border-radius: 8px;
    background: var(--market-panel);
}

.market-note p {
    margin-bottom: 0;
}

.market-code {
    overflow-x: auto;
    margin: 24px 0;
    padding: 20px;
    border-radius: 8px;
    background: var(--market-code-bg);
    color: var(--market-code-fg);
    font: 400 0.92rem/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.market-code code {
    font: inherit;
}

.market-code[class*="language-"],
.market-code code[class*="language-"] {
    background: var(--market-code-bg);
    color: var(--market-code-fg);
    text-shadow: none;
}

@media (max-width: 820px) {
    .market-main {
        width: 100%;
        box-shadow: none;
    }

    .market-hero,
    .market-section {
        padding: 40px 20px;
    }

    .market-hero,
    .market-split {
        grid-template-columns: 1fr;
    }

    .market-actions {
        flex-direction: column;
        align-items: stretch;
    }
}