:root {
      --paper: #fff;
      --ink: #000;
      --line: #000;
      --font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      --gap-xs: 6px;
      --gap-sm: 10px;
      --gap-md: 16px;
      --spine: 40px;
      --panel-header: 38px;
      --ai-w: 360px;
      --review-w: minmax(520px, 1.2fr);
      --library-w: minmax(0, 1fr);
    }
    * { box-sizing: border-box; margin: 0; padding: 0; }
    html, body { width: 100%; height: 100%; overflow: hidden; font-family: var(--font); font-size: 13px; color: var(--ink); background: var(--paper); }

    /* Custom select */
    .custom-select { position: relative; display: inline-block; }
    .select-trigger { height: 28px; padding: 0 8px; border: 1px solid var(--line); background: var(--paper); font: inherit; font-size: 12px; cursor: pointer; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
    .select-trigger:hover { background: rgba(0,0,0,0.03); }
    .select-trigger .caret { font-size: 9px; opacity: 0.6; }
    .select-dropdown { display: none; position: absolute; top: calc(100% + 2px); left: 0; min-width: 160px; border: 1px solid var(--line); background: var(--paper); z-index: 80; max-height: 280px; overflow: auto; box-shadow: 0 4px 14px rgba(0,0,0,0.10); }
    .select-dropdown.open { display: block; }
    .select-option { padding: 8px 12px; font-size: 12px; cursor: pointer; }
    .select-option:hover { background: rgba(0,0,0,0.04); }
    .select-option.active { box-shadow: inset 2px 0 0 0 var(--ink); font-weight: 600; }
    .select-option.new { border-top: 1px solid var(--line); font-weight: 500; }
    .topic-selector .select-trigger { border: 0; padding: 0; height: auto; font-weight: 600; font-size: 13px; }
    .topic-selector .select-trigger:hover { background: none; opacity: 0.65; }

    .app { width: 100vw; height: 100vh; display: grid; grid-template-rows: 1fr; border: 1px solid var(--line); position: relative; }
    .main-grid { display: grid; grid-template-columns: var(--ai-w) var(--review-w) var(--library-w); min-height: 0; overflow: hidden; transition: grid-template-columns 200ms ease; }
    .main-grid.review-fold { --review-w: var(--spine); }
    .main-grid.work-mode { --ai-w: var(--spine); --review-w: var(--spine); }

    .panel { display: flex; flex-direction: column; border-right: 1px solid var(--line); min-width: 0; min-height: 0; overflow: hidden; }
    .panel:last-child { border-right: 0; }
    .panel-header { flex-shrink: 0; height: var(--panel-header); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--gap-sm); border-bottom: 1px solid var(--line); font-weight: 600; font-size: 13px; gap: var(--gap-xs); }
    .panel-header .panel-controls { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
    .panel-header button.ctrl { width: 24px; height: 24px; border: 1px solid var(--line); background: none; cursor: pointer; display: grid; place-items: center; font-size: 11px; }
    .panel-header button.ctrl:hover { background: rgba(0,0,0,0.04); }

    .spine { display: none; width: var(--spine); height: 100%; writing-mode: vertical-rl; text-orientation: mixed; align-items: center; justify-content: center; font-size: 12px; font-weight: 500; letter-spacing: 2px; cursor: pointer; border-right: 1px solid var(--line); user-select: none; }
    .spine:hover { background: rgba(0,0,0,0.03); }
    .main-grid.review-fold .review-panel > .panel-header,
    .main-grid.review-fold .review-panel > .review-body { display: none; }
    .main-grid.review-fold .review-panel .spine { display: flex; }
    .main-grid.work-mode .ai-panel > .panel-header,
    .main-grid.work-mode .ai-panel > .ai-body,
    .main-grid.work-mode .review-panel > .panel-header,
    .main-grid.work-mode .review-panel > .review-body { display: none; }
    .main-grid.work-mode .ai-panel .spine,
    .main-grid.work-mode .review-panel .spine { display: flex; }

    /* ── AI Panel: chat-first ── */
    .ai-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
    .chat-log { flex: 1; min-height: 0; overflow: auto; padding: var(--gap-md); display: flex; flex-direction: column; gap: var(--gap-sm); }
    .chat-msg { max-width: 90%; padding: 10px 12px; border: 1px solid var(--line); font-size: 13px; line-height: 1.6; }
    .chat-msg.agent { align-self: flex-start; background: rgba(0,0,0,0.02); }
    .chat-msg.user { align-self: flex-end; }
    .chat-msg .msg-action { margin-top: 8px; }
    .chat-msg .msg-action button { height: 26px; padding: 0 12px; border: 1px solid var(--line); background: var(--paper); font: inherit; font-size: 12px; cursor: pointer; }
    .chat-msg .msg-action button:hover { background: rgba(0,0,0,0.04); }

    /* Composer (tftai-style: intent pills inside) */
    .composer { flex-shrink: 0; padding: var(--gap-sm) var(--gap-md) var(--gap-md); border-top: 1px solid var(--line); }
    .composer-box { border: 1px solid var(--line); display: flex; flex-direction: column; }
    .composer-input { width: 100%; min-height: 56px; max-height: 140px; padding: 10px 12px; border: 0; font: inherit; font-size: 13px; resize: none; outline: none; }
    .composer-bar { display: flex; align-items: center; gap: var(--gap-xs); padding: 6px 8px; border-top: 1px solid var(--line); }
    .intent-pills { display: flex; gap: 6px; flex: 1; min-width: 0; }
    .intent-pill { height: 26px; padding: 0 10px; border: 1px solid var(--line); border-radius: 13px; background: var(--paper); font: inherit; font-size: 12px; cursor: pointer; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
    .intent-pill .dot { width: 6px; height: 6px; border-radius: 50%; border: 1px solid var(--line); background: var(--paper); }
    .intent-pill.active { background: var(--ink); color: var(--paper); }
    .intent-pill.active .dot { background: var(--paper); border-color: var(--paper); }
    .intent-pill:hover:not(.active) { background: rgba(0,0,0,0.04); }
    .send-btn { height: 28px; padding: 0 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--ink); color: var(--paper); font: inherit; font-size: 12px; cursor: pointer; flex-shrink: 0; }
    .send-btn:disabled { background: #bbb; border-color: #bbb; cursor: not-allowed; }
    .composer-hint { font-size: 11px; color: #999; margin-top: 6px; }

    .queue-bar { display: flex; justify-content: space-between; font-size: 11px; color: #666; padding: 8px var(--gap-md) 0; }
    .queue-bar strong { font-weight: 600; color: var(--ink); }

    /* ── Canvas (Cursor/Codex artifact, pops from right) ── */
    .canvas { display: none; position: absolute; top: 0; bottom: 0; left: var(--ai-w); right: 0; background: var(--paper); border-left: 1px solid var(--line); z-index: 40; flex-direction: column; box-shadow: -10px 0 28px rgba(0,0,0,0.08); }
    .canvas.open { display: flex; }
    .canvas-header { flex-shrink: 0; height: var(--panel-header); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--gap-md); border-bottom: 1px solid var(--line); font-weight: 600; }
    .canvas-header .canvas-sub { font-size: 11px; color: #666; font-weight: 400; margin-left: 8px; }
    .canvas-header button { width: 26px; height: 26px; border: 1px solid var(--line); background: none; cursor: pointer; font-size: 14px; }
    .canvas-header button:hover { background: rgba(0,0,0,0.04); }
    .canvas-body { flex: 1; min-height: 0; overflow: auto; padding: var(--gap-lg, 20px); }
    .canvas-inner { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--gap-md); }

    /* Config canvas */
    .cfg-field { display: flex; flex-direction: column; gap: 6px; }
    .cfg-field .cfg-label { font-size: 13px; font-weight: 600; }
    .cfg-field .cfg-hint { font-size: 11px; color: #999; }
    .cfg-field input, .cfg-field textarea { padding: 10px 12px; border: 1px solid var(--line); font: inherit; font-size: 13px; outline: none; }
    .cfg-field input:focus, .cfg-field textarea:focus { outline: 2px solid var(--line); outline-offset: 2px; }
    .cfg-field textarea { min-height: 60px; resize: vertical; line-height: 1.6; }
    .cfg-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: #666; }
    .cfg-badge .ai-flag { font-size: 10px; padding: 1px 6px; border: 1px solid var(--line); border-radius: 9px; }

    /* Init progress in canvas */
    .canvas-init { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--gap-lg, 20px); padding: 40px; }
    .init-title { font-size: 15px; font-weight: 600; }
    .init-sub { font-size: 12px; color: #666; }
    .init-steps { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: var(--gap-sm); }
    .init-step { display: flex; align-items: center; gap: var(--gap-sm); padding: 12px 14px; border: 1px solid var(--line); font-size: 13px; }
    .init-step .step-dot { width: 18px; height: 18px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; font-size: 10px; flex-shrink: 0; }
    .init-step.done .step-dot { background: var(--ink); color: var(--paper); }
    .init-step.active { box-shadow: inset 0 0 0 1px var(--line); }
    .init-step .step-state { margin-left: auto; font-size: 11px; color: #999; }
    .init-bar { width: 100%; max-width: 420px; height: 4px; border: 1px solid var(--line); position: relative; overflow: hidden; }
    .init-bar .init-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; background: var(--ink); transition: width 300ms ease; }

    /* Collect canvas */
    .collect-input textarea { width: 100%; min-height: 120px; padding: 12px; border: 1px solid var(--line); font: inherit; font-size: 13px; resize: vertical; outline: none; }
    .collect-input textarea:focus { outline: 2px solid var(--line); outline-offset: 2px; }
    .collect-hint { font-size: 11px; color: #999; margin-top: 6px; }
    .collect-actions { display: flex; gap: var(--gap-sm); margin-top: var(--gap-md); }
    .collect-actions button { height: 32px; padding: 0 18px; border: 1px solid var(--line); background: none; font: inherit; cursor: pointer; font-size: 13px; }
    .collect-actions button.primary { background: var(--ink); color: var(--paper); }
    .collect-actions button:hover { opacity: 0.85; }
    .progress-track { display: flex; align-items: center; gap: 4px; margin-top: var(--gap-lg, 20px); }
    .progress-node { flex: 1; display: flex; align-items: center; gap: 6px; }
    .progress-node::after { content: ""; flex: 1; height: 1px; background: var(--line); }
    .progress-node:last-child::after { display: none; }
    .progress-dot { width: 22px; height: 22px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; font-size: 10px; flex-shrink: 0; background: var(--paper); }
    .progress-dot.done { background: var(--ink); color: var(--paper); }
    .progress-dot.active { box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--ink); }
    .progress-label { font-size: 11px; white-space: nowrap; }

    /* ── Review Panel ── */
    .review-body { flex: 1; display: grid; grid-template-columns: 200px 1fr; min-height: 0; }
    .review-feed { border-right: 1px solid var(--line); overflow: auto; padding: var(--gap-xs); display: flex; flex-direction: column; gap: var(--gap-xs); }
    .feed-card { flex-shrink: 0; border: 1px solid var(--line); cursor: pointer; overflow: hidden; }
    .feed-card:hover { box-shadow: inset 0 0 0 1px var(--line); }
    .feed-card.active { box-shadow: inset 0 0 0 2px var(--ink); }
    .feed-card .feed-cover { aspect-ratio: 3/4; min-height: 150px; display: grid; place-items: center; font-size: 11px; color: #999; border-bottom: 1px solid var(--line); background: repeating-linear-gradient(45deg, #fafafa, #fafafa 8px, #f2f2f2 8px, #f2f2f2 16px); }
    .feed-card .feed-info { padding: 8px; display: flex; flex-direction: column; gap: 6px; }
    .feed-card .feed-title { font-size: 12px; font-weight: 500; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .feed-card .feed-meta { display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: #666; }
    .feed-card .feed-author { display: flex; align-items: center; gap: 5px; min-width: 0; }
    .feed-card .feed-author span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .feed-card .avatar { width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(135deg, #d8d8d8, #b0b0b0); }

    .review-detail { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
    .detail-header { display: flex; align-items: center; justify-content: space-between; padding: var(--gap-sm); border-bottom: 1px solid var(--line); font-size: 12px; gap: var(--gap-sm); min-height: 44px; flex-shrink: 0; }
    .detail-header .author { display: flex; align-items: center; gap: var(--gap-xs); flex-shrink: 0; }
    .detail-header .author .avatar { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(135deg, #d8d8d8, #b0b0b0); }
    .detail-header .stats { display: flex; gap: var(--gap-md); color: #666; flex-shrink: 0; }
    .detail-gallery { height: 180px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 32px 1fr 32px; align-items: center; font-size: 12px; color: #999; background: repeating-linear-gradient(45deg, #fafafa, #fafafa 10px, #f2f2f2 10px, #f2f2f2 20px); flex-shrink: 0; }
    .detail-gallery .nav { width: 24px; height: 40px; border: 1px solid var(--line); background: var(--paper); cursor: pointer; display: grid; place-items: center; font-size: 14px; justify-self: center; }
    .detail-content { flex: 1; min-height: 0; overflow: auto; padding: var(--gap-sm); display: flex; flex-direction: column; gap: var(--gap-sm); }
    .detail-block h4 { font-size: 12px; font-weight: 600; margin-bottom: 6px; display: flex; align-items: center; justify-content: space-between; }
    .detail-block h4 .filter-note { font-size: 10px; font-weight: 400; color: #999; }
    .detail-block p { font-size: 12px; line-height: 1.6; }
    .detail-block .comments { display: flex; flex-direction: column; gap: 6px; }
    .detail-block .comment-item { padding: 8px; border: 1px solid var(--line); font-size: 12px; line-height: 1.5; }
    .detail-block .comment-item .cmt-meta { font-size: 11px; color: #666; margin-top: 4px; }
    .review-actions { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); flex-shrink: 0; }
    .review-actions button { height: 40px; border: 0; background: none; font: inherit; cursor: pointer; font-size: 13px; font-weight: 500; }
    .review-actions button:first-child { border-right: 1px solid var(--line); }
    .review-actions button:hover { background: rgba(0,0,0,0.03); }

    /* ── Library Panel ── */
    .library-panel { container-type: inline-size; }
    .library-toolbar { display: flex; align-items: center; gap: var(--gap-md); padding: 0 var(--gap-sm); border-bottom: 1px solid var(--line); height: var(--panel-header); flex-shrink: 0; }
    .view-switch { flex: 1; }
    .view-tabs-flat { display: flex; gap: 2px; }
    .view-tabs-flat button { height: 28px; padding: 0 12px; border: 1px solid transparent; background: none; font: inherit; font-size: 12px; cursor: pointer; }
    .view-tabs-flat button:hover { border-color: var(--line); }
    .view-tabs-flat button.active { border-color: var(--line); box-shadow: inset 0 0 0 1px var(--line); font-weight: 600; }
    .view-tabs-dropdown { display: none; }
    @container (max-width: 760px) { .view-tabs-flat { display: none; } .view-tabs-dropdown { display: inline-block; } }
    .library-search input { height: 28px; padding: 0 8px; border: 1px solid var(--line); font: inherit; font-size: 12px; width: 150px; }

    .gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--gap-sm); padding: var(--gap-sm); overflow: auto; align-content: start; }
    .gallery-card { border: 1px solid var(--line); cursor: pointer; overflow: hidden; }
    .gallery-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
    .gallery-card .card-cover { aspect-ratio: 3/4; display: grid; place-items: center; font-size: 11px; color: #999; border-bottom: 1px solid var(--line); background: repeating-linear-gradient(45deg, #fafafa, #fafafa 8px, #f2f2f2 8px, #f2f2f2 16px); }
    .gallery-card .card-info { padding: 8px; display: flex; flex-direction: column; gap: 4px; }
    .gallery-card .card-title { font-size: 12px; font-weight: 500; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .gallery-card .card-meta { display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: #666; }
    .gallery-card .card-tags { display: flex; gap: 4px; flex-wrap: wrap; }
    .gallery-card .card-tags span { font-size: 10px; padding: 1px 5px; border: 1px solid var(--line); }

    .table-wrap { overflow: auto; flex: 1; padding: var(--gap-sm); }
    .data-table { width: 100%; border-collapse: collapse; font-size: 12px; }
    .data-table th, .data-table td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
    .data-table th { font-weight: 600; position: sticky; top: 0; background: var(--paper); z-index: 2; white-space: nowrap; }
    .data-table th .th-inner { display: flex; align-items: center; gap: 4px; cursor: pointer; user-select: none; }
    .data-table th .th-inner:hover { opacity: 0.65; }
    .data-table th .caret { font-size: 9px; opacity: 0.6; }
    .data-table th .caret.set { opacity: 1; font-weight: 700; }
    .data-table tr:hover td { background: rgba(0,0,0,0.02); }
    .data-table td { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .data-table td.wrap { white-space: normal; max-width: 460px; }
    .data-table td a { color: var(--ink); text-decoration: underline; cursor: pointer; }
    .data-table td a:hover { text-decoration: none; }
    .th-filter-wrap { position: relative; display: inline-block; }
    .th-filter-dropdown { display: none; position: absolute; top: calc(100% + 4px); left: 0; min-width: 130px; border: 1px solid var(--line); background: var(--paper); z-index: 60; max-height: 240px; overflow: auto; box-shadow: 0 4px 14px rgba(0,0,0,0.10); }
    .th-filter-dropdown.open { display: block; }
    .th-filter-option { padding: 7px 10px; font-size: 11px; cursor: pointer; font-weight: 400; }
    .th-filter-option:hover { background: rgba(0,0,0,0.04); }
    .th-filter-option.active { box-shadow: inset 2px 0 0 0 var(--ink); font-weight: 600; }

    .list-view { display: flex; flex-direction: column; gap: 2px; overflow: auto; padding: var(--gap-sm); }
    .list-item { display: flex; align-items: flex-start; gap: var(--gap-sm); padding: 10px var(--gap-sm); border: 1px solid var(--line); cursor: pointer; }
    .list-item:hover { background: rgba(0,0,0,0.02); }
    .list-item .list-text { flex: 1; font-size: 13px; line-height: 1.5; }
    .list-item .list-meta { font-size: 11px; color: #666; white-space: nowrap; }

    .empty-state { padding: 60px 20px; text-align: center; color: #999; font-size: 13px; }

    .popup-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.25); z-index: 99; }
    .popup-overlay.open { display: block; }
    .popup { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 460px; max-height: 80vh; border: 1px solid var(--line); background: var(--paper); z-index: 100; flex-direction: column; }
    .popup.open { display: flex; }
    .popup-header { display: flex; align-items: center; justify-content: space-between; padding: var(--gap-md); border-bottom: 1px solid var(--line); font-weight: 600; }
    .popup-header button { width: 24px; height: 24px; border: 1px solid var(--line); background: none; cursor: pointer; }
    .popup-body { padding: var(--gap-md); overflow: auto; flex: 1; }
    .popup-body .detail-field { display: grid; grid-template-columns: 70px 1fr; gap: var(--gap-sm); font-size: 12px; margin-bottom: 8px; }
    .popup-body .detail-field label { font-weight: 500; color: #666; }
    .popup-body .detail-field .value { line-height: 1.5; }

    /* Selection clip toolbar */
    .sel-toolbar { display: none; position: fixed; z-index: 120; border: 1px solid var(--line); background: var(--paper); box-shadow: 0 4px 14px rgba(0,0,0,0.18); }
    .sel-toolbar.open { display: flex; }
    .sel-toolbar button { height: 30px; padding: 0 12px; border: 0; border-right: 1px solid var(--line); background: none; font: inherit; font-size: 12px; cursor: pointer; }
    .sel-toolbar button:last-child { border-right: 0; }
    .sel-toolbar button:hover { background: rgba(0,0,0,0.06); }

    /* Clip confirm bar */
    .clip-confirm { display: none; position: fixed; z-index: 121; width: 320px; border: 1px solid var(--line); background: var(--paper); box-shadow: 0 6px 22px rgba(0,0,0,0.20); flex-direction: column; }
    .clip-confirm.open { display: flex; }
    .clip-confirm .cc-head { padding: 8px 10px; border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 600; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
    .clip-confirm .cc-head .cc-src { font-weight: 400; color: #999; font-size: 11px; }
    .clip-confirm textarea { border: 0; border-bottom: 1px solid var(--line); padding: 8px 10px; font: inherit; font-size: 12px; min-height: 54px; resize: vertical; outline: none; }
    .clip-confirm .cc-actions { display: flex; gap: 6px; padding: 8px 10px; justify-content: flex-end; }
    .clip-confirm .cc-actions button { height: 26px; padding: 0 14px; border: 1px solid var(--line); background: none; font: inherit; font-size: 12px; cursor: pointer; }
    .clip-confirm .cc-actions button.primary { background: var(--ink); color: var(--paper); }

    /* Editable tag + dropdown */
    .editable-tag { display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px; border: 1px dashed #999; cursor: pointer; font-size: 12px; }
    .editable-tag:hover { background: rgba(0,0,0,0.04); border-color: var(--line); }
    .editable-tag.add { border-style: solid; }
    .tag-row { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
    .tag-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; border: 1px solid var(--line); font-size: 11px; }
    .tag-chip .chip-text { cursor: pointer; }
    .tag-chip .chip-text:hover { text-decoration: underline; }
    .tag-chip .rm { cursor: pointer; opacity: 0.5; }
    .tag-chip .rm:hover { opacity: 1; }
    .edit-dd { display: none; position: fixed; z-index: 130; min-width: 150px; border: 1px solid var(--line); background: var(--paper); box-shadow: 0 4px 14px rgba(0,0,0,0.14); max-height: 260px; overflow: auto; }
    .edit-dd.open { display: block; }
    .edit-dd .edit-opt { padding: 7px 10px; font-size: 12px; cursor: pointer; }
    .edit-dd .edit-opt:hover { background: rgba(0,0,0,0.05); }
    .edit-dd .edit-opt.active { box-shadow: inset 2px 0 0 0 var(--ink); font-weight: 600; }
    .edit-dd .edit-add { border-top: 1px solid var(--line); padding: 6px; }
    .edit-dd .edit-add input { width: 100%; padding: 5px 8px; border: 1px solid var(--line); font: inherit; font-size: 12px; outline: none; }

    /* Login strip (collect canvas) */
    .login-strip { border: 1px solid var(--line); padding: 10px 12px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: var(--gap-md); }
    .login-strip .login-state { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; }
    .login-strip .login-dot { width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--line); }
    .login-strip .login-dot.on { background: var(--ink); }
    .login-strip button { height: 28px; padding: 0 14px; border: 1px solid var(--line); background: none; font: inherit; font-size: 12px; cursor: pointer; margin-left: auto; }
    .login-strip button:hover { background: rgba(0,0,0,0.04); }
    .login-strip .login-hint { flex-basis: 100%; font-size: 11px; color: #999; line-height: 1.5; }

    /* Clip item */
    .clip-item { display: flex; align-items: flex-start; gap: 8px; padding: 10px; border: 1px solid var(--line); }
    .clip-item .clip-text { flex: 1; font-size: 13px; line-height: 1.5; outline: none; }
    .clip-item .clip-text:focus { background: rgba(0,0,0,0.03); }
    .clip-item .clip-src { font-size: 11px; color: #999; white-space: nowrap; }
    .clip-item .clip-rm { cursor: pointer; opacity: 0.5; font-size: 14px; }
    .clip-item .clip-rm:hover { opacity: 1; }

    /* ── 分组单行视图标签 ── */
    .view-tabs-flat { align-items: center; flex-wrap: nowrap; }
    .view-group-label { font-size: 11px; color: #999; padding: 0 4px 0 2px; white-space: nowrap; user-select: none; }
    .view-divider { width: 1px; align-self: stretch; background: var(--line); margin: 4px 6px; opacity: 0.45; }

    /* ── 素材篮按钮 + 抽屉 ── */
    .cart-btn { height: 28px; padding: 0 12px; border: 1px solid var(--line); background: var(--paper); font: inherit; font-size: 12px; cursor: pointer; display: flex; align-items: center; gap: 6px; flex-shrink: 0; white-space: nowrap; }
    .cart-btn:hover { background: rgba(0,0,0,0.04); }
    .cart-btn strong { min-width: 16px; text-align: center; border: 1px solid var(--line); border-radius: 9px; font-size: 11px; padding: 0 5px; }
    .cart-drawer { display: none; position: fixed; top: 0; right: 0; bottom: 0; width: 420px; max-width: 92vw; background: var(--paper); border-left: 1px solid var(--line); z-index: 110; flex-direction: column; box-shadow: -12px 0 30px rgba(0,0,0,0.12); }
    .cart-drawer.open { display: flex; }
    .cart-head { flex-shrink: 0; height: var(--panel-header); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--gap-md); border-bottom: 1px solid var(--line); font-weight: 600; }
    .cart-head button { width: 26px; height: 26px; border: 1px solid var(--line); background: none; cursor: pointer; font-size: 14px; }
    .cart-body { flex: 1; min-height: 0; overflow: auto; padding: var(--gap-sm); }
    .cart-group-title { font-size: 11px; color: #999; margin: 10px 4px 4px; }
    .cart-group-title:first-child { margin-top: 2px; }
    .cart-item { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); margin-bottom: 4px; }
    .cart-item .ci-text { flex: 1; font-size: 12px; line-height: 1.5; min-width: 0; }
    .cart-item .ci-src { font-size: 11px; color: #999; margin-top: 3px; }
    .cart-item .ci-ops { display: flex; flex-direction: column; gap: 2px; flex-shrink: 0; }
    .cart-item .ci-ops span { cursor: pointer; opacity: 0.55; font-size: 12px; line-height: 1.2; padding: 0 3px; user-select: none; }
    .cart-item .ci-ops span:hover { opacity: 1; }
    .cart-foot { flex-shrink: 0; border-top: 1px solid var(--line); padding: var(--gap-sm) var(--gap-md) var(--gap-md); }
    .cart-fmt { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; margin-bottom: 8px; }
    .fmt-btn { height: 26px; padding: 0 10px; border: 1px solid var(--line); background: var(--paper); font: inherit; font-size: 12px; cursor: pointer; }
    .fmt-btn.active { background: var(--ink); color: var(--paper); }
    .cart-actions { display: flex; gap: 6px; }
    .cart-actions button { height: 30px; padding: 0 14px; border: 1px solid var(--line); background: none; font: inherit; font-size: 12px; cursor: pointer; }
    .cart-actions button.primary { background: var(--ink); color: var(--paper); }
    .cart-actions button:hover { opacity: 0.85; }
    .cart-hint { font-size: 11px; color: #999; line-height: 1.5; margin-top: 8px; }
    .cart-empty { padding: 40px 16px; text-align: center; color: #999; font-size: 12px; line-height: 1.7; }

    /* ── 原素材行（标题/正文）── */
    .mat-list { display: flex; flex-direction: column; gap: 4px; overflow: auto; padding: var(--gap-sm); }
    .mat-row { display: flex; align-items: flex-start; gap: var(--gap-sm); padding: 10px var(--gap-sm); border: 1px solid var(--line); }
    .mat-row:hover { background: rgba(0,0,0,0.015); }
    .mat-main { flex: 1; min-width: 0; }
    .mat-title-text { font-size: 13px; font-weight: 500; line-height: 1.5; }
    .mat-body-text { font-size: 12px; line-height: 1.7; margin-top: 4px; color: #333; }
    .mat-src { font-size: 11px; color: #999; margin-top: 5px; }
    .row-ops { display: flex; gap: 4px; flex-shrink: 0; align-items: center; }
    .row-op { font-size: 11px; padding: 2px 7px; border: 1px solid var(--line); cursor: pointer; white-space: nowrap; user-select: none; background: var(--paper); }
    .row-op:hover { background: rgba(0,0,0,0.05); }
    .row-op.del { border-style: dashed; opacity: 0.6; }
    .row-op.del:hover { opacity: 1; background: rgba(0,0,0,0.05); }

    /* ── 图墙 / 视频墙 ── */
    .img-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--gap-sm); padding: var(--gap-sm); overflow: auto; align-content: start; }
    .img-cell { border: 1px solid var(--line); overflow: hidden; position: relative; }
    .img-ph { aspect-ratio: 3/4; display: grid; place-items: center; font-size: 11px; color: #bbb; background: repeating-linear-gradient(45deg, #fafafa, #fafafa 8px, #f2f2f2 8px, #f2f2f2 16px); }
    .img-cell .img-meta { padding: 5px 7px; font-size: 10px; color: #999; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 4px; }
    .img-cell .img-meta .row-op { padding: 1px 5px; }
    .vid-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--gap-sm); padding: var(--gap-sm); overflow: auto; align-content: start; }
    .vid-card { border: 1px solid var(--line); overflow: hidden; }
    .vid-thumb { aspect-ratio: 16/10; display: grid; place-items: center; position: relative; background: repeating-linear-gradient(45deg, #f6f6f6, #f6f6f6 10px, #eee 10px, #eee 20px); }
    .vid-thumb .play { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; background: var(--paper); font-size: 13px; }
    .vid-thumb .dur { position: absolute; right: 6px; bottom: 6px; font-size: 10px; background: var(--ink); color: var(--paper); padding: 1px 5px; }
    .vid-card .vid-info { padding: 7px 8px; }
    .vid-card .vid-title { font-size: 12px; font-weight: 500; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .vid-card .vid-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; }
    .vid-card .vid-foot .vid-src { font-size: 11px; color: #999; }

    /* ── 评论编辑 ── */
    .cmt-edit { font-size: 12px; line-height: 1.6; outline: none; min-width: 200px; }
    .cmt-edit:focus { background: rgba(0,0,0,0.04); box-shadow: inset 0 0 0 1px var(--line); }
    td.cmt-ops { white-space: nowrap; }
    td.cmt-ops .row-op { margin-right: 3px; }
    .data-table td.cmt-tagcell { white-space: normal; overflow: visible; max-width: 220px; }
    .cmt-tags { gap: 4px; }
    .cmt-tags .tag-chip { background: var(--paper); }
    .cmt-tags .editable-tag.add { font-size: 11px; padding: 1px 6px; color: #666; }

    /* ── 轻提示 ── */
    .toast { display: none; position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 200; background: var(--ink); color: var(--paper); font-size: 12px; padding: 8px 16px; border-radius: 4px; box-shadow: 0 6px 20px rgba(0,0,0,0.25); }
    .toast.show { display: block; }

    /* cover/gallery 角标 */
    .cover-badge { position: absolute; right: 5px; top: 5px; font-size: 10px; background: var(--ink); color: var(--paper); padding: 1px 5px; }
    .gallery-card .card-cover { position: relative; }

    /* 关联笔记紧凑链接 */
    .note-ref { white-space: nowrap; }

    /* 笔记详情评论（可删） */
    .popup-cmt { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 6px; padding: 6px; border: 1px solid var(--line); }
    .popup-cmt .pc-text { flex: 1; font-size: 12px; line-height: 1.5; }
    .popup-cmt .pc-meta { font-size: 11px; color: #666; margin-top: 2px; }
    .popup-cmt .pc-del { flex-shrink: 0; }

    /* ── 媒体工具栏 / 图片选择 / 下载 ── */
    .media-bar { display: flex; align-items: center; justify-content: space-between; padding: var(--gap-sm); border-bottom: 1px solid var(--line); gap: var(--gap-sm); flex-wrap: wrap; }
    .media-count { font-size: 12px; color: #666; }
    .media-acts { display: flex; gap: 6px; }
    .row-op.strong { background: var(--ink); color: var(--paper); border-color: var(--ink); }
    .row-op.strong:hover { opacity: 0.85; background: var(--ink); }
    .img-cell.sel { box-shadow: inset 0 0 0 2px var(--ink); }
    .img-ph { position: relative; cursor: pointer; }
    .img-ck { position: absolute; left: 5px; top: 5px; font-size: 14px; cursor: pointer; line-height: 1; }
    .img-zoom { position: absolute; right: 5px; bottom: 5px; font-size: 10px; color: #999; opacity: 0; }
    .img-cell:hover .img-zoom, .vid-thumb:hover .img-zoom { opacity: 1; }
    .vid-thumb { cursor: pointer; }
    .vid-thumb .img-zoom { right: 6px; top: 6px; bottom: auto; }

    /* ── 灯箱（放大） ── */
    .lightbox { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.78); z-index: 140; align-items: center; justify-content: center; }
    .lightbox.open { display: flex; }
    .lb-stage { width: min(60vw, 520px); height: min(80vh, 720px); display: grid; place-items: center; }
    .lb-ph { width: 100%; height: 100%; border: 1px solid var(--line); display: grid; place-items: center; font-size: 16px; color: #888; background-image: repeating-linear-gradient(45deg, #fafafa, #fafafa 12px, #f0f0f0 12px, #f0f0f0 24px); position: relative; }
    .lb-ph.video .lb-play { width: 56px; height: 56px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; background: var(--paper); font-size: 22px; }
    .lb-ph .lb-dur { position: absolute; right: 10px; bottom: 10px; background: var(--ink); color: var(--paper); font-size: 12px; padding: 2px 7px; }
    .lb-close { position: absolute; top: 18px; right: 22px; width: 36px; height: 36px; border: 1px solid #fff; background: none; color: #fff; font-size: 20px; cursor: pointer; }
    .lb-nav { width: 44px; height: 64px; border: 1px solid #fff; background: rgba(0,0,0,0.3); color: #fff; font-size: 26px; cursor: pointer; margin: 0 14px; }
    .lb-nav:hover, .lb-close:hover { background: rgba(255,255,255,0.18); }
    .lb-bar { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 14px; background: var(--paper); border: 1px solid var(--line); padding: 8px 14px; max-width: 80vw; }
    .lb-cap { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46vw; }
    .lb-count { font-size: 11px; color: #999; }
    .lb-dl { height: 28px; padding: 0 14px; border: 1px solid var(--line); background: var(--ink); color: var(--paper); font: inherit; font-size: 12px; cursor: pointer; }

    @media (max-width: 1100px) { .app { min-width: 1100px; } }