/* Layout uses the colors, typography, spacing and radius tokens from tylxm/design at 9ef96a4. */
*{box-sizing:border-box}body{margin:0;background:var(--color-bg);color:var(--color-text);font:var(--text-base)/var(--leading-normal) var(--font-sans)}a{color:inherit;text-decoration:none}button,input{font:inherit}.site-header{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 max(24px,calc((100vw - 1120px)/2));background:var(--color-surface);border-bottom:1px solid var(--color-border)}.brand{font-size:var(--text-md);font-weight:var(--weight-bold);letter-spacing:var(--tracking-tight)}.brand span{font-weight:var(--weight-regular);color:var(--color-text-muted);margin-left:8px}.account{font-size:var(--text-sm);color:var(--color-text-muted)}.account:hover{color:var(--color-primary)}main{max-width:1120px;margin:0 auto;padding:var(--space-7) var(--space-5) var(--space-8)}.heading{display:flex;align-items:end;justify-content:space-between;gap:20px}.eyebrow{font-size:var(--text-xs);font-weight:var(--weight-bold);letter-spacing:.12em;color:var(--color-primary);margin:0 0 8px}h1{font-size:var(--text-2xl);line-height:var(--leading-tight);letter-spacing:var(--tracking-tight);margin:0}.subhead{color:var(--color-text-muted);margin:8px 0 0}.status{font-size:var(--text-sm);color:var(--color-text-muted);padding-bottom:3px}.toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin:var(--space-6) 0 var(--space-5);padding:var(--space-3);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg)}.days,.filters{display:flex;gap:8px;align-items:center}.days label{font-size:var(--text-sm);color:var(--color-text-muted);margin:0 4px}.days button,.filters button{border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text);border-radius:var(--radius-md);min-height:36px;padding:6px 12px;cursor:pointer}.days button:hover,.filters button:hover{background:var(--color-hover)}.days button:disabled{opacity:.4;cursor:default}.days input{border:1px solid var(--color-border);background:var(--color-field);color:var(--color-text);border-radius:var(--radius-md);min-height:36px;padding:4px 9px}.filters button.selected{background:var(--color-theme-subtle);color:var(--color-primary);border-color:var(--color-primary)}.count{font-size:var(--text-sm);color:var(--color-text-muted);margin-bottom:var(--space-3)}.clips{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:var(--space-4)}.clip{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden}.clip video{display:block;width:100%;aspect-ratio:16/9;background:#151515}.clip-info{padding:var(--space-4)}.clip-top{display:flex;justify-content:space-between;gap:10px;align-items:center}.clip-time{font-weight:var(--weight-medium);font-size:var(--text-md)}.clip-camera{font-size:var(--text-xs);padding:4px 9px;background:var(--color-theme-subtle);color:var(--color-primary);border-radius:var(--radius-full);text-transform:capitalize}.clip-meta{font-size:var(--text-sm);color:var(--color-text-muted);margin-top:6px}.empty{background:var(--color-surface);border:1px dashed var(--color-border);border-radius:var(--radius-lg);padding:var(--space-7) var(--space-5);text-align:center;color:var(--color-text-muted);grid-column:1/-1}.footnote{font-size:var(--text-sm);color:var(--color-text-muted);margin-top:var(--space-7)}:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}@media(max-width:650px){.site-header{padding:0 18px}main{padding:var(--space-6) var(--space-4)}h1{font-size:var(--text-xl)}.heading{align-items:start}.status{margin-top:24px}.toolbar{align-items:stretch}.days{width:100%}.days input{flex:1;min-width:0}.filters{flex-wrap:wrap}.clips{grid-template-columns:1fr}}