:root {
  --bg: #fff;
  --bg-app: #fff;
  --line: #dadce0;
  --line-soft: #e8eaed;
  --text: #3c4043;
  --text-strong: #202124;
  --muted: #70757a;
  --blue: #1a73e8;
  --blue-soft: #e8f0fe;
  --blue-hover: #174ea6;
  --chip: #d2e3fc;
  --sidebar: 256px;
  --top: 64px;
  --hour: 48px;
  --shadow: 0 1px 2px rgba(60, 64, 67, .3), 0 1px 3px 1px rgba(60, 64, 67, .15);
  --shadow-pop: 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12), 0 5px 5px -3px rgba(0,0,0,.2);
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg-app);
  color: var(--text);
  font-family: Roboto, Arial, sans-serif;
  font-size: 14px;
  overflow: hidden;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}
button { cursor: pointer; }
.icon-btn {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.icon-btn:hover { background: #f1f3f4; }
.text-btn {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 4px;
  height: 36px;
  padding: 0 16px;
  color: var(--text-strong);
}
.text-btn:hover { background: #f8f9fa; }

.login-pop {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  width: min(520px, calc(100vw - 24px));
  background: #fff;
  border-radius: 8px;
  box-shadow: var(--shadow-pop);
  padding: 12px 16px;
}
.login-pop form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.login-pop strong { margin-right: 4px; }
.login-pop input {
  border: 1px solid var(--line);
  border-radius: 4px;
  height: 36px;
  padding: 0 10px;
  min-width: 140px;
  flex: 1;
  outline: none;
}
.login-pop input:focus { border-color: var(--blue); }
.login-error {
  flex: 1 1 100%;
  margin: 0;
  color: #c5221f;
  font-size: 13px;
}
body.locked .app,
body.locked .topbar .search-wrap,
body.locked .topbar .text-btn,
body.locked .topbar .nav-arrows,
body.locked .topbar .period-title,
body.locked .topbar .view-menu {
  pointer-events: none;
  filter: blur(4px);
  user-select: none;
}
body.locked::after {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(32, 33, 36, .28);
  z-index: 40;
}
.account {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 8px;
  color: var(--muted);
}
.topbar {
  height: var(--top);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px 0 8px;
  border-bottom: 1px solid var(--line);
  background: #fff;
  position: relative;
  z-index: 5;
}
.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--muted);
  min-width: 140px;
  margin-right: 8px;
}
.brand-name { font-size: 22px; font-weight: 400; letter-spacing: 0; }
.cal-icon {
  width: 40px;
  height: 40px;
  border: 2px solid #1a73e8;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.cal-icon-top { height: 10px; background: #d93025; }
.cal-icon-num {
  flex: 1;
  display: grid;
  place-items: center;
  color: #1a73e8;
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
}

.search-wrap {
  position: relative;
  flex: 0 1 420px;
  display: flex;
  align-items: center;
  background: #e9eef6;
  border-radius: 8px;
  height: 46px;
  padding: 0 12px;
  margin: 0 16px;
  color: var(--muted);
}
.search-wrap input {
  border: 0;
  background: transparent;
  outline: none;
  width: 100%;
  margin-left: 8px;
  color: var(--text-strong);
}
.search-results {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  background: #fff;
  border-radius: 8px;
  box-shadow: var(--shadow-pop);
  max-height: 360px;
  overflow: auto;
  padding: 8px 0;
  z-index: 20;
}
.search-results button {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 10px 16px;
}
.search-results button:hover { background: #f1f3f4; }
.search-results .meta { color: var(--muted); font-size: 12px; margin-top: 2px; }

.nav-arrows { display: flex; }
.period-title {
  margin: 0 8px;
  font-size: 22px;
  font-weight: 400;
  color: var(--text);
  flex: 1;
  white-space: nowrap;
}
.view-menu { position: relative; }
.view-trigger {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-width: 108px;
  justify-content: space-between;
}
.view-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  background: #fff;
  border-radius: 4px;
  box-shadow: var(--shadow-pop);
  min-width: 140px;
  padding: 8px 0;
  z-index: 20;
}
.view-dropdown button {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 10px 16px;
}
.view-dropdown button:hover,
.view-dropdown button.active { background: var(--blue-soft); color: var(--blue); }

.app {
  display: flex;
  height: calc(100vh - var(--top));
}
.sidebar {
  width: var(--sidebar);
  flex: 0 0 var(--sidebar);
  border-right: 1px solid transparent;
  padding: 16px 12px 24px 16px;
  overflow: auto;
}
.sidebar.collapsed { display: none; }
.create-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 56px;
  padding: 0 24px 0 16px;
  border: 0;
  border-radius: 28px;
  background: #fff;
  box-shadow: var(--shadow);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-strong);
  margin: 0 0 16px 4px;
}
.create-btn:hover { box-shadow: 0 1px 3px 0 rgba(60,64,67,.3), 0 4px 8px 3px rgba(60,64,67,.15); background: #f6fafe; }

.mini-cal { padding: 4px 4px 16px; user-select: none; }
.mini-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px 8px;
  color: var(--text-strong);
  font-weight: 500;
}
.mini-head .nav { display: flex; }
.mini-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  gap: 0;
}
.mini-grid .dow {
  color: var(--muted);
  font-size: 11px;
  padding: 6px 0;
}
.mini-grid button {
  border: 0;
  background: transparent;
  height: 28px;
  width: 28px;
  margin: 1px auto;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 10px;
  color: var(--text);
}
.mini-grid button.out { color: #bdc1c6; }
.mini-grid button.today { background: var(--blue); color: #fff; }
.mini-grid button.selected:not(.today) { background: var(--blue-soft); color: var(--blue); }
.mini-grid button:hover:not(.today) { background: #f1f3f4; }

.cal-list { padding: 8px 4px; }
.cal-list h2 {
  margin: 0 8px 8px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--muted);
}
.cal-list ul { list-style: none; margin: 0; padding: 0; }
.cal-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 4px;
  border-radius: 8px;
}
.cal-list li:hover { background: #f1f3f4; }
.cal-list label {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  cursor: pointer;
}
.cal-list input { accent-color: var(--cal-color, var(--blue)); width: 16px; height: 16px; }
.cal-list .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-list .edit {
  border: 0;
  background: transparent;
  color: var(--muted);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  opacity: 0;
}
.cal-list li:hover .edit { opacity: 1; }
.add-cal {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 8px;
  margin-top: 4px;
}
.add-cal:hover { color: var(--text-strong); }

.main {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #fff;
}

.month {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.month-dows, .month-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.month-dows {
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
}
.month-dows div { padding: 8px 10px 4px; }
.month-grid { flex: 1; min-height: 0; grid-template-rows: repeat(6, 1fr); }
.month-cell {
  border-right: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  min-height: 0;
  padding: 4px 4px 2px;
  overflow: hidden;
  cursor: pointer;
}
.month-cell:nth-child(7n) { border-right: 0; }
.month-cell.out { background: #f8f9fa; }
.month-cell.today .num {
  background: var(--blue);
  color: #fff;
}
.month-cell .num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: 0 auto 4px;
  font-size: 12px;
}
.month-cell.selected .num:not(.today-num) { background: var(--blue-soft); color: var(--blue); }
.ev-chip {
  display: block;
  width: 100%;
  border: 0;
  text-align: left;
  border-radius: 4px;
  padding: 1px 6px;
  margin: 0 0 2px;
  font-size: 12px;
  color: #fff;
  background: var(--ev);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.more-btn {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  padding: 2px 6px;
}

.week, .day-view {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.week-head {
  display: grid;
  border-bottom: 1px solid var(--line);
}
.week-head.cols-8 { grid-template-columns: 56px repeat(7, 1fr); }
.week-head.cols-2 { grid-template-columns: 56px 1fr; }
.week-head .hcell {
  text-align: center;
  padding: 8px 4px 4px;
}
.week-head .dow { color: var(--muted); font-size: 11px; text-transform: uppercase; }
.week-head .dnum {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: 2px auto 0;
  font-size: 20px;
}
.week-head .today .dnum { background: var(--blue); color: #fff; }
.week-head .today .dow { color: var(--blue); font-weight: 500; }
.allday-row {
  display: grid;
  min-height: 28px;
  border-bottom: 1px solid var(--line);
}
.allday-row.cols-8 { grid-template-columns: 56px repeat(7, 1fr); }
.allday-row.cols-2 { grid-template-columns: 56px 1fr; }
.allday-row .acell {
  border-left: 1px solid var(--line-soft);
  padding: 2px;
  min-height: 28px;
}
.time-scroll {
  flex: 1;
  overflow: auto;
  position: relative;
}
.time-grid {
  display: grid;
  position: relative;
  min-height: calc(24 * var(--hour));
}
.time-grid.cols-8 { grid-template-columns: 56px repeat(7, 1fr); }
.time-grid.cols-2 { grid-template-columns: 56px 1fr; }
.gutter {
  color: var(--muted);
  font-size: 10px;
  position: relative;
}
.gutter span {
  position: absolute;
  right: 8px;
  transform: translateY(-50%);
}
.day-col {
  border-left: 1px solid var(--line-soft);
  position: relative;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent,
    transparent calc(var(--hour) - 1px),
    var(--line-soft) calc(var(--hour) - 1px),
    var(--line-soft) var(--hour)
  );
}
.day-col.today { background-color: #f8fbff; }
.hour-slot {
  position: absolute;
  left: 0;
  right: 0;
  height: var(--hour);
  cursor: pointer;
}
.now-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: #ea4335;
  z-index: 3;
  pointer-events: none;
}
.now-line::before {
  content: "";
  position: absolute;
  left: -5px;
  top: -4px;
  width: 10px;
  height: 10px;
  background: #ea4335;
  border-radius: 50%;
}
.ev-block {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  border: 0;
  border-radius: 4px;
  padding: 3px 6px 4px;
  color: #fff;
  background: var(--ev);
  overflow: hidden;
  text-align: left;
  z-index: 2;
  font-size: 12px;
  line-height: 1.2;
  appearance: none;
}
.ev-block .t,
.ev-block .s {
  display: block;
  margin: 0;
  width: 100%;
  text-align: left;
}
.ev-block .t {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ev-block .s { opacity: .9; font-size: 11px; }

.agenda-list {
  flex: 1;
  overflow: auto;
  padding: 8px 24px 40px;
}
.agenda-day { display: grid; grid-template-columns: 88px 1fr; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line-soft); }
.agenda-day .when { color: var(--muted); }
.agenda-day .when.today { color: var(--blue); }
.agenda-day .date-num { font-size: 22px; line-height: 1; }
.agenda-item {
  display: flex;
  gap: 12px;
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 8px 0;
}
.agenda-item .meta { color: var(--muted); font-size: 12px; margin-top: 2px; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ev); margin-top: 5px; flex: 0 0 10px; }
.empty { color: var(--muted); padding: 40px 24px; }

.popover {
  position: fixed;
  width: 360px;
  max-width: calc(100vw - 24px);
  background: #fff;
  border-radius: 8px;
  box-shadow: var(--shadow-pop);
  z-index: 40;
  padding: 8px 8px 16px;
}
.popover header {
  display: flex;
  justify-content: flex-end;
  gap: 4px;
}
.popover .quick-title {
  border: 0;
  border-bottom: 1px solid var(--line);
  width: calc(100% - 24px);
  margin: 0 12px 12px;
  padding: 8px 0;
  font-size: 18px;
  outline: none;
}
.popover .quick-meta { color: var(--muted); padding: 0 12px 12px; }
.popover .quick-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 0 12px;
}
.ghost {
  border: 0;
  background: transparent;
  color: var(--blue);
  padding: 8px 12px;
  border-radius: 4px;
}
.ghost:hover { background: var(--blue-soft); }

.overlay {
  position: fixed;
  inset: 0;
  background: transparent;
  z-index: 30;
}

.editor {
  border: 0;
  border-radius: 8px;
  width: min(640px, calc(100vw - 24px));
  padding: 0;
  box-shadow: var(--shadow-pop);
}
.editor::backdrop { background: rgba(32, 33, 36, .32); }
.editor header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #f1f3f4;
}
.editor header h2 {
  flex: 1;
  margin: 0;
  font-size: 16px;
  font-weight: 500;
}
.save-btn {
  background: var(--blue);
  color: #fff;
  border: 0;
  border-radius: 4px;
  height: 36px;
  padding: 0 24px;
  font-weight: 500;
}
.save-btn:hover { background: var(--blue-hover); }
.editor-body { padding: 8px 24px 24px; }
.title-field input {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--line);
  font-size: 22px;
  padding: 12px 0;
  outline: none;
}
.title-field input:focus { border-bottom-color: var(--blue); }
.row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 16px;
}
.row > .material-symbols-outlined { color: var(--muted); margin-top: 8px; }
.row input, .row select, .row textarea {
  flex: 1;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 8px 0;
  outline: none;
  width: 100%;
  background: transparent;
}
.row textarea { resize: vertical; }
.row.check { align-items: center; }
.times { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.times label { display: flex; flex-direction: column; gap: 4px; color: var(--muted); font-size: 12px; }
.editor-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 24px;
  gap: 12px;
}
.danger {
  border: 0;
  background: transparent;
  color: #c5221f;
  padding: 8px 12px;
  border-radius: 4px;
}
.danger:hover { background: #fce8e6; }
.scope { color: var(--muted); display: flex; align-items: center; gap: 8px; }

@media (max-width: 860px) {
  .search-wrap { display: none; }
  .sidebar {
    position: fixed;
    left: 0;
    top: var(--top);
    bottom: 0;
    background: #fff;
    z-index: 25;
    box-shadow: var(--shadow-pop);
  }
  .sidebar.collapsed { display: none; }
  .period-title { font-size: 16px; }
  .brand-name { display: none; }
}