.issue-page-shell { width: min(1480px, calc(100% - 32px)); margin: 0 auto; padding: 28px 0 48px; color: #101828; }
.issue-page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 18px; }
.page-subtitle { margin: 6px 0 0; color: #667085; }
.issue-header-actions { display: flex; gap: 10px; }
.workspace-nav, .issue-view-tabs { display: flex; gap: 6px; margin-bottom: 14px; }
.workspace-nav a, .issue-view-tabs button { padding: 10px 16px; border: 0; border-radius: 10px; color: #475467; background: transparent; text-decoration: none; font-weight: 700; }
.workspace-nav .active, .issue-view-tabs .active { color: #155eef; background: #eff4ff; }
.primary-action, .secondary-action { border: 0; border-radius: 10px; padding: 10px 16px; font-weight: 700; cursor: pointer; }
.primary-action { color: white; background: #155eef; }
.secondary-action { color: #344054; background: #f2f4f7; }
.issue-toolbar, .issue-view { padding: 16px; margin-bottom: 16px; border: 1px solid #eaecf0; border-radius: 14px; background: #fff; box-shadow: 0 8px 24px rgba(16, 24, 40, .05); }
.issue-toolbar-primary { display: grid; grid-template-columns: minmax(260px, 2fr) repeat(2, minmax(140px, 1fr)) auto; gap: 12px; align-items: end; }
.issue-field { display: grid; gap: 6px; color: #475467; font-size: 13px; font-weight: 700; }
.issue-field input, .issue-field select { width: 100%; padding: 10px 12px; border: 1px solid #d0d5dd; border-radius: 9px; background: white; }
.issue-list-actions { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.issue-io-actions { display: flex; gap: 8px; }
.issue-records-root { overflow-x: auto; }
.issue-table-header, .issue-row-main { display: grid; grid-template-columns: 28px 54px 140px minmax(220px, 2fr) minmax(150px, 1.2fr) 100px 112px 116px 82px 64px 92px 112px; gap: 10px; align-items: center; }
.issue-table-header { padding: 0 14px 10px; color: #667085; font-size: 12px; font-weight: 700; }
.issue-table-header button { padding: 0; border: 0; color: inherit; background: none; text-align: left; font: inherit; cursor: pointer; }
.issue-row { padding: 14px; border: 1px solid #eaecf0; border-left-width: 5px; border-radius: 10px; margin-bottom: 10px; transition: box-shadow .16s ease, border-color .16s ease; }
.issue-row:hover { border-color: #d0d5dd; box-shadow: 0 5px 18px rgba(16, 24, 40, .06); }
.issue-row.is-overdue { background: linear-gradient(90deg, #fff5f4, #fff 22%); }
.issue-row-main > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.issue-row-main small { display: block; margin-top: 4px; color: #98a2b3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.issue-number { border: 0; color: #175cd3; background: transparent; padding: 0; text-align: left; font-weight: 700; cursor: pointer; }
.issue-title-cell { min-width: 0; }
.issue-title-cell strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.severity-badge { display: inline-flex; width: fit-content; padding: 4px 8px; border-radius: 999px; font-size: 12px; font-weight: 800; }
.severity-P0 { border-left-color: #d92d20; }
.severity-P1 { border-left-color: #f79009; }
.severity-P2 { border-left-color: #fdb022; }
.severity-P3 { border-left-color: #2e90fa; }
.severity-badge.severity-P0 { color: #b42318; background: #fee4e2; }
.severity-badge.severity-P1 { color: #b54708; background: #ffead5; }
.severity-badge.severity-P2 { color: #93370d; background: #fef0c7; }
.severity-badge.severity-P3 { color: #175cd3; background: #d1e9ff; }
.state-pill { display: inline-flex; width: fit-content; padding: 4px 8px; border-radius: 999px; background: #f2f4f7; color: #475467; font-size: 12px; font-weight: 700; }
.state-已解决 { color: #027a48; background: #d1fadf; }
.state-部分解决 { color: #b54708; background: #fef0c7; }
.row-actions { display: flex; gap: 6px; overflow: visible !important; }
.row-actions button, .attachment-item button, .action-editor button { border: 0; color: #344054; background: #f2f4f7; border-radius: 7px; padding: 6px 8px; cursor: pointer; }
.issue-detail { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 14px -4px -4px; padding: 16px; border-radius: 10px; background: #f9fafb; }
.issue-detail section { min-width: 0; }
.issue-detail h3 { margin: 0 0 10px; font-size: 14px; }
.issue-detail p, .issue-detail dd { color: #475467; line-height: 1.6; }
.issue-detail dl { margin: 0; }
.issue-detail dt { margin-top: 8px; color: #98a2b3; font-size: 12px; }
.issue-detail dd { margin: 2px 0 0; }
.advanced-filter-grid { display: grid; grid-template-columns: repeat(5, minmax(130px, 1fr)); gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid #eaecf0; }
.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.filter-chips:empty { display: none; }
.filter-chips button { border: 1px solid #b2ccff; color: #1849a9; background: #eff4ff; border-radius: 999px; padding: 5px 10px; cursor: pointer; }
.issue-pagination { display: flex; align-items: center; justify-content: space-between; color: #667085; }
.issue-pagination > div { display: flex; align-items: center; gap: 10px; }
.issue-pagination button, .issue-pagination select { padding: 7px 10px; border: 1px solid #d0d5dd; border-radius: 8px; background: #fff; }
.issue-drawer-backdrop { position: fixed; inset: 0; z-index: 1100; display: flex; justify-content: flex-end; background: rgba(16, 24, 40, .45); }
.issue-drawer { display: flex; flex-direction: column; width: min(820px, 100%); height: 100%; overflow: hidden; background: #fff; box-shadow: -12px 0 32px rgba(16, 24, 40, .18); }
.drawer-header, .drawer-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 22px; border-bottom: 1px solid #eaecf0; }
.drawer-header p, .drawer-header h2 { margin: 0; }
.drawer-header p { color: #667085; font-size: 12px; }
.drawer-header button { width: 36px; height: 36px; border: 0; border-radius: 10px; background: #f2f4f7; font-size: 22px; cursor: pointer; }
.drawer-footer { margin-top: auto; border-top: 1px solid #eaecf0; border-bottom: 0; color: #667085; }
.drawer-footer > div { display: flex; gap: 10px; }
#issue-form { overflow-y: auto; padding: 18px 22px 30px; }
.drawer-section { margin-bottom: 14px; border: 1px solid #eaecf0; border-radius: 12px; background: #fff; }
.drawer-section > summary { padding: 15px 16px; font-weight: 800; cursor: pointer; list-style: none; }
.drawer-section > summary span { margin-left: 8px; color: #98a2b3; font-size: 12px; font-weight: 500; }
.drawer-section[open] > summary { border-bottom: 1px solid #eaecf0; }
.form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 16px; }
.form-grid label { display: grid; gap: 6px; color: #475467; font-size: 13px; font-weight: 700; }
.form-grid input, .form-grid select, .form-grid textarea, .action-editor input, .action-editor select { width: 100%; min-width: 0; padding: 9px 10px; border: 1px solid #d0d5dd; border-radius: 8px; color: #101828; background: #fff; font: inherit; }
.form-grid textarea { resize: vertical; line-height: 1.55; }
.span-2 { grid-column: span 2; }
.span-3 { grid-column: 1 / -1; }
.check-field { display: flex !important; grid-auto-flow: column; align-items: center; justify-content: start; align-self: end; min-height: 42px; }
.check-field input { width: auto; }
.inline-control { display: grid; grid-template-columns: 1fr 38px; gap: 6px; }
.inline-control button { border: 0; border-radius: 8px; background: #eff4ff; color: #155eef; font-size: 20px; cursor: pointer; }
.subsection { margin: 0 16px 16px; padding-top: 15px; border-top: 1px solid #eaecf0; }
.subsection-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.subsection-header h3 { margin: 0; font-size: 14px; }
.subsection-header span, .muted { color: #98a2b3; font-size: 12px; }
.attachment-list { display: grid; gap: 8px; margin-top: 10px; }
.attachment-item { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 9px 10px; border-radius: 8px; background: #f9fafb; }
.attachment-item a { min-width: 0; color: #175cd3; overflow: hidden; text-overflow: ellipsis; }
.action-list { display: grid; gap: 8px; }
.action-editor { display: grid; grid-template-columns: minmax(160px, 2fr) 100px 130px 105px minmax(130px, 1fr) auto auto; gap: 7px; align-items: center; }
.severity-settings-form { display: grid; gap: 14px; overflow-y: auto; padding: 22px; }
.severity-setting { display: grid; grid-template-columns: 54px 1fr 180px; gap: 14px; align-items: end; padding: 16px; border: 1px solid #eaecf0; border-left-width: 5px; border-radius: 10px; }
.severity-setting > strong { align-self: center; font-size: 18px; }
.severity-setting label { display: grid; gap: 6px; color: #475467; font-size: 13px; font-weight: 700; }
.severity-setting input { padding: 9px 10px; border: 1px solid #d0d5dd; border-radius: 8px; }
.metric-grid { display: grid; grid-template-columns: repeat(6, minmax(130px, 1fr)); gap: 12px; }
.metric-card { padding: 16px; border: 1px solid #eaecf0; border-radius: 12px; background: #fff; }
.metric-card span { color: #667085; font-size: 13px; }
.metric-card strong { display: block; margin-top: 8px; font-size: 28px; }
.metric-card small { color: #98a2b3; }
.more-metrics { margin: 12px 0; padding: 12px 14px; border: 1px solid #eaecf0; border-radius: 12px; background: #fff; }
.more-metrics summary { color: #475467; font-weight: 700; cursor: pointer; }
.mini-metric-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 10px; margin-top: 12px; }
.mini-metric-grid span { padding: 10px; border-radius: 9px; background: #f9fafb; }
.mini-metric-grid small, .mini-metric-grid strong { display: block; }
.mini-metric-grid small { min-height: 32px; color: #667085; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(360px, .65fr); gap: 14px; }
.dashboard-card { padding: 18px; border: 1px solid #eaecf0; border-radius: 14px; background: #fff; }
.dashboard-card header { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.dashboard-card h2, .dashboard-card p { margin: 0; }
.dashboard-card h2 { font-size: 16px; }
.dashboard-card p { margin-top: 4px; color: #98a2b3; font-size: 12px; }
.dashboard-card select { padding: 7px 10px; border: 1px solid #d0d5dd; border-radius: 8px; background: #fff; }
.trend-legend { display: flex; justify-content: flex-end; gap: 12px; color: #667085; font-size: 12px; }
.trend-legend span::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 2px; background: currentColor; }
.added { color: #2e90fa; } .resolved { color: #12b76a; } .overdue { color: #f04438; } .recurrence { color: #7f56d9; }
.trend-chart { display: flex; align-items: flex-end; gap: 10px; height: 250px; padding-top: 22px; overflow-x: auto; }
.trend-group { display: grid; grid-template-rows: 1fr auto; flex: 1 0 58px; height: 100%; padding: 0; border: 0; background: transparent; text-align: center; cursor: pointer; }
.trend-group:hover { background: #f9fafb; }
.trend-bars { display: flex; align-items: flex-end; justify-content: center; gap: 3px; min-height: 0; border-bottom: 1px solid #eaecf0; }
.chart-bar { display: block; width: 9px; height: calc(var(--bar) * 190px); min-height: 2px; border-radius: 3px 3px 0 0; background: currentColor; }
.trend-group small { margin-top: 8px; color: #98a2b3; font-size: 10px; }
.distribution-groups { display: grid; gap: 15px; }
.distribution-group h3 { margin: 0 0 7px; font-size: 12px; color: #667085; }
.distribution-group button { display: grid; grid-template-columns: 100px 1fr 28px; gap: 8px; width: 100%; align-items: center; padding: 4px 0; border: 0; background: transparent; text-align: left; cursor: pointer; }
.distribution-group button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.distribution-group button i { height: 7px; width: calc(var(--bar) * 100%); border-radius: 99px; background: #84adff; }
.frequent-card { margin-top: 14px; }
.frequent-table { display: grid; }
.frequent-head, .frequent-table > button { display: grid; grid-template-columns: minmax(260px, 2fr) repeat(4, minmax(100px, 1fr)); gap: 12px; align-items: center; padding: 11px 8px; }
.frequent-head { color: #667085; font-size: 12px; font-weight: 700; border-bottom: 1px solid #eaecf0; }
.frequent-table > button { border: 0; border-bottom: 1px solid #f2f4f7; background: transparent; text-align: left; cursor: pointer; }
.frequent-table > button:hover { background: #f9fafb; }
.frequent-table strong, .frequent-table small { display: block; }
.frequent-table small { color: #98a2b3; }
.empty-state { padding: 48px; text-align: center; color: #667085; }
.empty-state span { display: block; margin-top: 6px; }
.empty-state.compact { padding: 24px; }

/* Minimal ink-wash glass theme */
.issue-page-shell {
  --issue-ink: #1f2d28;
  --issue-ink-soft: #53635c;
  --issue-line: rgba(35, 52, 45, .14);
  --issue-glass: rgba(249, 249, 244, .62);
  --issue-glass-strong: rgba(250, 250, 246, .82);
  position: relative;
  isolation: isolate;
  color: var(--issue-ink);
}
.issue-page-shell::before,
.issue-page-shell::after {
  position: fixed;
  z-index: -1;
  content: "";
  pointer-events: none;
  filter: blur(28px);
}
.issue-page-shell::before {
  inset: 0;
  background:
    radial-gradient(ellipse at 10% 14%, rgba(43, 62, 53, .22), transparent 34%),
    radial-gradient(ellipse at 88% 10%, rgba(108, 124, 112, .18), transparent 32%),
    radial-gradient(ellipse at 54% 92%, rgba(31, 45, 40, .1), transparent 36%),
    repeating-linear-gradient(0deg, rgba(31, 45, 40, .018) 0, rgba(31, 45, 40, .018) 1px, transparent 1px, transparent 5px),
    linear-gradient(138deg, #f5f3ea 0%, #e9ece5 52%, #f8f5ec 100%);
  filter: none;
}
.issue-page-shell::after {
  right: -8vw;
  bottom: 4vh;
  width: 42vw;
  height: 24vw;
  border-radius: 57% 43% 45% 55%;
  background: radial-gradient(ellipse, rgba(47, 63, 56, .12), rgba(112, 125, 111, .05) 52%, transparent 74%);
  transform: rotate(11deg);
}
.issue-page-header {
  position: relative;
  padding: 10px 4px 18px;
}
.issue-page-header::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, rgba(31, 45, 40, .48), rgba(31, 45, 40, .08) 58%, transparent);
}
.issue-page-header h1 { color: var(--issue-ink); font-weight: 700; letter-spacing: .06em; }
.issue-page-header .eyebrow { color: #718078; font-weight: 600; letter-spacing: .12em; }
.page-subtitle { color: var(--issue-ink-soft); }
.workspace-nav a,
.issue-view-tabs button {
  border: 1px solid transparent;
  border-radius: 7px;
  color: #526159;
  font-weight: 600;
}
.workspace-nav a:hover,
.issue-view-tabs button:hover { color: #17251f; background: rgba(255, 255, 251, .36); }
.workspace-nav .active,
.issue-view-tabs .active {
  border-color: rgba(39, 61, 51, .13);
  color: #203b30;
  background: rgba(248, 249, 244, .58);
  box-shadow: inset 0 -2px 0 rgba(42, 71, 58, .52);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.primary-action,
.secondary-action {
  border: 1px solid var(--issue-line);
  border-radius: 8px;
  font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .58);
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.primary-action {
  color: #f8f7f0;
  background: linear-gradient(135deg, rgba(31, 50, 42, .96), rgba(73, 94, 83, .92));
}
.secondary-action { color: #32453c; background: rgba(249, 249, 244, .58); }
.primary-action:hover,
.secondary-action:hover { transform: translateY(-1px); border-color: rgba(38, 59, 50, .3); }
.issue-toolbar,
.issue-view,
.metric-card,
.more-metrics,
.dashboard-card {
  border-color: rgba(255, 255, 255, .7);
  background:
    linear-gradient(145deg, rgba(255, 255, 252, .72), rgba(244, 246, 240, .46)),
    rgba(245, 247, 241, .46);
  box-shadow:
    0 20px 52px rgba(27, 43, 36, .1),
    inset 0 1px 0 rgba(255, 255, 255, .84);
  backdrop-filter: blur(22px) saturate(82%);
  -webkit-backdrop-filter: blur(22px) saturate(82%);
}
.issue-field { color: #4c5d55; font-weight: 600; }
.issue-field input,
.issue-field select,
.form-grid input,
.form-grid select,
.form-grid textarea,
.action-editor input,
.action-editor select,
.dashboard-card select,
.severity-setting input {
  border-color: rgba(45, 65, 56, .18);
  color: #25372f;
  background: rgba(255, 255, 251, .55);
  box-shadow: inset 0 1px 2px rgba(25, 40, 33, .035);
}
.issue-field input:focus,
.issue-field select:focus,
.form-grid input:focus,
.form-grid select:focus,
.form-grid textarea:focus,
.action-editor input:focus,
.action-editor select:focus {
  border-color: rgba(43, 73, 59, .48);
  box-shadow: 0 0 0 3px rgba(62, 91, 76, .1);
  outline: none;
}
.issue-row {
  border-color: rgba(42, 61, 52, .13);
  background: rgba(255, 255, 251, .42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .52);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.issue-row:hover { border-color: rgba(41, 62, 52, .28); box-shadow: 0 10px 28px rgba(27, 43, 36, .08); }
.issue-row.is-overdue { background: linear-gradient(90deg, rgba(125, 67, 60, .1), rgba(255, 255, 251, .42) 24%); }
.issue-table-header,
.issue-row-main small,
.issue-detail dt,
.subsection-header span,
.muted { color: #75827b; }
.issue-number,
.attachment-item a { color: #2f5a49; }
.state-pill { color: #44564d; background: rgba(76, 94, 84, .09); }
.state-已解决 { color: #2d634b; background: rgba(70, 128, 96, .13); }
.state-部分解决 { color: #785f2e; background: rgba(154, 126, 58, .13); }
.row-actions button,
.attachment-item button,
.action-editor button,
.drawer-header button { color: #34483e; background: rgba(237, 240, 234, .74); }
.issue-detail,
.attachment-item,
.mini-metric-grid span { background: rgba(237, 240, 233, .48); }
.filter-chips button {
  border-color: rgba(56, 83, 70, .22);
  color: #345445;
  background: rgba(237, 242, 235, .62);
}
.issue-pagination {
  min-height: 44px;
  gap: 16px;
  padding-top: 10px;
  color: #5f6f67;
}
.issue-pagination > div { flex: 0 0 auto; flex-wrap: nowrap; }
.issue-pagination button,
.issue-pagination strong,
.issue-pagination select {
  white-space: nowrap;
  flex: 0 0 auto;
}
.issue-pagination button,
.issue-pagination select {
  border-color: rgba(43, 64, 54, .18);
  color: #34483e;
  background: rgba(250, 250, 246, .6);
}
.issue-pagination button { min-width: 64px; }
.issue-pagination select { width: auto; min-width: 112px; }
.issue-pagination button:disabled { color: #9ca69f; background: rgba(236, 239, 233, .4); }
.issue-drawer-backdrop {
  background: rgba(20, 31, 26, .28);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}
.issue-drawer {
  border-left: 1px solid rgba(255, 255, 255, .7);
  background: rgba(245, 246, 240, .82);
  box-shadow: -20px 0 60px rgba(24, 38, 31, .18);
  backdrop-filter: blur(26px) saturate(82%);
  -webkit-backdrop-filter: blur(26px) saturate(82%);
}
.drawer-header,
.drawer-footer,
.drawer-section[open] > summary,
.subsection { border-color: rgba(45, 65, 56, .13); }
.drawer-section,
.severity-setting {
  border-color: rgba(45, 65, 56, .14);
  background: rgba(255, 255, 251, .48);
}
.drawer-section > summary { color: #2c4036; font-weight: 700; }
.drawer-section > summary span { color: #7d8982; }
.more-metrics summary,
.dashboard-card h2,
.issue-detail h3 { color: #2c4036; }
.trend-group:hover,
.frequent-table > button:hover { background: rgba(225, 232, 224, .42); }
.trend-bars,
.frequent-head,
.frequent-table > button { border-color: rgba(48, 68, 58, .12); }
.distribution-group button i { background: #80998c; }
.severity-badge.severity-P0 { color: #7b302c; background: rgba(151, 65, 59, .14); }
.severity-badge.severity-P1 { color: #805127; background: rgba(170, 111, 51, .14); }
.severity-badge.severity-P2 { color: #786128; background: rgba(160, 132, 54, .14); }
.severity-badge.severity-P3 { color: #365b68; background: rgba(62, 111, 128, .13); }
@media (max-width: 1180px) { .issue-table-header, .issue-row { min-width: 1220px; } .mini-metric-grid { grid-template-columns: repeat(4, 1fr); } .dashboard-grid { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .issue-page-header { align-items: flex-start; } .issue-toolbar-primary { grid-template-columns: 1fr 1fr; } .advanced-filter-grid { grid-template-columns: 1fr 1fr; } .metric-grid { grid-template-columns: repeat(2, 1fr); } .form-grid { grid-template-columns: 1fr 1fr; } .span-3 { grid-column: 1 / -1; } .action-editor { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .issue-page-shell { width: min(100% - 20px, 1480px); padding-top: 16px; } .issue-page-header { display: grid; } .issue-toolbar-primary, .advanced-filter-grid, .form-grid { grid-template-columns: 1fr; } .span-2, .span-3 { grid-column: 1; } .metric-grid, .mini-metric-grid { grid-template-columns: 1fr 1fr; } .drawer-footer { align-items: flex-start; } .issue-pagination { align-items: flex-start; flex-wrap: wrap; } .issue-pagination > div { width: 100%; justify-content: flex-start; overflow-x: auto; padding-bottom: 2px; } }