:root {
    --color-terracotta: #C65D3B;
    --color-warm-gray: #D1D1C9;
    --color-mustard: #FFC233;
    --color-ink: #1F1F1F;
    --color-paper: #F4F1EA;
    --color-accent: #C65D3B;
    --color-accent-bright: #D4775A;
    --color-glow: rgba(198,93,59,0.08);
    --color-glow-soft: rgba(198,93,59,0.04);
    --color-bg2: #FFFFFF;
    --color-ink2: #6B6B64;
    --color-ink3: #9A9A94;
    --color-hover: rgba(0,0,0,0.04);
    --color-border: rgba(0,0,0,0.08);
    --color-L0: #F4F1EA;
    --color-L1: #FFFFFF;
    --color-L2: #F0EDE6;
    --color-L3: #E8E5DE;
    --color-surface-overlay: #FFFFFF;
    --color-border-strong: rgba(0,0,0,0.12);
    --font-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, SFMono-Regular, monospace;
    --font-display: 'DM Serif Display', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', sans-serif;
  }
  body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    background-color: var(--color-L0);
    color: var(--color-ink);
    position: relative;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-image:
      radial-gradient(ellipse 60% 45% at 50% 25%, rgba(255,255,255,.5) 0%, transparent 70%);
    background-attachment: fixed;
  }
  /* Fine grain texture overlay */
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.3;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
    background-size: 180px;
    mix-blend-mode: overlay;
  }

  /* ── Section labels ── */
  .nodum-label { font-family: var(--font-display); font-size: 11px; font-weight: 600; letter-spacing: 0.02em; color: #9A9A94; }
  .nodum-label-accent { font-family: var(--font-display); font-size: 11px; font-weight: 600; letter-spacing: 0.02em; color: var(--color-accent); }

  /* ── Status dot ── */
  .status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); flex-shrink: 0; }
  .status-dot-static { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }

  /* ── Card hover lift ── */
  .nodum-card-hover { transition: border-color 0.2s ease; }
  .nodum-card-hover:hover { border-color: rgba(0,0,0,0.1); }

  /* ── Entrance animations ── */
  @keyframes nodumSlideUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
  .nodum-enter { animation: nodumSlideUp 0.4s ease both; }
  .nodum-enter-1 { animation: nodumSlideUp 0.4s ease 0.05s both; }
  .nodum-enter-2 { animation: nodumSlideUp 0.4s ease 0.1s both; }
  .nodum-enter-3 { animation: nodumSlideUp 0.4s ease 0.15s both; }
  .nodum-enter-4 { animation: nodumSlideUp 0.4s ease 0.2s both; }

  .font-sans-modern { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', 'PingFang SC', 'Microsoft YaHei', sans-serif; }
  .page { display: none; position: relative; z-index: 2; }
  .page.active { display: flex; }
  .dialog-mask { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 100; align-items: center; justify-content: center; }
  .dialog-mask.open { display: flex; }
  .sidebar-link { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 6px; font-size: 14px; color: var(--color-ink2); cursor: pointer; transition: all .15s ease; }
  .sidebar-link:hover { background: var(--color-hover); color: var(--color-ink); }
  .sidebar-link.active { background: var(--color-hover); color: var(--color-ink); font-weight: 400; }
  .status-badge { display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px; border-radius: 10px; font-size: 11px; font-weight: 400; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.03em; }
  .badge-pending { background: rgba(251,191,36,0.15); color: #FBBF24; }
  .badge-active { background: rgba(0,0,0,0.04); color: #8A8A80; }
  .badge-done { background: rgba(0,0,0,0.03); color: var(--color-ink3); }
  .badge-review { background: rgba(139,92,246,0.15); color: #A78BFA; }
  .badge-passed { background: rgba(0,0,0,0.04); color: #8A8A80; }
  .badge-high { background: rgba(220,50,47,0.12); color: #C0392B; }
  .badge-mid { background: rgba(230,160,30,0.15); color: #B8860B; }
  .badge-low { background: rgba(0,0,0,0.05); color: #6B6B64; }
  .tag-type { display: inline-flex; align-items: center; font-size: 10px; font-weight: 400; padding: 2px 7px; border-radius: 10px; background: rgba(0,0,0,0.06); color: #6B6B64; letter-spacing: 0.04em; font-family: var(--font-mono); text-transform: uppercase; }
  .meta-label { font-size: 10px; color: var(--color-ink3); font-weight: 400; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.05em; }
  .meta-val { font-size: 11px; font-weight: 400; color: var(--color-ink); font-family: var(--font-mono); }
  .issue-card { border: 1px solid rgba(0,0,0,0.06); border-radius: 12px; background: #FFFFFF; transition: border-color .15s ease, background .15s ease; }
  .issue-card:hover { border-color: rgba(198,93,59,0.35); }
  .issue-card.selected { border-color: var(--color-accent); background: linear-gradient(rgba(198,93,59,0.04), rgba(198,93,59,0.04)), #FFFFFF; }
  .issue-card.highlighted { border-color: var(--color-accent); background: linear-gradient(rgba(198,93,59,0.04), rgba(198,93,59,0.04)), #FFFFFF; }
  .annotation-box { position: absolute; border: 2px solid; border-radius: 3px; cursor: pointer; transition: all .15s; }
  .annotation-label { position: absolute; top: -18px; left: 0; font-size: 10px; padding: 1px 4px; border-radius: 4px; white-space: nowrap; color: #fff; font-weight: 400; }
  .section-header { display: flex; align-items: center; gap:6px; padding: 6px 0; cursor: pointer; user-select: none; }
  .collapse-icon { transition: transform .2s; }
  .collapsed .collapse-icon { transform: rotate(-90deg); }
  .collapsible-body { overflow: hidden; transition: max-height .25s ease; }
  .img-thumb { width: 100%; height: 80px; object-fit: cover; border-radius: 6px; background: var(--color-bg2); }

  /* Figma-like canvas */
  .canvas-viewport { position: relative; overflow: hidden; background: transparent; cursor: default; user-select: none; touch-action: none; overscroll-behavior: none; }
  .canvas-viewport.pan-mode { cursor: grab; }
  .canvas-viewport.panning { cursor: grabbing; }
  .canvas-world { position: absolute; top: 0; left: 0; transform-origin: 0 0; will-change: transform; }
  .canvas-bg { position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(0,0,0,0.08) 1px, transparent 1px); background-size: 32px 32px; pointer-events: none; }
  .canvas-group-block { display: inline-flex; flex-direction: column; vertical-align: top; }
  .canvas-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .canvas-img-wrap { position: relative; border-radius: 6px; background: rgba(0,0,0,0.02); align-self: start; }
  .canvas-img-wrap > div:first-child, .canvas-img-wrap img { border-radius: 6px; overflow: hidden; }
  .canvas-img-wrap img { width: 100%; display: block; }
  .issue-anno { position: absolute; border: 2px solid var(--color-accent); border-radius: 3px; cursor: pointer; transition: box-shadow .2s, opacity .2s; }
  .issue-anno.priority-high { border-width: 3px; }
  .issue-anno.priority-mid { border-width: 2px; }
  .issue-anno.priority-low { border-width: 1px; border-style: dashed; }
  .issue-anno:hover { background: rgba(0,0,0,.03); }
  .issue-anno.dimmed { opacity: 0.2; }
  .issue-anno-label { position: absolute; top: -18px; left: 0; background: rgba(198,93,59,0.85); color: #fff; font-size: 10px; padding: 1px 4px; border-radius: 4px; white-space: nowrap; font-weight: 400; transition: top .15s, left .15s; max-width: 200px; overflow: hidden; text-overflow: ellipsis; }

  /* Analysis progress bar */
  .analyze-progress-bar { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: rgba(0,0,0,.04); z-index: 30; overflow: hidden; border-radius: 0 0 6px 6px; }
  .analyze-progress-fill { height: 100%; background: var(--color-accent); width: 0%; transition: width .4s ease; border-radius: 4px; }

  /* Scan animation */
  .scan-overlay { position: absolute; inset: 0; z-index: 25; pointer-events: none; overflow: hidden; }
  .scan-line { position: absolute; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(198,93,59,.3), rgba(198,93,59,.5), rgba(198,93,59,.3), transparent); animation: scanDown 2.5s ease-in-out infinite; }
  @keyframes scanDown { 0% { top: -2px; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
  .scan-grid { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent, transparent 20px, rgba(0,0,0,.02) 20px, rgba(0,0,0,.02) 21px), repeating-linear-gradient(90deg, transparent, transparent 20px, rgba(0,0,0,.02) 20px, rgba(0,0,0,.02) 21px); animation: gridPulse 2s ease-in-out infinite; }
  @keyframes gridPulse { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
  .scan-corner { position: absolute; width: 20px; height: 20px; border-color: rgba(198,93,59,.4); border-style: solid; border-width: 0; }
  .scan-corner.tl { top: 8px; left: 8px; border-top-width: 2px; border-left-width: 2px; border-radius: 3px 0 0 0; }
  .scan-corner.tr { top: 8px; right: 8px; border-top-width: 2px; border-right-width: 2px; border-radius: 0 3px 0 0; }
  .scan-corner.bl { bottom: 8px; left: 8px; border-bottom-width: 2px; border-left-width: 2px; border-radius: 0 0 0 3px; }
  .scan-corner.br { bottom: 8px; right: 8px; border-bottom-width: 2px; border-right-width: 2px; border-radius: 0 0 3px 0; }
  .scan-pulse { animation: cornerPulse 1.5s ease-in-out infinite; }
  @keyframes cornerPulse { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }

  /* Analyzing mask */
  .analyzing-mask { position: absolute; inset: 0; background: rgba(0,0,0,.4); z-index: 24; pointer-events: none; }

  /* Spotlight mode */
  .anno-spotlight-mode .issue-anno { border: none !important; background: transparent; box-shadow: none !important; }
  .anno-spotlight-mode .issue-anno:hover { background: rgba(0,0,0,.03); border: 2px solid rgba(255,255,255,.3) !important; }
  .anno-spotlight-mode .issue-anno.anno-active { border: 2px solid var(--color-accent) !important; background: rgba(0,0,0,.02); }
  .anno-spotlight-mode .issue-anno.anno-active .issue-anno-label { display: block; }
  .anno-spotlight-mode .issue-anno-label { display: none; }
  .spotlight-canvas-overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: 6px; }
  .spotlight-full-overlay { position: absolute; inset: 0; background: rgba(60,40,30,.4); z-index: 1; pointer-events: none; }
  .spotlight-ext-label { position: absolute; color: #fff; font-size: 11px; white-space: nowrap; font-weight: 400; z-index: 10; pointer-events: none; background: rgba(198,93,59,0.88); padding: 2px 6px; border-radius: 4px; letter-spacing: .01em; }

  /* View mode toggle + Zoom */
  .view-mode-toggle { position: absolute; bottom: 16px; right: 16px; display: flex; align-items: center; gap: 2px; background: rgba(255,255,255,.8); backdrop-filter: blur(12px); border: 1px solid rgba(0,0,0,0.06); border-radius: 10px; padding: 3px; z-index: 20; }
  .view-mode-btn { display: flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: 4px; font-size: 11px; color: #8A8A80; cursor: pointer; border: none; background: transparent; transition: all .12s; white-space: nowrap; }
  .view-mode-btn:hover { color: #1F1F1F; background: rgba(0,0,0,0.04); }
  .view-mode-btn.active { background: var(--color-accent); color: #fff; }
  .zoom-controls { position: absolute; bottom: 16px; left: 16px; display: flex; align-items: center; gap: 4px; background: rgba(255,255,255,.8); backdrop-filter: blur(12px); border: 1px solid rgba(0,0,0,0.06); border-radius: 10px; padding: 4px 6px; z-index: 20; }
  .zoom-btn { width: 24px; height: 24px; border-radius: 4px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #8A8A80; font-size: 14px; transition: background .12s; border: none; background: transparent; }
  .zoom-btn:hover { background: rgba(0,0,0,0.06); color: #1F1F1F; }
  .zoom-pct { font-size: 11px; font-family: var(--font-mono); color: #8A8A80; min-width: 36px; text-align: center; cursor: pointer; padding: 0 4px; }
  .zoom-pct:hover { color: #1F1F1F; }
  .canvas-label { font-size: 11px; font-weight: 400; color: #9A9A94; margin-bottom: 6px; letter-spacing: .06em; text-transform: uppercase; font-family: var(--font-mono); }
  .page-frame { background: rgba(0,0,0,0.02); border-radius: 6px; overflow: hidden; }
  .page-frame-header { padding: 6px 10px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(0,0,0,0.03); }
  .frame-dot { width: 8px; height: 8px; border-radius: 50%; }

  /* Right panel */
  .right-panel { width: 460px; min-width: 260px; max-width: 600px; flex-shrink: 0; border-left: 1px solid rgba(0,0,0,0.06); overflow: hidden; background: #F8F6F1; }
  .panel-resizer { width: 5px; flex-shrink: 0; cursor: col-resize; background: transparent; transition: all .2s; position: relative; z-index: 10; }
  .panel-resizer:hover, .panel-resizer.dragging { background: var(--color-accent); border-radius: 3px; }

  /* Left sidebar */
  .wb-sidebar { width: 224px; flex-shrink: 0; transition: width .3s cubic-bezier(.4,0,.2,1); overflow: hidden; background: #F8F6F1; border-right: 1px solid rgba(0,0,0,0.06); }
  .wb-sidebar.collapsed { width: 48px; }
  .wb-sidebar.collapsed .sidebar-text { display: none; }
  .wb-sidebar.collapsed .sidebar-link { justify-content: center; padding: 8px; }
  .wb-sidebar.collapsed .sidebar-user { display: none; }
  .wb-sidebar.collapsed .sidebar-logo-text { display: none; }
  .wb-sidebar.collapsed .sidebar-header-inner { justify-content: center; gap: 0; }
  .wb-sidebar.collapsed .sidebar-logo-icon { display: none; }
  .sidebar-collapse-btn { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 4px; cursor: pointer; color: #9A9A94; transition: all .15s; flex-shrink: 0; }
  .sidebar-collapse-btn:hover { background: var(--color-hover); color: var(--color-ink); }

  @keyframes fadeIn { from{opacity:0} to{opacity:1} }
  @keyframes spin { to { transform: rotate(360deg); } }
  @keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:.5; } }

  /* ── 小马装饰 ── */
  .peek-fox {
    display: flex;
    justify-content: center;
    pointer-events: none;
    opacity: 0.7;
    margin-bottom: -8px;
  }
  .peek-fox img {
    display: block;
  }
  .fade-in { animation: fadeIn .2s ease forwards; }
  .slide-up { animation: fadeIn .25s ease forwards; }

  .dropdown { display: none; position: absolute; top: calc(100% + 4px); left: 0; background: #FFFFFF; border: 1px solid rgba(0,0,0,0.08); border-radius: 12px; box-shadow: 0 4px 24px rgba(0,0,0,0.08); z-index: 50; min-width: 140px; padding: 4px; }
  .dropdown.open { display: block; }
  .dropdown-item { padding: 7px 12px; font-size: 13px; border-radius: 4px; cursor: pointer; color: #4A4A44; }
  .dropdown-item:hover { background: rgba(0,0,0,0.04); }
  .ai-block { background: rgba(0,0,0,0.025); border: 1px solid rgba(0,0,0,0.04); border-radius: 6px; padding: 12px; }

  .scrollbar-thin { scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.08) transparent; }
  .scrollbar-thin::-webkit-scrollbar { width: 6px; }
  .scrollbar-thin::-webkit-scrollbar-track { background: transparent; }
  .scrollbar-thin::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.08); border-radius: 3px; }
  .scrollbar-thin::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.15); }

  input, textarea, select { font-family: inherit; background: #FFFFFF; border-color: rgba(0,0,0,0.08); color: #1F1F1F; }
  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #FFFFFF inset !important;
    -webkit-text-fill-color: #1F1F1F !important;
    transition: background-color 5000s ease-in-out 0s;
  }
  input::placeholder, textarea::placeholder { color: rgba(0,0,0,0.3); }
  input:focus, textarea:focus, select:focus { border-color: rgba(198,93,59,0.5) !important; box-shadow: 0 0 0 3px rgba(198,93,59,0.12) !important; }
  input:focus-visible, textarea:focus-visible, select:focus-visible { outline: none; border-color: rgba(198,93,59,0.5); box-shadow: 0 0 0 3px rgba(198,93,59,0.12); }

  .comment-send { background:rgba(0,0,0,0.04); color:#8A8A80; border:none; border-radius:4px; padding:6px 14px; font-size:12px; font-weight:400; cursor:not-allowed; transition:all .25s cubic-bezier(.4,0,.2,1); white-space:nowrap; opacity:.45; }
  .comment-send.active { background:var(--color-accent); color:#fff; opacity:1; cursor:pointer; }
  .comment-send.active:hover { background:#B5503A; }

  .status-tab { position:relative; display:inline-flex; align-items:center; gap:4px; padding:4px 10px; border-radius:8px; font-size:10px; font-weight:400; font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.04em; color:#8A8A80; background:rgba(0,0,0,0.025); border:1px solid rgba(0,0,0,0.06); cursor:pointer; transition:all .15s ease; white-space:nowrap; }
  .status-tab-dot { position:absolute; top:1px; right:1px; width:6px; height:6px; border-radius:50%; background:#ef4444; pointer-events:none; }
  .status-tab:hover { border-color:rgba(255,255,255,0.15); background:rgba(0,0,0,0.04); }
  .status-tab.active { background:rgba(0,0,0,0.04); border-color:rgba(0,0,0,0.12); color:#1F1F1F; }
  .status-tab-count { font-size:11px; font-weight:400; min-width:14px; text-align:center; }

  /* Upload preview */
  .upload-preview { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; align-items:center; }
  .upload-preview .thumb { width:72px; height:72px; border-radius:6px; object-fit:cover; border:1px solid rgba(0,0,0,0.08); cursor:pointer; transition:opacity .15s; }
  .upload-preview .thumb:hover { opacity:.8; }
  .thumb-wrap .thumb-delete { position:absolute; top:-6px; right:-6px; width:18px; height:18px; border-radius:50%; background:rgba(0,0,0,0.55); color:#fff; font-size:12px; line-height:18px; text-align:center; cursor:pointer; opacity:0; transition:opacity .15s; }
  .thumb-wrap:hover .thumb-delete { opacity:1; }
  .thumb-wrap .thumb-delete:hover { background:rgba(220,38,38,0.8); }
  .upload-preview .thumb-more { width:72px; height:72px; border-radius:6px; background:var(--color-bg2); display:flex; align-items:center; justify-content:center; font-size:13px; color:#9A9A94; font-weight:400; cursor:pointer; transition:background .15s; }
  .upload-preview .thumb-more:hover { background:var(--color-L3); }
  .upload-preview .upload-label { width:100%; text-align:center; font-size:11px; font-weight:400; color:rgba(0,0,0,0.35); letter-spacing:0.02em; margin-bottom:4px; }
  .upload-preview .upload-info { display:flex; align-items:center; gap:8px; margin-top:6px; width:100%; justify-content:center; }
  .upload-preview .add-more { display:inline-flex; align-items:center; gap:3px; font-size:12px; color:var(--color-accent); cursor:pointer; font-weight:400; }
  .upload-preview .add-more:hover { text-decoration:underline; }
  .upload-zone { min-height:220px; display:flex; flex-direction:column; align-items:center; justify-content:center; }
  .upload-zone.has-files { border-style:solid; border-color:rgba(0,0,0,.06); background:rgba(0,0,0,.02); }
  .upload-zone.has-files:hover { border-color:rgba(0,0,0,.08); }

  /* Image viewer */
  .img-viewer-mask { display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:300; align-items:center; justify-content:center; flex-direction:column; }
  .img-viewer-mask.open { display:flex; }
  .img-viewer-grid { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; max-width:90vw; max-height:75vh; overflow-y:auto; padding:20px; }
  .img-viewer-grid img { height:360px; border-radius:6px; object-fit:cover; border:2px solid rgba(0,0,0,.1); box-shadow:0 4px 20px rgba(0,0,0,.08); }
  .img-viewer-close { position:absolute; top:20px; right:24px; width:36px; height:36px; border-radius:50%; background:rgba(0,0,0,.1); border:none; color:#fff; font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
  .img-viewer-close:hover { background:rgba(255,255,255,.3); }
  .img-viewer-title { color:#fff; font-size:14px; font-weight:400; margin-bottom:12px; }
  .timeline-avatar { width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:400; flex-shrink:0; }
  .compare-left { background:rgba(0,0,0,0.025); border:1px solid rgba(0,0,0,0.04); border-radius:6px; padding:10px; }
  .compare-right { background:rgba(239,68,68,0.08); border:1px solid rgba(239,68,68,0.15); border-radius:6px; padding:10px; }

  /* Issue select dropdown */
  .issue-select { display:flex; align-items:center; gap:5px; font-size:12px; font-weight:400; color:#4A4A44; background:rgba(0,0,0,0.025); border:1px solid rgba(0,0,0,0.06); padding:5px 8px; border-radius:8px; cursor:pointer; transition:border-color .15s; user-select:none; }
  .issue-select:hover { border-color:rgba(255,255,255,0.15); background:rgba(0,0,0,0.04); }
  .issue-dd { position:absolute; left:0; top:calc(100% + 4px); background:#FFFFFF; border:1px solid rgba(0,0,0,0.08); border-radius:12px; box-shadow: 0 4px 24px rgba(0,0,0,0.08); z-index:50; min-width:100%; overflow:hidden; }
  .issue-dd.feishu-picker { min-width:260px; border-radius:12px; border:1px solid rgba(0,0,0,0.08); }
  .feishu-picker-header { display:flex; align-items:center; gap:6px; padding:8px 10px 6px; border-bottom:1px solid rgba(0,0,0,0.04); }
  .feishu-picker-header svg { flex-shrink:0; }
  .feishu-picker-header span { font-size:11px; color:#999999; }
  .feishu-picker-search { padding:6px 8px; border-bottom:1px solid rgba(0,0,0,0.04); }
  .feishu-picker-search input { width:100%; border:1px solid rgba(0,0,0,0.08); border-radius:4px; padding:5px 8px 5px 26px; font-size:12px; outline:none; background:#FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' viewBox='0 0 24 24' stroke='%23666' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath stroke-linecap='round' d='M21 21l-4.35-4.35'/%3E%3C/svg%3E") 8px center no-repeat; color:#1F1F1F; transition:border-color .15s; }
  .feishu-picker-search input:focus { border-color:rgba(0,0,0,0.15); }
  .feishu-picker-list { max-height:200px; overflow-y:auto; padding:4px 0; }
  .feishu-picker-item { display:flex; align-items:center; gap:8px; padding:6px 10px; cursor:pointer; transition:background .1s; }
  .feishu-picker-item:hover { background:rgba(0,0,0,.04); }
  .feishu-picker-avatar { position:relative; flex-shrink:0; }
  .feishu-picker-avatar .avatar-circle { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:400; color:#fff; }
  .feishu-picker-avatar .online-dot { position:absolute; bottom:0; right:0; width:8px; height:8px; border-radius:50%; border:1.5px solid #fff; }
  .feishu-picker-info { flex:1; min-width:0; }
  .feishu-picker-info .name-row { display:flex; align-items:center; gap:4px; }
  .feishu-picker-info .name-row .uname { font-size:12px; font-weight:400; color:#4A4A44; }
  .feishu-picker-info .name-row .utag { font-size:9px; padding:1px 4px; border-radius:4px; font-weight:400; }
  .feishu-picker-info .udept { font-size:10px; color:#999999; margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .feishu-picker-footer { display:flex; align-items:center; gap:5px; padding:6px 10px; border-top:1px solid rgba(0,0,0,0.04); cursor:pointer; transition:background .1s; }
  .feishu-picker-footer:hover { background:rgba(0,0,0,.04); }
  .feishu-picker-footer span { font-size:11px; color:var(--color-accent); font-weight:400; }
  .feishu-picker-empty { text-align:center; padding:16px 10px; font-size:11px; color:#999999; }
  .issue-dd-item { display:flex; align-items:center; gap:6px; padding:6px 10px; font-size:12px; color:#4A4A44; cursor:pointer; white-space:nowrap; transition:background .1s; }
  .issue-dd-item:hover { background:rgba(0,0,0,0.04); }
  .issue-dd-sep { border-top:1px solid rgba(0,0,0,0.04); margin:3px 0; }

  /* Timeline */
  .card-timeline-section { display:none; }
  .timeline-open .card-timeline-section { display:block; }
  .timeline-toggle { display:flex; align-items:center; gap:4px; padding:4px 0; margin-top:8px; cursor:pointer; user-select:none; }
  .timeline-toggle:hover { color:var(--color-ink); }
  .timeline-toggle .tl-arrow { transition:transform .2s; font-size:10px; }
  .timeline-open .timeline-toggle .tl-arrow { transform:rotate(90deg); }

  /* Delete button */
  .issue-card { position:relative; }
  .card-delete-btn { position:absolute; top:8px; right:8px; width:22px; height:22px; border-radius:6px; display:flex; align-items:center; justify-content:center; cursor:pointer; opacity:0; transition:all .15s; background:transparent; border:none; color:#999999; z-index:5; }
  .issue-card:hover .card-delete-btn { opacity:1; }
  .card-delete-btn:hover { background:rgba(239,68,68,0.08); color:#DC2626; }

  /* Confirm dialog */
  .confirm-mask { display:none; position:fixed; inset:0; background:rgba(0,0,0,.25); z-index:200; align-items:center; justify-content:center; }
  .confirm-mask.open { display:flex; }
  .confirm-dialog { background:#FFFFFF; border:1px solid rgba(0,0,0,0.08); border-radius:16px; box-shadow: 0 3px 30px rgba(0,0,0,0.1); padding:24px; width:320px; text-align:center; }
  .confirm-dialog h3 { font-size:15px; font-weight:600; color:#1F1F1F; margin-bottom:8px; }
  .confirm-dialog p { font-size:13px; color:#8A8A80; margin-bottom:20px; }
  .confirm-dialog .btn-row { display:flex; gap:8px; }
  .confirm-dialog .btn-cancel { flex:1; padding:8px; border-radius:4px; border:1px solid rgba(0,0,0,0.08); background:transparent; color:#4A4A44; font-size:13px; font-weight:400; cursor:pointer; transition:all .15s ease; }
  .confirm-dialog .btn-cancel:hover { background:rgba(0,0,0,0.04); }
  .confirm-dialog .btn-danger { flex:1; padding:8px; border-radius:4px; border:none; background:#EF4444; color:#fff; font-size:13px; font-weight:400; cursor:pointer; transition:all .15s ease; }
  .confirm-dialog .btn-danger:hover { background:#DC2626; }
  .confirm-dialog .btn-primary { flex:1; padding:8px; border-radius:4px; border:none; background:var(--color-accent); color:#fff; font-size:13px; font-weight:400; cursor:pointer; transition:background .15s ease; }
  .confirm-dialog .btn-primary:hover { background:#B5503A; }

  /* Drag system */
  .canvas-img-wrap.dragging { opacity: 0.3; transition: opacity .15s; }
  .draft-label { cursor: grab; user-select: none; }
  .draft-label:active { cursor: grabbing; }
  .drag-ghost { position: fixed; pointer-events: none; z-index: 9999; border-radius: 6px; overflow: hidden; box-shadow: 0 8px 32px rgba(0,0,0,.12); opacity: .85; transition: none; }
  .canvas-group-block.drag-over { outline: 2px dashed var(--color-accent) !important; outline-offset: 6px; background: rgba(0,0,0,.02); border-radius: 6px; }

  /* Analyze button */
  .pair-analyze-btn { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 15; width: 32px; height: 32px; border-radius: 50%; background: rgba(198,93,59,0.92); color: #fff; cursor: pointer; opacity: 0; transition: opacity .2s, transform .2s; display: none; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,0.15); }
  .pair-analyze-btn.visible { opacity: 0; display: none; }
  .pair-analyze-btn:hover { transform: translate(-50%, -50%) scale(1.1); }
  .pair-analyze-btn.analyzing { opacity: 1; pointer-events: none; }
  .pair-analyze-btn.analyzing svg { animation: spin .8s linear infinite; }
  .pair-analyze-btn.analyzed { opacity: 1; background: rgba(16,163,74,.9); border-color: rgba(255,255,255,.3); pointer-events: none; }

  /* Unpaired hint */
  .canvas-img-wrap.unpaired { outline: 2px dashed rgba(0,0,0,.1); outline-offset: 2px; }

  /* Draw box mode */
  .anno-box-mode.draw-enabled .canvas-img-wrap { cursor: crosshair; }
  .draw-rect-preview { position: absolute; border: 2px dashed var(--color-accent); background: rgba(0,0,0,.02); border-radius: 4px; pointer-events: none; z-index: 20; }
  .add-issue-popover { position: fixed; z-index: 999; background: #FFFFFF; border-radius: 12px; border: 1px solid rgba(0,0,0,0.08); box-shadow: 0 4px 24px rgba(0,0,0,0.08); padding: 14px; width: 260px; }
  .add-issue-popover input, .add-issue-popover select { width: 100%; padding: 6px 10px; font-size: 13px; border: 1px solid rgba(0,0,0,0.08); border-radius: 4px; outline: none; transition: border-color .15s; background: #FFFFFF; color: #1F1F1F; }
  .add-issue-popover input:focus, .add-issue-popover select:focus { border-color: rgba(198,93,59,0.5); box-shadow: 0 0 0 2px rgba(198,93,59,.08); }
  .add-issue-popover label { display: block; font-size: 11px; color: #8A8A80; margin-bottom: 4px; font-weight: 400; }
  .add-issue-popover .field + .field { margin-top: 10px; }

  /* ── Homepage styles ── */
  .hero-title { font-size: 1.65rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.4; margin: 0; background: linear-gradient(135deg, #1F1F1F 0%, #4A4A44 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

  /* Glass card */
  .glass-card { background: rgba(255,255,255,.55); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid rgba(255,255,255,.6); border-radius: 20px; box-shadow: 0 4px 24px rgba(31,31,31,.05), 0 1px 0 rgba(255,255,255,.8) inset; }

  /* Upload zone */
  .task-name-wrap:hover { border-color: rgba(0,0,0,0.1) !important; background: #FFFFFF !important; }
  .task-name-wrap:focus-within { border-color: rgba(198,93,59,0.4) !important; background: #FFFFFF !important; box-shadow: 0 0 0 3px rgba(198,93,59,0.08); }
  .upload-zone-new { border: 2px dashed rgba(198,93,59,.2); border-radius: 16px; padding: 28px 20px; text-align: center; cursor: pointer; transition: all .3s cubic-bezier(.4,0,.2,1); background: rgba(255,255,255,.3); }
  .upload-zone-new:hover { border-color: rgba(198,93,59,.45); background: rgba(198,93,59,.04); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(198,93,59,.08); }
  .upload-icon-wrap { width: 44px; height: 44px; border-radius: 14px; display: flex; align-items: center; justify-content: center; margin: 0 auto 8px; background: rgba(198,93,59,.08); transition: all .3s cubic-bezier(.4,0,.2,1); }
  .upload-zone-new:hover .upload-icon-wrap { transform: scale(1.08); }

  /* Segmented Control */
  .seg-control { display:inline-flex; width:fit-content; gap:2px; padding:3px; border-radius:10px; background:#FFFFFF; border:1px solid rgba(0,0,0,0.06); }
  /* seg-control 贴合上传区顶部 */
  /* 贴合式 tab 栏 */
  .seg-control-attached { display:flex; width:auto; gap:0; padding:0 16px; border-radius:12px 12px 0 0; background:#FFFFFF; border:1px solid rgba(0,0,0,0.06); border-bottom:none; margin:0; }
  .seg-control-attached .seg-item { padding:10px 18px 8px; font-size:12px; font-weight:400; color:rgba(0,0,0,0.35); background:transparent; border:none; border-bottom:2px solid transparent; border-radius:0; cursor:pointer; transition:all .2s ease; box-shadow:none; }
  .seg-control-attached .seg-item:hover { color:rgba(0,0,0,0.5); }
  .seg-control-attached .seg-active { color:#1F1F1F; background:transparent; border-bottom:2px solid #C65D3B; box-shadow:none; }
  .upload-zone-no-top-radius { border-top-left-radius:0 !important; border-top-right-radius:0 !important; border-top:none !important; }
  /* 底部文字链接切换 */
  .figma-switch-link { display:inline-flex; align-items:center; gap:5px; font-size:11px; color:var(--color-ink2); cursor:pointer; transition:all .2s ease; padding:5px 14px; border-radius:8px; background:rgba(0,0,0,0.04); border:1px solid rgba(0,0,0,0.06); }
  .figma-switch-link:hover { color:var(--color-accent); background:rgba(198,93,59,0.06); border-color:rgba(198,93,59,0.15); }
  .seg-item { display:inline-flex; align-items:center; justify-content:center; gap:5px; padding:6px 16px; font-size:11px; font-weight:400; color:rgba(0,0,0,0.35); background:transparent; border:none; border-radius:4px; cursor:pointer; transition:all .2s ease; white-space:nowrap; }
  .seg-item:hover { color:rgba(0,0,0,0.5); }
  .seg-active { color:#1F1F1F; background:#E8E5DE; box-shadow:0 1px 2px rgba(0,0,0,0.06); }

  /* Figma help modal */
  .figma-modal-overlay { position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.3); animation:fadeIn .2s ease; }
  .figma-modal { background:#FFFFFF; border:1px solid rgba(0,0,0,0.08); border-radius:16px; box-shadow: 0 3px 30px rgba(0,0,0,0.1); padding:24px; max-width:560px; width:90%; max-height:80vh; overflow-y:auto; animation:nodumSlideUp .3s ease; }
  .figma-modal h3 { font-size:15px; font-weight:600; color:#1F1F1F; margin-bottom:16px; }
  .figma-modal .step { display:flex; gap:10px; margin-bottom:12px; }
  .figma-modal .step-num { width:20px; height:20px; border-radius:50%; background:var(--color-accent); color:#fff; font-size:11px; font-weight:400; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px; }
  .figma-modal .step-text { font-size:13px; color:#8A8A80; line-height:1.5; }
  .figma-modal .step-text b { color:#1F1F1F; }
  .figma-modal .tip-box { background:rgba(0,0,0,0.03); border-radius:6px; padding:10px 12px; font-size:12px; color:#8A8A80; margin-top:4px; }

  /* Project card */
  .project-card-new { position: relative; background: rgba(255,255,255,.55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.5); border-radius: 12px; transition: border-color .25s ease; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,.04); }
  .project-card-new:hover { border-color: rgba(0,0,0,0.1); }
  .project-card-new .project-arrow { opacity: 0; transition: opacity .2s ease; }
  .project-card-new:hover .project-arrow { opacity: 1; }
  .project-more-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; border: none; background: transparent; color: #9A9A94; cursor: pointer; opacity: 0; transition: opacity .2s, background .15s, color .15s; }
  .project-card-new:hover .project-more-btn { opacity: 1; }
  .project-more-btn:hover { background: rgba(0,0,0,0.06); color: var(--color-ink); }
  .project-menu { right: 0; left: auto; min-width: 120px; }
  .project-menu .dropdown-item:last-child:hover { background: rgba(239,68,68,0.12); }
  .project-icon { width: 40px; height: 40px; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

  /* CTA button */
  .cta-btn { background: var(--color-accent); color: #fff; border: none; border-radius: 980px; padding: 8px 24px; font-size: 13px; font-weight: 400; cursor: pointer; transition: all .2s ease; letter-spacing: 0; }
  .cta-btn:hover { background: #B5503A; }
  .cta-btn:disabled:not(.loading) { background: #E8E5DE; color: #AEAEA6; cursor: not-allowed; }
  .cta-btn:disabled.loading { cursor: wait; }
  .cta-btn.loading { opacity: .7; cursor: wait; }

  /* Bottom toolbar */
  .glass-toolbar { background: rgba(255,255,255,.65); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,.6); border-radius: 16px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); }

  /* Staggered entrance */
  .stagger-1 { animation: fadeIn .2s ease .02s both; }
  .stagger-2 { animation: fadeIn .2s ease .06s both; }
  .stagger-3 { animation: fadeIn .2s ease .1s both; }
  .stagger-4 { animation: fadeIn .2s ease .14s both; }
  .stagger-5 { animation: fadeIn .2s ease .18s both; }

  /* Refined input focus */
  .add-issue-popover input:focus, .add-issue-popover select:focus { border-color: rgba(198,93,59,0.5); box-shadow: 0 0 0 2px rgba(198,93,59,.08); }

  /* AI review tip */
  .ai-review-tip {
    display: flex; align-items: center; gap: 8px;
    background: rgba(0,0,0,0.025); border: 1px solid rgba(0,0,0,0.04); border-radius: 12px;
    padding: 10px 14px; margin-bottom: 8px; font-size: 12px; color: #8A8A80; line-height: 1.5;
  }

  /* Avatar menu */
  #avatarMenu { background: #FFFFFF !important; border-color: rgba(0,0,0,0.08) !important; box-shadow: 0 8px 24px rgba(0,0,0,0.08) !important; }

  /* ── Ambient warm glow — 2 blobs, asymmetric diagonal ── */
  .ambient-bg {
    position: fixed; inset: 0; z-index: 0;
    pointer-events: none; overflow: hidden;
  }
  .ambient-blob {
    position: absolute;
    border-radius: 50%;
    will-change: transform, border-radius;
  }
  /* 暖橘主光 — 右上角探入 */
  #blob-a1 {
    width: 800px; height: 800px;
    background: radial-gradient(circle, rgba(198,93,59,.25) 0%, rgba(198,93,59,.12) 30%, rgba(198,93,59,.03) 55%, transparent 70%);
    filter: blur(100px);
    top: -20%; right: -12%;
  }
  /* 金色辅光 — 左下角探入 */
  #blob-a2 {
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(255,194,51,.20) 0%, rgba(255,194,51,.08) 35%, transparent 65%);
    filter: blur(90px);
    bottom: -15%; left: -8%;
  }
  /* blob-a3 不需要 */
  #blob-a3 { display: none; }
  /* 鼠标跟随光 */
  #blob-cursor {
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(198,93,59,.18) 0%, rgba(198,93,59,.06) 35%, transparent 65%);
    filter: blur(90px);
    opacity: 0;
    transition: opacity 0.8s ease;
  }
  #blob-cursor.visible { opacity: 1; }