/* ========== 年度 OKR 及日程管理 - 苹果 iOS 透明玻璃（Liquid Glass）设计系统 ========== */

:root {
  /* iOS 系统色 */
  --ios-blue: #0a84ff;
  --ios-green: #30d158;
  --ios-teal: #40c8e0;
  --ios-indigo: #5e5ce6;
  --ios-orange: #ff9f0a;
  --ios-red: #ff453a;
  --ios-yellow: #ffd60a;
  --ios-gray: #8e8e93;

  /* 品牌（保留绿色点缀但偏 iOS） */
  --brand-50: #eafaf0;
  --brand-100: #d4f4e0;
  --brand-200: #a8e8c2;
  --brand-300: #6fd99a;
  --brand-400: #30d158;
  --brand-500: #28bb4e;
  --brand-600: #1f9d40;
  --brand-700: #1a7d34;
  --brand-800: #16632b;
  --brand-900: #124f23;

  --sky-400: #40c8e0;

  /* 状态色（iOS 系统色） */
  --status-todo: #8e8e93;
  --status-doing: #0a84ff;
  --status-blocked: #ff9f0a;
  --status-done: #30d158;

  --p0: #ff453a;
  --p1: #ff9f0a;
  --p2: #ffd60a;
  --p3: #8e8e93;

  /* iOS 玻璃材质：高透明 + 强模糊 + 高光描边 */
  --glass-bg: rgba(255, 255, 255, 0.42);
  --glass-bg-strong: rgba(255, 255, 255, 0.62);
  --glass-border: rgba(255, 255, 255, 0.55);
  --glass-highlight: rgba(255, 255, 255, 0.9);
  --glass-shadow: 0 8px 32px rgba(60, 80, 120, 0.12), 0 1px 0 rgba(255,255,255,0.6) inset;

  --radius-lg: 26px;
  --radius-md: 20px;
  --radius-sm: 14px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro SC", "SF Pro Text", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  color: #1c1c1e;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.01em;
}

/* iOS 风格动态彩色光晕背景（壁纸感） */
body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 8% 6%, rgba(94, 92, 230, 0.28), transparent 38%),
    radial-gradient(circle at 92% 8%, rgba(64, 200, 224, 0.30), transparent 40%),
    radial-gradient(circle at 78% 95%, rgba(48, 209, 88, 0.28), transparent 42%),
    radial-gradient(circle at 18% 92%, rgba(10, 132, 255, 0.22), transparent 44%),
    linear-gradient(165deg, #f4f7fb 0%, #eef3f9 50%, #f3f8f5 100%);
  background-attachment: fixed;
}

/* ===== iOS 玻璃材质 ===== */
.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}
.glass-card {
  position: relative;
  background: var(--glass-bg);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  box-shadow: var(--glass-shadow);
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease;
}
/* 顶部高光线，模拟 iOS 玻璃反光 */
.glass-card::before {
  content: '';
  position: absolute;
  top: 0; left: 12%; right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--glass-highlight), transparent);
  border-radius: 1px;
  pointer-events: none;
}
.glass-card:hover {
  box-shadow: 0 14px 44px rgba(60, 80, 120, 0.18), 0 1px 0 rgba(255,255,255,0.7) inset;
}

.glass-strong {
  background: var(--glass-bg-strong);
  backdrop-filter: blur(40px) saturate(190%);
  -webkit-backdrop-filter: blur(40px) saturate(190%);
  border: 1px solid rgba(255,255,255,0.7);
}

/* ===== 侧边导航 ===== */
.nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 15px; border-radius: var(--radius-sm);
  color: #1c1c1e; cursor: pointer;
  font-size: 14.5px; font-weight: 500;
  transition: all .2s ease;
}
.nav-item:hover { background: rgba(255,255,255,0.5); }
.nav-item.active {
  background: rgba(10,132,255,0.92);
  color: #fff;
  box-shadow: 0 6px 18px rgba(10,132,255,0.4);
  backdrop-filter: blur(10px);
}
.nav-item.active i { color: #fff; }
.nav-item i { width: 20px; text-align: center; color: var(--ios-blue); transition: color .2s; }

/* ===== 状态徽标（iOS 半透明胶囊） ===== */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.7; backdrop-filter: blur(8px); }
.badge-todo { background: rgba(142,142,147,0.18); color: #636366; }
.badge-doing { background: rgba(10,132,255,0.16); color: #0a6fd6; }
.badge-blocked { background: rgba(255,159,10,0.18); color: #c77700; }
.badge-done { background: rgba(48,209,88,0.18); color: #1f9d40; }

/* 优先级徽标 */
.pri { display:inline-flex; align-items:center; justify-content:center; padding: 1px 8px; border-radius: 7px; font-size: 11px; font-weight: 700; color:#fff; }
.pri-P0 { background: var(--p0); }
.pri-P1 { background: var(--p1); }
.pri-P2 { background: var(--p2); color:#7a5c00; }
.pri-P3 { background: var(--p3); }

/* 紧急任务标记 */
.tag-emergency { background: rgba(255,69,58,0.15) !important; color: #d70015 !important; border: 1px solid rgba(255,69,58,0.25) !important; }

/* O 标签 */
.otag { display:inline-block; padding: 1px 10px; border-radius: 999px; font-size: 11px; background: rgba(10,132,255,0.12); color: #0a6fd6; border: 1px solid rgba(10,132,255,0.18); }

/* ===== 进度条 ===== */
.progress-track { width: 100%; height: 8px; border-radius: 999px; background: rgba(120,120,128,0.16); overflow: hidden; }
.progress-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--ios-blue), var(--ios-teal)); transition: width .5s cubic-bezier(.34,1.2,.64,1); box-shadow: 0 0 8px rgba(10,132,255,0.3); }

/* ===== 按钮（iOS 风） ===== */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding: 9px 18px; border-radius: 13px; font-size: 14px; font-weight: 600; cursor: pointer; border: none; transition: all .18s cubic-bezier(.34,1.56,.64,1); }
.btn:active { transform: scale(.94); }
.btn-primary { background: var(--ios-blue); color:#fff; box-shadow: 0 6px 18px rgba(10,132,255,0.38); }
.btn-primary:hover { background: #2a93ff; box-shadow: 0 8px 22px rgba(10,132,255,0.45); }
.btn-ghost { background: rgba(255,255,255,0.55); color: #0a6fd6; border: 1px solid rgba(255,255,255,0.6); backdrop-filter: blur(10px); }
.btn-ghost:hover { background: rgba(255,255,255,0.8); }
.btn-danger { background: rgba(255,69,58,0.14); color: #d70015; }
.btn-danger:hover { background: rgba(255,69,58,0.22); }
.btn-sm { padding: 6px 12px; font-size: 12.5px; border-radius: 11px; }
.btn:disabled { opacity:.45; cursor:not-allowed; }

/* ===== 表单（iOS 输入框） ===== */
.field { width:100%; padding: 10px 13px; border-radius: 13px; border: 1px solid rgba(120,120,128,0.18); background: rgba(255,255,255,0.6); font-size: 14px; outline: none; transition: border .2s, box-shadow .2s, background .2s; color:#1c1c1e; backdrop-filter: blur(8px); }
.field:focus { border-color: var(--ios-blue); background: rgba(255,255,255,0.85); box-shadow: 0 0 0 4px rgba(10,132,255,0.14); }
textarea.field { resize: vertical; min-height: 70px; line-height: 1.6; }
.field-label { font-size: 13px; font-weight: 600; color:#3a3a3c; margin-bottom: 6px; display:block; }

/* ===== 弹窗 / 抽屉（iOS sheet） ===== */
.modal-mask { position: fixed; inset:0; background: rgba(0,0,0,0.28); backdrop-filter: blur(6px); z-index: 100; display:flex; align-items:center; justify-content:center; padding: 16px; animation: fade .22s ease; }
.modal-box { width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto; border-radius: var(--radius-lg); animation: pop .28s cubic-bezier(.34,1.56,.64,1); }
.drawer-mask { position: fixed; inset:0; background: rgba(0,0,0,0.28); backdrop-filter: blur(6px); z-index: 100; animation: fade .22s ease; }
.drawer-box { position:absolute; top:0; right:0; height:100%; width: 100%; max-width: 480px; overflow-y:auto; animation: slideIn .3s cubic-bezier(.32,.72,0,1); }

@keyframes fade { from{opacity:0} to{opacity:1} }
@keyframes pop { from{opacity:0; transform: scale(.92) translateY(10px)} to{opacity:1; transform: scale(1) translateY(0)} }
@keyframes slideIn { from{transform: translateX(100%)} to{transform: translateX(0)} }

/* ===== 待办删除线 ===== */
.todo-done .todo-text { text-decoration: line-through; color: #aeaeb2; }

/* ===== 日历 ===== */
.cal-cell { min-height: 92px; border-radius: var(--radius-sm); padding: 7px; cursor: pointer; transition: all .18s; border:1px solid transparent; }
.cal-cell:hover { background: rgba(255,255,255,0.55); border-color: rgba(255,255,255,0.7); }
.cal-cell.today { background: rgba(10,132,255,0.12); border-color: rgba(10,132,255,0.35); }
.cal-cell.other-month { opacity: .35; }
.cal-dot { width:6px; height:6px; border-radius:999px; display:inline-block; }

/* ===== 推荐下拉 ===== */
.suggest-box { position:absolute; left:0; right:0; top: calc(100% + 5px); z-index: 50; max-height: 220px; overflow-y:auto; border-radius: var(--radius-sm); }
.suggest-item { padding: 9px 13px; cursor:pointer; font-size: 13px; transition: background .12s; }
.suggest-item:hover, .suggest-item.active { background: rgba(10,132,255,0.12); }

/* ===== Toast ===== */
#toast-wrap { position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 999; display:flex; flex-direction:column; gap:8px; align-items:center; }
.toast { padding: 11px 22px; border-radius: 16px; color:#fff; font-size: 14px; font-weight:500; box-shadow: 0 10px 30px rgba(0,0,0,0.22); animation: toastIn .3s cubic-bezier(.34,1.56,.64,1); backdrop-filter: blur(20px); }
.toast-success { background: rgba(48,209,88,0.92); }
.toast-error { background: rgba(255,69,58,0.92); }
.toast-info { background: rgba(10,132,255,0.92); }
@keyframes toastIn { from{opacity:0; transform: translateY(14px) scale(.9)} to{opacity:1; transform: translateY(0) scale(1)} }

/* ===== 滚动条 ===== */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: rgba(120,120,128,0.32); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(120,120,128,0.5); }
::-webkit-scrollbar-track { background: transparent; }

/* 空状态 */
.empty-state { text-align:center; padding: 40px 20px; color:#aeaeb2; }
.empty-state i { font-size: 42px; margin-bottom: 12px; color: rgba(10,132,255,0.4); }

/* 自动保存提示 */
.autosave-tip { font-size: 12px; color: var(--brand-600); display:flex; align-items:center; gap:5px; }

/* 文本预览框 */
.report-preview { white-space: pre-wrap; font-size: 13.5px; line-height: 1.75; color:#3a3a3c; background: rgba(255,255,255,0.55); border-radius: var(--radius-sm); padding: 16px; border: 1px solid rgba(255,255,255,0.6); max-height: 420px; overflow-y:auto; }

/* 分组分区标题 */
.section-divider { display:flex; align-items:center; gap:10px; margin: 6px 0; }
.section-divider .line { flex:1; height:1px; background: rgba(120,120,128,0.2); }

/* 移动端适配 */
@media (max-width: 900px) {
  .sidebar { position: fixed; left: 0; top:0; bottom:0; z-index: 80; transform: translateX(-100%); transition: transform .3s cubic-bezier(.32,.72,0,1); }
  .sidebar.open { transform: translateX(0); }
  .main-area { margin-left: 0 !important; }
  .cal-cell { min-height: 60px; font-size: 12px; }
}

.line-clamp-2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }