:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #0f1213;
  color: #edf1ef;
  font-synthesis: none;
  --bg: #0f1213;
  --panel: #171b1d;
  --panel-2: #1c2123;
  --panel-3: #23292b;
  --line: #30383a;
  --line-soft: #262d2f;
  --text: #edf1ef;
  --muted: #8f9997;
  --green: #789260;
  --green-strong: #8aa86d;
  --green-bg: #253229;
  --gold: #c4ad67;
  --danger: #c47f82;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; min-height: 100vh; background: var(--bg); overflow-x: hidden; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .48; }

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

.assistant-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 20;
  padding: 1rem .85rem;
  display: grid;
  grid-template-rows: auto auto auto;
  align-content: start;
  gap: .75rem;
  border-right: 1px solid #26302a;
  background:
    radial-gradient(circle at 50% 28%, rgba(94,120,72,.14), transparent 38%),
    linear-gradient(180deg, #111615 0%, #101313 62%, #151a16 100%);
}

.assistant-brand {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .15rem .2rem .25rem;
}
.assistant-brand-mark {
  color: var(--green-strong);
  font-size: 1.85rem;
  line-height: 1;
  transform: rotate(-16deg);
}
.brand { font-size: 1.14rem; font-weight: 780; color: #d9d4ad; letter-spacing: .01em; }
.subtitle, .muted { color: var(--muted); font-size: .82rem; }
.subtitle { margin-top: .08rem; }

.assistant-portrait {
  min-height: 0;
  width: 100%;
  aspect-ratio: 0.72;
  max-height: calc(100vh - 285px);
  position: relative;
  overflow: hidden;
  border: 1px solid #2a352d;
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% 28%, rgba(115,144,88,.16), transparent 33%),
    linear-gradient(180deg, #18201a 0%, #101514 58%, #171b16 100%);
}
.assistant-portrait::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 34%;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(10,13,11,.28));
}
.assistant-glow {
  position: absolute;
  inset: 6% 14% 12%;
  border-radius: 50%;
  background: rgba(140,163,100,.07);
  filter: blur(30px);
}
.assistant-portrait img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 50%;
  display: block;
  position: relative;
  z-index: 1;
  user-select: none;
}

.assistant-card {
  border: 1px solid #34402f;
  border-radius: 12px;
  padding: .8rem;
  background: linear-gradient(180deg, rgba(43,53,36,.88), rgba(29,36,29,.92));
}
.assistant-card-title { color: #d8cf91; font-weight: 720; display: flex; gap: .4rem; align-items: center; }
.assistant-card p { margin: .45rem 0 .7rem; color: #b9c0b5; font-size: .82rem; line-height: 1.45; }
.assistant-help { width: 100%; background: rgba(112,137,84,.12) !important; border-color: #4a5b40 !important; color: #d5ddc9 !important; }

.workspace { min-width: 0; min-height: 100vh; }

.topbar {
  position: sticky; top: 0; z-index: 15;
  min-height: 76px;
  display: flex; justify-content: flex-end; align-items: center; gap: 1rem;
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--line-soft);
  background: rgba(15,18,19,.94);
  backdrop-filter: blur(12px);
}
.mobile-brand-block { display: none; margin-right: auto; }

.toolbar { display: flex; gap: .55rem; align-items: end; flex-wrap: wrap; justify-content: flex-end; width: 100%; }
.toolbar-group { display: flex; gap: .45rem; align-items: center; }
.toolbar-divider { height: 34px; width: 1px; background: #303739; margin: 0 .12rem; }
.project-picker { display: grid; gap: .2rem; color: #929b99; font-size: .7rem; margin-right: auto; }
.project-picker select { min-width: 270px; }

select, input, textarea {
  width: 100%;
  border: 1px solid #394245;
  border-radius: 9px;
  background: #121617;
  color: var(--text);
  padding: .62rem .7rem;
  outline: none;
}
select:hover, input:hover, textarea:hover { border-color: #465052; }
select:focus, input:focus, textarea:focus {
  border-color: #73886a;
  box-shadow: 0 0 0 3px rgba(115,136,106,.13);
}
textarea { resize: vertical; line-height: 1.48; }

.button {
  min-height: 38px;
  border: 1px solid #3e484a;
  border-radius: 9px;
  padding: .55rem .8rem;
  color: #e8ecea;
  background: #222729;
  transition: background .14s ease, border-color .14s ease, transform .14s ease;
}
.button:hover:not(:disabled) { background: #2a3133; border-color: #505b5d; }
.button:active:not(:disabled) { transform: translateY(1px); }
.button.primary { background: #354a39; border-color: #536c56; }
.button.primary:hover:not(:disabled) { background: #405844; border-color: #607a61; }
.button.secondary { background: #1a1f21; }
.button.compact { min-height: 34px; padding: .42rem .66rem; font-size: .82rem; }
.exchange-button { display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; }
.button-icon { color: #a8b7ab; font-size: 1rem; }

.icon-button {
  border: 0;
  background: transparent;
  color: #8d9796;
  font-size: 1.7rem;
  line-height: 1;
  padding: .1rem .35rem;
}
.icon-button:hover { color: #fff; }

.badge {
  padding: .42rem .68rem;
  border: 1px solid #3e4749;
  border-radius: 999px;
  color: #bcc5c2;
  font-size: .77rem;
  white-space: nowrap;
}
.badge.ok { border-color: #4c6850; color: #b8cbb8; }
.badge.ok::before { content: "●"; color: #75ae70; font-size: .65rem; margin-right: .38rem; }
.badge.bad { border-color: #87565a; color: #dfb1b3; }

.page { padding: .9rem 1rem 1.2rem; }
h1, h2 { margin: 0; }
p { color: #b2bab8; }
.empty-state {
  max-width: 620px;
  margin: 12vh auto 0;
  text-align: center;
  padding: 2rem;
  border: 1px dashed #394244;
  border-radius: 14px;
  background: #141819;
}
.toast {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 100;
  max-width: min(460px, calc(100vw - 2rem));
  padding: .78rem 1rem;
  background: #22282a;
  border: 1px solid #475154;
  border-radius: 10px;
  box-shadow: 0 14px 36px rgba(0,0,0,.42);
}
.toast.error { border-color: #8d565a; background: #2e2022; }

.more-menu { position: relative; }
.more-menu > summary { list-style: none; }
.more-menu > summary::-webkit-details-marker { display: none; }
.more-menu-trigger {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid #384143;
  border-radius: 9px;
  color: #aab2b0;
  background: #181d1f;
  font-size: 1.2rem;
  cursor: pointer;
  user-select: none;
}
.more-menu[open] .more-menu-trigger,
.more-menu-trigger:hover { border-color: #596561; color: #fff; background: #23292b; }
.more-menu-popover {
  position: absolute;
  right: 0;
  top: calc(100% + .4rem);
  z-index: 80;
  width: 190px;
  padding: .4rem;
  border: 1px solid #3b4446;
  border-radius: 10px;
  background: #1b2022;
  box-shadow: 0 16px 38px rgba(0,0,0,.5);
}
.more-menu-up { top: auto; bottom: calc(100% + .4rem); }
.more-menu-title {
  padding: .35rem .5rem .45rem;
  color: #7f8987;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.menu-action {
  width: 100%;
  border: 0;
  border-radius: 7px;
  padding: .55rem .6rem;
  text-align: left;
  color: #dce1df;
  background: transparent;
}
.menu-action:hover { background: #272d2f; }
.danger-text { color: #d3979a; }
.danger-text:hover { background: #39272a; color: #f0b8bb; }

.label-hint {
  float: right;
  color: #747f7d;
  font-size: .72rem;
  font-weight: 400;
  margin-left: .4rem;
}

@media (max-width: 1120px) {
  .app-shell { grid-template-columns: 200px minmax(0, 1fr); }
  .assistant-card p { display: none; }
  .project-picker select { min-width: 220px; }
  .exchange-button span:last-child { display: none; }
}

@media (max-width: 820px) {
  .app-shell { display: block; }
  .assistant-sidebar { display: none; }
  .mobile-brand-block { display: block; }
  .topbar { align-items: flex-start; flex-direction: column; }
  .toolbar { width: 100%; justify-content: flex-start; }
  .project-picker { width: 100%; margin-right: 0; }
  .project-picker select { min-width: 0; }
  .toolbar-divider { display: none; }
  .exchange-button span:last-child { display: inline; }
}


/* v0.4.3: the desktop workspace never scrolls as one long page. */
html, body { height: 100%; overflow: hidden; }
.app-shell { height: 100vh; min-height: 0; overflow: hidden; }
.workspace {
  height: 100vh;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}
.topbar { position: relative; top: auto; }
.page {
  min-height: 0;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
#board-shell {
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.assistant-sidebar { overflow: hidden; }

@media (max-width: 820px) {
  html, body { height: auto; overflow: auto; }
  .workspace, .app-shell { height: auto; overflow: visible; }
  .page { height: auto; overflow: visible; }
}


/* v0.4.4: larger Miriel without changing character proportions. */
.assistant-card { padding: .72rem .78rem; }
.assistant-card p { font-size: .79rem; line-height: 1.4; }
.assistant-sidebar .subtitle {
  color: #9ea893;
  font-style: italic;
  letter-spacing: .01em;
}

@media (max-height: 760px) and (min-width: 821px) {
  .assistant-card p { display: none; }
  .assistant-portrait { max-height: calc(100vh - 185px); }
}


/* v0.4.5 — subtle glass UI. */
body {
  background:
    radial-gradient(circle at 14% 12%, rgba(74, 104, 67, .18), transparent 30%),
    radial-gradient(circle at 82% 88%, rgba(111, 75, 48, .13), transparent 34%),
    linear-gradient(145deg, #0b0f0f 0%, #101413 52%, #0b0e0e 100%);
}

.assistant-sidebar {
  background:
    linear-gradient(180deg, rgba(16, 23, 20, .78), rgba(12, 17, 15, .72));
  backdrop-filter: blur(18px) saturate(115%);
  -webkit-backdrop-filter: blur(18px) saturate(115%);
}

.topbar {
  background: rgba(15, 20, 19, .68);
  backdrop-filter: blur(18px) saturate(125%);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
}

.assistant-portrait,
.assistant-card,
.empty-state {
  background-color: rgba(22, 29, 25, .58);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

select, input, textarea {
  background: rgba(13, 18, 18, .66);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.button,
.more-menu-trigger,
.task-actions-trigger {
  background-color: rgba(28, 35, 34, .62);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}

.button.primary {
  background: rgba(59, 86, 62, .72);
}

.badge {
  background: rgba(19, 25, 23, .48);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.more-menu-popover,
.task-actions-panel {
  background: rgba(24, 30, 30, .90);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
}


/* v0.4.6 — glass readability polish. */
:root {
  --glass-border: rgba(129, 149, 143, .24);
}
select, input, textarea {
  border-color: rgba(116, 136, 130, .30);
}
select:focus, input:focus, textarea:focus {
  border-color: rgba(126, 157, 112, .72);
}

/* v0.6.0 — authenticated account and project ACL controls. */
.account-strip {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin-left: auto;
}
.account-badge {
  min-width: 118px;
  display: grid;
  gap: .05rem;
  padding: .38rem .62rem;
  border: 1px solid rgba(126, 148, 139, .24);
  border-radius: 9px;
  background: rgba(17, 23, 21, .48);
  line-height: 1.15;
}
.account-badge strong { font-size: .76rem; font-weight: 650; color: #d7ded9; }
.account-badge span { font-size: .63rem; color: #829087; }
.access-badge {
  padding: .28rem .5rem;
  border: 1px solid rgba(120, 143, 132, .25);
  border-radius: 999px;
  font-size: .67rem;
  color: #a9b6ae;
  background: rgba(23, 31, 28, .45);
}
.access-badge[data-role="admin"] { color: #d7c9a3; border-color: rgba(191, 156, 91, .30); }
.access-badge[data-role="owner"] { color: #c7d6b6; }
.access-badge[data-role="editor"] { color: #b8cfbf; }
.access-badge[data-role="viewer"] { color: #9ba8a1; }
button:disabled, select:disabled, input:disabled, textarea:disabled { opacity: .58; cursor: not-allowed; }
textarea:disabled, input:disabled, select:disabled { color: #aeb8b2; }

@media (max-width: 1120px) {
  .account-badge { display: none; }
}
@media (max-width: 820px) {
  .account-strip { width: 100%; margin-left: 0; justify-content: flex-end; flex-wrap: wrap; }
}


/* password visibility toggle */
.password-input-wrap {
  position: relative;
  width: 100%;
  min-width: 0;
}
.password-input-wrap > input {
  width: 100%;
  padding-right: 3rem;
}
.password-toggle {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: .42rem;
  width: 2.15rem;
  height: 2.15rem;
  min-width: 2.15rem;
  min-height: 2.15rem;
  margin: 0;
  padding: .42rem;
  display: grid;
  place-items: center;
  transform: translateY(-50%);
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #7f8b87;
  cursor: pointer;
  opacity: .9;
}
.password-toggle:hover,
.password-toggle:focus-visible,
.password-toggle[aria-pressed="true"] {
  background: rgba(120, 146, 96, .12);
  color: #b5c4b7;
}
.password-toggle:focus-visible {
  outline: 1px solid #73886a;
  outline-offset: 1px;
}
.password-toggle svg {
  width: 1.15rem;
  height: 1.15rem;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}