:root {
  --primary: #1664ff;
  --primary-hover: #0e51dc;
  --text-1: #0c0d0e;
  --text-2: #42464e;
  --text-3: #737a87;
  --border: #e2e5f1;
  --page: #f4f6fb;
  --white: #fff;
  font-family: "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  color: var(--text-1);
  background: var(--page);
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 1180px; background: var(--page); }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }

.sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 20; width: 88px; padding: 28px 12px;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  background: #eaeff8;
}
.brand-logo { width: 43px; height: 46px; object-fit: contain; }
.side-nav { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; }
.sidebar > :first-child { flex: 0 0 auto; }
.side-nav { position: absolute; top: 102px; left: 12px; }
.nav-item {
  width: 64px; height: 64px; padding: 8px 10px; border-radius: 8px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  color: #606383; font-size: 11px; line-height: 18px; font-weight: 500; text-decoration: none;
}
.nav-item img { width: 24px; height: 24px; }
.nav-item.active { color: var(--primary); background: #fff; }
.side-bottom { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.side-icon { position: relative; width: 44px; height: 44px; padding: 10px; border: 0; background: transparent; border-radius: 8px; }
.side-icon:hover { background: rgba(255,255,255,.7); }
.side-icon img { width: 24px; height: 24px; }
.badge { position: absolute; top: 2px; right: 5px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 9px; background:#f65159; color:#fff; font: 500 11px/16px Arial; }
.avatar { width: 36px; height: 36px; border: 0; border-radius: 50%; color: #fff; background: linear-gradient(135deg,#63d7ff,#a267f5); font-size:16px; }

.workspace {
  position:relative; min-height: 100vh; margin-left: 88px; padding: 40px 32px 48px;
  background: linear-gradient(112deg,#f8fbff 0%,#fdfcff 47%,#fff8ff 100%);
  border-radius: 12px 0 0 12px;
}
.version-page[hidden] { display:none; }
.version-switch-zone { position:absolute; z-index:18; top:0; right:24px; width:410px; height:138px; }
.version-switch { position:absolute; top:12px; right:0; height:32px; padding:3px; display:flex; gap:2px; border:1px solid #dfe4ee; border-radius:8px; background:rgba(255,255,255,.9); box-shadow:0 5px 18px rgba(38,52,84,.1); opacity:0; transform:translateY(-5px); pointer-events:none; transition:opacity .18s ease,transform .18s ease; backdrop-filter:blur(8px); }
.version-switch-zone:hover .version-switch,.version-switch-zone:focus-within .version-switch { opacity:1; transform:none; pointer-events:auto; }
.version-switch button { min-width:64px; height:24px; padding:0 10px; border:0; border-radius:5px; color:#737a87; background:transparent; font-size:12px; }
.version-switch button:hover { color:var(--primary); background:#f3f7ff; }
.version-switch button.active { color:var(--primary); background:#eaf1ff; font-weight:600; }
.hero { position: relative; height: 88px; display: flex; justify-content: space-between; overflow: hidden; }
.hero h1 { margin: 4px 0 8px; font-size: 30px; line-height: 42px; font-weight: 600; letter-spacing: .1px; }
.hero p { margin: 0; color: #657091; font-size: 14px; line-height: 22px; }
.hero-ribbon { position: absolute; right: 38px; top: -33px; width: 310px; height: 155px; object-fit: contain; transform: rotate(-2deg); opacity: .92; pointer-events: none; }

.top-layout { display: grid; grid-template-columns: 620px minmax(0, 1fr); gap: 20px; margin-top: 16px; }
.panel { border: 1px solid var(--border); border-radius: 8px; background: rgba(255,255,255,.9); transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease; }
.todo-panel:hover { background:#fffafd; border-color:#e7dff1; box-shadow:0 8px 24px rgba(117,83,160,.055); }
.opportunity-panel:hover { background:#f8fbff; border-color:#dce7f8; box-shadow:0 8px 24px rgba(70,112,174,.055); }
.tasks-panel:hover { background:#fafbff; border-color:#dfe3f3; box-shadow:0 8px 24px rgba(82,87,161,.05); }
.todo-panel, .opportunity-panel { height: 256px; padding: 20px; }
.panel-heading { height: 24px; display:flex; align-items:center; justify-content:space-between; }
.panel h2 { margin:0; color:var(--text-2); font-size:18px; line-height:24px; font-weight:600; }
.title-with-count { display:flex; align-items:center; gap:8px; }
.title-with-count > span { min-width: 47px; height: 22px; padding:0 14px; border:1px solid var(--border); border-radius:42px; color:var(--text-2); font-size:14px; line-height:20px; text-align:center; }

.todo-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; height:175px; margin-top:15px; }
.todo-card {
  position:relative; height:175px; padding:20px; border:1px solid var(--card-border); border-radius:8px;
  display:flex; flex-direction:column; align-items:flex-start; background:var(--card-bg); color:var(--card-color);
  transition: background .18s ease,border-color .18s ease,transform .18s ease,box-shadow .18s ease;
}
.todo-card:hover, .todo-card:focus-visible {
  background:var(--card-hover); border-color:var(--card-border-hover); box-shadow:0 7px 18px rgba(42,61,110,.08); transform:translateY(-2px); outline:none;
}
.todo-icon { width:24px; height:24px; display:block; background:currentColor; -webkit-mask:var(--icon-url) center/contain no-repeat; mask:var(--icon-url) center/contain no-repeat; }
.todo-number { margin-top:20px; font-size:32px; line-height:35px; font-weight:500; }
.todo-name { font-size:16px; line-height:28px; font-weight:600; white-space:nowrap; }
.todo-help { font-size:12px; line-height:28px; opacity:.5; white-space:nowrap; }

.refresh-button { border:0; padding:4px 7px; margin-right:-7px; border-radius:6px; display:flex; align-items:center; gap:4px; color:var(--text-3); background:transparent; font-size:13px; transition:.16s; }
.refresh-button img { width:16px; height:16px; }
.refresh-button:hover { color:var(--primary); background:transparent; }
.refresh-button:hover img { filter:brightness(0) saturate(100%) invert(35%) sepia(98%) saturate(3951%) hue-rotate(216deg) brightness(101%) contrast(106%); }
.refresh-button.is-loading img { animation: spin .55s ease; }
@keyframes spin { to { transform:rotate(360deg); } }
.opportunity-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px; margin-top:16px; height:174px; overflow:hidden; }
.opportunity-grid.updating { opacity:.28; transform:translateY(3px); }
.opportunity-card { min-width:0; height:174px; padding:12px; border:1px solid #eaedf1; border-radius:8px; display:flex; flex-direction:column; gap:8px; transition:border-color .18s,box-shadow .18s; }
.opportunity-card:hover { border-color:#c9d9ff; background:#f3f7ff; box-shadow:0 5px 15px rgba(22,100,255,.07); }
.opportunity-title { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:16px; line-height:26px; font-weight:600; }
.opportunity-desc { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; flex:1; color:#6e718c; font-size:13px; line-height:22px; }
.opportunity-foot { display:flex; align-items:flex-end; justify-content:space-between; }
.price { color:var(--primary); font-size:24px; line-height:34px; font-weight:600; white-space:nowrap; }
.unit { margin-left:5px; color:#6e718c; font-size:12px; font-weight:400; }
.signup { border:0; padding:5px 0; color:var(--primary); background:transparent; font-size:13px; white-space:nowrap; }

.tasks-panel { position:relative; height:calc(100vh - 440px); min-height:420px; margin-top:20px; padding:0; display:flex; flex-direction:column; overflow:hidden; }
.tasks-heading { position:relative; z-index:3; flex:0 0 72px; display:flex; align-items:center; justify-content:space-between; height:72px; padding:20px; margin:0; background:inherit; }
.tasks-tools { display:flex; align-items:center; gap:16px; }
.search-box { width:320px; height:32px; padding:5px 12px; border:1px solid #dde2e9; border-radius:8px; display:flex; align-items:center; gap:6px; background:#fff; }
.search-box:focus-within { border-color:#80aaff; box-shadow:0 0 0 2px rgba(22,100,255,.08); }
.search-box img { width:16px; height:16px; }
.search-box input { width:100%; border:0; outline:0; color:var(--text-2); font-size:13px; }
.search-box input::placeholder { color:#9399a4; }
.menu-wrap { position:relative; }
.more-button { width:32px; height:32px; padding:5px; border:1px solid #dde2e9; border-radius:8px; background:#fff; }
.more-button:hover { border-color:#9bbcff; background:#f7faff; }
.more-button img { width:20px; height:20px; }
.popover { position:absolute; z-index:8; right:0; top:40px; width:132px; padding:6px; border:1px solid #e1e5ed; border-radius:9px; background:#fff; box-shadow:0 10px 28px rgba(29,43,74,.14); }
.popover button { width:100%; height:38px; padding:0 10px; border:0; border-radius:6px; display:flex; align-items:center; justify-content:space-between; color:var(--text-2); background:#fff; font-size:14px; }
.popover button:hover { background:#f2f6ff; color:var(--primary); }
.popover button img { width:14px; height:14px; transition:transform .16s ease; }
.popover button:hover img { transform:translateX(2px); }

.task-list { flex:1; min-height:0; margin:0 20px 20px; border:1px solid var(--border); border-radius:8px; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; }
.task-list::-webkit-scrollbar { width:6px; }
.task-list::-webkit-scrollbar-thumb { border-radius:8px; background:#cbd3e1; }
.task-list::-webkit-scrollbar-track { background:transparent; }
.task-card { position:relative; min-height:147px; padding:20px; display:flex; align-items:center; gap:40px; background:#fff; border-bottom:1px solid var(--border); transition:background .16s; }
.task-card:last-child { border-bottom:0; }
.task-card:hover { background:#fafcff; }
.task-main { min-width:0; flex:1; display:flex; flex-direction:column; gap:12px; }
.task-top { display:flex; align-items:center; gap:12px; min-width:0; }
.task-title { max-width:520px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:16px; line-height:24px; font-weight:600; }
.tag { height:24px; padding:1px 6px; border-radius:4px; color:#42464e; background:#fff; box-shadow:0 0 0 1px #dde2e9 inset; font-size:13px; line-height:22px; white-space:nowrap; }
.tag.deadline { color:#bd7e00; background:#fff3dc; box-shadow:none; }
.task-id-row { display:flex; align-items:center; gap:8px; color:#9fa4ae; font-size:13px; line-height:18px; }
.copy-button { opacity:0; transform:translateX(-4px); width:26px; height:26px; padding:0; border:0; border-radius:5px; display:grid; place-items:center; color:#6f7c92; background:transparent; transition:.15s; }
.copy-button span { font:400 20px/1 Arial,sans-serif; transform:translateY(-1px); }
.task-card:hover .copy-button, .copy-button:focus-visible { opacity:1; transform:none; }
.copy-button:hover { color:var(--primary); background:#eaf1ff; }
.task-desc { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#6e718c; font-size:13px; line-height:18px; }
.task-stats { display:flex; align-items:flex-end; gap:40px; }
.task-stats .count { color:#737a87; font-size:18px; line-height:24px; }
.task-stats .count small { margin-left:6px; color:#6e718c; font-size:13px; }
.continue-button { flex:0 0 118px; height:44px; border:1px solid #3170ef; border-radius:8px; color:#fff; background:#4180ff; box-shadow:0 2px 1px rgba(0,0,0,.15); font-size:16px; }
.continue-button:hover { background:#2f70f4; }
.task-empty { padding:60px; color:var(--text-3); text-align:center; }

.todo-strip { height:82px; margin-top:16px; padding:12px 20px; display:flex; align-items:center; background:#f0efff; border-color:#d8d5f7; }
.todo-strip:hover { background:#eceaff; border-color:#c9c4f2; }
.todo-strip > .title-with-count { flex:0 0 170px; }
.todo-strip > .title-with-count > span { background:#fff; }
.todo-strip-items { height:56px; display:flex; align-items:center; gap:16px; }
.todo-strip-card { height:56px; min-width:120px; padding:0 24px; border:0; border-radius:8px; display:flex; align-items:center; justify-content:center; gap:10px; color:#3f424a; background:transparent; font-size:16px; line-height:28px; transition:background .16s,box-shadow .16s,color .16s; }
.todo-strip-card strong { color:var(--strip-color); font-size:20px; line-height:24px; font-weight:500; }
.todo-strip-card:hover,.todo-strip-card:focus-visible { color:#1d2129; background:#fff; box-shadow:0 2px 8px rgba(31,48,80,.07); outline:none; }
.todo-strip-card.signup { min-width:161px; margin-left:2px; position:relative; }
.todo-strip-card.signup::before { content:""; position:absolute; left:-10px; top:18px; width:2px; height:20px; background:#cdd3de; }
.v2-main-layout { display:grid; grid-template-columns:minmax(0,1fr) 384px; gap:20px; margin-top:18px; }
.tasks-panel-v2 { height:calc(100vh - 264px); min-height:620px; margin-top:0; }
#versionTwo .task-card { min-height:157px; }
#versionTwo .continue-button { height:44px; color:#42464e; border-color:#d8dee8; background:#f8fafc; }
#versionTwo .continue-button:hover { color:var(--primary); border-color:#9bbcff; background:#f3f7ff; }
.opportunity-panel-v2 { position:relative; height:calc(100vh - 264px); min-height:620px; padding:20px; }
.opportunity-grid-v2 { height:554px; grid-template-columns:1fr; gap:16px; overflow:hidden; }
.browse-more { position:absolute; bottom:10px; left:50%; transform:translateX(-50%); height:28px; padding:0; border:0; display:flex; align-items:center; gap:4px; color:var(--primary); background:transparent; font-size:13px; white-space:nowrap; }
.browse-more img { width:14px; height:14px; }

.drawer-overlay { position:fixed; z-index:40; inset:0; background:rgba(12,15,22,.48); }
.drawer { position:fixed; z-index:41; top:0; right:0; width:612px; height:100vh; padding:0; background:#fff; box-shadow:-12px 0 38px rgba(17,31,63,.12); transform:translateX(102%); transition:transform .25s ease; }
.drawer.open { transform:none; }
.drawer-header { height:58px; padding:0 24px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #edf0f5; }
.drawer-title-with-count { display:flex; align-items:center; gap:8px; }
.drawer-header h2 { margin:0; font-size:18px; line-height:26px; font-weight:600; }
.drawer-title-with-count > span { min-width:47px; height:22px; padding:0 14px; border:1px solid var(--border); border-radius:42px; color:var(--text-2); font-size:14px; line-height:20px; text-align:center; }
.drawer-close { width:24px; height:24px; padding:0; border:0; border-radius:6px; color:#30333b; background:transparent; font-size:20px; line-height:22px; }
.drawer-close:hover { color:var(--primary); background:#f3f6fc; }
.drawer-body { height:calc(100vh - 58px); padding:24px; overflow:hidden; }
.drawer-tabs { width:max-content; height:40px; padding:6px; display:flex; align-items:center; gap:0; border:0; border-radius:22px; background:#f2f3f5; }
.drawer-tab { height:28px; padding:2px 12px; border:0; border-radius:16px; color:#4f535c; background:transparent; font-size:14px; line-height:24px; white-space:nowrap; }
.drawer-tab span { display:inline-block; min-width:17px; height:14px; margin-left:4px; padding:0 5px; border-radius:8px; color:#676c75; background:#fff; font-size:10px; line-height:14px; vertical-align:1px; }
.drawer-tab.active { color:var(--primary); background:#fff; box-shadow:0 1px 3px rgba(22,42,74,.08); font-weight:500; }
.drawer-tab.active span { color:var(--primary); background:#edf3ff; }
.drawer-content { height:calc(100vh - 122px); padding-top:20px; overflow:auto; }
.drawer-list { display:flex; flex-direction:column; gap:20px; }
.drawer-card { min-height:152px; padding:20px; border:1px solid #dfe4ec; border-radius:10px; background:#fff; box-shadow:none; }
.drawer-card:hover { border-color:#b9cdf8; box-shadow:0 6px 18px rgba(32,74,158,.07); }
.drawer-card-main { display:flex; align-items:flex-start; gap:16px; }
.drawer-card-icon { flex:0 0 56px; width:56px; height:56px; border-radius:8px; display:grid; place-items:center; background:var(--drawer-icon-bg); }
.drawer-item-icon { width:28px; height:28px; display:block; color:var(--drawer-icon-color); background:currentColor; -webkit-mask:var(--icon-url) center/contain no-repeat; mask:var(--icon-url) center/contain no-repeat; }
.drawer-card-info { min-width:0; flex:1; }
.drawer-card-title { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:16px; line-height:24px; font-weight:600; }
.drawer-card-sub { margin-top:8px; color:#737a87; font-size:13px; line-height:24px; }
.drawer-card-foot { margin:10px 0 0 72px; min-height:42px; display:flex; align-items:flex-end; justify-content:space-between; }
.wait-time { min-height:22px; color:#737a87; font-size:13px; line-height:22px; }
.wait-time strong { margin-left:5px; color:#ea414a; font-size:15px; font-weight:500; }
.drawer-action { min-width:118px; height:42px; padding:0 20px; border:1px solid #d8dee8; border-radius:8px; color:#42464e; background:#f8fafc; box-shadow:0 2px 2px rgba(21,34,54,.06); font-size:16px; }
.drawer-action:hover { color:var(--primary); border-color:#9bbcff; background:#f3f7ff; }

.toast { position:fixed; z-index:60; left:50%; top:24px; min-width:200px; padding:11px 18px; border-radius:8px; color:#fff; background:#252a34; box-shadow:0 8px 24px rgba(0,0,0,.2); font-size:14px; text-align:center; opacity:0; transform:translate(-50%,-12px); pointer-events:none; transition:.2s; }
.toast.show { opacity:1; transform:translate(-50%,0); }

@media (min-width: 1600px) {
  .workspace { padding-left:40px; padding-right:40px; }
  .opportunity-grid { grid-template-columns:repeat(auto-fit,minmax(245px,1fr)); }
  .opportunity-grid-v2 { grid-template-columns:1fr; }
}

@media (max-width: 1240px) {
  .workspace { padding-left:24px; padding-right:24px; }
  .top-layout { grid-template-columns:620px minmax(360px,1fr); }
  .opportunity-grid { grid-template-columns:1fr; }
  .v2-main-layout { grid-template-columns:minmax(0,1fr) 360px; }
  .opportunity-grid-v2 { grid-template-columns:1fr; }
  .hero-ribbon { right:0; }
}