:root {
    --gold: #e11d48;
    --gold-dark: #be123c;
    --gold-soft: #fff1f2;
    --orange: #f43f5e;
    --blue: #2563eb;
    --green: #16a34a;
    --purple: #7c3aed;
    --red: #ef4444;
    --text: #1f2937;
    --muted: #6b7280;
    --light: #eef2f7;
    --card: #ffffff;
    --line: #dde2ea;
    --shadow: none;
    --soft-shadow: none;
    --radius: 8px;
    --page-pad: 12px;
    --screen-gap: 12px;
    --tabbar-h: 76px;
    --hero-h: 62px;
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-top: env(safe-area-inset-top, 0px);
}

* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html {
    background: var(--light);
    overflow-x: hidden;
}

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    background: var(--light);
    color: var(--text);
    overscroll-behavior-y: none;
    overflow-x: hidden;
}

button {
    font-family: inherit;
    touch-action: manipulation;
}

.app-shell {
    width: 100%;
    max-width: 750px;
    min-height: 100vh;
    margin: 0 auto;
    position: relative;
    overflow: visible;
}

.page {
    display: none;
    padding-top: calc(var(--hero-h) + var(--safe-top));
    padding-bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 16px);
    min-height: 100vh;
    background: radial-gradient(circle at 50% -80px, rgba(225, 29, 72, .10), transparent 270px), var(--light);
}

.page.active {
    display: block;
}

.hero {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 30;
    width: 100%;
    margin: 0;
    padding: calc(8px + var(--safe-top)) 16px 10px;
    min-height: calc(var(--hero-h) + var(--safe-top));
    background:
        radial-gradient(circle at 86% 18%, rgba(255, 255, 255, .16), transparent 30%),
        linear-gradient(135deg, #111827 0%, #4c0f25 55%, #e11d48 100%);
    overflow: hidden;
    border-radius: 0;
    box-shadow: none;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .28;
    background:
        linear-gradient(115deg, transparent 0 46%, rgba(255, 255, 255, .18) 46% 47%, transparent 47%),
        radial-gradient(circle at 72% 42%, rgba(59, 130, 246, .28), transparent 24%);
    pointer-events: none;
}

.hero::after {
    content: "";
    position: absolute;
    right: 22px;
    top: 18px;
    width: 92px;
    height: 92px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 50%;
    background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .18), transparent 36%);
    pointer-events: none;
}

.hero-content {
    display: flex;
    align-items: center;
    min-height: 44px;
    max-width: 750px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.mascot {
    width: 108px;
    height: 108px;
    flex: 0 0 auto;
    position: relative;
    margin-right: 16px;
    transform: translateY(2px);
}

.dog-face {
    position: absolute;
    left: 10px;
    top: 0;
    width: 82px;
    height: 82px;
    background: #e11d48;
    border-radius: 44% 44% 48% 48%;
    border: 3px solid #fff1f2;
    box-shadow: 0 8px 16px rgba(154, 92, 0, .18);
}

.dog-face::before,
.dog-face::after {
    content: "";
    position: absolute;
    top: -18px;
    width: 26px;
    height: 34px;
    background: #e11d48;
    border: 3px solid #fff1f2;
    border-radius: 70% 15% 50% 15%;
    transform: rotate(-20deg);
    z-index: -1;
}

.dog-face::before {
    left: 5px;
}

.dog-face::after {
    right: 5px;
    transform: scaleX(-1) rotate(-20deg);
}

.dog-eye {
    position: absolute;
    top: 26px;
    width: 9px;
    height: 12px;
    background: #111827;
    border-radius: 50%;
}

.dog-eye.left {
    left: 23px;
}

.dog-eye.right {
    right: 23px;
}

.dog-mouth {
    position: absolute;
    left: 50%;
    top: 42px;
    width: 34px;
    height: 23px;
    transform: translateX(-50%);
    background: #fff1f2;
    border-radius: 0 0 18px 18px;
}

.dog-mouth::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -6px;
    width: 12px;
    height: 8px;
    background: #111827;
    transform: translateX(-50%);
    border-radius: 50%;
}

.dog-mouth::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 3px;
    width: 11px;
    height: 8px;
    background: #ef4444;
    transform: translateX(-50%);
    border-radius: 0 0 10px 10px;
}

.dog-body {
    position: absolute;
    left: 15px;
    bottom: 0;
    width: 70px;
    height: 52px;
    background: #e11d48;
    border: 3px solid #fff1f2;
    border-radius: 18px 18px 10px 10px;
    z-index: -1;
}

.ball {
    position: absolute;
    left: 0;
    bottom: 6px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, #111827 0 8px, transparent 8px), linear-gradient(45deg, transparent 44%, #111827 44% 49%, transparent 49%), linear-gradient(-45deg, transparent 44%, #111827 44% 49%, transparent 49%), #fff;
    border: 2px solid #111827;
    box-shadow: 0 4px 10px rgba(0,0,0,.12);
}

.hero-text {
    flex: 1;
    min-width: 0;
}

.hero-title {
    margin: 0;
    font-size: 22px;
    line-height: 1.16;
    font-weight: 950;
    color: #fff;
    letter-spacing: .2px;
}

.hero-subtitle {
    margin: 4px 0 0;
    font-size: 12px;
    color: rgba(255, 255, 255, .76);
    font-weight: 600;
}

.content {
    padding: 0 var(--screen-gap) 18px;
    margin-top: 12px;
    position: relative;
    z-index: 1;
}

.card {
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border: 1px solid var(--line);
    margin-bottom: 12px;
    overflow: hidden;
}

.section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 15px 14px 0;
    font-size: 20px;
    font-weight: 950;
    color: #111827;
}

.title-icon {
    width: 24px;
    height: 24px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, #e11d48, #7c3aed);
    font-size: 13px;
    flex: 0 0 auto;
    box-shadow: none;
}

.task-list {
    padding: 10px 12px 12px;
}

.task-flow {
    overflow: visible;
    border-color: rgba(225, 29, 72, .22);
    background: linear-gradient(180deg, #fff, #fff7f9);
}

.flow-head {
    padding: 16px 16px 8px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
}

.flow-head h2 {
    margin: 0;
    font-size: 23px;
    line-height: 1.2;
    color: #111827;
}

.flow-head p {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
}

.flow-count {
    min-width: 48px;
    height: 28px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff1f2;
    color: #be123c;
    font-weight: 900;
    font-size: 13px;
}

.flow-list {
    padding: 4px 12px 14px;
}

.flow-row {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 82px;
    gap: 10px;
    align-items: center;
    padding: 12px 10px;
    border-bottom: 1px solid #edf0f4;
}

.flow-row .action-btn {
    width: 82px;
    min-width: 82px;
    justify-self: end;
    padding: 0;
}

.flow-row:last-child {
    border-bottom: 0;
}

.flow-row.active {
    margin: 4px 0 2px;
    border: 1px solid #fecdd3;
    border-radius: 8px;
    background: linear-gradient(180deg, #fff1f2, #fff);
}

.flow-step {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #e8edf5;
    color: #475569;
    font-size: 12px;
    font-weight: 950;
}

.flow-row.active .flow-step {
    background: #e11d48;
    color: #fff;
}

.flow-row.done .flow-step {
    background: #dcfce7;
    color: #16a34a;
}

.flow-main {
    min-width: 0;
}

.flow-main strong {
    display: block;
    font-size: 16px;
    line-height: 1.25;
    color: #111827;
}

.flow-main span {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.task-meta {
    margin-top: 7px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.task-meta em {
    min-height: 20px;
    padding: 0 7px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    background: #f1f5f9;
    color: #64748b;
    font-style: normal;
    font-size: 11px;
    line-height: 20px;
    white-space: nowrap;
}

.task-row {
    display: grid;
    grid-template-columns: 50px 1fr auto auto;
    gap: 12px;
    align-items: center;
    min-height: 76px;
    border: 1px solid var(--line);
    border-bottom: 0;
    padding: 12px;
    background: #fff;
}

.task-row:first-child {
    border-radius: 8px 8px 0 0;
}

.task-row:last-child {
    border-bottom: 1px solid var(--line);
    border-radius: 0 0 8px 8px;
}

.icon-box {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 23px;
    font-weight: 800;
    box-shadow: 0 7px 14px rgba(31,41,55,.10);
}

.blue {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
}

.green {
    background: linear-gradient(135deg, #22c55e, #16a34a);
}

.purple {
    background: linear-gradient(135deg, #a855f7, #7c3aed);
}

.orange {
    background: linear-gradient(135deg, #fb7185, #e11d48);
}

.task-main strong {
    display: block;
    font-size: 18px;
    line-height: 1.18;
    margin-bottom: 5px;
}

.task-main span {
    display: block;
    font-size: 13px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.badge {
    min-width: 76px;
    text-align: center;
    font-size: 13px;
    font-weight: 900;
    border-radius: 999px;
    padding: 6px 8px;
    white-space: nowrap;
}

.badge.red {
    background: #fee2e2;
    color: #dc2626;
}

.badge.warn {
    background: #fff1f2;
    color: #be123c;
}

.badge.good {
    background: #dcfce7;
    color: #16a34a;
}

.badge.info {
    background: #dbeafe;
    color: #2563eb;
}

.action-btn {
    height: 38px;
    min-width: 82px;
    border: 1.5px solid var(--orange);
    background: #fff;
    color: var(--orange);
    border-radius: 999px;
    font-size: 14px;
    font-weight: 950;
    padding: 0 12px;
}

.metrics-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    padding: 13px 10px 15px;
}

.metric {
    text-align: center;
    border-right: 1px solid var(--line);
}

.metric:last-child {
    border-right: 0;
}

.metric span {
    display: block;
    color: var(--muted);
    font-size: 13px;
    margin-bottom: 5px;
}

.metric strong {
    color: var(--orange);
    font-size: 27px;
    line-height: 1;
    font-weight: 950;
}

.home-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
}

.summary-card {
    padding: 14px;
    background: #fbfcff;
    border-color: #d7dee9;
}

.summary-title {
    font-size: 13px;
    color: var(--muted);
    font-weight: 850;
    margin-bottom: 10px;
}

.task-flow .flow-head,
.quick-panel .section-title {
    border-bottom: 1px solid rgba(226, 232, 240, .72);
}

.quick-panel .section-title {
    padding-bottom: 12px;
}

.summary-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.summary-metrics span {
    display: block;
    color: var(--muted);
    font-size: 11px;
    white-space: nowrap;
}

.summary-metrics strong {
    display: block;
    margin-top: 4px;
    color: #111827;
    font-size: 22px;
    line-height: 1;
}

.trend {
    display: inline-flex;
    align-items: center;
    margin-top: 6px;
    min-height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    font-style: normal;
    font-size: 10px;
    line-height: 18px;
    font-weight: 900;
}

.trend.up {
    background: #dcfce7;
    color: #16a34a;
}

.trend.down {
    background: #fee2e2;
    color: #dc2626;
}

.goal-line {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

.goal-line strong {
    color: #e11d48;
    font-size: 27px;
    line-height: 1;
}

.goal-line span {
    color: var(--muted);
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.goal-progress {
    height: 8px;
    margin-top: 12px;
    border-radius: 999px;
    background: #e8edf5;
    overflow: hidden;
}

.goal-progress i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #e11d48, #7c3aed);
}

.goal-card {
    padding: 15px;
}

.goal-body {
    display: grid;
    grid-template-columns: 128px 1fr 132px;
    align-items: center;
    gap: 12px;
}

.donut {
    width: 118px;
    height: 118px;
    border-radius: 50%;
    background: conic-gradient(#ef4444 0deg 245deg, #f1eadf 245deg 360deg);
    display: grid;
    place-items: center;
    position: relative;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.6);
}

.donut::after {
    content: "";
    position: absolute;
    width: 78px;
    height: 78px;
    background: #fff;
    border-radius: 50%;
    box-shadow: inset 0 1px 4px rgba(31,41,55,.05);
}

.donut-inner {
    position: relative;
    z-index: 1;
    text-align: center;
}

.donut-inner strong {
    display: block;
    font-size: 32px;
    color: #111827;
    line-height: 1;
    font-weight: 950;
}

.donut-inner span {
    display: block;
    font-size: 12px;
    color: var(--muted);
    margin-top: 4px;
}

.goal-stats {
    border-right: 1px solid var(--line);
    padding-right: 10px;
}

.goal-stat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 0;
    border-bottom: 1px solid #f3f4f6;
    font-size: 15px;
}

.goal-stat:last-child {
    border-bottom: 0;
}

.goal-stat .label {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #374151;
    font-weight: 700;
}

.goal-stat strong {
    font-size: 18px;
    font-weight: 950;
}

.goal-stat.done strong {
    color: var(--green);
}

.goal-stat.left strong {
    color: var(--orange);
}

.dot-icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 10px;
    color: #fff;
    background: var(--orange);
}

.dot-icon.green {
    background: var(--green);
}

.goal-actions {
    display: grid;
    gap: 10px;
}

.primary-btn,
.secondary-btn {
    height: 50px;
    border-radius: 8px;
    border: 0;
    font-size: 16px;
    font-weight: 950;
}

.primary-btn {
    background: linear-gradient(135deg, #e11d48, #7c3aed);
    color: #fff;
    box-shadow: none;
}

.secondary-btn {
    background: #fff1f2;
    color: var(--gold-dark);
    border: 1px solid #fecdd3;
}

.quick-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 9px;
    padding: 13px 12px 14px;
}

.quick-grid.compact {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.quick-panel .section-title {
    font-size: 17px;
}

.quick-panel {
    background: #fdfefe;
    border-color: #e2e8f0;
}

.quick-item {
    min-height: 58px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 900;
    color: #1f2937;
    box-shadow: var(--soft-shadow);
}

.quick-entry {
    min-height: 112px;
    padding: 12px 10px;
    flex-direction: column;
    gap: 7px;
    justify-content: center;
    border-color: rgba(148, 163, 184, .32);
    position: relative;
    overflow: hidden;
}

.quick-entry::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .08;
    background: var(--entry-color);
}

.quick-entry::after {
    content: "";
    position: absolute;
    right: -18px;
    top: -22px;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: var(--entry-color);
    opacity: .11;
}

.quick-entry.log {
    --entry-color: #2563eb;
}

.quick-entry.notice {
    --entry-color: #e11d48;
}

.quick-entry.sales {
    --entry-color: #7c3aed;
}

.quick-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--entry-color);
    background: rgba(255, 255, 255, .72);
    border: 1px solid color-mix(in srgb, var(--entry-color) 26%, transparent);
    position: relative;
    z-index: 1;
}

.quick-icon svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.quick-entry strong,
.quick-entry small {
    position: relative;
    z-index: 1;
}

.quick-entry strong {
    font-size: 15px;
    line-height: 1.1;
    color: #111827;
}

.quick-entry small {
    color: #64748b;
    font-size: 11px;
    line-height: 1.2;
    font-weight: 700;
}

.quick-item i {
    font-style: normal;
    font-size: 23px;
}

.recommend-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 9px;
    padding: 13px 12px 14px;
}

.rec-card {
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    box-shadow: var(--soft-shadow);
}

.rec-thumb {
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 950;
    font-size: 17px;
    text-shadow: 0 1px 2px rgba(0,0,0,.18);
}

.thumb-red {
    background: linear-gradient(135deg, #e11d48, #f43f5e);
}

.thumb-green {
    background: linear-gradient(135deg, #16a34a, #84cc16);
}

.thumb-blue {
    background: linear-gradient(135deg, #2563eb, #8b5cf6);
}

.rec-info {
    padding: 9px;
}

.rec-info strong {
    display: block;
    font-size: 13px;
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rec-info span {
    display: block;
    color: var(--muted);
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 8px;
}

.mini-btn {
    height: 28px;
    min-width: 78px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--orange);
    color: var(--orange);
    font-weight: 900;
    font-size: 12px;
}

.kpi-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 13px 8px 15px;
}

.kpi {
    text-align: center;
    border-right: 1px solid var(--line);
}

.kpi:last-child {
    border-right: 0;
}

.kpi i {
    display: block;
    font-style: normal;
    font-size: 29px;
    margin-bottom: 5px;
}

.kpi span {
    display: block;
    color: var(--muted);
    font-size: 12px;
}

.kpi strong {
    display: block;
    font-size: 23px;
    margin-top: 2px;
}

.tabbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: calc(var(--tabbar-h) + var(--safe-bottom));
    padding-bottom: var(--safe-bottom);
    background: rgba(255,255,255,.96);
    border-top: 1px solid rgba(229, 231, 235, .8);
    box-shadow: none;
    display: flex;
    justify-content: center;
    z-index: 20;
    backdrop-filter: blur(14px);
}

.tab {
    flex: 1 1 0;
    max-width: 150px;
    border: 0;
    background: transparent;
    color: #6b7280;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 800;
    position: relative;
}

.tab svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    margin-top: 2px;
}

.tab.active {
    color: var(--gold);
}

.tab.active::before {
    content: "";
    position: absolute;
    top: 8px;
    width: 36px;
    height: 4px;
    border-radius: 999px;
    background: var(--gold);
}

.store-card {
    display: grid;
    grid-template-columns: 48% 1fr;
    gap: 14px;
    padding: 14px;
}

.store-cover {
    height: 132px;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    background: linear-gradient(135deg, #111827, #7c3aed 52%, #e11d48);
    box-shadow: inset 0 -20px 50px rgba(0,0,0,.22);
}

.store-cover::before {
    content: "稳狗足球";
    position: absolute;
    left: 18px;
    top: 35px;
    color: #fff;
    font-size: 28px;
    font-weight: 950;
    text-shadow: 0 2px 8px rgba(0,0,0,.22);
}

.store-cover::after {
    content: "阳光体彩店";
    position: absolute;
    left: 44px;
    top: 75px;
    background: rgba(255,255,255,.22);
    color: #fff;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 900;
}

.mini-mascot {
    position: absolute;
    left: 10px;
    bottom: 8px;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #fff3d6;
    border: 4px solid #fff;
    display: grid;
    place-items: center;
    font-size: 34px;
    box-shadow: 0 4px 12px rgba(0,0,0,.16);
}

.store-info h2 {
    margin: 0 0 10px;
    font-size: 25px;
    font-weight: 950;
}

.info-line {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 8px 0;
    font-size: 14px;
    color: #374151;
}

.info-line i {
    font-style: normal;
    color: var(--orange);
}

.store-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 14px;
}

.outline-btn {
    height: 42px;
    border-radius: 8px;
    border: 1px solid var(--orange);
    color: var(--orange);
    background: #fff;
    font-size: 14px;
    font-weight: 950;
}

.filled-btn {
    height: 42px;
    border-radius: 8px;
    border: 0;
    color: #fff;
    background: linear-gradient(135deg, #e11d48, #7c3aed);
    font-size: 14px;
    font-weight: 950;
}

.link-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.notice-box {
    margin: 12px;
    border: 1px solid #fecdd3;
    background: linear-gradient(135deg, #fff1f2, #fff);
    border-radius: 8px;
    padding: 13px;
    display: grid;
    grid-template-columns: 52px 1fr auto;
    gap: 10px;
    align-items: center;
}

.pin {
    width: 42px;
    height: 42px;
    background: var(--orange);
    color: #fff;
    border-radius: 8px;
    display: grid;
    place-items: center;
    font-weight: 950;
    font-size: 14px;
}

.notice-main strong {
    display: block;
    font-size: 16px;
    margin-bottom: 5px;
}

.notice-main span {
    color: var(--muted);
    font-size: 13px;
}

.notice-time {
    font-size: 12px;
    color: var(--muted);
}

.dual-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 0 12px 14px;
}

.module-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 9px;
    padding: 13px 12px 14px;
}

.module-item {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px 8px;
    min-height: 76px;
    background: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    box-shadow: var(--soft-shadow);
}

.module-item .icon-box {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    font-size: 19px;
}

.module-item strong {
    display: block;
    font-size: 14px;
}

.module-item span {
    display: block;
    color: var(--green);
    font-size: 12px;
    margin-top: 3px;
}

.module-item::after {
    content: "›";
    position: absolute;
    right: 7px;
    color: #9ca3af;
    font-size: 22px;
}

.promo-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 9px;
    padding: 13px 12px 14px;
}

.promo-btn {
    height: 44px;
    border-radius: 8px;
    border: 1px solid #fecdd3;
    background: #fff1f2;
    color: var(--orange);
    font-weight: 950;
    font-size: 14px;
}

.site-status-card {
    padding: 16px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 14px;
    align-items: center;
    border-color: rgba(22, 163, 74, .28);
    background: linear-gradient(135deg, #f0fdf4, #fff);
}

.site-status-main h2,
.site-apply-card h2 {
    margin: 8px 0 0;
    color: #111827;
    font-size: 20px;
    line-height: 1.2;
}

.site-status-main p,
.site-apply-card p {
    margin: 7px 0 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.5;
}

.site-state,
.site-chip {
    display: inline-flex;
    min-height: 24px;
    align-items: center;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
}

.site-state {
    background: #dcfce7;
    color: #166534;
}

.site-chip {
    background: #fff1f2;
    color: #be123c;
}

.site-url {
    padding: 9px 11px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #bbf7d0;
    color: #166534;
    font-size: 13px;
    font-weight: 900;
    white-space: nowrap;
}

.site-flow-card .section-title {
    padding-bottom: 8px;
}

.site-flow {
    padding: 0 12px 14px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.site-flow-step {
    min-height: 82px;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
}

.site-flow-step strong {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #e2e8f0;
    color: #475569;
    font-size: 13px;
}

.site-flow-step span,
.review-panel strong,
.review-reject strong {
    display: block;
    margin-top: 8px;
    color: #111827;
    font-size: 14px;
    font-weight: 950;
}

.site-flow-step em {
    display: block;
    margin-top: 4px;
    color: #64748b;
    font-style: normal;
    font-size: 11px;
}

.site-flow-step.done,
.site-flow-step.active {
    background: #fff;
    border-color: #fecdd3;
}

.site-flow-step.done strong,
.site-flow-step.active strong {
    background: #e11d48;
    color: #fff;
}

.site-apply-card {
    padding: 15px;
    display: grid;
    grid-template-columns: 1fr 112px;
    gap: 14px;
    align-items: center;
}

.review-panel {
    margin: 0 12px 12px;
    padding: 13px;
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 11px;
    border-radius: 8px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.review-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #fff1f2;
    color: #be123c;
    font-size: 15px;
    font-weight: 950;
}

.review-panel span,
.review-reject span {
    display: block;
    margin-top: 5px;
    color: #64748b;
    font-size: 12px;
}

.review-panel p {
    margin: 8px 0 0;
    color: #475569;
    font-size: 13px;
    line-height: 1.5;
}

.review-reject {
    margin: 0 12px 14px;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #fecaca;
    background: #fef2f2;
    display: grid;
    grid-template-columns: 1fr 96px;
    gap: 8px;
    align-items: center;
}

.review-reject strong,
.review-reject span {
    margin-top: 0;
}

.review-reject .outline-btn {
    height: 34px;
    font-size: 13px;
    color: #b91c1c;
    border-color: #fecaca;
}

.site-manage-card {
    border-color: rgba(225, 29, 72, .22);
}

.site-store-card {
    margin: 0;
    border: 0;
    border-radius: 0;
}

.micro-premium-card {
    padding: 16px;
    display: grid;
    grid-template-columns: 1fr 118px;
    gap: 14px;
    align-items: center;
    background: linear-gradient(135deg, #fff 0%, #fff1f2 58%, #f8fafc 100%);
    border-color: rgba(225, 29, 72, .22);
}

.micro-premium-copy h2,
.status-summary h2 {
    margin: 8px 0 0;
    color: #111827;
    font-size: 21px;
    line-height: 1.2;
}

.micro-premium-copy p,
.status-summary p {
    margin: 8px 0 0;
    color: #475569;
    font-size: 13px;
    line-height: 1.55;
}

.micro-credential {
    min-height: 128px;
    padding: 12px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    text-align: center;
    background: #111827;
    color: #fff;
}

.credential-seal {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .22);
}

.credential-seal svg {
    width: 34px;
    height: 34px;
    fill: none;
    stroke: #fff;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.micro-credential strong {
    margin-top: 8px;
    font-size: 13px;
}

.micro-credential small {
    color: rgba(255, 255, 255, .68);
    font-size: 11px;
}

.muted-note {
    margin-left: auto;
    color: #94a3b8;
    font-size: 12px;
    font-weight: 800;
}

.micro-form-grid {
    padding: 0 12px 12px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.micro-field {
    min-height: 58px;
    padding: 10px;
    border-radius: 8px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.micro-field.full {
    grid-column: 1 / -1;
}

.micro-field span,
.share-art-lite small {
    display: block;
    color: #64748b;
    font-size: 11px;
    font-weight: 850;
}

.micro-field strong {
    display: block;
    margin-top: 6px;
    color: #111827;
    font-size: 14px;
    line-height: 1.35;
}

.micro-choice-block {
    margin: 0 12px 12px;
    padding: 12px;
    display: grid;
    grid-template-columns: 1.3fr .9fr;
    gap: 12px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #edf2f7;
}

.micro-choice-block h3 {
    margin: 0 0 8px;
    color: #111827;
    font-size: 14px;
}

.micro-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.micro-tags span {
    min-height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    background: #f8fafc;
    color: #475569;
    border: 1px solid #e2e8f0;
    font-size: 11px;
    font-weight: 800;
}

.theme-strip {
    min-height: 48px;
    padding: 8px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #111827, #e11d48);
    color: #fff;
}

.theme-strip.base {
    background: linear-gradient(135deg, #334155, #64748b);
}

.theme-strip.blue {
    background: linear-gradient(135deg, #0f172a, #2563eb);
}

.theme-strip.green {
    background: linear-gradient(135deg, #064e3b, #16a34a);
}

.theme-strip i {
    width: 18px;
    height: 28px;
    border-radius: 6px;
    background: rgba(255, 255, 255, .22);
}

.theme-strip strong {
    margin-left: auto;
    font-size: 12px;
}

.micro-actions {
    padding: 0 12px 14px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.status-summary {
    margin: 0 12px 12px;
    padding: 14px;
    border-radius: 8px;
    display: grid;
    grid-template-columns: 1fr 108px;
    gap: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.site-state.pending {
    background: #fff7ed;
    color: #c2410c;
}

.status-stamp {
    min-height: 104px;
    padding: 12px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    align-content: center;
    background: #fff;
    border: 1px solid #fed7aa;
}

.status-stamp span {
    color: #c2410c;
    font-size: 11px;
    font-weight: 900;
}

.status-stamp strong {
    margin-top: 7px;
    color: #111827;
    font-size: 16px;
}

.micro-progress-list {
    margin: 0 12px 12px;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 8px;
}

.micro-progress-list li {
    padding: 10px;
    border-radius: 8px;
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: 9px;
    background: #fff;
    border: 1px solid #e2e8f0;
}

.micro-progress-list i {
    width: 14px;
    height: 14px;
    margin-top: 2px;
    border-radius: 50%;
    background: #cbd5e1;
}

.micro-progress-list li.done i,
.micro-progress-list li.active i {
    background: #e11d48;
}

.micro-progress-list strong {
    display: block;
    color: #111827;
    font-size: 13px;
}

.micro-progress-list small {
    display: block;
    margin-top: 4px;
    color: #64748b;
    font-size: 11px;
}

.share-art-lite {
    margin: 0 12px 10px;
    min-height: 112px;
    padding: 14px;
    border-radius: 8px;
    display: grid;
    grid-template-columns: 1fr 76px;
    gap: 12px;
    align-items: center;
    color: #fff;
    background: linear-gradient(135deg, #111827, #7c3aed 54%, #e11d48);
}

.share-art-lite strong {
    display: block;
    margin-top: 6px;
    font-size: 22px;
    line-height: 1.1;
}

.share-art-lite span {
    display: block;
    margin-top: 8px;
    color: rgba(255, 255, 255, .74);
    font-size: 12px;
}

.qr-mini {
    width: 76px;
    height: 76px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background: #fff;
    color: #111827;
    font-size: 20px;
    font-weight: 950;
}

.full-url {
    display: flex;
    width: calc(100% - 24px);
    margin: 0 12px 12px;
    justify-content: center;
}

.promo-row.compact {
    padding-top: 0;
}

.site-gateway-card {
    min-height: 260px;
    padding: 26px 18px;
    display: grid;
    place-items: center;
    text-align: center;
    align-content: center;
    border-color: rgba(225, 29, 72, .18);
    background: linear-gradient(180deg, #fff, #fff7f9);
}

.gateway-mark {
    width: 76px;
    height: 76px;
    border-radius: 24px;
    display: grid;
    place-items: center;
    color: #e11d48;
    background: #fff1f2;
    border: 1px solid #fecdd3;
}

.gateway-mark svg {
    width: 42px;
    height: 42px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.site-gateway-card h2 {
    margin: 16px 0 0;
    color: #111827;
    font-size: 22px;
    line-height: 1.2;
}

.site-gateway-card p,
.site-demo-switch p,
.site-help-text {
    margin: 8px 14px 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.55;
}

.site-route-btn {
    width: min(220px, 100%);
    margin-top: 18px;
}

.gateway-loader {
    width: 100%;
    max-width: 220px;
    height: 8px;
    margin-top: 18px;
    border-radius: 999px;
    overflow: hidden;
    background: #ffe4e6;
}

.gateway-loader i {
    display: block;
    width: 42%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #e11d48, #7c3aed);
    animation: gatewayLoading 1s ease-in-out infinite alternate;
}

@keyframes gatewayLoading {
    from {
        transform: translateX(-22%);
    }
    to {
        transform: translateX(160%);
    }
}

.site-demo-switch {
    background: #fff;
}

.site-style-grid,
.site-form-grid,
.site-feature-grid {
    padding: 0 12px 12px;
    display: grid;
    gap: 8px;
}

.site-style-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.base-style-grid {
    grid-template-columns: minmax(0, 1fr);
}

.style-tier {
    margin: 0 12px 12px;
}

.style-tier-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.style-tier-head strong {
    min-height: 24px;
    padding: 0 9px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    color: #334155;
    background: #eef2f7;
    font-size: 12px;
    font-weight: 950;
}

.style-tier-head span {
    color: #64748b;
    font-size: 11px;
    line-height: 1.35;
    text-align: right;
}

.premium-style-tier {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed #e7d0a6;
}

.premium-style-tier .style-tier-head strong {
    color: #8a611f;
    background: #fff7e8;
    border: 1px solid #e7d0a6;
}

.premium-style-tier .style-tier-head span {
    color: #8a611f;
}

.site-style-option {
    min-width: 0;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    position: relative;
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
}

.site-style-option.selected {
    border-color: #d8b36a;
    background: linear-gradient(180deg, #fffdf7, #fff);
    box-shadow: inset 0 0 0 1px rgba(216, 179, 106, .35);
}

.site-style-option.selected::after {
    content: "✓";
    position: absolute;
    top: 8px;
    right: 14px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #d8b36a;
    color: #1c2533;
    font-size: 13px;
    font-weight: 950;
}

.site-style-option.selected .theme-strip strong {
    padding-right: 24px;
}

.site-style-option:focus-within {
    border-color: #d8b36a;
    box-shadow: 0 0 0 3px rgba(216, 179, 106, .18);
}

.premium-style-option {
    border-color: #e7d0a6;
    background: #fffdf7;
}

.premium-style-option::before {
    content: "高级";
    position: absolute;
    left: 10px;
    top: 10px;
    z-index: 1;
    min-width: 34px;
    height: 20px;
    padding: 0 7px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #1c2533;
    background: linear-gradient(145deg, #f6d58a, #d8b36a);
    font-size: 11px;
    font-weight: 950;
}

.premium-style-option .theme-strip {
    padding-left: 50px;
}

.site-style-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.site-style-option em {
    display: block;
    margin-top: 8px;
    color: #64748b;
    font-size: 11px;
    line-height: 1.35;
    font-style: normal;
}

.site-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.site-form-grid label {
    min-width: 0;
    padding: 10px;
    border-radius: 8px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.site-form-grid label.full {
    grid-column: 1 / -1;
}

.site-form-grid span {
    display: block;
    color: #64748b;
    font-size: 11px;
    font-weight: 850;
}

.site-form-grid input,
.site-form-grid textarea {
    width: 100%;
    margin-top: 7px;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #111827;
    font: inherit;
    font-size: 14px;
    font-weight: 850;
    resize: none;
}

.site-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.feature-tier {
    margin: 0 12px 12px;
    padding: 0;
    border-radius: 8px;
    background: transparent;
    border: 0;
}

.feature-tier-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.feature-tier-head strong {
    min-height: 24px;
    padding: 0 9px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    color: #334155;
    background: #eef2f7;
    font-size: 12px;
    font-weight: 950;
}

.feature-tier-head span {
    color: #64748b;
    font-size: 11px;
    line-height: 1.35;
    text-align: right;
}

.feature-tier .site-feature-grid {
    padding: 0;
}

.premium-tier {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed #e7d0a6;
    background: transparent;
}

.premium-tier .feature-tier-head strong {
    color: #8a611f;
    background: #fff7e8;
    border: 1px solid #e7d0a6;
}

.premium-tier .feature-tier-head span {
    color: #8a611f;
}

.site-feature-grid label {
    min-height: 42px;
    padding: 0 11px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #334155;
    font-size: 13px;
    font-weight: 900;
}

.site-feature-grid label.premium-option {
    border-color: #e7d0a6;
    background: #fffdf7;
    color: #8a611f;
    position: relative;
}

.site-feature-grid label.premium-option::after {
    content: "高级";
    margin-left: auto;
    min-width: 34px;
    height: 20px;
    padding: 0 7px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #1c2533;
    background: linear-gradient(145deg, #f6d58a, #d8b36a);
    font-size: 11px;
    font-weight: 950;
}

.site-feature-grid label.checked {
    border-color: #fecdd3;
    background: #fff1f2;
    color: #be123c;
}

.site-feature-grid label.premium-option.checked {
    border-color: #d8b36a;
    background: linear-gradient(180deg, #fff9ef, #fff);
    color: #8a611f;
    box-shadow: inset 0 0 0 1px rgba(216, 179, 106, .28);
}

.site-feature-grid input {
    width: 15px;
    height: 15px;
    accent-color: #e11d48;
}

.site-status-hero {
    margin: 0 0 12px;
}

.site-reject-demo {
    margin-top: 0;
}

#siteCreate .card {
    margin-bottom: 14px;
}

#siteCreate .micro-premium-card {
    position: relative;
    padding: 18px;
    gap: 16px;
    overflow: hidden;
    grid-template-columns: minmax(0, 1fr) 150px;
    border-color: #ded4c2;
    background:
        linear-gradient(115deg, rgba(255, 255, 255, .72) 0 42%, rgba(216, 179, 106, .12) 42% 43%, transparent 43%),
        repeating-linear-gradient(135deg, rgba(185, 133, 43, .035) 0 1px, transparent 1px 9px),
        radial-gradient(circle at 88% 12%, rgba(216, 179, 106, .18), transparent 32%),
        linear-gradient(135deg, #fffdf9 0%, #ffffff 58%, #f8fafc 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .86),
        inset 0 0 0 1px rgba(255, 255, 255, .52),
        0 12px 30px rgba(15, 23, 42, .08);
}

#siteCreate .micro-premium-card::before {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    top: 0;
    height: 3px;
    border-radius: 0 0 999px 999px;
    background: linear-gradient(90deg, #8f1613, #d8b36a 42%, rgba(216, 179, 106, .22), transparent);
    box-shadow: 0 1px 8px rgba(216, 179, 106, .28);
}

#siteCreate .micro-premium-card::after {
    content: "";
    position: absolute;
    right: -36px;
    bottom: -48px;
    width: 132px;
    height: 132px;
    border-radius: 50%;
    border: 1px solid rgba(185, 133, 43, .18);
    background: radial-gradient(circle, rgba(216, 179, 106, .1), transparent 62%);
    pointer-events: none;
}

#siteCreate .micro-premium-copy,
#siteCreate .micro-credential {
    position: relative;
    z-index: 1;
}

#siteCreate .micro-premium-copy h2 {
    margin-top: 12px;
    max-width: 520px;
    color: #121a26;
    font-size: 22px;
    letter-spacing: .2px;
}

#siteCreate .micro-premium-copy p {
    margin-top: 10px;
    max-width: 570px;
    color: #667085;
    line-height: 1.7;
}

#siteCreate .site-sample-link {
    width: max-content;
    max-width: 100%;
    min-height: 36px;
    margin-top: 14px;
    padding: 0 13px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #8a611f;
    background: linear-gradient(180deg, #fff9ef, #fff);
    border: 1px solid #e7d0a6;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .82);
    text-decoration: none;
    font-size: 13px;
    font-weight: 900;
}

#siteCreate .site-sample-link svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#siteCreate .micro-premium-copy .site-chip {
    min-height: 26px;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: #8a611f;
    font-size: 12px;
    font-weight: 800;
}

#siteCreate .micro-credential {
    position: relative;
    min-height: 148px;
    padding: 14px;
    overflow: hidden;
    border: 1px solid #ded3be;
    background:
        radial-gradient(circle at 50% 0%, rgba(246, 213, 138, .18), transparent 38%),
        linear-gradient(145deg, rgba(255, 255, 255, .08), transparent 36%),
        #1c2533;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .14),
        inset 0 -20px 34px rgba(0, 0, 0, .18),
        0 10px 20px rgba(15, 23, 42, .08);
}

#siteCreate .micro-credential::before {
    content: "";
    position: absolute;
    inset: 10px;
    border-radius: 8px;
    border: 1px solid rgba(216, 179, 106, .18);
    pointer-events: none;
}

#siteCreate .micro-credential::after {
    content: "";
    position: absolute;
    right: -28px;
    top: -28px;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(216, 179, 106, .2), transparent 66%);
    pointer-events: none;
}

#siteCreate .micro-credential .credential-seal {
    position: relative;
    z-index: 1;
    width: 58px;
    height: 58px;
    margin-bottom: 10px;
    background:
        radial-gradient(circle at 34% 24%, rgba(255, 255, 255, .48), transparent 28%),
        linear-gradient(145deg, #f6d58a, #b9852b);
    color: #1c2533;
    border: 1px solid rgba(255, 255, 255, .42);
    box-shadow: 0 10px 22px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .35);
}

#siteCreate .micro-credential .credential-seal svg {
    width: 36px;
    height: 36px;
    stroke: currentColor;
}

#siteCreate .micro-credential strong {
    position: relative;
    z-index: 1;
    margin-top: 0;
    color: #fff;
    font-size: 15px;
    line-height: 1.2;
}

#siteCreate .micro-credential small {
    position: relative;
    z-index: 1;
    margin-top: 5px;
    color: rgba(255, 255, 255, .68);
}

#siteCreate .micro-work-card .section-title {
    padding-bottom: 14px;
}

#siteCreate .site-style-grid,
#siteCreate .site-form-grid,
#siteCreate .site-feature-grid {
    padding-bottom: 16px;
    gap: 10px;
}

#siteCreate .site-style-option {
    padding: 11px;
}

#siteCreate .site-style-option em {
    margin-top: 10px;
}

#siteCreate .site-form-grid label {
    padding: 0;
    border: 0;
    background: transparent;
}

#siteCreate .site-form-grid span {
    margin: 0 0 7px;
    color: #475569;
    font-size: 12px;
    font-weight: 900;
}

#siteCreate .site-form-grid input,
#siteCreate .site-form-grid textarea {
    min-height: 44px;
    margin-top: 9px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    background: #fff;
    box-shadow: inset 0 1px 0 rgba(15, 23, 42, .03);
    font-weight: 800;
}

#siteCreate .site-form-grid textarea {
    min-height: 106px;
    padding-top: 11px;
    line-height: 1.55;
}

#siteCreate .site-form-grid input:focus,
#siteCreate .site-form-grid textarea:focus {
    border-color: #e11d48;
    box-shadow: 0 0 0 3px rgba(225, 29, 72, .1);
}

#siteCreate .site-feature-grid label {
    min-height: 46px;
}

#siteCreate .site-help-text {
    margin: 2px 14px 14px;
}

#siteCreate .compact-actions {
    padding-bottom: 16px;
}

.micro-overview {
    padding: 16px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 128px;
    gap: 14px;
    align-items: stretch;
    border-color: rgba(22, 163, 74, .24);
    background: linear-gradient(135deg, #f0fdf4 0%, #fff 58%, #f8fafc 100%);
}

.micro-overview-copy {
    min-width: 0;
}

.micro-overview-copy h2 {
    margin: 9px 0 0;
    color: #111827;
    font-size: 20px;
    line-height: 1.22;
    font-weight: 950;
}

.micro-overview-copy p {
    margin: 8px 0 0;
    color: #475569;
    font-size: 13px;
    line-height: 1.55;
}

.micro-overview .full-url {
    width: max-content;
    max-width: 100%;
    margin: 12px 0 0;
    justify-content: flex-start;
    overflow: hidden;
    text-overflow: ellipsis;
}

.share-card-mini {
    min-height: 128px;
    padding: 12px;
    border-radius: 8px;
    display: grid;
    align-content: end;
    gap: 5px;
    color: #fff;
    background:
        radial-gradient(circle at 80% 18%, rgba(255, 255, 255, .22), transparent 32%),
        linear-gradient(135deg, #111827 0%, #4c1d95 56%, #be123c 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
}

.share-card-mini small {
    color: rgba(255, 255, 255, .72);
    font-size: 11px;
    font-weight: 850;
}

.share-card-mini strong {
    color: #fff;
    font-size: 17px;
    line-height: 1.18;
}

.share-card-mini span {
    width: max-content;
    padding: 3px 7px;
    border-radius: 999px;
    color: rgba(255, 255, 255, .84);
    background: rgba(255, 255, 255, .13);
    font-size: 11px;
    font-weight: 900;
}

.micro-work-card {
    background: #fff;
}

.micro-compact-grid {
    padding: 0 12px 12px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.micro-compact-grid div {
    min-width: 0;
    min-height: 56px;
    padding: 10px;
    border-radius: 8px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.micro-compact-grid span {
    display: block;
    color: #64748b;
    font-size: 11px;
    font-weight: 850;
}

.micro-compact-grid strong {
    display: block;
    margin-top: 6px;
    color: #111827;
    font-size: 14px;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.compact-tags {
    padding: 0 12px 12px;
}

.compact-actions {
    padding: 0 12px 14px;
}

.compact-progress {
    margin-bottom: 14px;
}

.micro-manage-grid {
    padding: 0 12px 12px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.micro-manage-grid button {
    min-width: 0;
    min-height: 64px;
    padding: 11px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    text-align: left;
}

.micro-manage-grid strong {
    display: block;
    color: #111827;
    font-size: 14px;
    font-weight: 950;
}

.micro-manage-grid span {
    display: block;
    margin-top: 5px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.3;
}

.activity-list {
    padding: 8px 12px 14px;
}

.activity-row {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 11px 0;
    border-bottom: 1px solid #f3f4f6;
}

.activity-row:last-child {
    border-bottom: 0;
}

.activity-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 18px;
}

.activity-text strong {
    display: block;
    font-size: 14px;
    margin-bottom: 3px;
}

.activity-text span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.activity-time {
    font-size: 12px;
    color: var(--muted);
}

.materials-content {
    padding: 0 var(--screen-gap) 18px;
    margin-top: 12px;
    position: relative;
    z-index: 1;
}

.search-bar {
    height: 48px;
    border-radius: 999px;
    background: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 18px;
    box-shadow: var(--shadow);
    color: #9ca3af;
    font-size: 14px;
    margin-bottom: 10px;
    border: 1px solid rgba(229,231,235,.8);
}

.cat-tabs, .filter-tabs {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 0 4px 10px;
}

.cat-tabs::-webkit-scrollbar, .filter-tabs::-webkit-scrollbar {
    display: none;
}

.cat-tab {
    min-width: 58px;
    height: 40px;
    border: 0;
    background: transparent;
    font-size: 15px;
    font-weight: 950;
    color: #374151;
    position: relative;
}

.cat-tab.active {
    color: var(--orange);
}

.cat-tab.active::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 0;
    height: 4px;
    background: var(--orange);
    border-radius: 999px;
}

.filter-chip {
    height: 34px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: #fff;
    padding: 0 18px;
    font-size: 13px;
    color: #374151;
    font-weight: 900;
}

.filter-chip.active {
    background: var(--orange);
    border-color: var(--orange);
    color: #fff;
    box-shadow: none;
}

.waterfall {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding-bottom: 10px;
}

.template-card {
    display: flex;
    flex-direction: column;
    min-height: 238px;
    background: #fff;
    border-radius: 8px;
    box-shadow: var(--shadow);
    border: 1px solid var(--line);
    overflow: hidden;
}

.poster {
    height: 128px;
    flex: 0 0 128px;
    padding: 12px;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.poster.large {
    height: 128px;
}

.poster.small {
    height: 128px;
}

.poster h3 {
    margin: 0;
    font-size: 22px;
    line-height: 1.1;
    text-shadow: 0 2px 3px rgba(0,0,0,.12);
}

.poster p {
    margin: 6px 0 0;
    font-size: 12px;
    opacity: .92;
}

.poster .decor {
    position: absolute;
    right: 12px;
    bottom: 12px;
    font-size: 44px;
    opacity: .9;
}

.poster.lottery {
    background: linear-gradient(135deg, #e11d48, #f43f5e);
}

.poster.match {
    background: linear-gradient(135deg, #15803d, #65a30d);
}

.poster.notice {
    background: linear-gradient(135deg, #2563eb, #06b6d4);
}

.poster.festival {
    background: linear-gradient(135deg, #ec4899, #8b5cf6);
}

.poster.qr {
    background: linear-gradient(135deg, #0f766e, #14b8a6);
    color: #ecfeff;
}

.poster.site {
    background: linear-gradient(135deg, #7c3aed, #2563eb);
}

.poster.time {
    background: linear-gradient(135deg, #2563eb, #06b6d4);
}

.poster.new {
    background: linear-gradient(135deg, #f43f5e, #7c3aed);
}

.poster-meta {
    padding: 10px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.poster-meta strong {
    display: block;
    font-size: 14px;
    margin-bottom: 6px;
}

.tags {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    margin-bottom: 9px;
}

.tag {
    padding: 3px 8px;
    border-radius: 999px;
    background: #dbeafe;
    color: var(--blue);
    font-size: 11px;
    font-weight: 800;
}

.poster-actions {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.fav {
    color: #9ca3af;
    font-size: 22px;
}

.material-maker {
    overflow: visible;
    border-color: rgba(225, 29, 72, .22);
}

.material-maker-head {
    padding: 14px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid #e8edf5;
}

.material-maker-head h2 {
    margin: 0;
    color: #111827;
    font-size: 19px;
    line-height: 1.2;
}

.material-maker-head p {
    margin: 5px 0 0;
    color: #64748b;
    font-size: 12px;
    line-height: 1.45;
}

.material-download {
    width: auto;
    min-width: 96px;
    height: 36px;
    padding: 0 12px;
    font-size: 13px;
}

.material-maker-body {
    padding: 12px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 240px;
    gap: 12px;
    align-items: start;
}

.material-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.material-form label {
    display: block;
    min-width: 0;
}

.material-form label:nth-child(5),
.material-form label:nth-child(6) {
    grid-column: 1 / -1;
}

.material-form span {
    display: block;
    margin-bottom: 6px;
    color: #475569;
    font-size: 12px;
    font-weight: 850;
}

.material-form input,
.material-form textarea {
    width: 100%;
    border: 1px solid #dbe3ee;
    border-radius: 8px;
    background: #fff;
    color: #111827;
    font-family: inherit;
    font-size: 14px;
    font-weight: 750;
}

.material-form input {
    height: 38px;
    padding: 0 10px;
}

.material-form textarea {
    min-height: 76px;
    resize: vertical;
    padding: 9px 10px;
    line-height: 1.45;
}

.material-form input:focus,
.material-form textarea:focus {
    outline: 2px solid rgba(225, 29, 72, .16);
    border-color: #fb7185;
}

.material-preview-tools {
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.material-preview-tools span {
    min-width: 0;
    color: #111827;
    font-size: 13px;
    font-weight: 900;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.material-preview-tools .secondary-btn {
    width: auto;
    height: 30px;
    padding: 0 10px;
    font-size: 12px;
    white-space: nowrap;
}

.material-preview-stage {
    padding: 8px;
    border-radius: 8px;
    background: #eef2f7;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.material-export-poster {
    width: 220px;
    min-height: 330px;
    padding: 18px;
    color: #fff;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .14);
}

.material-export-poster::before,
.material-export-poster::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.material-export-poster::before {
    inset: 0;
    opacity: .28;
    background:
        linear-gradient(120deg, transparent 0 34%, rgba(255,255,255,.26) 34% 35%, transparent 35%),
        radial-gradient(circle at 84% 14%, rgba(255,255,255,.32), transparent 30%),
        repeating-linear-gradient(135deg, rgba(255,255,255,.08) 0 1px, transparent 1px 9px);
}

.material-export-poster::after {
    right: -34px;
    bottom: -40px;
    width: 148px;
    height: 148px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.22);
    background: rgba(255,255,255,.08);
}

.material-poster-inner {
    position: relative;
    z-index: 1;
    min-height: 294px;
    display: flex;
    flex-direction: column;
}

.material-poster-kicker {
    width: max-content;
    max-width: 100%;
    min-height: 24px;
    padding: 0 9px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    background: rgba(255,255,255,.18);
    color: rgba(255,255,255,.88);
    font-size: 11px;
    font-weight: 900;
}

.material-poster-title {
    margin: 18px 0 0;
    color: #fff;
    font-size: 31px;
    line-height: 1.08;
    font-weight: 950;
}

.material-poster-subtitle {
    margin: 10px 0 0;
    color: rgba(255,255,255,.88);
    font-size: 14px;
    line-height: 1.45;
    font-weight: 750;
}

.material-poster-content {
    margin: 20px 0 0;
    padding: 12px;
    border-radius: 8px;
    background: rgba(255,255,255,.14);
    color: rgba(255,255,255,.92);
    font-size: 13px;
    line-height: 1.55;
}

.material-poster-footer {
    margin-top: auto;
    padding-top: 18px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 58px;
    gap: 10px;
    align-items: end;
}

.material-poster-shop strong,
.material-poster-shop span {
    display: block;
}

.material-poster-shop strong {
    color: #fff;
    font-size: 15px;
    line-height: 1.2;
}

.material-poster-shop span {
    margin-top: 5px;
    color: rgba(255,255,255,.76);
    font-size: 11px;
    line-height: 1.35;
}

.material-poster-qr {
    width: 58px;
    height: 58px;
    padding: 5px;
    border-radius: 8px;
    background: #fff;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 3px;
}

.material-poster-qr i {
    display: block;
    border-radius: 1px;
    background: #111827;
    opacity: .16;
}

.material-poster-qr i:nth-child(1),
.material-poster-qr i:nth-child(2),
.material-poster-qr i:nth-child(4),
.material-poster-qr i:nth-child(6),
.material-poster-qr i:nth-child(7),
.material-poster-qr i:nth-child(9),
.material-poster-qr i:nth-child(11),
.material-poster-qr i:nth-child(13),
.material-poster-qr i:nth-child(15),
.material-poster-qr i:nth-child(17),
.material-poster-qr i:nth-child(18),
.material-poster-qr i:nth-child(21),
.material-poster-qr i:nth-child(23),
.material-poster-qr i:nth-child(24) {
    opacity: .92;
}

.material-theme-lottery {
    background: linear-gradient(150deg, #9f1239 0%, #e11d48 58%, #fb7185 100%);
}

.material-theme-match {
    background: linear-gradient(150deg, #064e3b 0%, #15803d 58%, #84cc16 100%);
}

.material-theme-notice,
.material-theme-time,
.material-theme-new {
    background: linear-gradient(150deg, #1e3a8a 0%, #2563eb 58%, #06b6d4 100%);
}

.material-theme-festival {
    background: linear-gradient(150deg, #831843 0%, #db2777 54%, #8b5cf6 100%);
}

.material-theme-qr,
.material-theme-site {
    background: linear-gradient(150deg, #312e81 0%, #7c3aed 54%, #2563eb 100%);
}

.material-theme-premium {
    background:
        radial-gradient(circle at 18% 14%, rgba(255,255,255,.24), transparent 26%),
        linear-gradient(150deg, #7f1d1d 0%, #b91c1c 48%, #d97706 100%);
}

.material-theme-clean {
    background:
        radial-gradient(circle at 86% 12%, rgba(255,255,255,.34), transparent 24%),
        linear-gradient(150deg, #0f766e 0%, #14b8a6 55%, #38bdf8 100%);
}

.material-theme-dark {
    background:
        radial-gradient(circle at 18% 16%, rgba(250,204,21,.22), transparent 26%),
        linear-gradient(150deg, #111827 0%, #1f2937 56%, #7c2d12 100%);
}

.material-template-grid .template-card {
    cursor: pointer;
}

.material-template-grid .template-card.selected {
    border-color: #fb7185;
    box-shadow: 0 0 0 2px rgba(225, 29, 72, .12);
}

.material-template-grid .template-card.is-hidden {
    display: none;
}

.modal-open {
    overflow: hidden;
}

.material-modal {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
}

.material-modal.open {
    display: flex;
}

.material-modal-mask {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(15, 23, 42, .56);
    backdrop-filter: blur(7px);
}

.material-modal-panel {
    width: min(720px, 100%);
    max-height: min(760px, calc(100vh - 36px));
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .34);
}

.material-modal-head {
    min-height: 62px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid #e2e8f0;
}

.material-modal-head strong,
.material-theme-panel strong {
    display: block;
    color: #111827;
    font-size: 15px;
    font-weight: 950;
    line-height: 1.25;
}

.material-modal-head span {
    display: block;
    margin-top: 4px;
    color: #64748b;
    font-size: 12px;
    font-weight: 750;
}

.material-modal-close {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #475569;
    display: grid;
    place-items: center;
}

.material-modal-close svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.3;
    stroke-linecap: round;
}

.material-modal-body {
    min-height: 0;
    padding: 14px;
    display: grid;
    grid-template-columns: 184px minmax(0, 1fr);
    gap: 14px;
    overflow: auto;
    background: #f1f5f9;
}

.material-theme-panel {
    padding: 12px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #e2e8f0;
}

.material-theme-list {
    margin-top: 10px;
    display: grid;
    gap: 8px;
}

.material-theme-option {
    min-height: 46px;
    padding: 7px 8px;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    color: #334155;
    text-align: left;
}

.material-theme-option.active {
    border-color: #fb7185;
    background: #fff1f2;
    box-shadow: 0 0 0 2px rgba(225, 29, 72, .1);
}

.material-theme-option i {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.32);
}

.material-theme-option span {
    min-width: 0;
    font-size: 13px;
    font-weight: 900;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.material-theme-option small {
    color: #e11d48;
    font-size: 11px;
    font-weight: 900;
}

.material-modal-stage {
    min-height: 474px;
    padding: 18px;
    align-content: center;
}

.material-modal-stage .material-export-poster {
    width: min(286px, 72vw);
    min-height: 430px;
}

.material-modal-stage .material-poster-inner {
    min-height: 394px;
}

.material-modal-actions {
    padding: 12px 14px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    border-top: 1px solid #e2e8f0;
    background: #fff;
}

.input-row {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 10px;
    padding: 12px;
}

.fake-input {
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 8px;
    padding: 11px 13px;
    min-height: 60px;
}

.fake-input label {
    display: block;
    color: #374151;
    font-size: 13px;
    margin-bottom: 5px;
}

.fake-input strong {
    font-size: 27px;
    color: #111827;
}

.fake-input span {
    color: #9ca3af;
    font-size: 14px;
}

.ops-card-head {
    padding: 16px 16px 12px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid rgba(226, 232, 240, .72);
}

.ops-card-head h2 {
    margin: 0;
    font-size: 20px;
    line-height: 1.2;
    color: #111827;
}

.ops-card-head p {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
}

.target-switch {
    flex: 0 0 auto;
    padding: 3px;
    display: inline-flex;
    gap: 2px;
    border-radius: 999px;
    background: #eef2f7;
    border: 1px solid #dbe3ee;
}

.target-switch button {
    height: 28px;
    min-width: 58px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #64748b;
    font-size: 12px;
    font-weight: 900;
}

.target-switch button.active {
    background: #fff;
    color: #e11d48;
    border: 1px solid #fecdd3;
}

.calendar-toolbar {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.calendar-nav {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.calendar-nav button {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #dbe3ee;
    color: #475569;
    font-size: 18px;
    line-height: 0;
    font-weight: 900;
    padding: 0 0 2px;
}

.calendar-nav button:disabled {
    opacity: .42;
}

.calendar-nav strong {
    min-width: 88px;
    color: #111827;
    font-size: 14px;
    text-align: center;
}

.target-card {
    background: #f8fafc;
    border-color: #e2e8f0;
}

.target-card .ops-card-head {
    padding: 11px 12px 7px;
    border-bottom-color: rgba(226, 232, 240, .55);
}

.target-card .ops-card-head h2 {
    font-size: 16px;
}

.target-card .ops-card-head p {
    max-width: 430px;
    margin-top: 3px;
    font-size: 11px;
    line-height: 1.35;
}

.target-card .record-date {
    background: #fff;
    color: #64748b;
}

.target-card .target-grid {
    padding: 8px 12px 4px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.target-card .target-box {
    min-height: 72px;
    padding: 9px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.target-card .target-box.primary {
    background: #fff;
    border-color: #e2e8f0;
}

.target-card .target-box strong {
    margin-top: 5px;
    font-size: 18px;
}

.target-box-main {
    min-width: 0;
    flex: 1 1 auto;
}

.target-mini-ring {
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    position: relative;
}

.target-mini-ring svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    overflow: visible;
}

.target-ring-track,
.target-ring-value {
    fill: none;
}

.target-ring-track {
    stroke: #e8edf5;
}

.target-ring-value {
    stroke: #e11d48;
    stroke-linecap: round;
}

.target-mini-ring strong {
    position: relative;
    z-index: 1;
    color: #111827;
    font-size: 12px;
    line-height: 1;
    font-weight: 950;
}

.target-meta {
    margin-top: 5px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.target-meta b {
    color: #94a3b8;
    font-size: 10px;
    line-height: 1.2;
    font-weight: 700;
}

.target-meta i {
    min-height: 20px;
    padding: 0 7px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    background: #fff1f2;
    color: #be123c;
    font-style: normal;
    font-size: 11px;
    font-weight: 950;
}

.target-box button {
    width: auto;
    height: 28px;
    min-width: 44px;
    flex: 0 0 auto;
    border: 1px solid #fecdd3;
    border-radius: 999px;
    background: #fff1f2;
    color: #be123c;
    padding: 0 10px;
    font-size: 12px;
    font-weight: 900;
}

.calendar-head {
    display: block;
    padding-bottom: 14px;
}

.calendar-head-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.target-grid {
    padding: 13px 14px 6px;
    display: grid;
    grid-template-columns: 1.15fr 1.15fr .9fr;
    gap: 10px;
}

.target-box {
    min-height: 82px;
    padding: 12px;
    border-radius: 8px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.target-box.primary {
    background: linear-gradient(180deg, #fff1f2, #fff);
    border-color: #fecdd3;
}

.target-box span,
.record-field span,
.progress-stats span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.target-box strong {
    display: inline-block;
    margin-top: 8px;
    color: #111827;
    font-size: 24px;
    line-height: 1;
}

.target-box em {
    margin-left: 4px;
    color: #64748b;
    font-style: normal;
    font-size: 12px;
}

.target-card .target-mini-ring strong {
    position: relative;
    z-index: 1;
    display: block;
    margin-top: 0;
    color: #111827;
    font-size: 12px;
    line-height: 1;
    font-weight: 950;
}

.target-actions,
.record-actions {
    padding: 8px 14px 14px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.record-date {
    min-height: 28px;
    padding: 0 9px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    background: #fff1f2;
    color: #be123c;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.record-form {
    padding: 13px 14px 4px;
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 10px;
}

.record-field {
    min-height: 72px;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #fff;
}

.record-field strong {
    display: block;
    margin-top: 7px;
    color: #111827;
    font-size: 28px;
    line-height: 1;
}

.record-field em {
    display: block;
    margin-top: 8px;
    color: #64748b;
    font-style: normal;
    font-size: 13px;
    line-height: 1.4;
}

.progress-card {
    background: #fbfcff;
}

.progress-stats {
    padding: 13px 14px 15px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.calendar-footer-stats {
    padding-top: 8px;
}

.progress-stats div {
    padding: 10px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #e2e8f0;
}

.progress-stats strong {
    display: block;
    margin-top: 5px;
    color: #111827;
    font-size: 16px;
}

.progress-stats strong.up {
    color: #16a34a;
}

.progress-stats strong.down {
    color: #e11d48;
}

.ops-calendar-card {
    background: #fff;
    border-color: rgba(225, 29, 72, .26);
}

.ops-calendar-card .calendar-head {
    background: linear-gradient(180deg, #fff7f8 0%, #fff 78%);
}

.ops-calendar-card .ops-card-head h2 {
    font-size: 21px;
}

.ops-calendar-card .ops-card-head p {
    color: #475569;
}

.calendar-summary {
    padding: 13px 14px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
}

.calendar-summary span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    background: #f8fafc;
    border: 1px solid #edf2f7;
}

.legend-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: inline-block;
}

.legend-dot.recorded {
    background: #16a34a;
}

.legend-dot.missed {
    background: #cbd5e1;
}

.legend-dot.reached {
    background: #e11d48;
}

.submit-full {
    margin: 0 12px 14px;
    width: calc(100% - 24px);
}

.chart-box {
    padding: 12px;
}

.chart {
    height: 174px;
    border-left: 1px solid #d1d5db;
    border-bottom: 1px solid #d1d5db;
    position: relative;
    margin: 4px 8px 0 28px;
    background: repeating-linear-gradient(to top, transparent 0 34px, #f3f4f6 35px);
}

.chart svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.chart-labels {
    display: flex;
    justify-content: space-between;
    color: var(--muted);
    font-size: 11px;
    margin: 7px 8px 0 28px;
}

.calendar {
    padding: 10px 12px 12px;
}

.cal-head, .cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
}

.calendar.year-mode .cal-head {
    display: none;
}

.month-grid {
    margin-top: 6px;
    gap: 4px;
}

.day {
    min-height: 58px;
    padding: 6px 4px 7px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 8px;
    background: #eef2f7;
    color: #475569;
    line-height: 1.15;
    cursor: pointer;
}

.day > span:first-child {
    color: #64748b;
    font-size: 12px;
    font-weight: 750;
    line-height: 1;
}

.day.recorded {
    background: #dcfce7;
    border-color: #bbf7d0;
    color: #14532d;
}

.day.recorded > span:first-child {
    color: rgba(20, 83, 45, .72);
}

.day.muted {
    opacity: .45;
    cursor: default;
}

button.day {
    width: 100%;
    font-family: inherit;
}

.day:focus-visible {
    outline: 2px solid rgba(225, 29, 72, .42);
    outline-offset: 1px;
}

.day .amount {
    display: block;
    margin-top: 6px;
    color: #14532d;
    font-size: 11px;
    line-height: 1.15;
    font-weight: 900;
    letter-spacing: 0;
}

.day:not(.recorded) .amount {
    color: #94a3b8;
    font-size: 10px;
    font-weight: 700;
}

.year-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.year-month {
    min-height: 86px;
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #fff;
    text-align: left;
    font-family: inherit;
    cursor: pointer;
}

button.year-month:focus-visible {
    outline: 2px solid rgba(225, 29, 72, .38);
    outline-offset: 2px;
}

.year-month.reached {
    border-color: #fecdd3;
    background: linear-gradient(180deg, #fff1f2, #fff);
}

.year-month strong {
    display: block;
    color: #111827;
    font-size: 16px;
    line-height: 1.1;
}

.year-month span {
    display: block;
    margin-top: 7px;
    color: #64748b;
    font-size: 11px;
    line-height: 1.35;
}

.year-month-progress {
    height: 6px;
    margin-top: 8px;
    border-radius: 999px;
    overflow: hidden;
    background: #e8edf5;
}

.year-month-progress i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #16a34a, #22c55e);
}

.year-month em {
    display: inline-flex;
    margin-top: 8px;
    min-height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    align-items: center;
    background: #eef2f7;
    color: #475569;
    font-style: normal;
    font-size: 10px;
    font-weight: 900;
}

.year-month.reached em {
    background: #ffe4e6;
    color: #be123c;
}

.sales-modal {
    position: fixed;
    inset: 0;
    display: none;
    z-index: 60;
}

.sales-modal.open {
    display: block;
}

.sales-modal-mask {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .42);
}

.sales-sheet {
    position: absolute;
    left: 50%;
    bottom: calc(var(--safe-bottom) + 12px);
    width: min(430px, calc(100vw - 24px));
    transform: translateX(-50%);
    padding: 16px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid rgba(226, 232, 240, .9);
}

.sales-sheet-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.sales-sheet-head h2 {
    margin: 0;
    color: #111827;
    font-size: 18px;
    line-height: 1.2;
}

.sales-sheet-head p {
    margin: 5px 0 0;
    color: #64748b;
    font-size: 13px;
}

.sheet-close {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: #f1f5f9;
    color: #475569;
    font-size: 22px;
    line-height: 1;
}

.sales-field {
    margin-top: 16px;
    display: block;
}

.sales-field span {
    display: block;
    margin-bottom: 8px;
    color: #475569;
    font-size: 13px;
    font-weight: 850;
}

.sales-field input {
    width: 100%;
    height: 48px;
    border-radius: 8px;
    border: 1px solid #dbe3ee;
    padding: 0 12px;
    color: #111827;
    font-size: 20px;
    font-weight: 850;
}

.sales-field input:focus {
    outline: 2px solid rgba(225, 29, 72, .18);
    border-color: #fb7185;
}

.target-tip {
    margin-top: 10px;
    padding: 9px 10px;
    border-radius: 8px;
    background: #f8fafc;
    color: #64748b;
    font-size: 12px;
    line-height: 1.45;
}

.sales-sheet-actions {
    margin-top: 14px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.cal-head div {
    font-size: 13px;
    color: #374151;
    padding: 8px 0;
    border-bottom: 1px solid var(--line);
}

.profile-card {
    padding: 16px;
    display: grid;
    grid-template-columns: 82px 1fr;
    gap: 14px;
    align-items: center;
}

.mine-profile {
    border-color: rgba(225, 29, 72, .2);
    background:
        radial-gradient(circle at 90% 16%, rgba(225, 29, 72, .12), transparent 30%),
        linear-gradient(135deg, #fff 0%, #fff7ed 48%, #fff1f2 100%);
}

.store-avatar {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: linear-gradient(135deg, #111827, #b91c1c);
    display: grid;
    place-items: center;
    border: 4px solid #fff;
    box-shadow: 0 10px 24px rgba(185, 28, 28, .18);
}

.store-avatar svg {
    width: 42px;
    height: 42px;
    fill: none;
    stroke: #fff;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.profile-main h2 {
    margin: 0;
    font-size: 22px;
    font-weight: 950;
    line-height: 1.15;
}

.mine-profile-title {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.profile-main p {
    margin: 7px 0 0;
    color: #64748b;
    font-size: 13px;
    font-weight: 800;
}

.plan-badge {
    display: inline-flex;
    min-height: 24px;
    align-items: center;
    background: #fff1f2;
    color: #be123c;
    border-radius: 999px;
    padding: 0 9px;
    font-size: 12px;
    font-weight: 900;
}

.mine-status-line {
    margin-top: 11px;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.mine-status-line span {
    min-height: 24px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, .82);
    border: 1px solid rgba(225, 29, 72, .14);
    color: #9f1239;
    font-size: 11px;
    font-weight: 900;
}

.profile-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 12px;
    text-align: center;
}

.profile-stats div {
    border-right: 1px solid var(--line);
}

.profile-stats div:last-child {
    border-right: 0;
}

.profile-stats span {
    color: var(--muted);
    font-size: 12px;
}

.profile-stats strong {
    display: block;
    color: var(--orange);
    font-size: 23px;
    margin-top: 3px;
}

.mine-overview-card .section-title,
.mine-action-card .section-title,
.mine-settings-card .section-title {
    padding-bottom: 8px;
}

.mine-overview-grid {
    padding: 0 12px 14px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.mine-overview-grid div {
    min-height: 82px;
    padding: 10px;
    border-radius: 8px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.mine-overview-grid span,
.mine-overview-grid em,
.mine-action-row em,
.mine-setting-row em {
    display: block;
    color: #64748b;
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
    line-height: 1.35;
}

.mine-overview-grid strong {
    display: block;
    margin-top: 7px;
    color: #111827;
    font-size: 22px;
    line-height: 1;
    font-weight: 950;
}

.mine-overview-grid em {
    margin-top: 7px;
    color: #16a34a;
}

.mine-action-list {
    padding: 0 12px 14px;
    display: grid;
    gap: 8px;
}

.mine-action-row {
    min-height: 66px;
    padding: 10px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: inherit;
    text-decoration: none;
    position: relative;
}

.mine-action-row::after,
.mine-setting-row::after {
    content: "›";
    position: absolute;
    right: 10px;
    color: #94a3b8;
    font-size: 22px;
}

.mine-action-row.primary {
    border-color: rgba(225, 29, 72, .22);
    background: linear-gradient(135deg, #fff1f2, #fff);
}

.mine-action-icon {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background: #f1f5f9;
    color: #334155;
}

.mine-action-row.primary .mine-action-icon {
    background: #e11d48;
    color: #fff;
}

.mine-action-icon svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mine-action-row strong {
    display: block;
    color: #111827;
    font-size: 14px;
    line-height: 1.25;
    font-weight: 950;
}

.mine-action-row em {
    margin-top: 4px;
    padding-right: 20px;
}

.mine-setting-list {
    padding: 2px 12px 10px;
}

.mine-setting-row {
    width: 100%;
    min-height: 52px;
    padding: 8px 30px 8px 0;
    border: 0;
    border-bottom: 1px solid #f1f5f9;
    background: transparent;
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    text-align: left;
}

.mine-setting-row:last-child {
    border-bottom: 0;
}

.mine-setting-row span {
    color: #111827;
    font-size: 14px;
    font-weight: 900;
}

.mine-setting-row em {
    max-width: 150px;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 10px 12px 14px;
}

.feature {
    min-height: 82px;
    border-right: 1px solid #f3f4f6;
    border-bottom: 1px solid #f3f4f6;
    display: grid;
    place-items: center;
    text-align: center;
    font-weight: 850;
    font-size: 13px;
}

.feature:nth-child(4n) {
    border-right: 0;
}

.feature:nth-last-child(-n+4) {
    border-bottom: 0;
}

.feature i {
    display: block;
    font-style: normal;
    font-size: 27px;
    margin-bottom: 6px;
}

.help-list {
    padding: 6px 12px 14px;
}

.help-row {
    height: 50px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #f3f4f6;
    font-size: 15px;
    font-weight: 800;
}

.help-row:last-child {
    border-bottom: 0;
}

.help-row i {
    font-style: normal;
    font-size: 23px;
    margin-right: 10px;
}

.help-row::after {
    content: "›";
    margin-left: auto;
    color: #9ca3af;
    font-size: 24px;
}

.logout {
    margin: 16px 12px;
    width: calc(100% - 24px);
    height: 50px;
    border-radius: 8px;
    border: 1px solid var(--orange);
    background: #fff;
    color: var(--orange);
    font-size: 16px;
    font-weight: 950;
}

@media (max-width: 520px) {
    :root {
        --page-pad: 10px;
        --screen-gap: 10px;
    }

    .mascot {
        width: 88px;
        height: 88px;
        margin-right: 10px;
    }

    .dog-face {
        width: 68px;
        height: 68px;
    }

    .dog-body {
        width: 58px;
        height: 42px;
    }

    .ball {
        width: 32px;
        height: 32px;
    }

    .waterfall {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .material-maker-head,
    .material-maker-body {
        grid-template-columns: 1fr;
    }

    .material-maker-head {
        display: grid;
    }

    .material-download {
        width: 100%;
    }

    .material-form {
        grid-template-columns: 1fr;
    }

    .material-preview-tools {
        display: grid;
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .material-preview-tools .secondary-btn {
        width: 100%;
    }

    .material-preview-stage {
        padding: 10px;
    }

    .material-export-poster {
        width: min(260px, 100%);
    }

    .material-modal {
        padding: 10px;
        align-items: stretch;
    }

    .material-modal-panel {
        max-height: calc(100vh - 20px);
    }

    .material-modal-body {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 10px;
    }

    .material-theme-panel {
        padding: 10px;
    }

    .material-theme-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .material-theme-option {
        grid-template-columns: 24px minmax(0, 1fr);
    }

    .material-theme-option i {
        width: 24px;
        height: 24px;
    }

    .material-theme-option small {
        display: none;
    }

    .material-modal-stage {
        min-height: 420px;
    }

    .template-card {
        min-height: 210px;
    }

    .poster,
    .poster.large,
    .poster.small {
        height: 108px;
        flex-basis: 108px;
        padding: 9px;
    }

    .poster h3 {
        font-size: 16px;
    }

    .poster .decor {
        font-size: 28px;
    }

    .poster-meta {
        padding: 8px;
    }

    .tag {
        padding: 2px 5px;
        font-size: 10px;
    }

    .task-row {
        grid-template-columns: 42px 1fr;
        gap: 9px;
    }

    .task-row .badge {
        grid-column: 2;
        justify-self: start;
    }

    .task-row .action-btn {
        grid-column: 2;
        justify-self: start;
    }

    .flow-row,
    .flow-row.active {
        grid-template-columns: 30px minmax(0, 1fr) 78px;
        gap: 9px;
    }

    .flow-row .action-btn {
        grid-column: 3;
        width: 78px;
        min-width: 78px;
        justify-self: end;
    }

    .home-summary {
        grid-template-columns: 1fr;
    }

    .ops-card-head {
        flex-direction: column;
        align-items: stretch;
    }

    .calendar-toolbar {
        align-items: stretch;
    }

    .calendar-head-top {
        flex-direction: column;
    }

    .calendar-nav {
        justify-content: space-between;
    }

    .calendar-nav strong {
        flex: 1;
    }

    .target-switch {
        width: max-content;
    }

    .target-grid,
    .record-form {
        grid-template-columns: 1fr;
    }

    .target-actions,
    .record-actions {
        grid-template-columns: 1fr;
    }

    .progress-stats {
        grid-template-columns: 1fr;
    }

    .year-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .goal-body {
        grid-template-columns: 110px 1fr;
    }

    .goal-actions {
        grid-column: 1 / -1;
        grid-template-columns: 1fr 1fr;
    }

    .donut {
        width: 100px;
        height: 100px;
    }

    .donut::after {
        width: 66px;
        height: 66px;
    }

    .donut-inner strong {
        font-size: 27px;
    }

    .quick-grid,
    .quick-grid.compact,
    .module-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .recommend-list {
        grid-template-columns: 1fr;
    }

    .store-card {
        grid-template-columns: 1fr;
    }

    .store-cover {
        height: 150px;
    }

    .site-status-card,
    .site-apply-card,
    .review-reject {
        grid-template-columns: 1fr;
    }

    .site-url {
        width: max-content;
        max-width: 100%;
    }

    .site-flow {
        grid-template-columns: 1fr;
    }

    .micro-overview,
    .micro-premium-card,
    .status-summary,
    .share-art-lite,
    .micro-choice-block {
        grid-template-columns: 1fr;
    }

    .share-card-mini {
        min-height: 108px;
    }

    .micro-overview .full-url {
        width: 100%;
    }

    .micro-credential {
        min-height: 108px;
    }

    .micro-form-grid,
    .micro-compact-grid,
    .micro-manage-grid,
    .site-style-grid,
    .site-form-grid,
    .site-feature-grid,
    .micro-actions {
        grid-template-columns: 1fr;
    }

    .profile-card {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .store-avatar {
        margin: 0 auto;
    }

    .mine-profile-title,
    .mine-status-line {
        justify-content: center;
    }

    .mine-overview-grid {
        grid-template-columns: 1fr;
    }

    .mine-overview-grid div {
        min-height: 68px;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 10px;
        align-items: center;
    }

    .mine-overview-grid strong {
        grid-row: 1 / span 2;
        grid-column: 2;
        margin-top: 0;
    }

    .mine-overview-grid em {
        margin-top: 2px;
    }

    .mine-setting-row {
        grid-template-columns: 1fr;
        gap: 3px;
    }

    .mine-setting-row em {
        max-width: 100%;
        text-align: left;
    }

    #siteCreate .micro-premium-card {
        grid-template-columns: 1fr;
    }

    #siteCreate .micro-credential {
        min-height: 118px;
    }
}