/* "Der Büro-Morgen" (/buero-morgen/): start button, node pipeline, a realistic digital desk seen from above (oak top, lamp light,
   paper day planner, tablet with the Deck board, manila folder, phone with Talk, typewriter sheet) and three Nextcloud receipts drawn
   in HTML/CSS (Deck, Files, Calendar). Fixed colours inside the desk, so it reads the same in light and dark theme. */
.ofc { --oak: #a87b4f; --oak-d: #7b5532; --paper: #fbf8f1; --ink: #23262b; --soft: #6b6f76; --nc: #0082c9; --nc-d: #00679e; --ok: #2d8a4e;
  --red: #c9372c; --amber: #d9902a; --font-hand: "Caveat", "Segoe Print", "Bradley Hand", cursive; }
.ofc .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ofc [hidden] { display: none !important; }
.ofc-fun { display: inline-block; margin: 0 0 10px; padding: 5px 12px; border-radius: 4px; font: 700 13px var(--font-m); letter-spacing: .08em;
  text-transform: uppercase; color: #fff; background: linear-gradient(135deg, #0082c9, #2d8a4e); }
.ofc-hero .h2 { font-size: clamp(34px, 6vw, 60px); line-height: 1.05; letter-spacing: -.01em; }

/* ---- start */
.ofc-start { margin: 22px 0 10px; }
.ofc-go { min-height: 60px; padding: 0 30px; border: 0; border-radius: 12px; cursor: pointer; color: #fff; font: 700 19px var(--font-b);
  background: linear-gradient(180deg, #1a95d8, #0072b3); box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 6px 0 #00507e, 0 12px 24px rgba(0, 0, 0, .3);
  transition: transform .12s, box-shadow .12s, filter .2s; }
.ofc-go:hover { filter: brightness(1.08); }
.ofc-go:active { transform: translateY(4px); box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 2px 0 #00507e, 0 6px 14px rgba(0, 0, 0, .3); }
.ofc-go[disabled] { cursor: wait; filter: saturate(.6); transform: translateY(4px); box-shadow: 0 2px 0 #00507e; }
.ofc-go:focus-visible, .ofd-tabs button:focus-visible, .ofr-share a:focus-visible, .ofr-share button:focus-visible, .ofd-paper:focus-visible { outline: 3px solid #ffb454; outline-offset: 3px; }
.ofc-note { margin: 12px 0 0; max-width: 70ch; font-size: 14.5px; color: var(--muted); }
.ofc-msg { margin: 10px 0 0; color: var(--muted); font-size: 15px; max-width: 64ch; }
.ofc-msg:empty { display: none; }
.ofc-msg.ok { color: var(--ok, #5ce8c8); font-weight: 600; }
.ofc-msg.warn { color: var(--accent); font-weight: 500; }

/* ---- node pipeline */
.ofs { list-style: none; margin: 18px 0 12px; padding: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; counter-reset: s; }
.ofs li { position: relative; padding: 9px 10px 9px 30px; border-radius: 10px; background: var(--panel, #12161d); border: 1px solid var(--line, #232a36);
  font-size: 12px; line-height: 1.3; color: var(--muted); min-width: 0; transition: border-color .3s, background .3s, color .3s; }
.ofs li b { display: block; font: 700 11.5px var(--font-m); color: var(--text); overflow-wrap: anywhere; }
.ofs li span:not(.ofs-dot) { display: block; overflow-wrap: anywhere; }
.ofs-dot { position: absolute; left: 10px; top: 12px; width: 11px; height: 11px; border-radius: 50%; background: #3a4150; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .5); }
.ofs li.run { border-color: #0082c9; }
.ofs li.run .ofs-dot { background: #1a95d8; animation: ofs-pulse 1s ease-in-out infinite; }
.ofs li.done .ofs-dot { background: #2d8a4e; box-shadow: 0 0 0 3px rgba(45, 138, 78, .25); }
.ofs li.done { color: var(--text); }
@keyframes ofs-pulse { 50% { box-shadow: 0 0 0 6px rgba(26, 149, 216, .25); } }

/* ---- the desk */
.ofd-desk { position: relative; display: grid; gap: 22px; padding: clamp(14px, 3vw, 34px); border-radius: 18px; overflow: hidden; color: var(--ink);
  grid-template-columns: minmax(250px, 300px) minmax(0, 1.25fr) minmax(0, 1fr);
  grid-template-areas: "plan board board" "plan files chat" "paper paper paper";
  background:
    radial-gradient(900px 520px at 12% 0%, rgba(255, 236, 196, .55), transparent 62%),
    radial-gradient(1200px 700px at 50% 120%, rgba(40, 22, 8, .45), transparent 60%),
    repeating-linear-gradient(91deg, rgba(60, 34, 14, .10) 0 2px, transparent 2px 9px, rgba(255, 230, 190, .06) 9px 11px, transparent 11px 23px),
    repeating-linear-gradient(89.4deg, rgba(70, 40, 16, .12) 0 1px, transparent 1px 41px),
    linear-gradient(180deg, #b58656, #a3744a 45%, #94673f);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25), inset 0 30px 60px rgba(255, 240, 210, .12), 0 18px 40px rgba(0, 0, 0, .35); }
.ofd-desk h3 { margin: 0; font: 700 15px var(--font-b); color: var(--ink); }
.ofd-desk header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 0 10px; }
.ofd-lamp { position: absolute; left: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 246, 220, .35), transparent 70%); }
.ofd-mug { position: absolute; right: clamp(14px, 3vw, 30px); top: clamp(10px, 2vw, 22px); width: 64px; height: 64px; border-radius: 50%; z-index: 3; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, #3b2416 0 36%, #5a3a26 38% 42%, #f2efe9 44% 62%, #dcd6cc 64% 100%);
  box-shadow: 6px 10px 16px rgba(40, 20, 6, .45), inset -3px -4px 8px rgba(0, 0, 0, .12); }
.ofd-mug::after { content: ""; position: absolute; right: -16px; top: 22px; width: 20px; height: 20px; border: 6px solid #e9e4db; border-left: 0; border-radius: 0 12px 12px 0; }
.ofd-mug i { position: absolute; left: 22px; top: 10px; width: 20px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, .5); filter: blur(6px);
  animation: ofd-steam 3.2s ease-in-out infinite; }
@keyframes ofd-steam { 0% { transform: translate(0, 4px) scale(.7); opacity: 0; } 40% { opacity: .9; } 100% { transform: translate(6px, -26px) scale(1.4); opacity: 0; } }

/* day planner (paper, spiral binding) */
.ofd-plan { grid-area: plan; position: relative; padding: 16px 14px 16px 30px; border-radius: 6px; background: var(--paper);
  background-image: linear-gradient(90deg, transparent 22px, rgba(201, 55, 44, .25) 22px 23px, transparent 23px);
  box-shadow: 0 1px 0 #fff inset, 0 2px 3px rgba(0, 0, 0, .18), 0 14px 26px rgba(50, 26, 8, .35); transform: rotate(-.6deg); }
.ofd-plan::before { content: ""; position: absolute; left: 6px; top: 14px; bottom: 14px; width: 10px;
  background: radial-gradient(circle at 5px 7px, #8d8d8d 0 3px, #d7d7d7 3.5px 4.5px, transparent 5px) 0 0 / 10px 18px repeat-y; }
.ofd-date { font: 600 12.5px var(--font-m); color: var(--soft); }
.ofd-tabs { display: flex; gap: 6px; margin: 0 0 10px; }
.ofd-tabs button { min-height: 32px; padding: 0 12px; border-radius: 16px; border: 1px solid #cfcac0; background: #fff; color: var(--ink); font: 600 13px var(--font-b); cursor: pointer; }
.ofd-tabs button.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.ofd-day { position: relative; height: 470px; }
.ofd-hours { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; display: grid; grid-template-rows: repeat(10, 1fr) 0; }
.ofd-hours li { border-top: 1px solid rgba(35, 38, 43, .12); position: relative; }
.ofd-hours span { position: absolute; top: -8px; left: 0; padding-right: 4px; background: var(--paper); font: 500 11px var(--font-m); color: #8b8f96; }
.ofd-ev { list-style: none; margin: 0; padding: 0; position: absolute; left: 46px; right: 0; top: 0; bottom: 0; }
.ofd-ev li { position: absolute; left: calc(var(--lane, 0) * 50%); width: calc(100% / var(--lanes, 1) - 3px); top: var(--y); height: var(--h); min-height: 22px;
  padding: 3px 7px; border-radius: 5px; overflow: hidden; background: #e3f1fa; border-left: 4px solid var(--nc); color: #12324a;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12); font: 600 12px/1.25 var(--font-b); }
.ofd-ev li small { display: block; font: 500 10.5px var(--font-m); color: #42647d; }
.ofd-ev li.fokus { background: repeating-linear-gradient(135deg, #fff3d6 0 8px, #ffe9b8 8px 16px); border-left-color: var(--amber); color: #5a3a06; }
.ofd-ev li.fokus small { color: #8a5d12; }
.ofd-ev li.in { animation: ofd-drop .55s cubic-bezier(.2, .9, .3, 1.2) both; }
.ofd-ev li.hl { animation: ofd-drop .55s cubic-bezier(.2, .9, .3, 1.2) both, ofd-glow 1.6s .6s ease-in-out 2; }
.ofd-now { position: absolute; left: 40px; right: 0; height: 2px; background: var(--red); z-index: 2; }
.ofd-now::before { content: ""; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--red); }
.ofd-empty { position: absolute; left: 50px; top: 40%; margin: 0; font: 600 22px var(--font-hand); color: #8b8f96; transform: rotate(-3deg); }
@keyframes ofd-drop { from { opacity: 0; transform: translateY(-26px) scale(1.06); box-shadow: 0 18px 20px rgba(0, 0, 0, .25); } to { opacity: 1; transform: none; } }
@keyframes ofd-glow { 50% { box-shadow: 0 0 0 4px rgba(217, 144, 42, .45); } }

/* tablet with the Deck board */
.ofd-board { grid-area: board; padding: 12px; border-radius: 22px; background: #1d1f23; box-shadow: 0 0 0 2px #2b2e33 inset, 0 16px 28px rgba(40, 20, 6, .45); min-width: 0; }
.ofd-board header { padding: 8px 12px; margin: 0; border-radius: 12px 12px 0 0; background: linear-gradient(90deg, var(--nc), #1a95d8); }
.ofd-board h3 { color: #fff; font-size: 14px; }
.ofd-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 10px; min-height: 230px; border-radius: 0 0 12px 12px; background: #f5f6f8; }
.ofd-col h4 { margin: 0 0 8px; font: 700 12px var(--font-b); color: #3b4048; display: flex; justify-content: space-between; gap: 4px; }
.ofd-n { min-width: 20px; padding: 0 6px; border-radius: 10px; background: #e3e6ea; color: #3b4048; font: 700 11px var(--font-m); text-align: center; }
.c-overdue h4 { color: var(--red); } .c-overdue .ofd-n { background: #fbe3e1; color: var(--red); }
.ofd-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.ofd-card { padding: 8px 9px; border-radius: 8px; background: #fff; border: 1px solid #e3e6ea; box-shadow: 0 1px 2px rgba(0, 0, 0, .06); font: 600 12.5px/1.3 var(--font-b); color: var(--ink); overflow-wrap: anywhere; }
.ofd-card.in { animation: ofd-slide .5s cubic-bezier(.2, .8, .3, 1) both; }
.ofd-card .lb { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 0; }
.ofd-card .lb i { font: 600 10px var(--font-b); font-style: normal; padding: 1px 7px; border-radius: 9px; color: #fff; background: #7c6fbf; }
.ofd-card .lb i.k-kunde { background: #0082c9; } .ofd-card .lb i.k-buchhaltung { background: #b77b1d; } .ofd-card .lb i.k-dringend { background: var(--red); }
.ofd-card .du { display: inline-block; margin: 6px 0 0; padding: 1px 7px; border-radius: 9px; font: 600 10.5px var(--font-m); background: #eef0f3; color: #4a5059; }
.ofd-card .du.over { background: #fbe3e1; color: var(--red); } .ofd-card .du.today { background: #fff1d6; color: #8a5d12; }
@keyframes ofd-slide { from { opacity: 0; transform: translateX(-40px) rotate(-3deg); } to { opacity: 1; transform: none; } }

/* manila folder with files */
.ofd-files { grid-area: files; position: relative; padding: 34px 16px 16px; border-radius: 4px 10px 10px 10px; min-width: 0;
  background: linear-gradient(180deg, #f2d79b, #e8c77f); box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 12px 22px rgba(40, 20, 6, .4); }
.ofd-folder { position: absolute; left: 0; top: -14px; width: 42%; height: 18px; }
.ofd-tab { display: block; width: 100%; height: 100%; border-radius: 8px 8px 0 0; background: #f2d79b; }
.ofd-files h3 { position: absolute; top: 9px; left: 16px; font-size: 13px; color: #5b4314; }
.ofd-fl { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.ofd-fl li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 6px;
  background: #fffdf8; box-shadow: 0 1px 2px rgba(60, 40, 6, .25); font: 600 12.5px/1.3 var(--font-b); color: var(--ink); }
.ofd-fl li.in { animation: ofd-land .6s cubic-bezier(.2, .9, .3, 1.15) both; }
.ofd-fl .nm { overflow-wrap: anywhere; min-width: 0; }
.ofd-fl small { display: block; font: 500 10.5px var(--font-m); color: var(--soft); }
.ofd-fl .new { padding: 1px 7px; border-radius: 9px; background: #2d8a4e; color: #fff; font: 700 10px var(--font-m); text-transform: uppercase; }
.fi { position: relative; width: 26px; height: 32px; border-radius: 2px 8px 2px 2px; background: #fff; border: 1px solid #cdd2d8; }
.fi::after { content: attr(data-k); position: absolute; left: -3px; bottom: 4px; padding: 1px 3px; border-radius: 2px; font: 700 8px var(--font-m); color: #fff; background: #5b6470; text-transform: uppercase; }
.fi.k-pdf::after { background: #d0372b; } .fi.k-md::after { background: #3b4048; } .fi.k-csv::after { background: #2d8a4e; }
@keyframes ofd-land { 0% { opacity: 0; transform: translateY(-60px) rotate(7deg) scale(.9); } 70% { opacity: 1; transform: translateY(4px) rotate(-1deg); } 100% { transform: none; } }

/* phone with Talk */
.ofd-chat { grid-area: chat; padding: 12px 12px 14px; border-radius: 26px; background: #f3f4f6; min-width: 0;
  box-shadow: 0 0 0 7px #1d1f23, 0 0 0 8px #3a3d42, 0 16px 26px rgba(40, 20, 6, .45); margin: 8px; }
.ofd-chat header { padding: 2px 4px 8px; border-bottom: 1px solid #e1e3e6; }
.ofd-chat h3 { font-size: 13px; }
.ofd-badge { padding: 1px 8px; border-radius: 10px; background: var(--nc); color: #fff; font: 700 11px var(--font-m); }
.ofd-badge:empty { display: none; }
.ofd-msgs { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.ofd-msgs li { justify-self: start; max-width: 96%; padding: 7px 10px; border-radius: 4px 14px 14px 14px; background: #fff; box-shadow: 0 1px 1px rgba(0, 0, 0, .08);
  font: 400 12.5px/1.35 var(--font-b); color: var(--ink); overflow-wrap: anywhere; }
.ofd-msgs b { display: block; font: 700 11px var(--font-b); color: var(--nc-d); }
.ofd-msgs li.in { animation: ofd-pop .4s cubic-bezier(.2, .9, .3, 1.3) both; }
.ofd-msgs li.none { background: transparent; box-shadow: none; color: var(--soft); }
@keyframes ofd-pop { from { opacity: 0; transform: scale(.6); transform-origin: 0 0; } to { opacity: 1; transform: none; } }

/* typewriter sheet */
.ofd-paper { grid-area: paper; position: relative; padding: 26px clamp(18px, 4vw, 48px) 30px; background: var(--paper); border-radius: 3px; cursor: default;
  background-image: repeating-linear-gradient(180deg, transparent 0 27px, rgba(0, 130, 201, .09) 27px 28px);
  box-shadow: 0 2px 3px rgba(0, 0, 0, .15), 0 22px 34px rgba(40, 20, 6, .4); transform: rotate(.25deg); }
.ofd-paper h3 { font: 700 13px var(--font-m); letter-spacing: .14em; text-transform: uppercase; color: #8b8f96; margin: 0 0 10px; }
.ofd-type { min-height: 9em; font: 400 clamp(14.5px, 1.8vw, 16.5px)/28px "Courier Prime", "Courier New", var(--font-m); color: #1d1f23; white-space: pre-wrap; overflow-wrap: anywhere; }
.ofd-type .h { font-weight: 700; color: #00507e; }
.ofd-type .caret { display: inline-block; width: .55em; height: 1.05em; margin-left: 1px; vertical-align: -2px; background: #1d1f23; animation: ofd-blink .8s steps(1) infinite; }
.ofd-fb { margin: 12px 0 0; font: 600 18px var(--font-hand); color: var(--red); transform: rotate(-1deg); }
@keyframes ofd-blink { 50% { opacity: 0; } }
.ofd.idle .ofd-plan, .ofd.idle .ofd-board, .ofd.idle .ofd-files, .ofd.idle .ofd-chat, .ofd.idle .ofd-paper { filter: saturate(.75); }

/* ---- receipts: Nextcloud mock-ups */
.ofr { margin: 30px 0 8px; }
.ofr-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 14px 0 0; }
.ofr-r { margin: 0; min-width: 0; }
.ofr-r.in { animation: ofr-in .6s cubic-bezier(.2, .8, .3, 1) both; }
.ofr-r.r-file.in { animation-delay: .35s; } .ofr-r.r-event.in { animation-delay: .7s; }
@keyframes ofr-in { from { opacity: 0; transform: translateY(24px) scale(.97); } to { opacity: 1; transform: none; } }
.ofr-ok { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font: 700 15px var(--font-b); color: var(--text); }
.ofr-ok::before { content: "✓"; display: grid; place-items: center; flex: 0 0 28px; height: 28px; border-radius: 50%; background: #2d8a4e; color: #fff; font-size: 16px; }
.ofr-ok.fail::before { content: "!"; background: #c9372c; }
.ofr-ok.fail { color: var(--muted); }
.ofr-clean { margin: 14px 0 0; font-size: 14px; }
.ofr-share { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.ofr-share a, .ofr-share button { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 8px; font: 600 14px var(--font-b);
  color: var(--text); background: transparent; border: 1px solid var(--line-2, #2e3746); text-decoration: none; cursor: pointer; }
.ofr-share .ofr-wa { background: #1f8f4e; border-color: #1f8f4e; color: #fff; }

.nc { position: relative; border-radius: 10px; overflow: hidden; background: #fff; color: #222; font: 400 12px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .12), 0 14px 30px rgba(0, 0, 0, .3); aspect-ratio: 4 / 3.2; display: flex; flex-direction: column; }
.nc-top { flex: 0 0 34px; display: flex; align-items: center; gap: 10px; padding: 0 10px; background: linear-gradient(90deg, #0082c9, #1a95d8); color: #fff; }
.nc-logo { display: flex; gap: 2px; } .nc-logo i { width: 9px; height: 9px; border: 2px solid #fff; border-radius: 50%; } .nc-logo i:nth-child(2) { width: 12px; height: 12px; margin-top: -2px; }
.nc-apps { display: flex; gap: 8px; margin-left: 4px; } .nc-apps i { width: 15px; height: 15px; border-radius: 3px; background: rgba(255, 255, 255, .55); }
.nc-apps i.on { background: #fff; box-shadow: 0 3px 0 -1px #fff; }
.nc-top b { font: 600 12px system-ui, sans-serif; margin-left: 2px; }
.nc-top .nc-av { margin-left: auto; width: 20px; height: 20px; border-radius: 50%; background: #c7e3f4; }
.nc-main { flex: 1; display: flex; min-height: 0; }
.nc-nav { flex: 0 0 30%; padding: 8px 6px; background: #f5f5f5; border-right: 1px solid #e6e6e6; overflow: hidden; }
.nc-nav p { margin: 0 0 3px; padding: 5px 7px; border-radius: 6px; color: #444; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nc-nav p.on { background: #dbeefa; color: #00507e; font-weight: 600; }
.nc-nav p i { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: #0082c9; }
.nc-nav p.btn { margin-bottom: 8px; background: #0082c9; color: #fff; font-weight: 600; text-align: center; }
.nc-body { flex: 1; min-width: 0; padding: 8px 10px; overflow: hidden; position: relative; }
.nc-h { margin: 0 0 8px; font-weight: 700; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nc-crumb { margin: 0 0 8px; color: #666; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nc-crumb b { color: #222; }
/* deck */
.nc-stacks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.nc-stacks h5 { margin: 0 0 5px; font: 700 11px system-ui, sans-serif; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nc-c { margin: 0 0 5px; padding: 5px 6px; border-radius: 6px; background: #fff; border: 1px solid #e3e3e3; box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
  font-size: 10.5px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.nc-c.new { border: 2px solid #0082c9; box-shadow: 0 0 0 3px rgba(0, 130, 201, .18); display: block; }
.nc-c.new b { display: block; font-size: 11px; }
.nc-c .ck { display: block; color: #555; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nc-c .ck::before { content: "☐ "; }
.nc-c .meta { display: flex; gap: 5px; margin-top: 4px; font: 600 9.5px system-ui, sans-serif; color: #555; }
.nc-c .meta span { padding: 0 5px; border-radius: 7px; background: #f0f0f0; }
.nc-c .meta span.due { background: #fff1d6; color: #8a5d12; }
.nc-c.ghost { color: #777; }
/* files */
.nc-row { display: grid; grid-template-columns: 18px minmax(0, 1fr) 46px 64px; gap: 7px; align-items: center; padding: 5px 4px; border-bottom: 1px solid #eee; }
.nc-row.head { color: #777; font-size: 10.5px; } .nc-row.head span:first-child { visibility: hidden; }
.nc-row span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nc-row .ic { width: 14px; height: 17px; border-radius: 1px 4px 1px 1px; background: #fff; border: 1px solid #b9c0c7; }
.nc-row .ic.dir { width: 17px; height: 13px; border: 0; border-radius: 2px; background: #0082c9; }
.nc-row.new { background: #e8f4fb; box-shadow: inset 3px 0 0 #0082c9; font-weight: 600; }
.nc-row .r { text-align: right; color: #666; }
.nc-peek { position: absolute; right: 8px; bottom: 8px; left: 30%; height: 44%; padding: 7px 9px; border-radius: 8px; background: #fff; border: 1px solid #e3e3e3;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .15); font: 400 9.5px/1.35 ui-monospace, Menlo, monospace; color: #333; white-space: pre-wrap; overflow: hidden; }
/* calendar */
.nc-calhead { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; }
.nc-calhead span { padding: 2px 8px; border: 1px solid #ddd; border-radius: 12px; font-size: 10.5px; }
.nc-calhead b { font-size: 12px; }
.nc-grid { position: relative; height: calc(100% - 28px); margin-left: 30px; border-left: 1px solid #e6e6e6; }
.nc-grid .hr { position: absolute; left: -30px; right: 0; height: 0; border-top: 1px solid #efefef; font: 500 9px system-ui, sans-serif; color: #999; }
.nc-grid .hr span { position: relative; top: -6px; background: #fff; padding-right: 3px; }
.nc-e { position: absolute; left: 4px; right: 4px; top: var(--y); height: var(--h); min-height: 14px; padding: 1px 5px; border-radius: 4px; overflow: hidden;
  background: #cfe8f7; border-left: 3px solid #0082c9; font-size: 9.5px; line-height: 1.25; color: #0b3a57; white-space: nowrap; text-overflow: ellipsis; }
.nc-e.fk { background: #0082c9; color: #fff; font-weight: 700; border-left-color: #00507e; box-shadow: 0 0 0 3px rgba(0, 130, 201, .25); z-index: 1; animation: ofd-glow 1.6s ease-in-out 3; }
.nc-tick { position: absolute; right: 8px; top: 42px; padding: 3px 8px; border-radius: 12px; background: #2d8a4e; color: #fff; font: 700 10px system-ui, sans-serif; }

/* ---- how it works (same as the other live pages) */
.cth { margin-top: 40px; }
.cth-steps { margin: 14px 0 18px; padding-left: 1.3em; }
.cth-steps li { margin: 0 0 10px; }
.cth-steps b { display: block; }
.cth-steps span { color: var(--muted); }

@media (max-width: 1000px) {
  .ofs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ofd-desk { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "board board" "plan files" "plan chat" "paper paper"; }
  .ofr-grid { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
}
@media (max-width: 640px) {
  .ofc-go { width: 100%; }
  .ofs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ofd-desk { grid-template-columns: minmax(0, 1fr); grid-template-areas: "board" "plan" "files" "chat" "paper"; gap: 18px; padding: 12px; }
  .ofd-mug { width: 48px; height: 48px; top: 6px; right: 10px; }
  .ofd-mug::after { right: -12px; top: 16px; width: 14px; height: 14px; border-width: 5px; }
  .ofd-plan { transform: none; padding-left: 26px; }
  .ofd-day { height: 420px; }
  .ofd-board { padding: 7px; border-radius: 16px; }
  .ofd-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ofd-chat { margin: 7px; }
  .ofd-paper { transform: none; }
  .nc { aspect-ratio: 4 / 3.6; }
}
@media (prefers-reduced-motion: reduce) {
  .ofc *, .ofc *::before, .ofc *::after { animation: none !important; transition: none !important; }
  .ofd-mug i { display: none; }
}