@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root{
  /* layout tokens */
  --shadow:0 24px 70px rgba(0,0,0,.35);
  --radius:18px;

  /* brand */
  --brand:#2f7bff;
  --brand2:#18c7a7;

  /* semantic */
  --locked:#ffb020;
  --task:#7c5cff;

  /* CALENDAR: 30-minute slots, 5am–5pm */
  --slotH:22px;  /* 30 min slot height */
  --dayStart:5;  /* 5:00 */
  --dayEnd:17;   /* 17:00 */

  /* theme defaults (dark) */
  --bg:#0b1020;
  --panel:rgba(255,255,255,.04);
  --panel2:rgba(0,0,0,.16);
  --text:#eaf0ff;
  --muted:rgba(234,240,255,.72);
  --line:rgba(255,255,255,.10);
  --glassTop:rgba(255,255,255,.03);
}

[data-theme="light"]{
  --bg:#f6f8ff;
  --panel:rgba(255,255,255,.85);
  --panel2:rgba(255,255,255,.92);
  --text:#0f172a;
  --muted:rgba(15,23,42,.70);
  --line:rgba(15,23,42,.12);
  --glassTop:rgba(15,23,42,.03);
  --shadow:0 18px 55px rgba(2,6,23,.10);
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:
    radial-gradient(1200px 800px at 20% -10%, rgba(47,123,255,.18), transparent 55%),
    radial-gradient(900px 700px at 110% 20%, rgba(24,199,167,.14), transparent 55%),
    var(--bg);
  color:var(--text);
}

.app{
  height:100%;
  display:grid;
  grid-template-columns: 400px 1fr;
}

.sidebar{
  padding:18px;
  border-right:1px solid var(--line);
  background: linear-gradient(180deg, var(--glassTop), rgba(255,255,255,0));
  overflow:auto;
}

.brand{
  display:flex;
  gap:12px;
  align-items:center;
  padding:10px 12px 18px 12px;
}
.logo{
  width:44px;height:44px;border-radius:14px;
  background: conic-gradient(from 200deg, var(--brand), var(--brand2), var(--task), var(--brand));
  box-shadow:0 18px 50px rgba(0,0,0,.35);
}
.brandTitle{font-weight:900; letter-spacing:.2px}
.brandSub{font-size:12px; color:var(--muted); margin-top:2px}

.panel{
  background: var(--panel);
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding:14px;
  box-shadow: var(--shadow);
  margin-bottom:14px;
}

.panelHead{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px;
}
.panelHead h2{
  margin:0;
  font-size:14px;
  letter-spacing:.2px;
}

.pill{
  font-size:12px;
  color:var(--muted);
  padding:4px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(0,0,0,.15);
}
[data-theme="light"] .pill{
  background:rgba(255,255,255,.6);
}

label{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:12px;
  color:var(--muted);
}

.checkboxLabel{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:8px 10px;
  height:38px;
  border-radius:12px;
  border:1px solid var(--line);
  background: var(--panel2);
}
.checkboxLabel input{height:auto}

input, select{
  height:38px;
  border-radius:12px;
  border:1px solid var(--line);
  background: var(--panel2);
  color:var(--text);
  padding:0 12px;
  outline:none;
}
input::placeholder{color:rgba(234,240,255,.40)}
[data-theme="light"] input::placeholder{color:rgba(15,23,42,.45)}

.row2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.taskForm, .calForm{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:12px;
}

.btn{
  height:40px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  color:var(--text);
  font-weight:700;
  cursor:pointer;
}
.btn:hover{filter:brightness(1.08)}
.btn.primary{
  background: linear-gradient(135deg, var(--brand), rgba(47,123,255,.75));
  border-color: rgba(47,123,255,.55);
}
.btn.ghost{
  width:44px;
  background:rgba(255,255,255,.05);
}
.btn.ghostWide{
  padding:0 14px;
  background:rgba(255,255,255,.05);
}
[data-theme="light"] .btn{
  background:rgba(15,23,42,.04);
}

.taskList{
  display:flex;
  flex-direction:column;
  gap:10px;
  max-height:360px;
  overflow:auto;
  padding-right:4px;
}
.taskCard{
  border-radius:16px;
  border:1px solid var(--line);
  background: var(--panel2);
  padding:10px 12px;
  display:flex;
  justify-content:space-between;
  gap:10px;
}
.taskMeta{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}
.taskTitle{
  font-weight:900;
  font-size:13px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.taskSub{
  font-size:12px;
  color:var(--muted);
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
}
.badge{
  font-size:11px;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  color:var(--muted);
}
[data-theme="light"] .badge{
  background:rgba(15,23,42,.04);
}

.dragHandle{
  width:34px;
  height:34px;
  border-radius:12px;
  border:1px dashed rgba(255,255,255,.18);
  display:grid;
  place-items:center;
  color:rgba(234,240,255,.70);
  cursor:grab;
}
[data-theme="light"] .dragHandle{
  border-color:rgba(15,23,42,.18);
  color:rgba(15,23,42,.65);
}
.taskCard.dragging{opacity:.55; transform:scale(.99)}

.calList{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.calItem{
  display:flex;
  align-items:center;
  justify-content:space-between;
  border:1px solid var(--line);
  background: var(--panel2);
  border-radius:14px;
  padding:10px 12px;
  gap:10px;
}
.calLeft{
  display:flex;
  gap:10px;
  align-items:center;
  min-width:0;
}
.swatch{
  width:12px;height:12px;border-radius:999px;
  box-shadow:0 0 0 3px rgba(255,255,255,.06);
}
[data-theme="light"] .swatch{
  box-shadow:0 0 0 3px rgba(15,23,42,.05);
}
.calName{
  font-weight:900;
  font-size:13px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.calUrl{
  font-size:11px;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:230px;
}

.iconBtn{
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  color:var(--text);
  border-radius:12px;
  width:34px;height:34px;
  cursor:pointer;
}
.iconBtn:hover{filter:brightness(1.08)}
[data-theme="light"] .iconBtn{
  background:rgba(15,23,42,.04);
}

.toggle{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--muted);
  font-size:12px;
}
.toggle input{accent-color: var(--brand)}

.hint{
  font-size:12px;
  color:rgba(234,240,255,.62);
  border-top:1px solid var(--line);
  margin-top:10px;
  padding-top:10px;
  line-height:1.35;
}
[data-theme="light"] .hint{color:rgba(15,23,42,.62)}

.main{
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

.topbar{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  padding:18px 20px 12px 20px;
  border-bottom:1px solid var(--line);
  background: linear-gradient(180deg, var(--glassTop), rgba(255,255,255,0));
}
.topbar h1{
  margin:0;
  font-size:18px;
  letter-spacing:.2px;
}
.sub{
  margin-top:6px;
  font-size:12px;
  color:var(--muted);
}
.topbarRight{
  display:flex;
  gap:10px;
  align-items:center;
}

.calendarWrap{
  padding:16px 18px 18px 18px;
  height:100%;
  overflow:auto;
}

.calendarHeader{
  display:grid;
  grid-template-columns: 84px 1fr 1fr 1fr;
  gap:10px;
  margin-bottom:10px;
}
.timeColHeader, .dayHeader{
  border:1px solid var(--line);
  background: var(--panel);
  border-radius:16px;
  padding:10px 12px;
  font-weight:900;
  font-size:13px;
}
.dayHeader small{
  display:block;
  font-weight:700;
  color:var(--muted);
  margin-top:4px;
  font-size:12px;
}

.calendarGrid{
  display:grid;
  grid-template-columns: 84px 1fr 1fr 1fr;
  gap:10px;
  align-items:start;
}

.timeCol{
  border:1px solid var(--line);
  background: var(--panel);
  border-radius:16px;
  overflow:hidden;
  position:relative;
}

.timeTick{
  height: calc(var(--slotH) * 2); /* 1 hour = 2 slots */
  border-bottom:1px solid rgba(255,255,255,.06);
  padding:8px 10px;
  font-size:12px;
  color:rgba(234,240,255,.65);
  display:flex;
  align-items:flex-start;
}
[data-theme="light"] .timeTick{
  border-bottom-color:rgba(15,23,42,.06);
  color:rgba(15,23,42,.60);
}

.dayCol{
  border:1px solid var(--line);
  background: var(--panel);
  border-radius:16px;
  position:relative;
  overflow:hidden;
  min-height: calc((var(--dayEnd) - var(--dayStart)) * 2 * var(--slotH));
}

.dayCol::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(to bottom, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 100% var(--slotH);
  opacity:.55;
  pointer-events:none;
}
[data-theme="light"] .dayCol::before{
  background: linear-gradient(to bottom, rgba(15,23,42,.10) 1px, transparent 1px);
}

.dropOverlay{
  position:absolute; inset:10px;
  border-radius:14px;
  border:1px dashed rgba(255,255,255,.18);
  display:none;
  place-items:center;
  color:rgba(234,240,255,.65);
  font-weight:900;
  background:rgba(0,0,0,.18);
  pointer-events:none;
}
[data-theme="light"] .dropOverlay{
  border-color:rgba(15,23,42,.18);
  color:rgba(15,23,42,.70);
  background:rgba(255,255,255,.65);
}
.dayCol.dragOver .dropOverlay{display:grid}

.block{
  position:absolute;
  left:10px;
  right:10px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 18px 40px rgba(0,0,0,.35);
  padding:10px 10px;
  overflow:hidden;
  user-select:none;
  touch-action:none;
}

.block .bTitle{
  font-weight:950;
  font-size:13px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.block .bSub{
  font-size:12px;
  margin-top:6px;
  color:rgba(234,240,255,.72);
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}
[data-theme="light"] .block .bSub{color:rgba(15,23,42,.70)}

.block.locked{
  background: linear-gradient(180deg, rgba(255,176,32,.22), rgba(0,0,0,.18));
  border-color: rgba(255,176,32,.30);
}

.block.task{
  background: linear-gradient(180deg, rgba(124,92,255,.22), rgba(0,0,0,.18));
  border-color: rgba(124,92,255,.32);
  cursor:grab;
}
.block.task:active{cursor:grabbing}
.block.task.dragging{
  outline:2px solid rgba(124,92,255,.55);
  filter:brightness(1.06);
}

.legend{
  margin-top:12px;
  display:flex;
  gap:14px;
  align-items:center;
  color:var(--muted);
  font-size:12px;
}
.legendItem{display:flex; align-items:center; gap:8px}
.dot{
  width:10px;height:10px;border-radius:999px;
  box-shadow:0 0 0 3px rgba(255,255,255,.06);
}
[data-theme="light"] .dot{
  box-shadow:0 0 0 3px rgba(15,23,42,.06);
}
.dot.locked{background:var(--locked)}
.dot.task{background:var(--task)}