/* ── Reset & Base ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
       font-size: 14px; color: #1a1a1a; background: #f5f5f7; line-height: 1.5; }
a { color: #0071e3; text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Navbar ──────────────────────────────────────────────────────────── */
.navbar { background: #fff; border-bottom: 1px solid #e0e0e0;
          padding: 0 24px; height: 48px; display: flex; align-items: center;
          justify-content: space-between; position: sticky; top: 0; z-index: 100; }
.brand { font-weight: 700; font-size: 16px; color: #1a1a1a; }
.nav-links a { margin-left: 20px; color: #555; font-size: 13px; }
.nav-links a:hover, .nav-links a.active { color: #0071e3; font-weight: 600; text-decoration: none; }

/* ── Modal ───────────────────────────────────────────────────────────── */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 200;
         display: flex; align-items: center; justify-content: center; }
.modal-box { background: #fff; border-radius: 12px; width: 480px; max-height: 80vh;
             display: flex; flex-direction: column; box-shadow: 0 8px 32px rgba(0,0,0,.18); }
.modal-box-lg { width: min(760px, 94vw); }
.pa-desc { margin: 0 0 12px; font-size: 13px; color: #444; }
.modal-header { display: flex; justify-content: space-between; align-items: center;
                padding: 16px 20px; border-bottom: 1px solid #e0e0e0; }
.modal-header h3 { margin: 0; font-size: 15px; }
.modal-body { overflow-y: auto; padding: 16px 20px; flex: 1; }
.modal-footer { padding: 12px 20px; border-top: 1px solid #e0e0e0;
                display: flex; justify-content: flex-end; gap: 8px; }
.mat-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.mat-item { display: flex; align-items: center; gap: 8px; cursor: pointer;
            padding: 6px 8px; border-radius: 6px; font-size: 13px; }
.mat-item:hover { background: #f5f5f7; }
.mat-item input { flex-shrink: 0; }
.modal-upload { border-top: 1px solid #f0f0f0; padding-top: 12px; }
.drop-zone-sm { padding: 12px 16px; }
.drop-zone-sm .drop-hint { font-size: 13px; color: #666; }
.upload-panel { margin-bottom: 16px; }
.text-muted { color: #999; font-size: 11px; margin-left: auto; }
.reason-cell { font-size: 11px; color: #999; max-width: 160px; }
.extract-zone { display: flex; gap: 12px; align-items: flex-start; }
.extract-zone .drop-zone { flex: 1; }


/* ── Container ───────────────────────────────────────────────────────── */
.container { max-width: 1100px; margin: 0 auto; padding: 28px 24px; }

/* ── Flash messages ──────────────────────────────────────────────────── */
.flash { background: #e8f4ff; border: 1px solid #b0d4f7; border-radius: 6px;
         padding: 10px 16px; margin-bottom: 16px; color: #0050a0; }

/* ── Buttons ─────────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; padding: 7px 16px;
       border-radius: 8px; border: 1px solid #d0d0d0; background: #fff;
       color: #1a1a1a; cursor: pointer; font-size: 13px; font-weight: 500;
       transition: background .15s; }
.btn:hover { background: #f0f0f0; text-decoration: none; }
.btn-primary { background: #0071e3; border-color: #0071e3; color: #fff; }
.btn-primary:hover { background: #005bb5; }
.btn-danger { background: #ff3b30; border-color: #ff3b30; color: #fff; }
.btn-danger:hover { background: #cc2020; }
.btn-sm { padding: 4px 10px; font-size: 12px; border-radius: 6px; }
.btn-icon { background: none; border: none; cursor: pointer; color: #999;
            font-size: 16px; padding: 0 4px; line-height: 1; }
.btn-icon:hover { color: #ff3b30; }
button:disabled { opacity: .5; cursor: not-allowed; }

/* ── Page header ─────────────────────────────────────────────────────── */
.page-header { display: flex; align-items: center; justify-content: space-between;
               margin-bottom: 24px; }
.page-header h1 { font-size: 22px; font-weight: 700; }
.header-actions { display: flex; gap: 8px; }

/* ── Project grid ────────────────────────────────────────────────────── */
.project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
                gap: 16px; }
.project-card { background: #fff; border: 1px solid #e0e0e0; border-radius: 12px;
                padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.card-header { display: flex; justify-content: space-between; align-items: flex-start; }
.card-header h3 { font-size: 15px; font-weight: 600; }
.card-body .meta { display: flex; gap: 10px; flex-wrap: wrap; color: #666; font-size: 12px; }
.card-actions { display: flex; gap: 8px; margin-top: auto; }

/* ── Status badges ───────────────────────────────────────────────────── */
.status-badge { display: inline-block; padding: 2px 8px; border-radius: 20px;
                font-size: 11px; font-weight: 600; }
.status-idle { background: #e8e8e8; color: #666; }
.status-translating { background: #fff3cd; color: #856404; }
.status-done { background: #d4edda; color: #155724; }
.status-error { background: #f8d7da; color: #721c24; }
.status-pending { background: #e8e8e8; color: #666; }

/* ── Progress bar ────────────────────────────────────────────────────── */
.progress-bar { height: 6px; background: #e0e0e0; border-radius: 3px; overflow: hidden; }
.progress-fill { height: 100%; background: #0071e3; border-radius: 3px;
                 transition: width .3s; }

/* ── Empty state ─────────────────────────────────────────────────────── */
.empty-state { text-align: center; padding: 60px 20px; color: #666; }
.empty-state p { margin-bottom: 16px; }

/* ── Wizard ──────────────────────────────────────────────────────────── */
.wizard { max-width: 680px; margin: 0 auto; }
.wizard-steps { display: flex; gap: 8px; margin-bottom: 28px; }
.step { padding: 6px 16px; border-radius: 20px; background: #e8e8e8;
        color: #666; font-size: 13px; }
.step.active { background: #0071e3; color: #fff; font-weight: 600; }
.step.done { background: #d4edda; color: #155724; }
.wizard-body { background: #fff; border: 1px solid #e0e0e0; border-radius: 12px; padding: 28px; }
.wizard-body h2 { margin-bottom: 20px; font-size: 18px; }

/* ── Forms ───────────────────────────────────────────────────────────── */
.form-group { margin-bottom: 18px; }
.form-group label { display: block; margin-bottom: 6px; font-weight: 500; }
.form-control { width: 100%; padding: 8px 12px; border: 1px solid #d0d0d0;
                border-radius: 8px; font-size: 14px; }
.form-control:focus { outline: none; border-color: #0071e3; }
.form-control-sm { padding: 5px 8px; border: 1px solid #d0d0d0; border-radius: 6px;
                   font-size: 13px; margin-bottom: 6px; width: 100%; }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; }
.required { color: #ff3b30; }
.optional { color: #999; font-weight: 400; font-size: 12px; }
.hint { color: #666; font-size: 12px; margin-bottom: 8px; }

/* ── Drop zone ───────────────────────────────────────────────────────── */
.drop-zone { border: 2px dashed #c0c0c0; border-radius: 10px; padding: 24px;
             text-align: center; cursor: pointer; transition: border-color .2s;
             position: relative; }
.drop-zone:hover, .drop-zone.drag-over { border-color: #0071e3; }
.drop-zone input[type=file] { display: none; }
.drop-hint .drop-icon { font-size: 28px; margin-bottom: 6px; }
.drop-hint { color: #666; font-size: 13px; pointer-events: none; }
.file-list { list-style: none; margin-top: 10px; text-align: left; }
.file-list li { padding: 4px 0; font-size: 13px; color: #1a1a1a; }
.file-list li::before { content: "✓ "; color: #34c759; }
.already-uploaded { margin-top: 10px; font-size: 12px; color: #555; }

/* ── Tags ────────────────────────────────────────────────────────────── */
.tag { display: inline-block; padding: 2px 8px; border-radius: 4px;
       background: #e8e8e8; color: #555; font-size: 11px; margin: 2px; }
.tag-auto { background: #e8f4ff; color: #0050a0; }
.tag-user { background: #f0f0f0; color: #555; }
.badge-new { display: inline-block; padding: 2px 6px; border-radius: 10px;
             background: #fff3cd; color: #856404; font-size: 11px;
             font-weight: 600; margin-left: 4px; }

/* ── Glossary table ──────────────────────────────────────────────────── */
.glossary-table { width: 100%; border-collapse: collapse; margin-bottom: 10px; }
.glossary-table th { text-align: left; padding: 6px 8px; font-size: 12px;
                     color: #666; border-bottom: 1px solid #e0e0e0; }
.glossary-table td { padding: 5px 6px; border-bottom: 1px solid #f0f0f0; }
.glossary-table input[type=text] { width: 100%; padding: 4px 6px;
                                    border: 1px solid #e0e0e0; border-radius: 4px;
                                    font-size: 13px; }

/* ── Builtin checkboxes ──────────────────────────────────────────────── */
.builtin-checkboxes { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.checkbox-label { display: flex; align-items: center; gap: 6px;
                  font-size: 13px; cursor: pointer; }

/* ── Section ─────────────────────────────────────────────────────────── */
.section { margin-bottom: 20px; }
.section h3, .section h4 { margin-bottom: 10px; font-size: 14px; font-weight: 600; }
.section-header { display: flex; justify-content: space-between; align-items: center;
                  margin-bottom: 8px; }

/* ── Detail layout ───────────────────────────────────────────────────── */
.detail-layout { display: grid; grid-template-columns: 1fr 340px; gap: 20px; margin-top: 20px; }
@media (max-width: 800px) { .detail-layout { grid-template-columns: 1fr; } }

/* ── Panel ───────────────────────────────────────────────────────────── */
.panel { background: #fff; border: 1px solid #e0e0e0; border-radius: 12px; padding: 20px; }
.panel-header { display: flex; justify-content: space-between; align-items: center;
                margin-bottom: 16px; }
.panel-header h2 { font-size: 16px; font-weight: 600; }

/* ── File table ──────────────────────────────────────────────────────── */
.file-table { width: 100%; border-collapse: collapse; }
.file-table th { text-align: left; padding: 8px; font-size: 12px; color: #666;
                 border-bottom: 1px solid #e0e0e0; }
.file-table td { padding: 8px; border-bottom: 1px solid #f5f5f5; vertical-align: middle; }
.file-table .fname { font-size: 13px; max-width: 200px; word-break: break-word; }
.empty-cell { color: #999; font-size: 13px; text-align: center; padding: 20px !important; }
.ref-select { width: 100%; font-size: 12px; border: 1px solid #e0e0e0; border-radius: 4px; }
.slide-progress { font-size: 11px; color: #999; margin-left: 4px; }

/* ── Progress box ────────────────────────────────────────────────────── */
.progress-box { background: #fff; border: 1px solid #e0e0e0; border-radius: 12px;
                padding: 16px; margin-bottom: 20px; }
.progress-header { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 14px; }
.log-area { max-height: 160px; overflow-y: auto; margin-top: 12px;
            background: #f8f8f8; border-radius: 6px; padding: 8px; }
.log-line { font-size: 12px; color: #444; padding: 2px 0; }
.hidden { display: none !important; }

/* ── Settings ────────────────────────────────────────────────────────── */
.settings-form { max-width: 560px; }
.settings-form fieldset { border: 1px solid #e0e0e0; border-radius: 10px;
                           padding: 16px 20px; margin-bottom: 20px; }
.settings-form legend { padding: 0 8px; font-size: 14px; font-weight: 500; cursor: pointer; }

/* ── Login page ──────────────────────────────────────────────────────── */
.login-page { display: flex; align-items: center; justify-content: center;
              min-height: 100vh; background: #f5f7fa; }
.login-box { background: #fff; border-radius: 16px; padding: 40px 36px;
             width: 360px; box-shadow: 0 4px 24px rgba(0,0,0,.08); }
.login-title { text-align: center; font-size: 22px; font-weight: 700;
               margin-bottom: 28px; color: #1a1a1a; }
.login-form .form-group { margin-bottom: 16px; }
.btn-block { width: 100%; margin-top: 8px; }

/* ── Navbar user area ────────────────────────────────────────────────── */
.nav-user { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.nav-username { font-size: 13px; color: #555; }
.nav-logout { font-size: 12px; padding: 4px 10px; }
.navbar { justify-content: flex-start; gap: 0; }
.nav-links { display: flex; gap: 4px; flex: 1; }

/* ── Badge ───────────────────────────────────────────────────────────── */
.badge { display: inline-block; background: #6c63ff; color: #fff;
         font-size: 10px; padding: 2px 6px; border-radius: 10px;
         vertical-align: middle; margin-left: 4px; }
.text-muted { color: #bbb; }
.key-cell { font-size: 12px; }
.page-header { display: flex; align-items: center; justify-content: space-between;
               margin-bottom: 20px; }
.btn-danger { background: #ff4d4f; color: #fff; border-color: #ff4d4f; }
.btn-danger:hover { background: #e63333; }

/* ── Dubbing Check ───────────────────────────────────────────────────────── */
#dubbing-app { max-width: 900px; margin: 0 auto; }

/* 空状态 */
.dub-header { margin-bottom: 24px; }
.dub-header h1 { font-size: 22px; font-weight: 700; margin: 0 0 6px; }
.dub-header p  { color: #666; font-size: 14px; margin: 0; }

.dub-legend { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px; }
.dub-legend-item { display: flex; align-items: center; gap: 10px; padding: 12px 16px;
                   border-radius: 10px; border: 1px solid; }
.dub-leg-critical { background: #fef2f2; border-color: #fecaca; }
.dub-leg-warning  { background: #fffbeb; border-color: #fde68a; }
.dub-leg-ok       { background: #f0fdf4; border-color: #bbf7d0; }
.dub-legend-item strong { display: block; font-size: 13px; color: #333; }
.dub-legend-item span   { font-size: 12px; color: #888; }
.dub-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

/* 工具栏 */
.dub-toolbar { display: flex; align-items: center; justify-content: space-between;
               gap: 12px; background: #fff; border: 1px solid #e8e8e8;
               border-radius: 10px; padding: 12px 16px; margin-bottom: 16px; }
.dub-stats   { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #555; }
.dub-add-btn { cursor: pointer; }

/* 标签 */
.dub-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 12px;
           padding: 3px 10px; border-radius: 20px; border: 1px solid; }
.dub-tag-critical { background: #fef2f2; border-color: #fecaca; color: #dc2626; }
.dub-tag-warning  { background: #fffbeb; border-color: #fde68a; color: #d97706; }
.dub-tag-ok       { background: #f0fdf4; border-color: #bbf7d0; color: #16a34a; }

/* 布局 */
.dub-layout    { display: flex; gap: 16px; align-items: flex-start; }
.dub-file-list { width: 240px; flex-shrink: 0; display: flex; flex-direction: column; gap: 6px; }
.dub-detail    { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; }

/* 文件列表项 */
.dub-file-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px;
                 background: #fff; border: 1px solid #e8e8e8; border-radius: 10px;
                 transition: border-color .15s; }
.dub-file-item-click { cursor: pointer; }
.dub-file-item-click:hover { border-color: #c0bfff; }
.dub-file-item-sel  { background: #eef2ff; border-color: #a5b4fc; }
.dub-file-ico  { width: 20px; text-align: center; flex-shrink: 0; font-size: 14px; }
.dub-file-info { min-width: 0; flex: 1; }
.dub-file-name { font-size: 12px; font-weight: 500; color: #333; white-space: nowrap;
                 overflow: hidden; text-overflow: ellipsis; }
.dub-file-sub  { font-size: 11px; margin-top: 2px; }

.dub-icon-critical { color: #dc2626; }
.dub-icon-warning  { color: #d97706; }
.dub-icon-ok       { color: #16a34a; }
.dub-icon-muted    { color: #bbb; }
.dub-icon-error    { color: #999; }
.dub-sub-critical  { color: #dc2626; }
.dub-sub-warning   { color: #d97706; }
.dub-sub-ok        { color: #16a34a; }
.dub-sub-muted     { color: #aaa; }
.dub-sub-error     { color: #999; }

/* 详情卡片 */
.dub-card { background: #fff; border: 1px solid #e8e8e8; border-radius: 12px;
            padding: 16px 18px; }
.dub-card-hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.dub-card-title { font-size: 14px; font-weight: 600; color: #222; }
.dub-card-meta  { font-size: 12px; color: #888; margin-top: 4px; }
.dub-sec-title  { font-size: 13px; font-weight: 600; color: #333; margin-bottom: 12px;
                  display: flex; align-items: center; gap: 8px; }
.dub-legend-inline { display: flex; align-items: center; gap: 4px; font-size: 11px;
                     font-weight: 400; color: #888; margin-left: auto; }
.dub-leg-dot { width: 8px; height: 6px; border-radius: 2px; display: inline-block; }
.dub-count-badge { background: #f3f4f6; color: #666; font-size: 11px;
                   padding: 1px 8px; border-radius: 10px; font-weight: 400; }

/* 波形 */
.dub-canvas-wrap { position: relative; width: 100%; }
.dub-hover-tip   { position: absolute; top: 6px; background: #1e293b; color: #fff;
                   font-size: 11px; padding: 3px 7px; border-radius: 5px;
                   pointer-events: none; font-family: monospace; white-space: nowrap; }
.dub-canvas-hint { font-size: 11px; color: #bbb; text-align: center; margin: 6px 0 0; }

/* 断点列表 */
.dub-no-seg { display: flex; flex-direction: column; align-items: center;
              padding: 32px 0; color: #aaa; }
.dub-ok-circle { width: 40px; height: 40px; background: #f0fdf4; border-radius: 50%;
                 display: flex; align-items: center; justify-content: center;
                 color: #16a34a; font-size: 20px; margin-bottom: 10px; }
.dub-no-seg-title { font-size: 13px; font-weight: 500; color: #555; margin: 0; }
.dub-no-seg-sub   { font-size: 12px; margin: 4px 0 0; }

.dub-seg { padding: 10px 14px; border-radius: 8px; border: 1px solid;
           margin-bottom: 8px; cursor: pointer; transition: box-shadow .15s; }
.dub-seg:hover { box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.dub-seg-crit { background: #fef2f2; border-color: #fecaca; }
.dub-seg-warn { background: #fffbeb; border-color: #fde68a; }
.dub-seg-hl.dub-seg-crit { outline: 2px solid #dc2626; }
.dub-seg-hl.dub-seg-warn { outline: 2px solid #d97706; }
.dub-seg-r1 { display: flex; align-items: center; justify-content: space-between; }
.dub-seg-badge { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 10px; }
.dub-badge-crit { background: #fee2e2; color: #dc2626; }
.dub-badge-warn { background: #fef3c7; color: #d97706; }
.dub-seg-dur { font-size: 13px; font-weight: 600; color: #555; }
.dub-seg-r2 { font-size: 12px; color: #666; margin-top: 6px; display: flex;
              align-items: center; gap: 4px; }
.dub-seg-label { color: #999; font-family: sans-serif; }
.dub-arrow { color: #ccc; }

.dub-play-btn { background: none; border: 1px solid #d0d0d0; border-radius: 5px;
                font-size: 11px; color: #555; cursor: pointer; padding: 2px 8px;
                transition: all .15s; white-space: nowrap; line-height: 1.6; }
.dub-play-btn:hover { background: #6366f1; border-color: #6366f1; color: #fff; }
.dub-play-btn-active { background: #10b981 !important; border-color: #10b981 !important;
                       color: #fff !important; }

/* 占位 / 加载 */
.dub-placeholder { display: flex; flex-direction: column; align-items: center;
                   justify-content: center; padding: 60px 20px; color: #aaa;
                   font-size: 13px; text-align: center; gap: 8px;
                   background: #fff; border: 1px solid #e8e8e8; border-radius: 12px; }
.dub-placeholder-error { color: #dc2626; }
.dub-placeholder-error span { font-size: 12px; color: #999; }

/* 旋转动画 */
.dub-spin { display: inline-block; animation: dubspin .8s linear infinite; font-size: 16px; color: #6366f1; }
.dub-spin-lg { font-size: 32px; }
@keyframes dubspin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.mono { font-family: monospace; }
.link { color: #6c63ff; cursor: pointer; }

/* ── Translation Preview ─────────────────────────────────────────────── */
.back-link { font-size: 13px; color: #666; display: inline-block; margin-bottom: 6px; }
.back-link:hover { color: #0071e3; text-decoration: none; }

.preview-top { display: flex; align-items: flex-start; justify-content: space-between;
               gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.preview-top-left { display: flex; flex-direction: column; gap: 2px; }
.preview-title { font-size: 20px; font-weight: 700; margin: 0; }
.preview-meta { font-size: 13px; color: #666; margin-top: 4px; }
.preview-warn { color: #d97706; font-weight: 500; }
.preview-ok   { color: #16a34a; font-weight: 500; }
.preview-hint { color: #aaa; font-size: 12px; }
.preview-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }

/* Sticky add-term bar */
.add-term-bar { position: sticky; top: 48px; z-index: 50; display: flex; align-items: center;
                gap: 8px; flex-wrap: wrap; background: #fffbeb; border: 1px solid #fde68a;
                border-radius: 8px; padding: 8px 14px; margin-bottom: 16px; }
.add-term-label { font-size: 13px; font-weight: 500; color: #92400e; white-space: nowrap; }
.term-input { padding: 5px 10px; border: 1px solid #d0d0d0; border-radius: 6px;
              font-size: 13px; width: 160px; }
.add-term-arrow { color: #aaa; font-size: 14px; }
.add-term-msg { font-size: 12px; margin-left: 4px; }

/* Slide cards */
.preview-slide { background: #fff; border: 1px solid #e0e0e0; border-radius: 10px;
                 margin-bottom: 10px; overflow: hidden; }
.slide-has-issue { border-left: 3px solid #f59e0b; }
.slide-hd { display: flex; align-items: center; gap: 10px; padding: 8px 14px;
            background: #f8f8f8; border-bottom: 1px solid #f0f0f0; }
.slide-num { font-size: 12px; font-weight: 600; color: #666; }
.slide-issue-badge { font-size: 11px; color: #d97706; background: #fffbeb;
                     border: 1px solid #fde68a; border-radius: 10px; padding: 1px 8px; }

/* Text pairs */
.slide-pairs { padding: 4px 0; }
.text-pair { display: flex; align-items: baseline; gap: 8px; padding: 5px 14px;
             border-bottom: 1px solid #fafafa; transition: background .1s; }
.text-pair:last-child { border-bottom: none; }
.text-pair:hover { background: #f8f9ff; }
.text-pair:hover .btn-plus { opacity: 1; }
.pair-issue { background: #fffbeb; }
.pair-issue:hover { background: #fef9e7; }

.pair-orig { flex: 1; font-size: 13px; color: #888; min-width: 0;
             overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pair-arrow-sm { font-size: 12px; color: #ccc; flex-shrink: 0; }
.pair-trans { flex: 1; font-size: 13px; color: #1a1a1a; min-width: 0;
              overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trans-has-issue { color: #d97706; font-weight: 500; }

.issue-tag { display: inline-block; font-size: 10px; padding: 1px 5px; border-radius: 4px;
             background: #fef3c7; color: #92400e; border: 1px solid #fde68a; margin-left: 4px;
             vertical-align: middle; }
.issue-tag-warn { background: #f0fdf4; color: #166534; border-color: #bbf7d0; }

.btn-plus { flex-shrink: 0; background: none; border: 1px solid #d0d0d0; border-radius: 4px;
            font-size: 12px; color: #666; cursor: pointer; padding: 1px 6px;
            opacity: 0; transition: opacity .15s, background .1s; line-height: 1.4; }
.btn-plus:hover { background: #0071e3; border-color: #0071e3; color: #fff; }