* {
    box-sizing:border-box
}

body {
    margin:0;
    background:#f6f7fb;
    color:#172033;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif
}

.app {
    max-width:760px;
    margin:0 auto;
    padding:18px 16px 86px
}

.hero {
    display:grid;
    grid-template-columns:1.15fr .85fr;
    gap:14px;
    align-items:center;
    padding:20px;
    border-radius:28px;
    background:linear-gradient(135deg,#111827,#334155);
    color:white;
    overflow:hidden;
    box-shadow:0 18px 45px rgba(17,24,39,.18)
}

.hero h1 {
    font-size:26px;
    line-height:1.18;
    margin:12px 0 8px
}

.hero p {
    opacity:.82;
    margin:0 0 16px
}

.hero img {
    width:100%;
    height:190px;
    object-fit:cover;
    border-radius:22px
}

.pill {
    display:inline-block;
    padding:7px 10px;
    border-radius:999px;
    background:rgba(255,255,255,.14);
    font-size:12px
}

.btn,button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:0;
    border-radius:14px;
    padding:11px 16px;
    background:#ff6b35;
    color:#fff;
    font-weight:700;
    text-decoration:none;
    box-shadow:0 10px 22px rgba(255,107,53,.24);
    cursor:pointer
}

.btn.ghost {
    background:rgba(255,255,255,.16);
    box-shadow:none
}

.ghost-dark {
    background:#111827;
    box-shadow:none
}

.wide {
    width:100%
}

.actions {
    display:flex;
    gap:10px;
    flex-wrap:wrap
}

.quick-grid,.grid,.mine-grid {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
    margin:16px 0
}

.quick-grid {
    grid-template-columns:repeat(3,1fr)
}

.quick-grid a,.tile,.mine-grid a,.panel,.profile,.login-card {
    background:white;
    border-radius:24px;
    padding:18px;
    text-decoration:none;
    color:#172033;
    box-shadow:0 10px 28px rgba(15,23,42,.06);
    border:1px solid rgba(15,23,42,.04)
}

.quick-grid a {
    text-align:center;
    font-weight:800
}

.tile b,.mine-grid b {
    display:block;
    margin-bottom:6px
}

.tile span,.mine-grid span,.muted,small {
    color:#667085;
    font-size:13px
}

.panel {
    margin:16px 0
}

.panel h2 {
    margin:0 0 14px
}

.section-title {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:14px
}

.section-title h2 {
    margin:0
}

.section-title a {
    color:#ff6b35;
    text-decoration:none;
    font-weight:700
}

.products {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px
}

.products div,.products a {
    background:#fafafa;
    border-radius:18px;
    padding:10px;
    text-decoration:none;
    color:#172033
}

.products img {
    width:100%;
    height:112px;
    object-fit:cover;
    border-radius:14px
}

.products b,.products span {
    display:block;
    margin-top:8px
}

.products span,.price {
    color:#ff6b35;
    font-weight:800
}

.products form,.plans form {
    margin-top:10px
}

.products button,.plans button {
    width:100%;
    cursor:pointer
}

.bottom {
    position:fixed;
    left:50%;
    bottom:12px;
    transform:translateX(-50%);
    width:min(728px,calc(100% - 24px));
    height:64px;
    background:rgba(255,255,255,.92);
    backdrop-filter:blur(16px);
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:6px;
    padding:8px;
    border-radius:22px;
    box-shadow:0 18px 50px rgba(15,23,42,.16)
}

.bottom a {
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:16px;
    text-decoration:none;
    color:#667085;
    font-weight:700
}

.bottom a.on {
    background:#172033;
    color:white
}

.profile {
    display:flex;
    gap:16px;
    align-items:center
}

.profile img {
    width:76px;
    height:76px;
    border-radius:24px;
    object-fit:cover
}

.form {
    display:grid;
    gap:12px
}

.form input,.form textarea,.login-card input {
    width:100%;
    border:1px solid #e5e7eb;
    border-radius:16px;
    padding:13px 14px;
    font:inherit;
    background:#fff
}

.form textarea {
    min-height:110px
}

.login-card {
    max-width:430px;
    margin:12vh auto;
    padding:26px
}

.brand {
    font-size:26px;
    font-weight:900
}

.tabs,.plans,.message-menu {
    display:grid;
    gap:10px
}

.tabs a,.plans button,.message-menu a {
    padding:14px;
    border-radius:16px;
    background:#f6f7fb;
    color:#172033;
    text-decoration:none;
    font-weight:700;
    box-shadow:none
}

.plans button {
    display:flex;
    justify-content:space-between;
    background:#111827;
    color:white
}

.message-menu span {
    display:block;
    color:#667085;
    font-size:13px;
    margin-top:4px
}

.chat p,.list p,.order-card {
    background:#f8fafc;
    border-radius:16px;
    padding:12px;
    text-decoration:none;
    color:#172033
}

.empty {
    color:#667085;
    background:#f8fafc;
    padding:18px;
    border-radius:16px
}

.list {
    display:grid;
    gap:10px
}

.list p,.order-card {
    display:flex;
    justify-content:space-between;
    gap:12px
}

.list span,.order-card span {
    color:#667085
}

.status-tabs,.category-tabs {
    display:flex;
    gap:8px;
    overflow:auto;
    margin:8px 0 14px
}

.status-tabs span,.category-tabs span {
    white-space:nowrap;
    background:#f1f5f9;
    border-radius:999px;
    padding:8px 12px;
    font-weight:700;
    color:#475569
}

.calendar {
    display:grid;
    grid-template-columns:repeat(7,1fr);
    gap:8px;
    margin:16px 0
}

.calendar span {
    height:42px;
    border-radius:14px;
    background:#f1f5f9;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:900
}

.calendar .done {
    background:#ff6b35;
    color:white
}

.steps {
    display:grid;
    gap:10px
}

.steps p {
    display:flex;
    gap:12px;
    align-items:center
}

.steps b {
    width:30px;
    height:30px;
    border-radius:50%;
    background:#111827;
    color:white;
    display:flex;
    align-items:center;
    justify-content:center
}

.goods-detail img {
    width:100%;
    height:260px;
    object-fit:cover;
    border-radius:28px;
    margin-bottom:14px
}

.detail p {
    display:flex;
    justify-content:space-between;
    border-bottom:1px solid #eef2f7;
    padding:12px 0
}

.faq details {
    background:#f8fafc;
    border-radius:16px;
    padding:14px;
    margin:10px 0
}

.faq summary {
    font-weight:800
}

@media(max-width:560px) {
    .hero {
        grid-template-columns:1fr
    }

    .hero img {
        height:150px
    }

    .products {
        grid-template-columns:1fr
    }

    .hero h1 {
        font-size:24px
    }

    .quick-grid {
        grid-template-columns:repeat(3,1fr)
    }

    .list p,.order-card {
        display:block
    }

    .plans button {
        display:block;
        text-align:left
    }

}

.avatar-placeholder {
    width:76px;
    height:76px;
    border-radius:24px;
    background:linear-gradient(135deg,#2563eb,#7c3aed);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:30px;
    font-weight:800
}

/* production polish */
body {
    background:radial-gradient(circle at 20% -10%,#dbeafe 0,transparent 32%),linear-gradient(180deg,#f8fafc,#eef2ff 58%,#f8fafc);

}

.panel,.profile,.login-card,.quick-grid a,.tile,.mine-grid a {
    border:1px solid rgba(148,163,184,.18);
    box-shadow:0 16px 45px rgba(15,23,42,.08)
}

.hero {
    background:linear-gradient(135deg,#0f172a 0%,#1d4ed8 52%,#7c3aed 100%);
    box-shadow:0 22px 60px rgba(37,99,235,.22)
}

.btn,button {
    transition:.18s ease
}

.btn:active,button:active {
    transform:translateY(1px) scale(.99)
}

.products a,.products div,.order-card,.list p,.message-menu a,.plans button {
    border:1px solid rgba(148,163,184,.16);
    transition:.18s ease
}

.products a:hover,.message-menu a:hover,.mine-grid a:hover,.quick-grid a:hover {
    transform:translateY(-2px);
    box-shadow:0 16px 36px rgba(15,23,42,.10)
}

input:focus,textarea:focus {
    outline:none;
    border-color:#2563eb!important;
    box-shadow:0 0 0 4px rgba(37,99,235,.10)
}

.bottom {
    border:1px solid rgba(148,163,184,.20)
}

.bottom a.on {
    background:linear-gradient(135deg,#0f172a,#2563eb)
}

.empty {
    text-align:center;
    color:#64748b;
    border:1px dashed #cbd5e1;
    background:rgba(248,250,252,.7)
}

/* richer mobile app visual layer */
body:before {
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    background:radial-gradient(circle at 82% 8%,rgba(255,107,53,.16),transparent 26%),radial-gradient(circle at 8% 42%,rgba(124,58,237,.10),transparent 22%);
    z-index:-1
}

.app:before {
    content:"小宇福利";
    display:block;
    margin:2px 4px 14px;
    font-weight:950;
    font-size:20px;
    letter-spacing:.5px;
    color:#0f172a
}

.hero {
    position:relative;
    min-height:210px;
    border:1px solid rgba(255,255,255,.28)
}

.hero:after {
    content:"";
    position:absolute;
    right:-42px;
    bottom:-58px;
    width:170px;
    height:170px;
    border-radius:50%;
    background:rgba(255,255,255,.10)
}

.hero .pill {
    background:rgba(255,255,255,.20);
    border:1px solid rgba(255,255,255,.24)
}

.quick-grid a {
    position:relative;
    overflow:hidden;
    min-height:82px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center
}

.quick-grid a:before {
    font-size:24px;
    margin-bottom:7px
}

.quick-grid a:nth-child(1):before {
    content:"📅"
}

.quick-grid a:nth-child(2):before {
    content:"🎁"
}

.quick-grid a:nth-child(3):before {
    content:"💎"
}

.quick-grid a:nth-child(4):before {
    content:"🎧"
}

.quick-grid a:nth-child(5):before {
    content:"🧾"
}

.quick-grid a:nth-child(6):before {
    content:"❓"
}

.quick-grid a:after {
    content:"";
    position:absolute;
    right:-24px;
    top:-24px;
    width:58px;
    height:58px;
    border-radius:50%;
    background:linear-gradient(135deg,rgba(37,99,235,.12),rgba(255,107,53,.10))
}

.panel h2,.section-title h2 {
    font-size:20px
}

.products a {
    background:linear-gradient(180deg,#fff,#f8fafc);
    padding:12px
}

.products img {
    height:132px;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.5);
    background:#e2e8f0
}

.products b {
    font-size:15px;
    line-height:1.35
}

.products span,.price {
    display:inline-flex;
    margin-top:8px;
    padding:5px 9px;
    border-radius:999px;
    background:#fff7ed;
    color:#ea580c
}

.profile {
    background:linear-gradient(135deg,#111827,#1d4ed8 58%,#7c3aed);
    color:white;
    position:relative;
    overflow:hidden
}

.profile:after {
    content:"";
    position:absolute;
    right:-34px;
    top:-34px;
    width:120px;
    height:120px;
    border-radius:50%;
    background:rgba(255,255,255,.10)
}

.profile p,.profile .muted {
    color:rgba(255,255,255,.78)
}

.profile .ghost-dark {
    background:rgba(255,255,255,.18);
    border:1px solid rgba(255,255,255,.24)
}

.mine-grid a {
    min-height:96px;
    position:relative;
    overflow:hidden
}

.mine-grid a:before {
    display:block;
    font-size:24px;
    margin-bottom:8px
}

.mine-grid a:nth-child(1):before {
    content:"🪙"
}

.mine-grid a:nth-child(2):before {
    content:"👤"
}

.mine-grid a:nth-child(3):before {
    content:"📦"
}

.mine-grid a:nth-child(4):before {
    content:"🛍️"
}

.mine-grid a:nth-child(5):before {
    content:"🛎️"
}

.mine-grid a:nth-child(6):before {
    content:"🛠️"
}

.order-card {
    border-left:4px solid #2563eb
}

.message-menu a {
    position:relative;
    padding-left:52px
}

.message-menu a:before {
    position:absolute;
    left:17px;
    top:17px;
    font-size:22px
}

.message-menu a:nth-child(1):before {
    content:"🔔"
}

.message-menu a:nth-child(2):before {
    content:"🎫"
}

.message-menu a:nth-child(3):before {
    content:"💬"
}

.message-menu a:nth-child(4):before {
    content:"📖"
}

.login-card {
    background:linear-gradient(180deg,#fff,#f8fafc);
    border-top:5px solid #2563eb
}

.brand:before {
    content:"✨ ";

}

.form button,.login-card button {
    height:46px
}

.detail p {
    background:#fff;
    border:1px solid #eef2f7;
    border-radius:14px;
    margin:8px 0;
    padding:13px 14px
}

.chat p {
    box-shadow:0 8px 20px rgba(15,23,42,.05)
}

.result-card {
    margin:16vh auto 0;
    max-width:520px;
    text-align:center;
    background:linear-gradient(180deg,#fff,#f8fafc);
    border-radius:28px;
    padding:34px 24px;
    box-shadow:0 24px 70px rgba(15,23,42,.12);
    border:1px solid rgba(148,163,184,.20)
}

.result-icon {
    width:76px;
    height:76px;
    margin:0 auto 18px;
    border-radius:28px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:42px;
    font-weight:950;
    color:white
}

.result-card.ok .result-icon {
    background:linear-gradient(135deg,#10b981,#2563eb)
}

.result-card.fail .result-icon {
    background:linear-gradient(135deg,#ef4444,#f97316)
}

.result-card p {
    color:#64748b;
    line-height:1.7
}

.result-card .actions {
    justify-content:center;
    margin-top:18px
}