* { box-sizing: border-box; }
:root {
  color-scheme: light; --bg: #f6f7f4; --surface: #fff; --ink: #172624; --muted: #576b66;
  --line: #dfe8e3; --primary: #176551; --primary-hover: #0f513f;
  --own: #257765; --other: #4b5baf; --shared: #ad542a; --free: #d6f2e5; --warn: #b34037;
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
}
body { margin: 0; min-height: 100vh; color: var(--ink); background: var(--bg); }
[hidden] { display: none !important; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px clamp(14px, 3vw, 40px); border-bottom: 1px solid var(--line); background: var(--surface); }
.brand { display: flex; gap: 11px; align-items: center; font-size: 20px; font-weight: 750; letter-spacing: -.025em; }
.brand small { display: block; font-size: 11px; color: var(--muted); font-weight: 500; letter-spacing: 0; }
.brand-icon { display: block; position: relative; width: 35px; height: 35px; border-radius: 11px; background: #e2f3eb; }
.brand-icon::before,.brand-icon::after { position: absolute; content: ""; width: 12px; height: 12px; border: 2px solid var(--primary); border-radius: 4px; }
.brand-icon::before { left: 7px; top: 7px; }.brand-icon::after { right: 7px; bottom: 7px; background: #e2f3eb; }
.app-tabs { display: flex; gap: 8px; padding: 9px clamp(14px, 3vw, 40px); border-bottom: 1px solid var(--line); background: var(--surface); }
.app-tabs button { border-color: transparent; }
.app-tabs button[aria-pressed=true] { color: var(--primary); background: #e5f3eb; }
.tasks-pane { max-width: 810px; margin: auto; padding: 24px clamp(12px, 3vw, 36px) 36px; }
.tasks-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.tasks-heading h1 { font-size: clamp(23px, 4vw, 30px); letter-spacing: -.03em; }
#tasks-status { color: var(--muted); padding: 10px 0; }
.task-group { display: grid; gap: 6px; margin-bottom: 18px; }
.task-group h2 { color: var(--muted); margin-bottom: 2px; }
.task-group.overdue h2 { color: var(--warn); }
button.task-card { display: grid; justify-items: start; text-align: left; gap: 3px; padding: 10px 13px; overflow-wrap: anywhere; }
.task-card strong { white-space: pre-wrap; }
#install-app { margin-top: 7px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; }
.workspace { display: grid; grid-template-columns: minmax(190px, 225px) minmax(0, 1fr); gap: 18px; padding: 22px clamp(12px, 3vw, 40px) 32px; max-width: 1750px; margin: auto; align-items: start; }
.sidebar { display: grid; gap: 11px; min-width: 0; }
.side-card { padding: 14px; }
h1,h2,p { margin: 0; } h2, summary { font-size: 15px; font-weight: 720; } summary { cursor: pointer; }
.sidebar .check { margin-top: 9px; }
button,input,select,textarea { font: inherit; }
button,.secondary { cursor: pointer; touch-action: manipulation; }
button:disabled { cursor: wait; opacity: .65; }
button,a.secondary { font-weight: 650; }
button,a.secondary, input:not([type=checkbox]),select,textarea {
  min-height: 40px; border: 1px solid var(--line); border-radius: 9px; padding: 8px 11px; color: inherit; background: #fff;
}
button:hover,a.secondary:hover { background: #edf3ef; }
button.primary { color: #fff; background: var(--primary); border-color: var(--primary); }
button.primary:hover { background: var(--primary-hover); }
button.create { text-align: left; padding: 10px 13px; }.create b { margin-right: 6px; }
button.plain { border-color: transparent; display: flex; align-items: center; gap: 7px; }
#avatar { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 50%; background: #e0efe9; color: var(--primary); }
.square { padding: 0; width: 38px; min-width: 38px; font-size: 24px; }
.danger { color: var(--warn); }
label { display: grid; gap: 4px; font-size: 13px; font-weight: 630; min-width: 0; }
input:not([type=checkbox]),select,textarea { width: 100%; font-size: 16px; font-weight: 400; min-width: 0; }
input[type=checkbox] { accent-color: var(--primary); width: 17px; height: 17px; margin: 0; flex: none; }
.check { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-height: 28px; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; vertical-align: 1px; flex: none; }
.own { background: var(--own); }.other { background: var(--other); }.shared { background: var(--shared); }
.free { background: var(--free); border: 1px solid #88b9a2; }.conflict { background: var(--warn); }
.two { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }.align-end { align-self: end; margin-bottom: 6px; }
#repeat-options { display: grid; gap: 8px; }
.weekdays { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.weekdays label { display: flex; align-items: center; gap: 4px; min-height: 38px; }
#free-form { display: grid; gap: 7px; }
#free-form input[type=time] { padding-inline: 6px; font-size: 14px; }
#free-list,#import-preview { padding-left: 18px; color: var(--muted); font-size: 12px; max-height: 152px; overflow: auto; }
#free-list:empty,#import-preview:empty { display: none; }
.calendar-pane { min-width: 0; overflow: hidden; }
.calendar-header { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px; flex-wrap: wrap; }
.navigation { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.navigation h1 { margin-left: 7px; font-size: clamp(16px, 2.1vw, 22px); letter-spacing: -.02em; }
.calendar-footer { display: flex; flex-wrap: wrap; gap: 14px; padding: 9px 13px; font-size: 12px; color: var(--muted); }
.calendar-footer #zone { margin-left: auto; }
#calendar { --fc-border-color: var(--line); --fc-today-bg-color: #f1f6fa; --fc-list-event-hover-bg-color: #f2f6f4; --fc-neutral-bg-color: #f7f9f8; }
#calendar .fc-col-header-cell-cushion { padding: 7px 3px; font-size: 13px; }
#calendar .fc-timegrid-slot { height: 28px; }
#calendar .fc-timegrid-slot-label-cushion { font-size: 11px; }
#calendar .fc-event { cursor: pointer; }
#calendar .fc-event-title { font-weight: 630; }
#calendar .fc-timegrid-event, #calendar .fc-daygrid-block-event { border-radius: 5px; padding: 1px 3px; }
#calendar .fc-event.has-conflict { box-shadow: inset 3px 0 #f7ab9e; }
#calendar .fc-bg-event { opacity: .62; }
#notice { padding: 8px 14px; background: #fff0e6; color: #81411f; }
.login { max-width: 400px; margin: clamp(35px, 12vh, 100px) auto; width: calc(100% - 28px); padding: 26px; display: grid; gap: 13px; }
.login h1 { font-size: 28px; letter-spacing: -.04em; }
.overline { color: var(--primary); font-size: 11px; letter-spacing: .12em; font-weight: 750; }
.muted { color: var(--muted); }.small { font-size: 12px; }
dialog { border: 1px solid var(--line); border-radius: 16px; padding: 19px; max-width: 520px; width: calc(100vw - 24px); max-height: calc(100dvh - 24px); color: var(--ink); box-shadow: 0 18px 70px #14282025; }
dialog::backdrop { background: #10282074; }
dialog form { display: grid; gap: 10px; }
.dialog-title,.dialog-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dialog-title h2 { font-size: 22px; letter-spacing: -.03em; }
.dialog-actions { justify-content: end; margin-top: 3px; }
fieldset { border: 1px solid var(--line); border-radius: 10px; min-width: 0; margin: 0; padding: 8px 10px; }
legend { font-size: 13px; font-weight: 660; }
.travel-person { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; align-items: center; margin-bottom: 6px; }
.error,.warning { color: #8b2e29; background: #fdf0ee; border-radius: 8px; padding: 7px 10px; font-size: 13px; }
a.secondary { display: inline-block; text-decoration: none; }
:focus-visible { outline: 2px solid #226fbd; outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; }
@media (max-width: 710px) {
  .workspace { display: flex; flex-direction: column; gap: 9px; padding: 10px 8px 20px; }
  .sidebar,.calendar-pane { width: 100%; }
  .sidebar { grid-template-columns: auto 1fr; gap: 7px; }
  .sidebar .side-card { padding: 7px 9px; }
  .sidebar section { display: flex; align-items: center; flex-wrap: wrap; gap: 3px 10px; }
  .sidebar section h2 { display: none; }
  .sidebar .check { margin: 0; font-size: 12px; }
  #free-panel { grid-column: 1 / -1; grid-row: 2; }
  .calendar-header { padding: 8px; }
  .navigation h1 { margin-left: 1px; }
  .calendar-footer { gap: 7px; padding-inline: 8px; }
  #calendar .fc-col-header-cell-cushion { font-size: 11px; }
}
@media (max-width: 440px) {
  .event-dates { grid-template-columns: 1fr; }
}