.shell { grid-template-columns: 176px minmax(760px, 1fr) 280px; }
main { padding: 20px 24px 32px; min-width: 0; }
.calendar-topbar { min-height: 64px; gap: 18px; }
.date-navigation { display: flex; align-items: center; gap: 8px; }
.date-navigation > div { margin-left: 8px; }
.date-navigation h1 { margin: 1px 0 0; font-size: 28px; white-space: nowrap; }
.today-button, .icon-button, .view-select { border: 1px solid var(--line); background: var(--surface); color: var(--ink); height: 38px; border-radius: 8px; }
.today-button { padding: 0 16px; }
.icon-button { width: 38px; font-size: 22px; }
.view-select { padding: 0 12px; }
.calendar-composer { margin: 12px 0; padding: 12px 16px; display: grid; grid-template-columns: 150px 1fr; align-items: center; gap: 14px; }
.calendar-composer label { margin: 0; }
.calendar-composer > div { width: 100%; }
.calendar-composer > p { grid-column: 2; }
.calendar-workspace { background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); }
.calendar-week-head { display: grid; grid-template-columns: 64px 1fr; min-height: 58px; border-bottom: 1px solid var(--line); }
.calendar-week-head > span { align-self: end; padding: 0 8px 8px 0; text-align: right; color: var(--muted); font: 9px ui-monospace, monospace; }
.week-headers { display: grid; grid-template-columns: repeat(var(--calendar-columns, 7), minmax(90px, 1fr)); }
.week-header { display: grid; place-items: center; align-content: center; gap: 2px; border-left: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.week-header strong { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: var(--ink); font: 18px Georgia, serif; }
.week-header.today strong { background: var(--blue); color: white; }
.calendar-scroll { height: calc(100vh - 260px); min-height: 520px; overflow-y: auto; display: grid; grid-template-columns: 64px 1fr; scrollbar-color: #c9c4ba transparent; }
.calendar-scroll.month-scroll { display: block; overflow: auto; }
.time-axis { height: 1440px; position: relative; background: #fff; }
.time-label { position: absolute; right: 9px; transform: translateY(-50%); color: #8a8a84; font: 10px ui-monospace, monospace; }
.week-body { height: 1440px; position: relative; min-width: 630px; }
.hour-lines { position: absolute; inset: 0; background: repeating-linear-gradient(to bottom, transparent 0, transparent 59px, #e4e1da 59px, #e4e1da 60px); pointer-events: none; }
.week-columns { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--calendar-columns, 7), minmax(90px, 1fr)); }
.calendar-day-column { position: relative; border-left: 1px solid var(--line); cursor: crosshair; touch-action: none; }
.calendar-day-column:last-child { border-right: 1px solid var(--line); }
.calendar-day-column.today { background: rgba(82,111,124,.025); }
.calendar-event { position: absolute; min-height: 22px; padding: 5px 7px; border-radius: 5px; overflow: hidden; z-index: 2; font-size: 11px; line-height: 1.25; cursor: grab; touch-action: none; user-select: none; border: 0; text-align: left; transition: box-shadow .14s ease, filter .14s ease; }
.calendar-event strong { display: block; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.calendar-event time { display: block; margin-top: 2px; font: 9px ui-monospace, monospace; opacity: .78; }
.calendar-event.confirmed { background: var(--event-color,#5875d5); color: white; border-left: 4px solid color-mix(in srgb,var(--event-color,#5875d5) 72%,#17223f); }
.calendar-event.pending { background: repeating-linear-gradient(135deg,#eef2ff,#eef2ff 7px,#e1e7fb 7px,#e1e7fb 14px); color: #35436c; border: 1px dashed #6f80bd; }
.calendar-event:hover,.calendar-event:focus-visible { z-index: 5; filter: brightness(.98); box-shadow: 0 5px 14px rgba(39,48,66,.22); outline: 2px solid white; outline-offset: -3px; }
.calendar-event.is-interacting { z-index: 10; cursor: grabbing; opacity: .9; box-shadow: 0 12px 26px rgba(35,42,58,.3); transition: none; }
.resize-handle { position: absolute; left: 8px; right: 8px; height: 8px; padding: 0; border: 0; background: transparent; cursor: ns-resize; z-index: 2; }
.resize-handle::after { content:""; position:absolute; left:50%; width:22px; height:2px; transform:translateX(-50%); border-radius:2px; background:rgba(255,255,255,.72); opacity:0; transition:opacity .12s; }
.pending .resize-handle::after { background:#6f80bd; }
.calendar-event:hover .resize-handle::after,.calendar-event:focus-within .resize-handle::after { opacity:1; }
.resize-start { top:0; }.resize-start::after { top:2px; }.resize-end { bottom:0; }.resize-end::after { bottom:2px; }
.calendar-selection { position:absolute; left:4px; right:4px; min-height:15px; z-index:8; border:1px solid #4d66be; border-radius:5px; background:rgba(88,117,213,.22); color:#32478e; pointer-events:none; box-shadow:0 5px 15px rgba(57,76,142,.12); }
.calendar-selection strong { display:block; padding:4px 6px; font:10px ui-monospace,monospace; }
.calendar-selection.is-complete { animation:selection-settle .13s ease-out forwards; }
.calendar-draft-preview { position:absolute; left:4px; right:4px; min-height:24px; z-index:7; overflow:hidden; padding:5px 7px; border:1px dashed color-mix(in srgb,var(--event-color,#5875d5) 82%,#25365f); border-left:4px solid var(--event-color,#5875d5); border-radius:5px; background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--event-color,#5875d5) 18%,white),color-mix(in srgb,var(--event-color,#5875d5) 18%,white) 7px,color-mix(in srgb,var(--event-color,#5875d5) 10%,white) 7px,color-mix(in srgb,var(--event-color,#5875d5) 10%,white) 14px); color:color-mix(in srgb,var(--event-color,#5875d5) 68%,#18223d); box-shadow:0 6px 18px rgba(48,64,116,.14); animation:draft-hold .2s cubic-bezier(.2,.85,.25,1); }
.calendar-draft-preview strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; }
.calendar-draft-preview time { display:block; margin-top:2px; font:9px ui-monospace,monospace; }
.calendar-draft-preview span { position:absolute; right:6px; bottom:4px; padding:2px 5px; border-radius:8px; background:rgba(255,255,255,.7); font-size:8px; letter-spacing:.04em; }
.calendar-event.just-saved { animation:event-arrive .5s cubic-bezier(.2,.85,.25,1); }
.calendar-dragging,.calendar-dragging * { user-select:none!important; }
.now-line { position: absolute; left: 0; right: 0; height: 2px; background: #d5574f; z-index: 4; pointer-events: none; }
.now-line::before { content: ""; position: absolute; left: -4px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: #d5574f; }
.calendar-legend { display: flex; gap: 22px; align-items:center; padding: 8px 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; }
.interaction-hint { margin-left:auto; }
.calendar-legend i { display: inline-block; width: 10px; height: 10px; margin-right: 5px; border-radius: 3px; vertical-align: -1px; }
.confirmed-dot { background: #5875d5; }
.pending-dot { background: #e7ebfb; border: 1px dashed #6f80bd; }
.summary-strip { display: flex; gap: 28px; padding: 12px 4px 0; }
.summary-strip div { display: flex; gap: 8px; align-items: baseline; }
.summary-strip span { color: var(--muted); font-size: 11px; }
.summary-strip strong { font: 14px Georgia, serif; }
.review-card { margin-top: 16px; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.review-heading { display: flex; justify-content: space-between; align-items: flex-start; }
.review-heading h2 { margin: 5px 0 0; font: 400 19px Georgia,"Songti SC",serif; }
.review-heading > span { min-width: 24px; height: 24px; display: grid; place-items: center; border-radius: 12px; background: #e7ebfb; color: #4c5e9a; font-size: 11px; }
.review-queue { display: grid; gap: 10px; margin-top: 14px; max-height: 330px; overflow: auto; }
.review-item { padding: 11px; border-radius: 9px; background: #f2eee6; }
.review-item strong { display: block; font-size: 12px; }
.review-item p { margin: 4px 0 9px; color: var(--muted); font-size: 10px; }
.review-actions { display: flex; gap: 7px; }
.review-actions button { border: 1px solid var(--line); border-radius: 6px; padding: 5px 8px; background: var(--surface); font-size: 10px; }
.review-actions .confirm { background: var(--blue); color: white; border-color: var(--blue); }
.empty-review { color: var(--muted); font-size: 11px; line-height: 1.6; }
.month-calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(110px,1fr)); grid-auto-rows: minmax(110px,1fr); height: calc(100vh - 220px); }
.month-cell { border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 8px; font-size: 11px; }
.month-cell.today { background: rgba(82,111,124,.05); }
.month-cell .month-events { display: grid; gap: 3px; margin-top: 6px; }
.month-cell .month-event { display:block; width:100%; padding: 3px 5px; border:0; border-radius: 4px; background: var(--event-color,#5875d5); color: white; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align:left; font-size: 9px; }
.month-cell .month-event.pending { background: #e7ebfb; color: #4c5e9a; border: 1px dashed #6f80bd; }
.mini-calendar .selected { box-shadow: inset 0 0 0 1px var(--blue); }
.event-popover { position:fixed; z-index:22; width:min(440px,calc(100vw - 24px)); max-height:calc(100vh - 24px); overflow:auto; padding:0; border:1px solid rgba(111,107,98,.24); border-radius:14px; background:rgba(255,253,248,.98); color:var(--ink); box-shadow:0 24px 70px rgba(35,35,31,.22),0 2px 8px rgba(35,35,31,.08); backdrop-filter:blur(16px); transform-origin:left 54px; }
.event-popover[hidden] { display:none; }
.event-popover[data-side="left"] { transform-origin:right 54px; }
.event-popover.is-opening { animation:popover-in .18s cubic-bezier(.2,.85,.25,1) both; }
.event-popover.is-closing { animation:popover-out .12s ease-in both; pointer-events:none; }
.event-popover form { position:relative; padding:24px; }
.event-popover h2 { margin:6px 0 0; font:400 24px Georgia,"Songti SC",serif; }
.event-popover .dialog-close { right:14px; top:10px; }
.event-title-field { margin-top:20px; }
.event-field { display:grid; gap:7px; }
.event-field > span { color:var(--muted); font-size:11px; }
.event-field input,.event-field select,.event-field textarea { width:100%; min-width:0; height:42px; padding:0 11px; border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--ink); font:inherit; outline:none; }
.event-field textarea { height:auto; min-height:118px; padding:10px 11px; line-height:1.55; resize:vertical; }
.event-title-field input { height:50px; font:18px Georgia,"Songti SC",serif; }
.event-field input:focus,.event-field select:focus,.event-field textarea:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(82,111,124,.12); }
.event-detail-field { margin-top:13px; }
.event-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px 12px; margin-top:15px; }
.event-color-field { display:grid; gap:8px; margin-top:14px; }
.event-color-field > span { color:var(--muted); font-size:11px; }
.event-color-choices { display:flex; align-items:center; gap:9px; min-height:31px; }
[data-event-color] { width:25px; height:25px; flex:0 0 25px; padding:0; border:2px solid transparent; border-radius:50%; background:var(--swatch); box-shadow:0 1px 4px rgba(35,35,31,.16); cursor:pointer; transition:transform .14s ease,box-shadow .14s ease,outline-color .14s ease; }
[data-event-color]:hover { transform:scale(1.1); box-shadow:0 3px 8px rgba(35,35,31,.2); }
[data-event-color][aria-pressed="true"] { outline:2px solid var(--swatch); outline-offset:2px; border-color:#fff; transform:scale(1.06); }
.custom-color { position:relative; display:grid; place-items:center; width:27px; height:27px; flex:0 0 27px; overflow:hidden; border:1px dashed #9e9a91; border-radius:50%; background:#fff; color:var(--muted); cursor:pointer; transition:transform .14s ease,border-color .14s ease; }
.custom-color:hover { transform:scale(1.08); border-color:var(--blue); color:var(--blue); }
.custom-color input { position:absolute; inset:-8px; width:44px; height:44px; opacity:0; cursor:pointer; }
.custom-color span { pointer-events:none; font-size:17px; line-height:1; }
.event-duration { min-height:20px; margin:12px 0 0; color:var(--blue); font:11px ui-monospace,monospace; }
.event-form-error { min-height:18px; margin:4px 0 0; color:#a25145; }
.event-dialog-actions { display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; }
.button.danger { color:#a0443b; border-color:#ddbcb7; background:#fff9f7; }
.calendar-toast { position:fixed; left:50%; bottom:28px; z-index:30; transform:translateX(-50%); display:flex; align-items:center; gap:18px; min-width:270px; max-width:calc(100vw - 32px); padding:12px 14px 12px 16px; border-radius:10px; background:#292d2b; color:white; box-shadow:0 14px 38px rgba(26,28,27,.28); font-size:12px; }
.calendar-toast[hidden] { display:none; }
.calendar-toast:not([hidden]) { animation:toast-in .22s cubic-bezier(.2,.8,.2,1); }
.calendar-toast button { border:0; background:none; color:#b9cad1; font-weight:700; }
@keyframes popover-in { from{opacity:0;transform:translateY(7px) scale(.965)} to{opacity:1;transform:none} }
@keyframes popover-out { to{opacity:0;transform:translateY(4px) scale(.98)} }
@keyframes event-arrive { 0%{filter:brightness(1.16);transform:scale(.96);box-shadow:0 0 0 4px rgba(88,117,213,.2)} 55%{transform:scale(1.018)} 100%{filter:none;transform:none;box-shadow:none} }
@keyframes draft-hold { from{opacity:.3;transform:scaleY(.92);transform-origin:top} to{opacity:1;transform:none} }
@keyframes selection-settle { to{opacity:0;transform:scale(.985)} }
@keyframes toast-in { from{opacity:0;transform:translate(-50%,10px)} to{opacity:1;transform:translate(-50%,0)} }
@media(max-width:1200px){.shell{grid-template-columns:76px minmax(700px,1fr)}.context-rail{display:none}.calendar-scroll{height:calc(100vh - 250px)}}
@media(max-width:820px){.interaction-hint{display:none}.event-form-grid{grid-template-columns:1fr}.calendar-toast{bottom:76px}}
@media(prefers-reduced-motion:reduce){.calendar-event,.resize-handle::after,[data-event-color],.custom-color{transition:none}.event-popover,.calendar-toast,.calendar-selection,.calendar-draft-preview,.calendar-event.just-saved{animation:none!important}}