* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;

    background: #05080a;
    color: #e8f1f4;

    font-family:
        Arial,
        Helvetica,
        sans-serif;
}

#topbar {
    height: 72px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 18px;

    background:
        linear-gradient(
            90deg,
            #071017 0%,
            #111015 65%,
            #25100b 100%
        );

    border-bottom:
        1px solid #66311d;
}

.brand-title {
    font-size: 27px;
    font-weight: 800;
    letter-spacing: 2px;
}

.brand-subtitle {
    margin-top: 2px;
    color: #ff9d43;
    font-size: 13px;
}

.top-stats {
    display: flex;
    gap: 25px;

    font-size: 13px;
    color: #b9d0db;
}

.top-stats strong {
    color: #ffb25c;
}

#workspace {
    height:
        calc(100vh - 72px);

    display: grid;

    grid-template-columns:
        290px 1fr 0;
}

#sidebar {
    overflow-y: auto;

    background:
        rgba(
            5,
            17,
            25,
            .98
        );

    border-right:
        1px solid #27414c;
}

#sidebar section {
    padding: 16px;

    border-bottom:
        1px solid #20343d;
}

h2,
h3 {
    margin:
        0 0 10px 0;
}

h2 {
    font-size: 14px;
    color: #ff9d43;
}

h3 {
    font-size: 12px;
    color: #64d9ff;
    letter-spacing: 1px;
}

.intro {
    margin: 0;

    color: #a9c1cc;
    font-size: 12px;
    line-height: 1.55;
}

#sidebar label {
    display: block;

    margin: 9px 0;

    font-size: 12px;
    color: #c9dce4;
}

#sidebar input[type="checkbox"],
#sidebar input[type="radio"] {
    margin-right: 8px;
}

#search {
    width: 100%;

    padding: 10px;

    background: #0d2632;
    color: white;

    border:
        1px solid #305668;

    border-radius: 5px;

    outline: none;
}

#search:focus {
    border-color: #ff9d43;
}

#search-results {
    margin-top: 8px;
}

.search-result {
    padding: 8px;

    margin-top: 5px;

    background: #0d2029;

    border:
        1px solid #27414c;

    border-radius: 4px;

    font-size: 11px;

    cursor: pointer;
}

.search-result:hover {
    border-color: #ff9d43;
}

.counts div {
    display: flex;
    justify-content: space-between;

    padding: 5px 0;

    font-size: 12px;
}

.counts strong {
    color: #ffb25c;
}

.notice {
    color: #839da8;
    font-size: 10px;
    line-height: 1.45;
}

.notice strong {
    color: #ff9d43;
}

#map-wrap {
    position: relative;
    overflow: hidden;
}

#map {
    width: 100%;
    height: 100%;

    background: #020406;
}

.leaflet-container {
    background: #020406;
}

#legend {
    position: absolute;

    right: 14px;
    bottom: 20px;

    z-index: 700;

    width: 190px;

    padding: 10px;

    background:
        rgba(
            4,
            14,
            20,
            .90
        );

    border:
        1px solid #49616a;

    border-radius: 5px;

    font-size: 10px;
}

.gradient {
    height: 12px;

    margin-top: 7px;

    background:
        linear-gradient(
            90deg,
            #2f00ff,
            #006cff,
            #00ffff,
            #ffff00,
            #ff6500,
            #ff0000
        );
}

.legend-scale {
    display: flex;
    justify-content: space-between;

    margin-top: 4px;

    color: #afc3cb;
}

#status {
    position: absolute;

    left: 14px;
    bottom: 15px;

    z-index: 700;

    padding: 7px 10px;

    background:
        rgba(
            4,
            14,
            20,
            .86
        );

    border:
        1px solid #314c57;

    border-radius: 4px;

    color: #b7ccd5;

    font-size: 11px;
}

#drawer {
    position: absolute;

    top: 72px;
    right: 0;
    bottom: 0;

    z-index: 900;

    width: 390px;

    transform:
        translateX(100%);

    transition:
        transform .2s ease;

    overflow-y: auto;

    background:
        rgba(
            4,
            15,
            22,
            .98
        );

    border-left:
        1px solid #4a616b;
}

#drawer.open {
    transform:
        translateX(0);
}

#drawer-close {
    position: absolute;

    top: 10px;
    right: 12px;

    width: 34px;
    height: 34px;

    border: 0;

    border-radius: 4px;

    color: white;
    background: #422018;

    font-size: 25px;

    cursor: pointer;
}

#drawer-content {
    padding: 55px 20px 30px 20px;
}

.drawer-title {
    color: #ffad58;

    font-size: 21px;
    font-weight: 700;
}

.drawer-grid {
    margin-top: 18px;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 8px;
}

.drawer-field {
    padding: 10px;

    background: #0c2029;

    border:
        1px solid #263f4a;

    border-radius: 4px;
}

.drawer-field span {
    display: block;

    margin-bottom: 4px;

    color: #7996a2;

    font-size: 9px;

    text-transform: uppercase;
}

.drawer-field strong {
    font-size: 12px;
}

.status-badges {
    display: flex;
    flex-wrap: wrap;

    gap: 5px;

    margin-top: 13px;
}

.badge {
    padding: 5px 7px;

    border-radius: 3px;

    background: #263139;

    color: #d9e6eb;

    font-size: 10px;
}

.badge.hot {
    background: #6b2416;
    color: #ffd0a6;
}

.well-dot {
    border:
        1px solid rgba(
            255,
            255,
            255,
            .75
        );

    border-radius: 50%;

    background: #ff632c;
}

@media (
    max-width: 900px
) {

    #workspace {
        grid-template-columns:
            230px 1fr;
    }

    .top-stats {
        display: none;
    }

    #drawer {
        width: 330px;
    }
}



/* ============================================================
   GEOTHERMAL ENERGY FOR AI DATA CENTERS - FEATURED BOOK
   ============================================================ */

.geo-book-panel {
    margin: 14px;
    padding: 14px;
    border: 1px solid rgba(255, 138, 40, 0.55);
    border-radius: 8px;

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(255, 89, 0, 0.18),
            transparent 45%
        ),
        linear-gradient(
            145deg,
            rgba(20, 25, 29, 0.98),
            rgba(7, 13, 17, 0.98)
        );

    box-shadow:
        0 0 18px rgba(255, 91, 0, 0.08),
        inset 0 0 20px rgba(255, 120, 0, 0.025);

    color: #d9e8ef;
}

.geo-book-heading {
    display: flex;
    gap: 9px;
    align-items: center;

    padding-bottom: 10px;
    margin-bottom: 11px;

    border-bottom: 1px solid rgba(255,255,255,0.09);
}

.geo-book-icon {
    font-size: 24px;
}

.geo-book-label {
    color: #ff9a32;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.2px;
}

.geo-book-title {
    color: #ffffff;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.25;
    margin-top: 2px;
}

.geo-book-body {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.geo-book-cover-wrap {
    position: relative;
    flex: 0 0 92px;
    min-height: 135px;

    border: 1px solid rgba(255, 140, 55, 0.4);
    border-radius: 4px;

    overflow: hidden;
    background:
        radial-gradient(
            circle at 50% 75%,
            #ff6a00,
            #5e210d 35%,
            #101820 68%
        );
}

.geo-book-cover {
    display: block;
    width: 100%;
    height: auto;
}

.geo-book-cover-placeholder {
    position: absolute;
    inset: 0;

    display: none;
    align-items: center;
    justify-content: center;

    padding: 10px;

    color: white;
    text-align: center;

    font-size: 11px;
    font-weight: 900;
    line-height: 1.3;
}

.geo-book-cover-placeholder span {
    color: #ffb04b;
    font-size: 9px;
}

.geo-book-cover-wrap.missing-cover
.geo-book-cover-placeholder {
    display: flex;
    flex-direction: column;
}

.geo-book-copy {
    min-width: 0;
    flex: 1;
}

.geo-book-subtitle {
    color: #ffae51;
    font-size: 11px;
    line-height: 1.35;
    font-weight: 700;

    margin-bottom: 8px;
}

.geo-book-copy p {
    color: #b9ccd5;
    font-size: 10px;
    line-height: 1.45;
    margin: 0 0 8px 0;
}

.geo-book-copy .geo-book-map-note {
    color: #8fa8b4;
}

.geo-book-amazon {
    display: inline-block;

    margin-top: 3px;
    padding: 8px 10px;

    border: 1px solid #ff8a27;
    border-radius: 4px;

    background:
        linear-gradient(
            180deg,
            #ff9b36,
            #d85d00
        );

    color: #071016 !important;

    text-decoration: none !important;

    font-size: 10px;
    font-weight: 900;
    letter-spacing: .3px;

    box-shadow:
        0 0 12px rgba(255, 112, 0, 0.22);
}

.geo-book-amazon:hover {
    filter: brightness(1.13);
    transform: translateY(-1px);
}


/* If sidebar is narrow, stack book cover and text cleanly */

@media (max-width: 900px) {

    .geo-book-body {
        flex-direction: column;
    }

    .geo-book-cover-wrap {
        width: 115px;
        flex-basis: auto;
    }

}