/* Reset & Base */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, sans-serif; display: grid; grid-template-columns: 300px 1fr; grid-template-rows: auto 1fr; height: 100vh; color: #333; background: #f9fafb; }

/* Header */
header { grid-column: 1 / span 2; background: #2d6cdf; color: #fff; padding: 2.5rem; display: flex; align-items: center; justify-content: flex-start; }
header .brand { display: flex; align-items: center; gap: 0.75rem; }
header .logo { width: 90px; height: 90px; object-fit: contain; border-radius: 4px; }
header .header-text h1 { font-size: 1.2rem; margin-bottom: 0.2rem; }
header .header-text p { font-style:italic; font-size:0.9rem; margin: 0; }

/* Sidebar */
#left { border-right: 1px solid #ddd; padding: 1rem; overflow-y: auto; background: #fff; }
#left h2 { margin-bottom: 0.5rem; }
select { width: 100%; padding: 0.4rem; margin-bottom: 1rem; border: 1px solid #ccc; border-radius: 4px; }

/* Calendar */
#calendar { margin-bottom: 1rem; }
#calendar div { text-align: center; padding: 0.5rem; }
#calendar button { padding: 0.3rem 0.6rem; margin: 0 0.2rem; background: #2d6cdf; color: #fff; border: none; border-radius: 4px; cursor: pointer; }
#calendar button:hover { background: #1e4db7; }

/* Titles list */
#titles h3 { margin-top: 1rem; color: #2d6cdf; display: flex; align-items: center; gap: 0.5rem; }
#titles ul { list-style: none; padding-left: 0; }
#titles li { cursor: pointer; padding: 0.3rem 0; border-bottom: 1px solid #eee; }
#titles li:hover { background: #f0f0f0; }

/* Right content */
#right { padding: 1rem; overflow-y: auto; background: #fff; }
#daily-title { font-size: 1.5rem; margin-bottom: 0.5rem; font-weight: bold; }
#daily-content { white-space: pre-wrap; line-height: 1.5; font-size: 1rem; color: #444; }