/* ============================================================
   Global Base and Shared Page Layout
   ============================================================ */

:root {
    --kw-black: #080808;
    --kw-green: #007a3d;
    --kw-green-soft: rgba(0, 122, 61, 0.16);
    --kw-red: #ce1126;
    --kw-red-soft: rgba(206, 17, 38, 0.14);
    --gold: #d4af37;
    --gold-bright: #f4d36e;
    --text-main: #ffffff;
    --text-muted: #c7c7c7;
    --panel-border: rgba(212, 175, 55, 0.12);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    overflow-x: hidden;
}

body {
    background:
        radial-gradient(circle at top left, rgba(0, 122, 61, 0.11), transparent 34%),
        radial-gradient(circle at top right, rgba(206, 17, 38, 0.075), transparent 30%),
        var(--kw-black);
    color: var(--text-main);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.6;
    min-height: 100vh;
}

a {
    color: var(--gold);
    text-decoration: none;
}

a:hover {
    opacity: 0.84;
}

.container,
.footer-container,
.header-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
}

.silo-main {
    padding: 30px 0;
    min-height: 400px;
}

.silo-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    gap: 20px;
}

.silo-content {
    flex: 1;
    min-width: 0;
}

.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ============================================================
   Enterprise Content Boxes
   ============================================================ */

main.insights-section,
.insights-section {
    max-width: 1200px;
    margin: 32px auto;
    padding: 0 20px;
    color: #eeeeee;
    line-height: 1.65;
}

.insights-section > h1,
main.insights-section > h1 {
    background: linear-gradient(135deg, rgba(0, 122, 61, 0.085), rgba(212, 175, 55, 0.07), rgba(255, 255, 255, 0.018));
    border: 1px solid rgba(212, 175, 55, 0.16);
    border-radius: 12px;
    padding: 22px 24px;
    margin: 0 0 18px;
    color: var(--gold-bright);
    line-height: 1.2;
}

.insights-section > p,
main.insights-section > p,
.insights-section > ul,
.insights-section > ol {
    background: rgba(255, 255, 255, 0.022);
    border: 1px solid rgba(255, 255, 255, 0.065);
    border-radius: 12px;
    padding: 18px 22px;
    margin: 16px 0;
    color: #cfcfcf;
}

.insight-card,
.gold-content-section,
.carat-content-section,
.silo-content,
.calculator-card,
.calc-info,
.city-header,
.city-price-card,
.carat-header,
.carat-main-price,
.carat-info-card,
.carat-currency-table,
.carat-sidebar-widget {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.033), rgba(0, 122, 61, 0.015), rgba(255, 255, 255, 0.012)) !important;
    border: 1px solid var(--panel-border) !important;
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.16);
    position: relative;
    overflow: hidden;
}

.insight-card::before,
.gold-content-section::before,
.carat-content-section::before,
.silo-content::before,
.calculator-card::before,
.calc-info::before,
.city-header::before,
.city-price-card::before,
.carat-header::before,
.carat-main-price::before,
.carat-info-card::before,
.carat-currency-table::before,
.carat-sidebar-widget::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, var(--kw-green) 0 34%, rgba(255,255,255,0.86) 34% 66%, var(--kw-red) 66% 100%);
    opacity: 0.82;
    pointer-events: none;
}

.insight-card,
.gold-content-section,
.carat-content-section,
.silo-content,
.calculator-card,
.calc-info {
    padding: 22px;
    margin-top: 18px;
    margin-bottom: 18px;
}

.insight-card h2,
.insight-card h3,
.gold-content-section h1,
.gold-content-section h2,
.carat-content-section h2,
.silo-content h1,
.silo-content h2,
.calc-info h2 {
    color: var(--gold);
    padding-bottom: 10px;
    margin: 0 0 14px;
    border-bottom: 1px solid rgba(212, 175, 55, 0.11);
}

.insight-card p,
.gold-content-section p,
.carat-content-section p,
.silo-content p,
.calc-info p {
    color: var(--text-muted);
    line-height: 1.78;
    max-width: 72ch;
}

.insight-card p + p,
.gold-content-section p + p,
.carat-content-section p + p,
.silo-content p + p,
.calc-info p + p {
    margin-top: 12px;
}

.insight-card ul,
.insight-card ol,
.gold-content-section ul,
.gold-content-section ol,
.carat-content-section ul,
.carat-content-section ol,
.silo-content ul,
.silo-content ol {
    margin: 12px 0 0 20px;
    color: #cfcfcf;
}

.city-page,
.calculator-page,
.carat-page {
    width: min(1200px, calc(100% - 32px));
    margin-left: auto;
    margin-right: auto;
}

/* ============================================================
   Shared Data and Analysis UI
   ============================================================ */

.insight-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.insight-grid .insight-card {
    margin-bottom: 0;
}

.insights-section table,
.insight-card table {
    width: 100%;
    border-collapse: collapse;
    text-align: start;
    min-width: 500px;
}

.insights-section th,
.insights-section td,
.insight-card th,
.insight-card td {
    padding: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    white-space: nowrap;
}

.insights-section caption {
    text-align: start;
    font-weight: 600;
    padding: 10px 0;
}

.insights-section td small {
    display: block;
    color: #aaaaaa;
    font-size: .74rem;
}

.rate-up {
    color: #5de58a;
}

.rate-down {
    color: #ff8282;
}

.range-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.range-stats dt {
    color: #aaaaaa;
}

.range-stats dd {
    margin: 0;
    color: #eeeeee;
    font-size: 1.25rem;
}

.insight-note {
    font-size: .84rem;
    color: #bbbbbb;
}

.estimator-fields {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.estimator-fields label,
.chart-controls label {
    display: flex;
    flex-direction: column;
    gap: 7px;
    font-size: .87rem;
}

.gold-estimator input,
.gold-estimator select,
.chart-controls select,
.insights-section input,
.insights-section button {
    padding: 12px;
    border: 1px solid #66572e;
    border-radius: 6px;
    background: #222222;
    color: #ffffff;
    font: inherit;
    max-width: 100%;
}

.gold-estimator output {
    display: block;
    font-size: 1.1rem;
    color: #f2d278;
    margin: 20px 0;
}

.chart-controls {
    display: flex;
    gap: 20px;
}

.rate-status-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.gold-estimator input:focus-visible,
.gold-estimator select:focus-visible,
.chart-controls select:focus-visible {
    outline: 2px solid #e4c76b;
    outline-offset: 3px;
}

.insights-section pre {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    background: #141414;
    padding: 14px;
    border-radius: 8px;
}

@media (max-width: 768px) {
    .silo-container {
        flex-direction: column;
        gap: 16px;
    }

    .insight-grid {
        grid-template-columns: 1fr;
    }

    .estimator-fields {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 640px) {
    main.insights-section,
    .insights-section {
        margin: 20px auto;
        padding: 0 14px;
    }

    .insights-section > h1,
    main.insights-section > h1,
    .insight-card,
    .gold-content-section,
    .carat-content-section,
    .silo-content,
    .calculator-card,
    .calc-info {
        padding: 16px;
    }

    .chart-controls {
        gap: 12px;
        flex-wrap: wrap;
    }
}

@media (max-width: 420px) {
    .estimator-fields {
        grid-template-columns: 1fr;
    }
}