:root {
    --optimized-padding-sm: 16px;
    --optimized-padding-md: 20px;
    --optimized-padding-lg: 24px;
    --optimized-gap-sm: 12px;
    --optimized-gap-md: 16px;
    --optimized-gap-lg: 20px;
    --optimized-radius-sm: 18px;
    --optimized-radius-md: 24px;
    --optimized-radius-lg: 32px;
}

.app-frame {
    padding-bottom: 100px !important;
}

.panel {
    padding: var(--optimized-padding-md) !important;
    border-radius: var(--optimized-radius-md) !important;
    margin-bottom: var(--optimized-gap-md) !important;
}

.panel__header {
    margin-bottom: var(--optimized-gap-md) !important;
    padding-bottom: var(--optimized-gap-sm) !important;
}

.layout-grid {
    gap: var(--optimized-gap-md) !important;
}

.stack-list {
    gap: var(--optimized-gap-sm) !important;
}

.stack-item {
    padding: var(--optimized-padding-sm) !important;
    border-radius: var(--optimized-radius-sm) !important;
}

.relationship-timeline__item {
    padding: var(--optimized-padding-md) !important;
    border-radius: var(--optimized-radius-md) !important;
    margin-bottom: var(--optimized-gap-md) !important;
}

.relationship-timeline__content {
    gap: var(--optimized-gap-sm) !important;
}

.relationship-timeline__meta {
    margin-bottom: 8px !important;
    gap: 8px !important;
}

.relationship-timeline__tags {
    margin-top: 12px !important;
    gap: 8px !important;
}

.timeline-stage__grid {
    gap: var(--optimized-gap-lg) !important;
}

.timeline-stage__aside {
    gap: var(--optimized-gap-md) !important;
}

.hero-card {
    padding: var(--optimized-padding-lg) !important;
    border-radius: var(--optimized-radius-lg) !important;
    margin-bottom: var(--optimized-gap-md) !important;
}

.hero-actions {
    gap: var(--optimized-gap-sm) !important;
    margin-top: var(--optimized-gap-md) !important;
}

.page-head {
    padding-bottom: var(--optimized-gap-md) !important;
    margin-bottom: var(--optimized-gap-md) !important;
}

.page-head--split {
    gap: var(--optimized-gap-sm) !important;
}

.metric-strip {
    gap: var(--optimized-gap-md) !important;
    padding: var(--optimized-padding-sm) 0 !important;
}

.mini-stat {
    padding: var(--optimized-padding-sm) !important;
    border-radius: var(--optimized-radius-sm) !important;
}

.detail-list {
    gap: var(--optimized-gap-sm) !important;
}

.detail-list__item {
    padding: var(--optimized-padding-sm) !important;
    border-radius: var(--optimized-radius-sm) !important;
}

.button {
    padding: 12px 20px !important;
    border-radius: var(--optimized-radius-sm) !important;
}

.button--block {
    width: 100% !important;
}

.input {
    padding: 12px 16px !important;
    border-radius: var(--optimized-radius-sm) !important;
}

.input--textarea {
    padding: 14px 16px !important;
    min-height: 120px !important;
}

.field {
    margin-bottom: var(--optimized-gap-md) !important;
}

.field span:first-child {
    margin-bottom: 8px !important;
    display: block !important;
}

.tag-cloud {
    gap: 8px !important;
}

.tag {
    padding: 8px 16px !important;
    border-radius: 999px !important;
}

.pill {
    padding: 6px 14px !important;
    border-radius: 999px !important;
}

.status-chip {
    padding: 6px 14px !important;
    border-radius: 999px !important;
}

.evidence-strip {
    gap: 8px !important;
    margin-top: 12px !important;
}

.evidence-pill {
    padding: 6px 12px !important;
    border-radius: 999px !important;
}

.timeline-stage__day {
    margin-bottom: var(--optimized-gap-lg) !important;
}

.timeline-stage__day-label {
    margin-bottom: var(--optimized-gap-md) !important;
    padding: var(--optimized-padding-sm) 0 !important;
}

.timeline-stage__controls {
    gap: var(--optimized-gap-md) !important;
    margin-bottom: var(--optimized-gap-lg) !important;
    flex-wrap: wrap !important;
}

.timeline-stage__filter {
    min-width: 180px !important;
}

.stats-grid {
    gap: var(--optimized-gap-md) !important;
    margin-bottom: var(--optimized-gap-md) !important;
}

.stat-card {
    padding: var(--optimized-padding-md) !important;
    border-radius: var(--optimized-radius-md) !important;
}

.progress-track {
    margin: var(--optimized-gap-md) 0 !important;
    height: 8px !important;
    border-radius: 999px !important;
}

.progress-track__fill {
    border-radius: 999px !important;
}

.tab-bar {
    padding: 14px !important;
    border-radius: 28px !important;
    bottom: max(16px, calc(env(safe-area-inset-bottom) + 12px)) !important;
}

.tab-item {
    min-height: 64px !important;
    border-radius: 20px !important;
    gap: 6px !important;
}

.tab-item span:last-child {
    font-size: 12px !important;
}

.modal-sheet {
    padding: var(--optimized-padding-lg) !important;
    border-radius: var(--optimized-radius-lg) !important;
}

.client-ai-panel {
    padding: var(--optimized-padding-md) !important;
    border-radius: var(--optimized-radius-md) !important;
}

.client-ai-note {
    padding: var(--optimized-padding-sm) !important;
    border-radius: var(--optimized-radius-sm) !important;
    margin-bottom: var(--optimized-gap-sm) !important;
}

.upload-row {
    gap: var(--optimized-gap-sm) !important;
    flex-wrap: wrap !important;
}

.upload-preview {
    margin-top: var(--optimized-gap-sm) !important;
    padding: var(--optimized-padding-sm) !important;
    border-radius: var(--optimized-radius-sm) !important;
}

.segmented {
    gap: 8px !important;
    padding: 6px !important;
    border-radius: var(--optimized-radius-sm) !important;
}

.segmented__item {
    padding: 10px 16px !important;
    border-radius: 14px !important;
}

.option-grid {
    gap: var(--optimized-gap-sm) !important;
}

.select-card {
    padding: var(--optimized-padding-md) !important;
    border-radius: var(--optimized-radius-md) !important;
}

.panel-inline-hint {
    padding: var(--optimized-padding-sm) !important;
    border-radius: var(--optimized-radius-sm) !important;
    margin-bottom: var(--optimized-gap-md) !important;
}

.panel-note {
    padding: var(--optimized-padding-sm) 0 !important;
}

.empty-state {
    padding: var(--optimized-padding-lg) !important;
    border-radius: var(--optimized-radius-md) !important;
}

.profile-banner {
    padding: var(--optimized-padding-md) !important;
    border-radius: var(--optimized-radius-md) !important;
    margin-bottom: var(--optimized-gap-md) !important;
}

.timeline-ribbon {
    padding: var(--optimized-padding-md) !important;
    border-radius: var(--optimized-radius-md) !important;
    margin-bottom: var(--optimized-gap-md) !important;
}

.timeline-ribbon__top {
    margin-bottom: var(--optimized-gap-md) !important;
}

.timeline-ribbon__list {
    gap: var(--optimized-gap-sm) !important;
    margin: var(--optimized-gap-md) 0 !important;
}

.timeline-ribbon__event {
    padding: var(--optimized-padding-sm) !important;
    border-radius: var(--optimized-radius-sm) !important;
}

.report-cover {
    padding: var(--optimized-padding-lg) !important;
    border-radius: var(--optimized-radius-lg) !important;
    margin-bottom: var(--optimized-gap-md) !important;
}

.report-cover__body {
    gap: var(--optimized-gap-md) !important;
}

.report-cover__meta {
    gap: var(--optimized-gap-md) !important;
    margin-top: var(--optimized-gap-md) !important;
}

.report-cover__actions {
    gap: var(--optimized-gap-sm) !important;
    margin-top: var(--optimized-gap-md) !important;
    flex-wrap: wrap !important;
}

#page-home .layout-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 32px 32px !important;
    align-items: start !important;
}

#home-status-panel,
#home-report-panel {
    min-height: 0 !important;
    align-self: start !important;
}

#home-report-panel {
    position: static !important;
    top: auto !important;
    right: auto !important;
    width: auto !important;
    z-index: auto !important;
}

#home-report-panel .editorial-rows {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
}

#home-report-panel .editorial-row {
    padding: 14px 0 !important;
}

#home-report-panel .editorial-row__value {
    font-size: 18px !important;
}

.profile-insight-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.profile-action-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
}

.profile-relations-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

body[data-page="auth"] #tab-bar,
body[data-page="pair"] #tab-bar,
body[data-page="pair-waiting"] #tab-bar {
    display: none !important;
}

@media (min-width: 768px) {
    #home-report-panel {
        position: static !important;
        top: auto !important;
        right: auto !important;
        width: auto !important;
        align-self: start !important;
        z-index: auto !important;
    }
}

.profile-insight-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
    align-items: stretch !important;
}

.profile-insight-card {
    min-width: 0 !important;
    height: 100% !important;
}

.profile-insight-card .profile-sheet,
.profile-insight-card .cockpit-shell {
    height: 100% !important;
}

.profile-insight-card .profile-sheet {
    padding: 16px !important;
    box-sizing: border-box !important;
}

.profile-insight-card .profile-sheet__rows {
    gap: 8px !important;
}

.profile-insight-card .profile-sheet__row {
    padding: 8px 0 !important;
}

.profile-insight-card .profile-sheet__row span,
.profile-insight-card .profile-sheet__row strong,
.profile-insight-card .profile-sheet__row p,
.profile-insight-card .profile-sheet__title,
.profile-insight-card .profile-sheet__eyebrow,
.profile-insight-card .cockpit-shell__head,
.profile-insight-card .cockpit-shell__head > p,
.profile-insight-card .profile-action strong,
.profile-insight-card .profile-action p {
    text-align: left !important;
}

.profile-insight-card .profile-sheet__title,
.profile-insight-card .profile-action strong,
.profile-insight-card .cockpit-shell__head h4 {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.profile-insight-card .profile-sheet__row strong,
.profile-insight-card .profile-sheet__row p,
.profile-insight-card .profile-action p,
.profile-insight-card .cockpit-shell__head > p {
    overflow-wrap: normal !important;
    word-break: keep-all !important;
}

.profile-insight-card .profile-action-list {
    padding: 16px !important;
    box-sizing: border-box !important;
    border-top: 0 !important;
}

.profile-insight-card .profile-action {
    padding: 0 !important;
    gap: 8px !important;
    align-items: center !important;
}

.profile-insight-card .profile-action span:last-child {
    white-space: nowrap !important;
}

.profile-insight-card .cockpit-shell--actions {
    padding: 16px !important;
    box-sizing: border-box !important;
}

.profile-insight-card .profile-strategy-panel {
    display: grid !important;
    gap: 8px !important;
    height: 100% !important;
}

/* ========================================
   Responsive: Mobile
   ======================================== */

@media (max-width: 640px) {
    :root {
        --optimized-padding-sm: 14px;
        --optimized-padding-md: 16px;
        --optimized-padding-lg: 20px;
        --optimized-gap-sm: 10px;
        --optimized-gap-md: 14px;
        --optimized-gap-lg: 18px;
    }
    
    .panel {
        padding: var(--optimized-padding-md) !important;
    }
    
    .hero-card {
        padding: var(--optimized-padding-md) !important;
    }
    
    .tab-bar {
        width: min(680px, calc(100% - 28px)) !important;
        padding: 12px !important;
    }

    .profile-insight-grid {
        grid-template-columns: 1fr !important;
    }
    
    .tab-item {
        min-height: 58px !important;
    }

    /* 首页：移动端单列 */
    #page-home .layout-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ========================================
   Home Journal Card - 左边板块新设计
   ======================================== */

.home-journal-card {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 24px 28px 28px;
    background: linear-gradient(145deg, rgba(255,252,250,0.95), rgba(255,248,243,0.9));
    border-radius: var(--optimized-radius-lg, 24px);
    border: 1px solid rgba(214, 133, 98, 0.12);
    box-shadow: 
        0 2px 8px rgba(160, 120, 98, 0.06),
        inset 0 1px 0 rgba(255,255,255,0.8);
}

.home-journal-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.home-journal-card__eyebrow {
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-faint, #8c6b6b);
}

.home-journal-card__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    color: var(--ink-soft, #5a3d3d);
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(214, 133, 98, 0.15);
    border-radius: 999px;
}

.home-journal-card__badge--done {
    color: var(--sage, #7ba98a);
    background: rgba(123, 169, 138, 0.12);
    border-color: rgba(123, 169, 138, 0.2);
}

.home-journal-card__body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.home-journal-card__title {
    margin: 0;
    font-family: var(--font-display, 'Noto Serif SC', serif);
    font-size: clamp(20px, 2vw, 26px);
    font-weight: 600;
    line-height: 1.4;
    color: var(--ink, #2a1414);
}

.home-journal-card__desc {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: var(--ink-soft, #5a3d3d);
}

.home-journal-card__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 16px 0;
    border-top: 1px dashed rgba(214, 133, 98, 0.15);
    border-bottom: 1px dashed rgba(214, 133, 98, 0.15);
}

.home-journal-card__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
}

.home-journal-card__stat-label {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--ink-faint, #8c6b6b);
}

.home-journal-card__stat-value {
    font-size: 15px;
    font-weight: 600;
    color: var(--ink, #2a1414);
}

.home-journal-card__actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.home-journal-card__actions .button {
    flex: 1;
    min-width: 120px;
}