:root {
    --ink: #17251f;
    --muted: #728078;
    --cream: #f8f7f2;
    --line: #e8e9e2;
    --green: #1c5144;
    --lime: #cbdf68;
    --orange: #e68745;
}
* {
    box-sizing: border-box;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Playpen Sans", cursive;
    color: #222;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 15px;
}

body {
    margin: 0;
    font-family: "Inter", sans-serif;
    color: var(--ink);
    background: var(--cream);
}
.auth-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 52% 48%;
}
.auth-story {
    background: #174c41;
    color: #fff;
    position: relative;
    overflow: hidden;
    padding: 44px clamp(38px, 7vw, 100px);
    display: flex;
    flex-direction: column;
}
.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.06em;
    z-index: 2;
}
.brand small {
    display: block;
    color: #b9d1c6;
    font-size: 8px;
    letter-spacing: 0.28em;
    margin-top: 2px;
}
.brand-mark {
    width: 36px;
    height: 36px;
    border: 1px solid #a9cdbb;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: "Playpen Sans", cursive, cursive;
    font-size: 22px;
    color: #e6e9af;
}
.mountain-art {
    position: absolute;
    inset: 0;
    opacity: 0.35;
    background:
        radial-gradient(circle at 78% 22%, #e7d56b 0 4%, transparent 4.3%),
        linear-gradient(
            155deg,
            transparent 48%,
            #83a997 48.2% 54%,
            transparent 54.2%
        ),
        linear-gradient(
            25deg,
            transparent 54%,
            #4b7869 54.2% 68%,
            transparent 68.2%
        );
}
.mountain-art i {
    position: absolute;
    background: #245d50;
    transform: rotate(35deg);
    width: 55vw;
    height: 26vw;
    bottom: 8%;
    right: -28%;
}
.mountain-art i:nth-child(2) {
    background: #2a6959;
    transform: rotate(-27deg);
    right: 20%;
    bottom: -9%;
}
.mountain-art i:nth-child(3) {
    background: #123f35;
    transform: rotate(28deg);
    right: -15%;
    bottom: -23%;
}
.story-copy {
    position: relative;
    z-index: 1;
    margin: auto 0 55px;
}
.eyebrow {
    font-size: 13px;
    font-weight: 700;
    color: #f25a29;
    margin: 0 0 15px;
}
.story-copy .eyebrow {
    color: #c4dc91;
}
.story-copy h1 {
    font:
        600 clamp(42px, 5vw, 70px)/1.05 "Playpen Sans",
        cursive,
        cursive;
    letter-spacing: -0.04em;
    margin: 0 0 22px;
}
.story-copy h1 em {
    color: #e6dc86;
    font-style: italic;
}
.story-copy > p:last-child {
    max-width: 390px;
    color: #d2e1db;
    font-size: 16px;
    line-height: 1.6;
}
.location-pill {
    position: relative;
    z-index: 1;
    border-top: 1px solid #5f8b7d;
    padding-top: 24px;
    color: #d8e4d3;
    font-size: 13px;
}
.location-pill span {
    color: #d9db83;
    margin-right: 8px;
}
.login-panel {
    display: grid;
    place-items: center;
    padding: 36px;
}
.login-card {
    width: min(100%, 410px);
}
.mobile-brand {
    display: none;
}
.login-card h2 {
    font:
        600 35px/1.15 "Playpen Sans",
        cursive,
        cursive;
    letter-spacing: -0.03em;
    margin: 0 0 12px;
}
.muted {
    color: var(--muted);
    font-size: 14px;
    margin: 0 0 36px;
    line-height: 1.5;
}
form label {
    font-size: 12px;
    font-weight: 700;
    display: block;
    margin: 20px 0 8px;
}
.field {
    height: 52px;
    border: 1px solid #dfe3dc;
    border-radius: 10px;
    background: #fff;
    display: flex;
    align-items: center;
    padding: 0 14px;
    transition: 0.2s;
}
.field:focus-within {
    border-color: #5a8d76;
    box-shadow: 0 0 0 3px #dcece2;
}
.field > span {
    color: #85958c;
    width: 23px;
}
.field input {
    border: 0;
    outline: 0;
    width: 100%;
    font: 14px "DM Sans";
    color: var(--ink);
    background: transparent;
}
.eye {
    border: 0;
    background: none;
    color: #829187;
    cursor: pointer;
    font-size: 16px;
}
.form-error {
    color: #b84232;
    font-size: 12px;
    margin: 12px 0 0;
}
.sign-in {
    width: 100%;
    border: 0;
    background: var(--green);
    color: white;
    border-radius: 9px;
    height: 53px;
    margin-top: 30px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: 0.2s;
}
.sign-in:hover {
    background: #123d33;
}
.sign-in span {
    font-size: 20px;
    margin-left: 8px;
}
.secure-note {
    text-align: center;
    color: #91a098;
    font-size: 11px;
    margin-top: 22px;
}
.dashboard-layout {
    min-height: 100vh;
    display: flex;
}
.sidebar {
    width: 230px;
    background: #000000;
    color: white;
    padding: 30px 18px;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}
.sidebar nav {
    margin-top: 56px;
    display: grid;
    gap: 7px;
}
.sidebar nav a {
    color: #bcd1c7;
    text-decoration: none;
    padding: 12px 13px;
    border-radius: 8px;
    font-size: 14px;
    display: flex;
    gap: 12px;
    align-items: center;
}
.sidebar nav a b {
    font-size: 17px;
    font-weight: 400;
    width: 17px;
    text-align: center;
}
.sidebar nav a span {
    margin-left: auto;
    background: #d9e978;
    color: #244c42;
    padding: 2px 7px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
}
.sidebar nav a.active, .sidebar nav a:hover {
    color: #fff;
    background: #f25a29;
}
.sidebar-bottom {
    margin-top: auto;
    border-top: 1px solid #417264;
    padding: 20px 11px 0;
    font-size: 12px;
}
.sidebar-bottom p {
    color: #91aea3;
    margin: 0 0 5px;
}
.sidebar-bottom > a {
    color: #d5e79a;
    text-decoration: none;
}
.sidebar-bottom form {
    margin-top: 21px;
}
.sidebar-bottom button {
    border: 0;
    background: transparent;
    color: #c1d4cb;
    padding: 0;
    font: 13px "DM Sans";
    cursor: pointer;
}
.dashboard-main {
    width: calc(100% - 230px);
    padding: 30px clamp(20px, 4vw, 20px);
    max-width: 1600px;
}
.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
}
.dashboard-header h1 {
    font:
        600 27px "Playpen Sans",
        cursive,
        cursive;
    margin: 0;
    letter-spacing: -0.03em;
}
.dashboard-header h1 span {
    color: #f25a29;
}
.profile {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
}
.profile small {
    display: block;
    color: var(--muted);
    margin-top: 3px;
}
.avatar {
    width: 38px;
    height: 38px;
    background: #f25a29;
    color: #ffffff;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 13px;
    font-weight: 700;
}
.menu-toggle {
    display: none;
}
.hero-card {
    min-height: 234px;
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    background: #e4eadb;
    padding: 34px 38px;
}
.hero-card h2 {
    font:
        600 30px/1.1 "Playpen Sans",
        cursive,
        cursive;
    margin: 0 0 13px;
    letter-spacing: -0.03em;
}
.hero-card > div:first-child > p:not(.eyebrow) {
    color: #63746b;
    font-size: 13px;
    line-height: 1.5;
    margin: 0 0 19px;
}
.hero-card a {
    color: #205345;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}
.hero-card a span {
    font-size: 18px;
    margin-left: 4px;
}
.sun {
    position: absolute;
    right: 22%;
    top: 20%;
    width: 66px;
    height: 66px;
    border-radius: 50%;
    background: #f0c567;
}
.hero-mountains {
    position: absolute;
    inset: 0 0 0 45%;
    background: linear-gradient(142deg, transparent 42%, #f25a29 42.4% 56%, transparent 56.3%), linear-gradient(28deg, transparent 50%, #ffb300 50.3% 70%, transparent 70.3%), linear-gradient(154deg, transparent 58%, #f25a29 58.2% 77%, transparent 77.2%);
}
.stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin: 23px 0;
}
.stats article,
.panel {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
}
.stats article {
    padding: 19px;
}
.stat-icon {
    float: right;
    width: 33px;
    height: 33px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    font-weight: 700;
}
.amber {
    background: #fff0d5;
    color: #d38d32;
}
.teal {
    background: #dcefea;
    color: #277260;
}
.blue {
    background: #e5eff7;
    color: #4380a6;
}
.violet {
    background: #eee9f6;
    color: #7760a4;
}
.stats p {
    color: var(--muted);
    font-size: 12px;
    margin: 23px 0 6px;
}
.stats h3 {
    font-size: 23px;
    margin: 0;
}
.stats h3 small {
    font-size: 10px;
    color: #35936b;
    margin-left: 5px;
}
.stats h3 .neutral {
    color: #4b8baa;
}
.stats em {
    font-size: 10px;
    color: #9aa69e;
    font-style: normal;
}
.content-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}
.panel {
    padding: 23px;
}
.panel-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 13px;
}
.panel-heading h2 {
    font:
        600 20px "Playpen Sans",
        cursive,
        cursive;
    margin: 0;
}
.panel-heading a {
    color: #2d7160;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}
.booking-row {
    display: grid;
    grid-template-columns: 76px 1fr auto 20px;
    gap: 12px;
    align-items: center;
    border-top: 1px solid #edf0eb;
    padding: 17px 0;
    font-size: 12px;
}
.time {
    font-weight: 700;
}
.time small,
.route small {
    display: block;
    color: #8a968f;
    font-size: 10px;
    margin-top: 3px;
}
.route b {
    font-size: 12px;
}
.route b span {
    color: #6f9b86;
    margin: 0 3px;
}
.status {
    font-size: 10px;
    padding: 5px 8px;
    border-radius: 6px;
    font-weight: 700;
}
.confirmed {
    color: #267b5f;
    background: #e0f2e8;
}
.pending {
    color: #b87a2d;
    background: #fff0d9;
}
.booking-row button {
    border: 0;
    background: none;
    cursor: pointer;
    color: #829088;
}
.trip-map {
    height: 142px;
    border-radius: 9px;
    background: #eaf0e6;
    position: relative;
    overflow: hidden;
    background-image:
        linear-gradient(
            115deg,
            transparent 42%,
            #d3e0d2 42.5% 44%,
            transparent 44.5%
        ),
        linear-gradient(
            55deg,
            transparent 35%,
            #d5e3d2 35.5% 37%,
            transparent 37.5%
        );
}
.map-line {
    position: absolute;
    width: 77%;
    height: 70px;
    border-bottom: 3px dashed #5c9180;
    transform: rotate(-13deg);
    left: 10%;
    top: 26px;
}
.pin {
    position: absolute;
    color: #d37644;
    font-size: 19px;
}
.pin.start {
    left: 11%;
    bottom: 24px;
}
.pin.end {
    right: 10%;
    top: 26px;
}
.car {
    position: absolute;
    left: 49%;
    top: 53px;
    font-size: 23px;
}
.map-label {
    position: absolute;
    color: #789087;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.1em;
}
.map-label.one {
    left: 10%;
    bottom: 11px;
}
.map-label.two {
    right: 7%;
    top: 13px;
}
.trip-info {
    padding-top: 15px;
    display: flex;
    justify-content: space-between;
    font-size: 12px;
}
.trip-info small {
    display: block;
    color: #89978f;
    font-size: 10px;
    margin-top: 4px;
}
.live-dot {
    color: #2c9b72;
    font-size: 11px;
    font-weight: 700;
}
@media (max-width: 900px) {
    .auth-shell {
        grid-template-columns: 43% 57%;
    }
    .auth-story {
        padding: 35px;
    }
    .dashboard-main {
        padding: 30px 24px;
    }
    .stats {
        grid-template-columns: repeat(2, 1fr);
    }
    .content-grid {
        grid-template-columns: 1fr;
    }
    .sidebar {
        width: 210px;
    }
    .dashboard-main {
        width: calc(100% - 210px);
    }
}
@media (max-width: 680px) {
    .auth-shell {
        display: block;
    }
    .auth-story {
        display: none;
    }
    .login-panel {
        min-height: 100vh;
        padding: 28px 22px;
        align-items: start;
    }
    .login-card {
        margin-top: 30px;
    }
    .mobile-brand {
        display: flex;
        align-items: center;
        gap: 8px;
        color: #215647;
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 0.08em;
        margin-bottom: 65px;
    }
    .mobile-brand .brand-mark {
        border-color: #518171;
        color: #2b6555;
        width: 32px;
        height: 32px;
    }
    .sidebar {
        position: fixed;
        z-index: 5;
        left: -245px;
        width: 230px;
        height: 100vh;
        transition: 0.25s;
    }
    .sidebar.open {
        left: 0;
    }
    .dashboard-main {
        width: 100%;
        padding: 22px 16px;
    }
    .menu-toggle {
        display: inline-grid;
        place-items: center;
        border: 0;
        background: #e5ede5;
        border-radius: 7px;
        width: 35px;
        height: 35px;
        margin-right: 10px;
    }
    .dashboard-header {
        align-items: flex-start;
    }
    .dashboard-header > div:first-of-type {
        flex: 1;
    }
    .dashboard-header h1 {
        font-size: 22px;
    }
    .profile > div:not(.avatar) {
        display: none;
    }
    .hero-card {
        padding: 27px 23px;
        min-height: 250px;
    }
    .hero-mountains {
        left: 20%;
        opacity: 0.5;
    }
    .sun {
        right: 11%;
        top: 12%;
    }
    .stats {
        gap: 10px;
        margin: 15px 0;
    }
    .stats article {
        padding: 14px;
    }
    .stats p {
        margin-top: 18px;
    }
    .content-grid {
        gap: 14px;
    }
    .panel {
        padding: 17px;
    }
    .booking-row {
        grid-template-columns: 60px 1fr 18px;
    }
    .booking-row .status {
        display: none;
    }
    .trip-panel {
        display: none;
    }
}
@media (max-width: 380px) {
    .stats {
        grid-template-columns: 1fr;
    }
    .profile {
        display: none;
    }
}

/* Inter for regular interface copy; Playpen Sans for every heading. */
.auth-page, .dashboard-page, .auth-page input, .dashboard-page input, .dashboard-page textarea, .dashboard-page select, .dashboard-page button { font-family: "Inter", sans-serif; }
.auth-page h1, .auth-page h2, .auth-page h3, .dashboard-page h1, .dashboard-page h2, .dashboard-page h3, .dashboard-page h4, .dashboard-page h5, .dashboard-page h6 { font-family: "Playpen Sans", cursive !important; }
.auth-page,.dashboard-page{--green:#f25a29;--orange:#f25a29;--lime:#ffd08a}.auth-story{background:linear-gradient(145deg,#152a45 0%,#243c5c 52%,#f25a29 160%)}.auth-story .mountain-art{opacity:.25}.sign-in{background:#f25a29}.sign-in:hover{background:#d9471d}.sidebar{background:linear-gradient(180deg,#14243b 0%,#1c3553 56%,#12263f 100%);box-shadow:8px 0 22px rgba(12,31,54,.12)}.sidebar>.brand{display:none}.sidebar::before{content:"";display:block;width:168px;height:58px;margin:1px 10px 0;background:url("images/logo.svg") left center/contain no-repeat}.sidebar nav a{color:#d8e4ef}.sidebar nav a.active,.sidebar nav a:hover{color:#fff;background:linear-gradient(90deg,#f25a29,#ff8b3d);box-shadow:0 8px 16px rgba(242,90,41,.22)}.sidebar nav a span{color:#8d361d;background:#ffd16b}.sidebar-bottom{border-color:rgba(255,255,255,.15)}.sidebar-bottom p{color:#9fb5c9}.sidebar-bottom>a{color:#ffd08a}.sidebar-bottom button{color:#d8e4ef}.new-blog-btn,.editor-actions .new-blog-btn{background:#f25a29}.new-blog-btn:hover,.editor-actions .new-blog-btn:hover{background:#d9471d}.back-link{color:#e95727}.dashboard-header h1 span{color:#f25a29}.hero-card{background:#fff1e8}.hero-card a{color:#d84a20}.hero-mountains{filter:hue-rotate(-25deg) saturate(.7)}.stats h3 small{color:#e95727}.stats h3 .neutral{color:#e95727}.confirmed{color:#bd4d25;background:#fff0e8}.live-dot{color:#e95727}.teal{color:#d84a20;background:#fff0e6}.dashboard-page .profile .avatar{color:#fff;background:linear-gradient(135deg,#f25a29,#ff9a4d)}