:root {
  --bg: #f4f5f7;
  --panel: #ffffff;
  --ink: #16181d;
  --muted: #6b7280;
  --line: #e3e6ea;
  --talk: #2563eb;
  --talk-bg: #e8efff;
  --workshop: #b8430e;
  --workshop-bg: #fdebe0;
  --accent: #111827;
  --shadow: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.1);
  --radius: 10px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

/* Topbar */
.topbar {
  position: sticky; top: 0; z-index: 30;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.topbar-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding: 14px 20px;
}
.brand h1 { font-size: 18px; margin: 0; letter-spacing: -.01em; }
.brand .subtitle { font-size: 13px; color: var(--muted); }
.controls { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
#search {
  width: 240px; max-width: 60vw;
  padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px;
  font-size: 14px; background: var(--panel); outline: none;
}
#search:focus { border-color: var(--talk); box-shadow: 0 0 0 3px var(--talk-bg); }

.seg { display: inline-flex; background: #eceef1; border-radius: 8px; padding: 3px; }
.seg button {
  border: 0; background: transparent; cursor: pointer;
  padding: 6px 12px; font-size: 13px; font-weight: 600; color: var(--muted);
  border-radius: 6px;
}
.seg button.active { background: var(--panel); color: var(--ink); box-shadow: var(--shadow); }

/* Liked button in topbar */
.likes-btn {
  border: 1px solid var(--line); background: var(--panel); cursor: pointer;
  padding: 8px 12px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--ink);
  display: inline-flex; align-items: center; gap: 6px;
}
.likes-btn:hover { border-color: #e0556e; color: #e0556e; }
.likes-btn span {
  background: #ffe1e7; color: #d6335a; font-size: 11px; font-weight: 700;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
}

.days {
  display: flex; gap: 6px; padding: 0 20px 12px; flex-wrap: wrap;
}
.days button {
  border: 1px solid var(--line); background: var(--panel); cursor: pointer;
  padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--muted);
}
.days button.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Main */
main { padding: 16px 20px 60px; }

/* ---------- GRID VIEW ---------- */
.grid-scroll { overflow: auto; max-height: calc(100vh - 195px); border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.grid {
  display: grid;
  position: relative;
}
.grid-corner {
  position: sticky; left: 0; top: 0; z-index: 6;
  background: var(--panel); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.col-head {
  position: sticky; top: 0; z-index: 5;
  background: var(--panel);
  border-bottom: 1px solid var(--line); border-right: 1px solid var(--line);
  padding: 8px 10px; font-size: 12px; font-weight: 700; text-align: center;
  display: flex; align-items: center; justify-content: center; min-height: 40px;
}
.time-label {
  position: sticky; left: 0; z-index: 4;
  background: var(--panel); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  font-size: 11px; color: var(--muted); padding: 4px 8px; text-align: right;
}
.grid-cellbg { border-right: 1px solid #f0f2f4; border-bottom: 1px solid #f0f2f4; }

.ev {
  position: relative;
  margin: 2px; padding: 6px 8px; border-radius: 8px; overflow: hidden;
  cursor: pointer; border: 1px solid transparent;
  font-size: 12px; line-height: 1.25;
  display: flex; flex-direction: column; gap: 2px;
}
.ev:hover { filter: brightness(.97); border-color: rgba(0,0,0,.12); }
.ev.talk { background: var(--talk-bg); }
.ev.workshop { background: var(--workshop-bg); }
.ev .ev-time { font-size: 10px; font-weight: 700; opacity: .8; }
.ev.talk .ev-time { color: var(--talk); }
.ev.workshop .ev-time { color: var(--workshop); }
.ev .ev-title { font-weight: 600; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ev .ev-sp { font-size: 11px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ev.dim { opacity: .18; pointer-events: none; }

/* Compact layout for short (e.g. 30-min) sessions so the title stays readable */
.ev.short { padding: 4px 8px; gap: 1px; }
.ev.short .ev-time { font-size: 10px; }
.ev.short .ev-title { -webkit-line-clamp: 4; font-size: 11.5px; line-height: 1.2; }
.ev.short .ev-sp { display: none; }

/* Like button on events & cards */
.like-btn {
  position: absolute; top: 4px; right: 4px; z-index: 2;
  border: 0; background: transparent; cursor: pointer; line-height: 1;
  font-size: 15px; color: #b9c0c9; padding: 2px;
}
.like-btn:hover { color: #e0556e; }
.like-btn.liked { color: #e0556e; }
.ev .like-btn { font-size: 13px; top: 2px; right: 2px; }
.ev .ev-time, .ev .ev-title { padding-right: 16px; }
.card { position: relative; }
.card .c-time { padding-right: 20px; }

/* Time-conflict with a liked session */
.ev.conflict { opacity: .38; filter: grayscale(.85); }
.ev.conflict .ev-title { text-decoration: line-through; }
.card.conflict { opacity: .5; filter: grayscale(.8); }
.card.conflict .c-title { text-decoration: line-through; }

/* ---------- LIST VIEW ---------- */
.list { display: flex; flex-direction: column; gap: 22px; }
.slot-group h3 { margin: 0 0 8px; font-size: 13px; color: var(--muted); font-weight: 700; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px; cursor: pointer; box-shadow: var(--shadow);
  border-left: 4px solid var(--line);
  display: flex; flex-direction: column; gap: 6px;
}
.card.talk { border-left-color: var(--talk); }
.card.workshop { border-left-color: var(--workshop); }
.card:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(16,24,40,.1); }
.card .c-time { font-size: 12px; font-weight: 700; color: var(--muted); }
.card .c-title { font-size: 15px; font-weight: 650; line-height: 1.3; }
.card .c-sp { font-size: 13px; color: var(--muted); }
.card .c-foot { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 2px; }
.pill { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.pill.talk { background: var(--talk-bg); color: var(--talk); }
.pill.workshop { background: var(--workshop-bg); color: var(--workshop); }
.pill.reserve { background: #fff3e0; color: #b25c00; }
.stage-pill { font-size: 11px; color: var(--muted); background: #eef0f3; padding: 2px 8px; border-radius: 999px; }

/* Seat-reservation markers */
.reserve-flag {
  position: absolute; top: 2px; right: 20px; z-index: 2;
  font-size: 12px; line-height: 1; pointer-events: none;
}
.ev.short .reserve-flag { top: 2px; right: 18px; }
.d-reserve {
  margin: 4px 0 0; padding: 8px 12px; border-radius: 8px;
  background: #fff3e0; color: #b25c00; font-size: 13px; font-weight: 600;
}

.empty { text-align: center; color: var(--muted); padding: 60px 0; font-size: 14px; }

/* ---------- DIALOG ---------- */
dialog#detail {
  border: 0; border-radius: 14px; padding: 0; max-width: 560px; width: 92vw;
  box-shadow: 0 20px 60px rgba(16,24,40,.3);
}
dialog#detail::backdrop { background: rgba(16,24,40,.45); backdrop-filter: blur(2px); }
.detail-card { padding: 24px; position: relative; display: flex; flex-direction: column; gap: 10px; }
.detail-card .close {
  position: absolute; top: 12px; right: 12px; border: 0; background: #eef0f3;
  width: 30px; height: 30px; border-radius: 50%; font-size: 18px; cursor: pointer; color: var(--muted);
}
.badge { align-self: flex-start; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.badge.talk { background: var(--talk-bg); color: var(--talk); }
.badge.workshop { background: var(--workshop-bg); color: var(--workshop); }
#d-title { margin: 2px 0 0; font-size: 20px; line-height: 1.3; padding-right: 30px; }
.d-meta { margin: 0; font-size: 13px; color: var(--muted); }
.d-speakers { margin: 0; font-size: 14px; }
.d-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.d-tags span { font-size: 11px; background: #eef0f3; color: var(--muted); padding: 2px 8px; border-radius: 999px; }
.d-desc { font-size: 14px; line-height: 1.55; color: #2b2f36; max-height: 40vh; overflow: auto; white-space: pre-wrap; }
.d-link {
  align-self: flex-start; margin-top: 4px; text-decoration: none; font-weight: 600; font-size: 14px;
  background: var(--accent); color: #fff; padding: 9px 16px; border-radius: 8px;
}
.d-link:hover { opacity: .9; }

.d-foot { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.d-like {
  border: 1px solid var(--line); background: var(--panel); cursor: pointer;
  font-size: 14px; font-weight: 600; color: var(--ink); padding: 9px 16px; border-radius: 8px;
}
.d-like:hover { border-color: #e0556e; color: #e0556e; }
.d-like.liked { background: #ffe1e7; border-color: #e0556e; color: #d6335a; }

/* Liked list dialog */
dialog#likes {
  border: 0; border-radius: 14px; padding: 0; max-width: 520px; width: 92vw;
  box-shadow: 0 20px 60px rgba(16,24,40,.3);
}
dialog#likes::backdrop { background: rgba(16,24,40,.45); backdrop-filter: blur(2px); }
.likes-card { padding: 24px; position: relative; display: flex; flex-direction: column; gap: 12px; }
.likes-card .close {
  position: absolute; top: 12px; right: 12px; border: 0; background: #eef0f3;
  width: 30px; height: 30px; border-radius: 50%; font-size: 18px; cursor: pointer; color: var(--muted);
}
.likes-card h2 { margin: 0; font-size: 20px; padding-right: 30px; }
.likes-meta { margin: 0; font-size: 14px; color: var(--muted); }
.likes-list { display: flex; flex-direction: column; gap: 8px; max-height: 50vh; overflow: auto; }
.likes-item {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px;
}
.likes-item-main { flex: 1; min-width: 0; }
.likes-item-title { font-size: 14px; font-weight: 600; }
.likes-item-meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
.likes-item-remove {
  border: 0; background: #eef0f3; color: var(--muted); cursor: pointer;
  width: 26px; height: 26px; border-radius: 50%; font-size: 16px; flex-shrink: 0;
}
.likes-item-remove:hover { background: #ffe1e7; color: #d6335a; }
.likes-actions { display: flex; gap: 10px; margin-top: 4px; }
.likes-copy {
  background: var(--accent); color: #fff; border: 0; cursor: pointer;
  font-size: 14px; font-weight: 600; padding: 9px 16px; border-radius: 8px;
}
.likes-copy:hover { opacity: .9; }
.likes-reserve {
  background: #b25c00; color: #fff; border: 0; cursor: pointer;
  font-size: 14px; font-weight: 600; padding: 9px 16px; border-radius: 8px;
}
.likes-reserve:hover { opacity: .9; }
.likes-ical {
  background: var(--panel); color: var(--accent); border: 1px solid var(--accent); cursor: pointer;
  font-size: 14px; font-weight: 600; padding: 9px 16px; border-radius: 8px;
}
.likes-ical:hover { background: var(--accent); color: #fff; }
.likes-clear {
  background: var(--panel); color: var(--muted); border: 1px solid var(--line); cursor: pointer;
  font-size: 14px; font-weight: 600; padding: 9px 16px; border-radius: 8px;
}
.likes-clear:hover { border-color: #d6335a; color: #d6335a; }
.likes-import { display: flex; flex-direction: column; gap: 8px; }
.likes-import textarea {
  width: 100%; box-sizing: border-box; resize: vertical; min-height: 90px;
  border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px;
  font-family: inherit; font-size: 13px; color: var(--text); background: var(--panel);
}
.likes-import textarea:focus { outline: none; border-color: var(--accent); }
.likes-import-status { margin: 0; font-size: 13px; color: var(--muted); }
.likes-import-status.error { color: #d6335a; }
.likes-import-actions { display: flex; gap: 10px; }

@media (max-width: 640px) {
  .topbar-inner { padding: 12px 14px; }
  main { padding: 12px 14px 50px; }
  #search { width: 100%; max-width: none; }
}