:root {
  --bg: #121212;
  --surface: #181818;
  --surface-2: #1f1f1f;
  --surface-3: #252525;
  --text: #ffffff;
  --muted: #b3b3b3;
  --near: #cbcbcb;
  --accent: #1ed760;
  --danger: #f3727f;
  --warn: #ffa42b;
  --info: #539df5;
  --border: #4d4d4d;
  --inset: rgb(18, 18, 18) 0 1px 0, rgb(124, 124, 124) 0 0 0 1px inset;
  --shadow: rgba(0, 0, 0, 0.5) 0 8px 24px;
  --soft-shadow: rgba(0, 0, 0, 0.3) 0 8px 8px;
  --font: SpotifyMixUI, CircularSp-Arab, CircularSp-Hebr, CircularSp-Cyrl, CircularSp-Grek, CircularSp-Deva, "Helvetica Neue", helvetica, arial, "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "MS Gothic", sans-serif;
}

/* Compact inline work-task composer */
#workDetail .task-add-card.is-collapsed .task-add-head,
#workDetail .task-add-head { min-height: 58px; padding: 10px 12px; }
#workDetail .task-add-chevron { color: var(--muted); font-size: 20px; font-weight: 900; }
#workDetail .project-task-composer.task-composer-expanded { gap: 8px; padding: 10px 12px 12px; }
#workDetail .task-title-field { padding-bottom: 8px; }
#workDetail .task-title-input,
#workDetail .task-field .date-button,
#workDetail .task-field .time-button,
#workDetail .task-field .custom-select { min-height: 40px; height: 40px; border-radius: 9px; padding: 7px 10px; font-size: 13px; }
#workDetail .task-form-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); gap: 8px; border: 0; }
#workDetail .task-form-column,
#workDetail .task-form-column + .task-form-column { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; border: 0; padding: 0; }
#workDetail .task-field { gap: 3px; }
#workDetail .task-field > span { font-size: 12px; }
#workDetail .task-type-chip-row { min-height: 40px; flex-wrap: nowrap; gap: 5px; overflow-x: auto; overscroll-behavior: contain; }
#workDetail .task-type-chip { min-height: 34px; padding: 6px 10px; font-size: 12px; white-space: nowrap; }
#workDetail .is-conditionally-hidden { display: none !important; }
#workDetail .task-option-row { min-height: 38px; gap: 8px; border: 0; padding: 2px 0; }
#workDetail .task-detail-toggle { justify-self: start; min-height: 34px; background: transparent; color: var(--near); padding: 0 4px; font-size: 12px; font-weight: 850; }
#workDetail .task-detail-field { display: none; padding: 0; }
#workDetail .task-detail-field.is-open { display: grid; }
#workDetail .task-detail-field textarea { min-height: 60px; max-height: 96px; border-radius: 9px; padding: 9px 10px; font-size: 13px; }
#workDetail .task-form-footer { gap: 7px; padding-top: 0; }
#workDetail .task-form-footer .pill { min-height: 38px; padding: 7px 16px; font-size: 12px; }
#workDetail .task-sort-tools { grid-template-columns: auto auto auto 1fr; }
#workDetail .work-task-hide-done { justify-self: end; }

body.picker-scroll-locked { overflow: hidden; overscroll-behavior: none; }
.picker-scroll-locked-panel { overflow: hidden !important; overscroll-behavior: none; }
.date-picker-card, .time-picker-card, .date-picker-days, .time-picker-column { overscroll-behavior: contain; }
.time-picker-card { display: grid; grid-template-columns: 1fr; gap: 8px; max-height: 316px; }
.time-picker-heading, .time-picker-actions { display: flex; align-items: center; justify-content: space-between; }
.time-picker-heading small { color: var(--muted); font-size: 11px; }
.time-picker-columns { display: grid; grid-template-columns: .9fr 1fr 1fr; gap: 8px; min-height: 0; }
.time-picker-column { max-height: 210px; }
.time-picker-actions { gap: 8px; justify-content: flex-end; }
.time-picker-actions button { min-height: 34px; border-radius: 8px; background: var(--surface-2); color: var(--text); padding: 0 14px; font-size: 12px; font-weight: 850; }
.time-picker-actions [data-time-apply] { background: var(--accent); color: #061007; }

@media (max-width: 768px) {
  #workDetail .task-add-card.is-collapsed .task-add-head,
  #workDetail .task-add-head { min-height: 52px; padding: 9px 11px; }
  #workDetail .task-add-title small { display: none; }
  #workDetail .project-task-composer.task-composer-expanded { padding: 10px; }
  #workDetail .task-form-grid { grid-template-columns: 1fr; }
  #workDetail .task-form-column,
  #workDetail .task-form-column + .task-form-column { grid-template-columns: 1fr 1fr; }
  #workDetail .task-form-column:first-child .task-field:nth-child(2),
  #workDetail .task-form-column:nth-child(2) > .task-field:last-child { grid-column: 1 / -1; }
  #workDetail .task-option-row { gap: 6px; }
  #workDetail .task-detail-toggle { width: 100%; justify-self: stretch; text-align: left; }
  #workDetail .task-form-footer { justify-content: flex-end; }
  #workDetail .task-sort-tools { grid-template-columns: auto auto 1fr; }
  #workDetail .task-sort-tools > span { display: none; }
  .date-picker-layer.open, .time-picker-layer.open { position: fixed; inset: auto 0 0 0; width: 100%; padding: 10px 10px calc(10px + env(safe-area-inset-bottom)); background: rgba(0, 0, 0, .62); }
  .date-picker-card, .time-picker-card { width: min(100%, 440px); margin: 0 auto; border-radius: 18px 18px 12px 12px; }
  .time-picker-card { max-height: 320px; }
  .time-picker-column { max-height: 210px; overflow-y: auto; touch-action: pan-y; }
  #workDetail .detail-page { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
}

/* 2026-07 compact bug-fix pass */
.project-complete-head {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  text-align: center;
  white-space: nowrap;
}

.project-complete-check {
  justify-self: center;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.project-complete-check input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.project-complete-check span {
  width: 22px;
  height: 22px;
  border: 1.5px solid rgba(255,255,255,.4);
  border-radius: 5px;
  background: rgba(0,0,0,.28);
}

.project-complete-check input:checked + span {
  border-color: var(--accent);
  background: var(--accent) url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 10.2 8.4 13.5 15.2 6.5' fill='none' stroke='%23020b05' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/15px no-repeat;
}

.studio-filter-section {
  display: grid;
  gap: 10px;
}

.studio-filter-section summary {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  color: var(--near);
  font-weight: 900;
  list-style: none;
}

.studio-filter-section summary::-webkit-details-marker { display: none; }
.studio-filter-section summary::after { content: "⌄"; color: var(--muted); transition: transform .16s ease; }
.studio-filter-section[open] summary::after { transform: rotate(180deg); }

.board-head-compact {
  justify-content: flex-end;
  min-height: 42px;
}

.board-detail-card {
  min-width: 0;
}

.board-detail-top {
  min-width: 0;
}

.board-detail-top > div {
  display: flex;
  flex: 0 0 auto;
  gap: 7px;
  align-items: center;
  white-space: nowrap;
}

.board-detail-top > div button {
  min-width: 54px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  white-space: nowrap;
}

.board-detail-card header h2 {
  overflow-wrap: anywhere;
  font-size: clamp(28px, 3vw, 46px);
  line-height: 1.15;
}

.board-detail-content {
  overflow-wrap: anywhere;
}

.board-comment-head > span {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.board-comments .board-comment-head button {
  justify-self: auto;
  min-width: 42px;
  padding: 5px 9px;
  background: rgba(255,255,255,.06);
  color: var(--muted);
}

.board-comments .board-comment-head button:last-child {
  background: rgba(243,114,127,.14);
  color: var(--danger);
}

.board-comment-edit-form {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto auto;
  gap: 7px;
}

.board-comment-edit-form input {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #111517;
  color: var(--text);
  padding: 0 12px;
}

.admin-panel {
  padding: 18px;
}

.admin-content.open {
  display: block;
}

.admin-hub-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  padding: 4px 0 16px;
  border-bottom: 1px solid rgba(255,255,255,.09);
}

.admin-hub-head > div {
  display: grid;
  gap: 5px;
}

.admin-hub-head strong {
  font-size: 22px;
}

.admin-hub-head span {
  color: var(--muted);
  font-size: 13px;
}

.admin-hub-head nav {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 5px;
  padding: 4px;
  border-radius: 12px;
  background: rgba(255,255,255,.05);
}

.admin-hub-head nav button {
  min-height: 38px;
  padding: 0 15px;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font-weight: 900;
}

.admin-hub-head nav button.active {
  background: rgba(30,215,96,.16);
  color: var(--accent);
}

.admin-dropdown-grid,
.admin-member-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
  padding-top: 14px;
}

.admin-member-grid .owner-link-manager,
.admin-member-grid .account-manager {
  grid-column: 1 / -1;
}

.admin-content .option-manager {
  align-content: start;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px;
  background: rgba(255,255,255,.035);
  padding: 15px;
}

.admin-content .option-form input {
  min-height: 40px;
  border-radius: 9px;
}

.admin-content .option-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 7px;
}

.admin-content .admin-chip {
  width: 100%;
  min-width: 0;
  border-radius: 9px;
  padding: 7px 8px;
}

.admin-content .admin-option-input {
  min-width: 0;
  padding: 0;
}

.account-position {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.account-position select {
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #111;
  color: var(--text);
  padding: 0 28px 0 10px;
}

@media (max-width: 768px) {
  #projectDetail .detail-actions,
  #workDetail .detail-actions {
    justify-content: flex-start;
  }

  #projectDetail .basic-save-btn,
  #workDetail .basic-save-btn {
    margin-left: auto;
  }

  .board-detail-top {
    align-items: center;
    flex-direction: row;
  }

  .board-detail-top > div {
    margin-left: auto;
  }

  .board-comment-head {
    align-items: center !important;
  }

  .board-comment-edit-form {
    grid-template-columns: 1fr auto;
  }

  .board-comment-edit-form input {
    grid-column: 1 / -1;
  }

  .admin-hub-head {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-hub-head nav,
  .admin-dropdown-grid,
  .admin-member-grid,
  .admin-content .option-list {
    grid-template-columns: 1fr;
  }
}

#workDetail .task-form-grid {
  display: grid;
  grid-template-columns: .9fr .9fr .8fr 1.4fr;
  grid-template-areas: "owner type date time";
  gap: 8px;
}
#workDetail .task-form-column,
#workDetail .task-form-column + .task-form-column { display: contents; }
#workDetail .task-form-column:first-child > .task-field:first-child { grid-area: owner; }
#workDetail .task-form-column:first-child > .task-field:nth-child(2) { grid-area: date; }
#workDetail .task-form-column:nth-child(2) > .task-field:first-child { grid-area: type; }
#workDetail .task-form-column:nth-child(2) > .task-field:nth-child(2) { grid-area: time; }

@media (max-width: 768px) {
  #workDetail .task-form-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "owner type" "date date" "time time";
  }
  #workDetail .task-form-column,
  #workDetail .task-form-column + .task-form-column { display: contents; }
}

@media (max-width: 768px) {
  .mobile-board-page,
  .mobile-board-full {
    display: grid;
    gap: 14px;
    padding: 6px 4px 124px;
  }

  .mobile-board-search {
    display: grid;
    grid-template-columns: 1fr 94px;
    gap: 10px;
  }

  .mobile-board-search input,
  .mobile-board-search button {
    min-height: 46px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text);
    padding: 0 14px;
    font-weight: 850;
  }

  .mobile-board-filter-panel {
    display: grid;
    gap: 10px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.055);
    padding: 12px;
  }

  .mobile-board-filter-panel div {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .mobile-board-list {
    display: grid;
  }

  .mobile-board-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
    width: 100%;
    min-height: 58px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    background: transparent;
    color: var(--text);
    padding: 10px 0;
    text-align: left;
  }

  .mobile-board-row strong {
    display: flex;
    gap: 8px;
    align-items: center;
    min-width: 0;
    font-size: 16px;
    font-weight: 850;
  }

  .mobile-board-row span:last-child {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
  }

  .mobile-board-full .board-editor-card,
  .mobile-board-full .board-detail-card {
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0 0 122px;
  }

  .mobile-board-full .board-editor-meta,
  .mobile-board-full .board-notice-extra,
  .mobile-board-full .board-comment-form {
    grid-template-columns: 1fr;
  }

  .mobile-directory-inactive input[type="checkbox"] {
    flex: 0 0 20px;
    width: 20px;
    min-width: 20px;
    max-width: 20px;
    height: 20px;
    min-height: 20px;
    max-height: 20px;
    padding: 0;
    border-radius: 4px;
  }

  .mobile-board-full .board-title-line {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .mobile-board-full .board-notice-options.open {
    grid-column: 1 / -1;
    grid-template-columns: 1fr;
  }

  .mobile-board-full .board-rich-toolbar {
    flex-wrap: nowrap;
    overflow-x: auto;
  }
}

@media (max-width: 768px) {
  .mobile-board-page,
  .mobile-board-full {
    display: grid;
    gap: 14px;
    padding: 6px 4px 124px;
  }

  .mobile-board-page .mobile-section-head h2 {
    font-size: 36px;
    letter-spacing: -0.03em;
  }

  .mobile-board-search {
    display: grid;
    grid-template-columns: 1fr 94px;
    gap: 10px;
  }

  .mobile-board-search input,
  .mobile-board-search button {
    min-height: 46px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text);
    padding: 0 14px;
    font-weight: 850;
  }

  .mobile-board-search button.active {
    color: var(--accent);
    box-shadow: inset 0 0 0 1.5px var(--accent);
  }

  .mobile-board-filter-panel {
    display: grid;
    gap: 10px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.055);
    padding: 12px;
  }

  .mobile-board-filter-panel p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
  }

  .mobile-board-filter-panel div {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .mobile-board-filter-panel button {
    min-width: max-content;
    min-height: 36px;
    padding-inline: 14px;
  }

  .mobile-board-list {
    display: grid;
  }

  .mobile-board-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 12px;
    align-items: center;
    width: 100%;
    min-height: 58px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    background: transparent;
    color: var(--text);
    padding: 10px 0;
    text-align: left;
  }

  .mobile-board-row::after {
    content: attr(data-board-time);
    color: var(--muted);
    font-size: 12px;
  }

  .mobile-board-row strong {
    display: flex;
    gap: 8px;
    align-items: center;
    min-width: 0;
    font-size: 16px;
    font-weight: 850;
  }

  .mobile-board-row.notice strong {
    font-weight: 950;
  }

  .mobile-board-row span:last-child {
    grid-column: 1 / -1;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
  }

  .mobile-board-full .board-editor-card,
  .mobile-board-full .board-detail-card {
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0 0 122px;
  }

  .mobile-board-full .board-editor-top,
  .mobile-board-full .board-detail-top {
    position: static;
    inset: auto;
    right: auto;
    z-index: 3;
    min-height: 52px;
    padding: 4px 0;
    background: transparent;
    backdrop-filter: none;
  }

  .mobile-board-full .board-editor-top > div {
    width: 100%;
    display: flex;
    align-items: center;
  }

  .mobile-board-full .board-editor-top .board-list-back {
    margin-right: auto;
  }

  .mobile-board-full .board-comment-head {
    min-width: 0;
    flex-wrap: wrap;
  }

  .mobile-board-full .board-comment-identity {
    min-width: 0;
  }

  .mobile-board-full .board-comment-actions {
    margin-left: auto;
  }

  .mobile-board-full .board-comment-actions button {
    min-height: 38px;
    padding: 0 12px;
    font-size: 13px;
    font-weight: 900;
  }

  .mobile-board-full .board-editor-meta,
  .mobile-board-full .board-notice-extra,
  .mobile-board-full .board-comment-form {
    grid-template-columns: 1fr;
  }

  .mobile-board-full .board-title-line {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .mobile-board-full .board-notice-options.open {
    grid-column: 1 / -1;
    grid-template-columns: 1fr;
  }

  .mobile-board-full .board-notice-options {
    border-radius: 14px;
    padding: 14px;
  }

  .mobile-board-full .board-rich-toolbar {
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  .mobile-board-full .board-content-editor {
    min-height: 260px;
  }

  .mobile-board-full .board-reply-form {
    grid-template-columns: 1fr auto;
  }

  .mobile-board-full .board-reply-form input {
    grid-column: 1 / -1;
  }

  .mobile-board-full .board-reply-list {
    margin-left: 10px;
    padding-left: 9px;
  }

  .mobile-board-full .board-detail-card h2 {
    font-size: 30px;
  }
}

/* Mobile More: grouped navigation, profile, directory and admin */
@media (max-width: 768px) {
  .mobile-fab-wrap.is-hidden { display: none !important; }

  .mobile-more-page,
  .mobile-more-subpage {
    display: grid;
    gap: 18px;
    width: min(100%, 680px);
    margin: 0 auto;
    padding: 2px 0 calc(92px + env(safe-area-inset-bottom));
  }

  .mobile-profile-summary {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;
    min-height: 92px;
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
    color: var(--text);
    padding: 16px;
    text-align: left;
  }

  .mobile-profile-summary span:not(.mobile-profile-avatar) {
    display: grid;
    gap: 4px;
    min-width: 0;
  }

  .mobile-profile-summary strong,
  .mobile-profile-summary small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-profile-summary strong { font-size: 19px; }
  .mobile-profile-summary small { color: var(--muted); font-size: 13px; }
  .mobile-profile-summary > b { color: var(--accent); font-size: 12px; white-space: nowrap; }

  .mobile-profile-avatar {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 50%;
    background: var(--surface-3);
    color: var(--accent);
    font-size: 22px;
    font-style: normal;
    font-weight: 950;
  }

  .mobile-profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
  .mobile-profile-avatar.small { width: 42px; height: 42px; flex-basis: 42px; font-size: 16px; }
  .mobile-profile-avatar.large { width: 94px; height: 94px; flex-basis: 94px; font-size: 32px; }

  .mobile-more-page > section,
  .mobile-settings-section {
    display: grid;
    gap: 7px;
  }

  .mobile-more-page > section > h3,
  .mobile-settings-section > h3 {
    margin: 0;
    padding: 0 4px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
  }

  .mobile-more-page > section > div,
  .mobile-settings-section > div,
  .mobile-settings-group {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 14px;
    background: var(--surface);
  }

  .mobile-more-row {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto 18px;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 54px;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    border-radius: 0;
    background: transparent;
    color: var(--text);
    padding: 0 15px;
    text-align: left;
  }

  .mobile-more-row:last-child { border-bottom: 0; }
  .mobile-more-row > i { color: var(--accent); font-size: 17px; font-style: normal; text-align: center; }
  .mobile-more-row > span { font-size: 15px; font-weight: 850; }
  .mobile-more-row > b { min-width: 22px; border-radius: 999px; background: var(--accent); color: #061007; padding: 3px 7px; font-size: 11px; text-align: center; }
  .mobile-more-row > em { color: var(--muted); font-size: 22px; font-style: normal; }
  .mobile-more-row.danger > i,
  .mobile-more-row.danger > span { color: var(--danger); }

  .mobile-more-subpage > header {
    position: sticky;
    top: calc(74px + env(safe-area-inset-top));
    z-index: 8;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: center;
    min-height: 54px;
    background: var(--bg);
  }

  .mobile-more-subpage > header button {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--text);
    font-size: 32px;
    line-height: 1;
  }

  .mobile-more-subpage > header h2 { margin: 0; overflow: hidden; font-size: 19px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }

  .mobile-profile-form,
  .mobile-admin-options,
  .mobile-admin-user-list,
  .mobile-directory-groups {
    display: grid;
    gap: 12px;
  }

  .mobile-profile-photo-card {
    display: grid;
    justify-items: center;
    gap: 9px;
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 16px;
    background: var(--surface);
    padding: 18px 14px;
  }

  .mobile-profile-photo-card > small { min-height: 16px; color: var(--muted); font-size: 12px; text-align: center; }
  .mobile-profile-photo-card > div { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
  .mobile-profile-photo-card label,
  .mobile-profile-photo-card button,
  .mobile-profile-save,
  .mobile-logout-button {
    min-height: 44px;
    border: 0;
    border-radius: 10px;
    background: var(--surface-3);
    color: var(--text);
    padding: 0 14px;
    font-size: 13px;
    font-weight: 850;
  }

  .mobile-profile-photo-card label { display: grid; place-items: center; cursor: pointer; }
  .mobile-profile-photo-card input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
  .mobile-profile-photo-card .primary,
  .mobile-profile-save { background: var(--accent); color: #061007; }
  .mobile-profile-photo-card .danger,
  .mobile-logout-button { color: var(--danger); }
  .mobile-profile-save,
  .mobile-logout-button { width: 100%; }

  .mobile-info-row,
  .mobile-profile-edit-row,
  .mobile-select-row,
  .mobile-setting-toggle {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    padding: 10px 14px;
  }

  .mobile-info-row:last-child,
  .mobile-profile-edit-row:last-child,
  .mobile-select-row:last-child,
  .mobile-setting-toggle:last-child { border-bottom: 0; }
  .mobile-info-row span,
  .mobile-profile-edit-row span,
  .mobile-select-row span,
  .mobile-setting-toggle span { font-size: 14px; font-weight: 800; }
  .mobile-info-row b { max-width: 60vw; overflow: hidden; color: var(--near); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-profile-edit-row input,
  .mobile-select-row select {
    min-width: 0;
    max-width: 190px;
    min-height: 40px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface-2);
    color: var(--text);
    padding: 0 10px;
    text-align: right;
  }

  .mobile-setting-toggle input { position: absolute; opacity: 0; }
  .mobile-setting-toggle i { position: relative; width: 46px; height: 28px; border-radius: 999px; background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--border); }
  .mobile-setting-toggle i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--near); transition: transform .16s ease; }
  .mobile-setting-toggle input:checked + i { background: var(--accent); box-shadow: none; }
  .mobile-setting-toggle input:checked + i::after { background: #fff; transform: translateX(18px); }

  .mobile-directory-search input {
    width: 100%;
    min-height: 46px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text);
    padding: 0 14px;
    font-size: 15px;
  }

  .mobile-directory-inactive { display: flex; align-items: center; gap: 9px; min-height: 44px; color: var(--near); font-size: 13px; }
  .mobile-directory-inactive input { width: 20px; height: 20px; accent-color: var(--accent); }
  .mobile-directory-groups section { display: grid; gap: 6px; }
  .mobile-directory-groups h3 { margin: 0; padding: 0 4px; color: var(--muted); font-size: 13px; }
  .mobile-directory-groups h3 small { color: var(--accent); }
  .mobile-directory-groups section > div { overflow: hidden; border: 1px solid rgba(255, 255, 255, .10); border-radius: 14px; background: var(--surface); }
  .mobile-directory-groups section button {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 11px;
    width: 100%;
    min-height: 62px;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    border-radius: 0;
    background: transparent;
    color: var(--text);
    padding: 9px 13px;
    text-align: left;
  }
  .mobile-directory-groups section button:last-child { border-bottom: 0; }
  .mobile-directory-groups section button > span { display: grid; gap: 3px; min-width: 0; }
  .mobile-directory-groups section button strong,
  .mobile-directory-groups section button small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-directory-groups section button small { color: var(--muted); }
  .mobile-directory-groups section button em { color: var(--muted); font-style: normal; font-size: 20px; }

  .mobile-directory-skeleton { display: grid; gap: 8px; }
  .mobile-directory-skeleton i { min-height: 62px; border-radius: 12px; background: var(--surface-2); animation: mobile-skeleton 1.2s ease-in-out infinite alternate; }
  @keyframes mobile-skeleton { to { opacity: .45; } }

  .mobile-state-empty,
  .mobile-state-error {
    display: grid;
    justify-items: center;
    gap: 8px;
    min-height: 130px;
    align-content: center;
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 14px;
    color: var(--muted);
    text-align: center;
  }
  .mobile-state-error { color: var(--danger); }
  .mobile-state-error button { min-height: 44px; border: 0; border-radius: 10px; background: var(--surface-3); color: var(--text); padding: 0 16px; }

  .mobile-member-detail {
    display: grid;
    justify-items: center;
    gap: 8px;
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 16px;
    background: var(--surface);
    padding: 22px 16px;
  }
  .mobile-member-detail h3,
  .mobile-member-detail p { margin: 0; }
  .mobile-member-detail p { color: var(--muted); font-size: 13px; }
  .mobile-member-detail > div { width: 100%; margin-top: 10px; }
  .mobile-member-detail > div > span { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 12px; min-height: 50px; align-items: center; border-top: 1px solid rgba(255, 255, 255, .08); }
  .mobile-member-detail small { color: var(--muted); }
  .mobile-member-detail b { overflow-wrap: anywhere; text-align: right; }

  .mobile-admin-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .mobile-admin-summary article { display: grid; gap: 5px; min-height: 76px; align-content: center; border: 1px solid rgba(255, 255, 255, .10); border-radius: 13px; background: var(--surface); padding: 10px; }
  .mobile-admin-summary span { color: var(--muted); font-size: 11px; }
  .mobile-admin-summary b { color: var(--accent); font-size: 21px; }

  .mobile-admin-user-list article {
    display: grid;
    gap: 12px;
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 14px;
    background: var(--surface);
    padding: 13px;
  }
  .mobile-admin-user-open { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 50px; border: 0; background: transparent; color: var(--text); padding: 0; text-align: left; }
  .mobile-admin-user-open span { display: grid; min-width: 0; }
  .mobile-admin-user-open small { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
  .mobile-admin-user-open > b { color: var(--accent); font-size: 11px; }
  .mobile-admin-user-list article > label { display: grid; grid-template-columns: 60px 1fr; align-items: center; gap: 8px; }
  .mobile-admin-user-list select,
  .mobile-owner-links select { min-height: 40px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-2); color: var(--text); padding: 0 10px; }
  .mobile-admin-user-list article > div { display: flex; flex-wrap: wrap; gap: 7px; }
  .mobile-admin-user-list article button { min-height: 40px; border: 0; border-radius: 9px; background: var(--surface-3); color: var(--near); padding: 0 12px; font-weight: 850; }
  .mobile-admin-user-list article button.active,
  .mobile-admin-user-list article button.primary { background: var(--accent); color: #061007; }
  .mobile-admin-user-list article button.danger { color: var(--danger); }

  .mobile-admin-option-group {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 14px;
    background: var(--surface);
  }
  .mobile-admin-option-group summary { display: flex; justify-content: space-between; align-items: center; min-height: 50px; cursor: pointer; padding: 0 14px; font-weight: 900; list-style: none; }
  .mobile-admin-option-group summary b { color: var(--accent); font-size: 12px; }
  .mobile-admin-option-group > form { display: grid; grid-template-columns: minmax(0, 1fr) 62px; gap: 7px; padding: 0 12px 10px; }
  .mobile-admin-option-group input,
  .mobile-admin-option-group form button { min-width: 0; min-height: 40px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-2); color: var(--text); padding: 0 10px; }
  .mobile-admin-option-group form button { border: 0; background: var(--accent); color: #061007; font-weight: 900; }
  .mobile-admin-option-group > div:not(.mobile-owner-links) > span { display: grid; grid-template-columns: 24px minmax(0, 1fr) 48px 40px; align-items: center; gap: 6px; min-height: 54px; border-top: 1px solid rgba(255, 255, 255, .08); padding: 7px 10px; }
  .mobile-admin-option-group > div > span > button { min-height: 38px; border: 0; border-radius: 8px; background: var(--surface-3); color: var(--near); font-size: 11px; font-weight: 850; }
  .mobile-admin-option-group > div > span > .mobile-option-drag { padding: 0; color: var(--muted); font-size: 15px; touch-action: none; cursor: grab; }
  .mobile-admin-option-group > div > span > button:last-child { color: var(--danger); font-size: 18px; }
  .mobile-admin-option-group > div > span.is-dragging { background: rgba(30, 215, 96, .10); }
  .mobile-owner-links { display: grid; gap: 8px; padding: 0 12px 12px; }
  .mobile-owner-links label { display: grid; grid-template-columns: minmax(80px, .7fr) 1fr; align-items: center; gap: 8px; }
  .mobile-admin-save-links { width: calc(100% - 24px); min-height: 44px; margin: 0 12px 12px; border: 0; border-radius: 9px; background: var(--accent); color: #061007; font-weight: 900; }

  @media (prefers-reduced-motion: reduce) {
    .mobile-setting-toggle i::after,
    .mobile-directory-skeleton i { transition: none; animation: none; }
  }
}

/* Final cascade for compact board/admin fixes */
.board-head-compact { justify-content: flex-end; min-height: 42px; }
.board-detail-card { min-width: 0; }
.board-detail-top { min-width: 0; }
.board-detail-top > div { display: flex; flex: 0 0 auto; gap: 7px; align-items: center; white-space: nowrap; }
.board-detail-top > div button { min-width: 54px; min-height: 36px; display: inline-flex; align-items: center; justify-content: center; overflow: visible; white-space: nowrap; }
.board-detail-card header h2 { overflow-wrap: anywhere; font-size: clamp(28px, 3vw, 46px); line-height: 1.15; }
.board-detail-content { overflow-wrap: anywhere; }
.board-comment-head > span { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.board-comments .board-comment-head button { justify-self: auto; min-width: 42px; padding: 5px 9px; background: rgba(255,255,255,.06); color: var(--muted); }
.board-comments .board-comment-head button:last-child { background: rgba(243,114,127,.14); color: var(--danger); }
.board-comment-edit-form { display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 7px; }
.board-comment-edit-form input { min-height: 40px; border: 1px solid var(--line); border-radius: 8px; background: #111517; color: var(--text); padding: 0 12px; }

.admin-panel { padding: 18px; }
.admin-content.open { display: block; }
.admin-hub-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; padding: 4px 0 16px; border-bottom: 1px solid rgba(255,255,255,.09); }
.admin-hub-head > div { display: grid; gap: 5px; }
.admin-hub-head strong { font-size: 22px; }
.admin-hub-head span { color: var(--muted); font-size: 13px; }
.admin-hub-head nav { display: grid; grid-template-columns: repeat(2,auto); gap: 5px; padding: 4px; border-radius: 12px; background: rgba(255,255,255,.05); }
.admin-hub-head nav button { min-height: 38px; padding: 0 15px; border-radius: 9px; background: transparent; color: var(--muted); font-weight: 900; }
.admin-hub-head nav button.active { background: rgba(30,215,96,.16); color: var(--accent); }
.admin-dropdown-grid, .admin-member-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; padding-top: 14px; }
.admin-member-grid .owner-link-manager, .admin-member-grid .account-manager { grid-column: 1/-1; }
.admin-content .option-manager { align-content: start; border: 1px solid rgba(255,255,255,.07); border-radius: 14px; background: rgba(255,255,255,.035); padding: 15px; }
.admin-content .option-form input { min-height: 40px; border-radius: 9px; }
.admin-content .option-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
.admin-content .admin-chip { width: 100%; min-width: 0; border-radius: 9px; padding: 7px 8px; }
.admin-content .admin-option-input { min-width: 0; padding: 0; }
.account-position { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 11px; font-weight: 850; }
.account-position select { min-height: 36px; border: 1px solid var(--line); border-radius: 8px; background: #111; color: var(--text); padding: 0 28px 0 10px; }

@media (max-width: 768px) {
  #projectDetail .detail-actions, #workDetail .detail-actions { justify-content: flex-start; }
  #projectDetail .basic-save-btn, #workDetail .basic-save-btn { margin-left: auto; }
  .board-detail-top { align-items: center; flex-direction: row; }
  .board-detail-top > div { margin-left: auto; }
  .board-comment-head { align-items: center !important; }
  .board-comment-edit-form { grid-template-columns: 1fr auto; }
  .board-comment-edit-form input { grid-column: 1/-1; }
  .admin-hub-head { align-items: stretch; flex-direction: column; }
  .admin-hub-head nav, .admin-dropdown-grid, .admin-member-grid, .admin-content .option-list { grid-template-columns: 1fr; }
}

/* Final cascade for the work-task quick form and picker sheets. */
#workDetail .task-add-card.is-collapsed .task-add-head { min-height: 58px; padding: 10px 12px; }
#workDetail .project-task-composer.task-composer-expanded { gap: 8px; padding: 10px 12px 12px; }
#workDetail .task-title-field { padding-bottom: 8px; }
#workDetail .task-form-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); gap: 8px; border: 0; }
#workDetail .task-form-column,
#workDetail .task-form-column + .task-form-column { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; border: 0; padding: 0; }
#workDetail .task-option-row { min-height: 38px; gap: 8px; border: 0; padding: 2px 0; }
#workDetail .task-detail-field { display: none; padding: 0; }
#workDetail .task-detail-field.is-open { display: grid; }
#workDetail .task-detail-field textarea { min-height: 60px; max-height: 96px; }
#workDetail .task-form-footer { gap: 7px; padding-top: 0; }
#workDetail .task-form-footer .pill { min-height: 38px; padding: 7px 16px; }
#workDetail .task-sort-tools { grid-template-columns: auto auto auto 1fr; }
.time-picker-card { display: grid; grid-template-columns: 1fr; gap: 8px; max-height: 316px; }
.time-picker-columns { display: grid; grid-template-columns: .9fr 1fr 1fr; gap: 8px; min-height: 0; }
.time-picker-column { max-height: 210px; overscroll-behavior: contain; }

@media (max-width: 768px) {
  #workDetail .task-add-card.is-collapsed .task-add-head { min-height: 52px; padding: 9px 11px; }
  #workDetail .task-add-title small { display: none; }
  #workDetail .project-task-composer.task-composer-expanded { padding: 10px; }
  #workDetail .task-form-grid { grid-template-columns: 1fr; }
  #workDetail .task-form-column,
  #workDetail .task-form-column + .task-form-column { grid-template-columns: 1fr 1fr; }
  #workDetail .task-sort-tools { grid-template-columns: auto auto 1fr; }
  #workDetail .task-sort-tools > span { display: none; }
  .date-picker-layer.open, .time-picker-layer.open { position: fixed; inset: auto 0 0 0; width: 100%; padding: 10px 10px calc(10px + env(safe-area-inset-bottom)); background: rgba(0, 0, 0, .62); }
  .date-picker-card, .time-picker-card { width: min(100%, 440px); margin: 0 auto; border-radius: 18px 18px 12px 12px; }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
}

.auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  background: #050708;
  padding: 18px;
  pointer-events: auto;
}

.auth-overlay.auth-loading .auth-card {
  display: none;
}

.auth-overlay.auth-loading::after {
  content: "";
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 3px solid rgba(255, 255, 255, 0.18);
  border-top-color: var(--accent);
  animation: spin 800ms linear infinite;
}

body.auth-locked .app-shell,
body.auth-locked .mobile-topbar,
body.auth-locked .mobile-tabbar,
body.auth-locked .mobile-fab-wrap {
  pointer-events: none;
  user-select: none;
}

.auth-card {
  display: grid;
  gap: 14px;
  width: min(420px, 100%);
  border-radius: 8px;
  background: var(--surface);
  padding: 26px;
  box-shadow: var(--shadow);
  animation: modalIn 220ms ease-out;
}

.auth-panel {
  display: grid;
  gap: 14px;
}

.auth-signup-panel,
.auth-card.signup-mode .auth-login-panel {
  display: none;
}

.auth-card.signup-mode .auth-signup-panel {
  display: grid;
}

.auth-card select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text);
  padding: 13px 14px;
  outline: none;
}

.auth-card h1 {
  margin-bottom: 6px;
}

.auth-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.user-badge {
  align-self: center;
  border-radius: 9999px;
  background: var(--surface-2);
  color: var(--accent);
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 800;
}

button,
input,
textarea {
  font: inherit;
}

button {
  border: 0;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  transition: transform 160ms ease, background 160ms ease, color 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
  -webkit-tap-highlight-color: transparent;
}

button:active {
  transform: scale(0.97);
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.tap-ripple {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.2);
  transform: scale(0);
  animation: ripple 520ms ease-out;
}

@keyframes ripple {
  to {
    opacity: 0;
    transform: scale(2.4);
  }
}

input,
textarea {
  width: 100%;
  border: 0;
  border-radius: 500px;
  background: var(--surface-2);
  color: var(--text);
  padding: 12px 16px;
  box-shadow: var(--inset);
}

textarea {
  border-radius: 8px;
  resize: vertical;
}

input:focus,
textarea:focus {
  outline: 1px solid #000000;
}

input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  display: inline-grid;
  place-content: center;
  width: 18px;
  min-width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
  border: 1px solid #666666;
  border-radius: 4px;
  background: var(--surface);
  box-shadow: none;
  vertical-align: middle;
}

input[type="checkbox"]::after {
  content: "";
  width: 9px;
  height: 5px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg) scale(0);
  transform-origin: center;
}

input[type="checkbox"]:checked::after {
  transform: rotate(-45deg) scale(1);
}

input[type="checkbox"]:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.hidden {
  display: none !important;
}

.app-shell {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  min-height: 100vh;
  background: var(--bg);
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  background: #000000;
  padding: 24px 14px;
  display: flex;
  flex-direction: column;
}

.brand {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 0 8px 24px;
}

.brand-mark,
.play-button,
.circle {
  display: grid;
  place-items: center;
  border-radius: 50%;
}

.brand-mark {
  width: 42px;
  height: 42px;
  background: var(--accent);
  color: #000000;
  font-size: 18px;
  font-weight: 700;
}

.brand strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
}

.brand span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.nav {
  display: grid;
  gap: 6px;
}

.nav-item {
  width: 100%;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  padding: 13px 12px;
  text-align: left;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 13px;
  position: relative;
}

.nav-icon {
  width: 23px;
  height: 23px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--near);
  flex: 0 0 23px;
}

.nav-icon svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-item.active,
.nav-item:hover {
  background: var(--surface-2);
  color: var(--text);
}

.nav-item.active::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--accent);
}

.nav-item.active .nav-icon,
.nav-item:hover .nav-icon {
  color: var(--accent);
}

.nav-item.nav-sub {
  padding-left: 28px;
  font-size: 13px;
  color: var(--near);
}

.sidebar-note {
  margin-top: 24px;
  border-radius: 8px;
  background: var(--surface);
  padding: 16px;
  box-shadow: var(--soft-shadow);
}

.sidebar-note span,
.eyebrow,
small {
  color: var(--muted);
}

.sidebar-note span,
.eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.sidebar-note strong {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.45;
}

.sidebar-account {
  margin-top: auto;
  border-top: 1px solid var(--line);
  padding: 18px 4px 0;
  display: grid;
  grid-template-columns: 42px 1fr 28px;
  align-items: center;
  gap: 10px;
}

.sidebar-account.hidden {
  display: none;
}

.sidebar-account-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: #000000;
}

.sidebar-account-avatar svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sidebar-account strong,
.sidebar-account span {
  display: block;
}

.sidebar-account strong {
  font-size: 14px;
  font-weight: 800;
}

.sidebar-account span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.sidebar-account-toggle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 18px;
}

.sidebar-account-menu {
  position: absolute;
  z-index: 90;
  left: 18px;
  bottom: 88px;
  display: none;
  width: 212px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-2);
  padding: 7px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .45);
}

.sidebar-account-menu.open {
  display: grid;
}

.sidebar-account-menu button {
  min-height: 42px;
  border-radius: 9px;
  background: transparent;
  color: var(--text);
  padding: 0 13px;
  text-align: left;
  font-weight: 800;
}

.sidebar-account-menu button:hover {
  background: var(--surface-3);
}

.sidebar-account-menu button.danger {
  color: var(--danger);
}

.modal-shell.desktop-organization-modal,
.modal-shell.desktop-profile-modal {
  z-index: 140;
  align-items: center;
  justify-content: center;
  padding: 28px;
}

.desktop-organization-card {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 20px;
  width: min(720px, calc(100vw - 96px));
  height: min(820px, calc(100vh - 72px));
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--surface);
  padding: 28px;
  box-shadow: 0 28px 80px rgba(0, 0, 0, .55);
}

.desktop-organization-card > header,
.desktop-profile-card > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.desktop-organization-card h2,
.desktop-profile-card h2 {
  margin: 0;
  font-size: 25px;
}

.desktop-organization-card > header button,
.desktop-profile-card > header button {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text);
  font-size: 28px;
}

.desktop-organization-search {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 54px;
  border-radius: 14px;
  background: var(--surface-2);
  padding: 0 16px;
}

.desktop-organization-search svg {
  width: 24px;
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.8;
}

.desktop-organization-search input {
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
}

.desktop-organization-content {
  overflow-y: auto;
  padding-right: 5px;
}

.desktop-organization-group {
  border-bottom: 1px solid var(--line);
}

.desktop-organization-group summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  cursor: pointer;
  list-style: none;
  font-size: 16px;
  font-weight: 900;
}

.desktop-organization-group summary::-webkit-details-marker { display: none; }
.desktop-organization-group summary::before { content: "›"; color: var(--muted); font-size: 24px; transition: transform .16s ease; }
.desktop-organization-group[open] summary::before { transform: rotate(90deg); }
.desktop-organization-group summary small { color: var(--accent); font-size: 12px; }

.desktop-organization-members {
  display: grid;
  gap: 6px;
  padding: 0 0 14px 36px;
}

.desktop-organization-member {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 58px;
  border-radius: 12px;
  background: transparent;
  color: var(--text);
  padding: 7px 10px;
  text-align: left;
}

.desktop-organization-member:hover { background: var(--surface-2); }
.desktop-organization-member:active { transform: none; }
.desktop-organization-member:focus,
.desktop-organization-member:focus-visible { outline: none; box-shadow: none; }
.desktop-organization-member > span:last-child { display: grid; grid-template-rows: auto auto; gap: 3px; min-width: 0; }
.desktop-organization-member strong,
.desktop-organization-member small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.desktop-organization-member small { color: var(--muted); }

.desktop-organization-member .mobile-profile-avatar,
.desktop-profile-summary .mobile-profile-avatar,
.desktop-profile-photo-card .mobile-profile-avatar {
  display: grid;
  place-items: center;
  overflow: hidden;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--accent);
  font-size: 16px;
  font-weight: 900;
}

.desktop-organization-member .mobile-profile-avatar img,
.desktop-profile-summary .mobile-profile-avatar img,
.desktop-profile-photo-card .mobile-profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.desktop-profile-card {
  display: grid;
  gap: 20px;
  width: min(560px, calc(100vw - 64px));
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--surface);
  padding: 26px;
  box-shadow: 0 28px 80px rgba(0, 0, 0, .55);
}

.desktop-profile-summary {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}

.desktop-profile-summary .mobile-profile-avatar { width: 62px; height: 62px; flex-basis: 62px; }
.desktop-profile-summary > span:last-child { display: grid; gap: 4px; }
.desktop-profile-summary small { color: var(--muted); }

#desktopProfileContent { display: grid; gap: 18px; }
.desktop-profile-photo-card { display: grid; justify-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface-2); padding: 22px; }
.desktop-profile-photo-card .mobile-profile-avatar { width: 94px; height: 94px; flex-basis: 94px; font-size: 30px; }
.desktop-profile-photo-card > div { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.desktop-profile-photo-card label,
.desktop-profile-photo-card button { display: grid; place-items: center; min-height: 42px; border: 0; border-radius: 10px; background: var(--surface-3); color: var(--text); padding: 0 14px; cursor: pointer; font-weight: 850; }
.desktop-profile-photo-card button.primary { background: var(--accent); color: #061007; }
.desktop-profile-photo-card button.danger { color: var(--danger); }
.desktop-profile-photo-card input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.desktop-profile-info { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; }
.desktop-profile-info > div,
.desktop-profile-contact { display: grid; grid-template-columns: 110px minmax(0, 1fr); align-items: center; min-height: 52px; border-bottom: 1px solid var(--line); padding: 0 16px; }
.desktop-profile-info > div:last-child { border-bottom: 0; }
.desktop-profile-info b { overflow: hidden; color: var(--near); text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.desktop-profile-contact { border: 1px solid var(--line); border-radius: 16px; font-weight: 800; }
.desktop-profile-contact input { min-width: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); text-align: right; }
.desktop-profile-save { width: 100%; min-height: 48px; }

.main {
  min-width: 0;
  padding: 24px;
}

.topbar,
.section-head,
.task-row,
.calendar-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

.topbar {
  margin-bottom: 18px;
}

.eyebrow {
  margin: 0 0 6px;
}

h1,
h2,
h3,
p {
  margin: 0;
}

h1,
h2 {
  font-size: 24px;
  font-weight: 700;
}

h3 {
  font-size: 16px;
  font-weight: 700;
}

.toolbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.pill {
  border-radius: 9999px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.primary {
  background: var(--accent);
  color: #000000;
}

.ghost {
  background: var(--surface-2);
  color: var(--text);
}

.danger-pill {
  background: #3a171b;
  color: var(--danger);
}

.event-detail-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}

.circle {
  width: 40px;
  height: 40px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 24px;
  font-weight: 700;
}

.view {
  display: none;
}

.view.active {
  display: block;
  animation: viewIn 240ms ease-out;
}

@keyframes viewIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-panel,
.panel,
.kpi {
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.hero-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 170px;
  margin-bottom: 16px;
  padding: 24px;
  background: linear-gradient(135deg, #272727, #181818 65%);
}

.hero-panel p:last-child {
  margin-top: 10px;
  color: var(--muted);
  font-size: 16px;
}

.play-button {
  width: 72px;
  height: 72px;
  background: var(--accent);
  color: #000000;
  font-size: 26px;
  box-shadow: var(--shadow);
}

.kpi-grid,
.overview-grid,
.summary-grid {
  display: grid;
  gap: 14px;
}

.kpi-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 16px;
}

.overview-grid {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.8fr);
}

.summary-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 16px;
}

.kpi,
.panel {
  padding: 18px;
}

.kpi span {
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}

.kpi strong {
  display: block;
  margin: 10px 0 4px;
  font-size: 34px;
  font-weight: 700;
}

.status-mix,
.compact-list,
.task-list {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.status-row {
  display: grid;
  grid-template-columns: 92px 1fr 42px;
  gap: 12px;
  align-items: center;
  color: var(--near);
  font-size: 14px;
}

.bar {
  height: 10px;
  overflow: hidden;
  border-radius: 9999px;
  background: var(--surface-2);
}

.bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}

.compact-item {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  border: 0;
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text);
  padding: 12px;
  text-align: left;
}

.date-chip,
.badge,
.value-chip {
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 700;
}

.date-chip {
  background: var(--surface-3);
  color: var(--accent);
  padding: 8px 10px;
  text-align: center;
}

.badge,
.value-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  padding: 6px 10px;
  background: var(--surface-3);
  color: var(--near);
  white-space: nowrap;
}

.value-chip.blue {
  background: #315f91;
  color: #ffffff;
}

.value-chip.red {
  background: #954f4b;
  color: #ffffff;
}

.badge.ok {
  color: var(--accent);
}

.badge.warn {
  color: var(--warn);
}

.badge.danger {
  color: var(--danger);
}

.project-board {
  padding: 0;
  overflow: hidden;
}

.project-board .section-head {
  padding: 14px 16px;
}

.project-tools {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 8px;
  align-items: start;
  padding: 0 16px 12px;
  position: relative;
}

.section-head-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.icon-pill {
  border-radius: 9999px;
  background: var(--surface-2);
  color: var(--text);
  padding: 11px 14px;
  font-size: 13px;
  font-weight: 800;
  box-shadow: var(--inset);
  white-space: nowrap;
}

.project-filter-panel {
  position: absolute;
  right: 16px;
  top: 48px;
  z-index: 20;
  display: none;
  width: min(520px, calc(100vw - 64px));
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  border-radius: 8px;
  background: #282828;
  padding: 12px;
  box-shadow: var(--shadow);
}

.project-filter-panel.open {
  display: grid;
  animation: popIn 160ms ease-out;
}

.project-head,
.project-row {
  display: grid;
  grid-template-columns: minmax(190px, 1.45fr) minmax(110px, .7fr) minmax(92px, .55fr) minmax(110px, .7fr) minmax(94px, .58fr) minmax(72px, .42fr) minmax(118px, .68fr) minmax(118px, .68fr);
  gap: 14px;
  align-items: center;
  min-width: 1080px;
}

.project-head {
  border-top: 1px solid #2d2d2d;
  border-bottom: 1px solid #2d2d2d;
  color: var(--muted);
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.project-head button {
  width: fit-content;
  border-radius: 9999px;
  background: transparent;
  color: var(--muted);
  padding: 4px 0;
  font-size: 13px;
  font-weight: 800;
  text-align: left;
}

.project-head button.active {
  color: var(--accent);
}

.project-head button.active::after {
  content: " ↑";
}

.project-head button.active[data-direction="desc"]::after {
  content: " ↓";
}

.work-head,
.work-row {
  grid-template-columns: minmax(170px, 1.25fr) minmax(120px, 0.75fr) minmax(96px, 0.55fr) minmax(110px, 0.65fr) minmax(96px, 0.55fr) minmax(78px, 0.45fr) minmax(108px, 0.6fr) minmax(108px, 0.6fr);
  gap: 8px;
  min-width: 1040px;
}

.project-list {
  overflow: auto;
}

.project-row {
  width: 100%;
  border-bottom: 1px solid #2d2d2d;
  background: transparent;
  color: var(--text);
  padding: 11px 16px;
  text-align: left;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  cursor: pointer;
  transition: background 160ms ease, transform 160ms ease;
}

.project-title-cell {
  color: var(--text);
  font-size: 16px;
  font-weight: 800;
}

.project-row span:not(.value-chip) {
  color: var(--near);
}

.project-row .value-chip {
  padding: 5px 8px;
  font-size: 11px;
}

.project-row .custom-select.compact,
.project-row .date-button.compact {
  width: fit-content;
  max-width: 100%;
  min-height: 34px;
  padding: 6px 10px;
  font-size: 14px;
}

.project-row .custom-select.compact i {
  display: none;
}

.project-row .custom-select.compact.outline-cell {
  background: var(--surface);
  color: #ffffff;
  box-shadow: 0 0 0 1px #ffffff inset;
}

.project-row .date-button.compact {
  color: var(--text);
  font-size: 16px;
  font-weight: 900;
}

.project-row .date-button.compact i {
  display: none;
}

.custom-select.compact.stage-0 {
  background: #8f3b43;
  color: #ffffff;
}

.custom-select.compact.stage-1 {
  background: #9b5539;
  color: #ffffff;
}

.custom-select.compact.stage-2 {
  background: #9a7434;
  color: #ffffff;
}

.custom-select.compact.stage-3 {
  background: #6f7f35;
  color: #ffffff;
}

.custom-select.compact.stage-4 {
  background: #3f7a51;
  color: #ffffff;
}

.custom-select.compact.stage-5 {
  background: #1f8f4a;
  color: #ffffff;
}

.project-row:hover {
  background: var(--surface-2);
  transform: translateX(2px);
}

.inline-title {
  border-radius: 6px;
  background: transparent;
  box-shadow: none;
  color: var(--text);
  padding: 6px 0;
  font-size: 16px;
  font-weight: 900;
}

.inline-title:focus {
  background: var(--surface-2);
  padding-inline: 8px;
}

.mini-toggle {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  color: var(--near);
  font-size: 13px;
  font-weight: 800;
}

.mini-toggle input {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}

.delete-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--danger);
  font-weight: 700;
}

.task-form {
  display: grid;
  grid-template-columns: 1fr 1.4fr 0.8fr 0.9fr auto;
  gap: 10px;
  margin-top: 16px;
}

.task-overview-shell {
  display: grid;
  gap: 18px;
}

.task-overview-hero {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  justify-content: space-between;
}

.task-overview-hero h2 {
  font-size: 34px;
  font-weight: 900;
}

.task-overview-hero p:last-child {
  margin-top: 8px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 700;
}

.overview-hide-done {
  border: 1px solid #333940;
  background: rgba(255, 255, 255, 0.03);
}

.task-overview-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.task-stat {
  min-height: 104px;
  border: 1px solid #30343a;
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(28, 32, 36, 0.94), rgba(15, 17, 20, 0.98));
  padding: 16px;
}

.task-stat span,
.task-overview-group h3 span {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-right: 8px;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 900;
}

.task-stat strong {
  color: var(--near);
  font-size: 14px;
  font-weight: 900;
}

.task-stat b {
  display: block;
  margin-top: 12px;
  color: var(--text);
  font-size: 34px;
  font-weight: 900;
}

.task-stat.overdue span,
.task-overview-group.overdue h3 span {
  background: rgba(243, 114, 127, 0.16);
  color: var(--danger);
}

.task-stat.today span,
.task-overview-group.today h3 span {
  background: rgba(255, 164, 43, 0.15);
  color: var(--warn);
}

.task-stat.three span,
.task-overview-group.three h3 span {
  background: rgba(255, 214, 10, 0.15);
  color: #ffd60a;
}

.task-stat.week span,
.task-overview-group.week h3 span,
.task-stat.total span {
  background: rgba(30, 215, 96, 0.14);
  color: var(--accent);
}

.task-overview-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 380px);
  gap: 12px;
  align-items: center;
}

.task-overview-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.task-overview-selects {
  display: grid;
  grid-template-columns: minmax(180px, 260px) auto;
  gap: 10px;
  align-items: center;
}

.task-overview-selects select,
.task-filter-trigger {
  min-height: 46px;
  border: 1px solid #333940;
  border-radius: 9999px;
  background: linear-gradient(145deg, #1a1d21, #121416);
  color: var(--text);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
  font: inherit;
  font-size: 14px;
  font-weight: 900;
}

.task-overview-selects select {
  appearance: none;
  background-image: linear-gradient(145deg, #1a1d21, #121416), linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: 0 0, calc(100% - 18px) 19px, calc(100% - 12px) 19px;
  background-size: auto, 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding: 0 34px 0 16px;
}

.task-overview-selects select:focus,
.task-filter-trigger:focus {
  outline: 0;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(30, 215, 96, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.task-filter-trigger {
  width: fit-content;
  min-width: 104px;
  padding: 0 18px;
  text-align: left;
}

.task-filter-trigger.active {
  border-color: rgba(30, 215, 96, 0.5);
  background: rgba(30, 215, 96, 0.13);
  color: var(--accent);
}

.task-filter-modal {
  z-index: 76;
  align-items: flex-end;
  background: rgba(0, 0, 0, 0.62);
}

.task-filter-card {
  width: min(980px, 100%);
  max-height: min(720px, calc(100vh - 36px));
  border: 1px solid #30343a;
  background: linear-gradient(145deg, #1f2227, #151719);
}

.task-filter-head {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

.task-filter-head h3 {
  margin-top: 4px;
  font-size: 22px;
  font-weight: 900;
}

.task-filter-options {
  display: grid;
  gap: 22px;
  padding-top: 6px;
}

.task-filter-summary {
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 800;
}

.task-filter-section {
  display: grid;
  gap: 10px;
}

.task-filter-section h4 {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.task-filter-chip-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.task-filter-chip {
  min-height: 38px;
  border: 1px solid #3a3f46;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--near);
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 900;
}

.task-filter-chip.active,
.task-filter-chip:hover {
  border-color: var(--accent);
  background: rgba(30, 215, 96, 0.14);
  color: var(--accent);
}

.task-overview-list {
  display: grid;
  gap: 12px;
}

.task-overview-group {
  overflow: hidden;
  border: 1px solid #30343a;
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(28, 32, 36, 0.92), rgba(15, 17, 20, 0.98));
}

.task-overview-group h3 {
  padding: 16px 18px;
  color: var(--near);
  font-size: 16px;
  font-weight: 900;
}

.task-overview-group h3 small {
  color: var(--muted);
  font-size: 14px;
}

.task-overview-items {
  display: grid;
}

.overview-task-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding: 14px 18px;
  cursor: pointer;
}

.overview-task-row:hover {
  background: rgba(255, 255, 255, 0.025);
}

.overview-task-row h4 {
  margin: 0 0 5px;
  color: var(--text);
  font-size: 16px;
  font-weight: 900;
}

.overview-task-row small {
  color: var(--near);
  font-size: 13px;
  font-weight: 700;
}

.overview-task-meta {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 10px;
  align-items: center;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.overview-task-meta b {
  color: var(--near);
}

.overview-due {
  min-width: 78px;
  border-radius: 8px;
  padding: 8px 10px;
  text-align: center;
  font-size: 12px;
  font-weight: 900;
}

.overview-due.overdue {
  background: rgba(243, 114, 127, 0.18);
  color: var(--danger);
}

.overview-due.today {
  background: rgba(255, 164, 43, 0.16);
  color: var(--warn);
}

.overview-due.upcoming,
.overview-due.done {
  background: rgba(30, 215, 96, 0.13);
  color: var(--accent);
}

.overview-due.none {
  background: rgba(255, 255, 255, 0.08);
  color: var(--near);
}

.revision-form {
  display: grid;
  grid-template-columns: 1.1fr 1.5fr 0.8fr 0.8fr 0.8fr 0.9fr auto;
  gap: 10px;
  margin-top: 16px;
}

.task-row {
  border-radius: 8px;
  background: var(--surface-2);
  padding: 12px;
}

.task-row.is-highlighted {
  background: rgba(30, 215, 96, 0.14);
  box-shadow: inset 0 0 0 2px var(--accent), 0 0 0 1px rgba(30, 215, 96, 0.18);
  animation: taskPulse 900ms ease-in-out 2;
}

@keyframes taskPulse {
  50% {
    transform: translateX(3px);
  }
}

.revision-list {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.revision-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  border-radius: 8px;
  background: var(--surface-2);
  padding: 14px;
}

.revision-card h3 {
  margin-bottom: 6px;
}

.revision-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.revision-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.task-main {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
}

.task-main input {
  width: 20px;
  height: 20px;
  accent-color: var(--accent);
  box-shadow: none;
}

.task-main small {
  display: block;
  margin-top: 4px;
}

.custom-select {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 44px;
  border-radius: 9999px;
  background: var(--surface-2);
  color: var(--text);
  padding: 10px 14px;
  box-shadow: var(--inset);
  text-align: left;
}

.date-button,
.time-button {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 44px;
  border-radius: 9999px;
  background: var(--surface-2);
  color: var(--text);
  padding: 10px 14px;
  box-shadow: var(--inset);
  text-align: left;
}

.date-button.compact {
  width: auto;
  min-height: 34px;
  border-radius: 6px;
  background: #252525;
  padding: 6px 10px;
  box-shadow: none;
  color: var(--near);
  font-size: 14px;
  font-weight: 700;
}

.date-button i {
  color: var(--muted);
  font-style: normal;
}

.custom-select.compact {
  width: auto;
  min-height: 34px;
  border-radius: 6px;
  background: #315f91;
  padding: 6px 10px;
  box-shadow: none;
  font-size: 14px;
  font-weight: 700;
}

.custom-select i {
  color: var(--muted);
  font-style: normal;
}

.multi-select span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.custom-select:disabled,
.date-button:disabled,
.time-button:disabled,
.owner-chip:disabled {
  transform: none;
}

.dropdown-layer {
  position: fixed;
  z-index: 40;
  display: none;
  max-height: 280px;
  overflow: auto;
  border-radius: 8px;
  background: #282828;
  padding: 6px;
  box-shadow: var(--shadow);
}

.dropdown-layer.open {
  display: grid;
  gap: 2px;
  animation: popIn 160ms ease-out;
}

.dropdown-option {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  padding: 10px 12px;
  text-align: left;
}

.dropdown-option:hover,
.dropdown-option.selected {
  background: #3a3a3a;
}

.dropdown-option i {
  color: var(--accent);
  font-style: normal;
}

.dropdown-empty {
  color: var(--muted);
  padding: 12px;
  font-size: 13px;
  font-weight: 700;
}

.date-picker-layer,
.time-picker-layer {
  position: fixed;
  z-index: 45;
  display: none;
  width: min(320px, calc(100vw - 16px));
}

.date-picker-layer.open,
.time-picker-layer.open {
  display: block;
  animation: popIn 160ms ease-out;
}

.date-picker-card {
  border-radius: 8px;
  background: #282828;
  padding: 16px;
  box-shadow: var(--shadow);
}

.date-picker-top,
.date-picker-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.date-picker-top strong {
  font-size: 16px;
  font-weight: 800;
}

.date-picker-top div {
  display: flex;
  gap: 6px;
}

.date-picker-top button,
.date-picker-bottom button {
  border-radius: 9999px;
  background: var(--surface-2);
  color: var(--text);
  font-weight: 800;
}

.date-picker-top button {
  width: 36px;
  height: 36px;
  font-size: 22px;
}

.date-picker-weekdays,
.date-picker-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.date-picker-weekdays {
  margin: 16px 0 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.date-picker-days button {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  font-size: 14px;
  font-weight: 800;
}

.date-picker-days button:hover {
  background: #3a3a3a;
}

.date-picker-days button.muted {
  color: #707070;
}

.date-picker-days button.today {
  box-shadow: 0 0 0 1px var(--muted) inset;
}

.date-picker-days button.selected {
  background: var(--accent);
  color: #000000;
  box-shadow: 0 0 0 2px #000000, 0 0 0 4px var(--accent);
}

.date-picker-bottom {
  margin-top: 14px;
}

.date-picker-bottom button {
  padding: 8px 12px;
  color: var(--accent);
}

.time-picker-card {
  display: grid;
  grid-template-columns: 0.9fr 1fr 1fr;
  gap: 8px;
  max-height: 320px;
  border-radius: 8px;
  background: #282828;
  padding: 10px;
  box-shadow: var(--shadow);
}

.time-picker-column {
  display: grid;
  gap: 4px;
  max-height: 300px;
  overflow: auto;
  padding-right: 2px;
}

.time-picker-column.period {
  align-content: start;
}

.time-picker-column button {
  min-height: 34px;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font-size: 14px;
  font-weight: 800;
}

.time-picker-column button:hover,
.time-picker-column button.selected {
  background: var(--accent);
  color: #000000;
}


.calendar-board {
  display: grid;
  gap: 14px;
}


.calendar-main {
  min-width: 0;
}

.calendar-weekdays,
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.calendar-filter-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.calendar-filter-checks label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--near);
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 900;
}

.calendar-filter-checks input {
  width: 15px;
  height: 15px;
  accent-color: var(--accent);
}

.calendar-weekdays {
  margin: 18px 0 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.calendar-weekdays span:first-child {
  color: #ff7373;
}

.calendar-day {
  min-height: 126px;
  width: 100%;
  border: 0;
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text);
  padding: 10px;
  text-align: left;
  transition: background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.calendar-day:hover {
  background: #2a2a2a;
}

.calendar-day.is-drop-target {
  background: #193921;
  box-shadow: 0 0 0 2px var(--accent) inset, var(--soft-shadow);
  transform: translateY(-2px);
}

.calendar-day.is-muted {
  opacity: 0.45;
}

.calendar-day.is-today {
  box-shadow: 0 0 0 2px var(--accent) inset;
}

.day-number {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  color: var(--near);
  font-size: 12px;
  font-weight: 700;
}

.day-number b {
  font: inherit;
}

.day-number em {
  overflow: hidden;
  color: #ff7373;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-day.is-sunday .day-number b,
.calendar-day.is-holiday .day-number b {
  color: #ff7373;
}

.calendar-event {
  display: flex;
  gap: 5px;
  align-items: center;
  overflow: hidden;
  width: 100%;
  border: 0;
  margin-top: 5px;
  border-radius: 6px;
  background: #0f3d24;
  color: var(--text);
  padding: 6px 8px;
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: grab;
  text-align: left;
  transition: transform 140ms ease, opacity 140ms ease, box-shadow 140ms ease;
}

.calendar-event span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-event:active {
  cursor: grabbing;
}

.calendar-event:hover {
  transform: translateX(2px);
  box-shadow: rgba(0, 0, 0, 0.3) 0 4px 10px;
}

.calendar-event.is-dragging {
  opacity: 0.45;
  transform: scale(0.98);
}

.calendar-event.start {
  background: #14375f;
}

.calendar-event.custom {
  background: #43316f;
}

.calendar-event.staff {
  background: #6d4fd8;
}

.calendar-event.training {
  background: #7a5a1d;
}

.calendar-event.lesson {
  background: #5b3f8f;
}

.calendar-event.staff {
  background: #6d4fd8;
}

.calendar-event.is-timed {
  border-left: 5px solid #1ed760;
  background: #eeeeee;
  color: #181818;
  padding: 4px 7px;
}

.calendar-event.is-timed.start {
  border-left-color: #539df5;
}

.calendar-event.is-timed.custom {
  border-left-color: #8f75ff;
}

.calendar-event.is-timed.staff {
  border-left-color: #9b7cff;
}

.calendar-event.is-timed.training {
  border-left-color: #ffa42b;
}

.calendar-event.is-timed.lesson {
  border-left-color: #a78bfa;
}


.calendar-event.project,
.calendar-event.projectTask {
  border-left: 0;
  background: #1457a8;
}

.calendar-event.work,
.calendar-event.workTask {
  border-left: 0;
  background: #0f6b3a;
}

.calendar-event.schedule {
  position: relative;
  border-left: 0;
  background: #101214;
  padding-left: 18px;
}

.calendar-event.schedule::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffd60a;
  transform: translateY(-50%);
}

.calendar-event.is-timed.project,
.calendar-event.is-timed.projectTask {
  border-left: 5px solid #539df5;
  background: #101214;
  color: var(--text);
}

.calendar-event.is-timed.work,
.calendar-event.is-timed.workTask {
  border-left: 5px solid var(--accent);
  background: #101214;
  color: var(--text);
}

.calendar-event.is-timed.schedule {
  border-left: 0;
  background: #101214;
  color: var(--text);
}

.calendar-event.is-timed.staff {
  border-left: 5px solid #9b7cff;
  background: #101214;
  color: var(--text);
}

.event-time {
  flex: 0 0 auto;
  color: inherit;
  font-weight: 900;
}

.staff-calendar-detail {
  display: none;
  position: sticky;
  top: 24px;
  min-height: 360px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(25, 29, 34, 0.96), rgba(18, 20, 23, 0.96));
  padding: 20px;
  box-shadow: var(--soft-shadow);
}

.staff-calendar-detail {
  display: none !important;
}

.staff-detail-title {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin: 18px 0 20px;
}

.staff-detail-title h3 {
  margin: 0;
  font-size: 18px;
}

.staff-detail-title em {
  border-radius: 9999px;
  background: rgba(30, 215, 96, 0.14);
  color: var(--accent);
  padding: 5px 9px;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.staff-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--accent);
}

.staff-dot.training {
  background: #ffa42b;
}

.staff-dot.lesson {
  background: #a78bfa;
}

.staff-detail-list {
  display: grid;
  gap: 0;
}

.staff-detail-list div {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}

.staff-detail-list span {
  color: var(--muted);
  font-weight: 800;
}

.staff-detail-list strong {
  color: var(--text);
  font-weight: 800;
  line-height: 1.5;
}

.staff-detail-actions {
  display: grid;
  gap: 10px;
  margin-top: 22px;
}

.staff-empty-panel {
  display: grid;
  gap: 8px;
  margin-top: 20px;
  color: var(--muted);
}

.modal-shell {
  position: fixed;
  inset: 0;
  z-index: 35;
  display: none;
  align-items: flex-start;
  justify-content: center;
  background: rgba(0, 0, 0, 0.72);
  padding: 18px;
  overflow: auto;
}

.modal-shell.open {
  display: flex;
  animation: fadeIn 180ms ease-out;
}

.modal-card {
  display: grid;
  gap: 16px;
  width: min(520px, 100%);
  max-height: calc(100vh - 36px);
  overflow: auto;
  border-radius: 8px;
  background: #1d1d1d;
  padding: 22px;
  box-shadow: var(--shadow);
  animation: modalIn 220ms ease-out;
}

.modal-card.wide-modal {
  width: min(760px, 100%);
}

.confirm-modal {
  z-index: 80;
  align-items: center;
  background: rgba(0, 0, 0, 0.78);
}

.confirm-card {
  grid-template-columns: auto 1fr;
  align-items: start;
  width: min(430px, 100%);
  border: 1px solid #30343a;
  background: linear-gradient(145deg, #1f2227, #151719);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.5);
}

.confirm-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: #3a171b;
  color: var(--danger);
  font-size: 24px;
  font-weight: 900;
}

.confirm-card h3 {
  margin: 2px 0 8px;
  color: var(--text);
  font-size: 22px;
  font-weight: 900;
}

.confirm-card p {
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}

.confirm-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding-top: 4px;
}

.confirm-actions .pill {
  min-width: 88px;
}

.modal-card label {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.modal-card .check-line {
  display: flex;
  width: fit-content;
  gap: 10px;
  align-items: center;
  border-radius: 9999px;
  background: var(--surface-2);
  color: var(--text);
  padding: 10px 14px;
}

.modal-card .check-line input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}

.time-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.time-row input:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.event-detail,
.training-list {
  display: grid;
  gap: 10px;
}

.event-detail-row,
.training-card {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  border-radius: 8px;
  background: var(--surface-2);
  padding: 12px 14px;
}

.event-detail-row span,
.event-memo span,
.training-card span,
.training-card small {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.event-detail-row strong,
.training-card strong {
  color: var(--text);
  font-size: 15px;
  font-weight: 800;
}

.event-memo {
  display: grid;
  gap: 8px;
  border-radius: 8px;
  background: var(--surface-2);
  padding: 14px;
}

.event-memo p {
  margin: 0;
  color: var(--near);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.55;
  white-space: pre-wrap;
}

.event-detail-staff {
  display: grid;
  gap: 10px;
  border-radius: 8px;
  background: var(--surface-2);
  padding: 14px;
}

.event-detail-staff-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.event-detail-staff-head span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.event-detail-staff-table-head,
.event-detail-staff-row {
  display: grid;
  grid-template-columns: 24px minmax(110px, 1fr) minmax(110px, 1fr) minmax(120px, 1fr) 44px;
  gap: 8px;
  align-items: center;
}

.event-detail-staff-table-head {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  padding: 0 8px;
}

.event-detail-staff-row {
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
  padding: 8px;
}

.event-detail-staff-row > span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
  text-align: center;
}

.event-detail-staff-row input {
  width: 100%;
  min-height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 8px;
  background: #15191d;
  color: var(--text);
  padding: 0 10px;
  font-size: 13px;
  font-weight: 800;
}

.training-card > div {
  display: grid;
  gap: 5px;
}

.detail-shell {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: none;
  overflow: auto;
  background: rgba(0, 0, 0, 0.72);
}

.detail-shell.open {
  display: block;
  animation: fadeIn 180ms ease-out;
}

.detail-page {
  width: min(1040px, calc(100vw - 32px));
  min-height: 100vh;
  margin: 0 auto;
  background: #1d1d1d;
  padding: 28px 44px 72px;
  box-shadow: var(--shadow);
  animation: slideUp 240ms ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes popIn {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes modalIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.toast {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 80;
  border-radius: 9999px;
  background: var(--surface-3);
  color: var(--text);
  padding: 12px 16px;
  box-shadow: var(--shadow);
  font-size: 14px;
  font-weight: 800;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

.detail-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.detail-actions {
  justify-content: flex-end;
}

.detail-title {
  border-radius: 0;
  background: transparent;
  padding: 6px 0 16px;
  box-shadow: none;
  font-size: clamp(30px, 4.8vw, 44px);
  font-weight: 800;
  line-height: 1.08;
}

.detail-title:focus {
  outline: 0;
}

.detail-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 4px;
  border-radius: 9999px;
  background: #242424;
  padding: 4px;
  margin: 4px 0 22px;
  box-shadow: var(--soft-shadow);
}

.detail-tab {
  min-height: 42px;
  border-radius: 9999px;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
}

.detail-tab.active {
  background: var(--surface-3);
  color: var(--text);
  box-shadow: var(--soft-shadow);
}

.detail-tab-panel {
  display: none;
}

.detail-tab-panel.active {
  display: block;
  animation: viewIn 180ms ease-out;
}

.detail-properties {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 22px;
  margin-top: 10px;
}

.property-row {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.property-break {
  grid-column: 1 / -1;
  height: 0;
}

.project-status-with-broadcast {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
  min-width: 0;
}

.project-broadcast-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  border-radius: 9px;
  background: rgba(255, 255, 255, .06);
  color: var(--near);
  padding: 0 10px;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

#projectDetail .project-broadcast-toggle input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 20px;
  width: 20px;
  min-width: 20px;
  max-width: 20px;
  height: 20px;
  min-height: 20px;
  max-height: 20px;
  margin: 0;
  padding: 0;
  border: 1.5px solid rgba(255, 255, 255, .55);
  border-radius: 5px;
  background: rgba(0, 0, 0, .35);
  box-shadow: none;
}

#projectDetail .project-broadcast-toggle input[type="checkbox"]::after {
  border-color: #061007;
}

#projectDetail .project-broadcast-toggle input[type="checkbox"]:checked {
  border-color: var(--accent);
  background-color: var(--accent);
}

#projectDetail .project-broadcast-mobile-row {
  display: none;
}

.property-label {
  display: flex;
  gap: 8px;
  align-items: center;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}

.property-label span {
  width: 22px;
  color: var(--muted);
  text-align: center;
}

.property-value {
  min-width: 0;
}

.date-field-control {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.calendar-toggle {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  border-radius: 9999px;
  background: var(--surface-2);
  color: var(--muted);
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.calendar-toggle input {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  box-shadow: none;
}

.calendar-toggle:has(input:checked) {
  color: var(--accent);
}

.notion-input {
  max-width: 280px;
  border-radius: 6px;
  background: transparent;
  padding: 5px 0;
  box-shadow: none;
  font-size: 15px;
  font-weight: 700;
}

.notion-input:focus {
  background: var(--surface-2);
  padding: 6px 10px;
  outline: 0;
}

.money-input {
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.multi-picker {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.owner-chip {
  border-radius: 9999px;
  background: var(--surface-3);
  color: var(--near);
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 800;
}

.owner-chip.selected {
  background: #315f91;
  color: #ffffff;
}

.extra-toggle {
  margin: 18px 0 22px;
  background: transparent;
  color: #8f8f8f;
  font-size: 14px;
  font-weight: 700;
}

.detail-memo {
  min-height: 160px;
  margin-top: 10px;
  background: transparent;
  box-shadow: none;
  color: var(--text);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.6;
  white-space: pre-wrap;
}

.detail-memo:focus {
  outline: 0;
}

.detail-memo:empty::before {
  content: attr(data-placeholder);
  color: #8f8f8f;
  font-weight: 800;
}

.detail-memo.readonly {
  color: #8f8f8f;
}

.detail-memo h1,
.detail-memo h2,
.detail-memo h3,
.detail-memo h4 {
  margin: 10px 0 6px;
  color: var(--text);
  line-height: 1.25;
}

.detail-memo h1 { font-size: 30px; }
.detail-memo h2 { font-size: 25px; }
.detail-memo h3 { font-size: 21px; }
.detail-memo h4 { font-size: 18px; }

.detail-memo strong,
.detail-memo b {
  color: var(--text);
  font-weight: 950;
}

.detail-memo em,
.detail-memo i {
  font-style: italic;
}

.detail-memo u {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.memo-toolbar {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 16px;
  border-radius: 8px;
  background: #242424;
  padding: 8px;
  box-shadow: var(--soft-shadow);
}

.memo-toolbar button {
  min-height: 34px;
  border-radius: 6px;
  background: transparent;
  color: var(--near);
  padding: 6px 9px;
  font-size: 13px;
  font-weight: 900;
}

.memo-toolbar button:hover {
  background: #333333;
  color: var(--text);
}

.memo-toolbar button.active {
  background: #3a3a3a;
  color: var(--text);
  box-shadow: 0 0 0 1px #5f5f5f inset;
}

.memo-toolbar button[data-memo-format="bold"] {
  font-size: 16px;
}

.memo-toolbar button[data-memo-format="italic"] {
  font-size: 16px;
  font-style: italic;
}

.memo-toolbar button[data-memo-format="underline"] {
  font-size: 16px;
  text-decoration: underline;
}

.records-section {
  margin-top: 0;
  border-top: 0;
  padding-top: 0;
}

.records-head {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 18px;
}

.records-head span {
  color: #6b65ff;
  font-size: 22px;
  font-weight: 800;
}

.records-head h2 {
  font-size: 22px;
}

.record-composer {
  display: grid;
  gap: 12px;
  border: 1px solid #333333;
  border-radius: 12px;
  background: #202020;
  padding: 14px;
}

.project-revision-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.project-task-composer {
  display: grid;
  gap: 0;
}

.task-add-card {
  overflow: hidden;
  border-color: #2f3338;
  background: linear-gradient(145deg, rgba(29, 33, 38, 0.96), rgba(13, 15, 18, 0.98));
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.24), inset 0 0 0 1px rgba(255, 255, 255, 0.03);
  padding: 0;
}

.task-add-card.is-collapsed .project-task-composer {
  display: none;
}

.task-add-card.is-collapsed .task-add-head {
  min-height: 76px;
}

.task-add-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  cursor: pointer;
}

.task-add-head:hover {
  background: rgba(255, 255, 255, 0.025);
}

.task-add-title {
  display: flex;
  gap: 12px;
  align-items: center;
}

.task-add-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, #7c4dff, #a782ff);
  color: #ffffff;
  font-size: 18px;
  font-weight: 900;
  box-shadow: 0 10px 24px rgba(124, 77, 255, 0.24);
}

.task-add-title h3 {
  margin: 0;
  color: var(--text);
  font-size: 20px;
  font-weight: 900;
}

.task-add-title small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.project-task-composer.task-composer-expanded {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
  padding: 20px;
}

.task-field {
  display: grid;
  gap: 9px;
  min-width: 0;
}

.task-field > span {
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0;
}

.task-field > span b {
  color: var(--danger);
}

.task-title-field {
  padding-bottom: 18px;
}

.task-title-input {
  width: 100%;
  min-width: 0;
  min-height: 54px;
  border-radius: 8px;
}

.task-form-grid {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(260px, 1fr);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.task-form-column {
  display: grid;
  gap: 18px;
  padding: 18px 20px 18px 0;
}

.task-form-column + .task-form-column {
  border-left: 1px solid rgba(255, 255, 255, 0.06);
  padding: 18px 0 18px 20px;
}

.task-type-chip-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  min-height: 44px;
}

.task-type-chip {
  min-height: 38px;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: var(--surface-2);
  color: var(--near);
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 900;
}

.task-type-chip.active,
.task-type-chip:hover {
  box-shadow: inset 0 0 0 1px currentColor;
}

.task-type-chip.type-0 {
  background: rgba(126, 87, 255, 0.16);
  color: #a98dff;
}

.task-type-chip.type-1 {
  background: rgba(43, 121, 255, 0.16);
  color: #6aa4ff;
}

.task-type-chip.type-2 {
  background: rgba(30, 215, 96, 0.14);
  color: var(--accent);
}

.task-type-chip.type-3 {
  background: rgba(255, 112, 30, 0.14);
  color: #ff8a3d;
}

.task-type-chip.type-4 {
  background: rgba(255, 255, 255, 0.08);
  color: var(--near);
}

.task-time-range {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.task-time-range > span {
  color: var(--near);
  font-size: 16px;
  font-weight: 900;
}

.task-time-field .time-button,
.task-time-range .time-button {
  width: 100%;
}

.task-time-field.is-disabled {
  opacity: 1;
}

.task-time-field.is-disabled span {
  color: var(--muted);
}

.task-time-field.is-disabled .time-button,
.task-time-field .time-button:disabled {
  border-style: dashed;
  background: #111;
  color: #595959;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  cursor: not-allowed;
}

.task-option-row {
  display: flex;
  gap: 26px;
  align-items: center;
  flex-wrap: wrap;
  min-height: 64px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.task-calendar-toggle {
  background: rgba(30, 215, 96, 0.12);
}

.task-detail-field {
  padding: 18px 0 0;
}

.task-detail-field textarea {
  min-height: 110px;
  resize: vertical;
}

.task-form-footer {
  display: flex;
  justify-content: flex-end;
  padding-top: 20px;
}

.task-form-footer .pill.primary {
  min-height: 48px;
  padding-inline: 28px;
}

.task-sort-tools {
  grid-template-columns: 1fr auto auto;
}

.task-detail-text {
  margin: 4px 0;
  color: var(--near);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
  white-space: pre-wrap;
}

.task-type-badge {
  display: inline-flex;
  align-items: center;
  margin-right: 8px;
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 900;
  vertical-align: middle;
}

.task-type-badge.type-0 {
  background: rgba(126, 87, 255, 0.18);
  color: #a98dff;
}

.task-type-badge.type-1 {
  background: rgba(43, 121, 255, 0.18);
  color: #6aa4ff;
}

.task-type-badge.type-2 {
  background: rgba(30, 215, 96, 0.16);
  color: var(--accent);
}

.task-type-badge.type-3 {
  background: rgba(255, 112, 30, 0.16);
  color: #ff8a3d;
}

.task-type-badge.type-4 {
  background: rgba(255, 255, 255, 0.1);
  color: var(--near);
}


.task-row-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.empty-inline {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.record-tools {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  align-items: center;
  margin-top: 14px;
  margin-bottom: 12px;
}

.record-input {
  min-height: 96px;
  border: 1px solid #333333;
  border-radius: 10px;
  background: #181818;
  color: var(--text);
  box-shadow: none;
  font-size: 14px;
  line-height: 1.5;
}

.record-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

.record-actions div {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.record-actions span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.record-list {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.record-card {
  border: 1px solid #303030;
  border-radius: 16px;
  background: #1f1f1f;
  padding: 18px;
}

.record-meta {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.record-meta strong {
  font-size: 15px;
}

.record-meta time {
  margin-left: auto;
  color: #8f8f8f;
  font-size: 13px;
  font-weight: 700;
}

.record-card p {
  color: var(--near);
  font-size: 16px;
  line-height: 1.55;
}

.record-control {
  border-radius: 9999px;
  background: #252525;
  color: var(--muted);
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 800;
}

.record-control:hover {
  color: var(--text);
}

.record-control.active {
  background: var(--accent);
  color: #000000;
}

.record-control.danger {
  background: #3a171b;
  color: var(--danger);
}

.readonly-notice,
.status-suggestion {
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--muted);
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 700;
}

.readonly-notice,
.status-suggestion {
  grid-column: 1 / -1;
}

.status-suggestion {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  margin: 14px 0 4px;
}

.detail-page.readonly input,
.detail-page.readonly textarea {
  opacity: 0.72;
}

.admin-login {
  display: grid;
  grid-template-columns: minmax(180px, 300px) auto 1fr;
  gap: 10px;
  align-items: center;
  margin-top: 16px;
}

.admin-content {
  display: none;
  gap: 14px;
  margin-top: 18px;
}

.admin-content.open {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.option-manager {
  display: grid;
  gap: 14px;
  border-radius: 8px;
  background: var(--surface-2);
  padding: 16px;
}

.option-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}

.option-list {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.account-manager {
  grid-column: 1 / -1;
}

.account-list {
  display: grid;
  gap: 10px;
}

.account-row {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  border-radius: 8px;
  background: var(--surface);
  padding: 12px;
}

.account-row strong,
.account-row small {
  display: block;
}

.account-row small {
  margin-top: 4px;
}

.account-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.role-chip {
  border-radius: 9999px;
  background: var(--surface-3);
  color: var(--muted);
  padding: 8px 11px;
  font-size: 13px;
  font-weight: 800;
}

.role-chip.active {
  background: var(--accent);
  color: #000000;
}

.delete-btn:disabled {
  cursor: not-allowed;
  opacity: 0.35;
}

.admin-chip {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  border-radius: 9999px;
  background: var(--surface-3);
  color: var(--text);
  padding: 8px 10px;
  font-size: 14px;
  font-weight: 700;
  cursor: grab;
}

.admin-chip:active {
  cursor: grabbing;
}

.drag-handle {
  color: var(--muted);
  font-style: normal;
  font-size: 12px;
}

.admin-chip button {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #3a171b;
  color: var(--danger);
  font-weight: 700;
}

.board-root,
.board-page,
.board-editor-shell,
.board-detail-shell {
  display: grid;
  gap: 18px;
}

.board-head,
.board-editor-top,
.board-detail-top,
.mobile-board-search {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.board-list-back {
  min-height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 9999px;
  background: #3b4043;
  color: #ffffff;
  padding: 0 16px;
  font-weight: 900;
}

.board-list-back:hover {
  background: #4a5054;
}

.board-editor-actions-only {
  position: absolute;
  top: 22px;
  right: 22px;
  z-index: 2;
  justify-content: flex-end;
}

.board-editor-top > div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.board-head h2,
.board-detail-card h2 {
  margin: 0;
  font-size: clamp(32px, 4vw, 48px);
  letter-spacing: -0.02em;
}

.board-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 150px 150px 150px;
  gap: 12px;
  border-radius: 8px;
  background: var(--surface-2);
  padding: 14px;
}

.board-toolbar input,
.board-toolbar select,
.board-editor-card input,
.board-editor-card select,
.board-comment-form input {
  min-height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: #111517;
  color: var(--text);
  padding: 0 14px;
  outline: none;
}

.board-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.board-tabs button,
.mobile-board-filter-panel button {
  min-height: 38px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--near);
  padding: 0 18px;
  font-weight: 850;
}

.board-tabs button.active,
.mobile-board-filter-panel button.active {
  background: rgba(30, 215, 96, 0.14);
  color: var(--accent);
  box-shadow: inset 0 0 0 1.5px var(--accent);
}

.board-table {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
}

.board-table-head,
.board-table-row {
  display: grid;
  grid-template-columns: 76px 104px minmax(0, 1fr) 140px 120px 72px 72px;
  gap: 12px;
  align-items: center;
  min-height: 46px;
  padding: 0 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.board-table-head {
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
}

.board-table-row {
  width: 100%;
  background: transparent;
  color: var(--near);
  text-align: left;
}

.board-table-row:hover {
  background: rgba(255, 255, 255, 0.04);
}

.board-table-row strong {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--text);
  font-size: 15px;
}

.board-table-row.notice strong {
  font-weight: 950;
}

.board-table-row strong em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
}

.board-notice-chip,
.board-prefix-chip {
  display: inline-grid;
  place-items: center;
  min-width: 42px;
  min-height: 24px;
  border-radius: 4px;
  border: 1px solid currentColor;
  color: var(--accent);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  padding: 0 8px;
}

.board-prefix-chip {
  color: var(--near);
}

.board-editor-card,
.board-detail-card {
  position: relative;
  display: grid;
  gap: 18px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.025));
  padding: 22px;
}

.board-editor-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.board-prefix-field {
  width: min(100%, 280px);
}

.board-title-line {
  display: grid;
  grid-template-columns: minmax(360px, 1fr) max-content;
  gap: 12px;
  align-items: end;
}

.board-title-field {
  min-width: 0;
}

.board-editor-meta label,
.board-notice-options label {
  display: grid;
  gap: 8px;
  color: var(--near);
  font-weight: 850;
}

.board-editor-meta small {
  color: var(--muted);
  font-size: 12px;
}

.board-notice-options {
  display: flex;
  align-items: center;
  gap: 10px;
  align-self: end;
  min-height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.055);
  padding: 0 10px;
}

.board-admin-summary {
  display: flex;
  align-items: center;
  gap: 0;
  min-height: 42px;
  white-space: nowrap;
}

.board-notice-options .board-check {
  gap: 7px !important;
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
}

.board-notice-options .board-check span {
  width: 18px;
  height: 18px;
}

.board-notice-extra {
  display: none;
  flex: 0 0 auto;
  grid-template-columns: max-content max-content max-content;
  gap: 10px;
  align-items: center;
}

.board-notice-options.open {
  gap: 10px;
  align-items: center;
  border-color: rgba(30, 215, 96, 0.38);
  background: rgba(30, 215, 96, 0.055);
  padding: 0 10px;
}

.board-notice-options.open .board-notice-extra {
  display: grid;
  justify-content: start;
}

.board-notice-extra > label:not(.board-check) {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  white-space: nowrap;
}

.board-notice-extra > label:not(.board-check) > span {
  flex: 0 0 auto;
  font-size: 12px;
}

.board-notice-extra select {
  width: 130px;
  min-width: 130px;
}

.board-notice-date-button.date-button.compact {
  width: 164px;
  min-width: 164px;
  min-height: 44px;
  justify-content: space-between;
  border-radius: 7px;
  padding: 0 10px;
  background: #252525;
  color: var(--near);
  box-shadow: none;
  font-size: 14px;
  font-weight: 700;
}

.board-custom-date {
  display: none !important;
}

.board-custom-date.open {
  display: flex !important;
  align-items: center;
  gap: 7px;
}

.board-check {
  display: inline-flex !important;
  grid-template-columns: none !important;
  align-items: center;
  gap: 10px !important;
}

.board-check input {
  display: none;
}

.board-check span {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  background: rgba(0, 0, 0, 0.35);
}

.board-check input:checked + span {
  border-color: var(--accent);
  background-color: var(--accent);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 10.2 8.4 13.5 15.2 6.5' fill='none' stroke='%23020b05' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 15px;
}

.board-rich-editor {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.18);
}

.board-rich-toolbar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.board-rich-toolbar button {
  min-width: 42px;
  min-height: 34px;
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--near);
  font-weight: 900;
}

.board-content-editor {
  min-height: 300px;
  padding: 18px;
  outline: none;
  color: var(--text);
}

.board-detail-card header {
  display: grid;
  gap: 8px;
}

.board-detail-category {
  display: flex;
  align-items: center;
  min-height: 24px;
}

.board-detail-card header p,
.board-detail-card header small {
  color: var(--muted);
}

.board-detail-card header button {
  background: transparent;
  color: var(--accent);
  font-weight: 850;
}

.board-detail-top > div .record-control,
.board-detail-top > div .delete-btn {
  width: 68px;
  height: 38px;
  min-width: 68px;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  padding: 0;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
}

.board-detail-content {
  min-height: 180px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 18px;
  line-height: 1.7;
}

.board-comments {
  display: grid;
  gap: 10px;
}

.board-comments article,
.board-viewer-list span {
  display: grid;
  gap: 6px;
  border-radius: 8px;
  background: var(--surface-2);
  padding: 12px;
}

.board-comments article > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
}

.board-comment-head {
  align-items: center;
}

.board-comment-identity,
.board-comment-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.board-comment-identity small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.board-comment-actions {
  justify-content: flex-end;
  gap: 6px;
}

.board-comments .board-comment-actions button {
  min-width: 46px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
}

.board-comments .board-comment-actions button:last-child[data-board-delete-comment] {
  background: rgba(243, 114, 127, 0.14);
  color: var(--danger);
}

.board-reply-list {
  display: grid !important;
  gap: 8px !important;
  margin: 4px 0 0 24px;
  border-left: 2px solid rgba(30, 215, 96, 0.28);
  padding-left: 12px;
}

.board-comments .board-comment-reply {
  background: rgba(255, 255, 255, 0.035);
}

.board-reply-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 7px;
}

.board-reply-form input {
  min-width: 0;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #111517;
  color: var(--text);
  padding: 0 12px;
}

.board-comments .board-reply-form .pill.primary {
  background: var(--accent);
  color: #061007;
}

.board-comments .board-reply-form .record-control {
  background: rgba(255, 255, 255, 0.06);
  color: var(--near);
}

.board-comments article button {
  justify-self: start;
  border-radius: 999px;
  font-weight: 850;
}

.board-comments .board-comment-actions button[data-board-reply-comment] {
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
}

.board-comment-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}

.board-viewer-list {
  display: grid;
  gap: 8px;
}

.empty {
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--muted);
  padding: 18px;
  text-align: center;
}

@media (max-width: 1024px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
    height: auto;
  }

  .nav {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  .nav-item {
    justify-content: center;
    padding: 12px 10px;
  }

  .nav-item.active::before {
    left: 0;
  }

  .kpi-grid,
  .overview-grid,
  .summary-grid,
  .task-overview-stats,
  .admin-content.open {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .task-form,
  .revision-form {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 680px) {
  .main {
    padding: 16px;
  }

  .topbar,
  .section-head,
  .hero-panel,
  .task-row {
    align-items: stretch;
    flex-direction: column;
  }

  .nav,
  .kpi-grid,
  .overview-grid,
  .summary-grid,
  .task-overview-stats,
  .task-overview-controls,
  .task-overview-selects,
  .task-form,
  .revision-form,
  .detail-tabs,
  .admin-login,
  .admin-content.open,
  .property-row,
  .detail-properties,
  .project-revision-controls,
  .project-task-composer,
  .project-task-composer.task-composer-expanded,
  .task-form-grid,
  .task-time-range {
    grid-template-columns: 1fr;
  }

  .task-overview-hero {
    display: grid;
  }

  .overview-task-row,
  .overview-task-meta {
    grid-template-columns: 1fr;
  }

  .task-form-column,
  .task-form-column + .task-form-column {
    border-left: 0;
    padding: 16px 0;
  }

  .task-option-row,
  .task-form-footer {
    justify-content: flex-start;
  }

  .detail-page {
    width: 100%;
    padding: 24px 20px 64px;
  }

  .calendar-day {
    min-height: 96px;
    padding: 7px;
  }

  .compact-item {
    grid-template-columns: 1fr;
  }

  .revision-card {
    grid-template-columns: 1fr;
  }

  .record-tools {
    grid-template-columns: 1fr;
  }

  .project-tools,
  .project-filter-panel {
    grid-template-columns: 1fr;
  }

  .project-filter-panel {
    position: static;
    width: auto;
    margin: 8px 16px 12px;
  }
}


.studio-manage-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.studio-manage-head h2 {
  margin: 0 0 8px;
  font-size: 32px;
}

.studio-manage-head p {
  margin: 0;
  color: var(--muted);
  font-weight: 700;
}

.studio-manage-grid {
  display: grid;
  grid-template-columns: minmax(240px, 0.8fr) minmax(280px, 1fr) minmax(360px, 1.4fr);
  gap: 16px;
}

.studio-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(25, 29, 34, 0.96), rgba(18, 20, 23, 0.96));
  padding: 20px;
  box-shadow: var(--soft-shadow);
}

.studio-card-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.studio-card-title span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--surface-3);
  color: var(--text);
  font-weight: 900;
}

.studio-card-title h3 {
  margin: 0;
  font-size: 20px;
}

.studio-card p {
  margin: 0 0 18px;
  color: var(--muted);
  line-height: 1.6;
  font-weight: 700;
}

.studio-card .pill {
  width: 100%;
  margin-top: 10px;
}

.studio-summary,
.studio-staff-list {
  display: grid;
  gap: 10px;
}

.studio-summary-row,
.studio-staff-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.035);
  padding: 12px;
}

.studio-summary-row {
  display: grid;
}

.studio-summary-row span,
.studio-staff-row span,
.studio-staff-row small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-weight: 700;
}

.studio-staff-row .pill {
  width: auto;
  margin: 0;
  flex: 0 0 auto;
}

.muted-text {
  color: var(--muted);
  font-weight: 800;
}

@media (max-width: 980px) {
  .studio-manage-head {
    flex-direction: column;
  }

  .studio-manage-grid {
    grid-template-columns: 1fr;
  }
}


.admin-option-input {
  min-width: 120px;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  border-radius: 8px;
  padding: 7px 9px;
  font: inherit;
  font-weight: 800;
}

/* Reference-style studio management screen */
.studio-manage-page {
  display: grid;
  gap: 16px;
}

.studio-head-actions,
.studio-toolbar,
.studio-toolbar-actions,
.studio-week-nav,
.studio-status-chips {
  display: flex;
  align-items: center;
  gap: 10px;
}

.studio-head-actions {
  justify-content: flex-end;
}

.studio-control-panel {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.025);
  padding: 14px;
}

.studio-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.studio-status-chips {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.studio-status-chip {
  border: 1px solid var(--line);
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--near);
  padding: 9px 13px;
  font-size: 13px;
}

.studio-status-chip.warning {
  border-color: rgba(255, 164, 43, 0.28);
  background: rgba(255, 164, 43, 0.12);
  color: #ffa42b;
}

.studio-status-chip.ok {
  border-color: rgba(30, 215, 96, 0.28);
  background: rgba(30, 215, 96, 0.12);
  color: var(--accent);
}

.studio-toolbar {
  justify-content: space-between;
}

.studio-week-nav strong {
  min-width: 220px;
  font-size: 18px;
}

.studio-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 18px;
  align-items: start;
}

.studio-week-card,
.studio-check-panel {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(18, 24, 28, 0.96), rgba(12, 15, 18, 0.96));
  box-shadow: var(--soft-shadow);
}

.studio-week-card {
  overflow: hidden;
}

.studio-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  color: var(--near);
  font-size: 13px;
  font-weight: 800;
}

.studio-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.studio-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
}

.studio-dot.training {
  background: #2f8cff;
}

.studio-dot.lesson {
  background: #ff971c;
}

.studio-dot.staff {
  background: #1ed760;
}

.studio-dot.unassigned {
  background: #a78bfa;
}

.studio-week-grid {
  display: grid;
  grid-template-columns: 70px repeat(7, minmax(116px, 1fr));
  overflow-x: auto;
}

.studio-day-head,
.studio-time-label,
.studio-time-cell {
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.studio-day-head {
  position: sticky;
  top: 0;
  z-index: 4;
  min-height: 54px;
  display: grid;
  place-items: center;
  gap: 2px;
  background: #101418;
  color: var(--near);
  font-weight: 900;
}

.studio-day-head.today {
  color: var(--accent);
}

.studio-day-head.sunday,
.studio-day-head.holiday {
  color: #ff7373;
}

.studio-day-head span {
  color: var(--muted);
  font-size: 12px;
}

.studio-day-head.sunday span,
.studio-day-head.holiday span {
  color: #ff7373;
}

.studio-day-head em {
  color: #ff7373;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

.studio-time-label {
  min-height: 58px;
  padding: 12px 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-align: right;
}

.studio-corner {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 5;
  background: #101418;
  min-height: 54px;
}

.studio-time-cell {
  position: relative;
  min-height: 58px;
  padding: 6px;
}

.studio-week-event {
  display: grid;
  align-content: center;
  gap: 2px;
  position: absolute;
  left: 6px;
  right: 6px;
  top: calc(var(--studio-event-top, 0%) + 4px);
  height: calc(var(--studio-event-height, 100%) - 8px);
  min-height: 28px;
  border-radius: 8px;
  color: #ffffff;
  overflow: hidden;
  padding: 5px 9px;
  text-align: left;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
  z-index: 3;
}

.studio-week-event.short {
  gap: 0;
  min-height: 36px;
  padding: 4px 8px;
}

.studio-week-event span {
  opacity: 0.86;
  font-size: 11px;
  line-height: 1.1;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-week-event.short span {
  font-size: 10px;
}

.studio-week-event strong {
  font-size: 13px;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-week-event.short strong {
  font-size: 12px;
  line-height: 1.12;
}

.studio-week-event em {
  display: none;
  justify-self: start;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.26);
  padding: 4px 6px;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.studio-week-event.training {
  background: linear-gradient(135deg, rgba(22, 89, 166, 0.95), rgba(15, 58, 110, 0.95));
}

.studio-week-event.lesson {
  background: linear-gradient(135deg, rgba(154, 76, 10, 0.95), rgba(92, 47, 10, 0.95));
}

.studio-week-event.staff {
  background: linear-gradient(135deg, rgba(18, 120, 58, 0.95), rgba(12, 78, 42, 0.95));
}

.studio-week-event.unassigned {
  background: linear-gradient(135deg, rgba(96, 63, 139, 0.95), rgba(61, 38, 92, 0.95));
}

.studio-check-panel {
  padding: 22px;
}

.studio-check-panel h3 {
  margin: 0 0 12px;
  font-size: 20px;
}

.studio-check-panel p {
  margin: 0 0 18px;
  color: var(--muted);
  line-height: 1.6;
  font-weight: 700;
}

.studio-unassigned-notice:empty {
  display: none;
}

.studio-unassigned-alert {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(255, 164, 43, 0.28);
  border-radius: 10px;
  background: rgba(255, 164, 43, 0.1);
  color: #ffd08a;
  padding: 12px 14px;
  margin-bottom: 16px;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.45;
}

.studio-unassigned-alert b {
  color: #ffa42b;
}

.studio-unassigned-alert button {
  justify-self: start;
  border: 1px solid rgba(255, 164, 43, 0.32);
  border-radius: 9999px;
  background: rgba(255, 164, 43, 0.14);
  color: #ffd08a;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 900;
}

.studio-check-list {
  display: grid;
  gap: 0;
  margin-bottom: 18px;
}

.studio-check-list div {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  column-gap: 10px;
  row-gap: 4px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}

.studio-check-list b {
  grid-row: span 2;
  font-size: 18px;
  color: var(--accent);
}

.studio-check-list .book {
  color: #539df5;
}

.studio-check-list .people {
  color: #a78bfa;
}

.studio-check-list .repeat {
  color: #ff971c;
}

.studio-check-list strong {
  color: var(--text);
}

.studio-check-list span {
  color: var(--muted);
  line-height: 1.5;
  font-size: 13px;
}

@media (max-width: 1180px) {
  .studio-control-panel,
  .studio-toolbar,
  .studio-workspace {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: stretch;
  }

  .studio-workspace {
    display: grid;
  }
}


/* Requested studio refinements */
.main.studio-mode > .topbar {
  display: none;
}

.studio-control-panel,
.studio-status-chips,
.studio-filter-bar,
.studio-head-actions {
  display: none !important;
}

.studio-training-type-filters {
  display: grid;
  gap: 10px;
}

.studio-training-filter {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.04);
  padding: 11px 13px;
  color: var(--near);
  font-weight: 900;
}

.studio-training-filter input {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}

.studio-week-grid.is-month {
  grid-template-columns: repeat(7, minmax(120px, 1fr));
}

.studio-month-head {
  position: sticky;
  top: 0;
  z-index: 2;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: #101418;
  color: var(--muted);
  padding: 10px;
  text-align: center;
  font-size: 12px;
  font-weight: 950;
}

.studio-month-head.sunday {
  color: #ff7373;
}

.studio-month-day {
  min-height: 130px;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 10px;
}

.studio-month-day.muted {
  opacity: 0.45;
}

.studio-month-day.today {
  box-shadow: inset 0 0 0 2px var(--accent);
}

.studio-month-day > span {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  color: var(--near);
  font-weight: 900;
}

.studio-month-day > span b {
  font: inherit;
}

.studio-month-day > span em {
  overflow: hidden;
  color: #ff7373;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-month-day.sunday > span b,
.studio-month-day.holiday > span b {
  color: #ff7373;
}

.studio-month-event {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  margin-top: 6px;
  border-radius: 7px;
  color: #ffffff;
  padding: 6px 8px;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 900;
}

.studio-month-event.training {
  background: #1457a8;
}

.studio-month-event.lesson {
  background: #8a480f;
}

.studio-month-event.staff {
  background: #0f6b3a;
}

.studio-month-event.unassigned {
  background: #5b3f8f;
}

.studio-assignment-badge {
  position: absolute;
  top: 7px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ff4d4f;
  color: #ffffff;
  box-shadow: 0 0 0 2px rgba(16, 20, 24, 0.72);
  font-size: 13px;
  font-style: normal;
  font-weight: 1000;
  line-height: 1;
}

.studio-week-event.needs-assignment {
  padding-right: 34px;
}

.studio-month-event .studio-assignment-badge {
  top: 50%;
  right: 6px;
  width: 16px;
  height: 16px;
  font-size: 10px;
  transform: translateY(-50%);
}

.admin-option-input[readonly] {
  background: transparent;
  border-color: transparent;
}

.admin-chip [data-edit-option] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--near);
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 900;
}


/* Studio calendar interaction refinements */
.studio-week-nav {
  display: flex;
  align-items: center;
  gap: 10px;
}

.studio-week-nav #studioTodayBtn {
  order: 3;
}

.studio-week-nav #studioWeekTitle {
  order: 4;
}

.studio-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.studio-toolbar-actions #studioAddStaffBtn {
  margin-left: 8px;
}

.studio-legend span {
  color: var(--near);
}

.studio-dot {
  background: var(--studio-type-color, var(--accent));
}

.studio-training-filter {
  position: relative;
}

.studio-training-filter:not(.all) {
  border-color: color-mix(in srgb, var(--studio-type-color, var(--accent)) 32%, rgba(255,255,255,0.14));
}

.studio-training-filter:not(.all) input {
  accent-color: var(--studio-type-color, var(--accent));
}

.studio-training-filter.all {
  border-color: rgba(30, 215, 96, 0.3);
  background: rgba(30, 215, 96, 0.08);
}

.studio-week-grid:not(.is-month) {
  max-height: calc(100vh - 340px);
  overflow: auto;
  scrollbar-width: thin;
}

.studio-time-label,
.studio-time-cell {
  min-height: 96px;
}

.studio-time-cell.drag-selecting {
  background: transparent;
}

.studio-time-cell.drag-selecting::after {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  top: var(--studio-select-top, 0%);
  height: var(--studio-select-height, 50%);
  border-radius: 8px;
  background: rgba(30, 215, 96, 0.14);
  box-shadow: inset 0 0 0 1px rgba(30, 215, 96, 0.42);
  pointer-events: none;
}

.studio-week-event.typed,
.studio-month-event.typed {
  background: linear-gradient(135deg, color-mix(in srgb, var(--studio-type-color) 74%, #101418), color-mix(in srgb, var(--studio-type-color) 38%, #101418));
}


/* Studio schedule modal */
.studio-schedule-modal {
  position: relative;
  display: block;
  width: min(1210px, calc(100vw - 28px));
  max-height: calc(100vh - 28px);
  overflow: auto;
  border: 1px solid rgba(105, 122, 138, 0.28);
  border-radius: 0;
  background:
    radial-gradient(circle at 0 0, rgba(31, 78, 96, 0.32), transparent 30%),
    radial-gradient(circle at 100% 0, rgba(30, 215, 96, 0.08), transparent 26%),
    linear-gradient(145deg, #10171c 0%, #0b1014 58%, #080b0f 100%);
  padding: 22px 28px 30px;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.68);
}

.studio-modal-close {
  position: absolute;
  top: 18px;
  right: 20px;
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  background: rgba(255,255,255,0.055);
  color: var(--text);
  font-size: 28px;
  font-weight: 400;
  line-height: 1;
}

.studio-modal-title h2 {
  margin: 0 0 9px;
  color: #f6f8f9;
  font-size: 28px;
  font-weight: 950;
  letter-spacing: 0;
}

.studio-modal-title p,
.studio-staff-head p {
  margin: 0;
  color: #a8afb7;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
}

.studio-schedule-layout {
  display: grid;
  grid-template-columns: minmax(520px, 1fr) minmax(520px, 1fr);
  gap: 16px;
  margin-top: 18px;
}

.studio-schedule-section {
  display: grid;
  align-content: start;
  gap: 14px;
  min-height: 456px;
  border: 1px solid rgba(116, 132, 148, 0.26);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.032), rgba(255,255,255,0.012)),
    rgba(13, 19, 24, 0.9);
  padding: 18px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}

.studio-schedule-section h3,
.studio-staff-head h3 {
  margin: 0;
  color: #f1f5f7;
  font-size: 17px;
  font-weight: 950;
}

.studio-section-icon {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-right: 8px;
  font-size: 14px;
  line-height: 1;
}

.studio-section-icon.calendar-icon {
  color: #1ed760;
}

.studio-section-icon.staff-icon {
  color: #3b91ff;
}

.studio-field-grid {
  display: grid;
  gap: 12px;
}

.studio-field-grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.studio-schedule-modal label {
  gap: 8px;
  color: #c7cdd3;
  font-size: 12px;
  font-weight: 850;
}

.studio-schedule-modal .custom-select,
.studio-schedule-modal .date-button,
.studio-schedule-modal input[type="text"],
.studio-schedule-modal input[type="time"],
.studio-schedule-modal input[type="number"],
.studio-schedule-modal select,
.studio-schedule-modal textarea,
.studio-staff-row input {
  min-height: 39px;
  border: 1px solid rgba(132, 148, 164, 0.22);
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.028));
  color: #eef2f4;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.028);
}

.studio-schedule-modal .custom-select,
.studio-schedule-modal .date-button,
.studio-schedule-modal input[type="text"] {
  width: 100%;
  padding: 0 13px;
}

.studio-schedule-modal textarea {
  min-height: 69px;
  resize: vertical;
  padding: 13px;
  font-weight: 750;
}

.studio-schedule-modal textarea::placeholder,
.studio-staff-row input::placeholder {
  color: #737b84;
}

.studio-date-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: end;
}

.studio-checkbox-line {
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  gap: 9px !important;
  min-height: 40px;
  color: var(--near) !important;
}

.studio-checkbox-line input {
  width: 17px;
  height: 17px;
  accent-color: var(--accent);
}

.studio-field-grid.time {
  grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr);
  align-items: end;
}

.studio-field-grid.time > span {
  padding-bottom: 12px;
  color: var(--muted);
  text-align: center;
}

.studio-memo-count {
  justify-self: end;
  margin-top: -28px;
  padding-right: 12px;
  color: #9aa3ac;
  font-size: 12px;
  font-weight: 800;
}

.studio-repeat-box {
  display: grid;
  gap: 11px;
  margin-top: 2px;
  border-top: 0;
  padding-top: 6px;
}

.studio-repeat-toggle {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center;
  gap: 14px !important;
  color: var(--text) !important;
}

.studio-repeat-toggle span {
  color: var(--accent);
  font-size: 17px;
  font-weight: 950;
}

.studio-repeat-toggle input {
  appearance: none;
  position: relative;
  width: 34px;
  height: 18px;
  border: 0;
  border-radius: 9999px;
  background: #6b737c;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14);
  transition: background-color 180ms ease, box-shadow 180ms ease;
}

.studio-repeat-toggle input::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #f4f6f7;
  transition: transform 180ms ease;
}

.studio-repeat-toggle input:checked {
  background: var(--accent);
}

.studio-repeat-toggle input:checked::after {
  transform: translateX(16px);
}

.studio-repeat-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 82px;
  gap: 18px;
  align-items: end;
  border-radius: 8px;
  background: rgba(30, 215, 96, 0.045);
  padding: 10px;
}

.studio-repeat-controls.open {
  display: grid;
}

.studio-repeat-controls.disabled {
  opacity: 0.42;
  filter: grayscale(0.35);
}

.studio-repeat-controls.disabled button,
.studio-repeat-controls.disabled input {
  cursor: not-allowed;
}

.studio-repeat-days,
.studio-repeat-count {
  display: grid;
  gap: 8px;
  color: #c7cdd3;
  font-size: 12px;
  font-weight: 850;
}

.studio-repeat-days > div {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
}

.studio-repeat-days button {
  min-width: 34px;
  min-height: 34px;
  border-radius: 7px;
  background: rgba(255,255,255,0.055);
  color: #aeb6be;
  font-weight: 900;
}

.studio-repeat-days button.active {
  background: var(--accent);
  color: #06110a;
}

.studio-repeat-count input {
  width: 100%;
  min-height: 34px;
  text-align: center;
}

.studio-schedule-modal .time-button:disabled {
  border-color: rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.34);
  color: rgba(255,255,255,0.28);
  opacity: 1;
  cursor: not-allowed;
}

.repeat-delete-card .confirm-actions.three {
  grid-template-columns: 1fr 1fr 1fr;
}

.studio-repeat-count input::-webkit-outer-spin-button,
.studio-repeat-count input::-webkit-inner-spin-button {
  margin: 0;
  appearance: none;
}

.studio-repeat-count input[type="number"] {
  appearance: textfield;
}

.studio-staff-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
}

.pill.small {
  border: 1px solid rgba(30, 215, 96, 0.4);
  background: rgba(30, 215, 96, 0.16);
  color: var(--accent);
  padding: 9px 16px;
  font-size: 13px;
}

.studio-staff-table {
  overflow: hidden;
  border: 1px solid rgba(116, 132, 148, 0.22);
  border-radius: 8px;
  background: rgba(7, 10, 13, 0.22);
}

.studio-staff-table-head,
.studio-staff-row {
  display: grid;
  grid-template-columns: 22px 30px minmax(118px, 1fr) minmax(118px, 1fr) minmax(132px, 1fr) 48px;
  gap: 9px;
  align-items: center;
}

.studio-staff-table-head {
  padding: 11px 13px;
  color: #939da7;
  font-size: 12px;
  font-weight: 900;
  background: rgba(255,255,255,0.026);
}

.studio-staff-row {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 9px 13px;
}

.studio-staff-row input {
  padding: 0 12px;
  font-weight: 800;
}

.studio-row-number {
  color: #c8d0d8;
  font-weight: 900;
}

.studio-row-drag {
  color: #6f7882;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: -5px;
  cursor: grab;
  user-select: none;
}

.studio-row-delete {
  width: 36px;
  height: 36px;
  border-radius: 7px;
  background: rgba(239, 68, 68, 0.13);
  box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.16);
  color: var(--danger);
  font-weight: 900;
}

.studio-add-row {
  width: calc(100% - 24px);
  margin: 12px;
  border: 1px dashed rgba(30, 215, 96, 0.45);
  border-radius: 8px;
  background: rgba(30, 215, 96, 0.035);
  color: var(--accent);
  padding: 12px;
  font-weight: 900;
}

.studio-staff-tip {
  border: 1px solid rgba(116, 132, 148, 0.2);
  border-radius: 8px;
  background: rgba(255,255,255,0.025);
  color: #919aa4;
  margin: 0;
  padding: 11px 12px;
  font-weight: 800;
  font-size: 13px;
}

.studio-modal-actions {
  position: static;
  display: grid;
  grid-template-columns: 168px 168px;
  gap: 14px;
  justify-content: end;
  margin-top: 22px;
}

.studio-modal-actions .pill {
  min-height: 38px;
  border-radius: 8px;
}

.studio-modal-actions .pill.ghost {
  border: 0;
  background: rgba(255,255,255,0.07);
  color: #f0f3f5;
}

.studio-modal-actions .pill.primary {
  border: 0;
  background: linear-gradient(180deg, #19d86a, #08aa4c);
  color: #07120b;
}

@media (max-width: 1100px) {
  .studio-schedule-layout,
  .studio-field-grid.two,
  .studio-date-line {
    grid-template-columns: 1fr;
  }

  .studio-staff-table-head {
    display: none;
  }

  .studio-staff-row {
    grid-template-columns: 22px 28px 1fr;
  }

  .studio-staff-row > *:not(.studio-row-drag):not(.studio-row-number) {
    grid-column: 3;
  }

  .studio-row-delete {
    justify-self: start;
  }

  .studio-modal-actions {
    position: static;
    grid-template-columns: 1fr;
  }
}


.work-studio-panel {
  display: grid;
  gap: 16px;
}

.work-studio-toggle {
  width: fit-content;
}

.work-studio-form {
  min-height: auto;
}

.work-studio-actions {
  display: flex;
  justify-content: flex-end;
}


.owner-link-table {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.owner-link-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
}

.owner-link-actions small {
  color: var(--muted);
  font-weight: 800;
}

.owner-link-head,
.owner-link-row {
  display: grid;
  grid-template-columns: 1fr 1fr 0.8fr 1.2fr;
  gap: 10px;
  align-items: center;
}

.owner-link-head {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.owner-link-row {
  border-radius: 8px;
  background: rgba(255,255,255,0.045);
  padding: 10px;
}

.owner-link-row.is-dirty {
  box-shadow: inset 3px 0 0 var(--accent);
}

[data-save-owner-links].attention {
  box-shadow: 0 0 0 3px rgba(30, 215, 96, 0.22);
}

.owner-link-row select {
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #111;
  color: var(--text);
  padding: 0 10px;
}


/* Mobile layout */
.mobile-topbar,
.mobile-tabbar,
.mobile-fab-wrap,
.mobile-sheet {
  display: none;
}

#mobileOverviewSummary {
  display: none;
}

@media (max-width: 768px) {
  html,
  body {
    width: 100%;
    overflow-x: hidden;
  }

  body {
    padding: 0;
    background: #0b0f12;
  }

  .app-shell {
    display: block;
    min-height: 100vh;
  }

  .sidebar,
  .topbar {
    display: none !important;
  }

  .main {
    width: 100%;
    min-width: 0;
    padding: 78px 14px 104px;
  }

  .view {
    min-width: 0;
  }

  .mobile-topbar {
    position: fixed;
    z-index: 80;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 64px;
    padding: 10px 14px;
    background: rgba(10, 13, 15, 0.94);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(18px);
  }

  .mobile-topbar .eyebrow {
    margin: 0 0 2px;
    font-size: 10px;
  }

  .mobile-topbar strong {
    font-size: 22px;
    font-weight: 950;
  }

  .mobile-icon-btn {
    min-width: 50px;
    min-height: 44px;
    border-radius: 14px;
    background: #161b1f;
    color: var(--text);
    box-shadow: inset 0 0 0 1px var(--line);
    font-weight: 900;
  }

  .mobile-icon-btn b {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    margin-left: 4px;
    border-radius: 999px;
    background: var(--accent);
    color: #05120a;
    font-size: 12px;
  }

  .mobile-tabbar {
    position: fixed;
    z-index: 80;
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    background: rgba(8, 10, 12, 0.96);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(18px);
  }

  .mobile-tab {
    min-height: 54px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    gap: 2px;
    color: var(--muted);
    background: transparent;
    font-size: 12px;
    font-weight: 900;
  }

  .mobile-tab span {
    font-size: 18px;
    line-height: 1;
  }

  .mobile-tab.active {
    color: var(--accent);
    background: rgba(31, 215, 101, 0.12);
  }

  .mobile-fab-wrap {
    position: fixed;
    right: 18px;
    bottom: 84px;
    z-index: 90;
    display: block;
  }

  .mobile-fab {
    width: 58px;
    height: 58px;
    border-radius: 999px;
    background: var(--accent);
    color: #031006;
    font-size: 34px;
    font-weight: 950;
    box-shadow: 0 18px 45px rgba(31, 215, 101, 0.34);
  }

  .mobile-fab-menu {
    position: absolute;
    right: 0;
    bottom: 68px;
    display: none;
    width: 210px;
    padding: 8px;
    border-radius: 18px;
    background: #15191d;
    box-shadow: var(--shadow), inset 0 0 0 1px var(--line);
  }

  .mobile-fab-menu.open {
    display: grid;
    gap: 6px;
  }

  .mobile-fab-menu button {
    min-height: 44px;
    border-radius: 12px;
    background: #20252a;
    color: var(--text);
    text-align: left;
    padding: 0 14px;
    font-weight: 900;
  }

  .mobile-sheet {
    position: fixed;
    inset: 0;
    z-index: 100;
  }

  .mobile-sheet.open {
    display: block;
  }

  .mobile-sheet-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.56);
  }

  .mobile-sheet-card {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 86vh;
    overflow: auto;
    padding: 18px 16px calc(20px + env(safe-area-inset-bottom));
    border-radius: 24px 24px 0 0;
    background: #111518;
    box-shadow: 0 -16px 50px rgba(0, 0, 0, 0.5), inset 0 0 0 1px var(--line);
  }

  .mobile-sheet-head,
  .mobile-sheet-user {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
  }

  .mobile-sheet-head strong {
    font-size: 24px;
    font-weight: 950;
  }

  .mobile-sheet-head button,
  .mobile-sheet-actions button {
    min-height: 44px;
    border-radius: 14px;
    background: #20252a;
    color: var(--text);
    padding: 0 14px;
    font-weight: 900;
  }

  .mobile-sheet-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 18px;
  }

  .mobile-notification-panel {
    display: grid;
    gap: 8px;
  }

  .mobile-notification-panel h3 {
    margin: 0;
    font-size: 18px;
  }

  .mobile-notification-panel article {
    display: grid;
    gap: 4px;
    padding: 12px;
    border-radius: 14px;
    background: #191e22;
  }

  #mobileOverviewSummary {
    display: grid;
    gap: 12px;
    margin-bottom: 14px;
  }

  .mobile-priority-card {
    display: grid;
    gap: 8px;
    padding: 14px;
    border-radius: 18px;
    background: #15191d;
    box-shadow: inset 0 0 0 1px var(--line);
  }

  .mobile-priority-card h3 {
    margin: 0 0 4px;
    font-size: 18px;
  }

  .mobile-priority-card button,
  .mobile-priority-card div {
    min-height: 52px;
    display: grid;
    gap: 3px;
    align-content: center;
    border-radius: 14px;
    background: #1d2227;
    color: var(--text);
    text-align: left;
    padding: 10px 12px;
  }

  .mobile-priority-card span {
    color: var(--muted);
    font-size: 12px;
  }

  .hero-panel {
    display: block;
    padding: 18px;
  }

  .hero-panel h2 {
    font-size: 26px;
  }

  .play-button {
    display: none;
  }

  .kpi-grid,
  .summary-grid,
  .overview-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .summary-grid,
  .overview-grid {
    grid-template-columns: 1fr;
  }

  .kpi {
    min-height: 112px;
    padding: 14px;
  }

  .panel,
  .project-board,
  .task-overview-shell,
  .studio-manage-page {
    border-radius: 18px;
    padding: 14px;
  }

  .section-head,
  .project-tools,
  .task-overview-controls,
  .task-overview-selects,
  .studio-toolbar,
  .studio-week-nav,
  .studio-toolbar-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    align-items: stretch;
  }

  .section-head .pill.primary,
  #addProjectBtn,
  #addWorkBtn,
  #studioAddStaffBtn {
    display: none;
  }

  input,
  select,
  textarea,
  button,
  .pill,
  .record-control,
  .custom-select,
  .date-button {
    min-height: 44px;
  }

  .project-head {
    display: none;
  }

  .project-list {
    overflow: visible;
    display: grid;
    gap: 10px;
  }

  .project-row,
  .work-row {
    min-width: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #15191d;
  }

  .project-title-cell {
    font-size: 18px;
  }

  .project-row > div,
  .project-row > label {
    width: 100%;
  }

  .project-row .custom-select.compact,
  .project-row .date-button.compact {
    width: 100%;
    justify-content: space-between;
  }

  .task-overview-hero,
  .task-overview-controls {
    grid-template-columns: 1fr;
  }

  .task-overview-stats {
    grid-template-columns: 1fr 1fr;
  }

  .task-overview-filters,
  .calendar-filter-checks,
  .studio-legend {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .task-overview-filters > *,
  .calendar-filter-checks > *,
  .studio-legend > * {
    flex: 0 0 auto;
  }

  .overview-task-row {
    grid-template-columns: 1fr;
    align-items: start;
    border-radius: 16px;
  }

  .overview-task-meta {
    justify-self: stretch;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .calendar-board,
  .calendar-main,
  .studio-workspace {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    min-width: 0;
  }

  .calendar-grid {
    grid-auto-rows: minmax(108px, auto);
  }

  .calendar-day {
    min-height: 108px;
    padding: 8px;
  }

  .studio-check-panel {
    order: -1;
  }

  .studio-week-card {
    overflow: hidden;
  }

  .studio-week-grid {
    max-height: none;
    overflow-x: auto;
  }

  .studio-week-grid:not(.is-month) {
    min-width: 760px;
  }

  .studio-week-grid.is-month {
    min-width: 0;
  }

  .studio-schedule-modal,
  .modal-card,
  .wide-modal {
    width: calc(100vw - 20px);
    max-width: calc(100vw - 20px);
    max-height: 92vh;
    overflow: auto;
    border-radius: 22px;
  }

  .studio-schedule-layout,
  .studio-field-grid.two,
  .studio-field-grid.time {
    grid-template-columns: 1fr;
  }

  .studio-staff-row {
    grid-template-columns: 24px 28px 1fr;
  }

  .admin-content.open,
  .option-manager,
  .owner-link-head,
  .owner-link-row,
  .account-row {
    grid-template-columns: 1fr;
  }

  .admin-chip,
  .account-actions {
    flex-wrap: wrap;
  }
}


/* Mobile v2 full redesign */
.mobile-app {
  display: none;
}

@media (max-width: 768px) {
  .main > .view:not(#mobileApp) {
    display: none !important;
  }

  #mobileApp.mobile-app {
    display: grid;
    gap: 12px;
  }

  .main {
    padding: 72px 12px 96px;
  }

  .mobile-topbar.mobile-v2 {
    min-height: 58px;
    padding: 8px 12px;
    background: rgba(8, 10, 12, 0.97);
  }

  .mobile-topbar.mobile-v2 strong {
    font-size: 20px;
  }

  .mobile-tabbar.mobile-v2 {
    padding: 7px 8px calc(7px + env(safe-area-inset-bottom));
    gap: 2px;
  }

  .mobile-tab {
    min-height: 50px;
    border-radius: 14px;
    font-size: 11px;
  }

  .mobile-tab span {
    font-size: 16px;
  }

  .mobile-kpi-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }

  .mobile-kpi-strip article {
    min-height: 48px;
    display: grid;
    align-content: center;
    gap: 2px;
    padding: 8px 10px;
    border-radius: 14px;
    background: #15191d;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
  }

  .mobile-kpi-strip span {
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
  }

  .mobile-kpi-strip b {
    font-size: 18px;
    line-height: 1;
  }

  .mobile-section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 10px;
    margin-top: 2px;
  }

  .mobile-section-head h2,
  .mobile-section-head h3 {
    margin: 0;
    font-size: 21px;
    font-weight: 950;
  }

  .mobile-section-head span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
  }

  .mobile-work-head {
    justify-content: flex-end;
  }

  .mobile-card-list {
    display: grid;
    gap: 8px;
  }

  .mobile-work-card,
  .mobile-task-card,
  .mobile-schedule-card {
    min-height: 74px;
    width: 100%;
    border-radius: 16px;
    background: #15191d;
    color: var(--text);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
    padding: 10px 12px;
    text-align: left;
  }

  .mobile-work-card {
    display: grid;
    gap: 7px;
  }

  .mobile-work-card strong,
  .mobile-task-card strong,
  .mobile-schedule-card b {
    font-size: 15px;
    line-height: 1.25;
  }

  .mobile-work-card div {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
  }

  .mobile-work-card span,
  .mobile-work-card small,
  .mobile-task-card span,
  .mobile-task-card small,
  .mobile-schedule-card span {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.25;
  }

  .mobile-chip {
    max-width: 45%;
    border-radius: 999px;
    padding: 4px 8px;
    color: #ffffff !important;
    font-weight: 900;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-chip.stage-0 { background: #8f3b43; }
  .mobile-chip.stage-1 { background: #9b5539; }
  .mobile-chip.stage-2 { background: #9a7434; }
  .mobile-chip.stage-3 { background: #6f7f35; }
  .mobile-chip.stage-4 { background: #3f7a51; }
  .mobile-chip.stage-5 { background: #1f8f4a; }

  .mobile-task-head {
    display: grid;
    gap: 10px;
  }

  .mobile-task-head h2 {
    margin: 0;
    font-size: 24px;
  }

  .mobile-filter-chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .mobile-filter-chips button {
    flex: 0 0 auto;
    min-height: 40px;
    border-radius: 999px;
    background: #1d2227;
    color: var(--near);
    padding: 0 14px;
    font-weight: 900;
  }

  .mobile-filter-chips button.active {
    background: var(--accent);
    color: #041006;
  }

  .mobile-task-card {
    display: grid;
    grid-template-columns: 34px 1fr;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
  }

  .mobile-task-card input {
    width: 24px;
    height: 24px;
    accent-color: var(--accent);
  }

  .mobile-task-card button {
    min-height: 54px;
    display: grid;
    gap: 3px;
    background: transparent;
    color: var(--text);
    text-align: left;
    padding: 0;
  }

  .mobile-schedule-section {
    display: grid;
    gap: 8px;
  }

  .mobile-schedule-section h3 {
    margin: 8px 0 0;
    font-size: 17px;
  }

  .mobile-schedule-card {
    min-height: 58px;
    display: grid;
    gap: 4px;
    border-left: 4px solid var(--accent);
  }

  .mobile-schedule-card.staff {
    border-left-color: #9b6bff;
  }

  .mobile-month-mini {
    display: grid;
    gap: 8px;
    padding: 12px;
    border-radius: 18px;
    background: #15191d;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
  }

  .mobile-month-weekdays,
  .mobile-month-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
  }

  .mobile-month-weekdays span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    text-align: center;
  }

  .mobile-month-grid button {
    min-height: 42px;
    border-radius: 12px;
    background: #1d2227;
    color: var(--near);
    position: relative;
    font-size: 12px;
  }

  .mobile-month-grid button.muted {
    opacity: 0.35;
  }

  .mobile-month-grid button.today {
    color: #041006;
    background: var(--accent);
  }

  .mobile-month-grid i {
    position: absolute;
    right: 5px;
    bottom: 4px;
    min-width: 15px;
    height: 15px;
    border-radius: 999px;
    background: #0b0f12;
    color: var(--accent);
    font-size: 10px;
    font-style: normal;
    line-height: 15px;
  }

  .mobile-more-grid {
    display: grid;
    gap: 8px;
  }

  .mobile-more-grid button,
  .mobile-more-list button {
    min-height: 46px;
    border-radius: 15px;
    background: #1d2227;
    color: var(--text);
    font-weight: 900;
  }

  .mobile-fab-wrap.mobile-v2 {
    right: 16px;
    bottom: 78px;
  }

  .mobile-fab {
    width: 56px;
    height: 56px;
  }

  .mobile-fab-menu {
    width: 180px;
  }

  .mobile-add-sheet.open {
    display: block;
  }

  .mobile-add-card {
    position: absolute;
    inset: auto 0 0 0;
    max-height: 94vh;
    display: grid;
    grid-template-rows: auto 1fr auto;
    border-radius: 24px 24px 0 0;
    background: var(--surface, #111518);
    color: var(--text);
    box-shadow: 0 -18px 50px rgba(0,0,0,0.55), inset 0 0 0 1px var(--line);
    overflow: hidden;
  }

  .mobile-add-card header {
    position: sticky;
    top: 0;
    z-index: 1;
    display: grid;
    grid-template-columns: 64px 1fr 72px;
    align-items: center;
    min-height: 56px;
    padding: 8px 12px;
    background: rgba(17, 21, 24, 0.96);
    border-bottom: 1px solid var(--line);
  }

  .mobile-add-card header strong {
    text-align: center;
    font-size: 17px;
  }

  .mobile-add-card header button {
    min-height: 40px;
    border-radius: 12px;
    color: var(--text);
    background: #20252a;
    font-weight: 900;
  }

  .mobile-add-card header button[type="submit"] {
    background: var(--accent);
    color: #041006;
  }

  .mobile-add-body {
    display: grid;
    gap: 10px;
    padding: 12px;
    overflow: auto;
  }

  .mobile-add-body section {
    display: grid;
    gap: 9px;
    padding: 12px;
    border-radius: 18px;
    background: #15191d;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
  }

  .mobile-add-body h3 {
    margin: 0;
    font-size: 15px;
  }

  .mobile-add-body input,
  .mobile-add-body select,
  .mobile-add-body textarea {
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #0f1316;
    color: var(--text);
    padding: 0 12px;
    font-size: 14px;
  }

  .mobile-add-body textarea {
    min-height: 84px;
    padding: 12px;
    resize: vertical;
  }

  .mobile-add-body label {
    display: grid;
    gap: 6px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
  }

  .mobile-toggle-line {
    min-height: 44px;
    display: flex !important;
    grid-template-columns: none;
    align-items: center;
    gap: 10px;
    color: var(--text) !important;
  }

  .mobile-toggle-line input {
    width: 22px;
    min-height: 22px;
    height: 22px;
    accent-color: var(--accent);
  }

  .mobile-time-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .mobile-check-list {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .mobile-check-list label {
    flex: 0 0 auto;
    min-height: 42px;
    display: flex !important;
    align-items: center;
    gap: 7px;
    padding: 0 12px;
    border-radius: 999px;
    background: #0f1316;
    color: var(--text) !important;
    box-shadow: inset 0 0 0 1px var(--line);
  }

  .mobile-check-list input {
    width: 18px;
    min-height: 18px;
    height: 18px;
    accent-color: var(--accent);
  }

  .mobile-add-card footer {
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: rgba(17, 21, 24, 0.98);
    border-top: 1px solid var(--line);
  }

  .mobile-add-card footer button {
    width: 100%;
    min-height: 50px;
    border-radius: 16px;
    font-size: 15px;
    font-weight: 950;
  }
}


@media (max-width: 768px) {
  body.mobile-pc-view #mobileApp {
    display: none !important;
  }

  body.mobile-pc-view .main > .view.active {
    display: block !important;
  }
}

@media (max-width: 768px) {
  .main {
    padding: calc(108px + env(safe-area-inset-top)) 20px calc(156px + env(safe-area-inset-bottom));
    overflow-x: hidden;
  }

  #mobileApp.mobile-app {
    gap: 16px;
  }

  .mobile-topbar.mobile-v2 {
    min-height: 74px;
    padding: calc(16px + env(safe-area-inset-top)) 20px 14px;
    background: linear-gradient(180deg, rgba(4, 8, 10, 0.98), rgba(4, 8, 10, 0.88));
    border-bottom: 0;
  }

  .mobile-topbar.mobile-v2 .eyebrow {
    display: none;
  }

  .mobile-topbar.mobile-v2 strong {
    font-size: 36px;
    line-height: 1;
    letter-spacing: -0.5px;
  }

  .mobile-icon-btn {
    min-width: 82px;
    min-height: 50px;
    border-radius: 25px;
    background: rgba(255, 255, 255, 0.07);
    font-size: 15px;
  }

  .mobile-icon-btn b {
    min-width: 26px;
    height: 26px;
    font-size: 14px;
  }

  .mobile-task-page {
    display: grid;
    gap: 16px;
  }

  .mobile-filter-chips {
    gap: 12px;
    padding-bottom: 2px;
  }

  .mobile-filter-chips button {
    min-width: 78px;
    min-height: 48px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
    color: var(--text);
    font-size: 16px;
    padding: 0 18px;
  }

  .mobile-filter-chips button.active {
    background: rgba(31, 215, 101, 0.24);
    box-shadow: inset 0 0 0 2px var(--accent);
    color: var(--text);
  }

  .mobile-task-tools {
    display: grid;
    grid-template-columns: 44px 44px 92px;
    gap: 10px;
    align-items: center;
  }

  .mobile-project-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  .mobile-project-toolbar .mobile-hide-done-toggle,
  .mobile-list-tools .mobile-hide-done-toggle {
    min-width: 92px;
    flex: 0 0 92px;
  }

  .mobile-list-tools {
    display: grid;
    grid-template-columns: 1fr 92px;
    align-items: center;
    gap: 10px;
  }

  .mobile-sort-trigger,
  .mobile-owner-filter-trigger,
  .mobile-hide-done-toggle {
    min-height: 44px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.11);
    color: var(--text);
    padding: 0;
  }

  .mobile-sort-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-size: 14px;
    font-weight: 850;
    white-space: nowrap;
    overflow: hidden;
  }

  .mobile-sort-trigger.icon-only {
    justify-content: center;
    padding: 0;
    line-height: 1;
  }

  .mobile-sort-icon {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .mobile-sort-trigger i {
    margin-left: auto;
    color: var(--muted);
    font-style: normal;
  }

  .mobile-owner-filter-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    min-width: 0;
    font-size: 19px;
    font-weight: 900;
    white-space: nowrap;
    overflow: hidden;
  }

  .mobile-owner-filter-trigger small {
    display: none;
    max-width: 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--accent);
    font-size: 12px;
    font-weight: 900;
  }

  .mobile-owner-filter-trigger.active,
  .mobile-sort-trigger.active {
    color: var(--accent);
    box-shadow: inset 0 0 0 1px rgba(30, 215, 96, 0.72);
  }

  .mobile-hide-done-toggle {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 850;
    padding: 0 9px;
  }

  .mobile-hide-done-toggle span {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-hide-done-toggle input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  .mobile-hide-done-toggle b {
    width: 32px;
    height: 19px;
    border-radius: 999px;
    background: #394047;
    position: relative;
    flex: 0 0 auto;
    transition: background 180ms ease;
  }

  .mobile-hide-done-toggle b::after {
    content: "";
    position: absolute;
    top: 3.5px;
    left: 3.5px;
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: #e7e7e7;
    transition: transform 180ms ease;
  }

  .mobile-hide-done-toggle input:checked + b {
    background: var(--accent);
  }

  .mobile-hide-done-toggle input:checked + b::after {
    transform: translateX(13px);
  }

  .mobile-card-list.mobile-task-list {
    gap: 12px;
    padding-bottom: calc(156px + env(safe-area-inset-bottom));
  }

  .mobile-task-card {
    min-height: 88px;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(23, 28, 32, 0.96), rgba(10, 14, 17, 0.96));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 16px 36px rgba(0, 0, 0, 0.18);
  }

  .mobile-task-card .mobile-task-check {
    appearance: none;
    -webkit-appearance: none;
    inline-size: 24px;
    block-size: 24px;
    min-width: 24px;
    min-height: 24px;
    max-width: 24px;
    max-height: 24px;
    aspect-ratio: 1 / 1;
    border-radius: 7px;
    border: 1.5px solid rgba(255, 255, 255, 0.55);
    background: rgba(0, 0, 0, 0.35);
    display: grid;
    place-items: center;
    padding: 0;
    box-sizing: border-box;
    flex: 0 0 24px;
  }

  .mobile-task-card .mobile-task-check:checked {
    border-color: var(--accent);
    background-color: var(--accent);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 10.2 8.4 13.5 15.2 6.5' fill='none' stroke='%23020b05' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 17px 17px;
  }

  .mobile-task-card .mobile-task-check:checked::after {
    content: none;
  }

  .mobile-task-card .mobile-task-open {
    min-width: 0;
    min-height: 58px;
    display: grid;
    align-content: center;
    gap: 5px;
    background: transparent;
    color: var(--text);
    text-align: left;
    padding: 0;
  }

  .mobile-task-card .mobile-task-open strong,
  .mobile-task-card .mobile-task-open span,
  .mobile-task-card .mobile-task-open small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-task-card .mobile-task-open strong {
    font-size: 17px;
    line-height: 1.15;
    font-weight: 950;
  }

  .mobile-task-card .mobile-task-open span {
    color: rgba(255, 255, 255, 0.68);
    font-size: 13px;
    font-weight: 650;
  }

  .mobile-task-card .mobile-task-open small {
    color: rgba(255, 255, 255, 0.52);
    font-size: 13px;
    font-weight: 700;
  }

  .mobile-dday-badge {
    min-width: 64px;
    min-height: 44px;
    display: inline-grid;
    place-items: center;
    padding: 0 12px;
    border-radius: 10px;
    color: #fff;
    font-size: 16px;
    font-weight: 950;
    white-space: nowrap;
  }

  .mobile-dday-badge.safe { background: #19b95a; }
  .mobile-dday-badge.mid { background: #c4b328; color: #0b0b0b; }
  .mobile-dday-badge.soon { background: #f27a00; }
  .mobile-dday-badge.today { background: #ef3f35; }
  .mobile-dday-badge.overdue { background: #a71922; }
  .mobile-dday-badge.none,
  .mobile-dday-badge.done { background: #4b5158; }

  .mobile-task-card.is-done {
    opacity: 0.72;
  }

  .mobile-task-empty {
    min-height: 420px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 14px;
    padding: 34px 22px;
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(23, 28, 32, 0.94), rgba(9, 13, 16, 0.96));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
    text-align: center;
  }

  .mobile-task-empty div {
    width: 94px;
    height: 94px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: #041006;
    background: var(--accent);
    font-size: 36px;
    font-weight: 950;
    box-shadow: 0 0 0 28px rgba(255, 255, 255, 0.04);
  }

  .mobile-task-empty strong {
    max-width: 280px;
    font-size: 20px;
    line-height: 1.35;
  }

  .mobile-task-empty span {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.45;
  }

  .mobile-sort-backdrop {
    position: fixed;
    inset: 0;
    z-index: 105;
    background: rgba(0, 0, 0, 0.58);
  }

  .mobile-sort-sheet {
    position: fixed;
    left: 8px;
    right: 8px;
    bottom: calc(92px + env(safe-area-inset-bottom));
    z-index: 110;
    display: grid;
    gap: 0;
    padding: 14px;
    border-radius: 28px 28px 0 0;
    background: rgba(24, 29, 33, 0.98);
    box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.42), inset 0 0 0 1px rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(18px);
  }

  .mobile-sort-sheet > i {
    width: 52px;
    height: 5px;
    justify-self: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.34);
    margin-bottom: 16px;
  }

  .mobile-sort-sheet h3 {
    margin: 0 0 14px;
    font-size: 22px;
    font-weight: 950;
  }

  .mobile-sort-sheet button {
    min-height: 56px;
    display: grid;
    grid-template-columns: 26px 1fr 24px;
    align-items: center;
    gap: 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--text);
    padding: 0 14px;
    text-align: left;
    font-size: 16px;
    font-weight: 850;
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08);
  }

  .mobile-sort-sheet button span {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.72);
  }

  .mobile-sort-sheet button.active {
    box-shadow: inset 0 0 0 1px var(--accent);
  }

  .mobile-sort-sheet button.active span {
    box-shadow: inset 0 0 0 6px var(--accent);
  }

  .mobile-sort-sheet button b {
    color: var(--accent);
    font-size: 20px;
  }

  .mobile-owner-chip-sheet {
    gap: 12px;
  }

  .mobile-owner-chip-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .mobile-owner-chip-grid button {
    width: auto;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--near);
    padding: 0 16px;
    text-align: center;
    font-size: 14px;
    font-weight: 900;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
  }

  .mobile-owner-chip-grid button.active {
    background: rgba(30, 215, 96, 0.14);
    color: var(--accent);
    box-shadow: inset 0 0 0 2px var(--accent);
  }

  .mobile-fab-wrap.mobile-v2 {
    right: 24px;
    bottom: calc(124px + env(safe-area-inset-bottom));
  }

  .mobile-fab {
    width: 64px;
    height: 64px;
    font-size: 38px;
  }

  .mobile-tabbar.mobile-v2 {
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
  }

  .mobile-project-toolbar {
    display: flex;
    justify-content: flex-end;
  }

  .mobile-project-sort {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 16px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.07);
    color: var(--text);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.11);
    font-size: 14px;
    font-weight: 900;
  }

  .mobile-project-sort.active {
    color: var(--accent);
    box-shadow: inset 0 0 0 1px rgba(30, 215, 96, 0.68);
  }

  .mobile-project-head {
    margin-top: 2px;
  }

  .mobile-project-head h2 {
    font-size: 24px;
  }

  .mobile-project-list {
    gap: 12px;
    padding-bottom: calc(156px + env(safe-area-inset-bottom));
  }

  .mobile-project-card {
    width: 100%;
    min-height: 118px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 86px;
    gap: 14px;
    align-items: center;
    padding: 16px 14px 16px 18px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(23, 28, 32, 0.97), rgba(8, 12, 15, 0.97));
    color: var(--text);
    text-align: left;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14), 0 16px 36px rgba(0,0,0,0.18);
  }

  .mobile-project-main {
    min-width: 0;
    display: grid;
    gap: 9px;
  }

  .mobile-project-main strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 17px;
    line-height: 1.22;
    font-weight: 950;
  }

  .mobile-project-main p {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    overflow: hidden;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
  }

  .mobile-project-main p > span:not(.mobile-project-status) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mobile-project-main p em {
    margin-right: 3px;
    color: rgba(255, 255, 255, 0.9);
    font-style: normal;
    font-weight: 950;
  }

  .mobile-project-main small {
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
  }

  .mobile-project-status,
  .mobile-project-dday {
    flex: 0 0 auto;
    border-radius: 999px;
    padding: 6px 10px;
    font-weight: 950;
    line-height: 1;
  }

  .mobile-project-status.progress,
  .mobile-project-status.revision {
    color: var(--accent);
    background: rgba(30, 215, 96, 0.16);
  }

  .mobile-project-status.waiting {
    color: #ff9d3c;
    background: rgba(255, 138, 31, 0.17);
  }

  .mobile-project-status.done {
    color: #d3d6d8;
    background: rgba(255, 255, 255, 0.12);
  }

  .mobile-project-status.confirm {
    color: #72bdff;
    background: rgba(74, 163, 255, 0.17);
  }

  .mobile-project-status.stage-0 { color: #fff; background: #8f3b43; }
  .mobile-project-status.stage-1 { color: #fff; background: #9b5539; }
  .mobile-project-status.stage-2 { color: #fff; background: #9a7434; }
  .mobile-project-status.stage-3 { color: #fff; background: #6f7f35; }
  .mobile-project-status.stage-4 { color: #fff; background: #3f7a51; }
  .mobile-project-status.stage-5 { color: #fff; background: #1f8f4a; }

  .mobile-project-side {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 10px;
    min-height: 72px;
    padding-left: 12px;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
  }

  .mobile-project-dday {
    justify-self: center;
    min-width: 58px;
    padding: 10px 9px;
    text-align: center;
    font-size: 14px;
  }

  .mobile-project-dday.safe {
    color: var(--accent);
    background: rgba(30, 215, 96, 0.16);
  }

  .mobile-project-dday.soon {
    color: #ff9d3c;
    background: rgba(255, 138, 31, 0.18);
  }

  .mobile-project-dday.today {
    color: #fff;
    background: rgba(255, 63, 63, 0.75);
  }

  .mobile-project-dday.overdue {
    color: #ffd6d6;
    background: rgba(160, 36, 44, 0.78);
  }

  .mobile-project-dday.done,
  .mobile-project-dday.none {
    color: #d7d9db;
    background: rgba(255, 255, 255, 0.12);
  }

  .mobile-project-side i {
    color: var(--muted);
    font-size: 28px;
    font-style: normal;
    line-height: 1;
  }

  #projectDetail.detail-shell.open {
    z-index: 140;
    background: #05090b;
    overflow: auto;
  }

  #projectDetail .detail-page {
    width: 100%;
    min-height: 100dvh;
    margin: 0;
    padding: 0 20px calc(150px + env(safe-area-inset-bottom));
    background: radial-gradient(circle at 50% -10%, rgba(26, 64, 54, 0.26), transparent 36%), #05090b;
    box-shadow: none;
    animation: none;
  }

  #projectDetail .detail-actions {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: calc(58px + env(safe-area-inset-top));
    margin: 0 -20px 14px;
    padding: calc(10px + env(safe-area-inset-top)) 20px 8px;
    background: linear-gradient(180deg, rgba(5, 9, 11, 0.98), rgba(5, 9, 11, 0.86));
    backdrop-filter: blur(16px);
  }

  #projectDetail #closeDetailBtn,
  #projectDetail #deleteDetailBtn {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    border-radius: 999px;
    padding: 0;
    font-size: 0;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text);
    box-shadow: none;
  }

  #projectDetail #closeDetailBtn::before {
    content: "‹";
    font-size: 42px;
    font-weight: 400;
    line-height: 34px;
  }

  #projectDetail #deleteDetailBtn::before {
    content: "삭제";
    color: #ff7d8c;
    font-size: 12px;
    font-weight: 950;
  }

  #projectDetail .detail-title {
    width: 100%;
    min-height: auto;
    margin: 0 0 18px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text);
    font-size: 28px;
    line-height: 1.15;
    font-weight: 950;
    letter-spacing: -0.2px;
  }

  #projectDetail .detail-tabs {
    position: sticky;
    top: calc(58px + env(safe-area-inset-top));
    z-index: 4;
    margin: 0 0 18px;
    padding: 4px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(14px);
  }

  #projectDetail .detail-tab {
    min-height: 38px;
    border-radius: 12px;
    font-size: 13px;
  }

  #projectDetail .detail-tab.active {
    background: rgba(30, 215, 96, 0.16);
    color: var(--accent);
    box-shadow: none;
  }

  #projectDetail .detail-properties {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    padding: 4px 0 10px;
  }

  #projectDetail .property-row {
    min-height: 44px;
    display: grid;
    grid-template-columns: 128px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 5px 2px;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  #projectDetail .property-label {
    display: flex;
    align-items: center;
    gap: 9px;
    color: rgba(255, 255, 255, 0.58);
    font-size: 15px;
    font-weight: 760;
  }

  #projectDetail .property-label span {
    width: 22px;
    color: rgba(255, 255, 255, 0.62);
    font-size: 18px;
    text-align: center;
  }

  #projectDetail .property-value {
    min-width: 0;
    display: flex;
    justify-content: flex-end;
    color: var(--text);
    font-size: 16px;
    font-weight: 900;
  }

  #projectDetail .custom-select.compact,
  #projectDetail .date-button.compact {
    min-height: 30px;
    max-width: 170px;
    border-radius: 7px;
    padding: 4px 9px;
    font-size: 14px;
    line-height: 1.2;
    box-shadow: none;
  }

  #projectDetail .custom-select.compact i,
  #projectDetail .date-button.compact i {
    margin-left: 4px;
  }

  #projectDetail .multi-select span {
    max-width: 132px;
  }

  #projectDetail .notion-input.money-input {
    width: 120px;
    min-height: 30px;
    padding: 2px 0;
    text-align: right;
    font-size: 16px;
  }

  #projectDetail .property-break {
    display: none;
  }

  #projectDetail .date-field-control {
    justify-content: flex-end;
    gap: 8px;
  }

  #projectDetail .calendar-toggle {
    min-height: 28px;
    gap: 6px;
    padding: 0 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.64);
  }

  #projectDetail .calendar-toggle input {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    min-width: 18px;
    border-radius: 5px;
    border: 1.5px solid rgba(255, 255, 255, 0.55);
    background: rgba(0, 0, 0, 0.35);
    box-shadow: none;
  }

  #projectDetail .calendar-toggle input:checked {
    border-color: var(--accent);
    background-color: var(--accent);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 10.2 8.4 13.5 15.2 6.5' fill='none' stroke='%23020b05' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 14px 14px;
  }

  #projectDetail .calendar-toggle span {
    font-size: 11px;
    font-weight: 850;
  }

  #projectDetail .memo-toolbar {
    margin-top: 10px;
    overflow-x: auto;
  }

  #projectDetail #detailMemo {
    min-height: 140px;
    margin-top: 10px;
    border-radius: 0;
    background: transparent;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  }
}

@media (max-width: 768px) {
  .confirm-modal {
    z-index: 320;
  }

  #projectDetail.detail-shell.open {
    inset: 0 0 calc(82px + env(safe-area-inset-bottom)) 0;
    z-index: 120;
  }

  .mobile-tabbar.mobile-v2 {
    z-index: 180;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
  }

  #dropdownLayer,
  #datePickerLayer,
  #timePickerLayer,
  .dropdown-layer.open,
  .date-picker-layer.open,
  .time-picker-layer.open {
    z-index: 240;
  }

  #projectDetail .detail-page {
    min-height: calc(100dvh - 82px - env(safe-area-inset-bottom));
    padding-bottom: 34px;
  }

  #projectDetail .detail-title {
    margin-bottom: 12px;
    font-size: 27px;
  }

  #projectDetail .detail-tabs {
    margin-bottom: 12px;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    border-radius: 14px;
  }

  #projectDetail .detail-tab {
    min-height: 34px;
    border-radius: 10px;
    font-size: 12px;
  }

  #projectDetail .property-row {
    min-height: 38px;
    grid-template-columns: 116px minmax(0, 1fr);
    gap: 8px;
    padding: 3px 2px;
  }

  #projectDetail .property-label {
    gap: 7px;
    font-size: 14px;
  }

  #projectDetail .property-label span {
    width: 18px;
    font-size: 16px;
  }

  #projectDetail .property-value {
    font-size: 15px;
  }

  #projectDetail .calendar-toggle input,
  #projectDetail .task-option-row input[type="checkbox"],
  #projectDetail .task-calendar-toggle input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    inline-size: 18px;
    block-size: 18px;
    min-width: 18px;
    min-height: 18px;
    max-width: 18px;
    max-height: 18px;
    aspect-ratio: 1 / 1;
    border-radius: 5px;
    border: 1.5px solid rgba(255, 255, 255, 0.55);
    background: rgba(0, 0, 0, 0.36);
    box-shadow: none;
    padding: 0;
    flex: 0 0 18px;
  }

  #projectDetail .calendar-toggle input:checked,
  #projectDetail .task-option-row input[type="checkbox"]:checked,
  #projectDetail .task-calendar-toggle input[type="checkbox"]:checked {
    border-color: var(--accent);
    background-color: var(--accent);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 10.2 8.4 13.5 15.2 6.5' fill='none' stroke='%23020b05' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 14px 14px;
  }

  #projectDetail .record-composer.task-add-card {
    border-radius: 16px;
  }

  #projectDetail .task-add-head {
    min-height: 58px;
    padding: 12px 14px;
  }

  #projectDetail .task-add-icon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    font-size: 17px;
  }

  #projectDetail .task-add-title {
    gap: 10px;
  }

  #projectDetail .task-add-title h3 {
    font-size: 17px;
  }

  #projectDetail .task-add-title small {
    margin-top: 1px;
    font-size: 12px;
  }

  #projectDetail .project-task-composer.task-composer-expanded {
    gap: 10px;
    padding: 12px;
  }

  #projectDetail .task-title-field,
  #projectDetail .task-detail-field {
    padding: 0;
  }

  #projectDetail .task-field {
    gap: 6px;
  }

  #projectDetail .task-field > span {
    font-size: 12px;
  }

  #projectDetail .task-form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    border-top: 0;
    border-bottom: 0;
  }

  #projectDetail .task-form-column,
  #projectDetail .task-form-column + .task-form-column {
    gap: 10px;
    padding: 0;
    border-left: 0;
  }

  #projectDetail .task-title-input,
  #projectDetail .task-detail-field textarea,
  #projectDetail .task-field .date-button,
  #projectDetail .task-field .time-button,
  #projectDetail .task-field .custom-select {
    min-height: 40px;
    border-radius: 12px;
    padding: 8px 12px;
    font-size: 14px;
  }

  #projectDetail .task-detail-field textarea {
    min-height: 72px;
  }

  #projectDetail .task-type-chip-row {
    min-height: 0;
    gap: 7px;
  }

  #projectDetail .task-type-chip {
    min-height: 32px;
    padding: 6px 11px;
    font-size: 12px;
  }

  #projectDetail .task-time-range {
    gap: 8px;
  }

  #projectDetail .task-option-row {
    min-height: 36px;
    gap: 14px;
    padding: 2px 0;
    border-bottom: 0;
  }

  #projectDetail .task-form-footer {
    padding-top: 8px;
  }

  #projectDetail .task-form-footer .pill.primary {
    min-height: 40px;
    padding-inline: 18px;
  }

  #projectDetail .memo-toolbar {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    padding: 8px;
    overflow-x: auto;
  }

  #projectDetail .memo-toolbar button {
    display: grid;
    place-items: center;
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
    padding: 0;
    font-size: 0;
    border-radius: 9px;
  }

  #projectDetail .memo-toolbar button::before {
    font-size: 14px;
    font-weight: 950;
    line-height: 1;
  }

  #projectDetail .memo-toolbar button[data-memo-format="text"]::before {
    content: "T";
  }

  #projectDetail .memo-toolbar button[data-memo-format="h1"]::before {
    content: "H1";
  }

  #projectDetail .memo-toolbar button[data-memo-format="h2"]::before {
    content: "H2";
  }

  #projectDetail .memo-toolbar button[data-memo-format="h3"]::before {
    content: "H3";
  }

  #projectDetail .memo-toolbar button[data-memo-format="h4"]::before {
    content: "H4";
  }

  #projectDetail .memo-toolbar button[data-memo-format="bold"]::before {
    content: "B";
  }

  #projectDetail .memo-toolbar button[data-memo-format="italic"]::before {
    content: "/";
    font-style: italic;
  }

  #projectDetail .memo-toolbar button[data-memo-format="underline"]::before {
    content: "U";
    text-decoration: underline;
  }

  #projectDetail .memo-toolbar button[data-memo-format="clear"]::before {
    content: "Tx";
  }

  #projectDetail #managementRecords {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  #projectDetail .task-sort-tools,
  #workDetail .task-sort-tools {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  #projectDetail .task-sort-tools > span,
  #workDetail .task-sort-tools > span {
    grid-column: 1 / -1;
    margin-bottom: 2px;
  }

  #projectDetail .task-sort-tools .record-control,
  #workDetail .task-sort-tools .record-control,
  #projectDetail #managementRecords .record-tools .record-control,
  #workDetail #workManagementRecords .record-tools .record-control {
    width: 100%;
    min-height: 40px;
    justify-content: center;
    border-radius: 999px;
  }

  #projectDetail #managementRecords .record-tools {
    order: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  #projectDetail #managementRecords .record-list {
    order: 2;
  }

  #projectDetail #managementRecords .record-composer {
    order: 3;
    position: fixed;
    left: 20px;
    right: 20px;
    bottom: calc(96px + env(safe-area-inset-bottom));
    z-index: 8;
    padding: 12px;
    border-radius: 16px;
    background: rgba(32, 32, 32, 0.96);
    backdrop-filter: blur(14px);
  }

  #projectDetail #detailRecordsTab.active {
    padding-bottom: 220px;
  }

  #workDetail #workManagementRecords {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  #workDetail #workManagementRecords .record-tools {
    order: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  #workDetail #workManagementRecords .record-list {
    order: 2;
  }

  #workDetail #workManagementRecords .record-composer {
    order: 3;
    position: fixed;
    left: 20px;
    right: 20px;
    bottom: calc(96px + env(safe-area-inset-bottom));
    z-index: 8;
    padding: 12px;
    border-radius: 16px;
    background: rgba(32, 32, 32, 0.96);
    backdrop-filter: blur(14px);
  }

  #workDetail #workDetailRecordsTab.active {
    padding-bottom: 220px;
  }

  .mobile-admin-panel {
    display: grid;
    gap: 12px;
    padding-bottom: calc(130px + env(safe-area-inset-bottom));
  }

  .mobile-admin-panel h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 950;
  }

  .mobile-admin-user {
    display: grid;
    gap: 12px;
    padding: 14px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  }

  .mobile-admin-user strong,
  .mobile-admin-user span,
  .mobile-admin-user small {
    display: block;
  }

  .mobile-admin-user strong {
    color: var(--text);
    font-size: 16px;
    font-weight: 950;
  }

  .mobile-admin-user span,
  .mobile-admin-user small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
  }

  .mobile-admin-user > div:last-child {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }

  .mobile-admin-user button {
    min-height: 34px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text);
    font-size: 12px;
    font-weight: 900;
  }

  .mobile-admin-user button.active {
    background: var(--accent);
    color: #061007;
  }

  .mobile-admin-user button.danger {
    color: #ff7d8c;
    background: rgba(255, 61, 87, 0.13);
  }
}

@media (max-width: 768px) {
  #workDetail.detail-shell.open {
    inset: 0 0 calc(82px + env(safe-area-inset-bottom)) 0;
    z-index: 120;
    background: #05090b;
    overflow: auto;
  }

  #workDetail .detail-page {
    width: 100%;
    min-height: calc(100dvh - 82px - env(safe-area-inset-bottom));
    margin: 0;
    padding: 0 20px 34px;
    background: radial-gradient(circle at 50% -10%, rgba(26, 64, 54, 0.26), transparent 36%), #05090b;
    box-shadow: none;
    animation: none;
  }

  #workDetail .detail-actions {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: calc(58px + env(safe-area-inset-top));
    margin: 0 -20px 14px;
    padding: calc(10px + env(safe-area-inset-top)) 20px 8px;
    background: linear-gradient(180deg, rgba(5, 9, 11, 0.98), rgba(5, 9, 11, 0.86));
    backdrop-filter: blur(16px);
  }

  #workDetail #closeWorkDetailBtn,
  #workDetail #deleteWorkDetailBtn {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    border-radius: 999px;
    padding: 0;
    font-size: 0;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text);
    box-shadow: none;
  }

  #workDetail #closeWorkDetailBtn::before {
    content: "‹";
    font-size: 42px;
    font-weight: 400;
    line-height: 34px;
  }

  #workDetail #deleteWorkDetailBtn::before {
    content: "삭제";
    color: #ff7d8c;
    font-size: 12px;
    font-weight: 950;
  }

  #workDetail .detail-title {
    width: 100%;
    min-height: auto;
    margin: 0 0 12px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text);
    font-size: 27px;
    line-height: 1.15;
    font-weight: 950;
    letter-spacing: -0.2px;
  }

  #workDetail .detail-tabs {
    position: sticky;
    top: calc(58px + env(safe-area-inset-top));
    z-index: 4;
    margin: 0 0 12px;
    padding: 4px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 4px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(14px);
  }

  #workDetail .detail-tab {
    min-height: 34px;
    border-radius: 10px;
    font-size: 11px;
    white-space: nowrap;
  }

  #workDetail .detail-tab.active {
    background: rgba(30, 215, 96, 0.16);
    color: var(--accent);
    box-shadow: none;
  }

  #workDetail .detail-properties {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    padding: 4px 0 10px;
  }

  #workDetail .property-row {
    min-height: 38px;
    display: grid;
    grid-template-columns: 116px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    padding: 3px 2px;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  #workDetail .property-label {
    display: flex;
    align-items: center;
    gap: 7px;
    color: rgba(255, 255, 255, 0.58);
    font-size: 14px;
    font-weight: 760;
  }

  #workDetail .property-label span {
    width: 18px;
    color: rgba(255, 255, 255, 0.62);
    font-size: 16px;
    text-align: center;
  }

  #workDetail .property-value {
    min-width: 0;
    display: flex;
    justify-content: flex-end;
    color: var(--text);
    font-size: 15px;
    font-weight: 900;
  }

  #workDetail .custom-select.compact,
  #workDetail .date-button.compact {
    min-height: 30px;
    max-width: 170px;
    border-radius: 7px;
    padding: 4px 9px;
    font-size: 14px;
    line-height: 1.2;
    box-shadow: none;
  }

  #workDetail .multi-select span {
    max-width: 132px;
  }

  #workDetail .property-break {
    display: none;
  }

  #workDetail .date-field-control {
    justify-content: flex-end;
    gap: 8px;
  }

  #workDetail .calendar-toggle {
    min-height: 28px;
    gap: 6px;
    padding: 0 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.64);
  }

  #workDetail .calendar-toggle input,
  #workDetail .task-option-row input[type="checkbox"],
  #workDetail .task-calendar-toggle input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    inline-size: 18px;
    block-size: 18px;
    min-width: 18px;
    min-height: 18px;
    max-width: 18px;
    max-height: 18px;
    aspect-ratio: 1 / 1;
    border-radius: 5px;
    border: 1.5px solid rgba(255, 255, 255, 0.55);
    background: rgba(0, 0, 0, 0.36);
    box-shadow: none;
    padding: 0;
    flex: 0 0 18px;
  }

  #workDetail .calendar-toggle input:checked,
  #workDetail .task-option-row input[type="checkbox"]:checked,
  #workDetail .task-calendar-toggle input[type="checkbox"]:checked {
    border-color: var(--accent);
    background-color: var(--accent);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 10.2 8.4 13.5 15.2 6.5' fill='none' stroke='%23020b05' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 14px 14px;
  }

  #workDetail .calendar-toggle span {
    font-size: 11px;
    font-weight: 850;
  }

  #workDetail .record-composer.task-add-card {
    border-radius: 16px;
  }

  #workDetail .task-add-head {
    min-height: 58px;
    padding: 12px 14px;
  }

  #workDetail .task-add-icon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    font-size: 17px;
  }

  #workDetail .task-add-title {
    gap: 10px;
  }

  #workDetail .task-add-title h3 {
    font-size: 17px;
  }

  #workDetail .task-add-title small {
    margin-top: 1px;
    font-size: 12px;
  }

  #workDetail .project-task-composer.task-composer-expanded {
    gap: 10px;
    padding: 12px;
  }

  #workDetail .task-title-field,
  #workDetail .task-detail-field {
    padding: 0;
  }

  #workDetail .task-field {
    gap: 6px;
  }

  #workDetail .task-field > span {
    font-size: 12px;
  }

  #workDetail .task-form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    border-top: 0;
    border-bottom: 0;
  }

  #workDetail .task-form-column,
  #workDetail .task-form-column + .task-form-column {
    gap: 10px;
    padding: 0;
    border-left: 0;
  }

  #workDetail .task-title-input,
  #workDetail .task-detail-field textarea,
  #workDetail .task-field .date-button,
  #workDetail .task-field .time-button,
  #workDetail .task-field .custom-select {
    min-height: 40px;
    border-radius: 12px;
    padding: 8px 12px;
    font-size: 14px;
  }

  #workDetail .task-detail-field textarea {
    min-height: 72px;
  }

  #workDetail .task-type-chip-row {
    min-height: 0;
    gap: 7px;
  }

  #workDetail .task-type-chip {
    min-height: 32px;
    padding: 6px 11px;
    font-size: 12px;
  }

  #workDetail .task-time-range {
    gap: 8px;
  }

  #workDetail .task-option-row {
    min-height: 36px;
    gap: 14px;
    padding: 2px 0;
    border-bottom: 0;
  }

  #workDetail .task-form-footer {
    padding-top: 8px;
  }

  #workDetail .task-form-footer .pill.primary {
    min-height: 40px;
    padding-inline: 18px;
  }

  #workDetail .memo-toolbar {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    padding: 8px;
    overflow-x: auto;
  }

  #workDetail .memo-toolbar button {
    display: grid;
    place-items: center;
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
    padding: 0;
    font-size: 0;
    border-radius: 9px;
  }

  #workDetail .memo-toolbar button::before {
    font-size: 14px;
    font-weight: 950;
    line-height: 1;
  }

  #workDetail .memo-toolbar button[data-memo-format="text"]::before {
    content: "T";
  }

  #workDetail .memo-toolbar button[data-memo-format="h1"]::before {
    content: "H1";
  }

  #workDetail .memo-toolbar button[data-memo-format="h2"]::before {
    content: "H2";
  }

  #workDetail .memo-toolbar button[data-memo-format="h3"]::before {
    content: "H3";
  }

  #workDetail .memo-toolbar button[data-memo-format="h4"]::before {
    content: "H4";
  }

  #workDetail .memo-toolbar button[data-memo-format="bold"]::before {
    content: "B";
  }

  #workDetail .memo-toolbar button[data-memo-format="italic"]::before {
    content: "/";
    font-style: italic;
  }

  #workDetail .memo-toolbar button[data-memo-format="underline"]::before {
    content: "U";
    text-decoration: underline;
  }

  #workDetail .memo-toolbar button[data-memo-format="clear"]::before {
    content: "Tx";
  }

  #workDetail #workDetailMemo {
    min-height: 140px;
    margin-top: 10px;
    border-radius: 0;
    background: transparent;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  }
}

/* Mobile interaction/layout hotfix - keep after all mobile base rules */
@media (max-width: 768px) {
  #mobileApp button,
  #mobileApp label {
    pointer-events: auto;
    touch-action: manipulation;
  }

  .main {
    padding: calc(78px + env(safe-area-inset-top)) 14px calc(108px + env(safe-area-inset-bottom));
  }

  .mobile-topbar.mobile-v2 {
    min-height: 62px;
    padding: calc(10px + env(safe-area-inset-top)) 14px 10px;
    background: rgba(4, 8, 10, .98);
  }

  .mobile-topbar.mobile-v2 strong {
    font-size: 27px;
    line-height: 1.1;
  }

  .mobile-icon-btn {
    min-width: 62px;
    min-height: 42px;
    border-radius: 21px;
    font-size: 13px;
  }

  #mobileNotifyCount[hidden] { display: none !important; }

  .mobile-more-page,
  .mobile-more-subpage {
    gap: 13px;
    padding-top: 0;
  }

  .mobile-more-subpage > header {
    position: relative;
    top: auto;
    min-height: 48px;
    background: var(--bg);
  }

  .mobile-more-subpage > header button {
    width: 42px;
    height: 42px;
  }

  .mobile-profile-photo-card {
    gap: 7px;
    padding: 14px 12px;
  }

  .mobile-profile-avatar.large {
    width: 78px;
    height: 78px;
    flex-basis: 78px;
    font-size: 28px;
  }

  .mobile-state-notice {
    border: 1px solid rgba(83, 157, 245, .28);
    border-radius: 12px;
    background: rgba(83, 157, 245, .08);
    color: var(--near);
    padding: 11px 12px;
    font-size: 12px;
    line-height: 1.45;
  }

  .mobile-notification-page > header {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
  }

  .mobile-notification-page > header h2 { text-align: center; }
  .mobile-notification-page .mobile-notification-close {
    display: grid;
    place-items: center;
    width: 42px;
    min-height: 42px;
    padding: 0;
    border-radius: 50%;
    font-size: 28px;
  }

  .mobile-notification-page .notification-show-read input[type="checkbox"] {
    appearance: none;
    width: 20px;
    min-width: 20px;
    max-width: 20px;
    height: 20px;
    min-height: 20px;
    max-height: 20px;
    padding: 0;
    border: 1.5px solid var(--border);
    border-radius: 5px;
    background: var(--surface-2);
    box-shadow: none;
  }

  .mobile-notification-page .notification-show-read input[type="checkbox"]:checked {
    border-color: var(--accent);
    background: var(--accent) url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 10.2 8.4 13.5 15.2 6.5' fill='none' stroke='%23020b05' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/15px no-repeat;
  }
}

@media (max-width: 768px) {
  .mobile-board-page,
  .mobile-board-full {
    display: grid;
    gap: 14px;
    padding: 6px 4px 124px;
  }

  .mobile-board-search {
    display: grid;
    grid-template-columns: 1fr 94px;
    gap: 10px;
  }

  .mobile-board-search input,
  .mobile-board-search button {
    min-height: 46px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text);
    padding: 0 14px;
    font-weight: 850;
  }

  .mobile-board-search button.active {
    color: var(--accent);
    box-shadow: inset 0 0 0 1.5px var(--accent);
  }

  .mobile-board-filter-panel {
    display: grid;
    gap: 10px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.055);
    padding: 12px;
  }

  .mobile-board-filter-panel p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
  }

  .mobile-board-filter-panel div {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .mobile-board-filter-panel button {
    min-width: max-content;
    min-height: 36px;
    padding-inline: 14px;
  }

  .mobile-board-list {
    display: grid;
  }

  .mobile-board-row {
    display: grid;
    gap: 5px;
    width: 100%;
    min-height: 58px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    background: transparent;
    color: var(--text);
    padding: 10px 0;
    text-align: left;
  }

  .mobile-board-row:active {
    transform: none;
    background: transparent;
  }

  .mobile-board-row:focus,
  .mobile-board-row:focus-visible {
    outline: none;
    box-shadow: none;
  }

  .mobile-board-row::after {
    content: none;
  }

  .mobile-board-row strong {
    display: flex;
    gap: 8px;
    align-items: center;
    min-width: 0;
    font-size: 16px;
    font-weight: 850;
  }

  .mobile-board-row.notice strong {
    font-weight: 950;
  }

  .mobile-board-row span:last-child {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
  }

  .mobile-board-full .board-editor-card,
  .mobile-board-full .board-detail-card {
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0 0 122px;
  }

  .mobile-board-full .board-editor-top,
  .mobile-board-full .board-detail-top {
    position: static;
    inset: auto;
    right: auto;
    z-index: 3;
    min-height: 52px;
    padding: 4px 0;
    background: transparent;
    backdrop-filter: none;
  }

  .mobile-board-full .board-editor-top > div {
    width: 100%;
    display: flex;
    align-items: center;
  }

  .mobile-board-full .board-editor-top .board-list-back {
    margin-right: auto;
  }

  .mobile-board-full .board-comment-head {
    min-width: 0;
    flex-wrap: wrap;
  }

  .mobile-board-full .board-comment-identity {
    min-width: 0;
  }

  .mobile-board-full .board-comment-actions {
    margin-left: auto;
  }

  .mobile-board-full .board-comment-actions button {
    min-height: 38px;
    padding: 0 12px;
    font-size: 13px;
    font-weight: 900;
  }

  .mobile-board-full .board-editor-meta,
  .mobile-board-full .board-notice-extra,
  .mobile-board-full .board-comment-form {
    grid-template-columns: 1fr;
  }

  .mobile-board-full .board-title-line {
    grid-template-columns: minmax(0, 1fr);
  }

  .mobile-board-full .board-notice-options {
    display: grid;
    border-radius: 14px;
    padding: 14px;
  }

  .mobile-board-full .board-notice-options.open {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
    align-items: start;
  }

  .mobile-board-full .board-notice-options.open .board-admin-summary {
    grid-column: 1;
    grid-row: 1;
    min-height: 44px;
  }

  .mobile-board-full .board-notice-options.open .board-notice-extra {
    display: contents;
  }

  .mobile-board-full .board-notice-options.open .board-check {
    min-width: 0;
    min-height: 44px;
  }

  .mobile-board-full .board-notice-options.open .board-notice-extra > label:not(.board-check) {
    display: grid;
    gap: 6px;
    min-width: 0;
  }

  .mobile-board-full .board-notice-options.open .board-custom-date.open {
    display: grid !important;
  }

  .mobile-board-full .board-notice-options.open .board-notice-extra select,
  .mobile-board-full .board-notice-options.open .board-notice-date-button.date-button.compact {
    width: 100%;
    min-width: 0;
  }

  .mobile-board-full .board-rich-toolbar {
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  .mobile-board-full .board-content-editor {
    min-height: 260px;
  }

  .mobile-board-full .board-reply-form {
    grid-template-columns: 1fr auto;
  }

  .mobile-board-full .board-reply-form input {
    grid-column: 1 / -1;
  }

  .mobile-board-full .board-reply-list {
    margin-left: 10px;
    padding-left: 9px;
  }

  .mobile-board-full .board-detail-card h2 {
    font-size: 30px;
  }

  #projectDetail .project-broadcast-desktop {
    display: none;
  }

  #projectDetail .project-status-with-broadcast {
    justify-content: flex-end;
  }

  #projectDetail .project-broadcast-mobile-row {
    display: grid;
  }

  #projectDetail .project-broadcast-toggle.icon-only {
    min-width: 44px;
    justify-content: center;
    padding: 0 10px;
  }

  #projectDetail .project-broadcast-toggle.icon-only > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}