:root {
  color-scheme: light;
  --bg: #eee3d3;
  --panel: #fbf7f0;
  --panel-soft: #eadbc9;
  --border: #d5c2ad;
  --text: #3c302a;
  --muted: #7e6f65;
  --accent: #c87558;
  --accent-hover: #ad5d43;
}

html { font-size: 17px; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 1.1em; height: 1.1em; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 82% 8%, rgb(207 139 108 / 18%), transparent 32%),
    radial-gradient(circle at 18% 82%, rgb(187 148 110 / 13%), transparent 34%),
    linear-gradient(145deg, #f3eadc 0%, var(--bg) 48%, #e9dccb 100%);
  background-attachment: fixed;
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button, input, textarea, select { font: inherit; }
button { cursor: pointer; }

.app-shell { display: flex; min-height: 100vh; }
.sidebar { position: sticky; top: 0; display: flex; flex: 0 0 230px; flex-direction: column; height: 100vh; padding: 17px 14px; border-right: 1px solid var(--border); background: linear-gradient(180deg, #e8d8c4, #f1e6d7); box-shadow: 8px 0 28px rgb(91 61 43 / 8%); view-transition-name: app-sidebar; }
.sidebar .brand { padding: 0 8px 18px; border-bottom: 1px solid var(--border); }
.sidebar-nav { margin-top: 20px; }
.sidebar-nav { min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #cfb59c transparent; }

@view-transition { navigation: auto; }
::view-transition-old(app-sidebar), ::view-transition-new(app-sidebar) { animation-duration: 0s; }
.sidebar-label { margin: 0 8px 9px; color: #69717e; font-size: .62rem; font-weight: 800; letter-spacing: .12em; }
.sidebar-section-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.sidebar-section-heading .sidebar-label { margin-bottom: 0; }
.sidebar-section-heading button { display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 5px; background: transparent; color: var(--muted); font-size: 1rem; }
.sidebar-section-heading button .icon { width: 15px; height: 15px; }
.sidebar-section-heading button:hover { background: var(--panel-soft); color: var(--text); }
.sidebar-space-link { display: flex; flex: 1; align-items: center; gap: 9px; padding: 9px 8px; border-radius: 8px; color: var(--muted); text-decoration: none; font-size: .78rem; font-weight: 700; }
.sidebar-space-link:hover, .sidebar-space-link.active { background: #f7eee2; color: var(--text); }
.sidebar-space-link > .icon { width: 18px; height: 18px; color: var(--accent); }
.sidebar-main-link { display: flex; align-items: center; gap: 9px; margin-bottom: 4px; padding: 9px 8px; border-radius: 8px; color: var(--muted); text-decoration: none; font-size: .78rem; font-weight: 700; }
.sidebar-main-link:hover, .sidebar-main-link.active { background: #f7eee2; color: var(--text); }
.sidebar-main-link > .icon { width: 18px; height: 18px; color: var(--accent); }
.sidebar-main-link small { margin-left: auto; min-width: 22px; padding: 2px 6px; border-radius: 12px; background: var(--panel-soft); text-align: center; }
.workspace-nav-group { padding: 5px; border: 1px solid rgb(213 194 173 / 75%); border-radius: 11px; background: rgb(251 247 240 / 38%); }
.workspace-nav-group .sidebar-section-heading { margin-bottom: 4px; }
.workspace-nav-group .sidebar-space-link { padding: 8px 7px; }
.workspace-nav-group .sidebar-space-link.active { background: transparent; color: var(--text); }
.workspace-nav-group .nav-project { margin-top: 2px; padding: 7px; }
.workspace-nav-group .nav-project.active { box-shadow: inset 3px 0 var(--accent); }
.workspace-nav-group .new-project-form { margin: 4px 2px 8px; }
.sidebar-trash-link { border-radius: 8px; }
.nav-project { display: flex; align-items: center; gap: 9px; padding: 8px; border-radius: 7px; color: var(--muted); text-decoration: none; font-size: .82rem; }
.nav-project:hover, .nav-project.active { background: #f7eee2; color: var(--text); }
.nav-project > span:last-child { display: grid; min-width: 0; gap: 2px; }
.nav-project strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-project small { color: #69717e; font-size: .61rem; }
.project-nav-row { display: flex; align-items: center; gap: 3px; }
.project-nav-row .nav-project { min-width: 0; flex: 1; }
.project-nav-row > button { width: 24px; height: 24px; padding: 0; border: 0; border-radius: 5px; background: transparent; color: var(--muted); }
.nav-icon { display: grid; place-items: center; width: 25px; height: 25px; border: 1px solid #d4a58f; border-radius: 7px; background: #f4ded0; color: #a95d43; font-size: .75rem; }
.nav-board { display: flex; align-items: center; gap: 9px; margin-top: 3px; padding: 8px 10px 8px 17px; border-radius: 7px; color: var(--muted); font-size: .78rem; }
.nav-board.active { background: rgb(22 140 245 / 15%); color: #b9e1ff; }
.nav-board small { margin-left: auto; color: #69717e; }
.nav-tree { display: grid; gap: 2px; margin: 4px 0 0 35px; padding-left: 11px; border-left: 1px solid var(--border); }
.nav-tree a { display: flex; align-items: center; gap: 7px; padding: 5px 3px; color: var(--muted); text-decoration: none; font-size: .69rem; }
.nav-tree a:hover { color: var(--text); }
.nav-tree .dot { width: 6px; height: 6px; }
.nav-tree small { margin-left: auto; color: #69717e; }
.new-project-form { display: flex; gap: 5px; margin: 0 0 10px; }
.new-project-form input { min-width: 0; flex: 1; padding: 7px 8px; border: 1px solid var(--border); border-radius: 6px; background: #fffaf3; color: var(--text); font-size: .7rem; }
.new-project-form button { width: 29px; border: 0; border-radius: 6px; background: var(--accent); color: white; }
.new-project-form .cancel-project-button { background: var(--panel-soft); color: var(--muted); }
.project-trash { margin-top: 14px; border-top: 1px solid var(--border); color: var(--muted); font-size: .7rem; }
.project-trash > summary { display: flex; align-items: center; gap: 7px; padding: 11px 7px; cursor: pointer; list-style: none; }
.project-trash > summary small { margin-left: auto; padding: 2px 6px; border-radius: 10px; background: var(--panel-soft); }
.trash-list { display: grid; gap: 4px; padding-bottom: 8px; }
.trash-list > div { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 7px; border-radius: 6px; background: #f8eee1; }
.trash-list > div > span { display: grid; min-width: 0; gap: 2px; }
.trash-list strong { overflow: hidden; color: var(--text); text-overflow: ellipsis; white-space: nowrap; font-size: .7rem; }
.trash-list small { color: #69717e; font-size: .6rem; }
.trash-list button { padding: 4px 6px; border: 0; border-radius: 5px; background: var(--panel-soft); color: #c8baff; font-size: .61rem; }
.trash-list p { margin: 4px 7px; color: #69717e; }
.trash-list .empty-trash-form { margin-top: 4px; }
.trash-list .empty-trash-form button { width: 100%; padding: 7px; background: rgb(235 101 113 / 10%); color: #eb6571; }
.trash-list .empty-trash-form button:hover { background: rgb(235 101 113 / 18%); }
.new-board-form { display: flex; gap: 5px; margin: 4px 0 6px 17px; }
.new-board-form input { min-width: 0; flex: 1; padding: 7px 8px; border: 1px solid var(--border); border-radius: 6px; background: #fffaf3; color: var(--text); font-size: .68rem; }
.new-board-form button { width: 27px; border: 0; border-radius: 6px; background: var(--accent); color: white; }
.new-board-form .cancel-project-button { background: var(--panel-soft); color: var(--muted); }
.sidebar-bottom-nav { display: grid; gap: 3px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border); }
.sidebar-bottom-nav .sidebar-main-link { margin: 0; }
.sidebar-settings-link { display: flex; align-items: center; gap: 9px; margin-top: 0; padding: 9px 8px; border-radius: 8px; color: var(--muted); text-decoration: none; font-size: .75rem; font-weight: 700; }
.sidebar-settings-link:hover, .sidebar-settings-link.active { background: #f7eee2; color: var(--text); }
.sidebar-settings-link > .icon { width: 17px; height: 17px; color: var(--accent); }
.sidebar > .status { margin-top: 0; padding: 9px 8px 0; }
.workspace-label { margin-top: 20px; margin-bottom: 7px; }
.shared-spaces-label { margin-top: 17px; margin-bottom: 7px; }
.space-tree { margin: 0 0 4px; }
.space-tree > summary { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto auto 8px; align-items: center; gap: 6px; min-height: 42px; padding: 5px 9px 5px 6px; border: 1px solid transparent; border-radius: 10px; color: #62594f; cursor: pointer; list-style: none; font-size: .78rem; }
.space-tree > summary::-webkit-details-marker { display: none; }
.space-tree > summary:hover { background: rgb(255 250 243 / 62%); color: var(--text); }
.space-tree[open] > summary { border-color: #d8c0a8; background: #fff8ef; color: var(--text); box-shadow: 0 3px 10px rgb(91 61 43 / 6%); }
.space-tree > summary strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.space-node-icon { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 8px; background: #f1d8ca; color: var(--accent-hover); }.space-node-icon.group { background: #e7ddc8; color: #7c684c; }.space-node-icon .icon { width: 15px; height: 15px; }
.space-chevron { width: 6px; height: 6px; border-right: 1.5px solid #907f70; border-bottom: 1.5px solid #907f70; transform: rotate(45deg); transition: transform .16s ease; }.space-tree[open] .space-chevron { transform: rotate(225deg); }
.space-project-count, .space-role { display: grid; min-width: 20px; height: 20px; place-items: center; padding: 0 5px; border-radius: 10px; background: #eadccd; color: #76685c; font-size: .61rem; font-weight: 800; }
.space-add-project { display: grid; width: 24px; height: 24px; place-items: center; padding: 0; border: 0; border-radius: 6px; background: transparent; color: #967663; cursor: pointer; }.space-add-project:hover { background: #f1d8ca; color: var(--accent-hover); }.space-add-project .icon { width: 14px; height: 14px; }
.space-add-placeholder { width: 24px; }
.space-tree-content { position: relative; display: grid; gap: 3px; margin: 4px 0 9px 20px; padding: 3px 0 2px 12px; border-left: 1px solid #c9aa8d; }
.space-tree-content:not(:has(.space-project)) { border-left-color: transparent; }
.space-project { position: relative; display: grid; grid-template-columns: 27px minmax(0, 1fr); align-items: center; gap: 7px; min-height: 38px; padding: 5px 7px; border-radius: 8px; color: var(--muted); text-decoration: none; }
.space-project::before { content: ""; position: absolute; z-index: 0; top: 50%; left: -13px; width: 21px; border-top: 1px solid #c9aa8d; }
.space-project:last-of-type::after { content: ""; position: absolute; z-index: 0; top: calc(50% + 1px); bottom: -7px; left: -13px; width: 2px; background: #eee0cd; }
.space-project:hover { background: rgb(255 250 243 / 62%); color: var(--text); }.space-project.active { background: #fff8ef; color: var(--text); box-shadow: inset 3px 0 var(--accent); }
.space-project > span:last-child { display: grid; min-width: 0; }.space-project strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .75rem; }.space-project small { color: var(--muted); font-size: .62rem; }
.space-branch-icon { position: relative; z-index: 1; display: grid; width: 27px; height: 27px; place-items: center; border: 1px solid #dfc8b5; border-radius: 7px; background: #fbede3; color: var(--accent); }.space-branch-icon .icon { width: 14px; height: 14px; }
.space-empty-label { padding: 8px; color: #9a8b7d; font-size: .67rem; font-style: italic; }
.space-create-button { appearance: none; display: flex; align-items: center; gap: 7px; width: 100%; padding: 8px; border: 0; border-radius: 8px; background: transparent; color: var(--accent-hover); cursor: pointer; font: inherit; font-size: .7rem; font-weight: 800; text-align: left; }.space-create-button:hover { background: #f7e8dc; }.space-create-button .icon { width: 14px; height: 14px; }.space-create-form { margin: 4px 0 2px; }.space-create-form[hidden] { display: none; }.space-create-form button { display: grid; place-items: center; flex: 0 0 29px; }.space-create-form .icon { width: 14px; height: 14px; }
.project-create-menu { position: relative; }.project-create-menu > summary { list-style: none; cursor: pointer; }.project-create-menu > summary::-webkit-details-marker { display: none; }.project-create-menu > form { position: absolute; z-index: 60; top: calc(100% + 7px); right: 0; display: flex; gap: 7px; width: min(370px, 75vw); padding: 9px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); box-shadow: 0 14px 32px rgb(91 61 43 / 18%); }.project-create-menu input { min-width: 0; flex: 1; padding: 9px 10px; border: 1px solid var(--border); border-radius: 8px; background: #fffaf3; color: var(--text); }
.main-area { min-width: 0; flex: 1; }

.topbar {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 28px;
  border-bottom: 1px solid var(--border);
  background: rgb(251 247 240 / 88%);
  backdrop-filter: blur(14px);
  position: sticky;
  top: 0;
  z-index: 10;
}

.brand { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-weight: 750; }
.brand-mark { display: grid; place-items: center; width: 60px; height: 60px; flex: 0 0 60px; }
.brand-mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
.status { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: .82rem; }
.status span { width: 7px; height: 7px; border-radius: 50%; background: #4bd28f; box-shadow: 0 0 9px #4bd28f; }
.search-container { position: relative; width: min(620px, 100%); }
.search-box { display: flex; align-items: center; width: 100%; gap: 9px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px; background: #fffaf3; color: var(--muted); box-shadow: 0 2px 8px rgb(91 61 43 / 5%); }
.search-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgb(22 140 245 / 13%); }
.search-box input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: var(--text); font-size: .78rem; }
.search-box kbd { padding: 2px 5px; border: 1px solid #3a404b; border-radius: 4px; color: #747c89; font-size: .61rem; }
.search-results { position: absolute; top: calc(100% + 7px); left: 0; right: 0; max-height: min(420px, 60vh); overflow-y: auto; padding: 6px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); box-shadow: 0 16px 35px rgb(0 0 0 / 28%); }
.search-result { display: grid; width: 100%; gap: 4px; padding: 10px; border: 0; border-radius: 7px; background: transparent; color: var(--text); text-align: left; }
.search-result:hover, .search-result:focus { outline: 0; background: var(--panel-soft); }
.search-result strong { font-size: .78rem; }
.search-result small { color: var(--muted); font-size: .67rem; }
.search-result-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.search-empty { margin: 0; padding: 15px 10px; color: var(--muted); text-align: center; font-size: .75rem; }

.workspace { max-width: 1440px; margin: 0 auto; padding: 34px 28px; }
.board-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 16px; }
.eyebrow { display: flex; align-items: center; gap: 6px; margin: 0 0 7px; color: var(--accent-hover); font-size: .69rem; font-weight: 800; letter-spacing: .13em; }
h1 { margin: 0; font-size: clamp(1.8rem, 3vw, 2.6rem); letter-spacing: -.04em; }
.project-title-display { display: flex; align-items: center; gap: 8px; }
.project-title-display button { padding: 5px; border: 0; background: transparent; color: var(--muted); font-size: 1rem; }
.project-title-display button:hover { color: var(--text); }
.project-title-form { display: flex; align-items: center; gap: 8px; }
.project-title-form input { width: min(430px, 55vw); padding: 2px 4px; border: 1px solid transparent; border-radius: 7px; outline: 0; background: transparent; color: var(--text); font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 750; letter-spacing: -.04em; }
.project-title-form input { border-color: var(--accent); background: #15181e; }
.project-title-form .secondary-button { padding: 6px 9px; font-size: .68rem; }
.project-context, .project-context-form { display: flex; align-items: center; gap: 10px; }
.project-context h1 { margin: 0; color: #49372f; line-height: 1; text-shadow: none; }
.project-context button { padding: 2px; border: 0; background: transparent; color: #69717e; font-size: .75rem; }
.project-context button:hover { color: var(--text); }
.project-heading-actions { display: flex; align-items: center; gap: 7px; }
.project-actions-menu { position: relative; }
.project-actions-menu > summary { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; color: var(--muted); cursor: pointer; list-style: none; font-size: 1.15rem; }
.project-actions-menu > summary:hover, .project-actions-menu[open] > summary { background: var(--panel-soft); color: var(--text); }
.project-actions-menu > div { position: absolute; top: calc(100% + 5px); right: 0; z-index: 20; width: 185px; padding: 5px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); box-shadow: 0 14px 30px rgb(0 0 0 / 28%); }
.project-actions-menu form { margin: 0; }
.project-actions-menu button { display: flex; width: 100%; align-items: center; gap: 7px; padding: 8px 9px; border: 0; border-radius: 5px; background: transparent; color: var(--text); text-align: left; font-size: .7rem; }
.project-actions-menu .menu-icon { color: var(--muted); }
.project-actions-menu button:hover { background: var(--panel-soft); }
.project-actions-menu .danger-menu-item { color: #eb6571; }
.project-context-form input:not([type="hidden"]) { width: min(430px, 55vw); padding: 3px 6px; border: 1px solid var(--accent); border-radius: 7px; background: #15181e; color: var(--accent-hover); font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 750; letter-spacing: -.04em; }
.project-context-form .secondary-button { padding: 5px 8px; font-size: .66rem; }
.board-tabs-bar { margin-bottom: 22px; border-bottom: 1px solid var(--border); }
.board-tabs { display: flex; align-items: center; gap: 3px; overflow-x: auto; }
.board-tab { display: flex; flex: 0 0 auto; align-items: center; gap: 7px; padding: 9px 11px; border-bottom: 2px solid transparent; color: var(--muted); text-decoration: none; font-size: .75rem; }
.board-tab:hover { color: var(--text); }
.board-tab.active { border-bottom-color: var(--accent); color: var(--text); }
.board-tab button { padding: 0; border: 0; background: transparent; color: #69717e; font-size: .75rem; }
.board-tab button:hover { color: var(--text); }
.add-board-tab { display: grid; flex: 0 0 30px; width: 30px; height: 30px; place-items: center; padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--muted); }
.add-board-tab .icon { width: 16px; height: 16px; }.add-board-tab:hover { background: var(--panel-soft); color: var(--accent-hover); }
.board-tab[data-reorderable="true"] { cursor: grab; user-select: none; touch-action: pan-y; }.board-tab[data-reorderable="true"]:active { cursor: grabbing; }.board-tab.board-tab-dragging { z-index: 2; opacity: .5; transform: translateY(2px); }
.board-title-inline-form { display: flex; align-items: center; gap: 6px; padding: 8px 0; }
.board-title-inline-form input { min-width: 220px; padding: 7px 9px; border: 1px solid var(--accent); border-radius: 6px; background: #15181e; color: var(--text); font-size: .75rem; }
.board-title-inline-form .secondary-button { padding: 6px 9px; font-size: .68rem; }
.board-tabs-bar .new-board-form { width: min(430px, 100%); margin: 0; padding: 8px 0; align-items: stretch; }.board-tabs-bar .new-board-form input { height: 34px; box-sizing: border-box; padding: 7px 10px; border-radius: 8px; }.board-tabs-bar .new-board-form button { width: 34px; height: 34px; border-radius: 8px; }.board-tabs-bar:has(.new-board-form:not([hidden])) .add-board-tab { display: none; }
.empty-project { display: grid; justify-items: center; gap: 8px; margin-top: 42px; padding: 55px 20px; border: 1px dashed #353b46; border-radius: 14px; color: var(--muted); text-align: center; }
.empty-project > span { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: rgb(22 140 245 / 14%); color: var(--accent-hover); font-size: 1.3rem; }
.empty-project h2 { margin: 5px 0 0; color: var(--text); font-size: 1rem; }
.empty-project p { margin: 0 0 10px; font-size: .78rem; }
.empty-workspace { display: grid; min-height: 100vh; place-items: center; }
.empty-workspace .empty-project { width: min(560px, 100%); margin: 0; }
.empty-project-form { display: flex; width: min(440px, 100%); gap: 8px; }
.empty-project-form input { min-width: 0; flex: 1; padding: 10px 12px; border: 1px solid var(--border); border-radius: 9px; outline: 0; background: #fffaf3; color: var(--text); }
.empty-project-form input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgb(22 140 245 / 13%); }

.overview-page { padding-top: 48px; }
.page-heading { margin-bottom: 28px; }
.page-heading p:last-child { margin: 8px 0 0; color: var(--muted); }
.stat-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin-bottom: 20px; padding: 8px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.stat-grid article { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 16px; border-left: 1px solid var(--border); }
.stat-grid article:first-child { border-left: 0; }
.stat-grid span { color: var(--muted); font-size: .68rem; line-height: 1.25; }
.stat-grid strong { flex: 0 0 auto; color: var(--accent-hover); font-size: 1.25rem; }
.deadline-stat.overdue strong { color: #b55c46; }
.deadline-stat.upcoming strong { color: #c18442; }
.overview-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.overview-panel, .trash-section { padding: 20px; border: 1px solid var(--border); border-radius: 14px; background: rgb(251 247 240 / 82%); box-shadow: 0 8px 20px rgb(91 61 43 / 6%); }
.overview-panel h2, .trash-section h2 { margin: 0; font-size: 1rem; }
.stat-list { display: grid; margin-top: 15px; }
.stat-list > div { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--border); color: var(--muted); font-size: .78rem; }
.stat-list > div span { display: flex; align-items: center; gap: 8px; }
.stat-list > div strong { color: var(--text); }
.deadline-grid { margin-bottom: 20px; }
.deadline-list { display: grid; margin-top: 15px; }
.deadline-list > a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); color: var(--text); text-decoration: none; }
.deadline-list > a:hover strong { color: var(--accent-hover); }
.deadline-list > a span { display: grid; min-width: 0; gap: 3px; }
.deadline-list strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .78rem; }
.deadline-list small, .deadline-list p { color: var(--muted); font-size: .67rem; }
.deadline-list time { flex: 0 0 auto; color: #a85a42; font-size: .7rem; font-weight: 700; }
.dashboard-section { margin: 26px 0 20px; }.section-title { display: flex; align-items: end; justify-content: space-between; gap: 16px; }.section-title h2 { margin: 2px 0 0; }.section-title > span { color: var(--muted); font-size: .72rem; }
.space-summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-top: 14px; }
.space-summary-card { display: grid; gap: 18px; padding: 17px; border: 1px solid #d8c0a8; border-radius: 14px; background: rgb(251 247 240 / 85%); color: var(--text); text-decoration: none; box-shadow: 0 7px 20px rgb(91 61 43 / 6%); transition: transform .15s ease, border-color .15s ease; }.space-summary-card:hover { border-color: var(--accent); transform: translateY(-2px); }.space-summary-card header { display: flex; align-items: center; gap: 10px; }.space-summary-card header > div { display: grid; gap: 2px; min-width: 0; }.space-summary-card header strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.space-summary-card header small { color: var(--muted); font-size: .67rem; }.space-summary-card .permission-pill { margin-left: auto; }
.permission-pill { padding: 4px 8px; border-radius: 99px; background: #eadccd; color: #76685c; font-size: .62rem; font-weight: 800; }.permission-edit { background: #f1d8ca; color: #9c573f; }.permission-manage { background: #dce8d7; color: #567050; }
.space-summary-card dl { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; }.space-summary-card dl div { display: grid; gap: 3px; padding: 0 9px; border-left: 1px solid var(--border); }.space-summary-card dl div:first-child { padding-left: 0; border-left: 0; }.space-summary-card dt { color: var(--muted); font-size: .62rem; }.space-summary-card dd { margin: 0; color: var(--accent-hover); font-size: 1.15rem; font-weight: 850; }.has-alert { color: #b55c46 !important; }
.dashboard-projects { margin-bottom: 20px; }.project-stats-table { display: grid; margin-top: 12px; }.project-stats-table > a { display: grid; grid-template-columns: minmax(220px, 1.6fr) repeat(4, minmax(60px, .4fr)); align-items: center; gap: 12px; padding: 10px 8px; border-top: 1px solid var(--border); color: var(--text); text-decoration: none; }.project-stats-table > a:hover { background: var(--panel-soft); }.project-stats-table > a > span:not(.project-stat-name) { display: grid; gap: 2px; text-align: right; }.project-stats-table > a > span > small { color: var(--muted); font-size: .62rem; }.project-stat-name { display: flex; min-width: 0; align-items: center; gap: 9px; }.project-stat-name > span:last-child { display: grid; min-width: 0; }.project-stat-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .78rem; }.project-stat-name small { color: var(--muted); font-size: .64rem; }.single-dashboard-panel { grid-template-columns: minmax(0, 1fr); margin-top: 20px; }
.trash-section { margin-bottom: 20px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.trash-page-list { display: grid; gap: 8px; }
.trash-page-list article { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 13px; border: 1px solid #dfd0c0; border-radius: 10px; background: #fffaf3; }
.trash-page-list article > div { display: flex; min-width: 0; align-items: center; gap: 11px; }
.trash-page-list article > div > .icon { color: var(--accent); }
.trash-page-list article span { display: grid; min-width: 0; gap: 3px; }
.trash-page-list article strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .82rem; }
.trash-page-list article small { color: var(--muted); font-size: .67rem; }
.trash-page-list .secondary-button { padding: 7px 10px; font-size: .7rem; }
.restore-hint { flex: 0 0 auto; }
.settings-page-section { margin-bottom: 20px; padding: 22px; border: 1px solid var(--border); border-radius: 14px; background: rgb(251 247 240 / 82%); box-shadow: 0 8px 20px rgb(91 61 43 / 6%); }
.settings-page-section h2 { margin: 0; font-size: 1rem; }
.settings-page-section > p { margin: 7px 0 18px; color: var(--muted); font-size: .78rem; }
.criticality-settings-list { display: grid; gap: 9px; }
.criticality-settings-list form { display: grid; grid-template-columns: minmax(140px, 1fr) 48px 100px 30px; align-items: center; gap: 8px; }
.criticality-settings-list input, .criticality-settings-list select { min-width: 0; height: 38px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; background: #fffaf3; color: var(--text); }
.criticality-settings-list .secondary-button { width: 100px; height: 38px; padding: 0 11px; }
.criticality-delete-button { display: grid; width: 30px; height: 30px; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #b47866; opacity: .55; }
.criticality-delete-button:hover, .criticality-delete-button:focus-visible { background: rgb(190 104 76 / 10%); color: #a34f36; opacity: 1; }
.criticality-delete-button .icon { width: 12px; height: 12px; }
.new-criticality-form { display: grid; grid-template-columns: minmax(140px, 1fr) 48px 100px 30px; align-items: center; gap: 8px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); }
.new-criticality-form::after { content: ""; width: 30px; height: 1px; }
.new-criticality-form input, .new-criticality-form select { min-width: 0; height: 38px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; background: #fffaf3; color: var(--text); }
.new-criticality-form .primary-button { width: 100px; height: 38px; padding: 0 12px; }
.settings-download { width: fit-content; text-decoration: none; font-size: .75rem; }
.backup-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.backup-actions form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.backup-actions input[type="file"] { max-width: 250px; padding: 7px; border: 1px solid var(--border); border-radius: 8px; background: #fffaf3; color: var(--muted); font-size: .7rem; }
.settings-page-section .settings-warning { margin: 13px 0 0; color: #a45a45; font-size: .68rem; }

.primary-button, .secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0;
  border-radius: 9px;
  padding: 10px 15px;
  color: var(--text);
}
.primary-button { background: linear-gradient(135deg, #bd684c, #d48366); color: #fffaf5; font-weight: 700; box-shadow: 0 7px 16px rgb(142 72 47 / 18%); }
.primary-button:hover { background: var(--accent-hover); }
.secondary-button { background: var(--panel-soft); }

.board { display: grid; grid-template-columns: repeat(3, minmax(250px, 1fr)); gap: 18px; align-items: start; overflow-x: auto; }
.column { min-width: 0; padding: 14px; border: 1px solid var(--border); border-radius: 14px; background: linear-gradient(180deg, #f8f0e5, #f3e8da); box-shadow: 0 9px 22px rgb(91 61 43 / 7%); }
.column-header { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 13px; }
.column-header h2 { display: flex; align-items: center; gap: 9px; margin: 0; font-size: .88rem; }
.column-header-actions { display: flex; align-items: center; gap: 4px; }
.column-add-button { display: grid; width: 24px; height: 24px; place-items: center; padding: 0; border: 0; border-radius: 20px; background: var(--panel-soft); color: var(--muted); opacity: .72; }
.column-add-button:hover, .column-add-button:focus-visible { color: var(--accent-hover); opacity: 1; }
.column-add-button .icon { width: 14px; height: 14px; }
.column-emoji { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid #d8b5a2; border-radius: 7px; background: #f5ddd0; color: #aa6047; font-size: .78rem; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #9299a7; }
.dot-column-0 { background: #87909e; box-shadow: 0 0 7px rgb(135 144 158 / 35%); }
.dot-column-1 { background: #5799eb; box-shadow: 0 0 7px rgb(87 153 235 / 35%); }
.dot-column-2 { background: #45bd89; box-shadow: 0 0 7px rgb(69 189 137 / 35%); }
.dot-column-3 { background: #e99a3d; box-shadow: 0 0 7px rgb(233 154 61 / 35%); }
.dot-column-4 { background: #8b6cff; box-shadow: 0 0 7px rgb(139 108 255 / 35%); }
.dot-column-5 { background: #eb6571; box-shadow: 0 0 7px rgb(235 101 113 / 35%); }
.count { display: grid; min-width: 24px; height: 24px; place-items: center; padding: 0 7px; border-radius: 20px; background: var(--panel-soft); color: var(--muted); text-align: center; font-size: .72rem; }

.card-list { min-height: 80px; border-radius: 10px; transition: background .15s; }
.card-list.drag-over { background: rgb(22 140 245 / 12%); outline: 1px dashed var(--accent); }
.card { margin-bottom: 10px; padding: 13px; border: 1px solid #dbcbbb; border-radius: 10px; background: linear-gradient(145deg, #fffaf3, #fbf4ea); box-shadow: 0 4px 12px rgb(91 61 43 / 7%); cursor: pointer; }
.card :is(button, input, textarea, select, summary, label) { cursor: auto; }
.card:hover { border-color: #c99b84; transform: translateY(-1px); box-shadow: 0 7px 16px rgb(91 61 43 / 11%); }
.card.dragging { opacity: .4; }
.card-topline { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.card-title { display: flex; min-width: 0; align-items: center; gap: 7px; }
.drag-handle { color: #69717e; cursor: grab; }
.card h3 { min-width: 0; margin: 0; font-size: .94rem; overflow-wrap: anywhere; }
.tag.criticality-tag { flex: 0 0 auto; gap: 6px; margin-left: 0; border: 1px solid #dfcdbb; background: #f7eee2; color: var(--text); font-weight: 650; }
.card-actions-menu { position: relative; flex: 0 0 auto; }
.card-actions-menu > summary { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 5px; color: var(--muted); cursor: pointer; list-style: none; }
.card-actions-menu > summary:hover, .card-actions-menu[open] > summary { background: #191c23; color: var(--text); }
.card-actions-menu form { position: absolute; top: calc(100% + 3px); right: 0; z-index: 5; width: 155px; padding: 4px; border: 1px solid var(--border); border-radius: 7px; background: #191c23; box-shadow: 0 10px 25px rgb(0 0 0 / 35%); }
.card-actions-menu button { width: 100%; padding: 7px; border: 0; border-radius: 5px; background: transparent; color: #eb6571; text-align: left; font-size: .66rem; }
.card-actions-menu button:hover { background: rgb(235 101 113 / 10%); }
.card p { margin: 8px 0 0; color: var(--muted); font-size: .82rem; line-height: 1.45; white-space: pre-wrap; }
.card.search-hidden { display: none; }
.card.search-highlight { border-color: var(--accent); box-shadow: 0 0 0 3px rgb(22 140 245 / 18%); }
.icon-button { border: 0; background: transparent; color: var(--muted); font-size: 1.25rem; line-height: 1; }
.icon-button:hover { color: var(--text); }
.move-form { margin-top: 12px; }
.move-form label span { position: absolute; width: 1px; height: 1px; overflow: hidden; }
.move-form select { width: 100%; padding: 5px 7px; border: 1px solid var(--border); border-radius: 7px; background: #fffaf3; color: var(--text); font-size: .72rem; }
.empty-state { margin: 8px 0 14px; padding: 24px 8px; border: 1px dashed #353b46; border-radius: 9px; color: #69717e; text-align: center; font-size: .78rem; }

dialog { width: min(480px, calc(100% - 32px)); padding: 0; border: 1px solid var(--border); border-radius: 15px; background: var(--panel); color: var(--text); box-shadow: 0 30px 90px rgb(0 0 0 / 55%); }
dialog::backdrop { background: rgb(5 7 10 / 72%); backdrop-filter: blur(4px); }
dialog form { padding: 24px; }
#card-dialog, #edit-card-dialog { width: min(820px, calc(100% - 32px)); overflow: visible; }
#card-dialog form, #edit-card-dialog form { padding: 30px; }
#card-dialog .field, #edit-card-dialog .field { margin: 19px 0; }
#card-dialog textarea, #edit-card-dialog textarea { min-height: 150px; line-height: 1.5; }
#card-dialog .dialog-actions, #edit-card-dialog .dialog-actions { margin-top: 28px; }
.settings-dialog { padding: 24px; }
.settings-dialog form { padding: 0; }
.settings-dialog .dialog-header { margin-bottom: 16px; }
.settings-dialog .manager-list > div > span { display: flex; align-items: center; gap: 8px; }
.settings-dialog .manager-list .dot { display: inline-block; }
.settings-section-title { margin: 20px 0 8px; color: var(--text); font-size: .82rem; }
.settings-dialog .settings-section-title:first-of-type { margin-top: 0; }
.tag-manager-list .color-dot { display: inline-block; }
.settings-help { margin: 8px 0 0; color: var(--muted); font-size: .68rem; }
.trashed-card-list { display: grid; gap: 6px; }
.trashed-card-list > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.trashed-card-list > div > span { display: grid; min-width: 0; gap: 3px; }
.trashed-card-list strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .78rem; }
.trashed-card-list small { color: var(--muted); font-size: .65rem; }
.trashed-card-list .secondary-button { padding: 6px 8px; font-size: .65rem; }
.dialog-header { display: flex; justify-content: space-between; margin-bottom: 23px; }
.dialog-header h2 { margin: 0; font-size: 1.4rem; }
.dialog-close { align-self: start; }
.field { display: block; margin: 15px 0; }
.field > span { display: block; margin-bottom: 7px; color: #c3c8d1; font-size: .78rem; font-weight: 650; }
.field input, .field textarea, .field select { width: 100%; padding: 11px 12px; border: 1px solid var(--border); border-radius: 8px; outline: none; background: #12151a; color: var(--text); }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgb(22 140 245 / 14%); }
.field textarea { resize: vertical; }
.field > .date-input-wrap { position: relative; display: block; margin: 0; color: inherit; font-size: inherit; font-weight: inherit; }
.date-input-wrap .date-display { padding-right: 45px; cursor: default; }
.date-input-wrap .native-date-picker { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.date-input-wrap button { position: absolute; top: 50%; right: 7px; display: grid; width: 32px; height: 32px; place-items: center; padding: 0; border: 0; border-radius: 7px; background: var(--panel-soft); color: var(--accent-hover); transform: translateY(-50%); }
.date-input-wrap button:hover, .date-input-wrap button:focus-visible { outline: 0; background: #e3d1bd; color: var(--accent); }
.date-input-wrap button .icon { width: 16px; height: 16px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 22px; }

.settings { margin: 0 0 24px; border: 1px solid var(--border); border-radius: 11px; background: rgb(25 28 35 / 72%); }
.settings > summary { padding: 12px 15px; color: var(--muted); cursor: pointer; font-size: .82rem; }
.settings-grid { padding: 4px 15px 16px; border-top: 1px solid var(--border); }
.settings-grid h2 { font-size: .85rem; }
.manager-list > div { display: flex; align-items: center; justify-content: space-between; min-height: 31px; border-bottom: 1px solid var(--border); font-size: .8rem; }
.manager-list form { display: inline; }
.manager-list p { color: var(--muted); font-size: .78rem; }
.text-danger { border: 0; background: transparent; color: #df7e86; font-size: .74rem; }
.inline-form { display: flex; gap: 7px; margin-top: 11px; }
.inline-form input, .inline-form select { min-width: 0; padding: 8px 9px; border: 1px solid var(--border); border-radius: 7px; background: #12151a; color: var(--text); }
.inline-form input { flex: 1; }
.tag { display: inline-flex; align-items: center; padding: 3px 7px; border-radius: 5px; background: #343944; color: #d7dbe2; font-size: .66rem; font-weight: 700; }
.tag-violet { background: #3b2d70; color: #c8baff; }
.tag-red { background: #592b33; color: #ffb2bc; }
.tag-orange { background: #593e22; color: #ffc77d; }
.tag-blue { background: #243f64; color: #9bc7ff; }
.tag-green { background: #244b3c; color: #8de0bd; }
.card-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 11px; }
.due-date { display: inline-flex; align-items: center; gap: 5px; padding: 3px 7px; border: 1px solid #dfcdbb; border-radius: 5px; background: #f7eee2; color: var(--muted); font-size: .66rem; font-weight: 650; }
.due-date .icon { width: 12px; height: 12px; }
.due-date.overdue { border-color: #ddb0a3; background: #f8ded5; color: #a34f36; }
.card-tag-editor { margin-top: 10px; color: var(--muted); font-size: .7rem; }
.card-tag-editor summary { cursor: pointer; }
.card-tag-editor form { display: grid; gap: 10px; padding: 8px 0; }
.tag-group { display: grid; flex-basis: 100%; gap: 6px; padding: 8px; border: 1px solid var(--border); border-radius: 7px; }
.tag-group strong, .criticality-field strong { color: #c3c8d1; font-size: .72rem; }
.tag-group strong small { color: var(--muted); font-weight: 400; }
.tag-options { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-options label { cursor: pointer; }
.tag-options input { position: absolute; opacity: 0; }
.tag-options input:not(:checked) + .tag { opacity: .42; filter: saturate(.45); }
.tag-options input:checked + .tag { opacity: 1; outline: 2px solid var(--accent); outline-offset: 2px; }
.tag-options input:focus-visible + .tag { box-shadow: 0 0 0 4px rgb(200 117 88 / 18%); }
.tag-choice { position: relative; display: inline-flex; align-items: center; }
.tag-choice .tag { padding-right: 18px; }
.tag-delete-button { position: absolute; right: 3px; display: grid; width: 13px; height: 13px; place-items: center; padding: 0; border: 0; border-radius: 50%; background: rgb(255 255 255 / 20%); color: currentColor; opacity: .55; }
.tag-delete-button:hover, .tag-delete-button:focus-visible { background: rgb(255 255 255 / 48%); opacity: 1; }
.tag-delete-button .icon { width: 8px; height: 8px; stroke-width: 2; }
.no-criticality span { display: inline-flex; padding: 3px 7px; border: 1px solid var(--border); border-radius: 5px; color: var(--muted); font-size: .66rem; }
.no-criticality input:checked + span { border-color: white; color: var(--text); }
.no-tags { color: var(--muted); font-size: .7rem; font-style: italic; }
.new-tag-fields { display: flex; flex-basis: 100%; gap: 6px; margin-top: 5px; }
.new-tag-fields > input { flex: 1; min-width: 0; padding: 6px 7px; border: 1px solid var(--border); border-radius: 6px; background: #12151a; color: var(--text); font-size: .72rem; }
.color-picker { display: flex; align-items: center; gap: 5px; padding: 4px 6px; border: 1px solid var(--border); border-radius: 6px; background: #12151a; }
.color-picker label { display: grid; cursor: pointer; }
.color-picker input { position: absolute; opacity: 0; }
.color-dot { display: inline-block; flex: 0 0 12px; width: 12px; height: 12px; border: 0; border-radius: 50%; background: #717784; }
.color-picker input:checked + .color-dot { border-color: white; box-shadow: 0 0 0 2px #12151a; }
.color-violet { background: #8b6cff; }
.color-red { background: #eb6571; }
.color-orange { background: #e99a3d; }
.color-blue { background: #5799eb; }
.color-green { background: #45bd89; }
.color-gray { background: #717784; }
.native-color-select { display: none !important; }
.custom-color-select { position: relative; min-width: 0; width: 100%; }
.custom-color-trigger { display: flex; width: 100%; align-items: center; gap: 9px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: #fffaf3; color: var(--text); text-align: left; }
.custom-color-trigger::after { content: ""; width: 6px; height: 6px; margin: -3px 2px 0 auto; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(45deg); }
.custom-color-trigger:focus-visible, .custom-color-trigger[aria-expanded="true"] { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px rgb(200 117 88 / 14%); }
.custom-color-trigger .color-dot, .custom-color-menu .color-dot { width: 12px; height: 12px; }
.custom-color-menu { position: absolute; top: calc(100% + 5px); left: 0; right: 0; z-index: 50; display: grid; gap: 2px; padding: 5px; border: 1px solid var(--border); border-radius: 9px; background: var(--panel); box-shadow: 0 12px 28px rgb(91 61 43 / 16%); }
.custom-color-menu[hidden] { display: none; }
.custom-color-menu button { display: flex; align-items: center; gap: 9px; padding: 8px 9px; border: 0; border-radius: 6px; background: transparent; color: var(--text); text-align: left; }
.custom-color-menu button:hover, .custom-color-menu button:focus-visible { outline: 0; background: var(--panel-soft); }
.custom-color-select.dot-only { width: 48px; }
.custom-color-select.dot-only .custom-color-trigger { display: grid; grid-template-columns: 12px 6px; height: 38px; place-content: center; gap: 6px; padding: 0; }
.custom-color-select.dot-only .custom-color-trigger::after { margin: -3px 0 0; }
.custom-color-select.dot-only .custom-color-menu button { height: 32px; justify-content: center; padding: 0; }
.custom-color-select.dot-only span { display: none; }
.queued-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.queued-tag { gap: 5px; outline: 2px solid rgb(200 117 88 / 48%); outline-offset: 1px; }
.queued-tag button { padding: 0; border: 0; background: transparent; color: inherit; line-height: 1; }
.criticality-field { display: block; padding: 0; border: 0; }
.criticality-select-row { position: relative; }
.criticality-field .custom-color-trigger { min-height: 44px; font-size: .82rem; }
.criticality-field .custom-color-menu { top: calc(100% + 7px); padding: 7px; }
.criticality-field .custom-color-menu button { min-height: 40px; padding: 10px 12px; font-size: .8rem; }
.small-button { justify-self: start; padding: 5px 8px; border: 0; border-radius: 5px; background: var(--accent); color: white; font-size: .68rem; }
.tag-picker { display: grid; gap: 10px; margin: 15px 0; padding: 10px; border: 1px solid var(--border); border-radius: 8px; }
.tag-picker legend { color: #c3c8d1; font-size: .78rem; font-weight: 650; }

/* Warm sand surfaces */
.project-title-form input,
.project-context-form input:not([type="hidden"]),
.board-title-inline-form input,
.field input,
.field textarea,
.field select,
.inline-form input,
.inline-form select,
.new-tag-fields > input,
.color-picker,
.criticality-field select {
  background: #fffaf3;
  color: var(--text);
}
.project-actions-menu > div,
.card-actions-menu form,
dialog,
.settings,
.search-results { background: var(--panel); }
.card-actions-menu > summary:hover,
.card-actions-menu[open] > summary { background: var(--panel-soft); }
.settings { background: rgb(251 247 240 / 88%); }
.empty-project { border-color: #cfb9a4; background: rgb(251 247 240 / 48%); }
.empty-project > span { background: #f1d8ca; color: var(--accent-hover); }
.drag-handle { color: #aa9586; }
.search-box:focus-within,
.empty-project-form input:focus,
.field input:focus,
.field textarea:focus,
.field select:focus { box-shadow: 0 0 0 3px rgb(200 117 88 / 14%); }
.status span { background: #7eaa78; box-shadow: 0 0 7px rgb(126 170 120 / 45%); }

/* Authentication and administration */
.auth-page { min-height: 100vh; display: grid; place-items: center; padding: 32px 18px; background: radial-gradient(circle at 50% 15%, #fffaf3, var(--bg) 60%); }
.main-area .account-page { min-height: 100vh; box-sizing: border-box; }
.auth-card { width: min(440px, 100%); padding: 34px; border: 1px solid var(--border); border-radius: 22px; background: var(--panel); box-shadow: 0 24px 70px rgb(91 61 43 / 14%); text-align: center; }
.auth-logo { display: block; width: 88px; height: 88px; object-fit: contain; margin: 0 auto 8px; }
.auth-card h1 { margin: 3px 0 8px; font-size: 2.2rem; }
.auth-card > p:not(.eyebrow) { color: var(--muted); }
.auth-form { display: grid; gap: 15px; margin-top: 25px; text-align: left; }
.auth-form label, .create-user-form label { display: grid; gap: 7px; font-size: .8rem; font-weight: 700; }
.auth-form input, .create-user-form input, .user-actions input { min-width: 0; padding: 11px 12px; border: 1px solid var(--border); border-radius: 8px; background: #fffaf3; color: var(--text); }
.auth-form .primary-button, .auth-form .secondary-button { justify-content: center; text-align: center; }
.setup-notice { margin-top: 20px; padding: 12px; border-radius: 9px; background: #f7e4b7; color: #654b20; font-size: .78rem; text-align: left; overflow-wrap: anywhere; }
.flash-stack { position: fixed; z-index: 200; top: 18px; left: 50%; display: grid; gap: 8px; width: min(520px, calc(100% - 36px)); transform: translateX(-50%); }
.flash { padding: 11px 14px; border: 1px solid var(--border); border-radius: 9px; background: var(--panel); box-shadow: 0 10px 28px rgb(91 61 43 / 15%); }
.flash-error { border-color: #d99090; }.flash-success { border-color: #7eaa78; }
.account-menu { position: fixed; z-index: 120; top: 8px; right: 28px; }
.account-menu > summary { display: flex; min-width: 150px; min-height: 46px; box-sizing: border-box; align-items: center; gap: 9px; padding: 6px 11px 6px 8px; border: 1px solid #d8c0a8; border-radius: 11px; background: rgb(255 250 243 / 96%); box-shadow: 0 4px 12px rgb(91 61 43 / 9%); cursor: pointer; list-style: none; }
.account-menu > summary::-webkit-details-marker { display: none; }.account-menu > summary > span:not(.account-avatar) { display: grid; }.account-menu small { color: var(--muted); font-size: .66rem; }.account-avatar { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 50%; background: var(--accent); color: white; font-weight: 800; }
.account-menu > div { position: absolute; top: calc(100% + 7px); right: 0; display: grid; width: 225px; padding: 7px; border: 1px solid var(--border); border-radius: 11px; background: var(--panel); box-shadow: 0 14px 35px rgb(91 61 43 / 18%); }.account-menu > div a, .account-menu > div button { display: block; width: 100%; padding: 9px 10px; border: 0; border-radius: 7px; background: transparent; color: var(--text); font-size: .78rem; text-align: left; }.account-menu > div a:hover, .account-menu > div button:hover { background: var(--panel-soft); }.account-menu > div form { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 4px; }.account-menu > div form button { color: #9b3636; }
.admin-settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }.admin-settings-grid a { display: grid; gap: 5px; padding: 17px; border: 1px solid var(--border); border-radius: 11px; background: var(--panel-soft); color: var(--text); }.admin-settings-grid a:hover { border-color: var(--accent); transform: translateY(-1px); }.admin-settings-grid span { color: var(--muted); font-size: .78rem; line-height: 1.45; }
.admin-page { width: min(1100px, calc(100% - 36px)); margin: 0 auto; padding: 50px 0 120px; }
.admin-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 25px; }.admin-heading h1 { margin: 4px 0; }
.admin-panel { margin-top: 18px; padding: 22px; border: 1px solid var(--border); border-radius: 14px; background: var(--panel); }
.create-user-form { display: grid; grid-template-columns: 1fr 1fr auto auto; align-items: end; gap: 12px; }.check-label { display: flex !important; align-items: center; padding-bottom: 11px; white-space: nowrap; }.check-label input { width: auto; }
.users-list { display: grid; gap: 12px; }.user-card { padding: 17px; border: 1px solid var(--border); border-radius: 10px; }.user-card.is-disabled { opacity: .65; }.user-card header { display: flex; justify-content: space-between; gap: 15px; }.user-card header > div { display: flex; align-items: center; gap: 8px; }.user-badge { padding: 3px 7px; border-radius: 99px; background: #ead4c7; font-size: .68rem; }.user-badge.disabled { background: #ddd; }
.user-actions { display: grid; gap: 9px; margin-top: 14px; }.user-actions form { display: flex; gap: 8px; }.user-actions input { flex: 1; }.user-control-row { display: flex; flex-wrap: wrap; gap: 8px; }.danger-button { padding: 8px 11px; border: 1px solid #c76b6b; border-radius: 8px; background: #fff4f2; color: #9b3636; }
.compact-form { grid-template-columns: minmax(220px, 1fr) auto; }
.group-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }.group-heading h2 { margin-bottom: 2px; }
.member-form { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(180px, .6fr) auto; gap: 10px; margin: 18px 0; }.member-form select { padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: #fffaf3; color: var(--text); }
.member-list { display: grid; gap: 7px; }.member-list > div { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; background: var(--panel-soft); }.member-list > div > span:first-child { display: grid; }.member-list small { color: var(--muted); }
.new-project-form select, .empty-project-form select { min-width: 120px; padding: 8px; border: 1px solid var(--border); border-radius: 7px; background: #fffaf3; color: var(--text); }
.ownership-badge { display: inline-flex; min-height: 24px; box-sizing: border-box; align-items: center; align-self: center; margin: 0; padding: 4px 9px; border: 1px solid rgb(200 117 88 / 10%); border-radius: 99px; background: #ead4c7; color: var(--muted); font-size: .68rem; font-weight: 700; line-height: 1; white-space: nowrap; }

@media (max-width: 760px) {
  .app-shell { display: block; }
  .sidebar { position: static; width: 100%; height: auto; padding: 12px 18px; border-right: 0; border-bottom: 1px solid var(--border); }
  .sidebar .brand { padding: 0; border: 0; }
  .sidebar-nav, .sidebar-bottom-nav, .sidebar > .status { display: none; }
  .topbar, .workspace { padding-left: 18px; padding-right: 18px; }
  .topbar { top: 0; }
  .search-box kbd { display: none; }
  .board-heading { align-items: center; }
  .project-context { flex-wrap: wrap; row-gap: 5px; }.ownership-badge { min-height: 22px; }
  .board { grid-template-columns: repeat(3, minmax(280px, 86vw)); }
  .primary-button { padding: 9px 11px; }
  .empty-workspace { min-height: 65vh; }
  .empty-project-form { flex-direction: column; }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.stat-grid article { border-left: 0; border-top: 1px solid var(--border); }.stat-grid article:nth-child(-n+2) { border-top: 0; }.overview-grid { grid-template-columns: 1fr; }
  .project-stats-table > a { grid-template-columns: 1fr repeat(2, minmax(52px, auto)); }.project-stats-table > a > span:nth-child(4), .project-stats-table > a > span:nth-child(5) { display: none; }.space-summary-card dl { grid-template-columns: repeat(2, 1fr); gap: 10px 0; }.space-summary-card dl div:nth-child(3) { padding-left: 0; border-left: 0; }
  .criticality-settings-list form { grid-template-columns: 1fr 48px 30px; }
  .criticality-settings-list form > .secondary-button { grid-column: 1 / -1; }
  .criticality-settings-list .criticality-delete-button { grid-column: 3; grid-row: 1; }
  .new-criticality-form { grid-template-columns: 1fr; }
  .new-criticality-form::after { display: none; }
  .create-user-form, .member-form, .admin-settings-grid { grid-template-columns: 1fr; }.admin-heading, .user-card header, .group-heading { align-items: stretch; flex-direction: column; }.member-list > div { grid-template-columns: 1fr auto; }.member-list form { grid-column: 1 / -1; }.account-menu { top: 8px; right: 12px; }.account-menu > summary { min-width: 46px; width: 46px; padding: 6px; justify-content: center; }.account-menu > summary > span:not(.account-avatar) { display: none; }.auth-card { padding: 24px 20px; }.auth-logo { width: 72px; height: 72px; }
}