:root { --primary: #16a34a; --bg: #f9fafb; --text: #0f172a; --muted: #6b7280; --card: #ffffff; --sidebar: #111827; --border: #e5e7eb; }
* { box-sizing: border-box }
html, body { height: 100% }
body { margin: 0; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }

.layout { display: flex; height: 100vh }
.sidebar { width: 256px; background: var(--sidebar); color: #f3f4f6; display: flex; flex-direction: column }
.sidebar .brand { height: 56px; display:flex; align-items:center; padding: 0 16px; border-bottom: 1px solid #1f2937 }
.sidebar .items { flex:1; overflow:auto; padding: 12px 8px }
.nav-item { display:flex; align-items:center; gap:8px; padding:8px 12px; border-radius:8px; cursor:pointer }
.nav-item:hover { background:#1f2937 }
.nav-item.active { background:#166534 }
.sidebar .footer { border-top:1px solid #1f2937; padding:12px; display:flex; align-items:center; justify-content:space-between }

.main { flex:1; display:flex; flex-direction:column }
.topbar { height:56px; border-bottom:1px solid var(--border); background:#fff; display:flex; align-items:center; justify-content:space-between; padding:0 16px }
.content { padding:16px; overflow:auto }

.grid { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:16px }
@media (max-width: 1024px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grid { grid-template-columns: 1fr; } }
.card { border:1px solid var(--border); background: var(--card); border-radius:12px; padding:16px; display:flex; gap:12px; align-items:flex-start }
.card:hover { box-shadow: 0 2px 10px rgba(0,0,0,0.08) }
.folder-icon { color: var(--primary) }
.muted { color: var(--muted); font-size: 12px }
.title { font-weight: 600; display:flex; align-items:center; justify-content:space-between }
.btn { border:1px solid var(--border); border-radius:8px; padding:6px 10px; background:#fff; cursor:pointer }
.btn-primary { background: var(--primary); color:#fff; border:none }
.modal-backdrop { position:fixed; inset:0; background: rgba(0,0,0,0.5); display:flex; align-items:center; justify-content:center }
.modal { background:#fff; border-radius:10px; width:380px; padding:16px }
.modal .row { margin-bottom:8px }