*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --blue: #cc0000; --blue-dark: #a30000; --blue-light: #fff0f0;
  --green: #48bb78; --orange: #ed8936; --purple: #9f7aea; --red: #e53e3e;
  --gray-100: #f7fafc; --gray-200: #edf2f7; --gray-300: #e2e8f0;
  --gray-500: #a0aec0; --gray-600: #718096; --gray-700: #4a5568; --gray-900: #1a202c;
  --radius: 10px; --shadow: 0 1px 4px rgba(0,0,0,0.07);
}

body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
       background: var(--gray-100); color: var(--gray-900); font-size: 15px; }

/* Layout */
header { background: var(--blue-dark); color: #fff; padding: 0.9rem 2rem;
         display: flex; align-items: center; justify-content: space-between; }
header h1 { font-size: 1.15rem; }

.tabs { display: flex; border-bottom: 2px solid var(--gray-300); background: #fff; padding: 0 2rem; }
.tab  { padding: 0.85rem 1.3rem; cursor: pointer; font-weight: 600; color: var(--gray-600);
        border-bottom: 2px solid transparent; margin-bottom: -2px; font-size: 0.88rem; transition: color .15s; }
.tab.active { color: var(--blue); border-bottom-color: var(--blue); }

.panel { display: none; padding: 2rem; max-width: 1100px; margin: 0 auto; }
.panel.active { display: block; }
.panel.board-mode { max-width: none; }

/* Buttons */
.btn { padding: 0.5rem 1rem; border-radius: 7px; border: none; cursor: pointer;
       font-weight: 600; font-size: 0.84rem; transition: background .15s; }
.btn-primary  { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-dark); }
.btn-sm  { padding: 0.28rem 0.65rem; font-size: 0.76rem; }
.btn-danger { background: #fed7d7; color: #c53030; }
.btn-danger:hover { background: #feb2b2; }
.btn-ghost  { background: var(--gray-200); color: var(--gray-700); }
.btn-ghost:hover { background: var(--gray-300); }
.logout-btn { background: rgba(255,255,255,.18); border: none; color: #fff;
              padding: 0.35rem 0.9rem; border-radius: 6px; cursor: pointer; font-size: 0.83rem; }

/* Cards */
.card { background: #fff; border-radius: var(--radius); padding: 1rem 1.2rem;
        box-shadow: var(--shadow); }

/* Todo cards */
.todo-card { display: flex; align-items: flex-start; gap: 0.9rem;
             border-left: 4px solid var(--gray-300); }
.todo-card.done { opacity: 0.45; }
.todo-check { width: 18px; height: 18px; cursor: pointer; margin-top: 3px; flex-shrink: 0; }
.todo-body  { flex: 1; min-width: 0; }
.todo-title { font-weight: 600; }
.todo-meta  { font-size: 0.77rem; color: var(--gray-600); margin-top: 0.2rem; }
.todo-desc  { font-size: 0.82rem; color: var(--gray-600); margin-top: 0.25rem; }
.todo-actions { display: flex; gap: 0.35rem; flex-shrink: 0; }

.badge { display: inline-block; padding: .12rem .45rem; border-radius: 20px;
         font-size: 0.71rem; font-weight: 700; margin-right: .25rem; }
.badge-high   { background: #fed7d7; color: #c53030; }
.badge-medium { background: #feebcb; color: #c05621; }
.badge-low    { background: #e6fffa; color: #276749; }

/* Filter chips */
.filter-bar { display: flex; gap: 0.45rem; flex-wrap: wrap; margin-bottom: 1rem; }
.chip { padding: .28rem .75rem; border-radius: 20px; border: 1.5px solid var(--gray-300);
        background: #fff; cursor: pointer; font-size: 0.79rem; font-weight: 600;
        color: var(--gray-600); transition: all .15s; }
.chip.active { background: var(--blue-light); border-color: #90cdf4; color: var(--blue); }

/* Section header */
.sec-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.sec-header h2 { font-size: 1.05rem; }

/* Todo list spacing */
.todo-list { display: flex; flex-direction: column; gap: 0.55rem; }

/* Empty state */
.empty { color: var(--gray-600); font-size: 0.88rem; padding: 0.5rem 0; }

/* Modal */
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.38);
                 z-index: 100; align-items: center; justify-content: center; }
.modal-overlay.open { display: flex; }
.modal { background: #fff; border-radius: 12px; padding: 1.8rem; width: 460px; max-width: 95vw;
         max-height: 90vh; overflow-y: auto; }
.modal h3 { font-size: 1.05rem; margin-bottom: 1.1rem; }
.form-group { margin-bottom: 0.9rem; }
.form-group label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--gray-700); margin-bottom: .3rem; }
.form-group input, .form-group select, .form-group textarea {
  width: 100%; padding: .55rem .75rem; border: 1.5px solid var(--gray-300);
  border-radius: 7px; font-size: 0.9rem; font-family: inherit; outline: none; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--blue); }
.form-group textarea { resize: vertical; min-height: 72px; }
.modal-footer { display: flex; justify-content: flex-end; gap: 0.55rem; margin-top: 1.2rem; }

/* Note cards */
.note-card { background: #fff; border-radius: var(--radius); padding: 1rem 1.2rem;
             box-shadow: var(--shadow); margin-bottom: 0.55rem; }
.note-date  { font-weight: 700; font-size: 0.85rem; margin-bottom: 0.4rem; }
.note-text  { font-size: 0.87rem; white-space: pre-wrap; }
.note-actions-label { font-size: 0.8rem; color: var(--gray-600); margin-top: 0.4rem; }

/* Student card */
.student-card { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.student-name { font-weight: 600; }
.student-meta { font-size: 0.78rem; color: var(--gray-600); margin-top: 0.15rem; }

/* Login page */
.login-wrap { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.login-card { background: #fff; border-radius: 12px; padding: 2.4rem; width: 340px;
              box-shadow: 0 4px 24px rgba(0,0,0,.09); }
.login-card h1 { font-size: 1.35rem; margin-bottom: .3rem; }
.login-sub  { color: var(--gray-600); font-size: .88rem; margin-bottom: 1.8rem; }
.login-card input { width: 100%; padding: .62rem .85rem; border: 1.5px solid var(--gray-300);
                    border-radius: 8px; font-size: .95rem; outline: none; margin-bottom: .7rem; }
.login-card input:focus { border-color: var(--blue); }
.login-card .btn { width: 100%; padding: .68rem; font-size: .97rem; }
.error-msg { color: var(--red); font-size: .83rem; margin-top: .7rem; min-height: 1.1rem; }

/* View toggle */
.view-toggle { display: flex; background: var(--gray-200); border-radius: 7px; padding: 2px; gap: 2px; }
.view-btn { padding: .22rem .7rem; border-radius: 5px; cursor: pointer; font-size: .8rem;
            font-weight: 600; color: var(--gray-600); transition: all .12s; user-select: none; }
.view-btn.active { background: #fff; color: var(--blue); box-shadow: 0 1px 3px rgba(0,0,0,.1); }

/* Today section headers */
.section-label { font-size: .8rem; font-weight: 700; color: var(--gray-600);
                 text-transform: uppercase; letter-spacing: .05em; margin: 1.2rem 0 .5rem; }
.section-label:first-child { margin-top: 0; }

/* Board view */
.board-outer { overflow-x: visible; }
.board-wrap  { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; align-items: start; }
.board-col   { width: auto; }
.board-col-header { font-weight: 700; font-size: .84rem; padding: .55rem .85rem;
                    border-radius: 8px 8px 0 0; color: #fff;
                    display: flex; justify-content: space-between; align-items: center; }
.board-col-count { background: rgba(255,255,255,.3); border-radius: 20px;
                   padding: .05rem .45rem; font-size: .74rem; }
.board-cards { display: flex; flex-direction: column; gap: .4rem; padding: .5rem;
               background: var(--gray-100); border-radius: 0 0 8px 8px; min-height: 70px; }
.board-card  { background: #fff; border-radius: 7px; padding: .65rem .85rem;
               box-shadow: var(--shadow); cursor: pointer; border-left: 3px solid var(--blue); }
.board-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.board-col.drag-over { outline: 2px dashed var(--blue); border-radius: 8px; background: var(--blue-light); }
.board-card.done { opacity: .4; }
.board-card-top   { display: flex; align-items: center; gap: .5rem; margin-bottom: .3rem; }
.board-card-title { font-weight: 600; font-size: .84rem; line-height: 1.35; }
.board-card-meta  { font-size: .73rem; color: var(--gray-600); margin-top: .2rem; }

/* Group badge */
.group-badge { display: inline-block; padding: .1rem .45rem; border-radius: 4px;
               font-size: .72rem; font-weight: 700; margin-left: .35rem; }
.group-badge.phd      { background: #e6fffa; color: #2c7a7b; }
.group-badge.undergrad{ background: #fffbeb; color: #b7791f; }
.group-badge.other    { background: var(--gray-200); color: var(--gray-700); }

/* Google Calendar link */
.gcal-link { display: inline-flex; align-items: center; gap: .25rem; margin-top: .4rem;
             font-size: .76rem; color: var(--blue); text-decoration: none; }
.gcal-link:hover { text-decoration: underline; }

/* Check row */
.check-row { display: flex; align-items: center; gap: .5rem; margin-top: .55rem; }
.check-row label { font-size: .84rem; cursor: pointer; color: var(--gray-700); }

/* Project list in modal */
.proj-row { display: flex; justify-content: space-between; align-items: center;
            padding: .4rem 0; border-bottom: 1px solid var(--gray-200); }
.proj-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: .5rem; }

/* Tags */
.tag-pill { display: inline-block; padding: .08rem .45rem; border-radius: 20px;
            font-size: .7rem; font-weight: 600; margin-right: .2rem; }
.tag-bar  { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center;
            margin-bottom: .8rem; }
.tag-bar-label { font-size: .75rem; font-weight: 600; color: var(--gray-600); flex-shrink: 0; }

/* Month view */
.panel.month-mode { max-width: none; }
.month-nav  { display: flex; align-items: center; gap: .6rem; margin-bottom: .9rem; }
.month-title{ font-weight: 700; font-size: 1rem; min-width: 160px; text-align: center; }
.month-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; background: var(--gray-200); border: 1px solid var(--gray-200); border-radius: 8px; overflow: hidden; }
.month-day-name { background: var(--gray-100); font-size: .74rem; font-weight: 700; color: var(--gray-600); text-align: center; padding: .3rem 0; }
.month-cell { background: #fff; min-height: 90px; padding: .3rem; position: relative; }
.month-cell.month-empty { background: var(--gray-100); }
.month-cell.month-today { background: var(--blue-light); }
.month-day-num { font-size: .8rem; font-weight: 600; color: var(--gray-600); margin-bottom: .2rem; }
.month-day-num.today-num { color: var(--blue); font-weight: 800; }
.month-events { display: flex; flex-direction: column; gap: 2px; }
.month-event { font-size: .71rem; padding: .1rem .3rem; border-left: 2px solid var(--gray-300);
               border-radius: 2px; background: var(--gray-100); cursor: pointer; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.month-event:hover { opacity: .8; }
.month-event.done { opacity: .45; }
.month-more { font-size: .68rem; color: var(--gray-500); padding: .1rem .2rem; }

/* Print */
@media print {
  header, .tabs, .sec-header > div:last-child, .filter-bar, .tag-bar,
  .view-toggle, .month-nav, .todo-actions, .modal-overlay, .no-print { display: none !important; }
  .panel { padding: .5rem; max-width: none; }
  body { background: #fff; font-size: 12px; }
  .week-day, .month-cell { break-inside: avoid; }
}

/* Week view */
.week-view { display: grid; grid-template-columns: repeat(7, 1fr); gap: .55rem; }
.week-day  { background: #fff; border-radius: 8px; box-shadow: var(--shadow); min-width: 0; }
.week-day.week-today { border: 2px solid var(--blue); }
.week-day-header { padding: .45rem .7rem; font-weight: 700; font-size: .82rem;
                   border-bottom: 1px solid var(--gray-200);
                   display: flex; justify-content: space-between; align-items: center; }
.week-date  { font-size: .74rem; color: var(--gray-600); font-weight: 400; }
.week-cards { padding: .45rem; display: flex; flex-direction: column; gap: .3rem; min-height: 60px; }
.week-card  { padding: .3rem .45rem; border-radius: 5px; border-left: 3px solid var(--gray-300);
              cursor: pointer; font-size: .79rem; line-height: 1.35; }
.week-card:hover { background: var(--gray-100); }
.week-card.done { opacity: .45; }
.week-empty { font-size: .75rem; color: var(--gray-500); padding: .2rem; }