.clock {
  display: block;
  width: 170px;
  height: 170px;
  margin: 18px auto 0;
}

.date { padding: 8px 10px 20px; }
.side-overview { padding-top: 70px; }
.toolbar nav { gap: 4px; align-items: center; }
.toolbar button { padding: 7px 11px; font-size: 13px; }
.toolbar-separator {
  width: 1px;
  height: 30px;
  background: #b6b2a4;
  margin: 0 6px;
  box-shadow: 1px 0 #fff;
}

.brand-panel,
.hero,
.view-panel {
  background: #fff;
  border: 1px solid var(--line);
  padding: 20px;
  margin-bottom: 14px;
}

.brand-panel {
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand-panel img {
  width: 220px;
  height: 68px;
  object-fit: contain;
  object-position: left center;
  background: #fff;
  border-radius: 6px;
}

.edit-input-categories {
  display: block;
  margin-top: 6px;
  border: 1px solid #b8c4d3;
  border-radius: 5px;
  background: #edf2f7;
  color: #282c69;
  padding: 5px 7px;
  font-size: 11px;
  font-weight: 600;
}

#input-view,
#month-view,
#summary-view {
  max-height: calc(100vh - 365px);
  min-height: 280px;
  overflow-y: scroll;
  scrollbar-gutter: stable;
  scroll-padding-bottom: 96px;
}

#input-groups,
#month-cards,
#summary-content {
  padding-bottom: 96px;
}

#input-view::-webkit-scrollbar,
#month-view::-webkit-scrollbar,
#summary-view::-webkit-scrollbar { width: 14px; }

#input-view::-webkit-scrollbar-thumb,
#month-view::-webkit-scrollbar-thumb,
#summary-view::-webkit-scrollbar-thumb {
  background: #aeb4bd;
  border: 3px solid #f4f6f8;
  border-radius: 8px;
}
.input-header,
.input-row {
  display: grid;
  grid-template-columns: 220px minmax(260px, 1fr) 180px;
  align-items: center;
}

.input-header {
  background: #e9eef5;
  margin: 0 8px 4px;
  padding: 10px 12px;
}

.input-header strong:last-child { text-align: right; padding-right: 10px; }
.input-section { margin: 0 8px; border: 0; }
.input-section h3 { display: none; }
.input-table { display: block; }
.input-row { padding: 0 12px; min-height: 43px; }
.input-row:first-child { align-items: start; }
.input-row > * { padding: 7px 8px; border: 0; }
.input-row:nth-child(even) { background: #f8fafc; }
.input-row:nth-child(even) > * { background: transparent; }
.input-row .main-category { font-size: 13px; font-weight: 650; color: #667085; }
.summary-hint { margin: 0 0 12px; color: #667085; font-size: 13px; }
.summary-click-row { cursor: pointer; }
.summary-click-row:hover td { background: #eef3f9; }
.summary-click-row.selected td { background: #e3e9f8; }
.summary-link { padding: 0; border: 0; background: transparent; color: #282c69; font-weight: 700; text-decoration: underline; }
.summary-detail { margin-top: 20px; border: 1px solid #cfd8e5; background: #f8fafc; padding: 18px; }
.summary-detail-title { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 14px; }
.summary-detail h3 { margin: 0; color: #282c69; }
.summary-exit { background: #282c69; color: #fff; border: 0; border-radius: 4px; min-width: 86px; font-weight: 700; }
.summary-detail-grid { display: grid; grid-template-columns: repeat(3, minmax(220px, 1fr)); gap: 14px; }
.summary-detail-group { background: #fff; border: 1px solid #d9e1ea; }
.summary-detail-group h4 { margin: 0; padding: 10px 12px; background: #282c69; color: #fff; display: flex; justify-content: space-between; }
.summary-detail-group div,
.year-category-list div { display: flex; justify-content: space-between; gap: 20px; padding: 9px 12px; border-bottom: 1px solid #edf0f4; }
.summary-detail-group div:last-child,
.year-category-list div:last-child { border-bottom: 0; }
.year-category-list { max-width: 680px; background: #fff; border: 1px solid #d9e1ea; }
.invite-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0 10px; }
.invite-actions button:first-child { background: #282c69; color: #fff; border: 0; font-weight: 700; }

#manage-subscription { border-color: #282c69; background: #eef2ff; color: #282c69; font-weight: 700; }
#invite-link { font-size: 13px; font-weight: 500; }

@media (max-width: 900px) {
  .input-header,
  .input-row { grid-template-columns: 150px minmax(200px, 1fr) 140px; }
  .toolbar-separator { display: none; }
}