*{margin:0;padding:0;box-sizing:border-box}
body{min-height:100vh;background:var(--bg);font-family:var(--font-sans);color:var(--foreground)}

/* 2-column Memos layout */
.layout{display:flex;max-width:1080px;margin:0 auto;min-height:100vh}
.sidebar-col{width:240px;flex-shrink:0;padding:20px 16px;border-right:1px solid var(--border);position:sticky;top:0;height:100vh;overflow-y:auto}
.main-col{flex:1;padding:20px 24px 60px;min-width:0}

/* Sidebar sections */
.sb-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted-fg);margin-bottom:8px}
.sb-search{width:100%;padding:7px 10px;border:1px solid var(--border);border-radius:6px;font:inherit;font-size:12px;background:var(--card);color:var(--foreground);outline:none;margin-bottom:16px}
.sb-search:focus{border-color:var(--foreground)}

/* Heatmap */
.heatmap{margin-bottom:16px}
.hm-month{font-size:11px;color:var(--muted-fg);margin-bottom:6px;display:flex;justify-content:space-between}
.hm-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.hm-cell{aspect-ratio:1;border-radius:2px;background:var(--muted,#f0efec)}
.hm-cell.l1{background:#c6e48b}.hm-cell.l2{background:#7bc96f}.hm-cell.l3{background:#239a3b}.hm-cell.l4{background:#196127}

/* Tags */
.tag-list{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:16px}
.tag-chip{font-size:11px;padding:3px 8px;border-radius:999px;border:1px solid var(--border);background:var(--card);color:var(--muted-fg);cursor:pointer;transition:all .15s;white-space:nowrap}
.tag-chip:hover{border-color:var(--foreground);color:var(--foreground)}
.tag-chip.active{background:var(--foreground);color:var(--bg);border-color:var(--foreground)}
.tag-count{opacity:.6;margin-left:2px}

/* Status filters */
.status-filters{display:flex;flex-direction:column;gap:2px;margin-bottom:16px}
.status-row{display:flex;align-items:center;gap:6px;padding:5px 8px;border-radius:6px;cursor:pointer;font-size:12px;color:var(--muted-fg);transition:all .12s}
.status-row:hover{background:var(--muted,#f0efec);color:var(--foreground)}
.status-row.active{color:var(--foreground);font-weight:600;background:var(--muted,#f0efec)}
.status-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.dot-live{background:#16a34a}.dot-testing{background:#d97706}.dot-draft{background:var(--border)}.dot-archived{background:var(--muted-fg)}

/* Page header */
.page-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.page-head h1{font-size:18px;font-weight:700}
.page-head p{font-size:12px;color:var(--muted-fg);margin-top:2px}
.head-actions{display:flex;gap:8px}
.btn-sm{padding:6px 12px;border:1px solid var(--border);border-radius:6px;background:var(--card);font:inherit;font-size:11px;font-weight:600;cursor:pointer;color:var(--muted-fg);transition:all .15s}
.btn-sm:hover{border-color:var(--foreground);color:var(--foreground)}
.btn-sm.active{background:var(--foreground);color:var(--bg);border-color:var(--foreground)}

/* Experiment cards — Memos memo-card style */
.card-list{display:flex;flex-direction:column;gap:8px}
.exp-card{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:14px 16px;transition:box-shadow .15s;position:relative}
.exp-card:hover{box-shadow:0 2px 8px rgba(0,0,0,.04)}
.exp-card:hover .card-actions{opacity:1}
.exp-card.pinned{border-left:3px solid var(--foreground)}

.card-top{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.card-ver{font-size:12px;font-weight:700;color:var(--foreground)}
.card-date{font-size:11px;color:var(--muted-fg);margin-left:auto}
.card-status{font-size:10px;font-weight:700;padding:2px 7px;border-radius:999px;text-transform:uppercase;letter-spacing:.03em}
.s-live{background:#dcfce7;color:#16a34a}.s-testing{background:#fef3c7;color:#d97706}.s-draft{background:var(--muted,#f0efec);color:var(--muted-fg)}.s-archived{background:var(--muted,#f0efec);color:var(--muted-fg)}

.card-title{font-size:14px;font-weight:600;margin-bottom:4px}
.card-desc{font-size:12px;color:var(--muted-fg);line-height:1.5;margin-bottom:8px}
.card-model{font-size:11px;color:var(--muted-fg);font-family:monospace;margin-bottom:6px}

/* Tags on card */
.card-tags{display:flex;gap:4px;margin-bottom:8px;flex-wrap:wrap}
.card-tag{font-size:10px;padding:2px 6px;border-radius:999px;background:var(--muted,#f0efec);color:var(--muted-fg)}

/* Metrics bar */
.metrics{display:flex;gap:16px;flex-wrap:wrap}
.metric{display:flex;flex-direction:column;align-items:flex-start}
.metric-label{font-size:10px;color:var(--muted-fg);text-transform:uppercase;letter-spacing:.05em}
.metric-val{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}
.mv-good{color:#16a34a}.mv-warn{color:#d97706}.mv-bad{color:#dc2626}

/* Card hover actions */
.card-actions{position:absolute;top:10px;right:10px;display:flex;gap:2px;opacity:0;transition:opacity .15s}
.card-actions button{width:24px;height:24px;border:none;background:transparent;cursor:pointer;border-radius:4px;font-size:12px;color:var(--muted-fg);display:flex;align-items:center;justify-content:center}
.card-actions button:hover{background:var(--muted,#f0efec);color:var(--foreground)}
.card-actions .del:hover{background:#fef2f2;color:#dc2626}

/* Compare checkbox */
.cmp-check{width:14px;height:14px;accent-color:var(--foreground);cursor:pointer;flex-shrink:0}

/* Compare panel */
.compare-bar{position:fixed;bottom:0;left:0;right:0;background:var(--card);border-top:1px solid var(--border);padding:10px 24px;display:flex;align-items:center;justify-content:center;gap:12px;z-index:100;box-shadow:0 -2px 12px rgba(0,0,0,.05);transform:translateY(100%);transition:transform .2s}
.compare-bar.visible{transform:translateY(0)}

/* Compare view */
.compare-view{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:12px}
.cmp-col{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:14px}
.cmp-col h3{font-size:14px;font-weight:700;margin-bottom:8px}
.cmp-row{display:flex;justify-content:space-between;padding:4px 0;font-size:12px;border-bottom:1px solid var(--border)}
.cmp-row:last-child{border-bottom:none}
.cmp-label{color:var(--muted-fg)}
.cmp-val{font-weight:600;font-variant-numeric:tabular-nums}
.cmp-better{color:#16a34a}.cmp-worse{color:#dc2626}

.empty{text-align:center;padding:40px;color:var(--muted-fg);font-size:13px}

@media(max-width:768px){.sidebar-col{display:none}.main-col{padding:16px}}