:root {
    --bg:#fff5f8;
    --panel:#fff;
    --panel-2:#fce7f0;
    --line:rgba(255,190,230,.2);
    --text:#492538;
    --muted:#86586c;
    --yellow:#ec168c;
    --yellow-2:#ff4da8;
    --black:#fff;
    --radius:8px;
    --page:1280px;
}

* {
    box-sizing:border-box;
}

html,
body {
    margin:0;
    padding:0;
    background:var(--bg);
    color:var(--text);
    font-family:Arial,"Microsoft YaHei",sans-serif;
}

a {
    color:inherit;
    text-decoration:none;
}

button,
input {
    font:inherit;
}

img {
    display:block;
    width:100%;
}

body {
    min-width:320px;
}

.site-header {
    position:sticky;
    top:0;
    z-index:100;
    background:#fff0f6;
    border-bottom:1px solid rgba(255,190,230,.2);
}

.topbar {
    width:min(var(--page),calc(100% - 28px));
    min-height:64px;
    margin:auto;
    display:flex;
    align-items:center;
    gap:18px;
}

.brand {
    display:flex;
    align-items:center;
    gap:8px;
    flex:0 0 auto;
}

.brand-badge {
    background:var(--yellow);
    color:#fff;
    font-weight:900;
    font-size:22px;
    padding:6px 9px;
    border-radius:4px;
    letter-spacing:-1px;
}

.brand-name {
    font-size:20px;
    font-weight:800;
}

.search-box {
    flex:1;
    max-width:620px;
    display:flex;
    height:38px;
}

.search-box input {
    flex:1;
    min-width:0;
    border:1px solid #3a3a3a;
    border-right:0;
    border-radius:5px 0 0 5px;
    background:#fff;
    color:#fff;
    border-color:#f2cddd;
    padding:0 13px;
    outline:none;
}

.search-box button {
    width:52px;
    border:0;
    border-radius:0 5px 5px 0;
    background:var(--yellow);
    color:#fff;
    font-size:18px;
    font-weight:900;
    cursor:pointer;
}

.header-actions {
    margin-left:auto;
    display:flex;
    align-items:center;
    gap:8px;
}

.header-btn {
    height:36px;
    padding:0 13px;
    border:1px solid #333;
    border-radius:5px;
    background:#fff;
    color:#fff;
    cursor:pointer;
}

.header-btn.primary {
    border-color:var(--yellow);
    background:var(--yellow);
    color:#fff;
    font-weight:800;
}

.navbar {
    background:#fff0f6;
    border-top:1px solid rgba(255,190,230,.14);
}

.nav-inner {
    width:min(var(--page),calc(100% - 28px));
    min-height:42px;
    margin:auto;
    display:flex;
    align-items:center;
    gap:4px;
    overflow-x:auto;
    scrollbar-width:none;
}

.nav-inner::-webkit-scrollbar {
    display:none;
}

.nav-link {
    flex:0 0 auto;
    padding:11px 14px;
    color:#fff;
    font-size:14px;
    font-weight:700;
}

.nav-link:hover,
.nav-link.active {
    color:#fff;
    background:var(--yellow);
}

@media(max-width:820px) {
    .topbar {
        flex-wrap:wrap;
        padding:10px 0;
    }

    .search-box {
        order:3;
        max-width:none;
        flex-basis:100%;
    }
}

@media(max-width:560px) {
    .header-actions .header-btn:not(.primary) {
        display:none;
    }

    .brand-name {
        display:none;
    }

    .nav-inner {
        width:calc(100% - 20px);
    }
}