/* ============================================================
   18 楼 · 会议室预订
   Palette: stone / graphite / deep moss / brass
   Type: Noto Serif SC (display) · system Chinese UI · JetBrains Mono (times)
   ============================================================ */

@font-face{
  font-family:"Noto Serif SC";
  src:url("../fonts/noto-serif-sc-subset.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"JetBrains Mono";
  src:url("../fonts/jetbrains-mono-400.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"JetBrains Mono";
  src:url("../fonts/jetbrains-mono-600.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap;
}

:root{
  /* base */
  --stone-50:#F2F1EB;
  --stone-100:#E8E7E1;
  --stone-200:#DBD9D0;
  --stone-300:#C4C1B5;
  --stone-400:#9C9A8F;
  --ink:#14181A;
  --ink-2:#39423F;
  --ink-3:#5C655F;
  --white:#FCFBF8;

  /* signature */
  --moss:#0E3B32;
  --moss-bright:#17594A;
  --moss-deep:#09251F;
  --brass:#B08434;
  --brass-soft:#C8A254;

  /* room ramps (base → strong) */
  --r1:#41695F;
  --r2:#2E5C54;
  --r3:#3B637A;
  --r4:#6A6248;
  --r5:#776070;
  --r6:#5C5570;

  /* type */
  --font-display:"Noto Serif SC","Source Han Serif SC","Songti SC",SimSun,serif;
  --font-ui:"PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"JetBrains Mono","SF Mono",Consolas,ui-monospace,monospace;

  /* shape */
  --r-sm:8px;
  --r-md:12px;
  --r-lg:18px;
  --r-xl:26px;

  /* space */
  --gap:22px;
  --rail:236px;
  --pad:clamp(20px,4vw,56px);

  /* depth */
  --sh-1:0 1px 2px rgba(20,24,26,.04), 0 4px 14px rgba(20,24,26,.06);
  --sh-2:0 6px 24px rgba(20,24,26,.10), 0 2px 6px rgba(20,24,26,.06);
  --sh-3:0 18px 50px rgba(10,20,16,.22), 0 4px 14px rgba(10,20,16,.12);

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
/* [hidden] must beat component display values (.overlay/.empty-state use flex) */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font-ui);
  color:var(--ink);
  background:var(--stone-100);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* ambient layered background */
body::before{
  content:"";
  position:fixed;inset:0;z-index:-2;
  background:
    radial-gradient(120% 80% at 82% -8%, rgba(14,59,50,.10), transparent 55%),
    radial-gradient(90% 70% at 5% 0%, rgba(176,132,52,.07), transparent 50%),
    linear-gradient(180deg, var(--stone-50), var(--stone-100) 60%, var(--stone-200));
}
.grain{
  position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}

.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em}

/* ---------- generic text ---------- */
.eyebrow{
  font-family:var(--font-ui);font-weight:500;
  font-size:.74rem;letter-spacing:.18em;
  color:var(--moss-bright);margin:0 0 14px;
  display:flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--brass)}
.dot{color:var(--stone-300);margin:0 4px}

/* ============================================================
   TOP BAR
   ============================================================ */
.topbar{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;gap:28px;
  padding:14px var(--pad);
  background:rgba(242,241,235,.82);
  backdrop-filter:blur(18px) saturate(1.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  border-bottom:1px solid rgba(20,24,26,.08);
}
.brand{display:flex;align-items:center;gap:12px}
.brand-mark{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--moss);box-shadow:var(--sh-1)}
.mark-ring{fill:none;stroke:rgba(232,231,225,.5);stroke-width:1}
.mark-hand{fill:none;stroke:var(--brass-soft);stroke-width:1.6;stroke-linecap:round;transform-origin:16px 16px;animation:tick 60s linear infinite}
.mark-dot{fill:var(--brass-soft)}
@keyframes tick{to{transform:rotate(360deg)}}
.brand-text{display:flex;flex-direction:column;line-height:1.1}
.brand-name{font-family:var(--font-display);font-size:1.5rem;line-height:1;letter-spacing:-.01em}
.brand-sub{font-size:.68rem;letter-spacing:.18em;color:var(--ink-3);margin-top:3px}

.topnav{display:flex;gap:6px;margin-left:8px}
.navlink{
  font-size:.82rem;font-weight:500;color:var(--ink-3);text-decoration:none;
  padding:8px 14px;border-radius:999px;transition:color .25s var(--ease),background .25s var(--ease);
}
.navlink:hover{color:var(--ink);background:rgba(20,24,26,.05)}
.navlink.is-active{color:var(--moss);background:rgba(14,59,50,.09)}

.topstatus{margin-left:auto;display:flex;align-items:center;gap:16px}
.clockbox{display:flex;flex-direction:column;align-items:flex-end;line-height:1.15;padding-right:2px}
.clock-time{font-size:1rem;font-weight:500;color:var(--ink)}
.clock-date{font-size:.68rem;letter-spacing:.06em;color:var(--ink-3);text-transform:uppercase}

/* ---------- buttons ---------- */
.btn{
  font-family:var(--font-ui);font-weight:500;font-size:.86rem;
  display:inline-flex;align-items:center;gap:8px;
  border:none;cursor:pointer;border-radius:999px;padding:11px 20px;
  transition:transform .18s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease),color .2s;
  text-decoration:none;white-space:nowrap;
}
.btn:active{transform:translateY(1px) scale(.99)}
.btn-primary{background:var(--moss);color:var(--stone-50);box-shadow:0 4px 16px rgba(14,59,50,.28)}
.btn-primary:hover{background:var(--moss-deep);box-shadow:0 8px 26px rgba(14,59,50,.34);transform:translateY(-1px)}
.btn-ghost{background:rgba(20,24,26,.045);color:var(--ink-2);border:1px solid rgba(20,24,26,.1)}
.btn-ghost:hover{background:rgba(20,24,26,.09);color:var(--ink)}
.btn-danger{background:transparent;color:#a2382b;border:1px solid rgba(162,56,43,.4)}
.btn-danger:hover{background:rgba(162,56,43,.1)}
.btn-glyph{font-size:1.05rem;line-height:0;font-weight:400}
.btn-text-short{display:none}
.btn:disabled{opacity:.42;cursor:not-allowed;transform:none;box-shadow:none}

/* ============================================================
   MASTHEAD
   ============================================================ */
.masthead{
  display:grid;grid-template-columns:1.5fr 1fr;gap:48px;align-items:end;
  padding:64px var(--pad) 40px;
}
.display{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(2.6rem,5.4vw,4.9rem);line-height:1.12;letter-spacing:0;
  margin:0 0 20px;color:var(--ink);
}
.display em{font-style:normal;color:var(--brass);position:relative}
.display em::after{
  content:"";position:absolute;left:0;right:0;bottom:.02em;height:2px;
  background:var(--brass);transform:scaleX(0);transform-origin:left;
  animation:underline 1s var(--ease-out) .5s forwards;
}
@keyframes underline{to{transform:scaleX(1)}}
.lede{
  font-size:clamp(1rem,1.35vw,1.18rem);line-height:1.8;color:var(--ink-2);
  max-width:42ch;margin:0;
}

.masthead__stats{display:flex;gap:0;border-top:1px solid rgba(20,24,26,.14);padding-top:22px}
.stat{flex:1;display:flex;flex-direction:column;gap:6px;padding:0 22px;border-left:1px solid rgba(20,24,26,.1)}
.stat:first-child{padding-left:0;border-left:none}
.stat-num{font-size:2.1rem;font-weight:500;color:var(--moss);line-height:1}
.stat-label{font-size:.72rem;letter-spacing:.08em;color:var(--ink-3)}

/* ============================================================
   CONTROLS
   ============================================================ */
.controls{padding:0 var(--pad) 8px;display:flex;flex-direction:column;gap:16px}
.days{display:flex;gap:6px;flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.days::-webkit-scrollbar{display:none}
.day{
  font-family:var(--font-ui);background:transparent;border:1px solid rgba(20,24,26,.12);
  border-radius:12px;padding:9px 15px;cursor:pointer;color:var(--ink-2);
  display:flex;flex-direction:column;gap:2px;align-items:flex-start;min-width:64px;
  transition:all .22s var(--ease);flex:0 0 auto;
}
.day:hover{border-color:var(--moss-bright);color:var(--ink)}
.day.is-active{background:var(--moss);border-color:var(--moss);color:var(--stone-50);box-shadow:var(--sh-1)}
.day-dow{font-size:.7rem;letter-spacing:.06em;opacity:.75}
.day-date{font-family:var(--font-mono);font-size:1.05rem;font-weight:600}
.day.is-active .day-dow{opacity:.9}

.filters{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.search{
  position:relative;flex:1 1 340px;min-width:240px;display:flex;align-items:center;
}
.search-ico{position:absolute;left:15px;color:var(--ink-3);pointer-events:none}
.search input{
  width:100%;font-family:var(--font-ui);font-size:.9rem;color:var(--ink);
  background:rgba(252,251,248,.7);border:1px solid rgba(20,24,26,.13);
  border-radius:999px;padding:12px 40px 12px 40px;outline:none;
  transition:border-color .22s var(--ease),box-shadow .22s var(--ease),background .2s;
}
.search input::placeholder{color:var(--stone-400)}
.search input:focus{border-color:var(--moss-bright);box-shadow:0 0 0 4px rgba(23,89,74,.1);background:var(--white)}
.search-clear{
  position:absolute;right:8px;border:none;background:rgba(20,24,26,.08);color:var(--ink-2);
  width:24px;height:24px;border-radius:50%;cursor:pointer;font-size:1rem;line-height:1;
  display:none;align-items:center;justify-content:center;transition:background .2s;
}
.search-clear.show{display:flex}
.search-clear:hover{background:rgba(20,24,26,.16)}

.chiprow{display:flex;gap:7px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.chiprow::-webkit-scrollbar{display:none}
/* 常驻“重置筛选”按钮：有任一筛选条件时才显示 */
#resetFilters.chip-ghost{
  color:var(--brass);background:transparent;border-color:rgba(176,132,52,.4);
  font-weight:500;
}
#resetFilters.chip-ghost:hover{background:rgba(176,132,52,.1);border-color:var(--brass)}
.chip{
  font-family:var(--font-ui);font-size:.78rem;font-weight:500;cursor:pointer;
  background:rgba(252,251,248,.6);border:1px solid rgba(20,24,26,.12);color:var(--ink-2);
  padding:8px 13px;border-radius:999px;display:inline-flex;align-items:center;gap:7px;
  transition:all .2s var(--ease);flex:0 0 auto;
}
.chip:hover{border-color:var(--moss-bright);color:var(--ink);transform:translateY(-1px)}
.chip.is-on{background:var(--ink);border-color:var(--ink);color:var(--stone-50)}
.chip .cnt{font-family:var(--font-mono);font-size:.72rem;opacity:.6}
.chip.is-on .cnt{opacity:.75}

/* ============================================================
   LEGEND
   ============================================================ */
.legendbar{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:10px var(--pad) 6px;flex-wrap:wrap;
}
.legend{display:flex;gap:18px;align-items:center}
.legend-item{font-size:.76rem;color:var(--ink-3);display:flex;align-items:center;gap:7px}
.sw{width:13px;height:13px;border-radius:3px;display:inline-block}
.sw-now{background:var(--brass);box-shadow:0 0 0 3px rgba(176,132,52,.22)}
.sw-free{background:rgba(252,251,248,.9);border:1px solid rgba(20,24,26,.14)}
.sw-booked{background:var(--moss-bright)}
.sw-past{background:repeating-linear-gradient(45deg,rgba(20,24,26,.08) 0 4px,transparent 4px 8px);border:1px solid rgba(20,24,26,.06)}
.hint{font-size:.78rem;color:var(--ink-3);margin:0;display:flex;align-items:center;gap:8px}
.hint::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--brass);box-shadow:0 0 0 3px rgba(176,132,52,.2);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* ============================================================
   SCHEDULE — the instrument
   ============================================================ */
.schedule-wrap{
  padding:8px var(--pad) 40px;
  position:relative;
}
.schedule-inner{
  background:var(--white);
  border:1px solid rgba(20,24,26,.1);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-2);
  overflow:hidden;
}

/* --- header ruler --- */
.ruler{
  display:grid;grid-template-columns:var(--rail) 1fr;
  border-bottom:1px solid rgba(20,24,26,.12);
  background:linear-gradient(180deg,var(--stone-50),transparent);
  position:sticky;top:0;z-index:6;
}
.ruler-corner{
  border-right:1px solid rgba(20,24,26,.12);
  padding:14px 18px;display:flex;align-items:center;justify-content:space-between;gap:8px;
}
.ruler-corner .rc-label{font-size:.7rem;letter-spacing:.08em;color:var(--ink-3)}
.ruler-corner .rc-count{font-family:var(--font-mono);font-size:.74rem;color:var(--moss)}
.ruler-times{
  position:relative;height:46px;
}
.tick{
  position:absolute;top:0;bottom:0;display:flex;flex-direction:column;justify-content:flex-end;
  padding-bottom:8px;transform:translateX(-50%);
}
.tick .t-label{font-family:var(--font-mono);font-size:.72rem;color:var(--ink-3);white-space:nowrap}
.tick.first .t-label{transform:translateX(50%)}
.tick.last{transform:translateX(-100%)}
.tick.last .t-label{color:var(--ink-2)}
.tick .t-line{position:absolute;bottom:0;height:6px;width:1px;background:rgba(20,24,26,.2)}
.tick.hour .t-line{height:12px;background:rgba(20,24,26,.3)}
.tick.hour .t-label{color:var(--ink-2);font-weight:500}

/* --- rows --- */
.rows{position:relative}
.row{
  display:grid;grid-template-columns:var(--rail) 1fr;
  border-bottom:1px solid rgba(20,24,26,.06);
  transition:background .2s var(--ease);
}
.row:last-child{border-bottom:none}
.row:hover{background:rgba(14,59,50,.025)}

/* rail */
.rail{
  border-right:1px solid rgba(20,24,26,.09);padding:14px 18px;
  display:flex;flex-direction:column;gap:5px;position:relative;
}
.rail::before{
  content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;
  background:var(--room-color);border-radius:0 3px 3px 0;opacity:.9;
}
.rail-top{display:flex;align-items:center;gap:8px}
.room-num{
  font-family:var(--font-mono);font-size:1.5rem;font-weight:600;letter-spacing:-.03em;
  color:var(--room-color);line-height:1;
}
.room-type{font-size:.68rem;letter-spacing:.04em;color:var(--ink-3)}
.room-name{font-family:var(--font-display);font-size:1.05rem;line-height:1.1;color:var(--ink);margin-top:2px}
.rail-meta{display:flex;gap:12px;align-items:center;font-size:.74rem;color:var(--ink-3);margin-top:2px}
.rail-meta .cap{display:inline-flex;align-items:center;gap:4px}
.rail-meta svg{opacity:.7}
.rail-status{
  margin-top:6px;display:inline-flex;align-items:center;gap:6px;
  font-size:.7rem;font-weight:500;padding:3px 9px;border-radius:999px;align-self:flex-start;
}
.rail-status.free{background:rgba(23,89,74,.1);color:var(--moss-bright)}
.rail-status.busy{background:rgba(176,132,52,.15);color:#8a6318}
.rail-status.neutral{background:rgba(20,24,26,.05);color:var(--ink-3)}
.rail-status .sd{width:6px;height:6px;border-radius:50%;background:currentColor}
.rail-status.neutral .sd{opacity:.5}
.row.dim{opacity:.32;filter:saturate(.4)}
.row.dim .room-num{filter:none}

/* --- track --- */
.track{
  position:relative;height:88px;
  background-image:
    linear-gradient(90deg, rgba(20,24,26,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,24,26,.04) 1px, transparent 1px);
  background-size:16.6667% 100%, 16.6667% 100%;
  background-position:0 0;
  cursor:crosshair;
  user-select:none;
  /* native panning in both axes (incl. the horizontal day scroller) stays available;
     JS only turns a motionless press into a booking, so gestures are never blocked */
  touch-action:manipulation;
  overflow:hidden;
}
.track.dragging{cursor:grabbing}

/* past overlay */
.track .past{
  position:absolute;top:0;bottom:0;left:0;
  background:repeating-linear-gradient(45deg,rgba(20,24,26,.03) 0 6px,transparent 6px 12px);
  pointer-events:none;z-index:1;
}

/* booking block */
.block{
  position:absolute;top:9px;bottom:9px;
  border-radius:9px;
  background:var(--room-color);
  color:var(--stone-50);
  padding:8px 11px;overflow:hidden;
  cursor:pointer;
  box-shadow:0 2px 8px rgba(10,20,16,.18), inset 0 1px 0 rgba(255,255,255,.14);
  display:flex;flex-direction:column;justify-content:space-between;gap:2px;
  transition:transform .18s var(--ease),box-shadow .2s var(--ease),filter .18s;
  z-index:3;animation:blockIn .34s var(--ease-out);
}
@keyframes blockIn{from{opacity:0;transform:scaleY(.6)}to{opacity:1;transform:scaleY(1)}}
.block:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(10,20,16,.26), inset 0 1px 0 rgba(255,255,255,.2);filter:saturate(1.08) brightness(1.04);z-index:5}
.block.editing{outline:2px solid var(--brass);outline-offset:1px;z-index:6}
.block-label{font-size:.78rem;font-weight:600;line-height:1.2}
.block-time{font-family:var(--font-mono);font-size:.68rem;opacity:.86;letter-spacing:-.02em}
.block-dur{font-family:var(--font-mono);font-size:.6rem;opacity:.7}
.block-label,.block-time,.block-dur{display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.block.compact{padding:5px 6px;justify-content:center}
.block.compact .block-time,.block.compact .block-dur{display:none}
.block.micro{padding:0;justify-content:center;align-items:center}
.block.micro .block-label,.block.micro .block-time,.block.micro .block-dur{display:none}
.block.micro::after{content:"";width:4px;height:16px;border-radius:2px;background:rgba(255,255,255,.6)}
/* 分档完全由时长判定（<30 纯色块 / 30–89 只标题 / ≥90 全信息），
   不用像素阈值，避免同一时长在不同视口下忽显忽隐。窄块靠 ellipsis 兜底。 */
.block:focus-visible{outline:2px solid var(--brass);outline-offset:2px}

/* drag selection */
.selection{
  position:absolute;top:9px;bottom:9px;
  background:rgba(14,59,50,.14);
  border:1.5px dashed var(--moss-bright);
  border-radius:9px;z-index:4;pointer-events:none;
  display:flex;align-items:center;justify-content:center;
}
.selection .sel-txt{font-family:var(--font-mono);font-size:.72rem;color:var(--moss);background:rgba(252,251,248,.9);padding:3px 8px;border-radius:6px}

/* now line */
.nowline{
  position:absolute;top:-2px;bottom:-2px;width:0;z-index:7;pointer-events:none;
  border-left:2px solid var(--brass);
  box-shadow:0 0 0 1px rgba(255,255,255,.5), 0 0 10px rgba(176,132,52,.4);
}
.nowline::before{
  content:"";position:absolute;top:-1px;left:-5px;width:8px;height:8px;border-radius:50%;
  background:var(--brass);box-shadow:0 0 0 3px rgba(176,132,52,.25);
  animation:nowPulse 2.6s ease-in-out infinite;display:none;
}
.rows .row:first-child .nowline::before{display:block}
@keyframes nowPulse{0%,100%{box-shadow:0 0 0 3px rgba(176,132,52,.25)}50%{box-shadow:0 0 0 7px rgba(176,132,52,0)}}
.nowband{
  position:absolute;top:0;bottom:0;width:0;
  border-left:1.5px solid rgba(176,132,52,.32);
  z-index:2;pointer-events:none;
}

/* ============================================================
   EMPTY STATE
   ============================================================ */
.empty-state{text-align:center;padding:56px 20px;display:flex;flex-direction:column;align-items:center;gap:6px}
.empty-title{font-family:var(--font-display);font-size:1.8rem;margin:0;color:var(--ink)}
.empty-sub{color:var(--ink-3);margin:0 0 16px}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  padding:22px var(--pad) 40px;border-top:1px solid rgba(20,24,26,.1);
  font-size:.78rem;color:var(--ink-3);margin-top:8px;
}
.footer p{margin:0}

/* ============================================================
   MODAL
   ============================================================ */
.overlay{
  position:fixed;inset:0;z-index:80;
  background:rgba(9,20,16,.42);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;padding:24px;
  animation:fade .28s var(--ease-out);
}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{
  background:var(--white);border-radius:var(--r-xl);width:100%;max-width:520px;
  box-shadow:var(--sh-3);overflow:hidden;position:relative;
  max-height:90vh;display:flex;flex-direction:column;
  animation:modalIn .4s var(--ease-out);
}
@keyframes modalIn{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}
.modal-close{
  position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:50%;
  border:none;background:rgba(20,24,26,.06);color:var(--ink-2);cursor:pointer;font-size:1.2rem;
  display:grid;place-items:center;transition:background .2s,transform .2s;z-index:2;
}
.modal-close:hover{background:rgba(20,24,26,.14);transform:rotate(90deg)}
.modal-body{padding:28px 30px 6px;overflow-y:auto}
.modal-room-name{font-family:var(--font-display);font-size:1.9rem;margin:0 0 4px;line-height:1}
.modal-room-meta{display:flex;gap:14px;flex-wrap:wrap;font-size:.76rem;color:var(--ink-3);margin-bottom:22px}
.modal-room-meta .m{display:inline-flex;align-items:center;gap:5px}
.modal-title{font-size:.8rem;letter-spacing:.08em;color:var(--moss-bright);margin:0 0 16px;font-weight:600}

.field{margin-bottom:16px}
.field label{display:block;font-size:.76rem;font-weight:500;color:var(--ink-2);margin-bottom:7px}
.field label .unit{color:var(--stone-400);font-weight:400}
.fieldrow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.inp{
  width:100%;font-family:var(--font-ui);font-size:.9rem;color:var(--ink);
  background:var(--stone-50);border:1px solid rgba(20,24,26,.13);border-radius:var(--r-sm);
  padding:11px 13px;outline:none;transition:border-color .2s,box-shadow .2s,background .2s;
}
.inp:focus{border-color:var(--moss-bright);box-shadow:0 0 0 4px rgba(23,89,74,.1);background:var(--white)}

.stepper{display:flex;align-items:center;gap:6px;justify-content:space-between}
.stepper-val{
  flex:1;text-align:center;font-size:1.06rem;font-weight:600;color:var(--ink);
  background:var(--stone-50);border:1px solid rgba(20,24,26,.13);border-radius:var(--r-sm);
  padding:9px 6px;
}
.stepper.readonly .stepper-val{background:rgba(14,59,50,.08);border-color:transparent;color:var(--moss);font-weight:600}
.step{
  font-family:var(--font-mono);font-size:.76rem;font-weight:600;color:var(--ink-2);
  background:rgba(20,24,26,.05);border:1px solid rgba(20,24,26,.1);border-radius:7px;
  padding:9px 8px;cursor:pointer;transition:all .16s var(--ease);min-width:34px;
}
.step:hover{background:var(--moss);color:var(--stone-50);border-color:var(--moss)}
.step:active{transform:scale(.92)}

.chips-mini{display:flex;gap:6px;flex-wrap:wrap;margin:-4px 0 16px}
.chip-mini{
  font-family:var(--font-mono);font-size:.74rem;color:var(--ink-2);
  background:rgba(20,24,26,.04);border:1px solid rgba(20,24,26,.1);border-radius:7px;
  padding:6px 10px;cursor:pointer;transition:all .16s var(--ease);
}
.chip-mini:hover{border-color:var(--moss-bright);color:var(--ink)}
.chip-mini.is-on{background:var(--moss);color:var(--stone-50);border-color:var(--moss)}

.pillrow{display:flex;gap:7px;flex-wrap:wrap}
.pill{
  font-size:.78rem;font-weight:500;color:var(--ink-2);background:rgba(20,24,26,.04);
  border:1px solid rgba(20,24,26,.1);border-radius:999px;padding:7px 14px;cursor:pointer;
  transition:all .18s var(--ease);
}
.pill:hover{border-color:var(--moss-bright);color:var(--ink)}
.pill.is-on{background:var(--ink);color:var(--stone-50);border-color:var(--ink)}

.conflict{
  font-size:.78rem;color:#a2382b;background:rgba(162,56,43,.08);
  border:1px solid rgba(162,56,43,.25);border-radius:8px;padding:9px 12px;margin:0 0 10px;
}
.modal-foot{
  display:flex;align-items:center;gap:10px;justify-content:space-between;
  padding:16px 30px 20px;border-top:1px solid rgba(20,24,26,.08);
  background:var(--stone-50);
}
.modal-foot-right{display:flex;gap:10px}

/* ============================================================
   TOASTS
   ============================================================ */
.toasts{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:120;display:flex;flex-direction:column;gap:10px;align-items:center}
.toast{
  background:var(--moss-deep);color:var(--stone-50);font-size:.85rem;font-weight:500;
  padding:12px 20px;border-radius:999px;box-shadow:var(--sh-3);
  display:flex;align-items:center;gap:10px;
  animation:toastIn .36s var(--ease-out);
  border:1px solid rgba(255,255,255,.08);
}
.toast.out{animation:toastOut .3s var(--ease) forwards}
.toast .tk{width:7px;height:7px;border-radius:50%;background:var(--brass-soft)}
@keyframes toastIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateY(10px)}}

/* drag label */
.draglabel{
  position:fixed;z-index:130;pointer-events:none;
  background:var(--ink);color:var(--stone-50);font-size:.78rem;font-weight:500;
  padding:6px 11px;border-radius:8px;box-shadow:var(--sh-2);
  transform:translate(-50%,-140%);
}

/* reveal on load */
.reveal{opacity:0;transform:translateY(18px);animation:rev .8s var(--ease-out) forwards}
.masthead__intro.reveal{animation-delay:.05s}
.masthead__stats.reveal{animation-delay:.22s}
@keyframes rev{to{opacity:1;transform:none}}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1000px){
  :root{--rail:200px}
  .masthead{grid-template-columns:1fr;gap:28px}
}

@media (max-width:760px){
  :root{--pad:16px;--rail:104px}
  .topnav{display:none}
  .topbar{gap:10px;padding:10px var(--pad)}
  .brand-mark{width:36px;height:36px}
  .brand-name{font-size:1.12rem}
  .brand-sub{display:none}
  .topstatus{gap:10px}
  .clock-time{font-size:.72rem}
  .clock-date{display:none}
  .btn{padding:9px 13px;font-size:.8rem;gap:6px}
  .btn-text{display:none}
  .btn-text-short{display:inline}

  .masthead{padding:36px var(--pad) 26px;gap:22px}
  .display{font-size:clamp(2.3rem,10.4vw,3.15rem);line-height:1.16;margin-bottom:14px}
  .lede{font-size:.96rem;line-height:1.7}
  .masthead__stats{padding-top:16px}
  .stat{padding:0 10px}
  .stat-num{font-size:1.5rem}
  .stat-label{font-size:.66rem;letter-spacing:.04em}

  .controls{gap:12px}
  .day{min-width:58px;padding:8px 11px}
  .day-dow{font-size:.66rem}
  .filters{gap:10px}
  .search{flex:1 1 100%;min-width:0}
  .legendbar{gap:10px;padding-top:8px}
  .legend{gap:12px;flex-wrap:wrap}
  .hint{width:100%;font-size:.72rem}

  .schedule-wrap{
    overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
    padding:8px 0 26px;scrollbar-width:none;
  }
  .schedule-wrap::-webkit-scrollbar{display:none}
  /* 30 分钟色块在 820px 下只有 ~26px，标题会被 ellipsis；放宽到 920px
     让 30 分钟也能放下"设计评审"这类四字标题 */
  .schedule-inner{min-width:920px;overflow:visible;border-radius:0;border-left:none;border-right:none}
  .ruler{position:relative;top:auto}
  .ruler-corner{
    position:sticky;left:0;z-index:8;
    background:var(--stone-50);
  }
  .rail{
    position:sticky;left:0;z-index:5;background:var(--white);
    padding:11px 12px;box-shadow:10px 0 16px -12px rgba(20,24,26,.35);
  }
  .rail-top{gap:5px}
  .room-type{display:none}
  .room-name{display:block;font-size:.92rem;margin-top:1px}
  .rail-meta{display:none}
  .rail-status{font-size:.64rem;padding:2px 7px;margin-top:4px}
  .room-num{font-size:1.18rem}
  .track{height:84px}
  .block{padding:6px 8px}
  .block-label{font-size:.74rem}
  .block-time{font-size:.64rem}
  .block-dur{font-size:.58rem}
  .block.compact{padding:3px 2px}
  .block.compact .block-label{font-size:.64rem}

  .modal{max-width:none;width:100%;max-height:92dvh;border-radius:22px 22px 0 0}
  .overlay{align-items:flex-end;padding:0}
  .modal-body{padding:22px 20px 4px}
  .modal-foot{
    padding:12px 20px calc(12px + env(safe-area-inset-bottom));
    position:sticky;bottom:0;flex-shrink:0;
  }
  .modal-foot-right{flex:1;justify-content:flex-end}
  .fieldrow{grid-template-columns:1fr}
  .inp{font-size:16px}
  .footer{padding-bottom:28px}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .mark-hand{animation:none}
}