.space-grid {position:relative; display:block; width:100%;}
.space-card {container-type:inline-size; background:var(--surface); border:1px solid var(--line); border-radius:17px; position:absolute; overflow:hidden; transition:border-color .14s,background .14s;}
.space-card:hover {border-color:#b8c0b1;}
.space-open {border:0; background:none; text-align:left; width:100%; height:100%; display:flex; flex-direction:column; padding:25px 27px 21px;}
.space-open:disabled {color:inherit; opacity:1;}
.card-top {display:flex; justify-content:space-between; width:100%;}
.card-top>.icon:first-child {width:24px; height:24px;}
.card-arrow {width:15px; height:15px; color:#92978a;}
.card-copy {display:flex; flex-direction:column; gap:7px; margin-top:auto; padding-top:15px;}
.card-title {font-size:20px; font-weight:600; line-height:1.4;}
.card-description {color:var(--muted); font-size:13px; line-height:1.8;}
.card-count {margin-top:16px; color:#777d6f; font-size:12px;}
.breadcrumb {margin-bottom:28px;}
.list-heading h1 {display:flex; align-items:center; gap:12px;}
.list-heading h1 .icon {width:26px; height:26px;}
.note-list {border-top:1px solid var(--line);}
.note-row {display:flex; align-items:center; gap:18px; padding:23px 9px; width:100%; min-height:99px; background:none; border:0; border-bottom:1px solid var(--line); text-align:left;}
.note-row:hover {background:#f0f2eb;}
.row-icon {color:#7e8575;}
.row-icon .icon {width:20px; height:20px;}
.row-content {display:flex; flex-direction:column; gap:9px; flex:1; min-width:0;}
.row-title {font-weight:500; font-size:16px; overflow-wrap:anywhere; line-height:1.6;}
.row-preview {color:var(--muted); font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.row-arrow {width:16px; height:16px; color:#a0a694;}
.empty-state {min-height:320px; display:flex; align-items:center; justify-content:center; flex-direction:column; text-align:center; border-top:1px solid var(--line); padding:40px 20px;}
.empty-state>.icon {width:32px; height:32px; margin-bottom:20px; color:#929b87;}
.empty-state h2 {font-size:18px; font-weight:500;}
.empty-state p {font-size:13px; margin:13px 0 25px; color:var(--muted); line-height:1.8;}

@media(max-width:650px) {
.space-card {border-radius:14px;}
.space-open {padding:20px 17px 18px;}
.card-title {font-size:18px;}
.card-description {font-size:12px;}
.card-count {font-size:11px; margin-top:13px;}
.card-top>.icon:first-child {width:22px; height:22px;}
.note-row {padding:19px 1px; gap:12px; min-height:94px;}
.row-title {font-size:15px;}
.row-preview {font-size:12px;}

}
@media(max-width:370px) {
.card-title {font-size:16px;}
.card-description {font-size:11px;}
}
.home-heading {margin-bottom:24px; align-items:center;}
.home-heading h1 {font-size:19px; font-weight:500; letter-spacing:0;}
.date-select {max-width:100%; padding:9px 12px; border:1px solid var(--line); border-radius:8px; color:var(--text); background:white; font-size:13px;}
.snapshot-badge {color:var(--muted); font-size:12px;}
@container (max-width:180px) {
.card-description {display:none;}
.space-open {padding-left:17px; padding-right:17px;}
.card-title {font-size:17px;}
}
@media(max-width:650px) {
.home-heading {flex-wrap:wrap;}
.home-heading h1 {font-size:17px;}
.review-heading {align-items:center;}
}
.canvas-help {font-size:12px; color:var(--muted); line-height:1.8; margin:-10px 0 20px;}
.canvas-editing {touch-action:pan-y; background-image:radial-gradient(#8b968028 1px, transparent 1px); background-size:18px 18px; border-radius:10px;}
.canvas-editing .space-card {overflow:visible; border-style:dashed; cursor:grab; user-select:none; touch-action:none;}
.canvas-editing .space-open {pointer-events:none; border-radius:inherit; overflow:hidden;}
.canvas-active {cursor:grabbing!important; box-shadow:0 8px 28px #1c271618;}
.space-card:focus-visible {outline:2px solid var(--accent); outline-offset:4px;}
.canvas-handle {position:absolute; z-index:2; padding:0; border:0; background:transparent; touch-action:none;}
.canvas-handle::after {content:''; position:absolute; inset:8px; background:#fff; border:1px solid #8a967d; border-radius:3px;}
.handle-n,.handle-s {width:calc(100% - 28px); height:20px; left:14px; cursor:ns-resize;}
.handle-n {top:-10px;}
.handle-s {bottom:-10px;}
.handle-e,.handle-w {width:20px; height:calc(100% - 28px); top:14px; cursor:ew-resize;}
.handle-e {right:-10px;}
.handle-w {left:-10px;}
.handle-n::after,.handle-s::after {inset:auto; width:12px; height:4px; left:calc(50% - 6px); top:8px;}
.handle-e::after,.handle-w::after {inset:auto; width:4px; height:12px; top:calc(50% - 6px); left:8px;}
.handle-ne,.handle-nw,.handle-se,.handle-sw {width:28px; height:28px;}
.handle-ne {right:-14px; top:-14px; cursor:nesw-resize;}
.handle-nw {left:-14px; top:-14px; cursor:nwse-resize;}
.handle-se {right:-14px; bottom:-14px; cursor:nwse-resize;}
.handle-sw {left:-14px; bottom:-14px; cursor:nesw-resize;}
.canvas-handle:hover::after,.canvas-handle:focus-visible::after {background:#dce7d3; border-color:var(--accent);}
.space-open {border-radius:inherit;}
.compact-card .card-description {display:none;}
.compact-card .space-open {padding:16px 20px 12px;}
.compact-card .card-copy {padding-top:7px;}
.compact-card .card-count {margin-top:8px;}

.heading-actions { display:flex;gap:8px;align-items:center;flex-wrap:wrap; }
.home-heading { flex-wrap:wrap; }
.space-actions { position:absolute;right:12px;top:14px;z-index:3;display:flex;gap:6px;touch-action:pan-y; }
.note-item { display:flex;align-items:center;gap:10px; }
.note-item .note-row { flex:1;min-width:0; }
.note-delete { flex:none;color:var(--muted); }
.notes-editing .note-row { user-select:none;-webkit-touch-callout:none; }
.list-status { min-height:20px;margin:-10px 0 12px;color:var(--muted);font-size:12px; }
.note-created { animation:note-appear .28s ease-out; }
@keyframes note-appear { from {opacity:.35;transform:translateY(5px);} to {opacity:1;transform:none;} }
.editor-page { padding:0 var(--writing-inset,0px); }
.title-input,.body-input { display:block;width:100%;margin:0;border:0;border-radius:0;background:transparent;color:var(--text);box-shadow:none; }
.title-input { font-size:28px;font-weight:600;line-height:1.6;padding:4px 0; }
.body-input { margin-top:var(--writing-gap,24px);padding:0;min-height:min(240px,calc(var(--scene-height,100svh) * .52));resize:none;overflow:hidden;font-size:16px;line-height:2; }
.title-input::placeholder,.body-input::placeholder { color:var(--muted); }
.title-input:focus-visible,.body-input:focus-visible { outline:none; }
.save-status.save-error { display:block;color:#a33d35;font-size:12px;margin-bottom:16px;line-height:1.7; }
[data-writing-framed="true"] .title-input,[data-writing-framed="true"] .body-input { border:1px solid var(--line);border-radius:var(--radius-control);padding:12px 14px;background:var(--surface); }
.compact-card .card-top { display:none; }
.compact-card .space-actions { position:absolute;right:12px;top:14px;z-index:3;display:flex;gap:6px;touch-action:pan-y; }
@media(max-width:650px) { .title-input {font-size:24px;} .list-heading {flex-wrap:wrap;} .heading-actions .button {padding:8px 10px;font-size:12px;} }
@media(prefers-reduced-motion:reduce) { .note-created { animation:none; } }

.space-delete { color:var(--muted); }
@container(max-width:140px) { .space-actions {right:5px;top:5px;gap:3px;} .space-actions .button {font-size:10px;padding:3px 5px;min-height:25px;} }