/* ============================================================
   Phone Check App - 黑白手绘风 / 亚文化拼贴风
   ============================================================ */

/* ---- 字体引入 ---- */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;600;700&family=Ma+Shan+Zheng&display=swap');

/* ---- 打开时隐藏底层滚动和 Dock ---- */
body.pc-app-open {
    overflow: hidden !important;
}
body.pc-app-open .dock,
body.pc-app-open #dock,
body.pc-app-open .bottom-nav,
body.pc-app-open .app-dock,
body.pc-app-open .tab-bar,
body.pc-app-open .bottom-bar,
body.pc-app-open .nav-dock {
    display: none !important;
}

/* ---- 容器 ---- */
.pc-app {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    background: #FAFAF8;
    z-index: 99999;
    overflow: hidden;
    display: none;
    flex-direction: column;
    font-family: 'Caveat', 'Ma Shan Zheng', 'Segoe Print', 'Comic Sans MS', cursive, sans-serif;
    color: #1A1A1A;
    --pc-safe-top: env(safe-area-inset-top, 0px);
    --pc-safe-bottom: env(safe-area-inset-bottom, 0px);
    padding-top: var(--pc-safe-top);
    padding-bottom: var(--pc-safe-bottom);
    box-sizing: border-box;
}


/* JS 设置 display:flex 或加 active 类时显示 */
.pc-app[style*="display: flex"],
.pc-app.active,
.pc-app.pc-active {
    display: flex !important;
}


/* ---- 页面基础 ---- */
.pc-page,
.pc-subpage {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: auto;
    display: none;
    flex-direction: column;
    background: #FAFAF8;
    z-index: 1;
    overflow: hidden;
    min-height: 0;
}
.pc-page.pc-active,
.pc-subpage.pc-active {
    display: flex;
}
.pc-subpage {
    z-index: 10;
    animation: pcSlideIn 0.3s ease forwards;
}
@keyframes pcSlideIn {
    from { transform: translateX(100%); opacity: 0.8; }
    to   { transform: translateX(0);    opacity: 1;   }
}
@keyframes pcSlideOut {
    from { transform: translateX(0);    opacity: 1;   }
    to   { transform: translateX(100%); opacity: 0.8; }
}

/* ---- 手绘辅助 class ---- */
/* 大卡片用 */
.pc-sketch-border {
    border: 2px solid #1A1A1A;
    border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
}
/* 小元素用 */
.pc-sketch-sm {
    border: 1.5px solid #1A1A1A;
    border-radius: 30px 4px 25px 4px / 4px 25px 4px 30px;
}

/* ---- 通用头部 ---- */
.pc-header {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    background: #FAFAF8;
    border-bottom: 2px dashed #C0C0C0;
    min-height: 50px;
    gap: 10px;
    flex-shrink: 0;
    position: relative;
    z-index: 5;
}
/* 所有彩色 header 变体统一为黑白 */
.pc-header-blue,
.pc-header-purple,
.pc-header-green,
.pc-header-yellow,
.pc-header-brown,
.pc-header-indigo,
.pc-header-pink,
.pc-header-cyan {
    background: #1A1A1A;
    color: #F0F0F0;
    border-bottom: 2px solid #333;
}
.pc-header-blue .pc-back-btn,
.pc-header-purple .pc-back-btn,
.pc-header-green .pc-back-btn,
.pc-header-brown .pc-back-btn,
.pc-header-indigo .pc-back-btn,
.pc-header-pink .pc-back-btn,
.pc-header-cyan .pc-back-btn,
.pc-header-yellow .pc-back-btn {
    color: #E0E0E0;
}
.pc-header-blue .pc-gen-btn,
.pc-header-purple .pc-gen-btn,
.pc-header-green .pc-gen-btn,
.pc-header-brown .pc-gen-btn,
.pc-header-indigo .pc-gen-btn,
.pc-header-pink .pc-gen-btn,
.pc-header-cyan .pc-gen-btn,
.pc-header-yellow .pc-gen-btn {
    color: #1A1A1A;
    background: #E0E0E0;
    border: 1.5px solid #999;
}

.pc-back-btn {
    background: none; border: none;
    font-size: 18px; color: #1A1A1A;
    cursor: pointer; padding: 5px;
    display: flex; align-items: center;
}
.pc-title {
    flex: 1;
    font-size: 19px;
    font-weight: 700;
    text-align: center;
    letter-spacing: 1px;
}
.pc-gen-btn {
    background: #1A1A1A;
    color: #F0F0F0;
    border: 2px solid #1A1A1A;
    border-radius: 20px 3px 18px 3px / 3px 18px 3px 20px;
    padding: 6px 14px;
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    display: flex; align-items: center; gap: 5px;
    white-space: nowrap;
    transition: opacity 0.2s;
}
.pc-gen-btn:active { opacity: 0.7; }
.pc-header-actions {
    display: flex; gap: 8px;
}
.pc-header-actions .pc-gen-btn {
    padding: 6px 10px;
}

/* ---- 角色选择页 ---- */
.pc-select-body {
    flex: 1; overflow-y: auto;
    padding: 20px 15px;
    background: #FAFAF8;
}
.pc-select-hint {
    text-align: center;
    color: #888;
    font-size: 15px;
    margin-bottom: 20px;
    letter-spacing: 1px;
}
.pc-select-hint::before { content: '✧ '; }
.pc-select-hint::after  { content: ' ✧'; }
.pc-char-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}
.pc-char-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 15px 10px;
    background: #fff;
    border: 2px solid #1A1A1A;
    border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    box-shadow: 3px 3px 0 rgba(0,0,0,0.12);
    position: relative;
}
.pc-char-card::after {
    content: '♡';
    position: absolute;
    top: 4px; right: 8px;
    font-size: 10px;
    color: #C0C0C0;
}
.pc-char-card:active {
    transform: scale(0.95) rotate(-1deg);
    box-shadow: 1px 1px 0 rgba(0,0,0,0.15);
}
.pc-char-avatar {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #1A1A1A;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px;
    color: #1A1A1A;
    overflow: hidden;
}
.pc-char-avatar img {
    width: 100%; height: 100%;
    object-fit: cover;
    filter: grayscale(80%) contrast(1.1);
}
.pc-char-name {
    font-size: 14px;
    font-weight: 700;
    color: #1A1A1A;
    text-align: center;
    word-break: break-all;
    max-width: 100%;
}
.pc-no-friends {
    text-align: center;
    color: #999;
    padding: 60px 20px;
}
.pc-no-friends i { font-size: 48px; margin-bottom: 15px; }
.pc-no-friends p { font-size: 16px; margin-bottom: 5px; }
.pc-no-friends span { font-size: 13px; }

/* ---- 锁屏页 ---- */
.pc-lock-screen {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    background: #0A0A0A;
    padding: 60px 30px calc(40px + env(safe-area-inset-bottom, 20px));
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
}

.pc-lock-screen::before {
    content: '✦ 〰〰〰 ୨୧ 〰〰〰 ✦';
    position: absolute;
    top: 15%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 14px;
    color: rgba(255,255,255,0.12);
    letter-spacing: 4px;
    white-space: nowrap;
    pointer-events: none;
}
.pc-lock-screen::after {
    content: '♫ ⁺˳✧༚ ♪';
    position: absolute;
    bottom: 25%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    color: rgba(255,255,255,0.08);
    letter-spacing: 6px;
    pointer-events: none;
}
.pc-lock-top { text-align: center; position: relative; z-index: 1; }
.pc-lock-time {
    font-size: 64px;
    font-weight: 200;
    color: #E0E0E0;
    letter-spacing: 4px;
    line-height: 1;
    font-family: 'Caveat', cursive;
}
.pc-lock-date {
    font-size: 16px;
    color: rgba(255,255,255,0.45);
    margin-top: 8px;
    letter-spacing: 2px;
}
.pc-lock-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 1;
}
.pc-lock-avatar {
    width: 80px; height: 80px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    border: 2px solid rgba(255,255,255,0.2);
    display: flex; align-items: center; justify-content: center;
    font-size: 36px;
    color: #ccc;
    overflow: hidden;
}
.pc-lock-avatar img {
    width: 100%; height: 100%; object-fit: cover;
    filter: grayscale(100%) contrast(1.2);
}
.pc-lock-name {
    color: rgba(255,255,255,0.7);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 2px;
}
.pc-lock-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    width: 100%;
    position: relative;
    z-index: 1;
}
.pc-lock-input-wrap {
    display: flex;
    gap: 10px;
    width: 100%;
    max-width: 280px;
}
.pc-password-input {
    flex: 1;
    padding: 12px 16px;
    border: 1.5px solid rgba(255,255,255,0.2);
    border-radius: 8px;
    background: rgba(255,255,255,0.05);
    color: #E0E0E0;
    font-size: 16px;
    font-family: inherit;
    outline: none;
    text-align: center;
    letter-spacing: 4px;
}
.pc-password-input::placeholder { color: rgba(255,255,255,0.25); letter-spacing: 2px; }
.pc-password-input:focus { border-color: rgba(255,255,255,0.4); }
.pc-unlock-btn {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    border: 1.5px solid rgba(255,255,255,0.2);
    color: #ccc;
    font-size: 18px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.2s;
}
.pc-unlock-btn:active { background: rgba(255,255,255,0.2); }
.pc-force-btn {
    padding: 10px 24px;
    background: rgba(255,255,255,0.05);
    border: 1.5px dashed rgba(255,255,255,0.2);
    border-radius: 20px;
    color: #999;
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s;
}
.pc-force-btn:active { background: rgba(255,255,255,0.12); }
.pc-lock-hint {
    font-size: 12px;
    color: rgba(255,255,255,0.25);
    display: flex; align-items: center; gap: 6px;
}

/* ---- 手机主屏幕 ---- */
.pc-phone-statusbar {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    background: #FAFAF8;
    border-bottom: 1.5px dashed #D0D0D0;
    flex-shrink: 0;
}
.pc-sb-name {
    font-size: 14px;
    font-weight: 700;
    color: #1A1A1A;
}
.pc-sb-time {
    flex: 1;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    color: #1A1A1A;
}
.pc-sb-settings {
    background: none; border: none;
    font-size: 20px;
    color: #666;
    cursor: pointer;
    padding: 5px;
}
.pc-phone-wallpaper {
    flex: 1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 12px 10px 0;
    background: #FAFAF8;
    overflow-y: auto;
    position: relative;
}

/* 壁纸装饰 */
.pc-phone-wallpaper::before {
    content: '〰〰 ୨୧ 〰〰';
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    color: #D8D8D8;
    letter-spacing: 3px;
    pointer-events: none;
}
.pc-phone-wallpaper::after {
    content: '✧༚ ˳⁺';
    position: absolute;
    bottom: 12px;
    right: 20px;
    font-size: 10px;
    color: #D8D8D8;
    pointer-events: none;
}
.pc-app-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px 15px;
    max-width: 320px;
}
.pc-app-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}
.pc-app-icon:active .pc-icon-box { transform: scale(0.9) rotate(-2deg); }
.pc-icon-box {
    width: 58px; height: 58px;
    border-radius: 16px 4px 14px 4px / 4px 14px 4px 16px;
    display: flex; align-items: center; justify-content: center;
    font-size: 26px;
    color: #1A1A1A;
    background: #fff;
    border: 2px solid #1A1A1A;
    box-shadow: 2px 3px 0 rgba(0,0,0,0.1);
    transition: transform 0.15s;
}
.pc-app-icon span {
    font-size: 12px;
    color: #333;
    font-weight: 600;
    text-align: center;
    font-family: inherit;
}
.pc-phone-dock {
    padding: 0;
    padding-bottom: max(10px, var(--pc-safe-bottom));
    text-align: center;
    flex-shrink: 0;
    background: none;
    border: none;
    margin: 0 30px 12px;
}


.pc-dock-btn {
    padding: 10px 20px;
    background: transparent;
    border: 1.5px dashed #AAA;
    border-radius: 20px;
    font-size: 13px;
    color: #888;
    cursor: pointer;
    font-family: inherit;
}
.pc-dock-btn:active { background: rgba(0,0,0,0.04); }

/* ---- 设置页 ---- */
.pc-settings-body {
    flex: 1; overflow-y: auto;
    padding: 20px 15px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.pc-setting-card {
    background: #fff;
    border: 2px solid #1A1A1A;
    border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
    padding: 16px;
    box-shadow: 3px 3px 0 rgba(0,0,0,0.08);
}
.pc-setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.pc-setting-info {
    display: flex; align-items: center; gap: 10px;
    font-size: 16px; font-weight: 600; color: #1A1A1A;
}
.pc-setting-info i { font-size: 18px; }
.pc-setting-desc {
    margin-top: 8px;
    font-size: 13px;
    color: #888;
    line-height: 1.5;
}
.pc-switch {
    position: relative;
    width: 51px; height: 31px;
    display: inline-block;
}
.pc-switch input { opacity: 0; width: 0; height: 0; }
.pc-slider {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #D0D0D0;
    border-radius: 31px;
    border: 1.5px solid #999;
    cursor: pointer;
    transition: background 0.3s;
}
.pc-slider::before {
    content: '';
    position: absolute;
    width: 25px; height: 25px;
    left: 2px; bottom: 2px;
    background: #fff;
    border: 1.5px solid #999;
    border-radius: 50%;
    box-shadow: 1px 1px 0 rgba(0,0,0,0.1);
    transition: transform 0.3s;
}
.pc-switch input:checked + .pc-slider {
    background: #1A1A1A;
    border-color: #1A1A1A;
}
.pc-switch input:checked + .pc-slider::before {
    transform: translateX(20px);
    border-color: #1A1A1A;
}
.pc-reverse-config {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1.5px dashed #D0D0D0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pc-config-row {
    display: flex; align-items: center; gap: 10px;
}
.pc-config-row label {
    font-size: 14px; color: #333; white-space: nowrap;
}
.pc-config-input {
    flex: 1;
    padding: 8px 12px;
    border: 1.5px solid #1A1A1A;
    border-radius: 8px 2px 8px 2px / 2px 8px 2px 8px;
    font-size: 14px;
    font-family: inherit;
    outline: none;
    background: #FAFAF8;
}
.pc-config-input:focus { border-color: #000; box-shadow: 0 0 0 1px #000; }
.pc-save-btn {
    padding: 10px;
    background: #1A1A1A;
    color: #F0F0F0;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
}
.pc-save-btn:active { opacity: 0.8; }
.pc-config-hint {
    font-size: 12px;
    color: #999;
}
.pc-detection-info {
    display: flex; justify-content: space-between;
    align-items: center;
    font-size: 14px; color: #333;
    margin-bottom: 8px;
}
.pc-detection-value {
    font-weight: 700;
    color: #1A1A1A;
}
.pc-detection-bar {
    height: 6px;
    background: #E0E0E0;
    border-radius: 3px;
    overflow: hidden;
    border: 1px solid #CCC;
}
.pc-detection-fill {
    height: 100%;
    background: linear-gradient(90deg, #BBB, #666, #1A1A1A);
    border-radius: 3px;
    transition: width 0.5s ease;
}

/* ---- 子应用通用 ---- */
.pc-sub-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 15px;
    padding-bottom: calc(20px + var(--pc-safe-bottom));
    -webkit-overflow-scrolling: touch;
    background: #FAFAF8;
}
.pc-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #C0C0C0;
    gap: 12px;
}
.pc-empty-state i { font-size: 48px; }
.pc-empty-state p { font-size: 15px; }

/* ---- QQ 子应用 ---- */
.pc-qq-list { display: flex; flex-direction: column; gap: 6px; }
.pc-qq-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    background: #fff;
    cursor: pointer;
    transition: background 0.15s, transform 0.15s;
    border: 1.5px solid #1A1A1A;
    border-radius: 30px 4px 25px 4px / 4px 25px 4px 30px;
    margin-bottom: 2px;
    box-shadow: 2px 2px 0 rgba(0,0,0,0.06);
}
.pc-qq-item:active { background: #F0F0F0; transform: scale(0.98); }
.pc-qq-avatar {
    width: 48px; height: 48px;
    border-radius: 50%;
    border: 1.5px solid #1A1A1A;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
    overflow: hidden;
    background: #F5F5F5;
}
.pc-qq-info { flex: 1; min-width: 0; }
.pc-qq-name {
    font-size: 16px; font-weight: 600; color: #1A1A1A;
    display: flex; justify-content: space-between; align-items: center;
}
.pc-qq-name .pc-qq-time {
    font-size: 12px; color: #999; font-weight: 400;
}
.pc-qq-preview {
    font-size: 13px; color: #888;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin-top: 3px;
}
.pc-qq-badge {
    display: inline-block;
    background: #1A1A1A;
    color: #fff;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 8px;
    margin-right: 5px;
}

/* QQ 聊天详情 */
.pc-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: #F0F0EE;
}
.pc-chat-bubble-wrap {
    display: flex;
    gap: 8px;
    max-width: 85%;
}
.pc-chat-bubble-wrap.pc-self {
    align-self: flex-end;
    flex-direction: row-reverse;
}
.pc-chat-b-avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 1.5px solid #1A1A1A;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
    background: #fff;
}
.pc-chat-b-body { display: flex; flex-direction: column; gap: 3px; }
.pc-chat-b-name {
    font-size: 11px; color: #999;
}
.pc-self .pc-chat-b-name { text-align: right; }
.pc-chat-bubble {
    padding: 10px 14px;
    border-radius: 14px 3px 12px 3px / 3px 12px 3px 14px;
    font-size: 14px;
    line-height: 1.5;
    word-break: break-word;
    background: #fff;
    color: #1A1A1A;
    border: 1.5px solid #1A1A1A;
    box-shadow: 1px 2px 0 rgba(0,0,0,0.06);
    position: relative;
}
.pc-self .pc-chat-bubble {
    background: #E8E8E8;
    color: #1A1A1A;
    border-color: #1A1A1A;
}
.pc-chat-b-time {
    font-size: 10px; color: #bbb;
}
.pc-self .pc-chat-b-time { text-align: right; }
.pc-chat-time-divider {
    text-align: center;
    font-size: 11px;
    color: #999;
    padding: 8px 0;
}
.pc-chat-input-bar {
    display: flex;
    gap: 8px;
    /* 修改：底部增加安全区域判断防止被手机Home条遮挡 */
    padding: 10px 12px;
    padding-bottom: calc(10px + var(--pc-safe-bottom));
    background: #FAFAF8;
    border-top: 1.5px dashed #CCC;
    flex-shrink: 0;
}


.pc-chat-input-bar input {
    flex: 1;
    padding: 10px 14px;
    border: 1.5px solid #1A1A1A;
    border-radius: 20px 3px 18px 3px / 3px 18px 3px 20px;
    font-size: 14px;
    font-family: inherit;
    outline: none;
    background: #fff;
}
.pc-chat-send {
    padding: 8px 18px;
    background: #1A1A1A;
    color: #F0F0F0;
    border: none;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
}
.pc-chat-send:active { opacity: 0.8; }

/* ---- 屏幕使用时间 ---- */
.pc-st-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}
.pc-st-tab {
    flex: 1;
    padding: 10px;
    text-align: center;
    background: #fff;
    border: 1.5px solid #1A1A1A;
    border-radius: 20px 3px 18px 3px / 3px 18px 3px 20px;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    color: #666;
    font-weight: 600;
    transition: all 0.2s;
}
.pc-st-tab.active {
    background: #1A1A1A;
    color: #F0F0F0;
}
.pc-st-total {
    background: #fff;
    border: 2px solid #1A1A1A;
    border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
    padding: 16px;
    margin-bottom: 16px;
    text-align: center;
    box-shadow: 3px 3px 0 rgba(0,0,0,0.08);
}
.pc-st-total-time {
    font-size: 36px;
    font-weight: 700;
    color: #1A1A1A;
}
.pc-st-total-label {
    font-size: 13px;
    color: #999;
    margin-top: 4px;
}
.pc-st-total-label::before { content: '✧ '; }
.pc-st-total-label::after  { content: ' ✧'; }
.pc-st-list { display: flex; flex-direction: column; gap: 6px; }
.pc-st-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    background: #fff;
    border: 1.5px solid #1A1A1A;
    border-radius: 30px 4px 25px 4px / 4px 25px 4px 30px;
    cursor: pointer;
    transition: background 0.15s;
    box-shadow: 2px 2px 0 rgba(0,0,0,0.05);
}
.pc-st-item:active { background: #F5F5F5; }
.pc-st-icon {
    width: 40px; height: 40px;
    border-radius: 10px 2px 8px 2px / 2px 8px 2px 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
    background: #F0F0F0;
    border: 1.5px solid #1A1A1A;
    color: #1A1A1A;
}
.pc-st-info { flex: 1; }
.pc-st-name { font-size: 15px; font-weight: 600; color: #1A1A1A; }
.pc-st-time { font-size: 13px; color: #888; margin-top: 2px; }
.pc-st-bar {
    height: 6px;
    background: #E0E0E0;
    border-radius: 3px;
    overflow: hidden;
    margin-top: 4px;
    border: 1px solid #CCC;
}
.pc-st-bar-fill { height: 100%; border-radius: 3px; }
.pc-st-arrow { color: #999; font-size: 14px; }

/* 屏幕使用详情 */
.pc-st-detail-card {
    background: #fff;
    border: 2px solid #1A1A1A;
    border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: 3px 3px 0 rgba(0,0,0,0.08);
}
.pc-st-detail-head {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 16px;
}
.pc-st-detail-comment {
    background: #F5F5F3;
    border: 1.5px dashed #BBB;
    border-radius: 12px;
    padding: 14px;
    font-size: 15px;
    color: #333;
    line-height: 1.6;
    position: relative;
}
.pc-st-detail-comment::before {
    content: '✎';
    font-size: 18px;
    color: #BBB;
    position: absolute;
    top: 8px; left: 10px;
}

/* ---- 记账 ---- */
.pc-acc-header {
    background: #fff;
    border: 2px solid #1A1A1A;
    border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
    padding: 20px;
    margin-bottom: 16px;
    text-align: center;
    box-shadow: 3px 3px 0 rgba(0,0,0,0.08);
}
.pc-acc-total {
    font-size: 32px;
    font-weight: 700;
    color: #1A1A1A;
}
.pc-acc-total.income { color: #1A1A1A; }
.pc-acc-label { font-size: 13px; color: #888; margin-top: 4px; }
.pc-acc-summary {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-top: 12px;
}
.pc-acc-summary-item { text-align: center; }
.pc-acc-summary-val { font-size: 18px; font-weight: 700; color: #1A1A1A; }
.pc-acc-summary-lab { font-size: 12px; color: #999; }
.pc-acc-list { display: flex; flex-direction: column; gap: 8px; }
.pc-acc-day-label {
    font-size: 14px;
    font-weight: 700;
    color: #888;
    padding: 8px 4px 4px;
}
.pc-acc-day-label::before { content: '— '; }
.pc-acc-day-label::after  { content: ' —'; }
.pc-acc-capsule {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #fff;
    border: 1.5px solid #1A1A1A;
    border-radius: 30px 4px 25px 4px / 4px 25px 4px 30px;
    cursor: pointer;
    transition: transform 0.15s;
    box-shadow: 2px 2px 0 rgba(0,0,0,0.05);
}
.pc-acc-capsule:active { transform: scale(0.98) rotate(-0.5deg); }
.pc-acc-emoji { font-size: 24px; }
.pc-acc-cap-info { flex: 1; }
.pc-acc-cap-name { font-size: 15px; font-weight: 600; color: #1A1A1A; }
.pc-acc-cap-cat { font-size: 12px; color: #888; margin-top: 2px; }
.pc-acc-cap-amount { font-size: 16px; font-weight: 700; }
.pc-acc-cap-amount.expense { color: #1A1A1A; }
.pc-acc-cap-amount.expense::before { content: '▼ '; font-size: 9px; }
.pc-acc-cap-amount.income { color: #666; }
.pc-acc-cap-amount.income::before { content: '▲ '; font-size: 9px; }

/* 记账详情 */
.pc-acc-detail-card {
    background: #fff;
    border: 2px solid #1A1A1A;
    border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: 3px 3px 0 rgba(0,0,0,0.08);
}
.pc-acc-detail-amount {
    font-size: 36px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 20px;
    color: #1A1A1A;
}
.pc-acc-detail-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px dashed #D0D0D0;
    font-size: 14px;
}
.pc-acc-detail-label { color: #888; }
.pc-acc-detail-val { color: #1A1A1A; font-weight: 600; }
.pc-acc-detail-thought {
    margin-top: 16px;
    background: #F5F5F3;
    border: 1.5px dashed #BBB;
    border-radius: 12px;
    padding: 14px;
    font-size: 14px;
    color: #333;
    line-height: 1.6;
}
.pc-acc-detail-thought .thought-label {
    font-size: 12px;
    color: #999;
    font-weight: 700;
    margin-bottom: 6px;
}

/* ---- 备忘录 ---- */
.pc-notes-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pc-note-card {
    background: #fff;
    border: 1.5px solid #1A1A1A;
    border-radius: 30px 4px 25px 4px / 4px 25px 4px 30px;
    padding: 16px;
    cursor: pointer;
    border-left: 5px solid #1A1A1A;
    transition: transform 0.15s;
    box-shadow: 2px 2px 0 rgba(0,0,0,0.06);
}
.pc-note-card:active { transform: scale(0.98); }
.pc-note-card-title {
    font-size: 17px;
    font-weight: 700;
    color: #1A1A1A;
    margin-bottom: 6px;
}
.pc-note-card-preview {
    font-size: 13px;
    color: #888;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    box-orient: vertical;
    overflow: hidden;
}
.pc-note-card-date {
    font-size: 11px;
    color: #BBB;
    margin-top: 8px;
}

/* 备忘录详情 (手帐风) */
.pc-note-viewer {
    flex: 1;
    padding: 20px;
    background: #FFFEF5;
    overflow-y: auto;
    font-size: 16px;
    line-height: 1.8;
    color: #1A1A1A;
    background-image: repeating-linear-gradient(
        transparent,
        transparent 29px,
        #E8E8E0 29px,
        #E8E8E0 30px
    );
}
.pc-note-viewer h1 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 16px;
    color: #1A1A1A;
}
.pc-note-viewer .note-line {
    padding: 4px 0;
}

/* 备忘录编辑器 */
.pc-note-editor {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #FFFEF5;
    padding: 20px;
}
.pc-note-title-input {
    border: none;
    background: transparent;
    font-size: 22px;
    font-weight: 700;
    color: #1A1A1A;
    outline: none;
    margin-bottom: 16px;
    padding: 0;
    font-family: inherit;
    border-bottom: 1.5px dashed #CCC;
    padding-bottom: 10px;
}
.pc-note-body-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 15px;
    color: #333;
    outline: none;
    resize: none;
    line-height: 1.8;
    padding: 0;
    font-family: inherit;
    background-image: repeating-linear-gradient(
        transparent,
        transparent 29px,
        #E8E8E0 29px,
        #E8E8E0 30px
    );
}

/* ---- 日记 ---- */
.pc-diary-book {
    flex: 1;
    overflow: hidden;
    background: #F5F0E5;
    position: relative;
    display: flex;
    flex-direction: column;
}
.pc-diary-page {
    flex: 1;
    padding: 24px 20px;
    overflow-y: auto;
    position: relative;
}
.pc-diary-page::before {
    content: '';
    position: absolute;
    top: 0; left: 30px;
    width: 1.5px; height: 100%;
    background: rgba(0,0,0,0.1);
}
.pc-diary-date {
    font-size: 15px;
    color: #555;
    font-weight: 700;
    margin-bottom: 12px;
    padding-left: 20px;
}
.pc-diary-mood {
    display: inline-block;
    font-size: 12px;
    padding: 3px 10px;
    background: rgba(0,0,0,0.05);
    border: 1px solid #CCC;
    border-radius: 10px;
    color: #555;
    margin-bottom: 16px;
    margin-left: 20px;
}
.pc-diary-text {
    font-family: 'Ma Shan Zheng', 'Caveat', cursive, sans-serif;
    font-size: 18px;
    line-height: 2;
    color: #1A1A1A;
    padding-left: 20px;
    background-image: repeating-linear-gradient(
        transparent,
        transparent 35px,
        rgba(0,0,0,0.06) 35px,
        rgba(0,0,0,0.06) 36px
    );
}
.pc-diary-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    background: #EDE5D4;
    border-top: 1.5px dashed #C0B49A;
    flex-shrink: 0;
}
.pc-diary-prev,
.pc-diary-next {
    background: none; border: none;
    color: #555;
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    padding: 8px 12px;
    display: flex; align-items: center; gap: 5px;
}
.pc-diary-prev:disabled,
.pc-diary-next:disabled { color: #C0C0C0; cursor: default; }
.pc-diary-pagenum {
    font-size: 13px;
    color: #8B7355;
}

/* ---- 浏览器 ---- */
.pc-browser-list { display: flex; flex-direction: column; gap: 6px; }
.pc-browser-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    background: #fff;
    border: 1.5px solid #1A1A1A;
    border-radius: 30px 4px 25px 4px / 4px 25px 4px 30px;
    cursor: pointer;
    transition: background 0.15s;
    box-shadow: 2px 2px 0 rgba(0,0,0,0.05);
}
.pc-browser-item:active { background: #F5F5F5; }
.pc-browser-icon {
    width: 40px; height: 40px;
    border-radius: 10px 2px 8px 2px / 2px 8px 2px 10px;
    background: #F0F0F0;
    border: 1.5px solid #1A1A1A;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.pc-browser-info { flex: 1; min-width: 0; }
.pc-browser-title {
    font-size: 15px; font-weight: 600; color: #1A1A1A;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pc-browser-url {
    font-size: 12px; color: #999;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin-top: 2px;
}
.pc-browser-time { font-size: 11px; color: #BBB; margin-top: 2px; }

/* 浏览器详情 */
.pc-browser-detail-card {
    background: #fff;
    border: 2px solid #1A1A1A;
    border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: 3px 3px 0 rgba(0,0,0,0.08);
}
.pc-browser-detail-title {
    font-size: 20px;
    font-weight: 700;
    color: #1A1A1A;
    margin-bottom: 12px;
}
.pc-browser-detail-meta {
    font-size: 12px;
    color: #999;
    margin-bottom: 16px;
    border-bottom: 1px dashed #D0D0D0;
    padding-bottom: 12px;
}
.pc-browser-detail-body {
    font-size: 15px;
    line-height: 1.7;
    color: #333;
    margin-bottom: 16px;
}
.pc-browser-detail-comment {
    background: #F5F5F3;
    border: 1.5px dashed #BBB;
    border-radius: 12px;
    padding: 14px;
    font-size: 14px;
    color: #333;
    line-height: 1.5;
}
.pc-browser-detail-comment .comment-label {
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 6px;
    color: #999;
}

/* ---- 相册 ---- */
.pc-photos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
}
.pc-photo-thumb {
    aspect-ratio: 1;
    background: #E0E0E0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    position: relative;
    transition: opacity 0.15s;
    border: 1px solid #1A1A1A;
}
.pc-photo-thumb:active { opacity: 0.8; }
.pc-photo-thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    filter: grayscale(70%) contrast(1.1);
}
.pc-photo-text-thumb {
    background: linear-gradient(135deg, #333, #666);
    color: #E0E0E0;
    font-size: 11px;
    text-align: center;
    padding: 8px;
    line-height: 1.3;
    word-break: break-all;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
}

/* 相册详情 */
.pc-photo-viewer {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #0A0A0A;
    overflow-y: auto;
}
.pc-photo-view-img {
    width: 100%;
    max-height: auto;
    object-fit: contain;
    background: #111;
    filter: grayscale(50%);
}
.pc-photo-view-text {
    width: 100%;
    min-height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    font-size: 15px;
    color: #CCC;
    text-align: center;
    line-height: 1.8;
    background: #111;
    font-family: inherit;
}
.pc-photo-view-details {
    padding: 20px;
    background: #1A1A1A;
    color: #E0E0E0;
}
.pc-photo-view-desc {
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 12px;
}
.pc-photo-view-meta {
    font-size: 12px;
    color: #888;
}

/* ---- 线下 ---- */
.pc-offline-identity {
    text-align: center;
    padding: 30px 20px;
}
.pc-offline-identity h3 {
    font-size: 20px;
    margin-bottom: 20px;
    color: #1A1A1A;
    font-weight: 700;
}
.pc-offline-identity h3::before { content: '✦ '; }
.pc-offline-identity h3::after  { content: ' ✦'; }
.pc-identity-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}
.pc-identity-card {
    padding: 20px 15px;
    background: #fff;
    border: 2px solid #1A1A1A;
    border-radius: 30px 4px 25px 4px / 4px 25px 4px 30px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    box-shadow: 2px 2px 0 rgba(0,0,0,0.08);
}
.pc-identity-card:active { transform: scale(0.96) rotate(-1deg); }
.pc-identity-card.selected {
    border-color: #1A1A1A;
    background: #E8E8E8;
    box-shadow: 4px 4px 0 rgba(0,0,0,0.15);
}
.pc-identity-card .id-emoji { font-size: 36px; margin-bottom: 8px; }
.pc-identity-card .id-label { font-size: 15px; color: #1A1A1A; font-weight: 700; }
.pc-custom-identity {
    padding: 10px 15px;
    border: 1.5px solid #1A1A1A;
    border-radius: 12px 2px 10px 2px / 2px 10px 2px 12px;
    font-size: 14px;
    font-family: inherit;
    outline: none;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 16px;
    text-align: center;
    background: #FAFAF8;
}
.pc-offline-start-btn {
    padding: 14px 40px;
    background: #1A1A1A;
    color: #F0F0F0;
    border: none;
    border-radius: 14px;
    font-size: 17px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 3px 3px 0 rgba(0,0,0,0.15);
}
.pc-offline-start-btn:active { opacity: 0.8; transform: translate(1px, 1px); box-shadow: 1px 1px 0 rgba(0,0,0,0.15); }

/* 线下探索 */
.pc-offline-explore {
    padding: 0;
}
.pc-offline-scene {
    background: #fff;
    border: 2px solid #1A1A1A;
    border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: 3px 3px 0 rgba(0,0,0,0.08);
}
.pc-offline-scene-title {
    font-size: 17px;
    font-weight: 700;
    color: #1A1A1A;
    margin-bottom: 10px;
    display: flex; align-items: center; gap: 8px;
}
.pc-offline-scene-desc {
    font-size: 15px;
    color: #333;
    line-height: 1.7;
    margin-bottom: 12px;
}
.pc-offline-choices {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pc-offline-choice {
    padding: 12px 16px;
    background: #FAFAF8;
    border: 1.5px solid #1A1A1A;
    border-radius: 20px 3px 18px 3px / 3px 18px 3px 20px;
    font-size: 14px;
    font-family: inherit;
    color: #1A1A1A;
    cursor: pointer;
    text-align: left;
    transition: all 0.15s;
    box-shadow: 2px 2px 0 rgba(0,0,0,0.06);
}
.pc-offline-choice:active {
    background: #E8E8E8;
    transform: scale(0.98);
    box-shadow: 0px 0px 0 rgba(0,0,0,0.06);
}
.pc-offline-discovery {
    background: #F5F5F3;
    border: 1.5px dashed #999;
    border-radius: 12px;
    padding: 14px;
    margin-top: 12px;
    font-size: 14px;
    color: #333;
    line-height: 1.6;
}
.pc-offline-room-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}
.pc-room-btn {
    padding: 8px 16px;
    border-radius: 20px 3px 18px 3px / 3px 18px 3px 20px;
    border: 1.5px solid #1A1A1A;
    background: #fff;
    font-size: 13px;
    font-family: inherit;
    color: #333;
    cursor: pointer;
    transition: all 0.15s;
}
.pc-room-btn.active {
    background: #1A1A1A;
    color: #F0F0F0;
    border-color: #1A1A1A;
}
.pc-room-btn:active { transform: scale(0.95); }

/* ---- 加载遮罩 ---- */
.pc-loading-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(250,250,248,0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}
.pc-loading-box {
    background: #fff;
    border: 2px solid #1A1A1A;
    border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
    padding: 30px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    box-shadow: 4px 4px 0 rgba(0,0,0,0.1);
}
.pc-loading-box span {
    font-size: 15px;
    color: #888;
    font-family: inherit;
}
.pc-spinner {
    width: 36px; height: 36px;
    border: 3px dashed #BBB;
    border-top: 3px solid #1A1A1A;
    border-radius: 50%;
    animation: pcSpin 1s linear infinite;
}
@keyframes pcSpin {
    to { transform: rotate(360deg); }
}

/* ---- 弹窗 ---- */
.pc-alert-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
}
.pc-alert-box {
    background: #fff;
    border: 2px solid #1A1A1A;
    border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
    padding: 30px 24px;
    max-width: 300px;
    width: 85%;
    text-align: center;
    box-shadow: 5px 5px 0 rgba(0,0,0,0.12);
}
.pc-alert-icon {
    font-size: 42px;
    color: #1A1A1A;
    margin-bottom: 12px;
}
.pc-alert-title {
    font-size: 20px;
    font-weight: 700;
    color: #1A1A1A;
    margin-bottom: 12px;
}
.pc-alert-body {
    font-size: 14px;
    color: #333;
    line-height: 1.6;
    margin-bottom: 20px;
    max-height: 200px;
    overflow-y: auto;
}
.pc-alert-btn {
    width: 100%;
    padding: 12px;
    background: #1A1A1A;
    color: #F0F0F0;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
}
.pc-alert-btn:active { opacity: 0.8; }

/* ---- Toast ---- */
.pc-toast {
    position: absolute;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    background: #1A1A1A;
    color: #F0F0F0;
    padding: 10px 24px;
    border-radius: 20px;
    border: 1.5px solid #444;
    font-size: 14px;
    font-family: inherit;
    z-index: 300;
    animation: pcToastIn 0.3s ease;
    pointer-events: none;
}
@keyframes pcToastIn {
    from { opacity: 0; transform: translateX(-50%) translateY(20px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ---- 反向查手机 ---- */
.pc-reverse-container {
    padding: 20px;
}
.pc-reverse-msg {
    background: #fff;
    border: 1.5px solid #1A1A1A;
    border-radius: 30px 4px 25px 4px / 4px 25px 4px 30px;
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: 2px 2px 0 rgba(0,0,0,0.06);
}
.pc-reverse-msg-sender {
    font-size: 13px;
    font-weight: 700;
    color: #1A1A1A;
    margin-bottom: 6px;
}
.pc-reverse-msg-body {
    font-size: 14px;
    color: #333;
    line-height: 1.6;
}
.pc-reverse-input-area {
    display: flex; gap: 8px;
    padding: 12px;
    background: #fff;
    border: 1.5px solid #1A1A1A;
    border-radius: 14px;
}
.pc-reverse-input-area input {
    flex: 1;
    padding: 10px 14px;
    border: 1.5px solid #CCC;
    border-radius: 10px;
    font-size: 14px;
    font-family: inherit;
    outline: none;
}
.pc-reverse-input-area button {
    padding: 10px 18px;
    background: #1A1A1A;
    color: #F0F0F0;
    border: none;
    border-radius: 10px;
    font-family: inherit;
    cursor: pointer;
}

/* ---- 屏幕使用时间颜色 → 全部灰度化 ---- */
.pc-color-blue    { background: #666; }
.pc-color-pink    { background: #888; }
.pc-color-green   { background: #555; }
.pc-color-orange  { background: #777; }
.pc-color-purple  { background: #444; }
.pc-color-red     { background: #333; }
.pc-color-teal    { background: #999; }
.pc-color-yellow  { background: #AAA; }

/* 使用统一颜色的 bar fill */
.pc-st-bar-fill.pc-color-blue,
.pc-st-bar-fill.pc-color-pink,
.pc-st-bar-fill.pc-color-green,
.pc-st-bar-fill.pc-color-orange,
.pc-st-bar-fill.pc-color-purple,
.pc-st-bar-fill.pc-color-red,
.pc-st-bar-fill.pc-color-teal,
.pc-st-bar-fill.pc-color-yellow {
    background: #1A1A1A;
}
/* ============================================================
   桌面拼贴布局 (Collage Home Screen)
   ============================================================ */

/* ---- 壁纸装饰覆盖 ---- */
.pc-phone-wallpaper::before {
    content: '✧ ˳⁺ ✧';
    position: absolute;
    top: 4px; left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    color: #D8D8D8;
    letter-spacing: 4px;
    pointer-events: none;
    z-index: 0;
}
.pc-phone-wallpaper::after {
    content: '⁺˳✧༚';
    position: absolute;
    bottom: 4px; right: 14px;
    font-size: 9px;
    color: #D8D8D8;
    pointer-events: none;
    z-index: 0;
}

/* ---- 布局容器 ---- */
.pc-home-layout {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 370px;
    position: relative;
    z-index: 1;
}

/* ---- 顶部横幅组件 ---- */
.pc-home-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: #fff;
    border: 1.5px solid #1A1A1A;
    border-radius: 18px 4px 16px 4px / 4px 16px 4px 18px;
    padding: 14px 20px;
    box-shadow: 2px 3px 0 rgba(0,0,0,0.07);
    position: relative;
}
.pc-home-banner::before {
    content: '♫';
    position: absolute; top: 4px; left: 10px;
    font-size: 9px; color: #CCC;
}
.pc-home-banner::after {
    content: '♪';
    position: absolute; bottom: 4px; right: 10px;
    font-size: 9px; color: #CCC;
}
.pc-banner-ava {
    width: 44px; height: 44px;
    border-radius: 50%;
    border: 2px solid #1A1A1A;
    background: #F5F5F5;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; color: #1A1A1A;
    overflow: hidden;
    flex-shrink: 0;
}
.pc-banner-ava img {
    width: 100%; height: 100%;
    object-fit: cover;
    filter: grayscale(80%) contrast(1.1);
}
.pc-banner-ava-you {
    background: #EDEDED;
    border-style: dashed;
    font-size: 16px;
    color: #999;
}
.pc-banner-mid {
    text-align: center;
    line-height: 1.5;
}
.pc-banner-wave {
    font-size: 12px;
    color: #BBB;
    letter-spacing: 2px;
}
.pc-banner-kaomoji {
    font-size: 13px;
    color: #999;
    margin-top: 2px;
}

/* ---- 行容器 ---- */
.pc-home-row {
    display: flex;
    gap: 12px;
    align-items: stretch;
}

/* ---- 2×2 图标组 ---- */
.pc-home-icon-group {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    flex-shrink: 0;
    width: 140px;
}
.pc-home-icon-group .pc-app-icon {
    gap: 4px;
}
.pc-home-icon-group .pc-icon-box {
    width: 52px; height: 52px;
    font-size: 22px;
}
.pc-home-icon-group .pc-app-icon span {
    font-size: 11px;
}
/* 手绘感微旋转 */
.pc-home-icon-group .pc-app-icon:nth-child(1) .pc-icon-box { transform: rotate(-2deg); }
.pc-home-icon-group .pc-app-icon:nth-child(2) .pc-icon-box { transform: rotate(1.5deg); }
.pc-home-icon-group .pc-app-icon:nth-child(3) .pc-icon-box { transform: rotate(1deg); }
.pc-home-icon-group .pc-app-icon:nth-child(4) .pc-icon-box { transform: rotate(-1.5deg); }
.pc-home-icon-group .pc-app-icon:active .pc-icon-box {
    transform: scale(0.88) rotate(-3deg) !important;
}

/* ---- 大组件通用 ---- */
.pc-home-widget {
    flex: 1;
    min-height: 130px;
    border-radius: 18px 4px 16px 4px / 4px 16px 4px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

/* ── 暗色插画组件 ── */
.pc-widget-dark {
    background: #111;
    border: 2.5px solid #000;
    color: #D0D0D0;
    box-shadow: 3px 4px 0 rgba(0,0,0,0.18);
    padding: 14px 10px;
}
.pc-wd-corner-tl,
.pc-wd-corner-tr,
.pc-wd-corner-bl,
.pc-wd-corner-br {
    position: absolute;
    font-size: 10px;
    color: #444;
    line-height: 1;
}
.pc-wd-corner-tl { top: 6px;  left: 8px; }
.pc-wd-corner-tr { top: 6px;  right: 8px; }
.pc-wd-corner-bl { bottom: 6px; left: 8px; }
.pc-wd-corner-br { bottom: 6px; right: 8px; }

.pc-wd-initial {
    font-size: 48px;
    font-weight: 700;
    line-height: 1;
    color: #E8E8E8;
    text-shadow: 0 0 20px rgba(255,255,255,0.08);
    font-family: 'Caveat', 'Ma Shan Zheng', cursive;
    margin-bottom: 4px;
}
.pc-wd-rule {
    font-size: 11px;
    color: #555;
    letter-spacing: 3px;
    margin-bottom: 4px;
}
.pc-wd-name {
    font-size: 15px;
    font-weight: 700;
    color: #CCC;
    letter-spacing: 2px;
}
.pc-wd-sub {
    font-size: 10px;
    color: #555;
    margin-top: 6px;
    letter-spacing: 2px;
}

/* ── 别针挂件组件 ── */
.pc-widget-pin {
    background: #fff;
    border: 2px solid #1A1A1A;
    box-shadow: 3px 4px 0 rgba(0,0,0,0.08);
    padding: 14px 10px 10px;
}
.pc-pin-hook {
    font-size: 14px;
    color: #999;
    letter-spacing: 2px;
    text-align: center;
    margin-bottom: 2px;
}
.pc-pin-chains {
    display: flex;
    justify-content: center;
    gap: 18px;
    padding: 0 4px;
}
.pc-pin-chain {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.pc-chain-line {
    width: 1.5px;
    height: 22px;
    background: #1A1A1A;
    border-radius: 1px;
}
.pc-chain-charm {
    font-size: 18px;
    margin-top: 2px;
    transform-origin: top center;
    animation: pcDangle 3s ease-in-out infinite;
}
.pc-pin-chain:nth-child(2) .pc-chain-charm { animation-delay: 0.4s; }
.pc-pin-chain:nth-child(3) .pc-chain-charm { animation-delay: 0.8s; }
.pc-pin-chain:nth-child(4) .pc-chain-charm { animation-delay: 1.2s; }
@keyframes pcDangle {
    0%, 100% { transform: rotate(0deg); }
    30%      { transform: rotate(4deg); }
    70%      { transform: rotate(-4deg); }
}
.pc-pin-label {
    font-size: 11px;
    color: #BBB;
    text-align: center;
    margin-top: 6px;
    letter-spacing: 3px;
}

/* ---- 浮动 Dock ---- */
.pc-home-dock-float {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    background: rgba(230, 230, 228, 0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 22px;
    padding: 10px 24px;
    margin: 0 auto;
    margin-bottom: 8px;
    max-width: 200px;
}

.pc-dock-ghost {
    font-size: 22px;
    opacity: 0.3;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.15s;
    filter: grayscale(100%);
}
.pc-dock-ghost:active {
    opacity: 0.6;
    transform: scale(0.88);
}

/* ---- 隐藏原有的 .pc-app-grid 和 .pc-dock-btn（兜底）---- */
.pc-app-grid {
    display: none !important;
}
.pc-dock-btn {
    display: none !important;
}