:root{--card-surface:#2d2d2f;--card-accent:#4fa0ff}
:root[data-theme="light"]{--card-surface:#f7f7f8;--card-accent:#1877dd}

/* Each category is a horizontal shelf of individual, content-sized cards. */
.card-rail{display:flex!important;flex-direction:row;gap:14px;flex:none;min-height:0;overflow-x:auto;overflow-y:hidden;padding:8px 6px 14px!important;scroll-snap-type:none;scroll-behavior:auto;scroll-padding:6px;overscroll-behavior-x:contain;touch-action:pan-x pan-y;border:0}
.card-rail>.feature-card{flex:0 0 calc(40% - 11.2px)}
.card-rail>.empty-state{grid-column:1;width:100%;align-self:center;white-space:normal}
.card-rail-controls{display:flex;flex:none;justify-content:center;gap:6px;height:25px;margin:8px 0 2px}
.card-rail-controls[hidden]{display:none}
.card-rail-controls button{width:29px;height:25px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--fg);font-size:14px}
.card-rail-controls button:disabled{opacity:.3;cursor:default}
.feature-card{position:relative;scroll-snap-align:start;border:1px solid var(--border)!important;border-radius:19px!important;background:var(--card-surface);box-shadow:0 3px 10px var(--shadow);transform-style:preserve-3d;transition:transform .16s ease-out,box-shadow .18s ease;isolation:isolate;min-width:0;margin:0!important;overflow:hidden}
.feature-card:hover{box-shadow:0 7px 18px var(--shadow)}
.rail-scrolling .feature-card{transform:none!important;box-shadow:0 3px 10px var(--shadow);transition:none}
.feature-card:focus-within{border-color:var(--border)!important}
#task-list.card-rail{height:auto;flex:1;flex-direction:column;gap:10px;overflow-x:hidden;overflow-y:auto;scroll-snap-type:none;touch-action:pan-y}
#task-list.card-rail>.feature-card{flex:0 0 74px;min-height:74px;width:100%}
.task-row.feature-card{display:grid;grid-template-columns:25px minmax(0,1fr) 24px;grid-template-rows:1fr;align-items:center;padding:12px 14px;gap:12px;background:var(--card-surface);border-radius:14px!important}
.feature-card .task-check{width:25px;height:25px;border-radius:8px}
.feature-card .task-title{grid-row:1;grid-column:2;width:100%;min-height:0;align-self:center;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-align:left;white-space:normal;padding:0;border:0;background:transparent;color:var(--fg);font-size:14px;line-height:1.45;font-weight:600;word-break:break-word}
.feature-card .task-title.done{opacity:.45;text-decoration:line-through}
.feature-card .row-delete{grid-column:3;grid-row:1;align-self:center;opacity:.55}
#note-list.card-rail{height:268px;max-height:none}
.note-card-item{display:flex;flex-direction:column;align-items:center;gap:12px;padding:16px;flex:0 0 calc(40% - 11.2px);min-width:0;scroll-snap-align:start}
.note-card-item>.note-chip{width:100%;flex:1;min-height:0;border:0;border-radius:0;box-shadow:none;padding:0;background:transparent}
.feature-detail-footer[hidden]{display:none}
.note-card-item .note-chip{display:flex;flex-direction:column;align-items:stretch;align-self:stretch;justify-content:flex-start;text-align:left;width:auto;height:auto;min-height:0;max-width:none;padding:0;background:transparent;color:var(--fg)}
.note-card-item .note-chip strong{flex:none;font-size:16px;line-height:1.35;white-space:normal;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
.note-card-item .note-chip .note-card-preview{min-height:0;margin-top:12px;font-size:12px;line-height:1.65;white-space:pre-wrap;color:var(--muted);overflow:hidden;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow-wrap:anywhere}
#clipboard-list.card-rail{height:242px}
.clipboard-row.feature-card{display:flex;flex-direction:column;gap:12px;padding:14px;background:var(--card-surface)}
.feature-card .clipboard-preview{display:flex;align-items:center;flex:1;min-height:0;max-height:none;font-size:13px;line-height:1.65;white-space:pre-wrap;overflow:hidden;cursor:pointer;word-break:break-word}
.feature-card .clipboard-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));flex:none;gap:6px;padding:0;margin:0;border:0}
.feature-card .clipboard-actions span{grid-column:1/-1;width:100%;min-width:0;font-size:10px;color:var(--muted)}
.feature-card .clipboard-actions button{width:100%;min-width:0;padding:5px 3px;font-size:10px;text-align:center}
.files-page{overflow-y:auto}
.recording-list.card-rail{height:auto;max-height:none}
.files-page .recording-list.card-rail{overflow-x:auto;overflow-y:hidden}
.recording-row.feature-card{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;align-content:start;padding:13px;gap:8px}
.feature-card .recording-open{position:relative;grid-column:1/-1;display:flex;flex-direction:column;align-items:stretch;min-height:0;gap:10px;width:100%}
.feature-card .recording-kind{position:relative;display:grid;place-items:center;width:100%;height:88px;flex:none;border-radius:12px;background:var(--surface-strong);color:var(--accent);font-size:28px;overflow:hidden}
.feature-card .recording-kind img{position:absolute;inset:0;display:block;width:100%;height:100%;min-width:0;min-height:0;object-fit:cover;object-position:center}
.feature-card .recording-open .recording-meta{flex:none}
.feature-card .recording-meta strong{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word;font-size:15px;line-height:1.4;font-weight:650}
.feature-card .recording-meta strong::before{content:'';display:inline-block;width:3px;height:12px;margin-right:6px;border-radius:2px;background:#58a995;vertical-align:-1px}
.recording-project-badge{position:absolute;top:7px;left:7px;z-index:1;display:inline-flex;align-items:center;gap:5px;padding:4px 7px;border:1px solid #b3e3d944;border-radius:6px;background:#183e37e8;color:#e1fff6;font-size:10px;font-weight:600;line-height:1.2;box-shadow:0 1px 5px #0002;pointer-events:none}
.recording-project-badge::before{content:'';width:5px;height:5px;border-radius:50%;background:#8cddc0;flex:none}
.feature-card .recording-meta small{margin-top:5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:normal;line-height:1.5;font-size:9px;color:var(--muted)}
.feature-card .file-copy,
.feature-card .file-send,.feature-card .file-edit{justify-self:start}
.feature-card .file-delete{justify-self:end}
.feature-overlay{position:absolute;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:22px;background:transparent;border-radius:inherit}
.feature-backdrop{position:absolute;inset:0;border-radius:inherit;background:#0005;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.feature-overlay[hidden]{display:none}
.feature-detail{position:relative;display:flex;flex-direction:column;width:100%;height:90%;max-height:600px;min-width:0;min-height:0;border:1px solid var(--border);border-radius:22px;background:var(--panel);box-shadow:0 20px 50px #0004;transform-origin:0 0;overflow:hidden;outline:none}
.feature-detail-header{display:flex;align-items:flex-start;gap:14px;padding:20px 20px 16px;border-bottom:1px solid var(--border);flex:none}
.feature-detail-header[hidden]{display:none}
.feature-detail-header>div{min-width:0;flex:1}
.feature-detail-header h2{margin:0;font-size:18px;line-height:1.4;color:var(--fg);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
.feature-detail-header p{margin:5px 0 0;color:var(--muted);font-size:11px}

.feature-detail-content{flex:1;min-height:0;padding:20px;overflow:auto;overscroll-behavior:contain;color:var(--fg)}
.feature-detail-text{white-space:pre-wrap;overflow-wrap:anywhere;font-size:15px;line-height:1.75;user-select:text;margin-bottom:20px;min-height:70px}
.feature-detail-footer{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:10px;padding:14px 20px 18px;border-top:1px solid var(--border);flex:none}
.feature-detail-action{position:relative;isolation:isolate;overflow:hidden;border:1px solid color-mix(in srgb,var(--accent) 80%,white);border-radius:10px;background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 82%,white),var(--accent));color:#fff;padding:9px 13px;font-size:12px;font-weight:650;text-align:center;margin:0;box-shadow:inset 0 1px #ffffff55,0 3px 9px color-mix(in srgb,var(--accent) 18%,transparent);transition:filter .18s,transform .18s,box-shadow .18s}
.feature-detail-action:hover{filter:brightness(1.08);box-shadow:inset 0 1px #ffffff66,0 5px 12px color-mix(in srgb,var(--accent) 24%,transparent)}
.feature-detail-action:active{transform:scale(.97)}
.feature-detail-action.feature-detail-close:not(.note-save-close){background:var(--accent-soft);color:var(--accent);border-color:color-mix(in srgb,var(--accent) 25%,var(--border));box-shadow:inset 0 1px #ffffff18}
@media(prefers-reduced-motion:reduce){.feature-detail-action{transition:none;transform:none}}
.feature-detail .note-editor{display:flex;flex-direction:column;height:100%;min-height:220px;margin:0;border:0;padding:0;background:transparent}
.feature-detail .note-editor textarea{flex:1;min-height:160px;resize:none}
.feature-media{display:block;width:100%;max-height:360px;object-fit:contain;border-radius:12px;background:#080808}
audio.feature-media{height:54px;background:var(--surface)}
.feature-media-status{font-size:12px;color:var(--muted)}
@media(prefers-reduced-motion:reduce){.feature-card{transition:none!important;transform:none!important}.card-rail{scroll-behavior:auto}}

.feature-detail-action::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--switch-on);opacity:0;pointer-events:none;transform:scaleX(.15)}
.feature-detail-action[data-liquid-press="true"]::before{animation:detail-liquid .5s cubic-bezier(.22,.7,.2,1) both}
@keyframes detail-liquid{0%{opacity:.15;transform:scaleX(.15) scaleY(.65);border-radius:50%}45%{opacity:.7;transform:scaleX(1.18) scaleY(.85);border-radius:45%}75%{opacity:.35;transform:scaleX(.92) scaleY(1.1);border-radius:14px}100%{opacity:0;transform:scale(1);border-radius:10px}}
@media(prefers-reduced-motion:reduce){.feature-detail-action::before{animation:none!important}}

.centered-card-shelf{display:flex;flex-direction:column;justify-content:flex-start;justify-content:safe center;flex:1;min-height:0;padding:10px 0;overflow-y:auto}
.centered-card-shelf>.card-rail-controls{flex:none}
.centered-card-shelf>.card-rail{flex:none}
@media(max-height:560px){.centered-card-shelf{justify-content:flex-start}}

.clipboard-preview-text{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden;width:100%;white-space:pre-wrap;overflow-wrap:anywhere}
.note-card-text{display:grid;grid-template-rows:minmax(0,.382fr) 1px minmax(0,.618fr);gap:12px;flex:1;width:100%;min-height:0}
.note-card-text strong{align-self:end}
.note-card-text .note-card-preview{align-self:start}

/* A quiet short divider separates the note title from its preview. */
.note-card-divider{display:block;justify-self:center;width:82%;height:1px;margin:0;background:color-mix(in srgb,var(--fg) 13%,transparent)}
.note-card-item .note-chip .note-card-preview{margin-top:0}

/* Stacked clipboard entries and compact two-column notes, matching the reference layouts. */
#task-list.card-rail>.feature-card{flex-basis:64px;min-height:64px}
.task-row.feature-card{padding:9px 14px}
#clipboard-list.card-rail{height:auto;flex:1;flex-direction:column;gap:10px;overflow-x:hidden;overflow-y:auto;touch-action:pan-y}
#clipboard-list.card-rail>.clipboard-row{flex:none;width:100%;min-height:94px;padding:14px 16px;gap:12px;justify-content:space-between}
.feature-card .clipboard-preview{flex:none;align-items:flex-start;font-size:13px;line-height:1.55}
.clipboard-preview-text{-webkit-line-clamp:3}
.feature-card .clipboard-actions{grid-template-columns:minmax(0,1fr) repeat(3,auto);align-items:center;gap:6px}
.feature-card .clipboard-actions>span{grid-column:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9px}
.feature-card .clipboard-actions button{width:auto;padding:5px 8px}
#note-list.card-rail{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:210px;align-content:start;gap:12px;height:auto;flex:1;overflow-x:hidden;overflow-y:auto;touch-action:pan-y}
.note-card-item{width:100%;padding:16px;gap:12px;align-items:stretch}
.note-card-item>.note-chip{width:100%;flex:1}
.note-card-text{display:flex;flex-direction:column;justify-content:flex-start;gap:0;min-height:0}
.note-card-accent{display:block;flex:none;width:16px;height:4px;margin-bottom:16px;border-radius:4px;background:var(--card-accent)}
.clipboard-card-accent{display:block;flex:none;width:16px;height:4px;border-radius:4px;background:var(--card-accent)}
.clipboard-character-count{font:inherit;color:var(--dim);white-space:nowrap}
.feature-card .clipboard-actions>span{display:flex;align-items:center;gap:8px}
.clipboard-card-date{min-width:0;overflow:hidden;text-overflow:ellipsis}
.clipboard-character-count{flex:none}
.native-file-draggable,.native-file-draggable .recording-open{cursor:grab;-webkit-user-drag:none;user-select:none;-webkit-user-select:none}
.native-file-draggable img{pointer-events:none;-webkit-user-drag:none}
img.feature-media.native-file-draggable{pointer-events:auto}
@media(hover:hover) and (pointer:fine){
  .recording-row .file-copy,
  .recording-row .file-send,.recording-row .file-edit,.recording-row .file-delete{opacity:0;pointer-events:none;transition:opacity .18s,background .18s,transform .18s}
  .recording-row:hover .file-copy,
  .recording-row:hover .file-send,.recording-row:hover .file-edit,.recording-row:hover .file-delete,.recording-row:focus-within .file-copy,.recording-row:focus-within .file-send,.recording-row:focus-within .file-edit,.recording-row:focus-within .file-delete{opacity:1;pointer-events:auto}
}
@media(prefers-reduced-motion:reduce){.recording-row .file-copy,.recording-row .file-send,.recording-row .file-edit,.recording-row .file-delete{transition:none}}
.note-card-item:nth-child(2n) .note-card-accent{background:#a479d1}
.note-card-item:nth-child(3n) .note-card-accent{background:#68aaa0}
.note-card-text strong{align-self:stretch;font-size:15px}
.note-card-item .note-chip .note-card-preview{align-self:stretch;margin-top:12px;-webkit-line-clamp:3;font-size:12px;line-height:1.6}
.note-card-footer{display:flex;align-items:center;justify-content:space-between;gap:6px;min-height:28px;flex:none}
.note-card-saved{font-size:9px;color:var(--muted);min-width:0}
.note-card-footer .note-card-delete{min-height:26px;padding:5px 8px;font-size:9px;flex:none}
@media(hover:hover) and (pointer:fine){
  .clipboard-row .clipboard-actions button,.note-card-item .note-card-delete{opacity:0;pointer-events:none;transition:opacity .18s,background .18s,transform .18s}
  .clipboard-row:hover .clipboard-actions button,.clipboard-row:focus-within .clipboard-actions button,.note-card-item:hover .note-card-delete,.note-card-item:focus-within .note-card-delete{opacity:1;pointer-events:auto}
}
@media(prefers-reduced-motion:reduce){.clipboard-row .clipboard-actions button,.note-card-item .note-card-delete{transition:none}}

/* Leading clipboard marker never adds another row or changes vertical padding. */
#clipboard-list.card-rail>.clipboard-row{padding-left:30px}
.clipboard-card-accent{position:absolute;left:16px;top:17px;width:4px;height:16px}
.file-card-footer{grid-column:1/-1;display:grid;align-items:center;min-height:28px}
.file-card-info,.file-card-actions{grid-area:1/1;min-width:0;transition:opacity .16s}
.file-card-info{font-size:9px;line-height:1.5;color:var(--muted);overflow-wrap:anywhere}
.file-card-actions{display:flex;align-items:center;justify-content:flex-end;gap:6px}
@media(hover:hover) and (pointer:fine){
  .file-card-actions{opacity:0;pointer-events:none;visibility:hidden}
  .recording-row:hover .file-card-info,.recording-row:focus-within .file-card-info{opacity:0;visibility:hidden}
  .recording-row:hover .file-card-actions,.recording-row:focus-within .file-card-actions{opacity:1;pointer-events:auto;visibility:visible}
}
@media(hover:none),(pointer:coarse){.file-card-footer{gap:8px}.file-card-actions{grid-area:2/1}}
.note-mode-controls{display:flex;gap:4px}
:root[data-platform="darwin"] .note-mode-controls{display:none}
.note-mode-controls button{padding:5px 10px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--muted);font-size:11px}
.note-mode-controls button[aria-pressed="true"]{color:var(--accent);background:var(--accent-soft);border-color:var(--border)}
.note-editor .editor-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex:none}
.note-character-count{font-size:10px;color:var(--muted);white-space:nowrap}
.markdown-body{font-size:14px;line-height:1.7;overflow-wrap:anywhere}
.markdown-body>:first-child{margin-top:0}.markdown-body>:last-child{margin-bottom:0}
.markdown-body p{margin:0 0 .8em;white-space:pre-wrap}
.markdown-body h1,.markdown-body h2,.markdown-body h3,.markdown-body h4,.markdown-body h5,.markdown-body h6{line-height:1.35;margin:1em 0 .5em;font-weight:650}
.markdown-body h1{font-size:1.8em}.markdown-body h2{font-size:1.5em}.markdown-body h3{font-size:1.25em}
.markdown-body ul,.markdown-body ol{padding-left:1.6em;margin:.6em 0}
.markdown-body blockquote{margin:.6em 0;padding:.1em .9em;border-left:3px solid var(--accent);color:var(--muted)}
.markdown-body pre{margin:.8em 0;padding:12px;border:1px solid var(--border);border-radius:10px;background:var(--surface);overflow:auto;white-space:pre}
.markdown-body code{font-family:ui-monospace,monospace;font-size:.9em;background:var(--surface-strong);border-radius:4px;padding:.1em .3em}
.markdown-body pre code{background:transparent;padding:0}
.markdown-body a{color:var(--accent);text-decoration:underline}
.markdown-body hr{border:0;border-top:1px solid var(--border);margin:1em 0}
.markdown-task{list-style:none}.markdown-task input{width:13px;height:13px;margin:0 7px 0 -1.4em;accent-color:var(--accent)}
.note-card-preview.markdown-body{font-size:12px;white-space:normal;pointer-events:none}
.note-card-preview.markdown-body p,.note-card-preview.markdown-body ul,.note-card-preview.markdown-body ol,.note-card-preview.markdown-body blockquote,.note-card-preview.markdown-body pre{margin:0 0 3px}
.note-card-preview.markdown-body h1,.note-card-preview.markdown-body h2,.note-card-preview.markdown-body h3{font-size:1.05em;margin:0 0 3px}
@media(prefers-reduced-motion:reduce){.file-card-info,.file-card-actions{transition:none}}

.note-card-preview.markdown-body strong{display:inline;font-size:inherit;line-height:inherit;white-space:normal}
.note-editor .editor-head{height:auto;min-height:30px;margin-bottom:4px;letter-spacing:0}
.note-editor .markdown-task input{height:13px;width:13px;display:inline;vertical-align:middle}

/* Rich editing shares the safe Markdown styles; source remains an optional view. */
.note-live-content{flex:1;min-height:160px;overflow:auto;outline:none;cursor:text;padding:8px 0;white-space:pre-wrap;user-select:text;-webkit-user-select:text}
.note-live-content:focus-visible{outline:none}
.note-live-content blockquote{white-space:pre-wrap}
.note-live-content:empty::before{content:"从这里开始写…";color:var(--muted);pointer-events:none}
.feature-detail .note-editor .note-live-content{flex:1;min-height:160px}

.note-live-content [data-task-text]{display:inline-block;min-width:1ch;vertical-align:top;white-space:pre-wrap}