/* ==========================================================================
   Private OS Core - Material 3 / Gemini Style UI
   ========================================================================== */

* { -webkit-tap-highlight-color: transparent; }
*:focus { outline: none !important; }
::selection { background: rgba(11, 87, 208, 0.2); color: inherit; }
html[data-theme="dark"] ::selection { background: rgba(168, 199, 250, 0.3); color: inherit; }

:root {
    --sys-bg: #f0f4f9;                 
    --sys-surface: #ffffff;            
    --sys-surface-hover: #f1f3f4;      
    --sys-border: #e0e2e0;             
    --sys-text: #1f1f1f;               
    --sys-text-muted: #444746;         
    --sys-primary: #0b57d0;            
    --sys-on-primary: #ffffff;         
    --sys-primary-hover: #0842a0;
    --sys-danger: #b3261e;
    --sys-on-danger: #ffffff;
    --sys-danger-bg: #f9dedc;
    --sys-radius: 16px;
    --sys-radius-pill: 100px;
    --sys-radius-modal: 28px;
    --sys-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --sys-shadow-modal: 0 24px 38px 3px rgba(0, 0, 0, 0.05), 0 9px 46px 8px rgba(0, 0, 0, 0.04), 0 11px 15px -7px rgba(0, 0, 0, 0.1);
}

html[data-theme="dark"] {
    --sys-bg: #131314;                 
    --sys-surface: #1e1f20;            
    --sys-surface-hover: #282a2c;      
    --sys-border: #444746;             
    --sys-text: #e3e3e3;               
    --sys-text-muted: #c4c7c5;         
    --sys-primary: #a8c7fa;            
    --sys-on-primary: #041e49;         
    --sys-primary-hover: #d3e3fd;
    --sys-danger: #f2b8b5;
    --sys-on-danger: #601410;
    --sys-danger-bg: #3f0b08;
    --sys-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15);
    --sys-shadow-modal: 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.2);
}

body { 
    margin: 0; padding: 0; font-family: 'Google Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; 
    background: var(--sys-bg); color: var(--sys-text); height: 100vh; overflow: hidden; box-sizing: border-box;
    transition: background-color 0.4s ease, color 0.4s ease; -webkit-font-smoothing: antialiased;
}

.sys-screen { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; background: var(--sys-bg); flex-direction: column; transition: background-color 0.4s ease; }
#sys-desktop { flex-direction: row; }

.material-symbols-rounded { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; font-size: 1.2rem; display: inline-flex; align-items: center; justify-content: center; transition: all 0.3s ease; }
.sys-btn .material-symbols-rounded { font-size: 1.1rem; margin-right: -2px; }

#sys-lock-screen { justify-content: center; align-items: center; z-index: 9999; }
#sys-lock-screen:not(.active) { display: none; }

/* ⚡ 修复锁屏容器，增加完美进场动画以掩盖 JS 的 DOM 替换 */
.lock-container { 
    background: var(--sys-surface); padding: 48px 40px; border-radius: var(--sys-radius-modal); box-shadow: var(--sys-shadow-modal); border: 1px solid rgba(255, 255, 255, 0.05); width: calc(100% - 48px); max-width: 420px; text-align: center; box-sizing: border-box; 
    opacity: 0;
    animation: lockFadeIn 0.4s cubic-bezier(0.2, 0, 0, 1) forwards;
}

@keyframes lockFadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.lock-container h2 { margin-top: 0; font-weight: 500; letter-spacing: -0.5px; font-size: 1.8rem; color: var(--sys-text); }
.sys-desc { color: var(--sys-text-muted); font-size: 0.95rem; margin-bottom: 32px; line-height: 1.6; }

.sys-input, input[type="text"], input[type="password"], select { width: 100%; padding: 16px 20px; margin-bottom: 16px; box-sizing: border-box; border: 1px solid transparent; border-radius: var(--sys-radius); background: var(--sys-surface-hover); color: var(--sys-text); outline: none; transition: all 0.25s cubic-bezier(0.2, 0, 0, 1); font-family: inherit; font-size: 1rem; }
.sys-input:focus { background: var(--sys-surface); border-color: var(--sys-primary); box-shadow: 0 0 0 1px var(--sys-primary); }
.sys-input::placeholder { color: var(--sys-text-muted); opacity: 0.8; }
label { display: block; margin-bottom: 10px; font-size: 0.9rem; color: var(--sys-text-muted); font-weight: 500; }
input[type="checkbox"] { accent-color: var(--sys-primary); width: 18px; height: 18px; border-radius: 4px; cursor: pointer;}

.sys-btn { width: 100%; padding: 14px 24px; border: none; border-radius: var(--sys-radius-pill); background: var(--sys-surface-hover); color: var(--sys-text); border: 1px solid transparent; cursor: pointer; font-weight: 500; transition: all 0.2s cubic-bezier(0.2, 0, 0, 1); font-size: 0.95rem; display: inline-flex; align-items: center; justify-content: center; gap: 8px; letter-spacing: 0.3px; }
.sys-btn:hover { background: var(--sys-border); }
.sys-btn:active { transform: scale(0.98); }
.sys-btn.primary { background: var(--sys-primary); color: var(--sys-on-primary); font-weight: 600;}
.sys-btn.primary:hover { background: var(--sys-primary-hover); box-shadow: 0 1px 3px 1px rgba(0,0,0,0.15); }
.sys-btn.ghost { background: transparent; color: var(--sys-text-muted); border-radius: var(--sys-radius); }
.sys-btn.ghost:hover { background: var(--sys-surface-hover); color: var(--sys-text); }
.sys-btn.ghost[style*="color: var(--sys-danger)"]:hover { background: var(--sys-danger-bg); color: var(--sys-danger) !important; }

/* ================= 左侧 Dock 栏 ================= */
.sys-dock { width: 80px; background: var(--sys-surface); border-right: 1px solid var(--sys-border); display: flex; flex-direction: column; align-items: center; z-index: 100; transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; box-sizing: border-box; padding-top: 16px; }
.sys-dock.expanded { width: 240px; align-items: stretch; }

.dock-header { padding: 16px 0; width: 100%; display: flex; justify-content: center; align-items: center; border-bottom: 1px solid var(--sys-border); box-sizing: border-box; white-space: nowrap; }
.sys-dock.expanded .dock-header { padding: 16px 20px; justify-content: flex-start; gap: 16px; }
.dock-header .sys-title-text { display: none; font-weight: 600; font-size: 1.2rem; color: var(--sys-text); }
.sys-dock.expanded .dock-header .sys-title-text { display: block; }

.dock-list { flex: 1; overflow-y: auto; padding: 24px 0; width: 100%; display: flex; flex-direction: column; align-items: center; box-sizing: border-box; gap: 8px; }
.sys-dock.expanded .dock-list { padding: 16px; align-items: stretch; }

.dock-item { width: 48px; height: 48px; padding: 0; border-radius: 12px; cursor: pointer; display: flex; justify-content: center; align-items: center; color: var(--sys-text-muted); transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); flex-shrink: 0; box-sizing: border-box; }
.sys-dock.expanded .dock-item { width: 100%; height: auto; padding: 14px 18px; border-radius: 12px; justify-content: flex-start; gap: 12px; }
.dock-item:hover { background: var(--sys-surface-hover); color: var(--sys-text); border-radius: 12px; }
.dock-item.active { background: var(--sys-primary); color: var(--sys-on-primary); box-shadow: 0 4px 12px rgba(0,0,0,0.1); border-color: transparent; border-radius: 12px; }
html[data-theme="dark"] .dock-item.active { background: rgba(168, 199, 250, 0.15); color: var(--sys-primary); box-shadow: none; }
.dock-item .material-symbols-rounded { font-size: 1.5rem; }
.dock-item span:not(.material-symbols-rounded) { display: none; white-space: nowrap; }
.sys-dock.expanded .dock-item span:not(.material-symbols-rounded) { display: block; font-weight: 500; }

.dock-footer { padding: 16px 12px 24px; display: flex; flex-direction: column; gap: 8px; align-items: center; width: 100%; border-top: 1px solid var(--sys-border); box-sizing: border-box; overflow: hidden; }
.sys-dock.expanded .dock-footer { align-items: stretch; padding: 16px 16px 24px; }
.foot-btn { background: transparent; border: none; color: var(--sys-text-muted); border-radius: 12px; height: 48px; width: 48px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; flex-shrink: 0; padding: 0; box-sizing: border-box; }
.foot-btn:hover { background: var(--sys-surface-hover); color: var(--sys-text); border-radius: 12px;}
.foot-btn .material-symbols-rounded { font-size: 1.3rem; }
.foot-text { display: none; white-space: nowrap; margin-left: 12px; font-weight: 500; font-size: 0.95rem; }
.sys-dock.expanded .foot-btn { width: 100%; justify-content: flex-start; padding: 0 16px; }
.sys-dock.expanded .foot-text { display: block; }
.sys-dock.expanded .foot-btn.lock-btn { background: var(--sys-surface-hover); color: var(--sys-text); }

.sys-icon-btn { background: transparent; border: none; color: var(--sys-text-muted); border-radius: 12px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; flex-shrink: 0; }
.sys-icon-btn:hover { background: var(--sys-surface-hover); color: var(--sys-text); }

/* ================= 全局系统顶栏 ================= */
.sys-workspace { 
    flex: 1; position: relative; display: flex; flex-direction: column; 
    overflow: hidden; background: var(--sys-bg); transition: background-color 0.4s; 
    min-height: 0; min-width: 0; /* ⚡ 锁死高度 */
}

.sys-top-bar { 
    height: 64px; min-height: 64px; padding: 0 28px; display: flex; justify-content: space-between; align-items: center;
    background: transparent; border-bottom: 1px solid var(--sys-border); z-index: 50;
    transition: padding 0.3s;
    flex-shrink: 0; /* ⚡ 绝对禁止被压缩 */
}

.top-bar-left { display: flex; align-items: center; gap: 16px; }
.top-menu-btn { display: none; margin-left: -12px; }
.top-bar-title { font-size: 1.2rem; font-weight: 600; color: var(--sys-text); white-space: nowrap; letter-spacing: 0.3px;}

.top-bar-actions { display: flex; align-items: center; gap: 12px; }
.top-bar-actions .sys-btn { width: auto; padding: 10px 20px; font-size: 0.9rem; margin-bottom: 0; position: relative; }
.top-bar-actions .sys-btn .material-symbols-rounded { font-size: 1.15rem; margin-right: 2px; }

.sync-dot-badge {
    position: absolute; top: 6px; right: 8px; width: 8px; height: 8px; border-radius: 50%;
    background: var(--sys-danger); border: 2px solid var(--sys-bg); pointer-events: none; transition: border-color 0.2s ease; z-index: 10;
}
.sys-btn:hover .sync-dot-badge { border-color: var(--sys-surface-hover) !important; }

.plugin-container { 
    flex: 1; overflow: hidden; display: none; width: 100%; flex-direction: column; 
    min-height: 0; min-width: 0; /* ⚡ 锁死高度 */
}
.plugin-container.active { display: flex; }
.sys-empty-state { flex: 1; display: flex; justify-content: center; align-items: center; color: var(--sys-text-muted); font-weight: 500; font-size: 1.1rem; }

/* ================= 弹窗与毛玻璃效果 ================= */
.sys-sidebar-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 990; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); opacity: 0; transition: opacity 0.3s ease; }
.sys-sidebar-overlay.show { opacity: 1; }
.sys-toast { position: fixed; top: 24px; left: 50%; transform: translateX(-50%) translateY(-20px) scale(0.95); background: var(--sys-text); color: var(--sys-bg); padding: 14px 28px; border-radius: var(--sys-radius-pill); font-size: 0.95rem; font-weight: 500; opacity: 0; pointer-events: none; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); z-index: 10000; box-shadow: var(--sys-shadow); }
.sys-toast.show { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
.sys-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: none; justify-content: center; align-items: center; z-index: 9999; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: fadeIn 0.2s ease-out forwards; }
.sys-modal { background: var(--sys-surface); padding: 36px; border-radius: var(--sys-radius-modal); width: calc(100% - 48px); max-width: 440px; border: 1px solid rgba(255,255,255,0.05); box-shadow: var(--sys-shadow-modal); animation: slideUp 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; max-height: 85vh; overflow-y: auto; box-sizing: border-box; }
.sys-modal h3 { margin-top: 0; margin-bottom: 28px; font-weight: 500; font-size: 1.4rem;}
.modal-actions { display: flex; gap: 12px; margin-top: 32px; }
.modal-actions button { margin-bottom: 0; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(20px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--sys-border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--sys-text-muted); }

#set-local-fields, #set-github-fields, #set-api-fields { background: var(--sys-surface-hover) !important; border: 1px solid var(--sys-border); border-radius: var(--sys-radius); padding: 16px !important; }

/* ================= 移动端适配 ================= */
@media (max-width: 768px) {
    #sys-desktop { flex-direction: column; }
    .sys-top-bar { padding: 0 16px; height: 60px; min-height: 60px; background: var(--sys-surface);}
    .top-menu-btn { display: flex; }
    .top-bar-title { font-size: 1.15rem; }
    .top-bar-actions .sys-btn span:not(.material-symbols-rounded) { display: none; } 
    .top-bar-actions .sys-btn { padding: 10px; width: 44px; height: 44px; border-radius: 50%; display: flex; justify-content: center; }
    .top-bar-actions .sys-btn .material-symbols-rounded { margin-right: 0; font-size: 1.3rem; }
    .sync-dot-badge { top: 4px; right: 4px; border-color: var(--sys-surface); }

    .sys-dock { position: fixed; top: 0; left: 0; height: 100%; transform: translateX(-100%); width: 280px !important; box-shadow: 4px 0 24px rgba(0,0,0,0.5); align-items: stretch !important; z-index: 1000; padding-top: 0; }
    .sys-dock.open { transform: translateX(0); }
    .dock-header { padding: 24px 20px; justify-content: flex-start; gap: 0;}
    .dock-header .desktop-logo { display: none !important; }
    .dock-header .sys-title-text { display: block !important; font-weight: 600; font-size: 1.4rem; }
    .dock-list { padding: 12px 16px; align-items: stretch !important; }
    .dock-item { width: 100% !important; height: auto !important; padding: 14px 18px !important; border-radius: 12px !important; justify-content: flex-start !important; gap: 12px; margin-bottom: 6px; flex-direction: row; }
    .dock-item span:not(.material-symbols-rounded) { display: block !important; font-weight: 500; font-size: 0.95rem;}
    .dock-footer { align-items: stretch !important; padding: 16px 16px 24px !important; }
    .foot-btn { width: 100% !important; justify-content: flex-start !important; padding: 0 16px !important; }
    .foot-text { display: block !important; }
    .foot-btn.lock-btn { background: var(--sys-surface-hover) !important; color: var(--sys-text) !important; }
    
    .lock-container { padding: 36px 24px; width: calc(100% - 32px); border-radius: 24px; }
    .lock-container h2 { font-size: 1.5rem; }
    .sys-modal { padding: 28px 20px; width: calc(100% - 32px); border-radius: 24px; }
}