@font-face {
  font-family: "IBM Plex Sans KR";
  src: url("/fonts/IBMPlexSansKR-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans KR";
  src: url("/fonts/IBMPlexSansKR-Light.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans KR";
  src: url("/fonts/IBMPlexSansKR-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans KR";
  src: url("/fonts/IBMPlexSansKR-Medium.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans KR";
  src: url("/fonts/IBMPlexSansKR-Medium.ttf") format("truetype");
  font-weight: 650;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans KR";
  src: url("/fonts/IBMPlexSansKR-Medium.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root,
[data-theme="light"] {
  --bg: #f3f4f6;
  --bg-sidebar: #ffffff;
  --bg-stage: #f3f4f6;
  --top-fade-rgb: 243, 244, 246;
  --bg-dock: rgba(255, 255, 255, 0.92);
  --surface: #ffffff;
  --border: #d7dbe2;
  --text: #16181d;
  --text-muted: #6b7280;
  --accent: #1a1d24;
  --accent-soft: rgba(26, 29, 36, 0.08);
  --accent-contrast: #ffffff;
  --hover: rgba(0, 0, 0, 0.04);
  --btn-hover: #eceff3;
  --stage-glow: transparent;
  --sidebar-glow: transparent;
  --shadow-card: 0 4px 10px rgba(0, 0, 0, 0.08), 0 14px 32px rgba(0, 0, 0, 0.14), 0 28px 56px rgba(0, 0, 0, 0.12);
  --shadow-card-hover: 0 8px 16px rgba(0, 0, 0, 0.1), 0 22px 44px rgba(0, 0, 0, 0.16), 0 40px 72px rgba(0, 0, 0, 0.14);
  --card-border: rgba(0, 0, 0, 0.12);
  --card-inset: rgba(255, 255, 255, 0.9);
  --card-body: #f7f8fa;
  --card-body-line: rgba(0, 0, 0, 0.06);
  --media-bg: #e8eaef;
  --outline-strong: rgba(26, 29, 36, 0.72);
  --modal-backdrop: rgba(24, 28, 36, 0.42);
  --modal-label: #ffffff;
  --modal-label-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 2px 10px rgba(0, 0, 0, 0.28);
  --modal-input-bg: rgba(255, 255, 255, 0.88);
  --modal-input-border: rgba(17, 19, 24, 0.18);
  --modal-input-placeholder: rgba(17, 19, 24, 0.4);
  --modal-control-bg: rgba(255, 255, 255, 0.88);
  --modal-control-border: rgba(17, 19, 24, 0.18);
  --modal-control-text: #111318;
  --modal-dialog-bg: transparent;
  --modal-dialog-border: transparent;
  --modal-dialog-shadow: none;
  --modal-dialog-pad: 0.25rem 0.15rem;
  --modal-dialog-radius: 0;
  --modal-dialog-blur: none;
  --ctx-bg: #ffffff;
  --shine-soft: rgba(255, 255, 255, 0.35);
  --shine-mid: rgba(255, 255, 255, 0.75);
  --radius: 6px;
  --dock-h: 4.45rem;
  --dock-island-h: 2.7rem;
  --dock-solid: #ffffff;
  /* iOS Safari toolbar / address-bar chrome */
  --safari-chrome: #f3f4f6;
  --crew-modal-chrome: #343a44;
  --memo-stick-h: 2.7rem;
  --stick-rail-h: 2.7rem;
  --scroll-bounce: contain;
  --font-ui: "IBM Plex Sans KR", sans-serif;
  --font-sans: var(--font-ui);
  --font-mono: "IBM Plex Sans KR", sans-serif;
  --safari-bottom-gap: 0px;
  --dock-safe-bottom: env(safe-area-inset-bottom, 0px);
  --dock-btn-outline: color-mix(in srgb, var(--text) 22%, transparent);
  --dock-btn-outline-strong: color-mix(in srgb, var(--text) 38%, transparent);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-snap: cubic-bezier(0.34, 1.3, 0.64, 1);
  --dur-fast: 0.14s;
  --dur: 0.22s;
  --dur-slow: 0.36s;
}

[data-theme="dark"] {
  --bg: #161a21;
  --bg-sidebar: #161a21;
  --bg-stage: #161a21;
  --top-fade-rgb: 22, 26, 33;
  --bg-dock: rgba(12, 14, 18, 0.94);
  --dock-solid: #0c0e12;
  --safari-chrome: #161a21;
  --crew-modal-chrome: #0b0d11;
  --surface: #1c222c;
  --border: #2a3340;
  --text: #e8edf4;
  --text-muted: #8b97a8;
  --accent: #e8edf4;
  --accent-soft: rgba(255, 255, 255, 0.08);
  --accent-contrast: #12151a;
  --hover: rgba(255, 255, 255, 0.04);
  --btn-hover: #242b36;
  --stage-glow: transparent;
  --sidebar-glow: transparent;
  --shadow-card: 0 12px 32px rgba(0, 0, 0, 0.35), 0 28px 72px rgba(0, 0, 0, 0.45);
  --shadow-card-hover: 0 18px 40px rgba(0, 0, 0, 0.4), 0 36px 80px rgba(0, 0, 0, 0.48);
  --card-border: rgba(255, 255, 255, 0.14);
  --card-inset: rgba(255, 255, 255, 0.12);
  --card-body: #1a2029;
  --card-body-line: rgba(255, 255, 255, 0.06);
  --media-bg: #0f1217;
  --outline-strong: rgba(232, 237, 244, 0.78);
  --modal-backdrop: rgba(8, 10, 14, 0.42);
  --modal-label: #f2f5fa;
  --modal-label-shadow: 0 1px 10px rgba(0, 0, 0, 0.65);
  --modal-input-bg: rgba(10, 12, 18, 0.72);
  --modal-input-border: rgba(255, 255, 255, 0.28);
  --modal-input-placeholder: rgba(226, 232, 240, 0.62);
  --modal-control-bg: rgba(10, 12, 18, 0.7);
  --modal-control-border: rgba(255, 255, 255, 0.28);
  --modal-control-text: #f2f5fa;
  --modal-dialog-bg: transparent;
  --modal-dialog-border: transparent;
  --modal-dialog-shadow: none;
  --modal-dialog-pad: 0.25rem 0.15rem;
  --modal-dialog-radius: 0;
  --modal-dialog-blur: none;
  --ctx-bg: #1a2029;
  --shine-soft: rgba(255, 255, 255, 0.08);
  --shine-mid: rgba(255, 255, 255, 0.38);
  --dock-btn-outline: color-mix(in srgb, var(--text) 30%, transparent);
  --dock-btn-outline-strong: color-mix(in srgb, var(--text) 52%, transparent);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  min-height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-weight: 300;
  touch-action: manipulation;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

.app {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: "stage";
  height: 100%;
  max-height: 100dvh;
  overflow: hidden;
}

.dock-stick {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--dock-h) + 1.15rem);
  /* Above dragging memos (is-dragging uses 10000). */
  z-index: 10060;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 0;
  pointer-events: none;
  box-sizing: border-box;
}

.dock-stick[hidden] {
  display: none !important;
}

.dock-stick__cluster {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: max-content;
  max-width: calc(100vw - 1.5rem);
  margin: 0 auto;
  pointer-events: none;
  gap: 0.45rem;
}

.dock-stick .dock__trash {
  position: static;
  left: auto;
  top: auto;
  flex: 0 0 auto;
  transform: none;
}

.dock-stick .dock__trash:hover,
.dock-stick .dock__trash[aria-expanded="true"] {
  transform: translateY(-1px);
}

.dock-stick .dock__trash:active {
  transform: scale(0.94);
}

.dock-stick .theme-dots {
  pointer-events: auto;
  height: var(--stick-rail-h, 2.7rem);
}

.dock-stick__rail {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: max-content;
  height: var(--stick-rail-h);
  margin: 0;
  padding: 0 0.78rem;
  overflow: visible;
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-dock) 58%, transparent);
  box-shadow:
    0 10px 24px rgba(15, 18, 24, 0.1),
    0 2px 6px rgba(15, 18, 24, 0.06);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-sizing: border-box;
}

.dock-stick__rail[hidden] {
  display: none !important;
}

.dock-stick__crew {
  flex: 0 0 auto;
  height: 1.7rem;
  padding: 0 0.58rem;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--crew-hue, #5b8def) 22%, var(--surface));
  color: color-mix(in srgb, var(--crew-hue, #5b8def) 78%, var(--text));
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.dock-stick__crew:hover {
  background: color-mix(in srgb, var(--crew-hue, #5b8def) 32%, var(--surface));
}

html[data-theme="dark"] .dock-stick__crew {
  background: color-mix(in srgb, var(--crew-hue, #5b8def) 24%, var(--surface));
}

.cal-sync {
  display: grid;
  gap: 0.7rem;
}

.cal-sync__lead,
.cal-sync__hint {
  margin: 0;
  color: color-mix(in srgb, var(--text) 72%, var(--text-muted));
  font-size: 0.82rem;
  line-height: 1.45;
  font-weight: 500;
}

.cal-sync__hint {
  font-size: 0.76rem;
  color: var(--text-muted);
}

.modal__dialog.cal-sync {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 1.15rem;
  padding: 1.15rem;
  box-shadow: var(--shadow-card);
  color: var(--text);
}

.cal-sync .modal__actions .btn {
  text-decoration: none;
}

.cal-sync__title {
  margin: 0.2rem 0 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.cal-sync__form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.45rem;
}

.cal-sync__error {
  margin: 0;
  color: #c4473a;
  font-size: 0.78rem;
  font-weight: 650;
}

.cal-feed-list {
  display: grid;
  gap: 0;
}

.cal-feed {
  display: grid;
  gap: 0.42rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 52%, transparent);
}

.cal-feed:last-child {
  border-bottom: 0;
  padding-bottom: 0.1rem;
}

.cal-feed__row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.cal-feed__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.86rem;
  font-weight: 650;
}

.cal-feed__colors {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.28rem;
}

.cal-feed__swatch {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 0.7rem;
  height: 0.7rem;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
  background: var(--cal-color);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #000 16%, transparent);
  cursor: pointer;
}

.cal-feed__swatch.is-on {
  box-shadow: 0 0 0 1.5px var(--surface), 0 0 0 3px var(--cal-color);
}

.cal-feed__off {
  flex: 0 0 auto;
  height: 1.35rem;
  padding: 0 0.55rem;
  border: 1px solid color-mix(in srgb, #c4473a 35%, var(--border));
  border-radius: 999px;
  background: transparent;
  color: #c4473a;
  font-size: 0.68rem;
  font-weight: 650;
  cursor: pointer;
}

.cal-sync__share {
  display: grid;
  gap: 0.55rem;
}

.cal-sync__share[hidden] {
  display: none;
}

.dock-stick__mail,
.dock-stick__icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.05rem;
  height: 2.05rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition:
    color var(--dur-fast) ease,
    transform var(--dur) var(--ease-out),
    background var(--dur-fast) ease;
}

.dock-stick__mail svg,
.dock-stick__icon svg {
  width: 1.15rem;
  height: 1.15rem;
}

.dock-stick__mail:hover,
.dock-stick__icon:hover {
  color: color-mix(in srgb, var(--text) 78%, var(--text-muted));
  transform: scale(1.08);
}

.dock-stick__mail:active,
.dock-stick__icon:active {
  transform: scale(0.92);
}

.dock-stick__mail:disabled {
  opacity: 0.45;
}

.dock-stick__preset {
  flex: 0 0 auto;
  width: 1.12rem;
  height: 1.28rem;
  padding: 0;
  border-radius: 2px;
  touch-action: none;
  cursor: grab;
  transition: transform 0.14s ease;
}

.dock-stick__preset:hover {
  transform: translateY(-1px);
}


.dock-stick__preset:active,
body.is-preset-dragging .dock-stick__preset {
  cursor: grabbing;
}

.dock-stick__ghost {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1200;
  width: 2.35rem;
  height: 2.7rem;
  pointer-events: none;
  opacity: 0.9;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.22));
}

.dock-stick__note {
  --memo-fold: 0.32rem;
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.dock-stick__note-sheet {
  position: absolute;
  inset: 0;
  background: var(--memo-color, #ffb300);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 2px 2px 0 2px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - var(--memo-fold)),
    calc(100% - var(--memo-fold)) 100%,
    0 100%
  );
}

.dock-stick__note-fold {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 var(--memo-fold) var(--memo-fold);
  border-color:
    transparent
    transparent
    transparent
    color-mix(in srgb, var(--memo-color, #ffb300) 55%, #1a1208);
  pointer-events: none;
}

html.is-boot,
html.is-boot body {
  height: 100%;
}

.boot {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background:
    radial-gradient(ellipse 80% 50% at 50% 40%, var(--stage-glow), transparent 55%),
    var(--bg-stage);
}

.boot[hidden] {
  display: none;
}

.boot-login {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
  width: min(18.5rem, calc(100vw - 2.5rem));
}

.boot-login[hidden] {
  display: none;
}

.boot-login__brand {
  margin: 0 0 0.15rem;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.18em;
}

.boot-login__input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-size: 16px;
}

.boot-login__input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.boot-login__error {
  margin: 0;
  color: #c4473a;
  font-size: 0.82rem;
  text-align: center;
}

.boot-login__error[hidden] {
  display: none;
}

.boot-login .boot__btn {
  width: 100%;
  min-width: 0;
}

.pwa-install {
  position: fixed;
  left: 50%;
  bottom: calc(var(--dock-h) + env(safe-area-inset-bottom, 0px) + 0.85rem);
  z-index: 12040;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: min(22rem, calc(100vw - 1.5rem));
  padding: 0.7rem 0.7rem 0.7rem 0.95rem;
  border-radius: 1rem;
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  background: color-mix(in srgb, var(--bg-dock) 88%, transparent);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  transform: translateX(-50%);
}

.pwa-install[hidden] {
  display: none !important;
}

.pwa-install__copy {
  flex: 1 1 auto;
  margin: 0;
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 650;
}

.pwa-install__btn {
  flex: 0 0 auto;
  height: 2rem;
  padding: 0 0.8rem;
  border-radius: 999px;
  background: var(--text);
  color: var(--accent-contrast);
  font-size: 0.78rem;
  font-weight: 700;
}

.pwa-install__skip {
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 999px;
  color: var(--text-muted);
  font-size: 1.2rem;
  line-height: 1;
}

.pwa-notify-ask {
  position: fixed;
  inset: 0;
  z-index: 13000;
  display: grid;
  place-items: end center;
  padding: 0 1rem calc(var(--dock-h) + env(safe-area-inset-bottom, 0px) + 1rem);
  background: rgba(0, 0, 0, 0.28);
}

.pwa-notify-ask__card {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: min(22rem, 100%);
  padding: 0.75rem 0.75rem 0.75rem 1rem;
  border-radius: 1rem;
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  background: color-mix(in srgb, var(--bg-dock) 92%, transparent);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.pwa-notify-ask__copy {
  flex: 1 1 auto;
  margin: 0;
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 650;
}

.pwa-notify-ask__btn {
  flex: 0 0 auto;
  height: 2rem;
  padding: 0 0.85rem;
  border-radius: 999px;
  background: var(--text);
  color: var(--accent-contrast);
  font-size: 0.78rem;
  font-weight: 700;
}

.pwa-notify-ask__skip {
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 999px;
  color: var(--text-muted);
  font-size: 1.2rem;
  line-height: 1;
}

@media (hover: hover) and (pointer: fine) {
  .pwa-notify-ask {
    display: none !important;
    pointer-events: none !important;
  }
}

.boot__status {
  margin: 0;
  color: var(--text-muted, var(--text));
  font-family: var(--font-sans);
  font-size: 0.95rem;
}

.boot__btn {
  min-width: 10rem;
  padding: 0.85rem 1.4rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}

.boot__btn:hover {
  background: var(--btn-hover);
}

.boot__btn:disabled {
  opacity: 0.6;
  cursor: wait;
}

.dock {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  grid-area: unset;
  /* Above dragging memos (is-dragging uses 10000). */
  z-index: 10050;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.85rem;
  height: var(--dock-h);
  min-height: var(--dock-h);
  padding: 0 0.9rem;
  border-top: none;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    color-mix(in srgb, var(--bg-stage) 42%, transparent) 55%,
    color-mix(in srgb, var(--bg-stage) 82%, transparent) 100%
  );
  overflow: visible;
  box-sizing: border-box;
}

.dock__start,
.dock__center,
.dock__end {
  display: flex;
  align-items: center;
  align-self: center;
  gap: 0.45rem;
  min-height: 0;
}

.dock__start {
  justify-self: start;
}

.dock__center {
  justify-self: center;
  gap: 0.55rem;
  height: auto;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.dock__end {
  justify-self: end;
}

.dock__trash[hidden] {
  display: none !important;
}

.dock__trash {
  pointer-events: auto;
  position: absolute;
  left: calc(100% + 0.5rem);
  top: 50%;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: var(--stick-rail-h);
  height: var(--stick-rail-h);
  padding: 0;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  background: color-mix(in srgb, var(--bg-dock) 58%, transparent);
  color: var(--text-muted);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transform: translateY(-50%);
  transition:
    background var(--dur-fast) ease,
    color var(--dur-fast) ease,
    border-color var(--dur-fast) ease,
    transform var(--dur) var(--ease-out),
    box-shadow var(--dur) ease;
}

.dock__trash:hover,
.dock__trash[aria-expanded="true"] {
  background: var(--btn-hover);
  color: var(--text);
  border-color: color-mix(in srgb, var(--text) 22%, var(--border));
  transform: translateY(calc(-50% - 1px));
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12);
}

.dock__trash:active {
  transform: translateY(-50%) scale(0.94);
}

.dock__trash.has-items {
  color: var(--text);
}

.dock__trash-icon {
  width: 1.15rem;
  height: 1.15rem;
}

.dock__trash-count {
  position: absolute;
  top: -0.2rem;
  right: -0.2rem;
  min-width: 1.05rem;
  height: 1.05rem;
  padding: 0 0.22rem;
  border-radius: 999px;
  background: #ef5f8f;
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1.05rem;
  text-align: center;
}

.dock-app {
  --dock-icon-size: 2.45rem;
  --dock-icon-radius: 50%;
  position: relative;
  display: grid;
  place-items: center;
  width: var(--dock-icon-size);
  height: var(--dock-icon-size);
  padding: 0;
  border-radius: var(--dock-icon-radius);
  overflow: visible;
  line-height: 0;
  font-size: 0;
  opacity: 1;
  background: transparent;
  transition:
    background var(--dur) ease,
    transform var(--dur) var(--ease-out);
}

.dock-app .home-app__icon {
  position: relative;
  top: auto;
  left: auto;
  width: var(--dock-icon-size);
  height: var(--dock-icon-size);
  border-radius: 50%;
  border: none;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.08),
    0 8px 20px rgba(0, 0, 0, 0.16);
  transform: none;
  translate: none;
  filter: none;
  opacity: 0.9;
  transition:
    box-shadow var(--dur) ease,
    transform var(--dur) var(--ease-out),
    opacity var(--dur) ease,
    filter var(--dur) ease;
}

.dock-app.is-active .home-app__icon {
  opacity: 1;
  transform: scale(1.06);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.1),
    0 12px 26px rgba(0, 0, 0, 0.2);
}

.dock-app .home-app__slab {
  top: 20%;
  left: 24%;
  width: 52%;
  height: 62%;
}

.dock-app .home-app__mark--memo {
  width: 52%;
  height: 56%;
}

.dock-app .home-app__mark--cal {
  width: 54%;
  height: 58%;
}

.dock-app .home-app__mark--mail {
  width: 56%;
  height: 54%;
}

.dock-app:hover {
  transform: translateY(-3px) scale(1.06);
}

@media (hover: hover) {
  .dock-app:hover .home-app__icon {
    opacity: 1;
  }
}

.dock-app:active {
  transform: translateY(0) scale(0.94);
}

.dock-app.is-active {
  background: transparent;
}

html[data-theme="dark"] .dock-app.is-active {
  background: transparent;
}

html[data-theme="dark"] .dock-app .home-app__icon {
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.34),
    0 10px 24px rgba(0, 0, 0, 0.42);
}

html[data-theme="dark"] .dock-app.is-active .home-app__icon {
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.38),
    0 14px 30px rgba(0, 0, 0, 0.48);
}

.dock__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 2.5rem;
  padding: 0.55rem 0.95rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 600;
  transition: background 0.12s ease;
}

.dock__btn:hover {
  background: var(--btn-hover);
}

.dock__btn[hidden] {
  display: none;
}

.dock__btn.dock__btn--back {
  position: relative;
  width: var(--dock-island-h);
  height: var(--dock-island-h);
  min-width: var(--dock-island-h);
  min-height: var(--dock-island-h);
  padding: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--bg-dock) 78%, transparent);
  color: var(--text);
  border: 1px solid color-mix(in srgb, var(--border) 68%, transparent);
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.42);
  -webkit-backdrop-filter: saturate(1.25) blur(18px);
  backdrop-filter: saturate(1.25) blur(18px);
  transition:
    color 0.15s ease,
    background 0.15s ease,
    border-color 0.15s ease,
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

.dock__btn.dock__btn--back:hover {
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--bg-dock) 92%, transparent);
  border-color: color-mix(in srgb, var(--text) 22%, var(--border));
}

html[data-theme="dark"] .theme-dots {
  box-shadow: none;
}

html[data-theme="dark"] .dock__btn.dock__btn--back {
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .dock__btn.dock__btn--back:hover {
  background: color-mix(in srgb, var(--bg-dock) 92%, transparent);
  border-color: color-mix(in srgb, var(--text) 28%, var(--border));
}

.dock__home-icon {
  width: 1.18rem;
  height: 1.18rem;
  display: block;
}

.dock__gemini-icon {
  display: none;
  width: 1.28rem;
  height: 1.28rem;
  object-fit: contain;
  pointer-events: none;
  position: relative;
  z-index: 1;
}

.dock__btn.dock__btn--back {
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
}

.dock__btn.dock__btn--back.is-gemini {
  --llm-aurora: conic-gradient(
    from 0deg,
    #ff5d8f,
    #7a6bff,
    #3ec8ff,
    #3dd68c,
    #ffc14a,
    #ff7a3c,
    #ff5d8f
  );
  isolation: isolate;
  overflow: hidden;
}

.dock__btn.dock__btn--back.is-gemini::before {
  content: "";
  position: absolute;
  inset: -35%;
  z-index: 0;
  border-radius: 50%;
  background: var(--llm-aurora);
  opacity: 0.28;
  filter: blur(16px) saturate(1.05);
  pointer-events: none;
  animation:
    llm-aurora-spin 14s linear infinite,
    llm-aurora-wave 5.5s ease-in-out infinite;
}

.dock__btn.dock__btn--back.is-gemini .dock__home-icon {
  display: none;
}

.dock__btn.dock__btn--back.is-gemini .dock__gemini-icon {
  display: block;
}

.theme-dots {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: var(--dock-island-h);
  gap: 0.48rem;
  padding: 0 0.72rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border) 68%, transparent);
  background: color-mix(in srgb, var(--bg-dock) 78%, transparent);
  box-shadow: none;
  -webkit-backdrop-filter: saturate(1.25) blur(18px);
  backdrop-filter: saturate(1.25) blur(18px);
}

.theme-dots[hidden],
html:not(.is-home) .theme-dots {
  display: none !important;
}

.theme-dots__thumb {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: 0.78rem;
  height: 0.78rem;
  box-sizing: border-box;
  border-radius: 999px;
  border: 2px solid var(--outline-strong);
  background: transparent;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(0, 0, 0);
  transition:
    transform 0.32s var(--ease-out),
    width 0.32s var(--ease-out),
    height 0.32s var(--ease-out),
    opacity 0.18s ease,
    border-color 0.2s ease;
  will-change: transform;
}

.theme-dots__thumb.is-ready {
  opacity: 1;
}

.theme-dots__thumb.is-snap {
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .theme-dots__thumb {
    transition: none !important;
  }
}

.theme-dot {
  position: relative;
  z-index: 1;
  width: 0.78rem;
  height: 0.78rem;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--border);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
  transition:
    outline-color 0.12s ease,
    outline-offset 0.12s ease,
    transform 0.12s ease;
}

.theme-dot--light {
  background: #f5f6f8;
  border-color: rgba(0, 0, 0, 0.18);
}

.theme-dot--dark {
  background: #111318;
  border-color: rgba(255, 255, 255, 0.18);
}

.theme-dot.is-active {
  outline: none;
}

.theme-dot:hover {
  transform: scale(1.06);
}

.theme-dot:focus-visible {
  outline: 2px solid var(--outline-strong);
  outline-offset: 3px;
}

.stage {
  grid-area: stage;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: var(--scroll-bounce);
  background: var(--bg-stage);
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.stage::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

html[data-theme="dark"] .stage,
html[data-theme="dark"] .boot {
  background: var(--bg-stage);
}

.view {
  min-height: 100%;
  padding: 2.25rem 2.25rem calc(1.5rem + var(--dock-h));
}

.view--tcg {
  padding: 2.5rem 2.5rem calc(2.5rem + var(--dock-h)) !important;
  height: 100%;
  box-sizing: border-box;
}

@media (min-width: 721px) {
  .stage:has(.view--tcg) {
    overflow-x: hidden;
  }

  .view--tcg {
    --tcg-s: 0.95;
    width: 100%;
    max-width: 100%;
    height: auto !important;
    min-height: 100%;
    padding: calc(2.5rem * var(--tcg-s)) calc(2.25rem * var(--tcg-s)) calc((2.25rem + var(--dock-h)) * var(--tcg-s)) !important;
  }

  .view--tcg .gallery {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  justify-content: center;
    gap: calc(1.7rem * var(--tcg-s));
    width: 100%;
    max-width: 95rem;
    margin-inline: auto;
  }

  .view--tcg .card-tile {
    max-width: none;
    border-radius: calc(16px * var(--tcg-s));
  }

  .view--tcg .card-tile__flip,
  .view--tcg .card-tile__face {
    border-radius: calc(10px * var(--tcg-s));
  }

  .view--tcg .card-tile__body {
    padding: calc(0.82rem * var(--tcg-s)) calc(1.05rem * var(--tcg-s)) calc(1.05rem * var(--tcg-s));
    gap: calc(0.18rem * var(--tcg-s));
  }

  .view--tcg .card-tile__title {
    font-size: calc(0.98rem * var(--tcg-s));
  }

  .view--tcg .card-tile__grader {
    font-size: calc(0.62rem * var(--tcg-s));
    padding: calc(0.16rem * var(--tcg-s)) calc(0.48rem * var(--tcg-s));
  }

  .view--tcg .card-tile__collection,
  .view--tcg .card-tile__number {
    font-size: calc(0.72rem * var(--tcg-s));
  }

  .view--tcg .card-tile__footer {
    margin-top: calc(0.55rem * var(--tcg-s));
    padding-top: calc(0.5rem * var(--tcg-s));
  }

  .view--tcg .card-tile__price {
    font-size: calc(0.8rem * var(--tcg-s));
  }

  .view--tcg .card-tile__serial {
    font-size: calc(0.64rem * var(--tcg-s));
  }

  .view--tcg .modal__shell:not(.modal__shell--confirm) {
    width: min(calc(760px * var(--tcg-s)), 100%);
  }

  .view--tcg .modal .field__label {
    font-size: calc(0.84rem * var(--tcg-s));
  }

  .view--tcg .field__input {
    font-size: calc(1rem * var(--tcg-s));
    padding: calc(0.6rem * var(--tcg-s)) calc(0.7rem * var(--tcg-s));
  }

  .view--tcg .create-form__grid {
    grid-template-columns: minmax(0, 1fr) minmax(calc(220px * var(--tcg-s)), calc(280px * var(--tcg-s)));
    gap: calc(1.5rem * var(--tcg-s));
  }
}

.view--home {
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  justify-items: center;
  width: 100%;
  height: 100%;
  min-height: 100%;
  max-width: 720px;
  margin: 0 auto;
  box-sizing: border-box;
}

.home-quote {
  grid-row: 1;
  align-self: start;
  display: grid;
  justify-items: center;
  width: min(28rem, 100%);
  margin: 0 auto;
  padding: 0.15rem 0.75rem 0;
  text-align: center;
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}

.home-quote.is-ready {
  opacity: 1;
  transform: none;
}

.home-quote__mark {
  display: block;
  margin-bottom: -0.15rem;
  color: color-mix(in srgb, var(--text) 22%, transparent);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2.15rem;
  font-weight: 500;
  line-height: 0.7;
  pointer-events: none;
}

.home-quote__text {
  margin: 0;
  max-width: 26rem;
  color: color-mix(in srgb, var(--text) 78%, var(--text-muted));
  font-size: 0.92rem;
  font-weight: 450;
  font-style: italic;
  line-height: 1.55;
  letter-spacing: -0.01em;
}

.home-quote__author {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 0.7rem;
  color: var(--text-muted);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.home-quote__author::before,
.home-quote__author::after {
  content: "";
  width: 1.15rem;
  height: 1px;
  background: color-mix(in srgb, var(--text-muted) 45%, transparent);
}

.home-apps {
  position: relative;
  grid-row: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1.05rem;
}

.home-app {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 0.42rem;
  width: 5.6rem;
  padding: 0.2rem;
  color: var(--text);
  touch-action: none;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
}

.view--home.is-home-editing .home-apps {
  touch-action: none;
}

.view--home.is-home-editing .home-app {
  cursor: grab;
}

.view--home.is-home-editing .home-app.is-flipping {
  transition: transform 0.38s var(--ease-out);
  z-index: 2;
}

.view--home.is-home-editing .home-app.is-dropping {
  pointer-events: none;
}

.view--home.is-home-editing .home-app .home-app__icon,
.view--home.is-home-editing .home-app .home-app__label {
  animation: home-app-jiggle 0.34s ease-in-out infinite alternate;
}

.view--home.is-home-editing .home-app:nth-child(2n) .home-app__icon,
.view--home.is-home-editing .home-app:nth-child(2n) .home-app__label {
  animation-delay: -0.11s;
}

.view--home.is-home-editing .home-app:nth-child(3n) .home-app__icon,
.view--home.is-home-editing .home-app:nth-child(3n) .home-app__label {
  animation-delay: -0.2s;
}

.view--home.is-home-editing .home-app.is-dragging {
  cursor: grabbing;
  opacity: 0.98;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.2));
  will-change: transform;
  z-index: 20;
}

.view--home.is-home-editing .home-app.is-dragging .home-app__icon,
.view--home.is-home-editing .home-app.is-dragging .home-app__label,
.view--home.is-home-editing .home-app.is-flipping .home-app__icon,
.view--home.is-home-editing .home-app.is-flipping .home-app__label,
.view--home.is-home-editing .home-app.is-dropping .home-app__icon,
.view--home.is-home-editing .home-app.is-dropping .home-app__label {
  animation: none;
}

.view--home.is-home-editing .home-app:hover .home-app__icon,
.view--home.is-home-editing .home-app:active .home-app__icon {
  translate: none;
  transform: none;
}

@keyframes home-app-jiggle {
  from {
    transform: rotate(-1deg);
  }
  to {
    transform: rotate(1deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .view--home.is-home-editing .home-app .home-app__icon,
  .view--home.is-home-editing .home-app .home-app__label {
    animation: none;
  }

  .view--home.is-home-editing .home-app.is-flipping {
    transition: none;
  }
}

.home-app__icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 4.15rem;
  height: 4.15rem;
  border-radius: 50%;
  border: 0;
  background: var(--surface);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.06),
    0 8px 20px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  isolation: isolate;
  transition:
    translate var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-out),
    box-shadow var(--dur) ease;
}

.home-app__icon::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    155deg,
    rgba(255, 255, 255, 0.46) 0%,
    rgba(255, 255, 255, 0.12) 34%,
    transparent 58%
  );
  pointer-events: none;
  z-index: 2;
}

html[data-theme="dark"] .home-app__icon {
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.34),
    0 10px 24px rgba(0, 0, 0, 0.42);
}

html[data-theme="dark"] .home-app__icon::after {
  background: linear-gradient(
    155deg,
    rgba(255, 255, 255, 0.18) 0%,
    rgba(255, 255, 255, 0.04) 34%,
    transparent 58%
  );
}

html[data-theme="dark"] .home-app:hover .home-app__icon {
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.38),
    0 14px 30px rgba(0, 0, 0, 0.48);
}

.home-app__icon--tcg {
  background:
    radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.52), transparent 52%),
    linear-gradient(145deg, #c4b5fd 0%, #8b5cf6 42%, #38bdf8 100%);
}

.home-app__slab {
  position: absolute;
  top: 22%;
  left: 26%;
  width: 48%;
  height: 56%;
  border-radius: 0.34rem;
  overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, #f4f4f5 100%);
  box-shadow:
    0 4px 12px rgba(99, 102, 241, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transform: rotate(-7deg);
  z-index: 1;
}

.home-app__slab-art {
  position: absolute;
  left: 11%;
  right: 11%;
  top: 11%;
  height: 58%;
  border-radius: 0.18rem;
  background:
    radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.65), transparent 48%),
    linear-gradient(135deg, #fda4af 0%, #c084fc 42%, #60a5fa 78%, #5eead4 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
}

.home-app__slab-band {
  position: absolute;
  left: 11%;
  right: 11%;
  bottom: 11%;
  height: 15%;
  border-radius: 0.1rem;
  background: linear-gradient(90deg, #ddd6fe, #bfdbfe);
}

.home-app__icon--memo {
  background: linear-gradient(165deg, #ffcc4d 0%, #ff9f0a 52%, #e2860a 100%);
}

.home-app__icon--crew {
  background:
    radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.5), transparent 52%),
    linear-gradient(145deg, #ff6482 0%, #ff375f 38%, #bf5af2 72%, #5ac8fa 100%);
}

.home-app__icon--mail {
  background: linear-gradient(165deg, #5ac8fa 0%, #007aff 52%, #004fc4 100%);
}

.home-app__mark {
  position: absolute;
  z-index: 1;
}

.home-app__mark--memo {
  top: 23%;
  left: 25%;
  width: 50%;
  height: 54%;
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0 20%,
      rgba(15, 23, 42, 0.11) 20% 24%,
      transparent 24% 40%,
      rgba(15, 23, 42, 0.11) 40% 44%,
      transparent 44% 60%,
      rgba(15, 23, 42, 0.11) 60% 64%,
      transparent 64% 100%
    ),
    #ffffff;
  clip-path: polygon(0 0, 100% 0, 100% 86%, 76% 100%, 0 100%);
  border-radius: 0.16rem 0.16rem 0.05rem 0.16rem;
  box-shadow:
    0 6px 16px rgba(15, 23, 42, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.home-app__icon--cal {
  background: linear-gradient(165deg, #ff7b72 0%, #ff3b30 55%, #d70015 100%);
}

.home-app__mark--cal {
  top: 22%;
  left: 24%;
  width: 52%;
  height: 56%;
  border-radius: 0.34rem;
  overflow: hidden;
  background: #ffffff;
  box-shadow:
    0 6px 16px rgba(15, 23, 42, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.home-app__mark-cal-head {
  display: block;
  height: 27%;
  background: linear-gradient(180deg, #ff6b6b 0%, #e03131 100%);
}

.home-app__mark-cal-day {
  display: grid;
  place-items: center;
  height: 73%;
  color: #0f172a;
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1;
}

.home-app__mark--mail {
  top: 25%;
  left: 23%;
  width: 54%;
  height: 52%;
  border-radius: 0.2rem;
  background: #ffffff;
  box-shadow:
    0 6px 16px rgba(15, 23, 42, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.home-app__mark--mail::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, #475569 0%, #1e293b 100%);
  clip-path: polygon(0 0, 100% 0, 50% 56%);
}

.home-app__mark--mail::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 16%;
  height: 5%;
  border-radius: 999px;
  background: #cbd5e1;
}

.home-app__cal {
  position: absolute;
  top: 24%;
  left: 26%;
  width: 48%;
  height: 52%;
  border-radius: 0.24rem;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.14);
  z-index: 1;
}

.home-app__cal-bar {
  display: block;
  height: 22%;
  background: linear-gradient(90deg, #e53935, #7b5cff 40%, #2bc4d0 72%, #5b8def);
}

.home-app__cal-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18%;
  padding: 16% 18% 14%;
  height: 78%;
  box-sizing: border-box;
}

.home-app__cal-dot {
  display: block;
  border-radius: 50%;
}

.home-app__cal-dot--a { background: #5b8def; }
.home-app__cal-dot--b { background: #e53935; }
.home-app__cal-dot--c { background: #2bc4d0; }
.home-app__cal-dot--d { background: #7b5cff; }

.dock-app .home-app__mark--cal {
  top: 18%;
  left: 20%;
  width: 60%;
  height: 64%;
}

.dock-app .home-app__cal {
  top: 20%;
  left: 22%;
  width: 56%;
  height: 58%;
}

.view--crew {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: none;
  height: 100%;
  min-height: 0;
  padding: 3.5rem 2.25rem calc(1.5rem + var(--dock-h));
  box-sizing: border-box;
  overflow: hidden;
}

.crew-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr);
  align-items: start;
  align-content: start;
  gap: 1.5rem;
  width: 100%;
  max-width: 96rem;
  margin: 0 auto;
  min-height: 0;
  flex: 1;
}

.crew-col {
  --crew-col: #8a909a;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: 100%;
  min-height: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--crew-col) 22%, var(--border));
  border-radius: 1.05rem;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--crew-col) 10%, var(--surface)) 0%, var(--surface) 5.5rem);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.04),
    0 10px 28px rgba(0, 0, 0, 0.08);
}

.crew-col--soon {
  --crew-col: #e85d4c;
}

.crew-col--mid {
  --crew-col: #e8a23c;
}

.crew-col--later {
  --crew-col: #6d8fb8;
}

.crew-col--done {
  --crew-col: #3cb88a;
}

.crew-col__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.78rem 0.82rem 0.5rem;
}

.crew-col__title {
  margin: 0;
  color: var(--crew-col);
  font-size: 0.9rem;
  font-weight: 700;
}

.crew-col--soon .crew-col__title {
  letter-spacing: 0.02em;
}

.crew-col__hint {
  display: none;
}

.crew-col__count {
  display: inline-grid;
  place-items: center;
  min-width: 1.2rem;
  height: 1.15rem;
  padding: 0 0.32rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--crew-col) 16%, var(--bg));
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 650;
  color: color-mix(in srgb, var(--crew-col) 72%, var(--text));
}

.crew-col__body {
  display: grid;
  align-content: start;
  gap: 0;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: var(--scroll-bounce);
  padding: 0.28rem 0.7rem 0.82rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.crew-col__body::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.crew-site {
  display: grid;
  gap: 0.4rem;
}

.crew-site__head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.crew-site__count,
.crew-group__count {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-muted);
}

.crew-site__list {
  display: grid;
  gap: 0.65rem;
}

.crew-chip {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  width: fit-content;
  max-width: 42%;
  padding: 0.14rem 0.44rem;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--crew-hue, #5b8def) 18%, var(--bg));
  color: color-mix(in srgb, var(--crew-hue, #5b8def) 72%, var(--text));
  font-size: 0.68rem;
  font-weight: 700;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

a.crew-chip {
  cursor: pointer;
}

a.crew-chip:hover {
  background: color-mix(in srgb, var(--crew-hue, #5b8def) 26%, var(--bg));
}

.crew-card {
  display: grid;
  gap: 0.82rem;
  width: 100%;
  padding: 1.05rem 1rem 0.95rem;
  border: 1px solid var(--border);
  border-radius: 0.85rem;
  background: var(--bg);
  cursor: pointer;
  text-align: left;
  transition:
    border-color var(--dur) ease,
    transform var(--dur) var(--ease-out),
    box-shadow var(--dur) ease;
}

.crew-card:hover {
  border-color: color-mix(in srgb, var(--text) 18%, var(--border));
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}

.crew-card:active {
  transform: translateY(0) scale(0.985);
}

.crew-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  min-width: 0;
}

.crew-card__title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.32;
  word-break: break-word;
}

.crew-card__dates {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
}

.crew-card__stat {
  position: relative;
  display: grid;
  gap: 0.28rem;
  min-width: 0;
  padding: 0.55rem 0.58rem 0.58rem;
  border-radius: 0.55rem;
  background: var(--surface);
  cursor: pointer;
}

.crew-card__date {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
  font-size: 16px;
}

.crew-card__stat span {
  color: color-mix(in srgb, var(--text) 58%, var(--text-muted));
  font-size: 0.7rem;
  font-weight: 700;
}

.crew-card__stat strong {
  color: var(--text);
  font-size: 0.86rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.crew-card__stat.is-empty strong {
  color: var(--text-muted);
  font-weight: 600;
}

.crew-card__note {
  margin: 0;
  color: var(--text);
  font-size: 0.8rem;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.crew-card__flags {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
  width: 100%;
}

.crew-check {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 0.52rem 0.65rem;
  border-radius: 0.55rem;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 0.76rem;
  font-weight: 650;
}

.crew-check:hover {
  background: var(--btn-hover);
}

.crew-check__mark {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 0.88rem;
  height: 0.88rem;
  border-radius: 0.2rem;
  border: 1.5px solid color-mix(in srgb, var(--text) 32%, transparent);
  background: transparent;
  box-sizing: border-box;
}

.crew-check.is-on {
  border-color: var(--border);
  background: color-mix(in srgb, var(--text) 6%, var(--surface));
}

.crew-check.is-on .crew-check__mark {
  display: grid;
  place-items: center;
  border-color: transparent;
  background: var(--text);
}

.crew-check.is-on .crew-check__mark::after {
  content: "";
  width: 0.26rem;
  height: 0.46rem;
  margin-top: -0.1rem;
  border-right: 2px solid var(--bg);
  border-bottom: 2px solid var(--bg);
  transform: rotate(45deg);
}

.crew-sites,
.crew-form__sites {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.crew-sites__btn {
  padding: 0.42rem 0.72rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  background: color-mix(in srgb, var(--surface) 55%, transparent);
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 600;
}

.crew-form__sites .crew-sites__btn {
  color: var(--modal-label, #fff);
  text-shadow: var(--modal-label-shadow);
}

.crew-sites__btn:hover {
  background: var(--btn-hover);
}

.crew-sites__btn.is-active {
  border-color: transparent;
  background: var(--crew-hue, var(--accent));
  color: #fff;
}

.crew-sites__btn[data-crew-site="all"].is-active {
  background: var(--accent);
  color: var(--accent-contrast);
}

.crew-card__remain {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text);
}

.crew-card__place,
.crew-card__addr {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.crew-card__loc {
  display: grid;
  gap: 0.12rem;
  margin: -0.15rem 0 0.15rem;
}

.crew-card__place {
  color: var(--text);
  font-weight: 650;
}

.crew-map-modal__shell {
  width: min(960px, calc(100vw - 1rem));
  max-height: min(90vh, 780px);
}

.crew-map-modal__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: min(82vh, 720px);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  border-radius: 1.25rem;
  background:
    radial-gradient(120% 80% at 12% 0%, color-mix(in srgb, #5b8def 10%, transparent), transparent 55%),
    var(--surface);
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.18),
    0 4px 14px rgba(0, 0, 0, 0.08);
}

.crew-map-modal__canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: color-mix(in srgb, var(--bg-stage) 72%, #d7dde8);
}

.crew-map-modal__map {
  width: 100%;
  height: 100%;
  min-height: 100%;
}

.crew-map-modal__map .leaflet-container {
  width: 100%;
  height: 100%;
  background: #d7dde8;
}

.crew-map-modal__canvas::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 400;
  pointer-events: none;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 55%, transparent) 0%, transparent 18%),
    linear-gradient(0deg, color-mix(in srgb, var(--surface) 28%, transparent) 0%, transparent 12%);
}

.crew-map-modal__chrome {
  position: absolute;
  top: 0.72rem;
  left: 0.72rem;
  right: 0.72rem;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  padding: 0.55rem 0.55rem 0.55rem 0.7rem;
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  border-radius: 1rem;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
}

.crew-map-modal__brand {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
}

.crew-map-modal__mark {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border-radius: 0.7rem;
  color: #2f6fdb;
  background: color-mix(in srgb, #5b8def 16%, var(--surface));
}

.crew-map-modal__mark svg {
  width: 1.1rem;
  height: 1.1rem;
}

.crew-map-modal__copy {
  min-width: 0;
}

.crew-map-modal__title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.crew-map-modal__hint {
  margin: 0.14rem 0 0;
  color: var(--text-muted);
  font-size: 0.7rem;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: min(42vw, 18rem);
}

.crew-map-modal__actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.35rem;
  justify-content: flex-end;
  flex: 0 0 auto;
}

.crew-map-modal__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.28rem;
  min-height: 2rem;
  padding: 0 0.7rem;
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  border-radius: 0.72rem;
  background: color-mix(in srgb, var(--text) 4%, var(--surface));
  color: var(--text);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}

.crew-map-modal__btn svg {
  width: 0.95rem;
  height: 0.95rem;
}

.crew-map-modal__btn:hover {
  background: color-mix(in srgb, var(--text) 8%, var(--surface));
  border-color: color-mix(in srgb, var(--text) 18%, var(--border));
}

.crew-map-modal__btn:active {
  transform: translateY(1px);
}

.crew-map-modal__btn.is-active {
  color: #2f6fdb;
  border-color: color-mix(in srgb, #5b8def 45%, var(--border));
  background: color-mix(in srgb, #5b8def 16%, var(--surface));
}

html[data-theme="dark"] .crew-map-modal__btn.is-active {
  color: #8eb6ff;
  background: color-mix(in srgb, #5b8def 28%, var(--surface));
}

.crew-map-modal__btn--ghost {
  width: 2rem;
  padding: 0;
  color: var(--text-muted);
}

html[data-theme="dark"] .crew-map-modal__mark {
  color: #8eb6ff;
  background: color-mix(in srgb, #5b8def 28%, var(--surface));
}

html[data-theme="dark"] .crew-map-modal__chrome {
  background: color-mix(in srgb, var(--surface) 82%, transparent);
}

.crew-map-modal .leaflet-control-zoom {
  border: 0 !important;
  margin: 4.6rem 0 0 0.72rem !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.14);
  border-radius: 0.75rem;
  overflow: hidden;
}

.crew-map-modal .leaflet-control-zoom a {
  width: 2rem !important;
  height: 2rem !important;
  line-height: 2rem !important;
  border: 0 !important;
  background: color-mix(in srgb, var(--surface) 92%, transparent) !important;
  color: var(--text) !important;
  font-size: 1.05rem !important;
  font-weight: 600 !important;
}

.crew-map-modal .leaflet-control-zoom a:hover {
  background: color-mix(in srgb, var(--text) 8%, var(--surface)) !important;
}

.crew-map-modal .leaflet-control-attribution {
  margin: 0 0.55rem 0.45rem 0 !important;
  padding: 0.12rem 0.4rem !important;
  border-radius: 0.45rem;
  background: color-mix(in srgb, var(--surface) 78%, transparent) !important;
  color: var(--text-muted) !important;
  font-size: 0.62rem !important;
  backdrop-filter: blur(8px);
}

.crew-map-modal .leaflet-popup-content-wrapper {
  border-radius: 0.85rem;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
  background: var(--surface);
  color: var(--text);
}

.crew-map-modal .leaflet-popup-tip {
  background: var(--surface);
}

.crew-map-modal .leaflet-popup-content {
  margin: 0.7rem 0.8rem;
}

.crew-map-pin {
  background: transparent;
  border: 0;
}

.crew-map-pin__wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.22rem;
  width: 132px;
  pointer-events: auto;
}

.crew-map-pin__name {
  max-width: 8rem;
  padding: 0.22rem 0.48rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 94%, #fff);
  border: 1px solid color-mix(in srgb, var(--crew-hue, #5b8def) 42%, var(--border));
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
  color: var(--text);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.crew-map-pin__dot {
  position: relative;
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--crew-hue, #5b8def);
  border: 2.5px solid #fff;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--crew-hue, #5b8def) 35%, transparent),
    0 4px 10px rgba(0, 0, 0, 0.28);
}

.crew-map-pin__dot::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 2px;
  height: 5px;
  transform: translateX(-50%);
  background: color-mix(in srgb, var(--crew-hue, #5b8def) 70%, #222);
  border-radius: 1px;
}

.crew-map-popup {
  display: grid;
  gap: 0.22rem;
  min-width: 10rem;
  font-size: 0.78rem;
  line-height: 1.35;
}

.crew-map-popup strong {
  font-size: 0.9rem;
  letter-spacing: -0.02em;
}

.crew-map-popup span {
  color: var(--text-muted);
  font-weight: 650;
}

.crew-map-popup p {
  margin: 0;
}

.crew-map-popup a {
  margin-top: 0.15rem;
  color: var(--crew-hue, #5b8def);
  font-weight: 650;
}

@media (max-width: 640px) {
  .crew-map-modal__shell {
    width: calc(100vw - 0.7rem);
  }

  .crew-map-modal__panel {
    height: min(78vh, 640px);
    border-radius: 1.05rem;
  }

  .crew-map-modal__chrome {
    top: 0.5rem;
    left: 0.5rem;
    right: 0.5rem;
    padding: 0.45rem;
    gap: 0.45rem;
  }

  .crew-map-modal__btn span {
    display: none;
  }

  .crew-map-modal__btn {
    width: 2rem;
    padding: 0;
  }

  .crew-map-modal__hint {
    max-width: 42vw;
  }
}

.crew-status {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
}

.crew-status--scheduled,
.crew-status--selected {
  color: #1f7a4d;
}

.crew-status--reviewing {
  color: #b45309;
}

.crew-status--done {
  color: var(--text-muted);
}

.crew-status--rejected {
  color: #b42318;
}

.crew-empty {
  margin: 0;
  padding: 0.15rem 0.1rem 0.2rem;
  color: var(--text-muted);
  font-size: 0.78rem;
}

.crew-form {
  display: grid;
  gap: 0.75rem;
  padding: 0.35rem 0.2rem 0.1rem;
}

.crew-form__title {
  margin: 0 0 0.15rem;
  color: var(--modal-label);
  text-shadow: var(--modal-label-shadow);
  font-size: 1.12rem;
}

.crew-card__week {
  display: grid;
  gap: 0.32rem;
}

.crew-card__week > span {
  color: color-mix(in srgb, var(--text) 58%, var(--text-muted));
  font-size: 0.7rem;
  font-weight: 700;
}

.crew-card__days,
.crew-form__days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.28rem;
}

.crew-card__day {
  display: grid;
  place-items: center;
  height: 1.72rem;
  padding: 0;
  border: 0;
  border-radius: 0.4rem;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 700;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.crew-card__day:hover {
  color: var(--text);
}

.crew-card__day.is-on {
  background: color-mix(in srgb, var(--crew-hue, var(--text)) 28%, var(--surface));
  color: var(--text);
}

.crew-day-btn {
  height: 2.35rem;
  padding: 0;
  border-radius: 0.55rem;
  border: 1px solid var(--modal-control-border, var(--border));
  background: var(--modal-control-bg, var(--surface));
  color: var(--modal-control-text, var(--text));
  font-size: 0.82rem;
  font-weight: 700;
}

.crew-day-btn:hover {
  background: var(--btn-hover);
}

.crew-day-btn.is-active {
  border-color: transparent;
  background: #ffffff;
  color: #111318;
}

.crew-form__note {
  resize: vertical;
  min-height: 4.5rem;
}

@media (max-width: 980px) {
  .view--crew {
    height: 100%;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: var(--scroll-bounce);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .view--crew::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }

  .crew-board {
    grid-template-columns: 1fr;
    max-width: 22rem;
    flex: 0 0 auto;
    height: auto;
    align-content: start;
  }

  .crew-col {
    max-height: none;
    overflow: visible;
  }

  .crew-col__body {
    overflow: visible;
  }
}

@media (max-width: 720px) {
  .view--crew {
    padding:
      var(--top-content-pad, calc(env(safe-area-inset-top, 0px) + 1.6rem))
      1rem
      var(--dock-chrome-stack);
    height: 100%;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: var(--scroll-bounce);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .view--crew::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }

  .crew-form__row {
    grid-template-columns: 1fr;
  }
}

.home-app:hover .home-app__icon {
  translate: 0 -3px;
  transform: scale(1.04);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.08),
    0 12px 26px rgba(0, 0, 0, 0.14);
}

.home-app:active .home-app__icon {
  translate: 0 0;
  transform: scale(0.96);
}

.home-app__label {
  color: var(--text);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.view--memo {
  position: relative;
  height: 100%;
  min-height: 0;
  padding: 0 !important;
  box-sizing: border-box;
  overflow: hidden;
}


.stage:has(.view--crew),
.stage:has(.view--memo),
.stage:has(.view--cal),
.stage:has(.view--mail),
.stage:has(.view--notes) {
  overflow: hidden;
  overscroll-behavior: none;
}

.stage:has(.view--memo:not(.is-memo-list)) {
  touch-action: none;
}

.view--cal {
  height: 100%;
  min-height: 0;
  padding: 0 !important;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: var(--scroll-bounce);
  -webkit-overflow-scrolling: touch;
  background: var(--bg-stage);
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.view--cal::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.view--mail {
  height: 100%;
  min-height: 0;
  padding: 0 !important;
  overflow: hidden;
  background: var(--bg-stage);
}

.view--notes {
  height: 100%;
  min-height: 0;
  padding: 0 !important;
  overflow: hidden;
  background: var(--bg-stage);
}

.notes {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  padding: 2.85rem max(1.85rem, env(safe-area-inset-right, 0px) + 1.25rem) calc(var(--dock-h) + env(safe-area-inset-bottom, 0px) + var(--stick-rail-h, 2.7rem) + 0.65rem) max(1.85rem, env(safe-area-inset-left, 0px) + 1.25rem);
  box-sizing: border-box;
}

.notes-body {
  display: grid;
  grid-template-columns: minmax(18rem, 22.5rem) minmax(0, 1fr);
  flex: 1;
  gap: 0 1.35rem;
  min-height: 0;
}

.notes-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: 0.7rem 0.2rem 0.55rem;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  border-radius: 1.2rem;
  background: color-mix(in srgb, var(--bg-dock) 72%, transparent);
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.16),
    0 2px 8px rgba(0, 0, 0, 0.06);
  -webkit-backdrop-filter: blur(18px) saturate(1.05);
  backdrop-filter: blur(18px) saturate(1.05);
}

html[data-theme="dark"] .notes-col {
  background: color-mix(in srgb, var(--bg-dock) 78%, transparent);
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.38),
    0 2px 8px rgba(0, 0, 0, 0.18);
}

.notes-search {
  display: flex;
  align-items: center;
  gap: 0.48rem;
  height: 2.2rem;
  margin: 0 0.9rem 0.55rem;
  padding: 0 0.82rem 0 0.78rem;
  border: 1px solid color-mix(in srgb, var(--border) 68%, transparent);
  border-radius: 0.95rem;
  background: color-mix(in srgb, var(--surface) 58%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 12%, transparent);
  flex: 0 0 auto;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}

.notes-search:focus-within {
  border-color: color-mix(in srgb, var(--text) 22%, var(--border));
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent),
    0 0 0 3px color-mix(in srgb, var(--text) 7%, transparent);
}

.notes-search__icon {
  width: 0.9rem;
  height: 0.9rem;
  flex: 0 0 auto;
  color: var(--text-muted);
  opacity: 0.62;
}

.notes-search:focus-within .notes-search__icon {
  opacity: 0.92;
  color: var(--text);
}

.notes-search__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 0.84rem;
  font-weight: 450;
  letter-spacing: -0.015em;
  outline: none;
  -webkit-appearance: none;
}

.notes-search__input::placeholder {
  color: color-mix(in srgb, var(--text-muted) 88%, transparent);
  font-weight: 400;
}

.notes-search__input::-webkit-search-decoration,
.notes-search__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.notes-empty {
  margin: 0;
  padding: 1.6rem 1.1rem 0;
  color: var(--text-muted);
  font-size: 0.84rem;
  font-weight: 450;
  line-height: 1.5;
  text-align: center;
}

.notes-list {
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: var(--scroll-bounce);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0.2rem 0.7rem 0.55rem;
}

.notes-list::-webkit-scrollbar {
  display: none;
}

@keyframes notes-folder-out-forward {
  to {
    opacity: 0;
    transform: translate3d(-14px, 0, 0);
  }
}

@keyframes notes-folder-out-back {
  to {
    opacity: 0;
    transform: translate3d(14px, 0, 0);
  }
}

@keyframes notes-folder-in-forward {
  from {
    opacity: 0;
    transform: translate3d(18px, 0, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes notes-folder-in-back {
  from {
    opacity: 0;
    transform: translate3d(-18px, 0, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.notes-list.is-folder-nav-out-forward > *,
.notes-list.is-folder-nav-out-back > *,
.notes-list.is-folder-nav-in-forward > *,
.notes-list.is-folder-nav-in-back > * {
  animation-duration: 0.3s;
  animation-timing-function: var(--ease-out);
  animation-fill-mode: both;
}

.notes-list.is-folder-nav-out-forward > * {
  animation-name: notes-folder-out-forward;
  animation-duration: 0.14s;
  animation-timing-function: ease;
}

.notes-list.is-folder-nav-out-back > * {
  animation-name: notes-folder-out-back;
  animation-duration: 0.14s;
  animation-timing-function: ease;
}

.notes-list.is-folder-nav-in-forward > * {
  animation-name: notes-folder-in-forward;
}

.notes-list.is-folder-nav-in-back > * {
  animation-name: notes-folder-in-back;
}

.notes-list.is-folder-nav-in-forward > *:nth-child(1),
.notes-list.is-folder-nav-in-back > *:nth-child(1) { animation-delay: 0.02s; }
.notes-list.is-folder-nav-in-forward > *:nth-child(2),
.notes-list.is-folder-nav-in-back > *:nth-child(2) { animation-delay: 0.045s; }
.notes-list.is-folder-nav-in-forward > *:nth-child(3),
.notes-list.is-folder-nav-in-back > *:nth-child(3) { animation-delay: 0.07s; }
.notes-list.is-folder-nav-in-forward > *:nth-child(4),
.notes-list.is-folder-nav-in-back > *:nth-child(4) { animation-delay: 0.095s; }
.notes-list.is-folder-nav-in-forward > *:nth-child(5),
.notes-list.is-folder-nav-in-back > *:nth-child(5) { animation-delay: 0.12s; }
.notes-list.is-folder-nav-in-forward > *:nth-child(6),
.notes-list.is-folder-nav-in-back > *:nth-child(6) { animation-delay: 0.145s; }
.notes-list.is-folder-nav-in-forward > *:nth-child(n + 7),
.notes-list.is-folder-nav-in-back > *:nth-child(n + 7) { animation-delay: 0.17s; }

@media (prefers-reduced-motion: reduce) {
  .notes-list.is-folder-nav-out-forward > *,
  .notes-list.is-folder-nav-out-back > *,
  .notes-list.is-folder-nav-in-forward > *,
  .notes-list.is-folder-nav-in-back > * {
    animation: none !important;
  }
}

.notes-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0.68rem 0.9rem;
  border: 0;
  border-radius: 0.72rem;
  background: transparent;
  color: var(--text);
  font-weight: 400;
  text-align: left;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition:
    background var(--dur-fast) ease,
    transform var(--dur-fast) var(--ease-out);
}

.notes-item::before {
  display: none;
}

.notes-item.is-selected {
  background: color-mix(in srgb, #e4c056 12%, var(--surface));
}

.notes-item.is-selected::before {
  background: transparent;
}

.notes-item__title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 560;
  letter-spacing: -0.02em;
}

.notes-item.is-selected .notes-item__title {
  font-weight: 640;
}

.notes-item__when {
  flex: 0 0 auto;
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 450;
  font-variant-numeric: tabular-nums;
}

.notes-folder {
  display: flex;
  align-items: center;
  gap: 0.62rem;
  width: 100%;
  box-sizing: border-box;
  padding: 0.66rem 0.9rem;
  border: 0;
  border-radius: 0.72rem;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition:
    background var(--dur-fast) ease,
    transform var(--dur-fast) var(--ease-out);
}

.notes-folder:active {
  transform: scale(0.992);
}

.notes-folder.is-drop,
.notes-folder--back.is-drop {
  background: color-mix(in srgb, #e4c056 16%, var(--surface));
}

.notes-folder__icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.15rem;
  color: #c4a03a;
}

.notes-folder__icon svg {
  width: 1.15rem;
  height: 1.15rem;
}

.notes-folder__title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.notes-folder__count {
  flex: 0 0 auto;
  color: var(--text-muted);
  font-size: 0.72rem;
}

.notes-drag-ghost {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 12000;
  max-width: 12rem;
  padding: 0.4rem 0.65rem;
  border-radius: 0.45rem;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  font-size: 0.8rem;
  font-weight: 650;
  pointer-events: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.is-notes-dragging {
  cursor: grabbing;
  user-select: none;
}

.notes-pane {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: var(--scroll-bounce);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  background: transparent;
  padding: 0.15rem 0.35rem 0 0.55rem;
}

.notes-pane::-webkit-scrollbar {
  display: none;
}

.notes-pane__head {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
  min-height: 1.85rem;
  margin-bottom: 0.35rem;
}

.notes-pane__back {
  display: none;
  align-items: center;
  gap: 0.22rem;
  height: 2rem;
  padding: 0 0.55rem 0 0.4rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 560;
  cursor: pointer;
  box-shadow: none;
  transition: background 120ms ease, color 120ms ease;
}

.notes-pane__back svg {
  width: 0.98rem;
  height: 0.98rem;
}

.notes-pane__back:hover,
.notes-pane__back:active {
  background: color-mix(in srgb, var(--text) 6%, transparent);
  color: var(--text);
}

.notes-pane__back:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--text) 30%, #2f7de1);
  outline-offset: 1px;
}

.notes-pane__delete {
  display: inline-grid;
  place-items: center;
  width: 2.05rem;
  height: 2.05rem;
  margin-left: auto;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  box-shadow: none;
}

.notes-pane__delete[hidden] {
  display: none !important;
}

.notes-pane__delete svg {
  width: 1.05rem;
  height: 1.05rem;
}

.notes-pane__delete:hover,
.notes-pane__delete:active {
  background: color-mix(in srgb, #c4473a 12%, transparent);
  color: #c4473a;
}

.notes-pane__empty[hidden],
.notes-pane__fields[hidden] {
  display: none !important;
}

.notes-pane__empty {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.42rem;
  flex: 1;
  min-height: 12rem;
  padding: 2rem 1.2rem 1rem;
  color: var(--text-muted);
  text-align: center;
}

.notes-pane__mark {
  display: grid;
  place-items: center;
  width: 3.4rem;
  height: 3.4rem;
  margin-bottom: 0.35rem;
  color: color-mix(in srgb, var(--text-muted) 70%, var(--text));
  opacity: 0.55;
}

.notes-pane__mark svg {
  width: 2.55rem;
  height: 2.55rem;
}

.notes-pane__empty-title {
  margin: 0;
  color: var(--text);
  font-size: 1.12rem;
  font-weight: 650;
  letter-spacing: -0.04em;
}

.notes-pane__empty-text {
  margin: 0;
  font-size: 0.84rem;
  font-weight: 450;
  line-height: 1.45;
  max-width: none;
  white-space: nowrap;
  justify-self: center;
}

.notes-pane__fields {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  min-height: 100%;
  padding-top: 0.35rem;
  padding-bottom: 0.4rem;
}

.notes-pane__title {
  width: 100%;
  margin: 0 0 0.85rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 1.72rem;
  font-weight: 680;
  letter-spacing: -0.05em;
}

.notes-pane__title:focus {
  outline: none;
}

.notes-pane__text {
  flex: 1 0 auto;
  width: 100%;
  min-height: 10rem;
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
  resize: none;
  overflow: hidden;
  background: transparent;
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 1.02rem;
  line-height: 1.74;
  white-space: pre-wrap;
  word-break: break-word;
}

.notes-pane__text:empty::before,
.notes-pane__text.is-empty::before {
  content: "내용을 입력하세요";
  color: var(--text-muted);
  pointer-events: none;
}

.notes-pane__text ul {
  margin: 0.2rem 0;
  padding-left: 1.25rem;
}

.notes-pane__text ul ul {
  margin: 0.05rem 0;
  padding-left: 1.1rem;
}

.notes-pane__text b,
.notes-pane__text strong {
  font-weight: 700;
}

.notes-pane__text:focus {
  outline: none;
}

@media (hover: hover) {
  .notes-item:hover,
  .notes-folder:hover {
    background: color-mix(in srgb, var(--text) 4%, transparent);
  }

  .notes-item.is-selected:hover {
    background: color-mix(in srgb, #e4c056 16%, var(--surface));
  }
}

@media (max-width: 820px) {
  .notes {
    padding:
      calc(var(--top-content-pad, env(safe-area-inset-top, 0px) + 1.6rem) + 0.35rem)
      max(1.35rem, env(safe-area-inset-right, 0px) + 0.9rem)
      calc(var(--stick-footprint, 3.5rem) + 0.35rem)
      max(1.35rem, env(safe-area-inset-left, 0px) + 0.9rem);
  }

  .notes.is-editing {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    padding:
      0
      max(1.35rem, env(safe-area-inset-right, 0px) + 0.9rem)
      0
      max(1.35rem, env(safe-area-inset-left, 0px) + 0.9rem);
  }

  .notes.is-editing .notes-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  .notes-col,
  html[data-theme="dark"] .notes-col {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .notes-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .notes-pane {
    border-left: 0;
    padding-left: 0;
  }

  .notes.is-editing .notes-pane {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: var(--scroll-bounce);
    -webkit-overflow-scrolling: touch;
    padding: 0;
    padding-bottom: var(--stick-footprint);
    scroll-padding-bottom: var(--stick-footprint);
  }

  .notes.is-editing .notes-pane__head {
    margin-bottom: 1.7rem;
    padding-top: calc(env(safe-area-inset-top, 0px) + 0.35rem);
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  .notes.is-editing .notes-pane__fields {
    min-height: auto;
    flex: 0 0 auto;
    padding-top: 1rem;
    padding-bottom: calc(var(--stick-chrome-h, 3rem) + 0.35rem);
  }

  .notes.is-editing .notes-pane__title {
    margin-top: 0;
    margin-bottom: 1.5rem;
  }

  .notes-search {
    margin: 0 0 0.55rem;
  }

  .notes.is-editing .notes-col {
    display: none;
  }

  .notes:not(.is-editing) .notes-pane {
    display: none;
  }

  .notes-pane__head {
    display: flex;
    margin-bottom: 0.55rem;
  }

  .notes-pane__back {
    display: inline-flex;
  }

  .notes-pane__title,
  .notes-search__input {
    font-size: 16px;
  }
}

.home-app__icon--notes {
  background:
    radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.5), transparent 52%),
    linear-gradient(160deg, #ffe873 0%, #ffd60a 100%);
}

.home-app__notes-page {
  position: absolute;
  top: 22%;
  left: 22%;
  width: 56%;
  height: 58%;
  display: flex;
  flex-direction: column;
  gap: 0.16rem;
  padding: 0.38rem 0.32rem;
  border-radius: 0.24rem;
  background: #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.14);
  z-index: 1;
}

.home-app__notes-line {
  display: block;
  height: 0.12rem;
  border-radius: 999px;
  background: color-mix(in srgb, #d9c27a 55%, #fff);
}

.home-app__notes-line:nth-child(1) {
  width: 88%;
}

.home-app__notes-line:nth-child(2) {
  width: 72%;
}

.home-app__notes-line:nth-child(3) {
  width: 56%;
}

.mail {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  padding: 2.85rem max(1.85rem, env(safe-area-inset-right, 0px) + 1.25rem) 0 max(1.85rem, env(safe-area-inset-left, 0px) + 1.25rem);
  box-sizing: border-box;
}

.mail-head {
  display: none;
}

.mail-head__title {
  margin: 0;
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: -0.045em;
}

.mail-head__tools {
  display: flex;
  gap: 0.3rem;
}

.mail-head__btn,
.mail-head__add {
  height: 1.85rem;
  padding: 0 0.72rem;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 6%, var(--surface));
  color: var(--text);
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
}

.mail-head__add {
  background: #2f7de1;
  color: #fff;
}

.mail-search {
  display: flex;
  align-items: center;
  gap: 0.48rem;
  height: 2.2rem;
  margin: 0 0 0.55rem;
  padding: 0 0.82rem 0 0.78rem;
  border: 1px solid color-mix(in srgb, var(--border) 68%, transparent);
  border-radius: 0.95rem;
  background: color-mix(in srgb, var(--surface) 58%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 12%, transparent);
  flex: 0 0 auto;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}

.mail-search:focus-within {
  border-color: color-mix(in srgb, var(--text) 22%, var(--border));
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent),
    0 0 0 3px color-mix(in srgb, var(--text) 7%, transparent);
}

.mail-search__icon {
  width: 0.9rem;
  height: 0.9rem;
  flex: 0 0 auto;
  color: var(--text-muted);
  opacity: 0.62;
}

.mail-search:focus-within .mail-search__icon {
  opacity: 0.92;
  color: var(--text);
}

.mail-search__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 0.84rem;
  font-weight: 450;
  letter-spacing: -0.015em;
  outline: none;
  -webkit-appearance: none;
}

.mail-search__input::placeholder {
  color: color-mix(in srgb, var(--text-muted) 88%, transparent);
  font-weight: 400;
}

.mail-search__input::-webkit-search-decoration,
.mail-search__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.modal__shell:has(.mail-keyword) {
  width: min(22.5rem, calc(100vw - 2rem));
}

.mail-keyword {
  display: grid;
  gap: 0.75rem;
}

.mail-keyword__field {
  display: grid;
  gap: 0.4rem;
}

.mail-keyword__lead {
  margin: 0;
  color: color-mix(in srgb, var(--text) 72%, var(--text-muted));
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.4;
}

.mail-keyword__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.28rem;
  margin: 0;
}

.mail-keyword__list[hidden],
.mail-keyword__list:empty {
  display: none !important;
}

.mail-keyword__input {
  margin: 0;
  width: 100%;
}

.mail-keyword .modal__actions {
  margin-top: 0.1rem;
}

.modal__dialog:has(.mail-form),
.modal__dialog.mail-keyword {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 1.15rem;
  padding: 1.15rem 1.15rem 1.05rem;
  box-shadow: var(--shadow-card);
  color: var(--text);
}

.modal__dialog:has(.mail-form) .field {
  gap: 0.28rem;
}

.modal__dialog:has(.mail-form) .field__label,
.modal__dialog:has(.mail-form) .mail-linked__title {
  color: var(--text);
  text-shadow: none;
  font-weight: 650;
}

.modal__dialog:has(.mail-form) .field__input,
.modal__dialog.mail-keyword .field__input {
  background: var(--bg-stage);
  border: 1px solid var(--border);
  color: var(--text);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.modal__dialog:has(.mail-form) .field__input::placeholder,
.modal__dialog.mail-keyword .field__input::placeholder {
  color: color-mix(in srgb, var(--text) 40%, var(--text-muted));
  font-weight: 400;
}

.modal__dialog:has(.mail-form) .field__input:focus,
.modal__dialog.mail-keyword .field__input:focus {
  box-shadow: 0 0 0 1px var(--accent);
}

.mail-linked {
  margin: 0 0 1rem;
  padding: 0 0 0.95rem;
  border-bottom: 1px solid var(--border);
}

.mail-linked__title {
  margin: 0 0 0.5rem;
  font-size: 0.78rem;
  font-weight: 650;
  color: color-mix(in srgb, var(--text) 62%, var(--text-muted));
}

.mail-linked__empty {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.8rem;
}

.mail-linked__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.35rem 0.6rem;
  padding: 0.45rem 0;
}

.mail-linked__colors {
  grid-column: 1 / -1;
}

.mail-linked__email {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.84rem;
}

.mail-linked__off {
  flex: 0 0 auto;
  height: 1.55rem;
  padding: 0 0.55rem;
  border: 1px solid color-mix(in srgb, #c4473a 35%, var(--border));
  border-radius: 999px;
  background: transparent;
  color: #c4473a;
  font-size: 0.72rem;
  font-weight: 650;
  cursor: pointer;
}

.mail-accounts {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 0.28rem;
  margin: 0 0.05rem 0.5rem;
}

.mail-accounts__thumb {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 8%, transparent);
  pointer-events: none;
  opacity: 0;
  transform: translate3d(0, 0, 0);
  transition:
    transform 0.32s var(--ease-out),
    width 0.32s var(--ease-out),
    height 0.32s var(--ease-out),
    opacity 0.18s ease;
  will-change: transform, width, height;
}

.mail-accounts__thumb.is-ready {
  opacity: 1;
}

.mail-accounts__thumb.is-snap {
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .mail-accounts__thumb {
    transition: none !important;
  }
}

.mail-pill {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  height: 1.62rem;
  padding: 0 0.62rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: color var(--dur-fast) ease;
}

.mail-pill:hover {
  color: var(--text);
}

.mail-pill__x {
  display: grid;
  place-items: center;
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-stage) 28%, transparent);
  font-size: 0.78rem;
  line-height: 1;
}

.mail-pill.is-on {
  background: transparent;
  color: var(--text);
}

.mail-pill.is-on:hover {
  color: var(--text);
}

.mail-pill__dot {
  width: 0.48rem;
  height: 0.48rem;
  border-radius: 999px;
  background: var(--mail-tint, #5b8def);
  flex: 0 0 auto;
}

.mail-form__colors {
  display: flex;
  flex-wrap: wrap;
  gap: 0.18rem;
}

.mail-color {
  width: 0.58rem;
  height: 0.58rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--mail-tint);
  cursor: pointer;
}

.mail-color.is-on {
  box-shadow: 0 0 0 1px var(--surface), 0 0 0 2px var(--mail-tint);
}

.mail-alerts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.32rem;
  margin: 0 0 0.7rem;
}

.mail-alerts__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.28rem;
}

.mail-alert {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  height: 1.55rem;
  padding: 0 0.5rem;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, #2f7de1 14%, var(--surface));
  color: #2f7de1;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
}

.mail-alerts__input {
  min-width: 10rem;
  flex: 1 1 8rem;
  height: 1.7rem;
  padding: 0 0.65rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-size: 0.78rem;
}

.mail-status,
.mail-empty,
.mail-warn {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.84rem;
}

.mail-empty[hidden] {
  display: none !important;
}

.mail-empty {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.42rem;
  flex: 1;
  min-height: 12rem;
  padding: 2.4rem 1.2rem 1.4rem;
  text-align: center;
  line-height: 1.45;
}

.mail-empty__mark {
  display: grid;
  place-items: center;
  width: 3.4rem;
  height: 3.4rem;
  margin-bottom: 0.2rem;
  color: color-mix(in srgb, var(--text-muted) 70%, var(--text));
  opacity: 0.55;
}

.mail-empty__mark svg {
  width: 2.55rem;
  height: 2.55rem;
}

.mail-empty__text {
  margin: 0;
  max-width: 100%;
  overflow: hidden;
  font-size: 0.84rem;
  font-weight: 450;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mail-warn {
  color: #c4473a;
}

.mail-sheet {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  padding-top: 0.2rem;
  border-radius: 1.25rem 1.25rem 0 0;
  background: color-mix(in srgb, var(--surface) 90%, var(--bg-stage));
}

html[data-theme="dark"] .mail-sheet {
  background: color-mix(in srgb, var(--surface) 82%, #000);
}

.mail-sheet:has(.mail-empty:not([hidden])) .mail-list {
  flex: 0 0 auto;
  min-height: 0;
  padding-bottom: 0;
}

.mail-list {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0.15rem 0.55rem 0;
  padding-bottom: calc(var(--dock-h) + env(safe-area-inset-bottom, 0px) + var(--stick-rail-h, 2.7rem) + 0.45rem);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: var(--scroll-bounce);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  background: transparent;
  box-shadow: none;
}

.mail-list::-webkit-scrollbar {
  display: none;
}

@keyframes mail-item-enter {
  from {
    opacity: 0;
    transform: translate3d(0, 10px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes mail-item-leave {
  to {
    opacity: 0;
    transform: translate3d(0, -6px, 0);
  }
}

.mail-list.is-list-leave > * {
  animation: mail-item-leave 0.16s ease forwards;
}

.mail-list.is-list-enter > .mail-item,
.mail-list.is-list-enter > .mail-warn,
.mail-list.is-list-enter > .mail-more {
  animation: mail-item-enter 0.34s var(--ease-out) both;
}

.mail-list.is-list-enter > *:nth-child(1) { animation-delay: 0.02s; }
.mail-list.is-list-enter > *:nth-child(2) { animation-delay: 0.045s; }
.mail-list.is-list-enter > *:nth-child(3) { animation-delay: 0.07s; }
.mail-list.is-list-enter > *:nth-child(4) { animation-delay: 0.095s; }
.mail-list.is-list-enter > *:nth-child(5) { animation-delay: 0.12s; }
.mail-list.is-list-enter > *:nth-child(6) { animation-delay: 0.145s; }
.mail-list.is-list-enter > *:nth-child(7) { animation-delay: 0.17s; }
.mail-list.is-list-enter > *:nth-child(8) { animation-delay: 0.195s; }
.mail-list.is-list-enter > *:nth-child(9) { animation-delay: 0.22s; }
.mail-list.is-list-enter > *:nth-child(10) { animation-delay: 0.245s; }
.mail-list.is-list-enter > *:nth-child(11) { animation-delay: 0.27s; }
.mail-list.is-list-enter > *:nth-child(12) { animation-delay: 0.295s; }
.mail-list.is-list-enter > *:nth-child(n + 13) { animation-delay: 0.32s; }

@media (prefers-reduced-motion: reduce) {
  .mail-list.is-list-leave > *,
  .mail-list.is-list-enter > .mail-item,
  .mail-list.is-list-enter > .mail-warn,
  .mail-list.is-list-enter > .mail-more {
    animation: none !important;
  }
}

.mail-more {
  margin: 0;
  padding: 0.55rem 0.8rem 0.75rem;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 400;
  text-align: center;
}

.mail-item {
  display: grid;
  grid-template-columns: 1.85rem minmax(0, 1fr);
  align-items: center;
  gap: 0.62rem;
  width: 100%;
  padding: 0.68rem 0.85rem;
  border: 0;
  border-radius: 0.72rem;
  background: transparent;
  color: var(--text);
  font-weight: 400;
  text-align: left;
  cursor: pointer;
  transition:
    background var(--dur-fast) ease,
    transform var(--dur-fast) var(--ease-out);
}

.mail-item:last-child {
  border-bottom: 0;
}

.mail-item:active,
.notes-item:active,
.cal-event:active {
  transform: scale(0.992);
}

@media (hover: hover) {
  .mail-item:hover {
    background: color-mix(in srgb, var(--text) 4.5%, transparent);
  }

  .cal-event:hover {
    background: color-mix(in srgb, var(--text) 5%, transparent);
  }
}

.mail-item__avatar {
  display: grid;
  place-items: center;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--mail-tint, #5b8def) 18%, transparent);
  color: var(--mail-tint, #5b8def);
  font-size: 0.72rem;
  font-weight: 650;
}

.mail-item__body {
  display: grid;
  gap: 0.06rem;
  min-width: 0;
}

.mail-item.is-unseen .mail-item__subject {
  font-weight: 600;
  color: var(--text);
}

.mail-item__top {
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
  min-width: 0;
}

.mail-item__from,
.mail-item__subject {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mail-item__from {
  flex: 1 1 auto;
  color: var(--text);
  font-size: 0.84rem;
  font-weight: 560;
  letter-spacing: -0.02em;
}

.mail-item__when,
.mail-item__account {
  flex: 0 0 auto;
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 450;
  font-variant-numeric: tabular-nums;
}

.mail-item__account {
  display: none;
}

.mail-item__subject {
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 400;
}

@media (max-width: 720px) {
  .mail-item__from {
    font-size: calc(0.8rem + 2pt);
  }

  .mail-item__subject {
    font-size: calc(0.78rem + 2pt);
  }

  .mail-item__when,
  .mail-item__account {
    font-size: calc(0.72rem + 2pt);
  }

  .mail-item__avatar {
    font-size: calc(0.72rem + 2pt);
  }
}

.mail-form__hint {
  margin: 0 0 0.6rem;
  color: color-mix(in srgb, var(--text) 68%, var(--text-muted));
  font-size: 0.78rem;
  line-height: 1.45;
}

.mail-form__hint a {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
}

.mail-form__error {
  margin: 0 0 0.7rem;
  color: #c4473a;
  font-size: 0.82rem;
  font-weight: 650;
}

.mail-form__actions {
  margin-top: 0.4rem;
}

.mail-reader {
  width: min(42rem, calc(100vw - 1.5rem));
  max-height: min(86vh, 820px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0;
  overflow: hidden;
  border: 0;
  border-radius: 1.25rem;
  background: var(--surface);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--text) 6%, transparent);
}

.mail-reader.is-loading {
  width: min(36rem, calc(100vw - 1.5rem));
  max-height: none;
}

.mail-reader__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem 0.9rem;
  align-items: start;
  margin: 0;
  padding: 1.05rem 1.05rem 0.95rem;
  border-bottom: 1px solid color-mix(in srgb, var(--text) 7%, transparent);
  background: var(--surface);
}

.mail-reader__titles {
  min-width: 0;
}

.mail-reader__x {
  display: grid;
  place-items: center;
  width: 2.05rem;
  height: 2.05rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}

.mail-reader__x:hover {
  background: color-mix(in srgb, var(--text) 6%, transparent);
  color: var(--text);
}

.mail-load {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 0.65rem;
  min-height: 11.5rem;
  padding: 1.5rem 1rem 1.7rem;
}

.mail-load[hidden] {
  display: none !important;
}

.mail-load__dial {
  position: relative;
  display: grid;
  place-items: center;
}

.mail-load__ring {
  width: 4.5rem;
  height: 4.5rem;
  transform: rotate(-90deg);
}

.mail-load__track,
.mail-load__bar {
  fill: none;
  stroke-width: 4.5;
}

.mail-load__track {
  stroke: rgba(0, 0, 0, 0.1);
}

.mail-load__bar {
  stroke: currentColor;
  stroke-linecap: round;
  stroke-dasharray: 163.36;
  stroke-dashoffset: 163.36;
  transition: stroke-dashoffset 0.2s ease;
}

.mail-load__pct {
  position: absolute;
  font-variant-numeric: tabular-nums;
  font-weight: 750;
  font-size: 0.92rem;
  letter-spacing: -0.03em;
}

.mail-load__hint {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.8rem;
}

[data-theme="dark"] .mail-load__track {
  stroke: rgba(255, 255, 255, 0.14);
}

.mail-reader__subject {
  margin: 0 0 0.35rem;
  font-size: 1.08rem;
  line-height: 1.35;
  letter-spacing: -0.03em;
}

.mail-reader__from,
.mail-reader__meta {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.mail-reader__text {
  margin: 0;
  padding: 1rem 1.05rem 1.2rem;
  max-height: min(58vh, 32rem);
  overflow: auto;
  overscroll-behavior: var(--scroll-bounce);
  white-space: pre-wrap;
  font: 0.92rem/1.55 var(--font-ui);
}

.mail-reader__frame {
  width: 100%;
  height: min(58vh, 34rem);
  margin: 0;
  border: 0;
  background: #fff;
}

.cal {
  display: grid;
  grid-template-rows: auto auto auto auto;
  align-content: start;
  justify-items: stretch;
  height: auto;
  min-height: 100%;
  padding: 3rem max(1.85rem, env(safe-area-inset-right, 0px) + 1.25rem) calc(var(--dock-h) + env(safe-area-inset-bottom, 0px) + 0.7rem) max(1.85rem, env(safe-area-inset-left, 0px) + 1.25rem);
  box-sizing: border-box;
}

.cal-head {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  width: 100%;
  padding: 0.1rem 0.1rem 0.35rem;
}

.cal-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0.28rem;
  width: 100%;
  margin: 0 0 0.7rem;
}

.cal-filters[hidden] {
  display: none;
}

.cal-filter {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  height: 1.5rem;
  padding: 0 0.58rem 0 0.46rem;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 5%, transparent);
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  box-shadow: none;
  cursor: pointer;
}

.cal-filter::before {
  content: "";
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 999px;
  background: var(--cal-filter, currentColor);
}

.cal-filter.is-on {
  background: color-mix(in srgb, var(--cal-filter, var(--text)) 16%, var(--surface));
  color: var(--text);
  border-color: transparent;
  box-shadow: none;
}

.cal-head__nav {
  display: flex;
  align-items: center;
  gap: 0.05rem;
  flex: 0 0 auto;
}

.cal-head__title {
  display: flex;
  align-items: baseline;
  gap: 0.42rem;
  margin: 0;
  min-width: 0;
  color: var(--text);
  font-weight: 650;
  letter-spacing: -0.055em;
  text-align: left;
}

.cal-head__month {
  font-size: 1.72rem;
  font-weight: 680;
  letter-spacing: -0.06em;
  line-height: 1;
}

.cal-head__year {
  color: var(--text-muted);
  font-size: 0.92rem;
  font-weight: 520;
  letter-spacing: -0.02em;
}

.cal-nav {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

.cal-nav svg {
  display: block;
  width: 0.95rem;
  height: 0.95rem;
}

.cal-nav:hover {
  background: color-mix(in srgb, var(--text) 6%, transparent);
  color: var(--text);
}

.cal-head__tools {
  display: flex;
  align-items: center;
  gap: 0.28rem;
}

.cal-head__btn {
  height: 1.7rem;
  padding: 0 0.55rem;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 6%, var(--surface));
  color: var(--text);
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
}

.cal-head__add {
  width: 1.7rem;
  height: 1.7rem;
  border: 0;
  border-radius: 999px;
  background: #e53935;
  color: #fff;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.cal-week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  padding: 0.62rem 0.15rem 0.42rem;
}

.cal-week__day {
  color: color-mix(in srgb, var(--text-muted) 88%, var(--text));
  font-size: 0.62rem;
  font-weight: 620;
  letter-spacing: 0.12em;
  text-align: center;
}

.cal-week__day.is-sun {
  color: #e53935;
}

.cal-week__day.is-sat,
.cal-week__day:nth-child(7) {
  color: #3d7ea6;
}

.cal-sheet {
  min-width: 0;
  overflow: hidden;
  border-radius: 1.25rem;
  background: color-mix(in srgb, var(--surface) 92%, var(--bg-stage));
  box-shadow: 0 1px 0 color-mix(in srgb, var(--text) 4%, transparent);
}

.cal-month {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0;
  flex: 0 0 auto;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior: var(--scroll-bounce);
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  touch-action: manipulation;
  -webkit-overflow-scrolling: touch;
}

.cal-month::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.cal-grid {
  display: grid;
  flex: 0 0 100%;
  align-self: flex-start;
  width: 100%;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-template-rows: repeat(6, minmax(min-content, auto));
  height: auto;
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.cal-cell {
  --cal-cell-pad-x: 0.2rem;
  --cal-line: transparent;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0.1rem;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: 0.18rem 0 0.22rem;
  border: 0;
  box-shadow: none;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  user-select: none;
}

.cal-cell:nth-child(7n) {
  box-shadow: none;
}

.cal-cell:nth-child(n + 36) {
  box-shadow: none;
}

.cal-cell:nth-child(7n):nth-child(n + 36) {
  box-shadow: none;
}

.cal-cell.is-out {
  color: color-mix(in srgb, var(--text-muted) 62%, transparent);
  background: transparent;
}

.cal-cell.is-selected {
  z-index: 2;
  background: transparent;
}

.cal-cell.is-selected.is-today {
  background: transparent;
}

.cal-cell__num {
  display: grid;
  place-items: center;
  width: 1.48rem;
  height: 1.48rem;
  margin: 0 0 0.02rem var(--cal-cell-pad-x, 0.2rem);
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 560;
}

.cal-cell.is-today .cal-cell__num {
  background: transparent;
  color: #e53935;
  font-weight: 700;
}

.cal-cell.is-selected .cal-cell__num {
  background: var(--text);
  color: var(--surface);
  font-weight: 650;
}

.cal-cell.is-selected.is-today .cal-cell__num {
  background: #e53935;
  color: #fff;
}

.cal-cell__events {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.cal-chip {
  display: block;
  width: calc(100% - 2 * var(--cal-cell-pad-x, 0.2rem));
  margin-left: var(--cal-cell-pad-x, 0.2rem);
  margin-right: var(--cal-cell-pad-x, 0.2rem);
  min-height: 1.02rem;
  padding: 0.06rem 0.28rem;
  border: 0;
  border-radius: 0.28rem;
  overflow: hidden;
  background: color-mix(in srgb, var(--cal-chip, #1e88e5) 14%, transparent);
  color: var(--cal-chip, #1e88e5);
  font-size: 0.6rem;
  font-weight: 640;
  line-height: 1.3;
  letter-spacing: -0.025em;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.cal-chip.is-crew-available {
  background: transparent;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cal-chip, #1e88e5) 50%, transparent);
}

.cal-chip.is-crew-visit,
.cal-chip.is-crew-review,
.cal-chip.is-all-day.is-crew-visit,
.cal-chip.is-all-day.is-crew-review {
  background: transparent;
  color: var(--cal-chip, #e53935);
  box-shadow: none;
}

.cal-chip.is-crew-visit {
  display: flex;
  align-items: center;
  gap: 0.14rem;
}

.cal-chip.is-crew-visit span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cal-chip__star {
  flex: 0 0 auto;
  width: 0.72rem;
  height: 0.72rem;
}

.cal-event__title .cal-chip__star {
  width: 0.86rem;
  height: 0.86rem;
  margin-right: 0.18rem;
  vertical-align: -0.14rem;
  color: currentColor;
}

.cal-chip.is-all-day {
  background: color-mix(in srgb, var(--cal-chip, #1e88e5) 78%, #ffffff);
  color: #fff;
}

.cal-chip.is-span {
  position: relative;
  z-index: 2;
  width: 100%;
  margin: 0.02rem 0;
  border-radius: 0;
  overflow: visible;
  padding: 0.02rem 0.34rem 0.28rem;
  background: transparent;
  color: var(--cal-chip, #e53935);
  box-shadow: none;
}

.cal-chip.is-span::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.1rem;
  height: 1.5px;
  background: var(--cal-chip, #e53935);
}

.cal-chip.is-span:not(.is-span-end) {
  width: calc(100% + 2px);
}

.cal-chip.is-span:not(.is-span-end)::after {
  right: -2px;
}

.cal-chip.is-span-start {
  width: calc(100% - 0.16rem);
  margin-left: 0.16rem;
  margin-right: 0;
  border-radius: 0;
}

.cal-chip.is-span-start:not(.is-span-end) {
  width: calc(100% - 0.16rem + 2px);
}

.cal-chip.is-span-start::after {
  left: 0;
  border-radius: 999px 0 0 999px;
}

.cal-chip.is-span-end {
  width: calc(100% - 0.16rem);
  margin-left: 0;
  margin-right: 0.16rem;
  border-radius: 0;
  text-align: right;
  padding-right: 0.42rem;
}

.cal-chip.is-span-end::after {
  right: 0.04rem;
  border-radius: 0 999px 999px 0;
}

.cal-chip.is-span-start.is-span-end {
  width: calc(100% - 0.32rem);
  margin-left: 0.16rem;
  margin-right: 0.16rem;
  text-align: left;
}

.cal-chip.is-span-start.is-span-end::after {
  left: 0;
  right: 0;
  border-radius: 999px;
}

.cal-chip-more {
  margin-left: var(--cal-cell-pad-x, 0.2rem);
  padding: 0 0.16rem;
  color: var(--text-muted);
  font-size: 0.56rem;
  font-weight: 620;
  letter-spacing: -0.02em;
}

html[data-theme="dark"] .cal-chip {
  background: color-mix(in srgb, var(--cal-chip, #1e88e5) 22%, transparent);
}

html[data-theme="dark"] .cal-chip.is-all-day {
  background: color-mix(in srgb, var(--cal-chip, #1e88e5) 72%, #1a1f28);
  color: #fff;
}

html[data-theme="dark"] .cal-chip.is-crew-visit,
html[data-theme="dark"] .cal-chip.is-crew-review,
html[data-theme="dark"] .cal-chip.is-span,
html[data-theme="dark"] .cal-chip.is-all-day.is-crew-visit,
html[data-theme="dark"] .cal-chip.is-all-day.is-crew-review {
  background: transparent;
  color: var(--cal-chip, #ef5350);
}

html[data-theme="dark"] .cal-chip.is-span::after {
  background: var(--cal-chip, #ef5350);
}

html[data-theme="dark"] .cal-sheet {
  background: color-mix(in srgb, var(--surface) 88%, #000);
  box-shadow: none;
}

html[data-theme="dark"] .cal-grid,
html[data-theme="dark"] .cal-agenda {
  box-shadow: none;
}

html[data-theme="dark"] .cal-filter {
  background: color-mix(in srgb, var(--text) 8%, transparent);
}

html[data-theme="dark"] .cal-cell.is-selected {
  background: transparent;
}

html[data-theme="dark"] .cal-cell.is-selected.is-today {
  background: transparent;
}

html[data-theme="dark"] .cal-cell.is-selected .cal-cell__num {
  background: #e8eaef;
  color: #16181d;
}

html[data-theme="dark"] .cal-cell.is-selected.is-today .cal-cell__num {
  background: #e53935;
  color: #fff;
}

.cal-agenda {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  margin-top: 1.05rem;
  padding: 0.1rem 0.08rem 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.cal-agenda.is-empty {
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.15rem 0.08rem 0;
}

.cal-agenda__title {
  margin: 0 0 0.35rem;
  color: var(--text);
  font-size: 0.98rem;
  font-weight: 650;
  letter-spacing: -0.04em;
}

.cal-agenda__dow {
  margin-left: 0.32rem;
  color: var(--text-muted);
  font-size: 0.76em;
  font-weight: 500;
  letter-spacing: 0;
}

.cal-agenda.is-empty .cal-agenda__title {
  margin: 0;
}

.cal-agenda__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: visible;
}

.cal-agenda__empty {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 450;
  white-space: nowrap;
}

.cal-event {
  display: grid;
  grid-template-columns: 0.28rem 2.85rem minmax(0, 1fr);
  align-items: stretch;
  gap: 0.62rem;
  width: 100%;
  padding: 0.72rem 0.12rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 7%, transparent);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition:
    background var(--dur-fast) ease,
    transform var(--dur-fast) var(--ease-out);
}

.cal-event:first-child {
  box-shadow: none;
}

.cal-event__swatch {
  width: 0.28rem;
  min-height: 1.4rem;
  height: auto;
  border-radius: 999px;
  align-self: stretch;
  opacity: 0.92;
}

.cal-event__time {
  align-self: center;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 520;
  font-variant-numeric: tabular-nums;
}

.cal-event__main {
  display: flex;
  flex-direction: column;
  gap: 0.16rem;
  min-width: 0;
}

.cal-event__title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.9rem;
  font-weight: 600;
}

.cal-event__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.18rem;
}

.cal-event__tag {
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 700;
}

.cal-form__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.28rem;
  margin-bottom: 0.4rem;
}

.cal-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  height: 1.5rem;
  padding: 0 0.5rem;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 8%, var(--surface));
  color: var(--text);
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
}

.cal-form__allday {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0.15rem 0 0.35rem;
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 650;
}

.cal-form select.field__input {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: calc(100% - 1rem) 50%, calc(100% - 0.7rem) 50%;
  background-size: 0.35rem 0.35rem, 0.35rem 0.35rem;
  background-repeat: no-repeat;
}

.cal-form__row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr);
  gap: 0.55rem;
}

.cal-form.is-all-day .cal-form__time {
  display: none;
}

.cal-form.is-all-day .cal-form__row {
  grid-template-columns: 1fr;
}

.cal-form__colors {
  display: flex;
  gap: 0.2rem;
}

.cal-form__color {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 0.58rem;
  height: 0.58rem;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
  background: var(--cal-color);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
  cursor: pointer;
}

.cal-form__color.is-on {
  box-shadow: 0 0 0 1px var(--bg-stage), 0 0 0 2px var(--cal-color);
}

.cal-form__note {
  resize: vertical;
  min-height: 4.2rem;
}

.cal-form__actions {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.memo-board {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: transparent;
  border: 0;
  border-radius: 0;
  touch-action: none;
}

.memo-board.is-file-drag::after {
  content: "";
  position: absolute;
  inset: 0.75rem;
  z-index: 1;
  border: 1.5px dashed color-mix(in srgb, var(--text-muted) 55%, transparent);
  border-radius: 12px;
  pointer-events: none;
}

.memo-note {
  --memo-fold: 1.15rem;
  position: absolute;
  top: 0;
  left: 0;
  width: var(--memo-w, 200px);
  height: var(--memo-h, 200px);
  translate: var(--memo-x, 0) var(--memo-y, 0);
  color: #2a241c;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  filter:
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.08))
    drop-shadow(0 8px 16px rgba(0, 0, 0, 0.14))
    drop-shadow(0 22px 40px rgba(0, 0, 0, 0.16));
}

.memo-note__sheet {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.3), transparent 34%),
    var(--memo-color, #ffb300);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 4px 4px 0 4px;
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - var(--memo-fold)),
    calc(100% - var(--memo-fold)) 100%,
    0 100%
  );
}

.memo-note__fold {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 var(--memo-fold) var(--memo-fold);
  border-color:
    transparent
    transparent
    transparent
    color-mix(in srgb, var(--memo-color, #ffb300) 55%, #1a1208);
  filter: drop-shadow(-1px -1px 1px rgba(0, 0, 0, 0.14));
  pointer-events: none;
}

.memo-note.is-dragging,
.memo-note.is-resizing {
  z-index: 10000 !important;
  cursor: grabbing;
  opacity: 1;
  filter: none;
  -webkit-filter: none;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.18);
  will-change: transform;
}

.memo-note.is-list-dragging,
.board-panel.is-list-dragging {
  z-index: 30 !important;
  opacity: 0.92;
  cursor: grabbing;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.22);
}

.memo-note.is-leaving,
.board-panel.is-leaving {
  filter: none !important;
  -webkit-filter: none !important;
  box-shadow: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  animation: none !important;
  transition: none !important;
}

.memo-note.is-entering,
.board-panel.is-entering {
  animation: desk-item-enter 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes desk-item-enter {
  from {
    opacity: 0;
    transform: translateY(-0.85rem) scale(0.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.desk-reorder {
  display: none;
  flex: 1 1 auto;
  align-self: stretch;
  min-width: 2.4rem;
  min-height: 1.35rem;
  margin-right: auto;
  border-radius: 0.35rem;
  background:
    radial-gradient(circle, rgba(0, 0, 0, 0.28) 0 1.1px, transparent 1.35px) 0 35% / 7px 7px repeat-x,
    radial-gradient(circle, rgba(0, 0, 0, 0.28) 0 1.1px, transparent 1.35px) 0 65% / 7px 7px repeat-x;
  opacity: 0.55;
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
}

html[data-theme="dark"] .desk-reorder {
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.5) 0 1.1px, transparent 1.35px) 0 35% / 7px 7px repeat-x,
    radial-gradient(circle, rgba(255, 255, 255, 0.5) 0 1.1px, transparent 1.35px) 0 65% / 7px 7px repeat-x;
}

.memo-note__top {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.05rem;
  min-height: 1.2rem;
  padding: 0.06rem 0.18rem 0;
  cursor: grab;
  user-select: none;
}

.memo-note.is-dragging .memo-note__top {
  cursor: grabbing;
}

.memo-note__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 1.6rem;
  padding: 0.15rem 1.35rem 0.4rem 0.45rem;
  cursor: grab;
  user-select: none;
}

.memo-note__swatches {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.memo-note__footer:hover .memo-note__swatches,
.memo-note__swatches:focus-within {
  opacity: 1;
  pointer-events: auto;
}

.memo-note__swatch {
  width: 0.72rem;
  height: 0.72rem;
  padding: 0;
  border-radius: 999px;
  border: 1.5px solid rgba(0, 0, 0, 0.22);
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--swatch, #fff);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  cursor: pointer;
}

.memo-note__swatch--sky { --swatch: #2bc4d0; }
.memo-note__swatch--white { --swatch: #d4e157; }
.memo-note__swatch--pink { --swatch: #ef5f8f; }
.memo-note__swatch--yellow { --swatch: #ffb300; }
.memo-note__swatch--gray { --swatch: #c2c6cc; }

.memo-note__swatch.is-active {
  box-shadow:
    inset 0 0 0 2px var(--swatch, #fff),
    0 0 0 1.5px rgba(0, 0, 0, 0.45);
  transform: scale(1.08);
}

.memo-note__delete {
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 4px;
  color: rgba(0, 0, 0, 0.5);
  font-size: 1.15rem;
  line-height: 1;
}

.memo-note__delete:hover {
  background: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.85);
}

.desk-lock {
  display: grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  padding: 0;
  border-radius: 4px;
  color: rgba(0, 0, 0, 0.42);
  flex: 0 0 auto;
  transition:
    opacity 0.14s ease,
    color 0.14s ease,
    background 0.14s ease,
    transform 0.14s ease,
    box-shadow 0.14s ease;
}

.desk-lock svg {
  width: 0.9rem;
  height: 0.9rem;
  display: block;
}

.desk-lock:hover {
  background: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.85);
}

.memo-note.is-locked .desk-lock,
.board-panel.is-locked .desk-lock {
  opacity: 0;
  pointer-events: none;
  color: #1a1612;
}

.memo-note.is-locked:hover .desk-lock,
.memo-note.is-locked:focus-within .desk-lock,
.board-panel.is-locked:hover .desk-lock,
.board-panel.is-locked:focus-within .desk-lock {
  opacity: 1;
  pointer-events: auto;
  background: rgba(26, 22, 18, 0.16);
  box-shadow: 0 0 0 1.5px rgba(26, 22, 18, 0.28);
  transform: scale(1.08);
}

@media (hover: none) {
  .memo-note.is-locked .desk-lock,
  .board-panel.is-locked .desk-lock {
    opacity: 1;
    pointer-events: auto;
    background: rgba(26, 22, 18, 0.16);
    box-shadow: 0 0 0 1.5px rgba(26, 22, 18, 0.28);
  }
}

.memo-note.is-locked .memo-note__delete,
.memo-note.is-locked .memo-note__swatches,
.memo-note.is-locked .memo-note__image-remove,
.board-panel.is-locked .board-panel__delete,
.board-panel.is-locked .board-panel__swatches,
.board-panel.is-locked .board-panel__lane-add,
.board-panel.is-locked .board-lane__delete,
.board-panel.is-locked .board-lane__swatches,
.board-panel.is-locked .board-card__delete,
.board-panel.is-locked .board-card__swatches {
  display: none !important;
}

.memo-note__media {
  position: relative;
  flex: 0 0 auto;
  margin: 0 0.65rem 0.35rem;
  max-height: 55%;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 2px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.35),
    0 1px 2px rgba(0, 0, 0, 0.06);
  background: color-mix(in srgb, var(--memo-color, #ffb300) 88%, #000000);
  cursor: grab;
  user-select: none;
}

.memo-note__media[hidden] {
  display: none !important;
}

.memo-note__image {
  display: block;
  width: 100%;
  max-height: 100%;
  object-fit: cover;
  vertical-align: middle;
  pointer-events: none;
}

.memo-note__image-remove {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font-size: 1rem;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.12s ease;
}

.memo-note__media:hover .memo-note__image-remove {
  opacity: 1;
}

.memo-note__text {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  overflow: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  border: 0;
  outline: none;
  padding: 0.12rem 0.82rem 0.4rem;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(1.48em - 1px),
    rgba(0, 0, 0, 0.055) calc(1.48em - 1px),
    rgba(0, 0, 0, 0.055) 1.48em
  );
  background-attachment: local;
  color: inherit;
  font-family: var(--font-ui);
  font-size: 0.92rem;
  line-height: 1.48;
  white-space: pre-wrap;
  word-break: break-word;
}

.memo-note__text::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.memo-note__text:empty::before {
  content: "메모 작성";
  color: rgba(42, 36, 28, 0.38);
}

.memo-note__text ul {
  margin: 0.15rem 0;
  padding-left: 1.2rem;
}

.memo-note__text ul ul {
  margin: 0.05rem 0;
  padding-left: 1.1rem;
}

.memo-note__text b,
.memo-note__text strong {
  font-weight: 700;
}

.memo-note__edge {
  position: absolute;
  z-index: 4;
}

.memo-note__edge--n,
.memo-note__edge--s {
  left: 0.55rem;
  right: 0.55rem;
  height: 0.45rem;
  cursor: ns-resize;
}

.memo-note__edge--n { top: -0.15rem; }
.memo-note__edge--s { bottom: -0.15rem; }

.memo-note__edge--e,
.memo-note__edge--w {
  top: 0.55rem;
  bottom: 0.55rem;
  width: 0.45rem;
  cursor: ew-resize;
}

.memo-note__edge--e { right: -0.15rem; }
.memo-note__edge--w { left: -0.15rem; }

.memo-note__edge--ne,
.memo-note__edge--nw,
.memo-note__edge--se,
.memo-note__edge--sw {
  width: 0.7rem;
  height: 0.7rem;
}

.memo-note__edge--ne { top: -0.2rem; right: -0.2rem; cursor: nesw-resize; }
.memo-note__edge--nw { top: -0.2rem; left: -0.2rem; cursor: nwse-resize; }
.memo-note__edge--se { bottom: -0.2rem; right: -0.2rem; cursor: nwse-resize; }
.memo-note__edge--sw { bottom: -0.2rem; left: -0.2rem; cursor: nesw-resize; }

.view.is-file-drag {
  outline: 2px dashed var(--accent);
  outline-offset: -14px;
}

.view__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.view__heading {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  min-width: 0;
}

.view__title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
}

.view__meta {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

.btn {
  padding: 0.55rem 0.9rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 600;
  transition:
    background var(--dur-fast) ease,
    border-color var(--dur-fast) ease,
    opacity var(--dur-fast) ease,
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) ease;
}

.btn:hover {
  background: var(--btn-hover);
}

.btn:active {
  transform: scale(0.97);
}

.btn--primary {
  border-color: transparent;
  background: var(--accent);
  color: var(--accent-contrast);
}

.btn--primary:hover {
  opacity: 0.92;
}

.btn--danger {
  border-color: transparent;
  background: #c62828;
  color: #ffffff;
}

.btn--danger:hover {
  background: #b71c1c;
}

.modal__actions .btn--primary:hover {
  opacity: 0.92;
  background: var(--accent);
  filter: none;
}

.create-panel {
  margin-bottom: 1.5rem;
  padding: 1rem 1.1rem 1.15rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.create-panel__head {
  margin-bottom: 0.9rem;
}

.create-panel__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
}

.modal[hidden] {
  display: none !important;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 11000;
  display: grid;
  place-items: center;
  padding: 1.25rem;
}

/* Modal lives under .stage; lift stage above dock/stick while open. */
body:has(.modal:not([hidden])) .app .stage {
  position: relative;
  z-index: 11050;
}

body:has(.modal:not([hidden])) .dock,
body:has(.modal:not([hidden])) .dock-stick {
  z-index: 40;
}

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: var(--modal-backdrop);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  opacity: 0;
  animation: ui-fade-in var(--dur) ease both;
}

.modal__shell {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 1rem;
  width: min(760px, 100%);
  max-height: min(90vh, 940px);
  animation: ui-pop-in var(--dur-slow) var(--ease-out) both;
}

.modal__shell.mail-reader {
  width: min(42rem, calc(100vw - 1.5rem));
  max-height: min(86vh, 820px);
  gap: 0;
  overflow: hidden;
}

.modal__shell.mail-reader.is-loading {
  width: min(36rem, calc(100vw - 1.5rem));
  max-height: none;
}

.modal__dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-height: min(78vh, 820px);
  overflow: auto;
  overscroll-behavior: var(--scroll-bounce);
  padding: var(--modal-dialog-pad, 0.25rem 0.15rem);
  border: 1px solid var(--modal-dialog-border);
  border-radius: var(--modal-dialog-radius, 0);
  background: var(--modal-dialog-bg);
  box-shadow: var(--modal-dialog-shadow);
  -webkit-backdrop-filter: var(--modal-dialog-blur, none);
  backdrop-filter: var(--modal-dialog-blur, none);
}

.modal__actions {
  display: flex;
  justify-content: center;
  gap: 0.65rem;
}

.crew-form__actions {
  position: relative;
  width: 100%;
  align-items: center;
}

.crew-form__actions [data-crew-delete]:not([hidden]) {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.crew-form__delete {
  display: grid;
  place-items: center;
  width: 2.45rem;
  height: 2.45rem;
  min-width: 0;
  padding: 0;
  border-radius: 0.85rem;
  border: 1px solid transparent;
  background: #c62828;
  color: #ffffff;
}

.crew-form__delete[hidden] {
  display: none !important;
}

.crew-form__delete:hover {
  background: #b71c1c;
}

.crew-form__delete-icon {
  width: 1.15rem;
  height: 1.15rem;
}

.modal__actions .btn {
  min-width: 96px;
}

.modal__shell--confirm {
  width: min(420px, 100%);
  justify-items: center;
}

.confirm-copy {
  text-align: center;
  padding: 0.5rem 0.75rem 0.25rem;
}

.confirm-copy__name {
  margin: 0 0 0.55rem;
  color: var(--modal-label);
  font-size: 1.15rem;
  font-weight: 700;
  text-shadow: var(--modal-label-shadow);
  word-break: break-word;
}

.confirm-copy__text {
  margin: 0;
  color: var(--modal-label);
  font-size: 0.98rem;
  font-weight: 500;
  text-shadow: var(--modal-label-shadow);
}

body.is-modal-open {
  overflow: hidden;
}

body.is-modal-open .app {
  filter: blur(8px);
  pointer-events: none;
  user-select: none;
}

.modal__head {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  margin-bottom: 0.85rem;
}

.modal__close {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 8px;
  border: 1px solid var(--modal-control-border);
  background: var(--modal-control-bg);
  color: var(--modal-control-text);
  font-size: 1.25rem;
  line-height: 1;
}

.modal__close:hover {
  color: var(--text);
  background: var(--btn-hover);
}

.create-form {
  display: grid;
  gap: 1.15rem;
}

.create-form__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
  gap: 1.5rem;
  align-items: start;
}

.create-form__fields {
  display: grid;
  gap: 1rem;
}

.create-form__images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
  align-items: start;
}

.modal .field {
  gap: 0.45rem;
}

.modal .field__label {
  font-family: var(--font-ui);
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--modal-label);
  text-shadow: var(--modal-label-shadow);
}

.modal .field__input {
  background: var(--modal-input-bg);
  border-color: var(--modal-input-border);
  color: var(--text);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.modal .field__input::placeholder {
  color: var(--modal-input-placeholder);
}

.modal .field__input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow:
    0 0 0 1px var(--accent),
    0 8px 22px rgba(0, 0, 0, 0.16);
}

.modal .dropzone {
  background: var(--modal-input-bg);
  border: 2px dashed rgba(17, 19, 24, 0.28);
  box-shadow: none;
}

.modal .dropzone.has-image {
  border-style: dashed;
  border-color: rgba(17, 19, 24, 0.34);
}

[data-theme="dark"] .modal .dropzone {
  border-color: var(--modal-input-border);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

[data-theme="dark"] .modal .dropzone.has-image {
  border-color: color-mix(in srgb, var(--modal-label) 35%, transparent);
}

.modal .dropzone.is-dragover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.modal .dropzone__hint {
  color: var(--modal-label);
  font-size: 0.82rem;
  font-weight: 500;
  text-shadow: var(--modal-label-shadow);
}

.modal .dropzone__replace {
  position: absolute;
  z-index: 2;
  inset: auto auto 0.75rem 50%;
  translate: -50% 0;
  margin: 0;
  padding: 0.4rem 0.75rem;
  border: none;
  border-radius: 999px;
  background: rgba(17, 19, 24, 0.82);
  color: #ffffff;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
  transition: opacity 0.15s ease, background 0.15s ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

.modal .dropzone.has-image:hover .dropzone__replace,
.modal .dropzone.has-image.is-dragover .dropzone__replace {
  opacity: 1;
  pointer-events: auto;
}

.modal .dropzone__replace:hover {
  background: rgba(17, 19, 24, 0.88);
}

.modal .tag {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18), 0 6px 16px rgba(0, 0, 0, 0.12);
}

.modal .tag:not(.is-active) {
  background: var(--modal-control-bg);
  border-color: var(--modal-control-border);
  color: var(--modal-control-text);
}

.modal .btn:not(.btn--primary):not(.btn--danger) {
  background: var(--modal-control-bg);
  border-color: var(--modal-control-border);
  color: var(--modal-control-text);
}

.modal .btn--danger,
.modal__actions .btn--danger {
  border-color: transparent;
  background: #c62828;
  color: #ffffff;
}

.modal .btn--danger:hover,
.modal__actions .btn--danger:hover {
  background: #b71c1c;
  color: #ffffff;
  opacity: 1;
}

.modal .modal__title {
  color: var(--modal-label);
  text-shadow: var(--modal-label-shadow);
}

.modal .modal__close {
  color: var(--modal-control-text);
}

.dropzone {
  position: relative;
  aspect-ratio: 25 / 43;
  width: 100%;
  border-radius: 10px;
  border: 1px dashed var(--border);
  background: var(--bg-stage);
  overflow: hidden;
  display: grid;
  place-items: center;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.dropzone.is-dragover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.dropzone.has-image {
  border-style: dashed;
}

.dropzone__hint {
  margin: 0;
  padding: 0.75rem;
  text-align: center;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.4;
  pointer-events: none;
}

.dropzone__preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.create-form__actions {
  display: none;
}

.field {
  display: grid;
  gap: 0.35rem;
}

.field__label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.field__input {
  width: 100%;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-stage);
  color: var(--text);
  font: inherit;
}

.field__input:focus {
  outline: 1px solid var(--accent);
  border-color: var(--accent);
}

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 320px));
  justify-content: center;
  align-content: start;
  box-sizing: border-box;
  width: 100%;
  gap: 2rem;
}

.card-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 320px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--card-border) 80%, transparent);
  box-shadow:
    var(--shadow-card),
    inset 0 1px 0 var(--card-inset);
  cursor: pointer;
  transition:
    opacity var(--dur-fast) ease,
    outline-color var(--dur-fast) ease,
    outline-offset var(--dur-fast) ease,
    translate var(--dur-slow) var(--ease-out),
    box-shadow var(--dur-slow) ease,
    border-color var(--dur-slow) ease;
}

.card-tile::after {
  content: "";
  position: absolute;
  inset: -20% -40%;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 36%,
    var(--shine-soft) 44%,
    var(--shine-mid) 50%,
    var(--shine-soft) 56%,
    transparent 64%
  );
  transform: translateX(-130%) skewX(-20deg);
  opacity: 0;
  animation: card-shine 5.7s ease-in-out infinite;
}

.card-tile:nth-child(2n)::after {
  animation-delay: 1.5s;
  animation-duration: 6.7s;
}

.card-tile:nth-child(3n)::after {
  animation-delay: 2.7s;
  animation-duration: 7.7s;
}

.card-tile:nth-child(4n)::after {
  animation-delay: 0.7s;
  animation-duration: 6.1s;
}

.card-tile:nth-child(5n)::after {
  animation-delay: 3.7s;
  animation-duration: 8.3s;
}

@keyframes card-shine {
  0%,
  72% {
    transform: translateX(-130%) skewX(-20deg);
    opacity: 0;
  }

  76% {
    opacity: 1;
  }

  88% {
    transform: translateX(130%) skewX(-20deg);
    opacity: 1;
  }

  90%,
  100% {
    transform: translateX(130%) skewX(-20deg);
    opacity: 0;
  }
}

.card-tile:hover {
  translate: 0 -8px;
  border-color: color-mix(in srgb, var(--text) 28%, var(--border));
  outline: none;
  box-shadow:
    var(--shadow-card-hover),
    inset 0 1px 0 var(--card-inset),
    0 0 0 1px color-mix(in srgb, var(--text) 16%, transparent);
}

.card-tile.is-pressing {
  translate: 0 -2px;
  outline: none;
  box-shadow:
    var(--shadow-card),
    inset 0 1px 0 var(--card-inset),
    0 0 0 1px color-mix(in srgb, var(--text) 22%, transparent);
}

.card-tile:active,
.card-tile.is-dragging {
  cursor: grabbing;
}

.card-tile.is-dragging {
  opacity: 0.35;
  z-index: 2;
  translate: none;
  transition: opacity 0.15s ease;
}

.card-tile.is-dragging::after,
.gallery.is-sorting .card-tile::after {
  animation: none;
  opacity: 0;
}

.card-tile.is-dragging:hover {
  translate: none;
  border-color: var(--card-border);
  outline: none;
  box-shadow:
    var(--shadow-card),
    inset 0 1px 0 var(--card-inset);
}

.gallery.is-sorting .card-tile:hover {
  translate: none;
  border-color: var(--card-border);
  outline: none;
  box-shadow:
    var(--shadow-card),
    inset 0 1px 0 var(--card-inset);
}

.card-tile.is-drag-over {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.card-tile__media {
  position: relative;
  aspect-ratio: 25 / 43;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 12%, rgba(255, 255, 255, 0.07), transparent 46%),
    var(--media-bg);
  perspective: 1400px;
  cursor: pointer;
}

.card-tile.has-no-back .card-tile__media {
  cursor: default;
}

.card-tile__flip {
  position: relative;
  width: calc(100% - 1.2rem);
  height: calc(100% - 0.95rem);
  margin: 0.6rem 0.6rem 0.35rem;
  border-radius: 10px;
  transform-style: preserve-3d;
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(255, 255, 255, 0.06);
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.card-tile.is-flipped .card-tile__flip {
  transform: rotateY(180deg);
}

.card-tile__face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 10px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.card-tile__face--back {
  transform: rotateY(180deg);
}

.card-tile__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}

.card-tile__body {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  min-width: 0;
  padding: 0.82rem 1.05rem 1.05rem;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--hover) 70%, transparent), transparent 48%),
    var(--card-body);
  border-top: 1px solid var(--card-body-line);
  cursor: pointer;
}

.card-tile__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  min-width: 0;
}

.card-tile__title {
  margin: 0;
  min-width: 0;
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-tile__grader {
  flex: 0 0 auto;
  padding: 0.16rem 0.48rem;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(0, 0, 0, 0.12);
}

.card-tile__grader--psa {
  background: #c62828;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(198, 40, 40, 0.35), 0 4px 14px rgba(0, 0, 0, 0.16);
}

.card-tile__grader--brg {
  background: #1a3a8f;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(26, 58, 143, 0.35), 0 4px 14px rgba(0, 0, 0, 0.16);
}

.card-tile__collection,
.card-tile__number {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-tile__collection {
  margin-top: 0.08rem;
}

.card-tile__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.55rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--card-body-line);
  min-height: 1rem;
}

.card-tile__price {
  position: relative;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.01em;
  cursor: default;
}

.card-tile__price[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.35rem);
  transform: translateX(-50%);
  z-index: 5;
  padding: 0.28rem 0.45rem;
  border-radius: 0.35rem;
  background: rgba(20, 22, 28, 0.92);
  color: #f5f5f5;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
}

.card-tile__price[data-tip]:hover::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.12rem);
  transform: translateX(-50%);
  z-index: 5;
  border: 5px solid transparent;
  border-top-color: rgba(20, 22, 28, 0.92);
  pointer-events: none;
}

.card-tile__price.is-loading {
  color: var(--text-muted);
  font-weight: 500;
}

.card-tile__price.is-up {
  color: #1f9d55;
}

.card-tile__price.is-down {
  color: #d64545;
}

.card-tile__price.is-flat {
  color: var(--text);
}

html[data-theme="dark"] .card-tile__price.is-up {
  color: #3dd68c;
}

html[data-theme="dark"] .card-tile__price.is-down {
  color: #ff6b6b;
}

.card-tile__serial {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  color: color-mix(in srgb, var(--text-muted) 78%, transparent);
  letter-spacing: 0.04em;
}

.tag-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.tag {
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-stage);
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.tag:hover {
  color: var(--text);
  border-color: var(--border);
  background: var(--btn-hover);
}

.tag.tag--psa.is-active {
  background: #c62828;
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 3px 10px rgba(198, 40, 40, 0.35);
}

.tag.tag--brg.is-active {
  background: #1a3a8f;
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 3px 10px rgba(26, 58, 143, 0.35);
}

.ctx-menu {
  position: fixed;
  z-index: 1100;
  min-width: 128px;
  padding: 0.3rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--ctx-bg);
  box-shadow: var(--shadow-card);
}

.ctx-menu__item {
  width: 100%;
  text-align: left;
  padding: 0.55rem 0.7rem;
  border-radius: 6px;
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 500;
}

.ctx-menu__item:hover {
  background: var(--hover);
}

.ctx-menu__item--danger {
  color: #c4473a;
}

@media (max-width: 820px) {
  .create-form__grid {
    grid-template-columns: 1fr;
  }

  .create-form__images {
    grid-template-columns: 1fr 1fr;
    max-width: 420px;
  }

  .dropzone {
    max-width: none;
  }
}

.empty {
  padding: 3rem 1rem;
  text-align: center;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.85rem;
}

.empty--action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
}

.empty__btn {
  min-height: 2.5rem;
  padding: 0 1.1rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 600;
}

.tcg-toolbar {
  display: none;
  justify-content: flex-end;
  margin: 0 0 0.85rem;
}

.tcg-toolbar__add {
  min-height: 2.35rem;
  padding: 0 0.95rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

.view.is-view-enter {
  animation: view-enter var(--dur-slow) var(--ease-out);
}

.view.is-view-leave {
  animation: view-leave var(--dur-fast) ease forwards;
  pointer-events: none;
}

@keyframes view-enter {
  from {
    opacity: 0;
    transform: translate3d(0, 12px, 0) scale(0.992);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes view-leave {
  to {
    opacity: 0;
    transform: translate3d(0, -6px, 0) scale(0.994);
  }
}

@keyframes ui-rise {
  from {
    opacity: 0;
    transform: translate3d(0, 10px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes ui-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes ui-pop-in {
  from {
    opacity: 0;
    transform: translate3d(0, 14px, 0) scale(0.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes ui-dock-rise {
  from {
    opacity: 0;
    transform: translate3d(0, 12px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Staggered content when a view mounts */
.view.is-view-enter .home-app,
.view.is-view-enter .mail-item,
.view.is-view-enter .notes-item,
.view.is-view-enter .crew-card,
.view.is-view-enter .card-tile,
.view.is-view-enter .cal-event,
.view.is-view-enter .trash-sheet__item {
  animation: ui-rise 0.4s var(--ease-out) both;
}

.view.is-view-enter .home-app:nth-child(1),
.view.is-view-enter .mail-item:nth-child(1),
.view.is-view-enter .notes-item:nth-child(1),
.view.is-view-enter .crew-card:nth-child(1),
.view.is-view-enter .card-tile:nth-child(1),
.view.is-view-enter .cal-event:nth-child(1) { animation-delay: 0.02s; }

.view.is-view-enter .home-app:nth-child(2),
.view.is-view-enter .mail-item:nth-child(2),
.view.is-view-enter .notes-item:nth-child(2),
.view.is-view-enter .crew-card:nth-child(2),
.view.is-view-enter .card-tile:nth-child(2),
.view.is-view-enter .cal-event:nth-child(2) { animation-delay: 0.05s; }

.view.is-view-enter .home-app:nth-child(3),
.view.is-view-enter .mail-item:nth-child(3),
.view.is-view-enter .notes-item:nth-child(3),
.view.is-view-enter .crew-card:nth-child(3),
.view.is-view-enter .card-tile:nth-child(3),
.view.is-view-enter .cal-event:nth-child(3) { animation-delay: 0.08s; }

.view.is-view-enter .home-app:nth-child(4),
.view.is-view-enter .mail-item:nth-child(4),
.view.is-view-enter .notes-item:nth-child(4),
.view.is-view-enter .crew-card:nth-child(4),
.view.is-view-enter .card-tile:nth-child(4),
.view.is-view-enter .cal-event:nth-child(4) { animation-delay: 0.11s; }

.view.is-view-enter .home-app:nth-child(5),
.view.is-view-enter .mail-item:nth-child(5),
.view.is-view-enter .notes-item:nth-child(5),
.view.is-view-enter .crew-card:nth-child(5),
.view.is-view-enter .card-tile:nth-child(5),
.view.is-view-enter .cal-event:nth-child(5) { animation-delay: 0.14s; }

.view.is-view-enter .home-app:nth-child(6),
.view.is-view-enter .mail-item:nth-child(6),
.view.is-view-enter .notes-item:nth-child(6),
.view.is-view-enter .crew-card:nth-child(6),
.view.is-view-enter .card-tile:nth-child(6),
.view.is-view-enter .cal-event:nth-child(6) { animation-delay: 0.17s; }

.view.is-view-enter .mail-item:nth-child(7),
.view.is-view-enter .notes-item:nth-child(7),
.view.is-view-enter .crew-card:nth-child(7),
.view.is-view-enter .card-tile:nth-child(7),
.view.is-view-enter .cal-event:nth-child(7) { animation-delay: 0.2s; }

.view.is-view-enter .mail-item:nth-child(8),
.view.is-view-enter .notes-item:nth-child(8),
.view.is-view-enter .crew-card:nth-child(8),
.view.is-view-enter .card-tile:nth-child(8),
.view.is-view-enter .cal-event:nth-child(8) { animation-delay: 0.23s; }

.view.is-view-enter .mail-item:nth-child(n + 9),
.view.is-view-enter .notes-item:nth-child(n + 9),
.view.is-view-enter .crew-card:nth-child(n + 9),
.view.is-view-enter .card-tile:nth-child(n + 9),
.view.is-view-enter .cal-event:nth-child(n + 9) { animation-delay: 0.26s; }

html:not(.is-boot) .dock,
html:not(.is-boot) .dock-stick {
  animation: ui-dock-rise 0.45s var(--ease-out) both;
}

html:not(.is-boot) .dock-stick {
  animation-delay: 0.06s;
}

@media (prefers-reduced-motion: reduce) {
  .view.is-view-enter,
  .view.is-view-leave,
  .view.is-view-enter .home-app,
  .view.is-view-enter .mail-item,
  .view.is-view-enter .notes-item,
  .view.is-view-enter .crew-card,
  .view.is-view-enter .card-tile,
  .view.is-view-enter .cal-event,
  .modal__backdrop,
  .modal__shell,
  html:not(.is-boot) .dock,
  html:not(.is-boot) .dock-stick {
    animation: none !important;
  }

  .home-quote,
  .home-app__icon,
  .dock-app,
  .dock__trash,
  .dock-stick__mail,
  .dock-stick__icon,
  .btn,
  .crew-card,
  .mail-item,
  .notes-item,
  .trash-sheet__backdrop,
  .trash-sheet__panel {
    transition: none !important;
  }
}

@media (max-width: 720px) {
  :root {
    --dock-h: 0px;
    --dock-island-h: 2.55rem;
    --memo-stick-h: 2.58rem;
    --stick-rail-h: 2.58rem;
    --stick-gap: 0;
    --safe-bottom: 0px;
    --bottom-safe: env(safe-area-inset-bottom, 0px);
    --bottom-pad: 0px;
    --stick-chrome-pad-y: 0.3rem;
    --stick-chrome-safe: max(0.28rem, calc(var(--bottom-safe) * 0.42));
    --stick-chrome-h: calc(var(--stick-rail-h) + var(--stick-chrome-pad-y) + var(--stick-chrome-safe));
    --stick-footprint: calc(var(--stick-rail-h) + var(--bottom-safe) + 0.18rem);
    --stick-pill-border: rgba(215, 219, 226, 0.45);
    --stick-pill-bg: rgba(255, 255, 255, 0.42);
    --stick-pill-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38);
    --dock-footprint: var(--bottom-safe);
    --dock-stick-bottom: 0;
    --dock-chrome-stack: var(--stick-footprint);
    --top-chrome-h: calc(env(safe-area-inset-top, 0px) + 2.6rem);
    /* Clear status icons; content can peek into the soft fade. */
    --top-content-pad: calc(env(safe-area-inset-top, 0px) + 0.95rem);
  }

  html,
  body,
  button,
  a,
  .dock,
  .dock-stick,
  .stage {
    touch-action: manipulation;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }

  #app,
  .view,
  .modal,
  .trash-sheet {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }

  input,
  textarea,
  select,
  [contenteditable="true"],
  .memo-note__text,
  .notes-pane__text,
  .notes-pane__title,
  .mail-reader__text,
  .field__input {
    -webkit-touch-callout: default;
    -webkit-user-select: text;
    user-select: text;
  }

  /* Top chrome: soft fade under status bar (Naver-style edge blend). */
  .app::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10070;
    height: var(--top-chrome-h);
    min-height: var(--top-chrome-h);
    pointer-events: none;
    border: 0;
    border-bottom: 0;
    background: linear-gradient(
      to bottom,
      rgba(var(--top-fade-rgb), 0.94) 0%,
      rgba(var(--top-fade-rgb), 0.62) 38%,
      rgba(var(--top-fade-rgb), 0.22) 68%,
      rgba(var(--top-fade-rgb), 0) 100%
    );
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  /* Bottom chrome: solid plate + top outline (no gradient). */
  .app::after {
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10058;
    height: var(--stick-chrome-h);
    min-height: var(--stick-chrome-h);
    pointer-events: none;
    border: 0;
    border-top: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
    background: var(--bg-stage);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .view {
    padding:
      var(--top-content-pad)
      1rem
      calc(1.25rem + env(safe-area-inset-bottom, 0px));
  }

  .view--tcg {
    /* Grow with gallery; don't stretch empty space above the bottom chrome. */
    height: auto !important;
    min-height: 0;
    box-sizing: border-box;
    padding:
      var(--top-content-pad)
      1rem
      calc(var(--bottom-safe) + 0.35rem) !important;
  }

  .view--tcg .gallery {
    padding-bottom: 0;
  }

  .view--memo,
  .view--cal,
  .view--mail,
  .view--notes {
    padding: 0;
    height: 100%;
  }

  .mail {
    overflow-x: hidden;
    padding: calc(var(--top-content-pad, env(safe-area-inset-top, 0px) + 1.6rem) + 0.35rem) max(1.75rem, env(safe-area-inset-right, 0px) + 1.25rem) 0 max(1.75rem, env(safe-area-inset-left, 0px) + 1.25rem);
  }

  .mail-sheet,
  html[data-theme="dark"] .mail-sheet {
    border-radius: 0;
    background: transparent;
  }

  .mail-list {
    overflow-x: hidden;
    padding-bottom: calc(var(--dock-chrome-stack) + 0.2rem);
  }

  .mail-accounts {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .mail-accounts::-webkit-scrollbar {
    display: none;
  }

  .mail-head__title {
    font-size: 1.28rem;
  }

  .mail-search__input {
    font-size: 16px;
  }

  .notes-search {
    margin: 0 0 0.55rem;
  }

  .notes-list {
    padding-left: 0.65rem;
    padding-right: 0.65rem;
  }

  .notes-item,
  .notes-folder {
    padding: 0.62rem 0.85rem;
  }

  .notes-item__title,
  .notes-folder__title {
    font-size: calc(0.8rem + 2pt);
  }

  .notes-item__when,
  .notes-folder__count {
    font-size: calc(0.72rem + 2pt);
  }

  .notes-pane__title,
  .notes-pane__text {
    font-size: 16px;
  }

  .mail-reader__frame,
  .mail-reader__text {
    max-height: min(48vh, 22rem);
    height: min(48vh, 22rem);
  }

  .view--cal .field__input,
  .view--mail .field__input {
    font-size: 16px;
  }

  .cal {
    grid-template-rows: auto auto auto auto;
    align-content: start;
    min-height: auto;
    padding: calc(var(--top-content-pad, 3.2rem)) max(1.75rem, env(safe-area-inset-right, 0px) + 1.25rem) var(--dock-chrome-stack) max(1.75rem, env(safe-area-inset-left, 0px) + 1.25rem);
  }

  .cal-month {
    align-items: flex-start;
  }

  .cal-grid {
    align-self: flex-start;
  }

  .cal-agenda {
    max-height: none;
    padding-bottom: 0.4rem;
  }

  .cal-agenda::after {
    content: "";
    display: block;
    height: calc(var(--dock-chrome-stack) + 0.25rem);
  }

  .cal-agenda__list {
    overflow: visible;
    padding-bottom: 0.2rem;
  }

  .cal-head__month {
    font-size: 1.42rem;
  }

  .cal-head__year {
    font-size: 0.84rem;
  }

  .cal-head__title {
    min-width: 0;
  }

  .cal-cell {
    --cal-cell-pad-x: 0.12rem;
    padding: 0.16rem 0 0.18rem;
  }

  .cal-cell__num {
    width: 1.45rem;
    height: 1.45rem;
    margin: 0 0 0.04rem var(--cal-cell-pad-x, 0.12rem);
    font-size: 0.72rem;
  }

  .cal-chip {
    font-size: 0.56rem;
    min-height: 0.92rem;
    padding: 0.04rem 0.18rem;
  }


  .view--memo .memo-board,
  .view--memo.is-memo-list .memo-board {
    /* Full viewport under bottom dock/stick glass. */
    inset: 0;
  }

  .view--memo.is-memo-list .memo-board {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.85rem;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: var(--scroll-bounce);
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    padding:
      var(--top-content-pad)
      0.9rem
      var(--dock-chrome-stack);
    box-sizing: border-box;
  }

  .view--memo.is-memo-list .memo-note__text {
    font-size: 16px; /* iOS: avoid focus zoom when < 16px */
  }

  .view--memo.is-memo-list .memo-note {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    min-height: 11.5rem;
    max-height: 70vh;
    translate: none;
    flex: 0 0 auto;
    order: 1;
    z-index: auto !important;
    filter: none;
    box-shadow:
      0 2px 6px rgba(0, 0, 0, 0.1),
      0 10px 22px rgba(0, 0, 0, 0.14);
  }

  .view--memo.is-memo-list .memo-note.has-image {
    height: auto;
    min-height: 15rem;
    max-height: 78vh;
  }


  .view--memo.is-memo-list .memo-note__swatches,
  .view--memo.is-memo-list .memo-note.is-selected .memo-note__swatches,
  .view--memo.is-memo-list .memo-note__footer:hover .memo-note__swatches {
    display: none !important;
  }

  /* Stage fills the screen; dock is pinned to the physical bottom edge. */
  .app {
    grid-template-rows: minmax(0, 1fr);
    grid-template-areas: "stage";
    height: 100dvh;
    max-height: 100dvh;
    min-height: 100dvh;
    overflow: visible;
  }

  .stage {
    padding-bottom: 0;
    min-height: 0;
    background: var(--bg-stage);
    overflow: auto;
  }

  .view:not(.view--memo):not(.view--crew):not(.view--cal):not(.view--mail):not(.view--notes):not(.view--home) {
    padding-bottom: var(--bottom-safe);
  }

  .view.view--home {
    padding-bottom: var(--stick-footprint);
  }

  .view.view--crew {
    padding-bottom: var(--dock-chrome-stack);
  }

  .stage:has(.view--home) {
    overflow: hidden;
  }

  html,
  body {
    background: var(--bg-stage);
    height: 100dvh;
    min-height: 100dvh;
    min-height: -webkit-fill-available;
    max-height: 100dvh;
    overflow-x: hidden;
    overflow-y: hidden;
  }

  .dock,
  .dock-stick {
    margin-bottom: 0;
  }

  html.is-crew-modal-open,
  html.is-crew-modal-open body {
    background: var(--crew-modal-chrome);
  }

  .dock {
    position: fixed;
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    z-index: 10061;
    display: grid !important;
    visibility: visible !important;
    pointer-events: none !important;
    grid-area: unset;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: flex-end;
    gap: 0.58rem;
    padding:
      0
      max(1.35rem, env(safe-area-inset-right, 0px) + 0.4rem)
      0
      max(1.35rem, env(safe-area-inset-left, 0px) + 0.4rem);
    height: auto;
    min-height: var(--stick-rail-h);
    box-sizing: border-box;
    border-top: none;
    background: transparent !important;
    box-shadow: none;
    transform: none;
    overflow: visible;
  }

  .dock::before,
  .dock::after {
    content: none !important;
    display: none !important;
  }

  .dock__start,
  .dock__end {
    position: relative;
    pointer-events: auto;
    z-index: 2;
    flex: 0 0 auto;
    align-self: flex-end;
    height: var(--stick-rail-h);
    box-sizing: border-box;
    display: flex;
    align-items: flex-end;
  }

  html.is-home .dock__end {
    display: none !important;
  }

  .dock__start {
    justify-content: flex-start;
  }

  .dock__end {
    justify-content: flex-end;
  }

  .dock__center {
    display: none !important;
  }

  .dock__start .dock__btn.dock__btn--back.is-gemini,
  html[data-theme="dark"] .dock__start .dock__btn.dock__btn--back.is-gemini {
    width: var(--stick-rail-h);
    height: var(--stick-rail-h);
    min-width: var(--stick-rail-h);
    min-height: var(--stick-rail-h);
    border-radius: 999px;
    border: 1px solid var(--stick-pill-border);
    background: var(--stick-pill-bg);
    color: var(--text);
    box-shadow: var(--stick-pill-shadow);
    -webkit-backdrop-filter: saturate(1.25) blur(20px);
    backdrop-filter: saturate(1.25) blur(20px);
  }

  .dock__start .dock__btn.dock__btn--back.is-gemini:hover {
    transform: scale(1.04);
    background: color-mix(in srgb, var(--stick-pill-bg) 88%, #fff 12%);
    border-color: color-mix(in srgb, var(--border) 72%, var(--text) 12%);
    box-shadow: var(--stick-pill-shadow);
  }

  html[data-theme="dark"] .dock__start .dock__btn.dock__btn--back.is-gemini {
    border-color: rgba(42, 51, 64, 0.55);
    background: rgba(18, 22, 28, 0.45);
  }

  html[data-theme="dark"] .dock__start .dock__btn.dock__btn--back.is-gemini:hover {
    background: rgba(24, 30, 38, 0.58);
    border-color: rgba(58, 68, 82, 0.72);
  }

  .dock__start .dock__gemini-icon {
    width: 1.15rem;
    height: 1.15rem;
  }

  .dock__end .dock__btn.dock__btn--back,
  html[data-theme="dark"] .dock__end .dock__btn.dock__btn--back {
    width: var(--stick-rail-h);
    height: var(--stick-rail-h);
    min-width: var(--stick-rail-h);
    min-height: var(--stick-rail-h);
    border-radius: 999px;
    border: 1px solid var(--stick-pill-border);
    background: var(--stick-pill-bg);
    color: var(--text);
    box-shadow: var(--stick-pill-shadow);
    -webkit-backdrop-filter: saturate(1.25) blur(20px);
    backdrop-filter: saturate(1.25) blur(20px);
  }

  .dock__end .dock__btn.dock__btn--back:hover {
    transform: scale(1.04);
    background: color-mix(in srgb, var(--stick-pill-bg) 88%, #fff 12%);
    border-color: color-mix(in srgb, var(--border) 72%, var(--text) 12%);
    box-shadow: var(--stick-pill-shadow);
  }

  html[data-theme="dark"] .dock__end .dock__btn.dock__btn--back {
    border-color: rgba(42, 51, 64, 0.55);
    background: rgba(18, 22, 28, 0.45);
  }

  html[data-theme="dark"] .dock__end .dock__btn.dock__btn--back:hover {
    background: rgba(24, 30, 38, 0.58);
    border-color: rgba(58, 68, 82, 0.72);
  }

  .dock__end .dock__home-icon {
    width: 1.15rem;
    height: 1.15rem;
  }

  .dock-stick {
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    width: 100%;
    min-height: var(--stick-rail-h);
    padding:
      0
      max(1.35rem, env(safe-area-inset-right, 0px) + 0.4rem)
      0
      max(1.35rem, env(safe-area-inset-left, 0px) + 0.4rem);
    box-sizing: border-box;
    transform: none;
    z-index: 10060;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    pointer-events: none;
  }

  .dock-stick__cluster {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 0.45rem;
    width: max-content;
    max-width: calc(100vw - 2 * var(--stick-rail-h) - 2.75rem);
    margin: 0 auto;
    pointer-events: auto;
  }

  html.is-home .dock-stick__cluster {
    max-width: calc(100vw - var(--stick-rail-h) - 2.25rem);
  }

  .dock-stick__rail {
    width: max-content;
    max-width: 100%;
    height: var(--stick-rail-h);
    min-height: var(--stick-rail-h);
    gap: 0.45rem;
    margin: 0;
    padding: 0 0.78rem;
    box-sizing: border-box;
    overflow: visible;
    border: 1px solid var(--stick-pill-border);
    border-radius: 999px;
    background: var(--stick-pill-bg);
    box-shadow: var(--stick-pill-shadow);
    -webkit-backdrop-filter: saturate(1.25) blur(20px);
    backdrop-filter: saturate(1.25) blur(20px);
  }

  .dock-stick .theme-dots {
    height: var(--stick-rail-h);
    min-height: var(--stick-rail-h);
    box-sizing: border-box;
    border: 1px solid var(--stick-pill-border);
    background: var(--stick-pill-bg);
    box-shadow: none;
    -webkit-backdrop-filter: saturate(1.25) blur(20px);
    backdrop-filter: saturate(1.25) blur(20px);
  }

  html[data-theme="dark"] {
    --stick-pill-border: rgba(42, 51, 64, 0.55);
    --stick-pill-bg: rgba(18, 22, 28, 0.45);
    --stick-pill-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }

  html[data-theme="dark"] .dock-stick__rail,
  html[data-theme="dark"] .dock-stick .theme-dots,
  html[data-theme="dark"] .dock__trash {
    border-color: var(--stick-pill-border);
    background: var(--stick-pill-bg);
  }

  .dock-stick__preset {
    width: 1.28rem;
    height: 1.48rem;
  }

  .dock-stick__crew {
    height: 1.9rem;
    padding: 0 0.72rem;
    font-size: 0.76rem;
  }

  .dock-stick__mail,
  .dock-stick__icon {
    width: 2.2rem;
    height: 2.2rem;
  }

  .llm-panel:not(.is-open) {
    bottom: var(--stick-footprint);
  }

  .view--home {
    grid-template-rows: auto auto;
    height: auto;
    min-height: calc(100dvh - var(--stick-footprint));
    align-content: start;
    row-gap: 1.55rem;
    width: 100%;
    max-width: none;
    padding-left: 1.15rem;
    padding-right: 1.15rem;
    box-sizing: border-box;
  }

  .home-quote {
    grid-row: 1;
    align-self: start;
    padding: 0.1rem 0 0.15rem;
    min-height: 0;
  }

  .home-quote__mark {
    font-size: 1.85rem;
  }

  .home-quote__text {
    font-size: 0.84rem;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
  }

  .home-quote__author {
    margin-top: 0.55rem;
    font-size: 0.62rem;
  }

  .home-apps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    justify-content: stretch;
    justify-items: center;
    align-content: start;
    width: 100%;
    box-sizing: border-box;
    gap: 0.95rem 0;
  }

  .home-app {
    width: 100%;
    max-width: 4.85rem;
    gap: 0.36rem;
  }

  .home-app__icon {
    width: 3.65rem;
    height: 3.65rem;
    border-radius: 50%;
  }

  .home-app__label {
    font-size: 0.72rem;
  }

  .tcg-toolbar,
  .view--tcg.is-tcg-readonly .tcg-toolbar {
    display: none !important;
  }

  .view--tcg.is-tcg-readonly .card-tile {
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
  }

  .gallery {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.15rem;
    max-width: 22rem;
    margin: 0 auto;
  }

  .card-tile {
    max-width: none;
  }

  .card-tile:hover,
  .card-tile:active,
  .card-tile.is-pressing,
  .view--tcg.is-tcg-readonly .card-tile,
  .view--tcg.is-tcg-readonly .card-tile:hover,
  .view--tcg.is-tcg-readonly .card-tile:active,
  .view--tcg.is-tcg-readonly .card-tile.is-pressing {
    translate: none;
    outline: none;
    border-color: var(--card-border);
    box-shadow:
      var(--shadow-card),
      inset 0 1px 0 var(--card-inset);
    -webkit-tap-highlight-color: transparent;
  }

  .card-tile__price[data-tip]::after,
  .card-tile__price[data-tip]::before {
    display: none;
  }

  .create-form__images {
    grid-template-columns: 1fr;
    max-width: none;
  }

  .modal__shell {
    width: min(100%, calc(100vw - 1.25rem));
    max-height: min(88dvh, 100%);
    overflow: auto;
    padding-bottom: 0.25rem;
  }

  .modal .dropzone__hint {
    font-size: 0.78rem;
  }

  .modal .dropzone__replace,
  .modal .dropzone.has-image .dropzone__replace {
    opacity: 1;
    pointer-events: auto;
  }

  .memo-note__swatch {
    width: 1rem;
    height: 1rem;
  }

  .memo-note__image-remove,
  .memo-note__media:hover .memo-note__image-remove {
    opacity: 1;
    width: 1.7rem;
    height: 1.7rem;
  }

  .memo-note__edge--n,
  .memo-note__edge--s {
    height: 0.85rem;
  }

  .memo-note__edge--e,
  .memo-note__edge--w {
    width: 0.85rem;
  }

  .memo-note__edge--ne,
  .memo-note__edge--nw,
  .memo-note__edge--se,
  .memo-note__edge--sw {
    width: 1.15rem;
    height: 1.15rem;
  }
}

@media (max-width: 720px) and (pointer: coarse),
  (max-width: 720px) and (hover: none) {
  html,
  body,
  .app {
    height: 100dvh;
    min-height: 100dvh;
    max-height: 100dvh;
  }

  .dock {
    overflow: visible;
  }
}

@media (hover: none) and (pointer: coarse) {
  .modal .dropzone__replace,
  .modal .dropzone.has-image .dropzone__replace {
    opacity: 1;
    pointer-events: auto;
  }

  .view--memo .memo-note__swatches {
    display: none !important;
  }

  .memo-note__image-remove {
    opacity: 1;
  }
}

.llm-fab {
  display: none !important;
}

.llm-fab {
  --llm-aurora: conic-gradient(
    from 0deg,
    #ff5d8f,
    #7a6bff,
    #3ec8ff,
    #3dd68c,
    #ffc14a,
    #ff7a3c,
    #ff5d8f
  );
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 60;
  display: grid;
  place-items: center;
  isolation: isolate;
  width: 2.55rem;
  height: 2.55rem;
  min-width: 0;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-dock);
  color: var(--text);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  overflow: hidden;
  transition:
    transform var(--dur) var(--ease-out),
    background var(--dur-fast) ease,
    border-color var(--dur-fast) ease,
    opacity var(--dur) ease;
}

.llm-fab::before {
  content: "";
  position: absolute;
  inset: -35%;
  z-index: 0;
  border-radius: 50%;
  background: var(--llm-aurora);
  opacity: 0.22;
  filter: blur(16px) saturate(1.05);
  pointer-events: none;
  animation:
    llm-aurora-spin 14s linear infinite,
    llm-aurora-wave 5.5s ease-in-out infinite;
}

.llm-fab__icon {
  position: relative;
  z-index: 1;
  width: 1.38rem;
  height: 1.38rem;
  display: block;
  object-fit: contain;
  pointer-events: none;
}

.llm-fab:hover,
.llm-fab[aria-expanded="true"] {
  transform: translateY(-2px) scale(1.04);
  border-color: color-mix(in srgb, var(--text) 28%, var(--border));
  color: var(--text);
}

.llm-fab:active {
  transform: scale(0.94);
}

.llm-fab:hover::before,
.llm-fab[aria-expanded="true"]::before {
  opacity: 0.3;
}

@keyframes llm-aurora-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes llm-aurora-wave {
  0%,
  100% {
    opacity: 0.16;
  }
  50% {
    opacity: 0.28;
  }
}

@media (prefers-reduced-motion: reduce) {
  .llm-fab::before,
  .dock__btn.dock__btn--back.is-gemini::before {
    animation: none;
    opacity: 0.2;
  }
}

.llm-fab[hidden] {
  display: none !important;
}

html.is-boot .llm-fab,
html.is-boot .llm-panel {
  display: none !important;
}

.llm-panel {
  position: fixed;
  top: 0;
  left: 0;
  right: auto;
  z-index: 11080;
  display: flex;
  flex-direction: column;
  width: min(22.5rem, calc(100vw - 1rem));
  height: auto;
  bottom: var(--dock-h);
  border-right: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  background: color-mix(in srgb, var(--bg-dock) 72%, transparent);
  box-shadow: 12px 0 40px rgba(0, 0, 0, 0.16);
  -webkit-backdrop-filter: blur(18px) saturate(1.05);
  backdrop-filter: blur(18px) saturate(1.05);
  transform: translateX(-100%);
  visibility: hidden;
  pointer-events: none;
  transition:
    transform 0.38s var(--ease-out),
    visibility 0.38s;
  will-change: transform;
}

.llm-panel.is-open {
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
}

@media (min-width: 721px) {
  html:not(.is-llm-mobile) .llm-panel {
    top: 50%;
    left: 1.35rem;
    right: auto;
    bottom: auto;
    width: min(22.5rem, calc(100vw - 2.7rem));
    height: min(48rem, calc(100dvh - 5rem));
    max-height: calc(100dvh - 4rem);
    border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
    border-radius: 1.2rem;
    box-shadow:
      0 18px 48px rgba(0, 0, 0, 0.16),
      0 2px 8px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    transform: translate(calc(-100% - 2rem), -50%);
  }

  html:not(.is-llm-mobile) .llm-panel.is-open {
    transform: translate(0, -50%);
  }

  html:not(.is-llm-mobile) .llm-panel__header {
    padding: 0.82rem 0.9rem;
  }

  html:not(.is-llm-mobile) .llm-panel__composer {
    padding: 0.7rem 0.75rem 0.8rem;
  }
}

.llm-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex: 0 0 auto;
  padding: 0.95rem 1rem;
  border-bottom: 1px solid var(--border);
}

.llm-panel__titles {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.llm-panel__app-icon {
  width: 1.55rem;
  height: 1.55rem;
  flex: 0 0 auto;
  border-radius: 0.42rem;
  object-fit: cover;
}

.llm-panel__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.llm-panel__cost {
  flex: 0 0 auto;
  padding: 0.18rem 0.44rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 8%, transparent);
  color: var(--text-muted);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
}

.llm-panel__actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex: 0 0 auto;
}

.llm-panel__clear {
  height: 2rem;
  padding: 0 0.55rem;
  border-radius: 6px;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 600;
}

.llm-panel__clear:hover {
  background: var(--hover);
  color: var(--text);
}

.llm-panel__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  border-radius: 6px;
  color: var(--text);
  font-size: 1.45rem;
  line-height: 1;
}

.llm-panel__close:hover {
  background: var(--hover);
  color: var(--text);
}

.llm-panel__messages {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: var(--scroll-bounce);
  -webkit-overflow-scrolling: touch;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.llm-msg {
  max-width: 92%;
  padding: 0.65rem 0.8rem;
  border-radius: 10px;
  font-size: 0.9rem;
  line-height: 1.45;
  white-space: normal;
  word-break: break-word;
}

.llm-msg .llm-p {
  margin: 0 0 0.42em;
}

.llm-msg .llm-p:last-child {
  margin-bottom: 0;
}

.llm-msg .llm-h {
  margin: 0.55em 0 0.28em;
  font-weight: 750;
  letter-spacing: -0.03em;
  line-height: 1.28;
}

.llm-msg .llm-h:first-child {
  margin-top: 0;
}

.llm-msg .llm-h1 {
  font-size: 1.18rem;
}

.llm-msg .llm-h2 {
  font-size: 1.06rem;
}

.llm-msg .llm-h3 {
  font-size: 0.98rem;
}

.llm-msg .llm-h4 {
  font-size: 0.92rem;
}

.llm-msg .llm-list {
  margin: 0.28em 0 0.42em;
  padding-left: 1.2rem;
}

.llm-msg .llm-list li {
  margin: 0.14em 0;
}

.llm-msg .llm-code {
  display: block;
  margin: 0.4em 0;
  padding: 0.55rem 0.65rem;
  overflow: auto;
  border-radius: 0.55rem;
  background: color-mix(in srgb, var(--text) 8%, transparent);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.45;
  white-space: pre;
}

.llm-msg .llm-inline-code {
  padding: 0.08em 0.28em;
  border-radius: 0.28rem;
  background: color-mix(in srgb, var(--text) 10%, transparent);
  font-family: var(--font-mono);
  font-size: 0.84em;
}

.llm-msg .llm-link {
  color: inherit;
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

.llm-msg strong {
  font-weight: 750;
}

.llm-msg em {
  font-style: italic;
}

.llm-msg--user {
  align-self: flex-end;
  background: var(--text);
  color: var(--accent-contrast);
}

.llm-msg--assistant,
.llm-msg--system {
  align-self: flex-start;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
}

.llm-msg--system {
  color: var(--text-muted);
  font-size: 0.82rem;
}

.llm-msg.is-pending {
  color: var(--text-muted);
}

.llm-msg.is-error {
  border-color: color-mix(in srgb, #d64545 45%, var(--border));
  color: #d64545;
}

.llm-panel__composer {
  padding: 0.75rem 0.85rem calc(0.85rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  background: color-mix(in srgb, var(--bg-dock) 70%, transparent);
}

.llm-panel__bar {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 0.45rem;
  padding: 0.4rem 0.4rem 0.4rem 0.75rem;
  border-radius: 1.05rem;
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  background: color-mix(in srgb, var(--surface) 88%, var(--bg));
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 4%, transparent);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.llm-panel__bar:focus-within {
  border-color: color-mix(in srgb, var(--text) 28%, var(--border));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 4%, transparent),
    0 0 0 3px color-mix(in srgb, var(--text) 8%, transparent);
}

.llm-panel__cancel {
  min-height: 2.2rem;
  padding: 0 0.7rem;
  border-radius: 0.75rem;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 600;
}

.llm-panel__cancel:hover {
  background: var(--hover);
  color: var(--text);
}

.llm-panel__input {
  resize: none;
  width: 100%;
  min-height: 2.2rem;
  max-height: 7.5rem;
  padding: 0.45rem 0.15rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.92rem;
  line-height: 1.45;
}

.llm-panel__input:focus {
  outline: none;
}

.llm-panel__send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 0.8rem;
  background: color-mix(in srgb, var(--text) 12%, var(--surface));
  color: var(--text);
  border: 1px solid color-mix(in srgb, var(--text) 12%, var(--border));
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    transform 0.15s ease;
}

.llm-panel__send:hover {
  background: color-mix(in srgb, var(--text) 18%, var(--surface));
  border-color: color-mix(in srgb, var(--text) 22%, var(--border));
  transform: translateY(-1px);
}

.llm-panel__send:disabled,
.llm-panel__send[hidden] {
  opacity: 0.45;
  cursor: wait;
  transform: none;
}

.llm-panel__send-icon {
  width: 1.05rem;
  height: 1.05rem;
  display: block;
}

.llm-panel__bar:has(.llm-panel__cancel:not([hidden])) {
  grid-template-columns: 1fr auto auto;
}

html.is-llm-mobile .dock,
html.is-llm-mobile .dock-stick,
html.is-llm-mobile .trash-sheet {
  visibility: hidden;
  pointer-events: none;
}

@media (max-width: 900px) {
  :root {
    --stick-rail-h: 2.58rem;
    --stick-chrome-pad-y: 0.3rem;
    --stick-chrome-safe: max(0.28rem, calc(env(safe-area-inset-bottom, 0px) * 0.42));
    --stick-chrome-h: calc(var(--stick-rail-h) + var(--stick-chrome-pad-y) + var(--stick-chrome-safe));
    --stick-footprint: calc(var(--stick-rail-h) + env(safe-area-inset-bottom, 0px) + 0.18rem);
  }
}

html.is-llm-mobile .llm-panel {
  inset: 0;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  min-height: 0;
  z-index: 12000;
  border: none;
  box-shadow: none;
  background: var(--bg-stage);
  transform: none;
}

html.is-llm-mobile .llm-panel__header {
  padding: calc(env(safe-area-inset-top, 0px) + 0.7rem) 0.45rem 0.75rem 1rem;
}

html.is-llm-mobile .llm-panel__close {
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 8px;
  font-size: 1.9rem;
  color: var(--text);
}

html.is-llm-mobile .llm-panel__messages {
  padding-bottom: calc(var(--stick-footprint) + 2.85rem);
}

html.is-llm-mobile .llm-panel__composer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-end;
  flex: 0 0 auto;
  width: 100%;
  min-height: var(--stick-chrome-h, var(--stick-rail-h));
  padding:
    0
    max(1.35rem, env(safe-area-inset-right, 0px) + 0.4rem)
    0
    max(1.35rem, env(safe-area-inset-left, 0px) + 0.4rem);
  box-sizing: border-box;
  border-top: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  box-shadow: none;
  background: var(--bg-stage);
}

html.is-llm-mobile .llm-panel__bar {
  margin-bottom: 0;
  padding: 0.28rem 0.38rem 0.28rem 0.62rem;
}

@media (max-width: 720px) {
  html.is-llm-open .dock,
  html.is-llm-open .dock-stick,
  html.is-llm-open .trash-sheet {
    visibility: hidden;
    pointer-events: none;
  }

  .llm-panel {
    inset: 0;
    width: 100%;
    height: auto;
    min-height: 0;
    bottom: 0;
    z-index: 12000;
    border: none;
    box-shadow: none;
    background: color-mix(in srgb, var(--bg-stage) 92%, #000);
  }

  .llm-panel__header {
    padding: calc(env(safe-area-inset-top, 0px) + 0.7rem) 0.55rem 0.75rem 1rem;
  }

  .llm-panel__close {
    width: 2.55rem;
    height: 2.55rem;
    border-radius: 8px;
    font-size: 1.85rem;
    color: var(--text);
  }

  .llm-panel__messages {
    padding-bottom: calc(var(--stick-footprint) + 2.85rem);
  }

  .llm-panel__composer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-end;
    flex: 0 0 auto;
    width: 100%;
    min-height: var(--stick-chrome-h, var(--stick-rail-h));
    padding:
      0
      max(1.35rem, env(safe-area-inset-right, 0px) + 0.4rem)
      0
      max(1.35rem, env(safe-area-inset-left, 0px) + 0.4rem);
    box-sizing: border-box;
    border-top: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
    box-shadow: none;
    background: var(--bg-stage);
  }

  .llm-panel__bar {
    margin-bottom: 0;
    padding: 0.28rem 0.38rem 0.28rem 0.62rem;
  }
}

html.is-boot .trash-sheet {
  display: none !important;
}

.trash-sheet {
  position: fixed;
  inset: 0;
  z-index: 10120;
  pointer-events: none;
}

.trash-sheet.is-open {
  pointer-events: auto;
}

.trash-sheet[hidden] {
  display: none !important;
}

.trash-sheet__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(12, 14, 18, 0.28);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.trash-sheet.is-open .trash-sheet__backdrop {
  opacity: 1;
}

.trash-sheet__panel {
  position: absolute;
  left: 50%;
  bottom: calc(var(--dock-h) + var(--memo-stick-h) + 1.35rem);
  display: flex;
  flex-direction: column;
  width: min(26.5rem, calc(100vw - 1.4rem));
  max-height: min(72vh, 36rem);
  padding: 0.15rem 0.15rem 0;
  border: 1px solid color-mix(in srgb, var(--border) 45%, transparent);
  border-radius: 1.35rem;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 22%, transparent), transparent 42%),
    color-mix(in srgb, var(--bg-dock) 38%, transparent);
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.18),
    0 2px 0 color-mix(in srgb, #fff 14%, transparent) inset;
  transform: translate(-50%, 0.85rem) scale(0.98);
  opacity: 0;
  overflow: hidden;
  -webkit-backdrop-filter: blur(24px) saturate(1.25);
  backdrop-filter: blur(24px) saturate(1.25);
  transition:
    transform 0.32s var(--ease-out),
    opacity 0.26s ease;
}

html[data-theme="dark"] .trash-sheet__panel {
  border-color: color-mix(in srgb, var(--border) 55%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 18%, transparent), transparent 42%),
    color-mix(in srgb, var(--bg-dock) 32%, transparent);
}

.trash-sheet.is-open .trash-sheet__panel {
  transform: translate(-50%, 0) scale(1);
  opacity: 1;
}

.trash-sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.85rem 0.9rem 0.55rem;
}

.trash-sheet__heading {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}

.trash-sheet__mark {
  display: grid;
  place-items: center;
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--text) 8%, var(--surface));
  color: var(--text);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 80%, transparent);
}

.trash-sheet__mark svg {
  width: 1.05rem;
  height: 1.05rem;
}

.trash-sheet__title {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.trash-sheet__hint {
  margin: 0.12rem 0 0;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 500;
}

.trash-sheet__close {
  display: grid;
  place-items: center;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 50%;
  color: var(--text-muted);
  font-size: 1.3rem;
  line-height: 1;
}

.trash-sheet__close:hover {
  background: var(--hover);
  color: var(--text);
}

.trash-sheet__scroller {
  --trash-fade: color-mix(in srgb, var(--bg-dock) 42%, transparent);
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  max-height: calc(min(72vh, 36rem) - 4.6rem);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: var(--scroll-bounce);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--text) 28%, transparent) transparent;
}

.trash-sheet__scroller::-webkit-scrollbar {
  width: 11px;
}

.trash-sheet__scroller::-webkit-scrollbar-track {
  margin: 0.2rem 0 0.55rem;
  background: transparent;
}

.trash-sheet__scroller::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 999px;
  background-clip: padding-box;
  background-color: color-mix(in srgb, var(--text) 22%, transparent);
}

.trash-sheet__scroller::-webkit-scrollbar-thumb:hover {
  background-color: color-mix(in srgb, var(--text) 38%, transparent);
}

.trash-sheet__scroller::-webkit-scrollbar-corner {
  background: transparent;
}

.trash-sheet__scroller::before,
.trash-sheet__scroller::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: 2;
  height: 1.55rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.16s ease;
}

.trash-sheet__scroller::before {
  top: 0;
  background: linear-gradient(180deg, var(--trash-fade) 0%, transparent 100%);
}

.trash-sheet__scroller::after {
  bottom: 0;
  height: 1.85rem;
  background: linear-gradient(0deg, var(--trash-fade) 8%, transparent 100%);
}

.trash-sheet__scroller.is-scrolled::before,
.trash-sheet__scroller.is-overflow:not(.is-end)::after {
  opacity: 1;
}

.trash-sheet__list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  min-height: 0;
  padding: 0.12rem 0.42rem 0.95rem 0.75rem;
}

.trash-sheet__empty {
  display: grid;
  justify-items: center;
  gap: 0.45rem;
  margin: 1.8rem 0.4rem 1.5rem;
  color: var(--text-muted);
  font-size: 0.86rem;
  text-align: center;
}

.trash-sheet__empty p {
  margin: 0;
}

.trash-sheet__empty-icon {
  display: grid;
  place-items: center;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--text) 6%, var(--surface));
  color: var(--text-muted);
}

.trash-sheet__empty-icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.trash-card {
  display: flex;
  flex-direction: column;
  gap: 0.42rem;
}

.trash-card__page {
  min-height: 5.4rem;
  padding: 0.75rem 0.8rem;
  border-radius: 0.7rem;
  background:
    linear-gradient(180deg, color-mix(in srgb, #fff8dc 88%, #fff), #f4e3a3);
  color: #2a2518;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.06),
    0 8px 16px rgba(0, 0, 0, 0.1);
}

html[data-theme="dark"] .trash-card__page {
  background: linear-gradient(180deg, #3a3424, #2a2518);
  color: #f3ead0;
}

.trash-card__note {
  --memo-fold: 0.78rem;
  position: relative;
  min-height: 5.4rem;
  padding: 0.7rem 0.75rem 0.9rem;
  color: #1f2329;
  background: var(--memo-color, #ffb300);
  border-radius: 3px 3px 0 3px;
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - var(--memo-fold)),
    calc(100% - var(--memo-fold)) 100%,
    0 100%
  );
  filter:
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.08))
    drop-shadow(0 8px 14px rgba(0, 0, 0, 0.12));
}

.trash-card__fold {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 var(--memo-fold) var(--memo-fold);
  border-color:
    transparent
    transparent
    transparent
    color-mix(in srgb, var(--memo-color, #ffb300) 55%, #1a1208);
  pointer-events: none;
}

.trash-card__image {
  width: 100%;
  max-height: 5.4rem;
  margin-bottom: 0.4rem;
  object-fit: cover;
  border-radius: 0.35rem;
}

.trash-card__text {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.45;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


.trash-card__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0 0.12rem 0.05rem;
}

.trash-card__date {
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 500;
}

.trash-card__actions {
  display: flex;
  gap: 0.28rem;
}

.trash-card__btn {
  min-height: 1.55rem;
  padding: 0 0.58rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  color: var(--text);
  font-size: 0.7rem;
  font-weight: 600;
}

.trash-card__btn:hover {
  background: var(--hover);
}

.trash-card__btn--danger {
  color: #b42318;
  border-color: color-mix(in srgb, #b42318 22%, var(--border));
}

@media (max-width: 720px) {
  .dock-stick .dock__trash,
  .dock__trash {
    width: var(--stick-rail-h);
    height: var(--stick-rail-h);
    min-height: var(--stick-rail-h);
    box-sizing: border-box;
    border: 1px solid var(--stick-pill-border);
    background: var(--stick-pill-bg);
    box-shadow: var(--stick-pill-shadow);
    -webkit-backdrop-filter: saturate(1.25) blur(20px);
    backdrop-filter: saturate(1.25) blur(20px);
  }

  .trash-sheet__panel {
    bottom: calc(var(--dock-chrome-stack) + 0.2rem);
    width: min(100vw - 1.1rem, 24.5rem);
    max-height: min(68dvh, 32rem);
  }

  .trash-sheet__scroller {
    max-height: calc(min(68dvh, 32rem) - 4.6rem);
  }
}

/* Shared visual polish */
.crew-col__empty {
  margin: 1.1rem 0.85rem 1.25rem;
  padding: 1.1rem 0.85rem;
  border: 1px dashed color-mix(in srgb, var(--crew-col) 28%, var(--border));
  border-radius: 0.85rem;
  color: color-mix(in srgb, var(--crew-col) 55%, var(--text-muted));
  font-size: 0.78rem;
  font-weight: 550;
  line-height: 1.45;
  text-align: center;
}

.crew-card {
  border-radius: 0.95rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.home-quote__text {
  font-size: 0.98rem;
  line-height: 1.6;
}

.home-app__label {
  font-size: 0.8rem;
}

.notes-search,
.mail-search {
  height: 2.2rem;
}

html[data-theme="dark"] .notes-search,
html[data-theme="dark"] .mail-search {
  background: color-mix(in srgb, var(--surface) 42%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 5%, transparent);
}

.notes-item:hover,
.notes-folder:hover {
  background: color-mix(in srgb, var(--text) 4.5%, transparent);
}

.notes-item.is-selected {
  background: color-mix(in srgb, #e4c056 12%, var(--surface));
}

.mail-item {
  border-radius: 0.75rem;
}

.btn {
  border-radius: 0.75rem;
}

.card-tile:hover {
  translate: 0 -4px;
}

.dock-stick__icon,
.dock-stick__mail,
.dock-stick__crew {
  transition: background 0.16s ease, transform 0.16s var(--ease-out);
}