:root{
  --ink:#17212b;
  --muted:#74808c;
  --line:#e3e7eb;
  --paper:#fff;
  --canvas:#f5f6f7;
  --soft:#edf0f2;
  --accent:#ed735d;
  --blue:#3878cf;
  --green:#3baa78;
  --orange:#da9844;
  --shadow:0 18px 55px rgba(20,30,40,.14)
}
*{
  box-sizing:border-box
}
html,body{
  margin:0;
  min-height:100%;
  background:var(--canvas);
  color:var(--ink);
  font-family:'Aptos','Segoe UI',sans-serif
}
button,input,textarea,select{
  font:inherit
}
button{
  cursor:pointer
}
.hidden{
  display:none!important
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:var(--ink);
  font:700 20px 'Aptos','Segoe UI',sans-serif
}
.brand b{
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  border-radius:9px;
  background:var(--accent);
  color:white
}
.primary,.secondary,.icon,.upload-button,.danger{
  border:0;
  border-radius:8px;
  padding:11px 15px;
  font-weight:700;
  font-size:13px
}
.primary{
  background:var(--ink);
  color:#fff
}
.primary:hover{
  background:#2d3b47
}
.secondary,.upload-button{
  background:#fff;
  color:var(--ink);
  border:1px solid var(--line)
}
.icon{
  background:#fff;
  border:1px solid var(--line);
  padding:7px 10px;
  font-size:18px
}
.danger{
  background:transparent;
  color:#ca5045;
  padding-left:0
}
.eyebrow{
  margin:0 0 10px;
  color:var(--accent);
  text-transform:uppercase;
  letter-spacing:1.4px;
  font-size:10px;
  font-weight:700
}
.auth-screen{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:20px;
  background-color:var(--login-company-background,var(--canvas));
  background-image:var(--login-company-image,none),radial-gradient(circle at 20% 20%,#fff 0,transparent 35%);
  background-position:center,center;
  background-size:cover,auto
}
.auth-card{
  position:relative;
  width:min(440px,100%);
  margin-top:66px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  padding:38px;
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  gap:14px
}
.auth-card .brand{
  margin-bottom:25px
}
.auth-card .login-flowboard-brand {
  position:absolute;
  left:50%;
  bottom:calc(100% + 24px);
  width:max-content;
  justify-content:center;
  margin:0;
  transform:translateX(-50%);
}
.login-company-brand {
  width:100%;
  display:grid;
  justify-items:center;
  gap:0;
  overflow:hidden;
  text-align:center;
}
.login-company-brand > strong { color:var(--ink);font-size:16px; }
.login-company-logo-frame { display:grid;place-items:center;overflow:hidden; }
.login-company-logo { display:grid;width:100%;height:100%;place-items:center;object-fit:cover; }
.login-company-brand.is-horizontal .login-company-logo {
  display:block;
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  object-fit:contain!important;
}
.login-company-brand.is-square .login-company-logo-frame {
  width:96px;height:96px;border-radius:18px;color:#fff;font-size:48px;
}
.login-company-brand.is-horizontal .login-company-logo-frame {
  /* Same frame as the company banner in the board header. */
  position:relative;
  width:100%;
  max-width:100%;
  height:auto;
  aspect-ratio:500/118;
  border-radius:0;
}
.login-company-brand.is-horizontal .login-company-banner-output { overflow:hidden; }
.login-company-brand.is-horizontal .login-company-banner-output img {
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  object-fit:contain;
}
.fb-auth-view .auth-card h1,
.fb-auth-view .auth-card label,
.fb-auth-view .login-flowboard-brand > span { color:var(--login-company-secondary,var(--ink)); }
.fb-auth-view .auth-card .eyebrow { color:var(--login-company-primary,var(--accent)); }
.fb-auth-view .login-flowboard-brand > b,
.fb-auth-view .auth-card > .primary {
  border-color:var(--login-company-primary,var(--accent));
  background:var(--login-company-primary,var(--accent));
  color:var(--login-company-primary-contrast,#fff);
}
.fb-auth-view .auth-card > .primary:hover { background:color-mix(in srgb,var(--login-company-primary,var(--accent)) 88%,#000); }
.fb-auth-view .auth-card input:focus,
.fb-auth-view .auth-card textarea:focus { border-color:var(--login-company-primary,var(--accent));outline:2px solid color-mix(in srgb,var(--login-company-primary,var(--accent)) 20%,transparent); }
.login-company-brand.is-horizontal > strong { margin-top:0; }
.auth-card h1{
  font:700 34px 'Aptos','Segoe UI',sans-serif;
  margin:0
}
.auth-card p{
  color:var(--muted);
  line-height:1.5
}
.auth-card .eyebrow{
  margin:0
}
.error{
  color:#c34e44!important;
  min-height:20px;
  margin:0!important
}
.app{
  min-height:100vh;
  display:flex
}
.sidebar{
  position:fixed;
  z-index:10;
  inset:0 auto 0 0;
  width:260px;
  background:#fff;
  border-right:1px solid var(--line);
  padding:22px 15px;
  display:flex;
  flex-direction:column;
  transition:.25s
}
.side-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 5px 28px
}
.side-head .icon{
  border:0
}
.sidebar-compact-open{display:none}
.side-label{
  font-size:10px;
  color:var(--muted);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1.2px;
  padding:0 10px
}
.project-link{
  display:flex;
  flex-direction:column;
  gap:3px;
  width:100%;
  text-align:left;
  border:0;
  border-radius:8px;
  background:transparent;
  padding:10px;
  color:var(--ink)
}
.project-link small{
  color:var(--muted)
}
.project-link:hover,.project-link.active{
  background:var(--soft)
}
.sidebar-project-icon{width:42px;height:42px;min-width:42px;display:grid;place-items:center;overflow:hidden;border:1px solid color-mix(in srgb,var(--line) 72%,transparent);border-radius:11px;color:#fff;box-shadow:0 2px 8px rgba(20,30,40,.09)}
.sidebar-project-icon img{width:100%;height:100%;display:block;object-fit:cover}
.sidebar-project-icon svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8}
.sidebar-project-copy{min-width:0;display:grid;gap:3px}
.sidebar-project-copy b,.sidebar-project-copy small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-button{display:flex;align-items:center;gap:10px}
.side-button-icon{width:20px;height:20px;flex:0 0 20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.side-bottom{
  margin-top:auto
}
.side-button{
  display:block;
  width:100%;
  border:0;
  background:transparent;
  text-align:left;
  padding:12px;
  border-radius:8px;
  color:#4b5966
}
.side-button:hover{
  background:var(--soft)
}
.page{
  width:calc(100% - 260px);
  margin-left:260px
}
.page>header{
  height:66px;
  background:#fff;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  padding:0 4vw;
  gap:12px
}
.page>header [data-sidebar-open]{
  display:none
}
.mobile-brand{
  font:700 18px 'Aptos','Segoe UI',sans-serif
}
.user{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:14px;
  padding:5px 8px;
  border:0;
  border-radius:12px;
  background:transparent;
  color:var(--ink);
  font:inherit;
  font-size:12px;
  text-align:right;
  cursor:pointer
}
.user-copy{
  display:grid
}
.user-copy>span{
  color:var(--muted)
}
.user-avatar{
  width:36px;
  height:36px;
  border-radius:10px;
  display:grid;
  place-items:center;
  overflow:hidden;
  color:#fff;
  font-size:20px
}
.user-avatar img{
  width:100%;
  height:100%;
  object-fit:cover
}
.user:hover,.user:focus-visible{
  background:color-mix(in srgb,var(--accent) 9%,#fff)
}
main{
  max-width:1550px;
  margin:auto;
  padding:38px 4vw
}
.project-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:25px
}
.project-head h1{
  font:700 clamp(30px,4vw,48px)/1.05 'Aptos','Segoe UI',sans-serif;
  margin:0
}
.project-head>div>p:last-child{
  color:var(--muted);
  margin:10px 0 0
}
.title-line,.head-actions,.column-name,.toolbar,.panel-head,.stats,.section-head{
  display:flex;
  align-items:center;
  gap:10px
}
.head-actions{
  justify-content:flex-end;
  flex-wrap:wrap
}
.title-line .icon{
  border:0;
  background:transparent;
  color:var(--muted)
}
nav{
  display:flex;
  gap:24px;
  margin-top:36px;
  border-bottom:1px solid var(--line)
}
.tab{
  border:0;
  border-bottom:2px solid transparent;
  background:transparent;
  padding:0 2px 13px;
  color:var(--muted);
  font-weight:700;
  font-size:13px
}
.tab.active{
  border-color:var(--accent);
  color:var(--ink)
}
.tab span{
  background:#e7ebee;
  border-radius:20px;
  padding:2px 7px
}
.toolbar{
  justify-content:space-between;
  margin:22px 0 15px
}
.search{
  width:270px;
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:8px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:8px;
  padding:8px 11px;
  color:var(--muted)
}
.search input{
  width:100%;
  border:0;
  outline:0
}
.board{
  display:flex;
  align-items:flex-start;
  gap:16px;
  overflow:auto;
  padding-bottom:25px
}
.column{
  width:292px;
  min-width:292px;
  background:var(--soft);
  border-radius:11px;
  padding:12px
}
.column>header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:7px;
  padding:2px 3px 12px
}
.column-name{
  min-width:0;
  flex:1 1 auto;
  align-items:flex-start;
  gap:5px
}
.column h2{
  min-width:0;
  flex:1 1 90px;
  font:700 15px 'Aptos','Segoe UI',sans-serif;
  line-height:1.25;
  margin:2px 0 0;
  overflow-wrap:anywhere;
  white-space:normal
}
.column-actions{
  display:flex;
  flex:0 0 auto;
  align-items:center;
  justify-content:flex-end;
  gap:3px
}
.column>header>span{
  flex:0 0 auto;
  margin-top:2px;
  font-size:11px;
  color:var(--muted);
  background:#fff;
  padding:3px 7px;
  border-radius:20px
}
.mini{
  border:0;
  background:transparent;
  color:var(--muted);
  padding:2px
}
.column-drag-handle{
  width:21px;
  height:24px;
  display:grid;
  place-items:center;
  border:0;
  border-radius:6px;
  padding:0;
  background:transparent;
  color:var(--muted);
  opacity:0;
  pointer-events:none;
  cursor:grab;
  font-size:18px;
  line-height:1;
  flex:0 0 21px;
  transform:translateX(-2px);
  transition:opacity .15s ease,background .15s ease,color .15s ease,transform .15s ease
}
.column>header:hover .column-drag-handle,
.column-drag-handle:focus-visible{
  opacity:1;
  pointer-events:auto;
  transform:translateX(0)
}
.column-drag-handle:hover,
.column-drag-handle:focus-visible{
  background:#fff;
  color:var(--ink);
  outline:none
}
.column-drag-handle:active{
  cursor:grabbing
}
.column.dragging-column{
  opacity:.45
}
.board.reordering-columns{
  cursor:grabbing
}
.column-drop-indicator{
  width:10px;
  min-width:10px;
  min-height:170px;
  align-self:stretch;
  border:2px dashed var(--accent);
  border-radius:8px;
  background:color-mix(in srgb,var(--accent) 16%,transparent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 8%,transparent)
}
@media (hover:none){
  .column-drag-handle{
    opacity:1;
    pointer-events:auto;
    transform:none
  }
}
.mini.plus{
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#fff;
  color:var(--ink);
  width:23px;
  height:23px
}
.card-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-height:16px
}
.card{
  width:100%;
  min-width:0;
  max-width:100%;
  background:#fff;
  border:1px solid #e9edf0;
  border-radius:8px;
  padding:13px;
  box-shadow:0 2px 0 rgba(20,30,40,.02)
}
.card[draggable=true]{
  cursor:grab
}
.card:hover{
  box-shadow:0 9px 25px rgba(25,35,45,.1)
}
.card.synced{
  border-left:3px solid var(--blue)
}
.card h3{
  min-width:0;
  max-width:100%;
  margin:2px 0 0;
  font:600 14px/1.4 'Aptos','Segoe UI',sans-serif;
  overflow-wrap:anywhere;
  word-break:break-word;
  white-space:normal
}
.card p{
  min-width:0;
  max-width:100%;
  font-size:12px;
  line-height:1.45;
  color:var(--muted);
  margin:7px 0;
  overflow-wrap:anywhere;
  word-break:break-word;
  white-space:normal
}
.card footer{
  min-width:0;
  max-width:100%;
  flex-wrap:wrap;
  display:flex;
  justify-content:space-between;
  margin-top:12px;
  color:var(--muted);
  font-size:10px
}
.card footer > * { min-width:0; max-width:100%; }
.card-created-meta { overflow-wrap:anywhere; word-break:break-word; }
.shared{
  color:var(--blue)
}
.label{
  display:inline-block;
  width:30px;
  height:5px;
  border-radius:4px;
  margin-right:5px;
  background:var(--blue)
}
.label.green{
  background:var(--green)
}
.label.orange{
  background:var(--orange)
}
.add-card{
  width:100%;
  border:0;
  background:transparent;
  color:var(--muted);
  padding:8px 4px;
  text-align:left;
  font-size:12px
}
.add-card:hover{
  color:var(--ink)
}
.add-card.between{
  height:8px;
  overflow:hidden;
  opacity:0;
  padding:0;
  text-align:center;
  transition:.15s
}
.add-card.between:hover{
  height:27px;
  opacity:1;
  background:#dfe4e7;
  border-radius:6px
}
.view{
  margin-top:24px
}
.list-row{
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  width:100%;
  border:0;
  border-bottom:1px solid var(--line);
  background:#fff;
  text-align:left;
  padding:15px;
  color:var(--ink)
}
.calendar{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line)
}
.day{
  min-height:100px;
  background:#fff;
  padding:9px;
  font-size:11px
}
.day.muted{
  color:#aeb5bc
}
.day button{
  display:block;
  width:100%;
  border:0;
  background:#dff2e9;
  padding:5px;
  margin-top:5px;
  border-radius:4px;
  text-align:left;
  font-size:10px
}
.panel-head{
  justify-content:space-between;
  margin-bottom:20px
}
.panel-head h2{
  font:700 28px 'Aptos','Segoe UI',sans-serif;
  margin:0
}
.stats{
  flex-wrap:wrap
}
.stats b{
  background:#fff;
  border:1px solid var(--line);
  padding:8px 11px;
  border-radius:8px;
  font-size:12px
}
.admin-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:15px
}
.admin-grid > .panel{
  min-width:0;
  overflow:hidden
}
.admin-grid .two,
.admin-grid .color-grid,
.admin-grid label{
  min-width:0
}
.admin-grid .two{
  grid-template-columns:repeat(2,minmax(0,1fr))
}
.admin-grid .color-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))
}

.admin-grid .company-create-form .color-grid {
  align-items:end;
}

.admin-grid .company-create-form .color-grid > label {
  display:grid;
  grid-template-rows:minmax(30px,auto) auto;
  align-items:end;
}
.admin-grid textarea,
.admin-grid select,
.admin-grid input:not([type="checkbox"]):not([type="radio"]){
  width:100%;
  min-width:0;
  max-width:100%
}
.panel{
  background:#fff;
  border:1px solid var(--line);
  border-radius:11px;
  padding:19px;
  display:flex;
  flex-direction:column;
  gap:11px
}
.panel h3,.records h3{
  font:600 16px 'Aptos','Segoe UI',sans-serif;
  margin:0 0 5px
}
.panel p{
  margin:0
}
.records{
  margin-top:16px
}
.records h4{
  margin:12px 0 6px
}
.record{
  display:block;
  padding:8px 0;
  border-bottom:1px solid var(--line);
  font-size:12px
}
.checks{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px
}
.checks label,.inline{
  flex-direction:row!important;
  align-items:center
}
.hint,.empty{
  font-size:12px;
  color:var(--muted)
}
label{
  display:flex;
  flex-direction:column;
  gap:7px;
  color:var(--muted);
  font-size:11px;
  font-weight:700
}
textarea,input,select{
  border:1px solid var(--line);
  border-radius:7px;
  padding:10px;
  color:var(--ink);
  outline-color:var(--accent);
  background:#fff;
  resize:vertical
}
textarea{
  min-height:42px
}
.backdrop{
  position:fixed;
  z-index:30;
  inset:0;
  background:rgba(20,30,40,.48);
  display:flex;
  align-items:flex-start;
  justify-content:center;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:16px
}
.modal{
  position:relative;
  width:min(540px,100%);
  max-height:calc(100vh - 32px);
  max-height:calc(100dvh - 32px);
  overflow:auto;
  margin:auto 0;
  background:#fff;
  border-radius:13px;
  padding:31px;
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  gap:15px
}
.modal.wide{
  width:min(670px,100%)
}
.modal h2{
  font:700 25px 'Aptos','Segoe UI',sans-serif;
  margin:0
}
.close{
  position:absolute;
  right:14px;
  top:12px;
  border:0;
  background:transparent;
  font-size:25px;
  color:var(--muted)
}
.title-input{
  border:0;
  border-bottom:1px solid var(--line);
  border-radius:0;
  padding:6px 0;
  font:700 27px 'Aptos','Segoe UI',sans-serif;
  min-height:50px
}
.two{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px
}
.section-head{
  justify-content:space-between;
  margin-top:5px
}
.section-head h3{
  font:600 15px 'Aptos','Segoe UI',sans-serif;
  margin:0
}
.inline-form{
  display:flex;
  gap:8px
}
.inline-form textarea{
  flex:1
}
.check-item{
  display:flex;
  align-items:center;
  gap:9px;
  padding:8px 0;
  border-bottom:1px solid var(--line);
  font-size:13px
}
.check-item.done span{
  text-decoration:line-through;
  color:var(--muted)
}
.check-item button{
  margin-left:auto;
  border:0;
  background:transparent
}
.modal footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-top:1px solid var(--line);
  padding-top:18px;
  margin-top:5px
}
.upload-button{
  display:inline-flex;
  align-items:center;
  cursor:pointer
}
.file-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px
}
.files{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px
}
.file{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  font:inherit;
  text-align:left;
  cursor:pointer;
  text-decoration:none;
  color:var(--ink);
  background:#fff;
  border:1px solid var(--line);
  padding:11px;
  border-radius:8px;
  min-width:0
}
.file>span{
  font-size:22px;
  color:var(--blue)
}
.file div{
  min-width:0
}
.file b,.file small{
  display:block;
  white-space:nowrap;
  text-overflow:ellipsis;
  overflow:hidden
}
.file b{
  font-size:12px
}
.file small{
  color:var(--muted);
  margin-top:3px
}
.toast{
  position:fixed;
  z-index:50;
  right:24px;
  bottom:24px;
  background:var(--ink);
  color:#fff;
  padding:12px 17px;
  border-radius:9px;
  box-shadow:var(--shadow);
  font-size:13px
}
.error-toast{
  background:#b84c43
}
.duplicate-authorization-prompt {
  position: fixed;
  z-index: 90;
  right: 24px;
  bottom: 24px;
  width: min(430px, calc(100vw - 32px));
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--line));
  border-radius: 14px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 18px 50px rgba(0,0,0,.24);
}
.duplicate-authorization-prompt .close { position: absolute; top: 8px; right: 8px; }
.duplicate-authorization-prompt strong { display: block; padding-right: 28px; font-size: 16px; }
.duplicate-authorization-prompt p { margin: 8px 0 16px; line-height: 1.45; }
.duplicate-authorization-prompt p small { display: block; margin-top: 7px; color: var(--muted); }
.duplicate-authorization-prompt > div { display: flex; justify-content: flex-end; gap: 8px; }
.empty-board{
  padding:40px;
  color:var(--muted)
}
@media(max-width:1100px){
  .admin-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .file-grid{
    grid-template-columns:1fr 1fr
  }
}
@media(max-width:900px){
  .sidebar{
    transform:translateX(-100%);
    box-shadow:var(--shadow)
  }
  .sidebar.open{
    transform:translateX(0)
  }
  .page{
    width:100%;
    margin:0
  }
  .page>header [data-sidebar-open]{
    display:block
  }
  .project-head{
    display:block
  }
  .head-actions{
    justify-content:flex-start;
    margin-top:20px
  }
}
@media(max-width:650px){
  main{
    padding:28px 17px
  }
  .project-head h1{
    font-size:32px
  }
  .admin-grid,.file-grid,.files,.two{
    grid-template-columns:minmax(0,1fr)
  }
  .user-copy,nav .tab:nth-child(3){
    display:none
  }
  .calendar{
    grid-template-columns:repeat(2,1fr)
  }
  .auth-card{
    padding:28px 22px
  }
  .modal{
    padding:27px 20px
  }
  .list-row{
    grid-template-columns:1fr
  }
  .list-row span{
    margin-top:5px
  }
  .panel-head{
    align-items:flex-start;
    flex-direction:column
  }
}

.file em {
  margin-left: auto;
  color: var(--blue);
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
}

/* Project identity and administration */
.project-identity {
  display: flex;
  align-items: center;
  gap: 16px;
}

.project-icon {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 15px;
  color: #fff;
  font-size: 28px;
  background: #273846;
}

.project-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.company-mini-logo {
  width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  overflow: hidden;
  margin-right: 7px;
  border-radius: 7px;
  color: #fff;
  vertical-align: middle;
}

.company-mini-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.toolbar-actions,
.admin-filters,
.color-grid,
.check-meta,
.due-presets {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.admin-filters {
  padding: 14px;
  margin-bottom: 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.admin-filters label {
  min-width: 190px;
}

.color-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.resizable {
  resize: both;
  min-width: 420px;
  min-height: 360px;
}

.extra-wide {
  width: min(1000px, 96vw);
}

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

/* Project settings: tabbed composition over the existing feature forms. */
#project-settings-modal { --settings-accent:var(--accent); }
#project-settings-modal .project-settings-dialog { width:min(1180px,96vw);height:min(880px,94dvh);max-height:94dvh;overflow:hidden;resize:both;padding:0;display:grid;grid-template-rows:auto auto minmax(0,1fr); }
.project-settings-summary { display:flex;align-items:center;gap:18px;padding:24px 30px 18px;border-bottom:1px solid var(--line);background:linear-gradient(115deg,color-mix(in srgb,var(--accent) 8%,var(--paper)),var(--paper) 52%); }
.project-settings-summary-icon { flex:0 0 82px;width:82px;height:82px;display:grid;place-items:center;overflow:hidden;border-radius:20px;background:var(--summary-icon-bg);color:#fff;font-size:38px;box-shadow:0 10px 24px color-mix(in srgb,var(--accent) 18%,transparent); }
.project-settings-summary-icon img { width:100%;height:100%;object-fit:cover; }
.project-settings-summary-copy { min-width:0;display:grid;gap:5px; }
.project-settings-summary-copy > div { display:flex;align-items:center;gap:12px;flex-wrap:wrap; }
.project-settings-summary-copy h2 { margin:0;overflow-wrap:anywhere;font-size:clamp(1.45rem,2.5vw,2.15rem); }
.project-settings-summary-copy p { margin:0;color:var(--muted);overflow-wrap:anywhere; }
.project-settings-summary-copy small { display:flex;gap:18px;flex-wrap:wrap;color:var(--muted);font-weight:700; }
.project-settings-status { padding:6px 12px;border-radius:999px;background:color-mix(in srgb,#28b76b 16%,var(--paper));color:#168348;font-size:.78rem;font-weight:800; }
.project-settings-tabs { display:flex;gap:4px;overflow-x:auto;overscroll-behavior-inline:contain;padding:0 22px;border-bottom:1px solid var(--line);background:var(--paper);scrollbar-width:thin; }
.project-settings-tabs button { flex:0 0 auto;display:flex;align-items:center;gap:8px;min-height:58px;padding:8px 16px;border:0;border-bottom:3px solid transparent;background:transparent;color:var(--muted);font-weight:800;white-space:nowrap; }
.project-settings-tabs button > span { font-size:18px; }
.project-settings-tabs button[aria-selected="true"] { border-bottom-color:var(--accent);color:var(--accent); }
#project-settings-modal .project-settings-content { display:block;min-height:0;overflow:auto;padding:22px 28px 30px; }
.project-settings-section { display:grid;gap:14px; }
.settings-section-heading { display:flex;align-items:center;gap:12px; }
.settings-section-heading > span { flex:0 0 42px;width:42px;height:42px;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--accent) 24%,var(--line));border-radius:12px;background:color-mix(in srgb,var(--accent) 14%,var(--paper));color:color-mix(in srgb,var(--accent) 86%,var(--ink));font-size:20px;font-weight:900; }
.settings-section-heading svg,.project-settings-tabs svg { width:20px;height:20px;display:block; }
.settings-section-heading h3,.settings-section-heading p { margin:0; }
.settings-section-heading p { margin-top:2px;color:var(--muted);font-size:.88rem; }
.settings-section-panels { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start; }
.settings-section-panels > .custom-fields-manager,.settings-section-panels > .project-template-panel { grid-column:1 / -1; }
#project-settings-modal .panel { min-width:0; }
.project-user-management-panel{padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important}
.settings-section-panels>.project-user-management-panel{grid-column:1/-1;width:100%;max-width:none}
.project-user-management-panel .admin-users-heading{margin-bottom:16px}
.project-user-heading-actions{display:flex;align-items:center;gap:8px}
#permission-template-modal{z-index:190}
.permission-template-modal{width:min(900px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto}
.permission-template-context{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:12px 0;padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--soft)}
.permission-template-context span{min-width:0;display:grid;gap:3px}.permission-template-context small{color:var(--muted);font-size:.72rem}.permission-template-context b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.86rem}
.permission-template-toolbar{display:flex;justify-content:flex-end;margin:14px 0}
.permission-template-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:8px;padding:11px;border:1px solid var(--line);border-radius:10px;margin-bottom:8px}
.permission-template-row>span{display:grid;gap:3px}.permission-template-row small{color:var(--muted)}
[data-template-users]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:14px 0;padding:14px;border:1px solid var(--line);border-radius:12px}
[data-template-users] legend{font-weight:800;padding:0 6px}
#user-column-permissions-modal{z-index:100}
.user-column-permissions-modal{width:min(920px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto}
.user-column-permission-list{display:grid;gap:10px;margin:18px 0}
.user-column-permission-list fieldset{display:grid;grid-template-columns:minmax(150px,1.4fr) repeat(6,minmax(70px,.55fr));align-items:center;gap:8px;margin:0;padding:12px;border:1px solid var(--line);border-radius:12px}
.user-column-permission-list legend{padding:0 6px;font-weight:800}
.user-column-permission-list label{display:grid;justify-items:center;gap:5px;color:var(--muted);font-size:.72rem;font-weight:700}
@media(max-width:760px){.user-column-permission-list fieldset{grid-template-columns:repeat(2,minmax(0,1fr))}.user-column-permission-list legend{grid-column:1/-1}.user-column-permission-list label{justify-items:start}}
.project-user-management-panel .project-users-filters{grid-template-columns:minmax(250px,1.6fr) minmax(140px,.55fr) minmax(140px,.55fr) auto}
.project-user-management-panel .project-users-list{max-height:52dvh;padding-right:4px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--accent) var(--soft)}
.project-user-management-panel .admin-user-summary{cursor:default}
.project-user-management-panel .admin-user-summary>.mini{justify-self:end}
#project-user-permissions-modal{z-index:80}
.project-user-config-link{min-width:0;padding:0;border:0;background:transparent;color:inherit;text-align:left;cursor:pointer}
.project-user-config-link:hover b,.project-user-config-link:focus-visible b{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.project-user-permissions-modal{width:min(1050px,calc(100vw - 32px));height:min(820px,calc(100dvh - 32px));max-height:calc(100dvh - 32px);display:flex;flex-direction:column;overflow:hidden}
.project-user-permissions-header{display:block;margin:0 0 10px;padding:0 42px 4px 0}
.project-user-permissions-heading{display:grid;gap:6px}
.project-user-permissions-heading>*{margin:0}
.project-user-permissions-heading>p:last-child{color:var(--muted)}
.project-user-permissions-layout{min-height:0;display:grid;grid-template-columns:minmax(0,1.55fr) minmax(310px,1fr);gap:18px;flex:1}
.project-user-permissions-layout>[data-project-permissions-form],.project-user-context{min-width:0;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--paper) 96%,var(--accent));padding:12px}
.project-user-permissions-layout>[data-project-permissions-form]{display:flex;min-height:0;flex-direction:column}
.project-user-permissions-layout .project-permission-groups{min-height:0;display:block;flex:1;margin:12px 0;overflow:auto;padding-right:5px;scrollbar-width:thin;scrollbar-color:var(--accent) var(--soft)}
.project-user-permissions-layout .project-permission-groups fieldset{margin:0 0 12px;background:transparent}
.project-user-context{overflow:auto;padding:16px 18px}
.project-user-context-person{display:flex;align-items:center;gap:14px}
.project-user-context-person>.admin-user-avatar{width:64px;height:64px;flex:0 0 64px;border-radius:12px}
.project-user-context-person>span{display:grid;gap:4px;min-width:0}.project-user-context-person b{font-size:1.08rem}.project-user-context-person small{color:var(--accent)}
.project-user-context hr{margin:18px 0;border:0;border-top:1px solid var(--line)}
.project-user-context h3{margin:0 0 12px;font-size:.96rem}
.project-user-context label{display:grid;gap:6px;margin:0 0 11px;color:var(--ink);font-size:.76rem;font-weight:800}
.project-user-context input{width:100%;height:42px;background:var(--soft);color:var(--muted)}
.project-user-context-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.project-user-context .project-user-permanent{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:4px}
.project-user-permanent>span{display:grid;gap:3px}.project-user-permanent small{color:var(--muted);font-weight:400;line-height:1.3}
.project-user-permissions-person{display:flex;align-items:center;justify-content:flex-end;gap:10px;min-width:180px}
.project-user-permissions-person>.admin-user-avatar{width:54px;height:54px;flex-basis:54px;border-radius:12px}
.project-user-permissions-person>span{display:grid;gap:3px;text-align:left}
.project-user-permissions-person b{font-size:.95rem}
.project-user-permissions-person small{color:var(--muted);font-size:.75rem}
.permission-scope-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 10px}
.permission-scope-tabs button{min-height:42px;border:1px solid var(--line);border-radius:10px;background:var(--paper);color:var(--muted);font-weight:800}
.permission-scope-tabs button span{margin-right:8px;color:var(--accent);font-size:1rem}
.permission-scope-tabs button.active{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--paper));color:var(--accent)}
.permission-filter-tools{display:grid;grid-template-columns:minmax(0,1fr) 130px;gap:10px}
.permission-filter-tools label{margin:0}.permission-filter-tools input,.permission-filter-tools select{height:42px}
.permission-search{position:relative;display:grid}.permission-search>span{position:absolute;z-index:1;left:12px;top:50%;transform:translateY(-50%);color:var(--muted)}.permission-search>input{padding-left:34px}
.inline-column-permissions{min-height:0;flex:1;margin:12px 0;overflow:auto;padding-right:5px;scrollbar-width:thin;scrollbar-color:var(--accent) var(--soft)}
.inline-column-permissions fieldset{margin:0 0 12px;padding:10px 14px;border:1px solid var(--line);border-radius:12px}
.inline-column-permissions legend{padding:0 6px;font-weight:800}
.inline-column-permissions .project-permission-option{min-height:44px}
.project-user-permissions-modal input[role="switch"],
.user-column-permissions-modal input[role="switch"],
.permission-template-modal input[role="switch"]{appearance:none;-webkit-appearance:none;position:relative;width:42px!important;height:24px!important;min-width:42px;min-height:24px;margin:0;padding:0;border:1px solid color-mix(in srgb,var(--muted) 55%,var(--line));border-radius:999px;background:color-mix(in srgb,var(--muted) 28%,var(--soft));cursor:pointer;transition:.2s ease}
.project-user-permissions-modal input[role="switch"]::after,
.user-column-permissions-modal input[role="switch"]::after,
.permission-template-modal input[role="switch"]::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.22);transition:transform .2s ease}
.project-user-permissions-modal input[role="switch"]:checked,
.user-column-permissions-modal input[role="switch"]:checked,
.permission-template-modal input[role="switch"]:checked{border-color:var(--accent);background:var(--accent)}
.project-user-permissions-modal input[role="switch"]:checked::after,
.user-column-permissions-modal input[role="switch"]:checked::after,
.permission-template-modal input[role="switch"]:checked::after{transform:translateX(18px)}
.project-user-permissions-modal input[role="switch"]:disabled,
.user-column-permissions-modal input[role="switch"]:disabled,
.permission-template-modal input[role="switch"]:disabled{cursor:not-allowed;opacity:.55}
.project-permission-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:20px 0}
.project-permission-groups fieldset{margin:0;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--soft)}
.project-permission-groups legend{padding:0 6px;font-weight:800}
.advanced-permission-section{margin:0 0 7px;border:1px solid var(--line);border-radius:10px;background:color-mix(in srgb,var(--paper) 97%,var(--accent));overflow:hidden}
.advanced-permission-section>summary{min-height:46px;display:grid;grid-template-columns:18px 24px minmax(0,1fr) auto 42px;align-items:center;gap:9px;padding:7px 10px;cursor:pointer;list-style:none;color:var(--ink)}
.advanced-permission-section>summary::-webkit-details-marker{display:none}
.advanced-permission-section>summary:hover{background:color-mix(in srgb,var(--accent) 5%,transparent)}
.advanced-permission-chevron{font-size:19px;line-height:1;transition:transform .18s ease}.advanced-permission-section[open] .advanced-permission-chevron{transform:rotate(90deg)}
.advanced-permission-section>summary>i{display:grid;place-items:center;color:var(--accent);font-size:15px;font-style:normal}
.advanced-permission-section>summary>span:nth-child(3){min-width:0;display:flex;align-items:baseline;gap:10px;text-align:left}
.advanced-permission-section>summary b{font-size:.94rem}.advanced-permission-section>summary small{min-width:0;overflow:hidden;color:var(--muted);font-size:.72rem;font-weight:400;text-overflow:ellipsis;white-space:nowrap}
.advanced-permission-section>summary em{min-width:24px;padding:2px 7px;border-radius:999px;background:var(--soft);color:var(--muted);font-size:.7rem;font-style:normal;text-align:center}
.advanced-permission-section-body{display:grid;gap:7px;padding:0 8px 8px 28px;border-top:1px solid var(--line)}
.advanced-permission-block{padding:8px;border:1px solid var(--line);border-radius:9px;background:color-mix(in srgb,var(--paper) 98%,var(--accent))}
.advanced-permission-block>header{display:grid;grid-template-columns:minmax(0,1fr) 42px;align-items:center;gap:12px;padding:0 3px 7px;text-align:left}.advanced-permission-block>header>span{min-width:0;display:flex;align-items:baseline;justify-content:space-between;gap:10px}.advanced-permission-block>header b{font-size:.82rem}.advanced-permission-block>header small{color:var(--muted);font-size:.68rem}
.advanced-permission-section :is([data-permission-toggle-section],[data-permission-toggle-block]):indeterminate{border-color:color-mix(in srgb,var(--accent) 65%,var(--line));background:color-mix(in srgb,var(--accent) 45%,var(--soft))}
.advanced-permission-section :is([data-permission-toggle-section],[data-permission-toggle-block]):indeterminate::after{transform:translateX(9px)}
.advanced-permission-block .project-permission-option{min-height:42px;margin-bottom:4px;padding-block:5px;border-color:color-mix(in srgb,var(--line) 82%,transparent);background:transparent}
.advanced-permission-block .project-permission-option b{font-size:.8rem!important}.advanced-permission-block .project-permission-option small{font-size:.7rem!important}
#project-user-permissions-modal :is([data-permission-row],[data-permission-block],[data-permission-section]).filtered-out{display:none!important}
:is(#project-user-permissions-modal,.permission-template-modal) .project-permission-option{width:100%;min-height:58px;display:grid!important;grid-template-columns:minmax(0,1fr) 42px!important;align-items:center!important;justify-items:stretch!important;column-gap:20px!important;row-gap:0!important;margin:0 0 7px;padding:8px 10px 8px 15px;border:1px solid var(--line);border-radius:10px;background:color-mix(in srgb,var(--paper) 97%,var(--accent));text-align:left!important;box-sizing:border-box}
:is(#project-user-permissions-modal,.permission-template-modal) .project-permission-option:last-child{margin-bottom:0}
:is(#project-user-permissions-modal,.permission-template-modal) .project-permission-option>span{grid-column:1!important;width:100%!important;min-width:0;display:grid!important;gap:4px;align-self:center!important;justify-self:stretch!important;text-align:left!important;justify-items:start!important;margin:0!important;padding:0!important}
:is(#project-user-permissions-modal,.permission-template-modal) .project-permission-option b{display:block;width:100%;font-size:.96rem;line-height:1.2;text-align:left!important;margin:0!important}
:is(#project-user-permissions-modal,.permission-template-modal) .project-permission-option small{display:block;width:100%;color:var(--muted);font-size:.8rem;font-weight:400;line-height:1.3;text-align:left!important;margin:0!important}
:is(#project-user-permissions-modal,.permission-template-modal) .project-permission-option>input[role="switch"]{grid-column:2!important;position:relative!important;inset:auto!important;display:block!important;width:42px!important;min-width:42px!important;max-width:42px!important;height:24px!important;min-height:24px!important;max-height:24px!important;margin:0!important;padding:0!important;align-self:center!important;justify-self:end!important;box-sizing:border-box!important}
#admin-user-create-modal [data-user-create-project] input[readonly],#admin-user-create-modal select:disabled{background:var(--soft);color:var(--muted);cursor:not-allowed;opacity:1}
#admin-user-create-modal .admin-user-create-heading{cursor:default;user-select:none}
@media(max-width:760px){.project-user-management-panel .project-users-filters{grid-template-columns:1fr 1fr}.project-user-management-panel .admin-users-search{grid-column:1/-1}.project-permission-groups{grid-template-columns:1fr}.project-user-permissions-modal{height:calc(100dvh - 20px)}.project-user-permissions-header{padding-right:34px}.project-user-permissions-layout{grid-template-columns:1fr;overflow:auto}.project-user-permissions-layout>[data-project-permissions-form]{min-height:540px}.project-user-context{overflow:visible}.project-user-context-pair{grid-template-columns:1fr}.permission-scope-tabs{gap:5px}.permission-scope-tabs button{padding-inline:7px}.permission-filter-tools{grid-template-columns:1fr 110px}}
#project-settings-modal .settings-entity-form { display:grid;grid-auto-rows:auto;align-content:start;gap:10px; }
#project-settings-modal .settings-entity-form > h3 { align-self:center;margin:0; }
#project-settings-modal .settings-entity-form > .inline { min-height:30px;margin:0;align-self:center; }
#project-settings-modal .settings-entity-form > .primary { width:100%;height:42px;min-height:42px;margin:0;align-self:stretch; }
.settings-main-row { min-width:0;height:78px;display:grid;align-items:stretch;gap:10px; }
.settings-main-row > label { min-width:0;height:100%;margin:0; }
.settings-main-row textarea,.settings-main-row select { width:100%;height:50px;min-height:50px;max-height:50px; }
.label-settings-main { grid-template-columns:minmax(0,1fr) minmax(180px,.48fr); }
.group-settings-main { grid-template-columns:minmax(0,1fr) minmax(142px,155px) 52px;align-items:stretch;gap:8px; }
.group-settings-main > .has-color-picker { min-width:0; }
.group-settings-main > .has-color-picker .color-picker-field { height:50px;grid-template-columns:38px minmax(70px,1fr);gap:5px;padding:4px;box-sizing:border-box; }
.group-settings-main > .has-color-picker input[type="color"] { width:38px!important;min-width:38px!important;height:40px!important; }
.group-settings-main > .has-color-picker .hex-color { padding-inline:6px;font-size:10px; }
.group-visual-managed-field { display:none!important; }
.settings-visual-row { min-width:0;height:120px;display:grid;grid-template-columns:minmax(0,1fr) 112px;align-items:stretch;gap:12px;padding:10px;border:1px solid var(--line);border-radius:11px;background:color-mix(in srgb,var(--accent) 4%,var(--paper)); }
.settings-visual-row > label { min-width:0;margin:0;align-self:center; }
.settings-visual-row .visual-editor { min-width:0;height:100%;display:grid;grid-template-columns:1fr;padding:0;border:0;background:transparent; }
.settings-visual-row .visual-preview { width:92px;height:92px;min-height:92px;margin:auto;border-radius:13px; }
.group-settings-preview { grid-template-rows:1fr 1fr; }
.group-settings-preview > label { grid-column:1; }
.group-settings-preview > .visual-editor { grid-column:2;grid-row:1 / span 2; }
.group-settings-preview > .upload-button { width:100%;min-height:38px;justify-content:center; }
.settings-list-search { min-width:0;display:grid;gap:5px;margin-top:4px;padding-top:10px;border-top:1px solid var(--line);color:var(--muted);font-size:.78rem;font-weight:700; }
.settings-list-search input { width:100%;height:40px;min-height:40px; }
#project-settings-modal textarea,#project-settings-modal input[type="text"],#project-settings-modal input[type="search"],#project-settings-modal select { max-width:100%; }
.project-general-form { grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important; }
.project-general-block { min-width:0;padding:18px;border:1px solid var(--line);border-radius:14px;background:var(--paper);box-shadow:0 4px 14px rgba(23,33,43,.05); }
.project-general-block > header { display:flex;align-items:center;gap:11px;margin-bottom:16px; }
.project-general-block > header > span { flex:0 0 38px;width:38px;height:38px;display:grid;place-items:center;border-radius:10px;background:color-mix(in srgb,var(--accent) 11%,var(--paper));color:var(--accent);font-size:18px;font-weight:900; }
.project-general-block h4,.project-general-block p { margin:0; }
.project-general-block h4 { color:var(--ink);font-size:1rem; }
.project-general-block p { margin-top:2px;color:var(--muted);font-size:.76rem;font-weight:500; }
.project-general-block > div { display:grid;gap:12px; }
.project-general-identity { grid-row:span 2; }
.project-general-visual .project-visual-summary { display:grid;grid-template-columns:92px minmax(190px,1fr);gap:16px;align-items:center; }
.project-general-visual .visual-preview { width:92px;border-radius:15px; }
.project-general-visual .project-visual-edit { width:100%;min-height:44px;white-space:normal; }
.project-general-colors .project-palette { display:grid;gap:12px; }
.project-general-colors .color-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.project-general-background { grid-column:1 / -1; }
.project-general-background .background-editor { margin:0; }
.project-general-form > button.primary { grid-column:1 / -1;justify-self:end;min-width:220px; }
.settings-section-heading .project-general-save{margin-left:auto;min-width:190px;border-color:var(--accent);background:var(--accent);color:var(--accent-contrast,#fff);box-shadow:0 8px 20px color-mix(in srgb,var(--accent) 24%,transparent)}
.settings-section-heading .project-general-save:hover{background:color-mix(in srgb,var(--accent) 88%,#000);border-color:color-mix(in srgb,var(--accent) 88%,#000)}
.sidebar-project-icon-emoji .visual-symbol,.project-settings-summary-icon>.visual-symbol{width:100%;height:100%;display:grid;place-items:center;line-height:1}

@media (max-width:750px) {
  #project-settings-modal .project-settings-dialog { width:calc(100vw - 10px);height:calc(100dvh - 10px);max-height:calc(100dvh - 10px);min-height:0;min-width:0;resize:none;border-radius:14px; }
  .project-settings-summary { gap:12px;padding:18px 16px 14px; }
  .project-settings-summary-icon { flex-basis:58px;width:58px;height:58px;border-radius:15px;font-size:27px; }
  .project-settings-summary-copy small { gap:10px;font-size:.72rem; }
  .project-settings-tabs { padding:0 8px; }
  .project-settings-tabs button { min-height:52px;padding-inline:12px; }
  #project-settings-modal .project-settings-content { padding:16px 10px 22px; }
  .settings-section-panels { grid-template-columns:minmax(0,1fr); }
  .project-general-form { grid-template-columns:minmax(0,1fr); }
  .project-general-identity,.project-general-background,.project-general-form > button.primary { grid-column:1;grid-row:auto; }
  .project-general-colors .color-grid { grid-template-columns:minmax(0,1fr); }
  .project-general-form > button.primary { width:100%; }
  .settings-section-heading { padding-inline:4px; }
  .settings-section-heading .project-general-save{min-width:0;margin-left:auto;padding-inline:13px}
  .settings-section-heading p { font-size:.8rem; }
  #project-settings-modal .panel { padding:14px; }
  #project-settings-modal .settings-entity-form { grid-template-rows:none; }
  .settings-main-row,.label-settings-main,.group-settings-main { height:auto;grid-template-columns:1fr; }
  .settings-main-row > label { height:auto; }
  .group-settings-main { grid-template-columns:minmax(0,1fr) 52px; }
  .group-settings-main > label:first-child { grid-column:1 / -1; }
  .group-settings-main > .has-color-picker { grid-column:1; }
  .group-settings-main > .group-visual-summary { grid-column:2; }
  .settings-visual-row { height:auto;min-height:112px;grid-template-columns:minmax(0,1fr) 92px; }
}

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

.record-edit {
  display: grid;
  grid-template-columns: minmax(160px, 2fr) repeat(4, minmax(100px, 1fr)) auto;
  align-items: end;
  gap: 9px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--canvas);
}

.record-edit textarea {
  min-height: 40px;
}

.company-record {
  grid-template-columns:repeat(4,minmax(0,1fr));
  align-items:end;
  gap:14px;
  padding:16px;
}

.company-record > label:first-of-type { grid-column:span 2; }
.company-record > .background-editor {
  grid-column:1 / -1;
  grid-template-columns:minmax(280px,1fr) minmax(320px,1.35fr);
  align-items:stretch;
  padding:16px;
}
.company-record > .background-editor .background-custom-fields { grid-column:1; }
.company-record > .background-editor .workspace-background-preview {
  grid-column:2;
  grid-row:1 / span 2;
  width:100%;
  min-height:250px;
  max-height:320px;
}
.company-record > .background-editor .background-inherit-note { grid-column:1; }
.company-record > .visual-editor {
  grid-column:1 / span 2;
  align-self:stretch;
  padding:12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:color-mix(in srgb,var(--canvas) 65%,#fff);
}
.company-record > .inline { grid-column:3; align-self:center; }
.company-record > small { grid-column:1 / span 3; align-self:center; color:var(--muted); }
.company-record > .primary { grid-column:4; min-width:120px; }

@media (max-width:760px) {
  .company-record { grid-template-columns:minmax(0,1fr); }
  .company-record > label:first-of-type,
  .company-record > .background-editor,
  .company-record > .visual-editor,
  .company-record > .inline,
  .company-record > small,
  .company-record > .primary { grid-column:1; }
  .company-record > .background-editor { grid-template-columns:minmax(0,1fr); }
  .company-record > .background-editor .background-custom-fields,
  .company-record > .background-editor .workspace-background-preview,
  .company-record > .background-editor .background-inherit-note { grid-column:1; grid-row:auto; }
  .company-record > .visual-editor { grid-template-columns:90px minmax(0,1fr); }
  .company-record > .visual-editor .visual-preview { width:90px; }
  .company-record > .primary { width:100%; }
}

.template-check-row {
  display: grid;
  grid-template-columns: 1fr 110px 2fr auto;
  gap: 8px;
  margin-bottom: 8px;
}

.check-meta {
  margin-top: 10px;
}

.check-meta textarea {
  flex: 1;
}

.check-section {
  margin: 16px 0 5px;
  color: var(--ink);
  font: 700 13px 'Aptos','Segoe UI',sans-serif;
}

.check-item.level-2 { margin-left: 16px; }
.check-item.level-3 { margin-left: 32px; }
.check-item.level-4 { margin-left: 48px; }
.check-item.level-5 { margin-left: 64px; }

.mini-preset,
.setting-chip {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 6px 9px;
  background: #fff;
  color: var(--ink);
  font-size: 11px;
}

.setting-chip span:nth-child(2) {
  flex: 1;
  text-align: left;
}

.setting-chip small {
  margin-left: auto;
  color: var(--muted);
}

.setting-chip.inactive {
  opacity: .58;
  border-style: dashed;
}

.chip-emoji {
  font-size: 18px;
}

.hex-color {
  width: 100%;
  margin-top: 6px;
  font-family: 'Aptos','Segoe UI',sans-serif;
  text-transform: uppercase;
}

/* Unified color selector: visible swatch plus its hexadecimal value. */
.has-color-picker {
  min-width: 0;
}

.color-picker-field {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
}

.color-picker-field:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent);
}

.color-picker-field input[type="color"] {
  width: 52px !important;
  min-width: 52px !important;
  height: 40px !important;
  padding: 0 !important;
  overflow: hidden;
  border: 1px solid var(--line) !important;
  border-radius: 7px !important;
  background: var(--selected-color, transparent) !important;
  box-shadow: none !important;
  cursor: pointer;
  resize: none;
}

.color-picker-field input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}

.color-picker-field input[type="color"]::-webkit-color-swatch {
  border: 0;
  border-radius: 6px;
}

.color-picker-field input[type="color"]::-moz-color-swatch {
  border: 0;
  border-radius: 6px;
}

.color-picker-field .hex-color {
  width: 100%;
  min-width: 0;
  height: 40px;
  margin: 0;
  padding: 8px 9px;
  border: 0;
  background: color-mix(in srgb, var(--soft) 60%, #fff);
  font-size: 11px;
}

@media (max-width: 480px) {
  .color-picker-field {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .color-picker-field input[type="color"] {
    width: 44px !important;
    min-width: 44px !important;
  }
}

.visual-editor {
  display: grid;
  grid-template-columns: 112px 1fr;
  align-items: center;
  gap: 16px;
}

.visual-preview {
  width: 112px;
  aspect-ratio: 1;
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 18px;
  font-size: 42px;
}

.visual-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .12s ease;
}

.crop-controls {
  display: grid;
  gap: 8px;
}

.crop-controls input[type=range] {
  width: 100%;
}

.setting-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  margin-top: 7px;
}

.setting-chip i {
  width: 30px;
  height: 24px;
  flex: 0 0 30px;
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.42);
}

#card-modal .modal {
  resize: none;
  min-width: 420px;
  min-height: min(420px, calc(100vh - 32px));
  min-height: min(420px, calc(100dvh - 32px));
}

@media (max-width: 750px) {
  .settings-grid,
  .color-grid {
    grid-template-columns: 1fr;
  }

  .record-edit,
  .template-check-row {
    grid-template-columns: 1fr;
  }

  .resizable,
  #card-modal .modal {
    min-width: 0;
    resize: vertical;
  }
}

/* Card collaboration workspace */
#card-modal .collab-card {
  width: min(1180px, 97vw);
  height: min(900px, calc(100vh - 32px));
  height: min(900px, calc(100dvh - 32px));
  max-height: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  grid-template-rows: minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
  padding: 0;
  overflow: hidden;
  resize: none;
}

.card-main {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 31px;
}

.card-main > label,
.card-main > .two,
.card-main > .section-head,
.card-main > .new-section,
.card-main > #checklist,
.card-main > .file-toolbar,
.card-main > #card-files,
.card-main > footer {
  padding: 13px;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
  border-radius: 13px;
  background: color-mix(in srgb, var(--accent) 5%, #fff);
}

.card-main > .section-head {
  margin: 8px 0 -8px;
}

.new-section,
.section-add,
.file-toolbar,
.media-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.new-section textarea,
.section-add textarea {
  flex: 1;
  min-width: 160px;
}

.check-island {
  margin: 12px 0;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
  border-left: 5px solid var(--accent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 9%, #fff);
  box-shadow: 0 6px 18px rgba(25, 35, 45, .05);
}

.check-island.inactive {
  opacity: .66;
  filter: saturate(.5);
}

.check-island > header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
}

.check-island > header textarea {
  min-height: 38px;
  border-color: transparent;
  background: transparent;
  font: 700 15px 'Aptos','Segoe UI',sans-serif;
}

.check-item textarea {
  flex: 1;
  min-height: 34px;
  padding: 6px 8px;
  background: rgba(255, 255, 255, .72);
}

.inactive-tasks,
.inactive-sections {
  margin-top: 10px;
  padding: 9px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, .58);
}

.inactive-tasks summary,
.inactive-sections summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.section-comments {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line));
}

.section-comments > div:not(.section-add) {
  max-height: 130px;
  overflow-y: auto;
  margin: 7px 0;
}

.section-comments p {
  margin: 5px 0;
  padding: 7px 9px;
  border-radius: 9px;
  background: rgba(255, 255, 255, .75);
  font-size: 12px;
}

.section-comments small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
}

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

.file-toolbar > label {
  min-width: 145px;
}

#bundle-download.disabled {
  pointer-events: none;
  opacity: .45;
}

.file-type-options {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.file-type-options label {
  flex-direction: row;
  align-items: center;
  font-size: 11px;
}

.file-drop-zone {
  position: relative;
  min-height: 150px;
  width: 100%;
  border: 2px dashed color-mix(in srgb, var(--accent) 45%, var(--line)) !important;
  transition: background .15s ease, border-color .15s ease;
}

.file-drop-zone.dragging {
  border-color: var(--accent) !important;
  background: color-mix(in srgb, var(--accent) 16%, #fff) !important;
}

.drop-hint {
  column-span: all;
  margin-bottom: 10px;
  color: var(--muted);
  text-align: center;
  font-size: 12px;
}

.file-mosaic {
  columns: 3 165px;
  column-gap: 10px;
}

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

.file-tile {
  position: relative;
  break-inside: avoid;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  overflow: hidden;
  margin: 0 0 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

.file-list .file-tile {
  grid-template-columns: 100px minmax(0, 1fr) auto;
  align-items: center;
  margin: 0;
}

.file-preview {
  grid-column: 1 / -1;
  width: 100%;
  min-height: 90px;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: var(--soft);
}

.file-list .file-preview {
  grid-column: auto;
  height: 74px;
  min-height: 0;
}

.file-preview img,
.file-preview video {
  display: block;
  width: 100%;
  height: auto;
  max-height: 260px;
  object-fit: cover;
}

.file-list .file-preview img,
.file-list .file-preview video {
  height: 74px;
}

.file-symbol {
  display: grid;
  min-height: 90px;
  place-items: center;
  font-size: 35px;
}

.file-tile > div {
  min-width: 0;
  padding: 9px;
}

.file-tile b,
.file-tile small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-tile > a {
  align-self: center;
  margin-right: 8px;
  text-decoration: none;
}

.card-chat {
  min-width: 0;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  border-left: 1px solid var(--line);
  background: color-mix(in srgb, var(--accent) 6%, #f7f9fa);
}

.chat-head,
.chat-compose {
  padding: 18px;
  background: rgba(255, 255, 255, .82);
}

.chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}

.chat-head h3 {
  margin: 2px 0 0;
}

.live-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #36b37e;
  box-shadow: 0 0 0 5px rgba(54, 179, 126, .12);
}

#chat-messages {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding: 15px;
}

.backdrop,
.modal,
.card-main,
#chat-messages {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--accent) 55%, #87919a) transparent;
}

.backdrop::-webkit-scrollbar,
.modal::-webkit-scrollbar,
.card-main::-webkit-scrollbar,
#chat-messages::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.backdrop::-webkit-scrollbar-thumb,
.modal::-webkit-scrollbar-thumb,
.card-main::-webkit-scrollbar-thumb,
#chat-messages::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 55%, #87919a);
  background-clip: padding-box;
}

.chat-message {
  width: fit-content;
  max-width: 88%;
  margin: 0 0 10px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 6px 13px 13px;
  background: #fff;
}

.chat-message.mine {
  margin-left: auto;
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
  border-radius: 13px 6px 13px 13px;
  background: color-mix(in srgb, var(--accent) 13%, #fff);
}

.chat-message p {
  margin: 4px 0;
  white-space: pre-wrap;
}

.chat-message small {
  color: var(--muted);
  font-size: 9px;
}

.chat-file audio,
.chat-file img,
.chat-file video {
  width: 100%;
  max-height: 180px;
}

.chat-compose {
  border-top: 1px solid var(--line);
}

.chat-compose > div {
  display: flex;
  gap: 6px;
  margin-top: 7px;
  flex-wrap: wrap;
}

#record-voice.recording {
  border-color: #c54444;
  color: #c54444;
  animation: voice-pulse 1s infinite;
}

@keyframes voice-pulse { 50% { opacity: .55; } }

.media-modal {
  width: min(1100px, calc(100vw - 32px));
  max-height: 94vh;
  max-height: 94dvh;
  overflow: hidden;
}

#media-content {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  max-width: 100%;
  max-height: calc(94dvh - 48px);
  overflow-x: hidden;
  overflow-y: auto;
}

.media-stage {
  position: relative;
  min-width: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 12px;
  background: transparent;
}

.media-stage img,
.media-stage video {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(94dvh - 210px);
  object-fit: contain;
}

.media-stage.image { cursor: zoom-in; touch-action: none; }
.media-stage.image.zoomed { cursor: grab; }
.media-stage.image.dragging { cursor: grabbing; }
.media-stage.image img { transform-origin: center; user-select: none; will-change: transform; }
.media-zoom-help { position:absolute; left:50%; bottom:8px; max-width:calc(100% - 16px); transform:translateX(-50%); padding:5px 9px; border-radius:999px; background:rgba(17,24,32,.72); color:#fff; text-align:center; pointer-events:none; }

.media-stage audio {
  width: min(520px, 90%);
}

.media-info {
  min-width: 0;
  width: 100%;
}

.media-info h2 { margin: 0 0 8px; max-width: 100%; overflow-wrap: anywhere; word-break: break-word; }
.media-info p { margin: 4px 0; overflow-wrap: anywhere; }
.media-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }

.media-actions a {
  text-decoration: none;
}

@media (max-width: 820px) {
  #card-modal {
    padding: 8px;
  }

  #card-modal .collab-card {
    width: min(720px, 96vw);
    height: auto;
    min-height: 0;
    max-height: none;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    overflow: visible;
    margin: 0;
    resize: none;
  }

  .card-main {
    overflow: visible;
    padding: 24px 18px;
  }

  .card-chat {
    min-height: 0;
    max-height: none;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  #chat-messages {
    height: min(420px, 55vh);
    height: min(420px, 55dvh);
    min-height: 180px;
    max-height: none;
  }

  .media-modal { width:calc(100vw - 16px); }
  .media-stage img,.media-stage video { max-height:calc(94dvh - 250px); }
  .media-zoom-help { font-size:10px; }
}

/* Compact card editor */
#card-modal .card-main {
  gap: 8px;
  padding: 16px 18px 0;
}

#card-modal .close {
  z-index: 8;
}

.card-kicker {
  margin: 0;
  padding-right: 34px;
}

#card-modal .title-input {
  min-height: 38px;
  padding: 1px 34px 5px 0;
  overflow: hidden;
  font-size: 23px;
  line-height: 1.18;
}

.description-field {
  gap: 3px;
  padding: 7px 9px !important;
}

.description-field textarea {
  min-height: 36px;
  max-height: 180px;
  padding: 7px 9px;
  overflow-y: auto;
  resize: none;
}

.card-details-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(160px, 1.35fr) minmax(130px, 1fr) minmax(96px, .65fr);
  gap: 7px;
}

.compact-field,
.compact-popover > summary {
  min-height: 54px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
}

.compact-field select {
  padding: 4px 6px;
}

.compact-popover {
  position: relative;
}

.compact-popover > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  cursor: pointer;
  list-style: none;
  font-size: 11px;
  font-weight: 700;
}

.compact-popover > summary::-webkit-details-marker,
.section-tool > summary::-webkit-details-marker,
.file-filter-menu > summary::-webkit-details-marker,
.file-sort-menu > summary::-webkit-details-marker,
.file-download-menu > summary::-webkit-details-marker {
  display: none;
}

.compact-popover > summary b {
  color: var(--ink);
  font-size: 12px;
}

.compact-popover-panel {
  position: absolute;
  z-index: 12;
  top: calc(100% + 5px);
  left: 0;
  width: min(310px, 78vw);
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: var(--shadow);
}

.compact-popover-panel label + label {
  margin-top: 8px;
}

.due-presets {
  gap: 5px;
  margin-top: 8px;
}

#card-color-swatch {
  width: 38px;
  height: 30px;
  flex: 0 0 38px;
  border: 1px solid #fff;
  border-radius: 7px;
  box-shadow: 0 0 0 1px var(--line);
  background: #fff;
}

.color-control .compact-popover-panel {
  right: 0;
  left: auto;
  width: 210px;
}

.color-control input[type=color] {
  width: 100%;
  height: 72px;
  padding: 0;
  overflow: hidden;
  border: 1px solid #fff;
  border-radius: 9px;
  background: transparent;
  box-shadow: 0 0 0 1px var(--line);
  cursor: pointer;
}

.color-control input[type=color]::-webkit-color-swatch-wrapper {
  padding: 0;
}

.color-control input[type=color]::-webkit-color-swatch {
  border: 1px solid #fff;
  border-radius: 8px;
}

.color-control .hex-color {
  margin-top: 0;
}

.checklist-title h3,
.files-heading h3 {
  font-size: 17px;
  font-weight: 700;
}

#card-modal .card-main > .section-head,
#card-modal .card-main > #checklist,
#card-modal .card-main > .new-section,
#card-modal .card-main > #card-files,
#card-modal .card-main > footer {
  padding: 8px;
}

#card-modal .card-main > .section-head {
  margin: 2px 0 -4px;
}

.check-island {
  margin: 6px 0;
  padding: 8px 9px;
  border-radius: 10px;
}

.check-island > header {
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 5px;
  margin-bottom: 3px;
}

.check-island > header textarea {
  min-height: 32px;
  padding: 4px 6px;
  resize: none;
}

.section-drag {
  color: var(--muted);
  cursor: grab;
  font-size: 19px;
}

.check-island.dragging-section {
  opacity: .42;
  border-style: dashed;
}

.section-tools {
  display: flex;
  align-items: center;
  gap: 4px;
}

.section-tool {
  position: relative;
}

.section-tool > summary,
.icon-danger {
  min-width: 31px;
  height: 31px;
  display: inline-grid;
  place-items: center;
  padding: 3px 6px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  border-radius: 7px;
  background: color-mix(in srgb, var(--accent) 8%, #fff);
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  font-size: 13px;
}

.section-tool > summary small {
  margin-left: 2px;
  font-size: 9px;
}

.icon-danger {
  border-color: #f0b9b4;
  background: #ffebe9;
  color: #bd332b;
}

.section-tool-panel {
  position: absolute;
  z-index: 10;
  top: calc(100% + 5px);
  right: 0;
  width: min(430px, 72vw);
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: var(--shadow);
}

.section-comments {
  margin: 0;
  padding-top: 10px;
  border-top: 0;
}

.section-comments > div:not(.section-add) {
  max-height: 180px;
  margin-top: 0;
}

.check-item {
  display: grid;
  grid-template-columns: auto minmax(120px, 1fr) minmax(105px, .45fr) auto;
  gap: 6px;
  padding: 4px 0;
}

.check-item textarea {
  min-height: 32px;
  padding: 5px 7px;
  resize: none;
}

.check-item.level-2 { margin-left: 8px; }
.check-item.level-3 { margin-left: 16px; }
.check-item.level-4 { margin-left: 24px; }
.check-item.level-5 { margin-left: 32px; }

.level-drag {
  gap: 2px;
  font-size: 9px;
}

.level-drag span {
  color: color-mix(in srgb, var(--accent) 70%, var(--ink));
  text-align: center;
}

.level-drag input[type=range] {
  width: 100%;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  accent-color: var(--accent);
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 65%, #fff) calc((var(--level) - 1) * 25%), var(--soft) 0);
  cursor: ew-resize;
}

.new-section {
  margin-top: 3px;
}

.inactive-tasks,
.inactive-sections {
  margin-top: 5px;
  padding: 6px;
}

.files-heading {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.files-heading h3 {
  margin-right: 2px;
}

.toolbar-separator {
  width: 1px;
  height: 30px;
  background: var(--line);
}

.files-heading .secondary,
.files-heading .upload-button,
.file-filter-menu > summary,
.file-sort-menu > summary,
.file-download-menu > summary {
  padding: 7px 9px;
  font-size: 11px;
}

.toolbar-select {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
}

.toolbar-select select {
  padding: 6px;
}

.file-filter-menu,
.file-sort-menu,
.file-download-menu {
  position: relative;
}

.file-filter-menu > summary,
.file-sort-menu > summary {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  list-style: none;
  font-weight: 700;
}

.file-filter-menu .file-type-options {
  position: absolute;
  z-index: 10;
  top: calc(100% + 5px);
  left: 0;
  width: 180px;
  display: grid;
  gap: 7px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  box-shadow: var(--shadow);
}

.download-compact {
  text-decoration: none;
}

.file-actions-menu {
  position: relative;
}

.file-actions-menu > summary {
  width: 34px;
  height: 31px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  list-style: none;
  color: var(--ink);
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
}

.file-actions-menu > summary::-webkit-details-marker {
  display: none;
}

.file-actions-options {
  position: absolute;
  z-index: 15;
  top: calc(100% + 6px);
  right: 0;
  width: 225px;
  display: grid;
  gap: 4px;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: var(--shadow);
}

.file-actions-options button {
  width: 100%;
  border: 0;
  border-radius: 7px;
  padding: 9px 10px;
  background: transparent;
  color: var(--ink);
  text-align: left;
  font-size: 12px;
  font-weight: 700;
}

.file-actions-options button:hover,
.file-actions-options button.active {
  background: color-mix(in srgb, var(--accent) 12%, #fff);
  color: color-mix(in srgb, var(--accent) 76%, var(--ink));
}

.file-tile.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 24%, transparent);
}

.file-tile.inactive-file {
  background: color-mix(in srgb, var(--soft) 72%, #fff);
}

.file-tile.inactive-file .file-preview {
  filter: saturate(.55);
  opacity: .82;
}

.file-selector {
  position: absolute;
  z-index: 4;
  top: 8px;
  left: 8px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--ink) 17%, transparent);
  border-radius: 8px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 3px 10px rgba(23,33,43,.12);
  cursor: pointer;
}

.file-selector input {
  width: 17px;
  height: 17px;
  margin: 0;
  padding: 0;
  accent-color: var(--accent);
}

.file-selection-bar {
  column-span: all;
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  padding: 9px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 7%, #fff);
}

.file-selection-bar b {
  margin-right: auto;
  font-size: 12px;
}

.file-selection-bar span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.file-selection-bar .secondary {
  padding: 7px 9px;
  font-size: 11px;
}

.showing-inactive {
  border-color: color-mix(in srgb, var(--muted) 55%, var(--line)) !important;
}

@media (max-width: 680px) {
  .file-actions-options {
    right: -8px;
    width: min(225px, calc(100vw - 36px));
  }

  .file-selection-bar {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .file-selection-bar b {
    width: 100%;
  }
}

.file-drop-zone {
  min-height: 74px;
  padding: 7px !important;
}

.file-mosaic {
  columns: 4 135px;
  column-gap: 7px;
}

.file-mosaic .file-tile {
  margin-bottom: 7px;
}

.file-mosaic .file-preview {
  min-height: 0;
}

.file-mosaic .file-preview img,
.file-mosaic .file-preview video {
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
}

.card-save-footer {
  position: sticky;
  z-index: 7;
  bottom: 0;
  margin: 2px -10px 0;
  border: 1px solid var(--line) !important;
  border-radius: 11px 11px 0 0 !important;
  background: rgba(255,255,255,.96) !important;
  box-shadow: 0 -10px 24px rgba(20,30,40,.08);
  backdrop-filter: blur(8px);
}

.column-inactive {
  margin-top: 9px;
  border-top: 1px dashed var(--line);
}

.column-inactive > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 9px 5px;
  color: var(--muted);
  cursor: pointer;
  list-style: none;
  font-size: 11px;
  font-weight: 700;
}

.column-inactive article {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 5px 0;
  padding: 7px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,.55);
}

.column-inactive article > span {
  min-width: 0;
  flex: 1;
}

.column-inactive b,
.column-inactive small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.column-inactive small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 9px;
}

@media (max-width: 680px) {
  .card-details-row {
    grid-template-columns: 1fr 1fr;
  }

  .color-control {
    grid-column: 1 / -1;
  }

  .check-item {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .level-drag {
    grid-column: 2 / 3;
  }

  .section-tool-panel {
    position: fixed;
    top: auto;
    right: 12px;
    bottom: 12px;
    left: 12px;
    width: auto;
    max-height: 58dvh;
    overflow-y: auto;
  }

  .files-heading {
    align-items: stretch;
  }

  .toolbar-separator {
    display: none;
  }
}

/* Viewport workspace and inherited company/project backgrounds */
html,
body {
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.app {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

.page {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: 66px minmax(0, 1fr);
  overflow: hidden;
}

.page > header {
  position: relative;
  z-index: 12;
  min-height: 0;
}

.global-company-brand {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.global-company-brand > span:last-child {
  min-width: 0;
  display: grid;
}

.global-company-brand small {
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.global-company-brand b {
  overflow: hidden;
  font: 700 16px/1.15 'Aptos','Segoe UI',sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.global-company-logo {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  overflow: hidden;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--ink);
  color: #fff;
  font-size: 21px;
}

.global-company-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

main {
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 22px 4vw 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  overflow: hidden;
}

.project-head {
  min-height: 0;
}

.project-identity {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 14px;
}

.project-identity > div:last-child {
  min-width: 0;
}

.project-icon {
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
  overflow: hidden;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #fff;
  font-size: 27px;
}

.project-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-head h1 {
  overflow: hidden;
  font-size: clamp(25px, 3vw, 39px);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-head > div > p:last-child {
  overflow: hidden;
  margin-top: 5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

main > nav {
  min-width: 0;
  margin-top: 18px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}

main > nav .tab {
  flex: 0 0 auto;
}

.project-workspace {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  isolation: isolate;
  border-radius: 16px 16px 0 0;
  background: var(--canvas);
}

.workspace-background,
.workspace-background-preview {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.workspace-background {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.workspace-content {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.workspace-content > section:not(.hidden) {
  grid-row: 2;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}

#board-view:not(.hidden) {
  padding: 0 12px 26px;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  overflow: hidden;
}

.cards-toolbar {
  grid-row: 1;
  min-width: 0;
  gap: 7px;
  margin: 12px 12px 6px;
  padding: 5px 6px;
  border: 1px solid rgba(255,255,255,.58);
  border-radius: 10px;
  background: color-mix(in srgb, #fff 84%, transparent);
  box-shadow: 0 5px 20px rgba(23,33,43,.08);
  backdrop-filter: blur(13px);
}

.cards-toolbar .search {
  min-height: 34px;
  padding: 5px 9px;
}

.cards-toolbar .toolbar-actions {
  gap: 6px;
}

.cards-toolbar .toolbar-actions > .secondary {
  min-height: 34px;
  padding: 6px 10px;
}

.cards-toolbar .toolbar-actions > .icon {
  width: 34px;
  height: 34px;
  padding: 3px;
}

.board {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  gap: 8px;
  align-items: stretch;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 0 10px;
  overscroll-behavior: contain;
}

.column {
  height: 100%;
  min-height: 0;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.55);
  background: color-mix(in srgb, var(--soft) 90%, transparent);
  box-shadow: 0 10px 28px rgba(23,33,43,.13);
  backdrop-filter: blur(11px);
}

.column-gap-add {
  position: relative;
  z-index: 4;
  width: 0;
  min-width: 0;
  min-height: 52px;
  flex: 0 0 0;
  align-self: flex-start;
  overflow: visible;
}

.column-gap-add button {
  position: absolute;
  top: 15px;
  left: 50%;
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 48%, #fff);
  border-radius: 50%;
  padding: 0;
  background: color-mix(in srgb, #fff 91%, var(--accent));
  color: var(--accent);
  box-shadow: 0 4px 12px rgba(23,33,43,.13);
  opacity: .45;
  transform: translateX(-50%) scale(.88);
  transition: opacity .15s ease, transform .15s ease, background .15s ease;
}

.column-gap-add button:hover,
.column-gap-add button:focus-visible {
  z-index: 2;
  outline: none;
  opacity: 1;
  transform: translateX(-50%) scale(1);
  background: #fff;
}

.column > header,
.column > .add-card,
.column > .column-inactive {
  flex: 0 0 auto;
}

.column > .column-inactive {
  max-height: 22%;
  overflow-y: auto;
}

.card-list {
  min-height: 0;
  flex: 1 1 auto;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 3px;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
}

#resources-view:not(.hidden),
#admin-view:not(.hidden) {
  padding: 16px;
  overflow: auto;
  background: color-mix(in srgb, var(--canvas) 86%, transparent);
  backdrop-filter: blur(9px);
}

#list-view:not(.hidden),
#calendar-view:not(.hidden) {
  margin-top: 0;
  padding: 0 12px 16px;
  overflow: auto;
  background: color-mix(in srgb, var(--canvas) 86%, transparent);
  backdrop-filter: blur(9px);
}

.workspace-background.type-emoji,
.workspace-background-preview.type-emoji {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--workspace-symbol-size, 160px) * .18);
  padding: calc(var(--workspace-symbol-size, 160px) * .22);
  background-image: none;
  line-height: 1;
}

.workspace-background.type-emoji > span,
.workspace-background-preview.type-emoji > span {
  flex: 0 0 auto;
  font-size: var(--workspace-symbol-size, 160px);
  line-height: 1;
  filter: drop-shadow(0 8px 18px rgba(23,33,43,.16));
  transform: rotate(var(--workspace-symbol-tilt,0deg));
}

.file-sort-options,
.file-download-options {
  position:absolute;
  z-index:16;
  top:calc(100% + 6px);
  left:0;
  width:190px;
  display:grid;
  gap:4px;
  padding:7px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  box-shadow:var(--shadow);
}
.file-download-options { left:auto;right:0;width:175px; }
.file-sort-options button,
.file-download-options a { width:100%;box-sizing:border-box;border:0;border-radius:7px;padding:9px 10px;background:transparent;color:var(--ink);text-align:left;text-decoration:none;font-size:11px;font-weight:700;cursor:pointer; }
.file-sort-options button:hover,
.file-sort-options button.active,
.file-download-options a:hover { background:color-mix(in srgb,var(--accent) 12%,#fff);color:color-mix(in srgb,var(--accent) 76%,var(--ink)); }
.file-download-menu > summary { list-style:none;cursor:pointer; }
.file-download-menu > summary.disabled,.file-download-options a.disabled { opacity:.5;pointer-events:none; }
.template-type-options { display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:12px 0;padding:0;border:0; }
.template-type-options legend { margin-bottom:7px;font-size:12px;font-weight:800;color:var(--muted); }
.template-type-options label { min-width:0;display:flex;gap:9px;align-items:flex-start;padding:12px;border:1px solid var(--line);border-radius:11px;background:var(--paper);cursor:pointer; }
.template-type-options label:has(input:checked) { border-color:var(--project-primary,var(--accent));background:color-mix(in srgb,var(--project-primary,var(--accent)) 8%,var(--paper)); }
.template-type-options input { margin-top:3px;accent-color:var(--project-primary,var(--accent)); }
.template-type-options span { display:grid;gap:3px;min-width:0; }
.template-type-options small { color:var(--muted);line-height:1.35; }
@media(max-width:640px){.template-type-options{grid-template-columns:1fr}}

.workspace-background.type-emoji.pattern-repeat,
.workspace-background-preview.type-emoji.pattern-repeat {
  align-content: flex-start;
  justify-content: flex-start;
}

.type-emoji.position-center {
  align-content: center;
  justify-content: center;
}

.type-emoji.position-top-left {
  align-content: flex-start;
  justify-content: flex-start;
}

.type-emoji.position-top-right {
  align-content: flex-start;
  justify-content: flex-end;
}

.type-emoji.position-bottom-left {
  align-content: flex-end;
  justify-content: flex-start;
}

.type-emoji.position-bottom-right {
  align-content: flex-end;
  justify-content: flex-end;
}

.background-editor {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--canvas) 65%, #fff);
}

.background-config-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.background-pattern-controls {
  min-width: 0;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 0fr;
  align-items: end;
  gap: 10px;
  transition: grid-template-columns .18s ease;
}

.background-pattern-controls.pattern-enabled {
  grid-template-columns: minmax(140px,.72fr) minmax(170px,1.28fr);
}

.background-repeat-toggle {
  min-height: 42px;
  margin: 0;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--paper);
  white-space: nowrap;
}

.background-tilt-control {
  min-width: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.pattern-enabled .background-tilt-control {
  opacity: 1;
  pointer-events: auto;
}

.background-tilt-control output {
  float: right;
  color: var(--accent);
  font-weight: 800;
}

.background-tilt-control input[type="range"] {
  width: 100%;
  margin-top: 8px;
  accent-color: var(--accent);
}

@media (max-width:600px) {
  .background-pattern-controls.pattern-enabled {
    grid-template-columns:minmax(108px,.72fr) minmax(0,1.28fr);
  }
  .background-repeat-toggle {
    white-space:normal;
  }
}

.background-custom-fields {
  display: grid;
  gap: 10px;
}

.workspace-background-preview {
  position: relative;
  min-height: 190px;
  max-height: 250px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  border-radius: 13px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.5);
}

.workspace-background-preview:empty::after {
  content: 'Vista previa del fondo';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.background-emoji-fields {
  display: grid;
  gap: 10px;
}

@media (max-width: 900px) {
  .page {
    width: 100%;
    margin-left: 0;
  }

  main {
    padding: 14px 14px 0;
  }

  .project-head {
    align-items: center;
  }

  .project-head h1 {
    font-size: 25px;
  }

  .project-icon {
    width: 44px;
    height: 44px;
  }

  .project-head > div > p:last-child {
    display: none;
  }

  main > nav {
    margin-top: 10px;
  }

  main > nav .tab:nth-child(3) {
    display: block;
  }

  #board-view:not(.hidden) {
    padding: 0 9px 29px;
  }

  .column {
    width: min(84vw, 320px);
    min-width: min(84vw, 320px);
  }
}

/* Shared delivery range, compact project header and searchable card assignees. */
.date-range-filter {
  position: relative;
  flex: 0 0 auto;
}

.date-range-filter > summary {
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}

.date-range-filter > summary::-webkit-details-marker {
  display: none;
}

.date-range-filter > summary span,
.date-range-filter > summary .calendar-filter-icon {
  color: var(--accent);
  font-size: 17px;
}

.calendar-filter-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.date-range-filter > summary b {
  max-width: 155px;
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.date-range-panel {
  position: absolute;
  z-index: 25;
  top: calc(100% + 7px);
  right: 0;
  width: min(310px, calc(100vw - 24px));
  display: grid;
  gap: 9px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(23,33,43,.18);
}

.date-range-panel label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.date-range-panel input {
  width: 100%;
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 8px;
  color: var(--ink);
  font: 600 12px 'Aptos','Segoe UI',sans-serif;
}

.date-range-panel > div {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
}

.project-head {
  gap: 12px;
}

.project-identity {
  gap: 10px;
}

.project-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  font-size: 23px;
}

.project-head h1 {
  font-size: clamp(23px, 2.6vw, 35px);
}

.project-head > div > p:last-child {
  margin-top: 3px;
  line-height: 1.25;
}

main > nav {
  margin-top: 8px;
}

.card-creation-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.card-assignee-control {
  position: relative;
  min-width: min(360px, 52%);
}

.card-assignee-control > summary {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 6px 9px;
  background: #fff;
  cursor: pointer;
  list-style: none;
}

.card-assignee-control > summary::-webkit-details-marker {
  display: none;
}

.card-assignee-control > summary span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.card-assignee-control > summary b {
  min-width: 0;
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-assignee-panel {
  width: min(360px, calc(100vw - 28px));
  max-height: min(420px, 60vh);
  overflow: auto;
}

.card-assignee-search {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.card-assignee-search input {
  width: 100%;
  min-height: 35px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 9px;
}

#card-assignee-options {
  display: grid;
  gap: 5px;
  margin: 8px 0 0;
  padding: 0;
  border: 0;
}

#card-assignee-options > label {
  display: block;
  cursor: pointer;
}

#card-assignee-options > label > input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

#card-assignee-options > label > span {
  min-height: 39px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 7px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
}

#card-assignee-options > label > input:checked + span {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--line));
  background: color-mix(in srgb, var(--accent) 10%, #fff);
  box-shadow: inset 3px 0 var(--accent);
}

#card-assignee-options .project-member-avatar {
  width: 27px;
  height: 27px;
  flex-basis: 27px;
}

/* Card colors remain visible in board, list and calendar. */
.card.has-card-color,
.list-row.has-card-color,
.calendar-card.has-card-color {
  color: var(--card-surface-text);
}

.card.has-card-color > p,
.card.has-card-color .card-created-meta,
.card.has-card-color footer,
.list-row.has-card-color > span,
.list-row.has-card-color strong small,
.list-row.has-card-color .list-empty-value,
.calendar-card.has-card-color .calendar-card-title {
  color: var(--card-surface-text);
  opacity: .82;
}

.list-row > *,
.list-row > strong,
.list-row > strong small {
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: normal;
}

.list-row > strong small,
.list-assignees > small {
  text-overflow: clip;
  white-space: normal;
}

/* Calendar with full-month, dynamic-height test mode and fullscreen mode. */
#calendar-view:not(.hidden) {
  position: relative;
}

.calendar-floating-actions {
  position: sticky;
  z-index: 8;
  top: 8px;
  width: fit-content;
  display: flex;
  gap: 7px;
  margin: 8px 8px 8px auto;
}

.calendar-floating-actions button {
  min-height: 34px;
  box-shadow: 0 7px 18px rgba(23,33,43,.14);
}

.calendar-floating-actions .active {
  border-color: var(--accent);
  color: var(--accent);
}

#calendar-content .calendar {
  display: block;
  border-radius: 10px;
  overflow: hidden;
}

.project-visual-summary { grid-template-columns:112px minmax(0,1fr);align-items:center; }
.project-visual-summary .project-visual-edit { width:100%; }
.project-crop-managed { display:none!important; }
.group-visual-summary { display:grid!important;grid-template-rows:13px 50px;row-gap:7px;place-items:start center;min-width:0;height:100%; }
.group-visual-summary::before { content:"";display:block;width:100%;height:13px; }
.group-visual-summary .project-visual-edit { display:none!important; }
.group-visual-summary .visual-preview { grid-row:2;width:50px!important;height:50px!important;min-height:50px!important;box-sizing:border-box;margin:0 auto!important;border-color:color-mix(in srgb,var(--accent) 45%,var(--line));border-radius:10px!important;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease; }
.group-visual-summary .visual-preview > span { width:100%;height:100%;display:grid;place-items:center;line-height:1; }
.group-visual-summary .visual-preview:hover,.group-visual-summary .visual-preview:focus-visible { border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent);transform:translateY(-1px);outline:0; }
.group-crop-managed { display:none!important; }
.group-photo-managed { display:none!important; }
.project-icon-editor-backdrop { z-index:150;align-items:center;padding:16px; }
.project-icon-editor-modal { width:min(880px,96vw);max-height:none;overflow:visible;padding:24px 28px; }
.project-visual-type { display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0 14px; }
.project-visual-type button { min-height:44px;border:1px solid var(--line);border-radius:10px;background:var(--paper);color:var(--muted);font-weight:800; }
.project-visual-type button.active { border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--paper));color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent); }
.project-icon-editor-grid { display:grid;grid-template-columns:minmax(280px,1fr) minmax(230px,.62fr);gap:20px;align-items:start; }
.project-icon-stage-wrap { min-width:0;display:grid;gap:8px; }
.project-icon-stage-wrap small { color:var(--muted);line-height:1.4; }
.project-icon-stage { width:min(100%,370px);aspect-ratio:1;display:grid;place-items:center;overflow:hidden;border:2px solid color-mix(in srgb,var(--accent) 55%,var(--line));border-radius:24px;background:#273846;cursor:grab;touch-action:none;user-select:none;box-shadow:0 14px 32px rgba(18,27,35,.16); }
.project-icon-stage.dragging { cursor:grabbing; }
.project-icon-stage img { width:100%;height:100%;object-fit:cover;pointer-events:none;will-change:transform,object-position; }
.visual-image-blur{position:relative;isolation:isolate;border-radius:18px}
.visual-image-blur::before{content:"";position:absolute;z-index:-1;inset:-12%;background-image:var(--visual-blur-image);background-position:center;background-size:cover;filter:blur(14px);transform:scale(1.1);opacity:.9}
.visual-image-blur>img,.visual-image-blur>.visual-symbol{position:relative;z-index:1}
.project-icon-stage-wrap .project-icon-stage{border-radius:18px;overflow:hidden}
.visual-blur-switch{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:10px;color:var(--ink);font-size:12px;font-weight:700;cursor:pointer}
.visual-blur-switch input{appearance:none;-webkit-appearance:none;position:relative;width:42px;height:24px;min-width:42px;margin:0;border:1px solid color-mix(in srgb,var(--muted) 55%,var(--line));border-radius:999px;background:color-mix(in srgb,var(--muted) 28%,var(--soft));cursor:pointer;transition:.2s ease}
.visual-blur-switch input::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.22);transition:transform .2s ease}
.visual-blur-switch input:checked{border-color:var(--accent);background:var(--accent)}
.visual-blur-switch input:checked::after{transform:translateX(18px)}
.visual-blur-switch input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.project-icon-stage span { font-size:clamp(64px,11vw,112px); }
.visual-symbol { width:100%;height:100%;display:grid;place-items:center;line-height:1;will-change:transform; }
.project-icon-editor-controls { display:grid;gap:10px; }
.project-icon-editor-controls textarea { min-height:42px;max-height:42px;resize:none; }
.project-icon-editor-controls output { float:right;color:var(--accent);font-weight:800; }
.project-icon-editor-controls input[type=range] { width:100%;margin-top:8px;accent-color:var(--accent); }
.project-icon-editor-actions { display:flex;justify-content:flex-end;gap:9px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line); }

@media (min-width:651px) and (max-height:760px) {
  .project-icon-editor-modal { max-height:calc(100dvh - 20px);overflow-y:auto; }
  .project-icon-stage { width:min(100%,300px); }
}

@media (max-width:650px) {
  .project-icon-editor-backdrop { padding:5px; }
  .project-icon-editor-modal { width:calc(100vw - 10px);max-height:calc(100dvh - 10px);overflow-y:auto;padding:18px 14px;border-radius:14px; }
  .project-icon-editor-grid { grid-template-columns:1fr;gap:14px; }
  .project-icon-stage { width:min(100%,330px);margin:auto;border-radius:18px; }
  .project-icon-editor-controls { grid-template-columns:1fr 1fr; }
  .project-icon-editor-controls > * { min-width:0; }
  .project-icon-editor-controls [data-project-zoom-control],.project-icon-editor-controls [data-project-image-control] { grid-column:1 / -1; }
  .project-icon-editor-actions { position:sticky;bottom:-22px;margin-inline:-14px;padding:12px 14px;background:var(--paper); }
  .project-icon-editor-actions button { flex:1; }
}

.custom-field-flags,
.custom-field-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.custom-field-actions { justify-content: flex-end; }
.custom-fields-manager { grid-column:1 / -1;padding:0!important;overflow:hidden; }
.custom-fields-heading { width:100%;display:grid;grid-template-columns:42px minmax(0,1fr) 28px;align-items:center;gap:12px;padding:18px;border:0;background:transparent;color:var(--ink);text-align:left; }
.custom-fields-heading > span:nth-child(2) { display:grid;gap:4px; }
.custom-fields-heading b { font:700 20px 'Aptos','Segoe UI',sans-serif; }
.custom-fields-heading small { color:var(--muted);font-size:.88rem;font-weight:500; }
.custom-fields-heading > i { font-size:21px;font-style:normal;text-align:center;transition:transform .18s ease; }
.custom-fields-icon { display:grid;width:42px;height:42px;place-items:center;border:1px solid color-mix(in srgb,var(--accent) 25%,var(--line));border-radius:12px;background:color-mix(in srgb,var(--accent) 14%,var(--paper));color:color-mix(in srgb,var(--accent) 86%,var(--ink));font-size:0;box-shadow:none; }
.custom-fields-icon::before { content:"";width:23px;height:23px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' d='M6 3h12a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Zm2 5h8M8 12h8M8 16h5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' d='M6 3h12a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Zm2 5h8M8 12h8M8 16h5'/%3E%3C/svg%3E") center/contain no-repeat; }
.custom-fields-body { padding:0 18px 18px; }
.custom-fields-label-setting { display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:10px;margin-bottom:14px;padding:12px;border:1px solid var(--line);border-radius:11px;background:color-mix(in srgb,var(--accent) 5%,var(--paper)); }
.custom-fields-label-setting textarea { min-height:42px;max-height:42px;resize:none; }
.custom-fields-label-setting button { min-height:42px; }
.custom-fields-layout-preview { display:grid;gap:10px;margin-bottom:14px;padding:13px;border:1px solid var(--line);border-radius:11px;background:color-mix(in srgb,var(--accent) 3%,var(--paper)); }
.custom-fields-layout-preview > header { display:flex;align-items:flex-start;justify-content:space-between;gap:12px; }
.custom-fields-layout-preview > header > div { display:grid;gap:3px; }
.custom-fields-layout-preview > header small,.custom-fields-layout-preview > header > span { color:var(--muted);font-size:.78rem; }
.custom-layout-device-switch{display:flex!important;grid-template-columns:none!important;align-items:center;gap:5px!important;padding:3px;border:1px solid var(--line);border-radius:10px;background:var(--canvas)}
.custom-layout-device-switch button{min-width:42px;height:34px;display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:5px 8px;border:0;border-radius:7px;background:transparent;color:var(--muted);font-size:11px;font-weight:800;cursor:pointer}
.custom-layout-device-switch button.active{background:var(--paper);color:var(--accent);box-shadow:0 2px 7px rgba(23,33,43,.12)}
.custom-layout-device-switch svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
[data-custom-fields-preview] { display:grid;gap:9px; }
.custom-preview-row { display:grid;gap:5px; }
.custom-preview-row > small { color:var(--muted);font-size:.72rem;font-weight:700; }
.custom-preview-row > div { display:flex;flex-wrap:wrap;gap:8px;min-width:0;padding:7px;border:1px dashed color-mix(in srgb,var(--accent) 38%,var(--line));border-radius:9px;background:var(--canvas); }
.custom-preview-row article { flex:0 0 calc(var(--field-width) - var(--field-gap-adjust));min-width:0;height:42px;display:grid;grid-template-columns:18px minmax(0,1fr) 70px;align-items:center;gap:6px;padding:4px 5px;border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line));border-radius:7px;background:var(--paper);box-sizing:border-box;cursor:grab;overflow:hidden; }
.custom-preview-row article.dragging { opacity:.42; }
.custom-preview-row article > span { color:var(--muted);font-size:17px; }
.custom-preview-row article b { overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.82rem; }
.percentage-input { position:relative;display:block;width:100%; }
.percentage-input input { width:100%;padding-right:27px; }
.percentage-input input[data-percentage-input] { cursor:text;user-select:text;-webkit-user-select:text;touch-action:manipulation; }
.percentage-input > i { position:absolute;top:50%;right:10px;transform:translateY(-50%);color:var(--muted);font-size:.78rem;font-style:normal;font-weight:800;pointer-events:none; }
.percentage-input.compact { width:70px; }
.percentage-input.compact input { width:70px;height:30px;min-height:30px;padding:3px 21px 3px 7px;font-size:.75rem; }
.percentage-input.compact > i { right:8px;font-size:.7rem; }
#custom-field-list { display:grid;gap:6px; }
.custom-field-row { display:grid;grid-template-columns:38px minmax(0,1fr);align-items:center;min-height:52px;border:1px solid var(--line);border-radius:11px;background:var(--paper);box-shadow:0 2px 7px rgba(23,33,43,.06);transition:border-color .15s ease,opacity .15s ease,transform .15s ease; }
.custom-field-row.inactive { opacity:.58; }
.custom-field-row.expanded { border-color:color-mix(in srgb,var(--accent) 55%,var(--line)); }
.custom-field-row.dragging { opacity:.45;transform:scale(.99); }
.custom-field-drag { color:var(--muted);font-size:23px;text-align:center;cursor:grab;touch-action:none; }
.custom-field-drag:active { cursor:grabbing; }
.custom-preview-drag { color:var(--muted);cursor:grab;touch-action:none;user-select:none; }
.custom-preview-drag:active { cursor:grabbing; }
.custom-field-row > button { width:100%;min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto 26px;align-items:center;gap:10px;padding:11px 10px 11px 2px;border:0;background:transparent;color:var(--ink);text-align:left; }
.custom-field-row > button b { overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.custom-field-row > button small { min-width:0;color:var(--muted);text-align:right;white-space:nowrap; }
.custom-field-row > button i { width:26px;height:26px;display:grid;place-items:center;border:1px solid transparent;border-radius:7px;color:var(--muted);font-size:0;font-style:normal;transition:transform .18s ease,background-color .18s ease,border-color .18s ease; }
.custom-field-row > button i::before { content:"";width:7px;height:7px;border-right:1.8px solid currentColor;border-bottom:1.8px solid currentColor;transform:translateY(-2px) rotate(45deg); }
.custom-field-row > button:hover i { border-color:var(--line);background:var(--soft);color:var(--ink); }
.custom-field-row.expanded > button i { transform:rotate(180deg); }
.custom-field-create { width:100%;min-height:58px;margin-top:14px;border:0;border-radius:11px;background:color-mix(in srgb,var(--accent) 8%,var(--paper));color:var(--accent);font-size:1rem;font-weight:800; }
.custom-field-create:hover { background:color-mix(in srgb,var(--accent) 14%,var(--paper)); }
.custom-field-editor { display:grid;grid-template-columns:minmax(0,1fr) minmax(170px,.4fr) minmax(170px,.4fr);gap:11px;margin:8px 0 12px;padding:14px;border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line));border-radius:11px;background:color-mix(in srgb,var(--paper) 94%,var(--accent)); }
.custom-field-editor textarea[name="name"] { width:100%;min-height:42px;max-height:42px;height:42px;resize:none;overflow:hidden;box-sizing:border-box; }
.custom-field-editor-title,.custom-field-editor .custom-field-flags,.custom-field-editor .custom-field-actions { grid-column:1 / -1; }
.custom-field-editor-title { display:flex;align-items:center;justify-content:space-between;min-height:28px; }
.custom-field-editor-title .close { position:static; }
.duplicate-request-list { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.duplicate-request-list h4 { margin: 0 0 8px; }
#duplicate-request-list { display: grid; gap: 7px; }
#duplicate-request-list article { display: grid; grid-template-columns: minmax(0,1fr) minmax(90px,.75fr) auto; align-items: center; gap: 8px; padding: 9px; border: 1px solid var(--line); border-radius: 9px; }
#duplicate-request-list span { min-width: 0; display: grid; gap: 2px; }
#duplicate-request-list small { color: var(--muted); }
#duplicate-request-list code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#duplicate-request-list em { color: var(--accent); font-size: 11px; font-style: normal; font-weight: 800; }
.field-change-request-list { margin-top:12px; }
#field-change-request-list { display:grid;gap:7px; }
#field-change-request-list article { display:grid;grid-template-columns:minmax(0,1fr) minmax(90px,.7fr) auto;align-items:center;gap:8px;padding:9px;border:1px solid var(--line);border-radius:9px; }
#field-change-request-list article > span { min-width:0;display:grid;gap:2px; }
#field-change-request-list small { color:var(--muted); }
#field-change-request-list code { overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
#field-change-request-list article > div { display:flex;gap:6px; }
#field-change-request-list button { min-height:34px;padding:6px 9px; }
.locked-field-control { display:block!important;margin:0!important; }
.locked-field-control [data-custom-field] { pointer-events:none;cursor:not-allowed;caret-color:transparent; }
.field-change-request-modal { width:min(520px,94vw); }
.field-change-request-modal [data-field-change-control] { display:grid;gap:12px;margin:16px 0;max-height:min(55vh,520px);overflow:auto;padding-right:3px; }
.field-change-request-modal [data-change-field] { display:grid;gap:5px; }
.field-change-request-modal [data-change-field] > span { color:var(--muted);font-size:.78rem;font-weight:700; }
.field-change-request-modal [data-field-change-control] textarea,.field-change-request-modal [data-field-change-control] input:not([type="checkbox"]) { width:100%;min-height:42px;box-sizing:border-box; }
.field-change-review-modal { width:min(620px,94vw); }
.field-change-comparison { display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:stretch;gap:10px;margin:18px 0; }
.field-change-comparison > section { min-width:0;padding:13px;border:1px solid var(--line);border-radius:11px;background:var(--soft); }
.field-change-comparison small { color:var(--muted);font-weight:700; }
.field-change-comparison p { margin:7px 0 0;overflow-wrap:anywhere;white-space:pre-wrap; }
.field-change-comparison > span { align-self:center;color:var(--accent);font-size:1.4rem; }
@media (max-width:560px) { .field-change-comparison { grid-template-columns:1fr; }.field-change-comparison > span { transform:rotate(90deg);justify-self:center; } }

.card-custom-fields {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--canvas);
}

.card-custom-fields-head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.card-custom-fields-head small { color: var(--muted); }
.card-custom-fields-actions { display:flex;align-items:center;gap:6px; }
.card-custom-fields-actions button { min-height:32px;padding:5px 9px; }
.card-custom-fields-actions .custom-fields-more { width:34px;padding:4px;font-weight:900;letter-spacing:1px; }
.card-custom-fields-grid { display:flex;flex-wrap:wrap;gap:8px; }
.card-custom-fields-grid label { flex:0 0 calc(var(--field-width) - var(--field-gap-adjust));min-width:0;max-width:100%;box-sizing:border-box; }
.card-custom-fields-grid label > span { display: block; margin-bottom: 5px; }
.card-custom-fields-grid input:not([type="checkbox"]),.card-custom-fields-grid textarea,.card-custom-fields-grid select { width:100%;height:36px;min-height:36px;max-height:36px;padding-block:7px;resize:none;overflow:hidden;box-sizing:border-box; }
.card-custom-fields-grid .boolean-field { min-height:36px;align-self:end;padding:7px 9px;border:1px solid var(--line);border-radius:8px;background:var(--paper); }
.card-custom-fields-grid .boolean-field > span { margin:0; }

@media (max-width: 700px) {
  .custom-fields-heading { grid-template-columns:42px minmax(0,1fr) 24px;padding:14px; }
  .custom-fields-icon { width:42px;height:42px;border-radius:11px; }
  .custom-fields-heading b { font-size:17px; }
  .custom-fields-body { padding:0 10px 12px; }
  .custom-fields-label-setting { grid-template-columns:1fr; }
  .custom-fields-label-setting button { width:100%; }
  .custom-fields-layout-preview > header { flex-direction:column; }
  .custom-preview-row article { flex-basis:calc(var(--field-width) - var(--field-gap-adjust)); }
  .custom-field-row { grid-template-columns:32px minmax(0,1fr); }
  .custom-field-row > button { grid-template-columns:minmax(0,1fr) auto 26px;padding-right:7px;gap:6px; }
  .custom-field-row > button small { font-size:.72rem; }
  .custom-field-editor { grid-template-columns:1fr; }
  .custom-field-editor > * { grid-column:1!important; }
  .card-custom-fields { gap:6px;padding:9px; }
  .card-custom-fields-grid { column-gap:8px;row-gap:4px; }
  .card-custom-fields-grid label { flex-basis:calc(var(--field-width-mobile) - var(--field-gap-adjust-mobile)); }
  .card-custom-fields-grid label > span { margin-bottom:2px;line-height:1.15; }
  .card-custom-fields-head { align-items:center;flex-direction:row;min-height:34px; }
  .card-custom-fields-actions { margin-left:auto; }
  .duplicate-authorization-prompt { right: 16px; bottom: 16px; }
  #duplicate-request-list article { grid-template-columns: 1fr auto; }
  #duplicate-request-list code { grid-column: 1 / -1; grid-row: 2; }
}

.calendar-weekdays {
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:1px;
  border-bottom:1px solid var(--line);
  background:var(--line);
}

.calendar-weekdays span {
  min-width:0;
  padding:8px 6px;
  overflow:hidden;
  background:color-mix(in srgb,var(--accent) 7%,#fff);
  color:var(--muted);
  font-size:11px;
  font-weight:800;
  text-align:center;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.calendar-week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  min-height: 108px;
  background: var(--line);
}

.calendar.dynamic-rows .calendar-week {
  min-height: 48px;
}

.calendar.dynamic-rows .calendar-week.has-events {
  min-height: 88px;
  max-height: 116px;
}

#calendar-content .day {
  position: relative;
  min-width: 0;
  min-height: inherit;
  max-height: 116px;
  padding: 29px 5px 5px;
  overflow: hidden;
}

.calendar-day-number {
  position: absolute;
  top: 4px;
  right: 5px;
  width: 23px !important;
  height: 23px;
  display: grid !important;
  place-items: center;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: inherit;
  font-weight: 800;
  box-shadow: none !important;
}

.calendar-day-number:hover {
  background: color-mix(in srgb, var(--accent) 14%, #fff) !important;
  color: var(--accent);
}

.calendar-day-cards {
  height: 100%;
  overflow: auto;
  scrollbar-width: thin;
}

#calendar-content .calendar-card {
  grid-template-columns: minmax(0, 1fr) auto;
}

html:not([data-theme="dark"]) #calendar-content .calendar-card:not(.has-card-color) {
  background:#ededed;
}

#calendar-view:fullscreen,
#calendar-view.calendar-expanded {
  padding: 8px 14px 14px;
  overflow: auto;
  background: var(--canvas);
}

#calendar-view.calendar-expanded {
  position: fixed;
  z-index: 1000;
  inset: 0;
}

#calendar-view:fullscreen #calendar-content,
#calendar-view.calendar-expanded #calendar-content {
  min-width: 0;
}

#calendar-view:fullscreen .calendar-week,
#calendar-view.calendar-expanded .calendar-week {
  min-height: clamp(85px, 14vh, 116px);
}

/* Consecutive card updates collapse into one chronological group. */
.chat-update-group {
  width: 100%;
  margin: 3px 0 12px;
}

.chat-update-group summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--muted);
  cursor: pointer;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.chat-update-group summary::before,
.chat-update-group summary::after {
  content: '';
  height: 1px;
  flex: 1;
  background: var(--line);
}

.chat-update-group summary b {
  min-width: 22px;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  text-align: center;
  text-transform: none;
  letter-spacing: 0;
}

.chat-update-group-body {
  display: grid;
  gap: 7px;
  margin: 8px 10px 0;
}

.chat-update-entry {
  padding: 10px;
  border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--line));
  border-radius: 9px;
  background: color-mix(in srgb, var(--accent) 6%, #fff);
}

.chat-update-entry p {
  margin: 7px 0;
  font-weight: 700;
}

.chat-update-entry dl,
.chat-update-entry dl > div {
  margin: 0;
}

.chat-update-entry dl > div {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  gap: 7px;
  padding: 5px 0;
  border-top: 1px solid var(--line);
}

.chat-update-entry dt {
  color: var(--muted);
  font-size: 10px;
}

.chat-update-entry dd {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: 11px;
}

@media (max-width: 700px) {
  .date-range-filter,
  .date-range-filter > summary {
    width: 100%;
  }

  .date-range-panel {
    right: auto;
    left: 0;
  }

  .card-creation-row {
    align-items: stretch;
    flex-direction: column;
  }

  .card-assignee-control {
    width: 100%;
    min-width: 0;
  }

  .calendar-floating-actions {
    left: 0;
    max-width: calc(100vw - 28px);
  }
}

.column-assignee-picker {
  position: relative;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.column-assignee-picker > summary {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  cursor: pointer;
  list-style: none;
}
.column-assignee-picker > summary::-webkit-details-marker { display:none; }
.column-assignee-picker > summary span { color:var(--muted); font-size:10px; font-weight:800; text-transform:uppercase; }
.column-assignee-picker > summary b { min-width:0; overflow:hidden; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.column-assignee-panel { width:min(410px,calc(100vw - 28px)); padding:9px; }
.column-user-filter { display:grid; grid-template-columns:auto minmax(150px,1fr); align-items:center; gap:8px; margin-top:7px; color:var(--muted); font-size:10px; font-weight:800; }
.column-user-filter select { min-height:34px; }

#column-assigned-users {
  max-height: 264px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
  margin-top:8px;
  overflow-y: auto;
  overscroll-behavior:contain;
}

#column-assigned-users label {
  min-width: 0;
  display:block;
  padding:0;
  border:0;
  border-radius:9px;
  background:transparent;
  font-size: 12px;
  cursor:pointer;
}

#column-assigned-users label > input { position:absolute; opacity:0; pointer-events:none; }
#column-assigned-users label > span { min-height:39px; display:flex; align-items:center; gap:8px; padding:5px 7px; border:1px solid var(--line); border-radius:9px; background:#fff; }

#column-assigned-users label:has(input:checked) {
  background: color-mix(in srgb, var(--accent) 13%, #fff);
}

#column-assigned-users label > span b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.board-pan-ready:not(.reordering-columns) {
  cursor: grab;
}

.board-pan-ready .card,
.board-pan-ready button,
.board-pan-ready input,
.board-pan-ready textarea,
.board-pan-ready select,
.board-pan-ready a {
  cursor: pointer;
}

.board-pan-ready textarea,
.board-pan-ready input,
.board-pan-ready select {
  cursor: text;
}

.board-pan-ready.panning-board {
  cursor: grabbing;
  user-select: none;
}

.board-pan-ready.panning-board * {
  cursor: grabbing !important;
}

@media (max-width: 520px) {
  #column-assigned-users {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 650px) {
  .page {
    grid-template-rows: 58px minmax(0, 1fr);
  }

  .page > header {
    height: 58px;
    padding: 0 12px;
  }

  .global-company-logo {
    width: 34px;
    height: 34px;
  }

  .global-company-brand small,
  .user-copy {
    display: none;
  }

  main {
    padding: 10px 8px 0;
  }

  .project-head {
    gap: 8px;
  }

  .project-identity {
    gap: 9px;
  }

  .project-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    font-size: 21px;
  }

  .project-head h1 {
    font-size: 20px;
  }

  .project-head .eyebrow,
  .head-actions .secondary {
    display: none;
  }

  .head-actions .primary {
    padding: 8px 10px;
  }

  main > nav {
    gap: 18px;
  }

  .cards-toolbar {
    align-items: stretch;
    gap: 5px;
    padding: 5px;
  }

  .search {
    width: 100%;
  }

  .background-config-grid {
    grid-template-columns: 1fr;
  }
}

/* Cambio de contraseña */
.profile-actions,
.record-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
}

.password-modal .hint {
  margin: 0;
}

.password-user-summary {
  margin: 0;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--canvas);
}

/* Reordenamiento de tarjetas */
.card.dragging-card {
  opacity: .42;
  cursor: grabbing;
}

.column.drag-target {
  outline: 2px solid color-mix(in srgb, var(--accent) 58%, transparent);
  outline-offset: -2px;
}

.column.drag-target .card-list {
  min-height: 78px;
}

.card-drop-indicator {
  flex: 0 0 58px;
  min-height: 58px;
  border: 2px dashed var(--accent);
  border-radius: 9px;
  background: color-mix(in srgb, var(--accent) 12%, #fff);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.62);
  pointer-events: none;
}

@media (max-width: 650px) {
  .profile-actions,
  .record-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .profile-actions > *,
  .record-actions > * {
    width: 100%;
  }
}

/* Full-card template management */
.card-save-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
}

.template-create-summary {
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
  border-radius: 9px;
  background: color-mix(in srgb, var(--accent) 7%, #fff);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.create-card-modal {
  width: min(650px, calc(100vw - 24px));
}

.create-card-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.create-card-heading h2 {
  margin: 0;
}

.bulk-mode-toggle {
  flex: 0 0 auto;
  padding: 9px 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 72%, #0000);
  border-radius: 9px;
  background: var(--accent);
  color: var(--accent-contrast, #fff);
  font-weight: 800;
}

.bulk-mode-toggle.active {
  background: color-mix(in srgb, var(--accent) 18%, var(--paper));
  color: var(--ink);
}

.bulk-card-fields {
  display: grid;
  gap: 10px;
}

.bulk-card-fields > small {
  margin-top: -5px;
  color: var(--muted);
}

.bulk-import-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 10%, var(--paper));
}

.bulk-import-summary b {
  color: var(--accent);
  font-size: 16px;
}

.bulk-import-summary span {
  min-width: 0;
  color: var(--muted);
  overflow-wrap: anywhere;
}

@media (max-width: 540px) {
  .create-card-heading,
  .bulk-import-summary {
    align-items: stretch;
    grid-template-columns: 1fr;
    flex-direction: column;
  }

  .bulk-mode-toggle { width: 100%; }
}

.template-manager,
.project-template-panel {
  display: grid;
  gap: 12px;
}

.template-manager-actions {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 8px;
}

.template-record {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
}

.template-record + .template-record {
  margin-top: 8px;
}

.template-record.inactive {
  background: var(--soft);
}

.template-record.inactive > div:first-child { opacity:.58; }
.template-record.inactive [data-template-toggle] { border-color:var(--accent);color:var(--accent);opacity:1; }

.template-record > div:first-child,
.template-record > div:first-child > span {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.template-record > div:first-child {
  align-items: flex-start;
  flex-direction: column;
}

.template-record b,
.template-record small {
  overflow: hidden;
  text-overflow: ellipsis;
}

.template-record small {
  color: var(--muted);
}

.template-record em {
  padding: 3px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 14%, var(--paper));
  color: var(--accent);
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}

.template-record > div:last-child {
  display: flex;
  gap: 7px;
}

.template-source-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 9px;
}

.template-source-card {
  min-width: 0;
  display: grid;
  gap: 5px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  text-align: left;
}

.template-source-card:hover {
  border-color: var(--accent);
  box-shadow: 0 7px 18px rgba(23,33,43,.08);
}

.template-source-card small {
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.template-source-card span {
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
}

@media (max-width: 650px) {
  .card-save-footer,
  .card-save-actions,
  .template-record,
  .template-record > div:last-child {
    align-items: stretch;
  }

  .card-save-footer,
  .template-record {
    grid-template-columns: 1fr;
  }

  .card-save-footer,
  .card-save-actions,
  .template-record > div:last-child {
    flex-direction: column;
  }
}

/* Persistent board scrollbar: independent from the tallest column. */
#board-view {
  padding-bottom: 25px;
}

.board {
  scrollbar-width: none;
}

.board::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.board-scroll-footer {
  position: fixed;
  z-index: 9;
  bottom: 0;
  height: 24px;
  overflow-x: scroll;
  overflow-y: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--line));
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  background: color-mix(in srgb, var(--canvas) 88%, #fff);
  box-shadow: 0 -7px 18px rgba(23,33,43,.10);
  scrollbar-color: var(--accent) color-mix(in srgb, var(--accent) 12%, #e1e6e9);
  scrollbar-width: auto;
  overscroll-behavior-x: contain;
}

.board-scroll-footer:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 65%, #fff);
  outline-offset: -2px;
}

.board-scroll-footer::-webkit-scrollbar {
  height: 14px;
}

.board-scroll-footer::-webkit-scrollbar-track {
  margin: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, #e1e6e9);
}

.board-scroll-footer::-webkit-scrollbar-thumb {
  min-width: 42px;
  border: 3px solid transparent;
  border-radius: 999px;
  background: var(--accent);
  background-clip: padding-box;
}

.board-scroll-footer::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--accent) 80%, var(--ink));
  background-clip: padding-box;
}

.board-scroll-track {
  height: 1px;
  pointer-events: none;
}

@media (max-width: 900px) {
  .board-scroll-footer {
    z-index: 8;
    height: 27px;
  }

  #board-view {
    padding-bottom: 29px;
  }
}

/* Card timeline, safe closing and compact movement controls */
.card-details-row {
  grid-template-columns: minmax(150px,1.15fr) minmax(150px,1fr) minmax(145px,1fr) minmax(88px,.55fr);
}

.due-control > summary {
  justify-content: center;
  text-align: center;
}

.due-control.due-colored > summary {
  border-color: color-mix(in srgb, var(--due-bg) 78%, #fff);
  background: var(--due-bg);
  color: var(--due-text);
  box-shadow: 0 3px 9px color-mix(in srgb, var(--due-bg) 22%, transparent);
}

.due-control.due-colored > summary b {
  color: inherit;
}

.card-editor-sticky {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto auto;
  align-items: center;
  gap: 6px 9px;
}

.card-editor-sticky .card-kicker,
.card-editor-sticky .title-input {
  grid-column: 1;
}

.card-editor-sticky .card-chat-reopen {
  grid-column: 2;
  grid-row: 1 / 3;
}

.card-editor-sticky > .close {
  position: static;
  grid-column: 3;
  grid-row: 1 / 3;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  font-size: 23px;
}

.chat-head {
  justify-content: space-between;
  gap: 10px;
}

.chat-close,
.popup-close {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font-size: 23px;
  cursor: pointer;
}

.chat-close:hover,
.popup-close:hover {
  background: color-mix(in srgb,var(--accent) 10%,#fff);
  color: var(--ink);
}

.task-planning-popover > .popup-close {
  position: absolute;
  top: 6px;
  right: 6px;
  margin: 0;
}

#card-form.chat-hidden {
  grid-template-columns: minmax(0,1fr);
}

#card-form.chat-hidden .card-chat {
  display: none;
}

.chat-author {
  display: flex;
  align-items: center;
  gap: 7px;
}

.chat-avatar {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 9px;
  color: #fff;
  font-size: 16px;
}

.chat-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#chat-message-list > .chat-message {
  width: calc(100% - 22px);
  max-width: none;
  margin: 0 22px 10px 0;
  border-left: 1px solid var(--line);
}

#chat-message-list > .chat-message.mine {
  margin-right: 0;
  margin-left: 22px;
  border-right: 3px solid var(--accent);
  border-left-width: 1px;
  text-align: left;
}

#chat-message-list > .tone-theme,
.section-comment.tone-theme {
  border-color: color-mix(in srgb,var(--accent) 35%,var(--line));
  background: color-mix(in srgb,var(--accent) 13%,#fff);
}

#chat-message-list > .tone-white,
.section-comment.tone-white {
  border-color: var(--line);
  background: #fff;
}

.chat-update {
  width: 100%;
  margin: 3px 0 12px;
}

.chat-update summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: var(--muted);
  cursor: pointer;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.chat-update summary::before,
.chat-update summary::after {
  content: '';
  height: 1px;
  flex: 1;
  background: var(--line);
}

.chat-update summary b {
  color: var(--ink);
  text-transform: none;
  letter-spacing: 0;
}

.chat-update-body {
  margin: 8px 10px 0;
  padding: 10px;
  border: 1px dashed color-mix(in srgb,var(--accent) 45%,var(--line));
  border-radius: 10px;
  background: color-mix(in srgb,var(--accent) 6%,#fff);
}

.chat-update-body p {
  margin: 8px 0;
  font-weight: 700;
}

.chat-update-body dl,
.chat-update-body dl > div {
  margin: 0;
}

.chat-update-body dl > div {
  display: grid;
  grid-template-columns: 90px minmax(0,1fr);
  gap: 7px;
  padding: 4px 0;
  border-top: 1px solid var(--line);
}

.chat-update-body dt {
  color: var(--muted);
  font-size: 10px;
}

.chat-update-body dd {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: 11px;
}

.section-comment {
  width: calc(100% - 18px);
  margin: 0 18px 7px 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.section-comment.mine {
  margin-right: 0;
  margin-left: 18px;
}

.section-comment p {
  margin: 5px 0;
  white-space: pre-wrap;
}

.section-comment small {
  color: var(--muted);
  font-size: 9px;
}

.confirm-modal {
  width: min(430px,100%);
}

.confirm-modal > p:not(.eyebrow) {
  color: var(--muted);
  line-height: 1.55;
}

.confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

@media (max-width: 820px) {
  .card-details-row {
    grid-template-columns: 1fr 1fr;
  }

  .color-control {
    grid-column: auto;
  }

  .card-editor-sticky {
    top: -24px;
  }

  .chat-close {
    position: sticky;
    top: 0;
  }
}

@media (max-width: 460px) {
  .card-details-row {
    grid-template-columns: 1fr;
  }

  .card-editor-sticky .card-chat-reopen {
    width: 38px;
    overflow: hidden;
    padding-inline: 8px;
    color: transparent;
  }

  .card-editor-sticky .card-chat-reopen::first-letter {
    color: initial;
  }

  .confirm-actions {
    flex-direction: column;
  }
}

/* Checklist controls based on the approved visual reference */
.check-island {
  padding: 12px 12px 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, #f2d8d2);
  border-left: 7px solid var(--accent);
  border-radius: 13px;
  /* background: color-mix(in srgb, var(--accent) 8%, #fff9f7); */
}

.check-island > header {
  min-height: 42px;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  margin-bottom: 7px;
}

.section-drag,
.item-drag {
  display: grid;
  place-items: center;
  color: #7d8791;
  cursor: grab;
  font-family: "Segoe UI Symbol", sans-serif;
  font-size: 25px;
  line-height: 1;
  user-select: none;
}

.section-drag:active,
.item-drag:active {
  cursor: grabbing;
}

.check-island > header textarea {
  font-size: 18px;
  font-weight: 800;
}

.section-tools {
  gap: 14px;
  padding: 0 5px;
}

.section-tools .section-tool > summary,
.section-trash {
  position: relative;
  width: 34px;
  height: 38px;
  min-width: 34px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  list-style: none;
}

.section-tools .section-tool > summary:hover,
.section-trash:hover {
  transform: translateY(-1px);
  filter: brightness(.92);
}

.comment-glyph {
  width: 26px;
  height: 26px;
  display: block;
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.card-qr-button{display:inline-flex;align-items:center;justify-content:center;gap:6px}
.card-qr-button svg{width:18px;height:18px;fill:currentColor}
.card-qr-modal{width:min(470px,94vw);text-align:center}
.card-qr-modal>p{max-width:390px;margin-inline:auto}
.card-qr-code{width:min(290px,72vw);aspect-ratio:1;margin:18px auto;padding:12px;border:1px solid var(--line);border-radius:14px;background:#fff}
.card-qr-code svg{display:block;width:100%;height:100%}
.card-qr-modal>label{text-align:left}
.card-qr-url-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px;margin-top:6px}
.card-qr-url-row input{min-width:0;font-size:11px}
.card-qr-open{display:inline-flex;justify-content:center;margin-top:12px;text-decoration:none}
@media(max-width:520px){.card-qr-button{min-width:42px!important;flex:0 0 42px!important;padding-inline:8px}.card-qr-button span{display:none}.card-qr-url-row{grid-template-columns:1fr}.card-qr-url-row button{width:100%}}

.comment-glyph::after {
  content: none;
}

.comment-badge {
  position: absolute;
  right: -7px;
  bottom: -2px;
  min-width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  padding: 0 4px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #ee1f2d;
  color: #fff;
  font-size: 10px !important;
  font-weight: 800;
  line-height: 1;
}

.win-check {
  position: relative;
  width: 32px;
  height: 32px;
  display: block;
  overflow: hidden;
  color: transparent;
  font-size: 0;
}

.win-check::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 1px;
  width: 8px;
  height: 18px;
  border-right: 6px solid #08aa3c;
  border-bottom: 6px solid #08aa3c;
  border-radius: 2px;
  transform: rotate(43deg);
}

.section-trash {
  color: #ff5964;
}

.section-trash svg,
.task-trash svg {
  width: 27px;
  height: 27px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.check-items {
  position: relative;
}

.check-item {
  min-height: 47px;
  display: grid;
  grid-template-columns: 32px 32px minmax(0, 1fr) 48px;
  align-items: stretch;
  gap: 7px;
  margin: 5px 0;
  padding: 5px 5px 5px 7px;
  border: 1px solid #dce3e8;
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 3px 10px rgba(254, 255, 255, 0.973);
}

.check-item.dragging-item {
  opacity: .42;
  border: 1px dashed var(--accent);
  box-shadow: none;
}

.item-drag {
  align-self: center;
  font-size: 23px;
}

.check-item > input[type=checkbox] {
  width: 20px;
  height: 20px;
  align-self: center;
  margin: 0;
  padding: 0;
  accent-color: #0a8834;
  cursor: pointer;
}

.check-item textarea {
  min-height: 35px;
  align-self: center;
  padding: 6px 7px;
  border-color: transparent;
  background: transparent;
  font-size: 14px;
}

.check-item textarea:focus {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
  background: #fff;
}

.check-item.done .item-drag {
  color: #7d8791;
  text-decoration: none;
}

.check-item.done textarea {
  color: var(--muted);
  text-decoration: line-through;
}

.task-trash {
  width: 48px;
  min-width: 48px;
  height: calc(100% + 10px);
  min-height: 46px;
  align-self: center;
  margin: -5px -5px -5px 0 !important;
  box-sizing: border-box;
  border: 0;
  border-radius: 9px;
  background: #ffe9e9;
  color: #ff5964;
}

.task-trash:hover {
  background: #ffdada;
}

.check-item.level-2 { margin-left: 12px; }
.check-item.level-3 { margin-left: 24px; }
.check-item.level-4 { margin-left: 36px; }
.check-item.level-5 { margin-left: 48px; }

.level-drop-guide {
  position: sticky;
  z-index: 9;
  bottom: 5px;
  width: max-content;
  margin: 5px auto;
  padding: 6px 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) calc(8% + var(--drop-level, 1) * 3%), #fff);
  color: var(--ink);
  box-shadow: 0 6px 18px rgba(20,30,40,.12);
  font-size: 11px;
  pointer-events: none;
}

.inactive-tasks > summary,
.inactive-sections > summary {
  padding: 6px 3px;
  color: #68737e;
  font-size: 13px;
}

@media (max-width: 680px) {
  .section-tools {
    gap: 8px;
  }

  .check-island > header {
    grid-template-columns: 28px minmax(0, 1fr) auto;
  }

  .check-item {
    grid-template-columns: 25px 28px minmax(0, 1fr) 43px;
    gap: 4px;
  }

  .task-trash {
    width: 43px;
    min-width: 43px;
  }

  .check-item.level-2 { margin-left: 6px; }
  .check-item.level-3 { margin-left: 12px; }
  .check-item.level-4 { margin-left: 18px; }
  .check-item.level-5 { margin-left: 24px; }
}

/* Inline checklist conversations and task planning */
.section-tools {
  padding-right: 0;
}

.section-tool-trigger {
  position: relative;
  width: 38px;
  height: 42px;
  min-width: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  color: var(--ink);
  cursor: pointer;
}

.section-tool-trigger:hover,
.section-tool-trigger.active {
  background: color-mix(in srgb, var(--accent) 11%, transparent);
}

.add-task-trigger {
  width: 46px;
  min-width: 46px;
  gap: 0;
}

.combo-plus {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: var(--accent);
}

.combo-plus svg {
  width: 27px;
  height: 27px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
}

.combo-chevron {
  width: 13px;
  height: 24px;
  display: grid;
  place-items: center;
  color: var(--muted);
}

.combo-chevron svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.section-trash {
  width: 48px;
  min-width: 48px;
  height: 42px;
  align-self: center;
  transform: translateX(-6px);
}

.section-trash:hover {
  transform: translate(-6px, -1px);
}

.section-inline-tools {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.section-inline-panel {
  width: 100%;
  padding: 11px;
  border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--line));
  border-radius: 11px;
  background: color-mix(in srgb, var(--accent) 5%, #fff);
  box-shadow: none;
}

.section-inline-panel.section-comments {
  margin-top: 0;
}

.section-inline-panel.section-add {
  display: flex;
}

.check-item {
  grid-template-columns: 32px 32px minmax(0, 1fr) auto 48px;
}

.check-item > .item-drag,
.check-item > input[type=checkbox],
.check-item > .task-copy,
.check-item > .task-hover-actions,
.check-item > .task-trash {
  grid-row: 1;
}

.check-item > input[type=checkbox] {
  appearance: auto;
  accent-color: var(--accent);
}

.task-copy {
  min-width: 0;
  align-self: center;
}

.task-copy textarea {
  width: 100%;
}

.task-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 7px 4px;
  color: var(--muted);
  font-size: 10px;
}

.task-meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.task-meta svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.task-hover-actions {
  display: flex;
  align-self: center;
  align-items: center;
  gap: 1px;
  opacity: 0;
  transform: translateX(4px);
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
}

.check-item:hover .task-hover-actions,
.check-item:focus-within .task-hover-actions {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.task-hover-actions button {
  width: 29px;
  height: 29px;
  min-width: 29px;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #69737e;
}

.task-hover-actions button:hover {
  background: color-mix(in srgb, var(--accent) 12%, #eef1f3);
  color: var(--ink);
}

.task-hover-actions svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.task-inline-panel {
  grid-column: 1 / -1;
  grid-row: 2;
  display: grid;
  grid-template-columns: minmax(230px, .8fr) minmax(250px, 1.2fr) auto;
  align-items: end;
  gap: 12px;
  margin: 4px 0 2px;
  padding: 11px;
  border-top: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  border-radius: 9px;
  background: color-mix(in srgb, var(--accent) 5%, #fff);
}

.task-due-fields {
  display: grid;
  grid-template-columns: minmax(145px, 1fr) minmax(105px, .65fr);
  gap: 7px;
}

.task-inline-panel label,
.task-inline-panel legend {
  font-size: 11px;
  font-weight: 700;
}

.task-inline-panel input[type=date],
.task-inline-panel input[type=time] {
  width: 100%;
}

.task-assignees {
  min-width: 0;
  display: flex;
  gap: 7px 12px;
  flex-wrap: wrap;
  margin: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.task-assignees label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.task-assignees input[type=checkbox] {
  accent-color: var(--accent);
}

@media (max-width: 900px) {
  .check-item {
    grid-template-columns: 28px 30px minmax(0, 1fr) 43px;
  }

  .task-hover-actions {
    grid-column: 3 / 5;
    grid-row: 2;
    justify-self: end;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  .task-trash {
    grid-column: 4;
  }

  .task-inline-panel {
    grid-row: 3;
    grid-template-columns: 1fr;
  }

  .section-trash {
    width: 43px;
    min-width: 43px;
  }
}

/* Full-width card chat and reliable media mosaics */
.chat-head {
  justify-content: flex-start;
}

.chat-head h3 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.chat-head .live-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  box-shadow: 0 0 0 4px rgba(54, 179, 126, .12);
}

#card-modal .card-chat > .chat-head {
  width:100%;
  justify-content:space-between;
  align-items:center;
  box-sizing:border-box;
}

#card-modal .card-chat > .chat-head > div {
  min-width:0;
}
#card-modal .card-chat > .chat-head .chat-close {
  position:static;
  align-self:center;
  margin:0 0 0 auto;
}

#chat-messages {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.chat-message,
.chat-message.mine {
  width: 100%;
  max-width: none;
  margin-right: 0;
  margin-left: 0;
  box-sizing: border-box;
}

.chat-message.mine {
  border-left: 3px solid var(--accent);
}

.chat-file,
.chat-file > button,
.chat-file > a {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.chat-file > button {
  display: block;
  overflow: hidden;
  margin-top: 7px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: var(--soft);
}

.chat-file img,
.chat-file video {
  display: block;
  width: 100%;
  height: auto;
  min-height: 130px;
  object-fit: cover;
}

.chat-file audio {
  width: 100%;
  min-width: 0;
  margin-top: 7px;
}

.chat-voice-note { width:100%;min-width:0;display:grid;grid-template-columns:minmax(0,1fr);gap:6px;margin-top:7px;padding:7px;border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line));border-radius:10px;background:color-mix(in srgb,var(--accent) 8%,var(--paper));box-sizing:border-box;overflow:hidden; }
.chat-voice-title { min-width:0;display:flex;align-items:center;gap:6px; }
.chat-voice-title > span { display:grid;place-items:center;width:22px;height:22px;flex:0 0 22px;border-radius:50%;background:var(--accent);color:#fff;font-size:11px; }
.chat-voice-note b { min-width:0;color:var(--ink);font-size:10px;line-height:1.2; }
.chat-file .chat-voice-note audio { display:block!important;width:100%!important;max-width:100%!important;min-width:0!important;height:36px!important;min-height:36px!important;margin:0!important;opacity:1!important;visibility:visible!important;color-scheme:light dark; }

.chat-compose {
  padding: 14px;
}

.chat-compose textarea {
  width: 100%;
  min-height: 76px;
  box-sizing: border-box;
  resize: vertical;
}

.chat-compose > .chat-compose-actions {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: nowrap;
  width: 100%;
  margin-top: 7px;
}

.chat-compose-actions > label,
.chat-compose-actions > button {
  min-width: 0;
  min-height: 37px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 8px;
  white-space: nowrap;
  font-size: 11px;
}

.chat-compose-actions > label,
.chat-compose-actions > #record-voice {
  flex: 1 1 auto;
}

.chat-compose-actions > #send-chat {
  flex: 0 0 auto;
}

.file-mosaic {
  display: block;
  flex: 0 0 auto;
  grid-template-columns: none;
  columns: 4 135px;
  column-gap: 8px;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.file-mosaic .file-tile {
  width: 100%;
  display: inline-grid;
  margin: 0 0 8px;
  vertical-align: top;
  break-inside: avoid;
  box-sizing: border-box;
}

.file-mosaic .file-preview {
  width: 100%;
  min-height: 110px;
  display: grid;
  place-items: center;
}

.file-mosaic .file-preview img {
  width: 100%;
  height: auto;
  min-height: 110px;
  max-height: none;
  object-fit: cover;
}

.file-mosaic .file-preview video {
  width: 100%;
  height: auto;
  min-height: 110px;
  max-height: none;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.file-mosaic .file-symbol {
  width: 100%;
  min-height: 110px;
}

.file-list {
  flex: 0 0 auto;
  columns: auto;
}

@media (max-width: 520px) {
  .chat-compose-actions > label,
  .chat-compose-actions > button {
    padding-inline: 6px;
    font-size: 10px;
  }

  .file-mosaic {
    columns: 2 125px;
  }
}

/* Persistent card header, compact details and task popovers */
#card-form > .close {
  display: none;
}

.card-editor-sticky {
  position: sticky;
  z-index: 18;
  top: -16px;
  margin: -16px -18px 0;
  padding: 16px 18px 8px;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.96);
  box-shadow: 0 7px 16px rgba(20,30,40,.05);
  backdrop-filter: blur(10px);
}

.card-editor-sticky .title-input {
  width: 100%;
}

.card-lock-alerts {
  display: grid;
  gap: 6px;
}

.edit-conflict-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid #efbb67;
  border-radius: 9px;
  background: #fff7e7;
  color: #6f4a0a;
  font-size: 11px;
}

.edit-conflict-banner button {
  flex: 0 0 auto;
  padding: 6px 8px;
}

.compact-field {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.compact-field select {
  min-width: 0;
  flex: 1 1 auto;
}

/* Keep every control in the card details row aligned at one height. */
#card-modal .card-details-row > .compact-field,
#card-modal .card-details-row > .compact-popover > summary {
  box-sizing: border-box;
  height: 42px;
  min-height: 42px;
}

#template-edit-modal { z-index:95; }
.template-edit-modal { width:min(660px,94vw);display:grid;gap:13px; }
.template-edit-modal textarea[name="name"],.template-edit-modal textarea[name="title"] { height:42px;min-height:42px;max-height:42px;resize:none;overflow:hidden; }
.template-edit-details { display:grid;grid-template-columns:1fr 1fr 110px;gap:10px; }
.template-edit-actions { display:flex;justify-content:flex-end;gap:8px;margin-top:4px; }

@media (max-width:650px) {
  .template-edit-details { grid-template-columns:1fr; }
  .template-edit-actions { flex-direction:column-reverse; }
  .template-edit-actions button { width:100%; }
}

#card-modal .card-details-row > .column-control {
  padding: 0;
  overflow: hidden;
}

#card-modal .card-details-row > .column-control > span {
  display: none;
}

#card-modal .card-details-row > .column-control > select {
  width: 100%;
  height: 100%;
  padding: 0 10px;
  border: 0;
  border-radius: inherit;
  background: transparent;
}

.check-item {
  position: relative;
}

.task-planning-popover {
  position: absolute;
  z-index: 24;
  top: calc(100% + 5px);
  right: 48px;
  width: min(390px, calc(100vw - 55px));
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--line));
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 14px 35px rgba(20,30,40,.2);
}

.task-planning-popover > strong {
  display: block;
  margin-bottom: 9px;
}

.check-item .task-planning-popover > button.primary {
  display: block;
  margin: 10px 0 0 auto;
  min-height: 36px;
  padding: 8px 14px;
  border: 1px solid var(--ink);
  border-radius: 8px;
  background: var(--ink);
  color: #fff;
  font-weight: 800;
  opacity: 1;
}

.check-item .task-planning-popover > button.primary:hover,
.check-item .task-planning-popover > button.primary:focus-visible {
  background: color-mix(in srgb, var(--ink) 88%, var(--accent));
  color: #fff;
}

.task-people-popover .task-assignees {
  max-height: 210px;
  overflow-y: auto;
  display: grid;
  grid-template-columns: 1fr;
}

.task-people-popover .task-assignees label {
  min-height: 34px;
  padding: 5px 7px;
  border-radius: 7px;
}

.task-people-popover .task-assignees label:hover {
  background: color-mix(in srgb, var(--accent) 9%, #fff);
}

.check-item > input[type=checkbox] {
  appearance: none;
  border: 1.5px solid #8a949e;
  border-radius: 3px;
  background: #fff center / 72% no-repeat;
}

.check-item > input[type=checkbox]:checked {
  border-color: var(--accent);
  background-color: var(--accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3 8 3 3 7-7' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.section-comments > div:first-child > p:nth-child(odd),
#chat-message-list > .chat-message:nth-child(odd) {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
  background: color-mix(in srgb, var(--accent) 13%, #fff);
}

.section-comments > div:first-child > p:nth-child(even),
#chat-message-list > .chat-message:nth-child(even) {
  border-color: var(--line);
  background: #fff;
}

.chat-history-actions {
  position: sticky;
  z-index: 3;
  top: 0;
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 0 0 9px;
  background: linear-gradient(color-mix(in srgb, var(--accent) 6%, #f7f9fa) 70%, transparent);
}

.chat-history-actions button {
  padding: 6px 8px;
  font-size: 10px;
}

@media (max-width: 680px) {
  .task-planning-popover {
    position: fixed;
    z-index: 60;
    top: auto;
    right: 12px;
    bottom: 12px;
    left: 12px;
    width: auto;
    max-height: 70dvh;
    overflow-y: auto;
  }

  .task-due-fields {
    grid-template-columns: 1fr;
  }
}

/* Final timeline specificity: preserve nodes while only the speaker transition changes tone. */
#chat-message-list > .chat-message {
  width: calc(100% - 22px);
  max-width: none;
  margin: 0 22px 10px 0;
  box-sizing: border-box;
}

#chat-message-list > .chat-message.mine {
  margin-right: 0;
  margin-left: 22px;
  border-right: 3px solid var(--accent);
  border-left-width: 1px;
}

#chat-message-list > .chat-message.tone-theme,
.section-comments .section-comment.tone-theme {
  border-color: color-mix(in srgb,var(--accent) 35%,var(--line));
  background: color-mix(in srgb,var(--accent) 13%,#fff);
}

#chat-message-list > .chat-message.tone-white,
.section-comments .section-comment.tone-white {
  border-color: var(--line);
  background: #fff;
}

/* Chat composer, previews and layered dialogs */
.chat-compose { width:100%; min-width:0; box-sizing:border-box; display:grid; gap:7px; }
.chat-compose > .rich-editor-wrap,.rich-editor-wrap { width:100%; min-width:0; max-width:100%; display:grid; gap:6px; box-sizing:border-box; }
.rich-editor { width:100%; min-width:0; max-width:100%; min-height:72px; max-height:190px; overflow:auto; padding:10px; border:1px solid var(--line); border-radius:9px; background:#fff; outline:none; white-space:pre-wrap; overflow-wrap:anywhere; box-sizing:border-box; }
.rich-editor:empty::before { content:attr(data-placeholder); color:var(--muted); pointer-events:none; }
.rich-editor:focus { border-color:var(--accent); box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 15%,transparent); }
.rich-toolbar { display:flex!important; max-width:100%; gap:4px!important; margin:0!important; padding:5px; overflow-x:auto; flex-wrap:nowrap!important; border:1px solid var(--line); border-radius:8px; background:#f7f9fa; scrollbar-width:thin; }
.rich-toolbar.hidden { display:none!important; }
.rich-toolbar button { flex:0 0 auto; min-width:32px; min-height:30px; padding:5px 8px; border:0; border-radius:6px; background:#fff; color:var(--ink); cursor:pointer; }
.rich-message { margin:5px 0; overflow-wrap:anywhere; }
.rich-message p,.rich-message ul,.rich-message ol,.rich-message blockquote,.rich-message pre { margin:5px 0; }
.rich-message blockquote { padding-left:9px; border-left:3px solid var(--accent); color:var(--muted); }
.rich-message a { color:var(--accent); }
.chat-pending { width:100%; min-width:0; max-width:100%; display:grid!important; grid-template-columns:minmax(0,1fr); gap:7px!important; margin:0!important; padding:7px; border:1px dashed var(--accent); border-radius:9px; background:color-mix(in srgb,var(--accent) 6%,#fff); box-sizing:border-box; overflow:hidden; }
.chat-pending.hidden { display:none!important; }
.chat-pending-item { min-width:0; max-width:100%; display:grid; grid-template-columns:64px minmax(0,1fr) 30px; align-items:center; gap:8px; padding:5px; border-radius:7px; background:#fff; box-sizing:border-box; overflow:hidden; }
.chat-pending-item.voice-preview { grid-template-columns:minmax(0,1fr) 30px; }
.chat-pending img,.chat-pending video { width:64px; max-width:100%; height:48px; object-fit:cover; border-radius:6px; }
.chat-pending audio { width:100%; min-width:0; max-width:100%; }
.chat-pending small { display:block; color:var(--muted); }
.chat-pending-item > div { min-width:0; overflow:hidden; }
.chat-pending-item b,.chat-pending-item small { display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-pending-item > button { width:28px; height:28px; padding:0; border:0; background:transparent; font-size:20px; cursor:pointer; }
.pending-document { display:grid; place-items:center; width:64px; height:48px; font-size:28px; }
.section-chat-compose { display:grid; gap:7px; margin-top:9px; }
.section-chat-compose .rich-editor { min-height:56px; }
.section-chat-compose .chat-compose-actions { display:flex; gap:6px; overflow-x:auto; padding-bottom:3px; }
.section-chat-compose .chat-compose-actions { justify-content:flex-end; }
.section-chat-compose .chat-compose-actions > * { flex:0 0 auto; }
.group-user-filters { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:6px; margin-top:12px; }
#group-member-list { max-height:320px; overflow-y:auto; display:grid; gap:5px; }
.chat-view-actions { width:100%; min-width:0; display:flex!important; justify-content:flex-end; align-items:center; gap:6px!important; margin:0!important; overflow-x:auto; }
.chat-view-actions button { flex:0 0 auto; }
#card-modal .collab-card { grid-template-columns:minmax(0,1fr) 340px; }
#card-modal.chat-expanded .collab-card {
  width:min(97vw,calc(840px + clamp(340px,30vw,580px)));
  height:min(900px,calc(100dvh - 32px));
  grid-template-columns:minmax(0,840px) clamp(340px,30vw,580px);
}
#card-modal.chat-fullscreen { padding:2.5vh 2.5vw; }
#card-modal.chat-fullscreen .collab-card { width:95vw; height:95dvh; grid-template-columns:1fr; }
#card-modal.chat-fullscreen .card-main { display:none; }
#card-modal.chat-fullscreen .card-chat { border-left:0; }
.card-chat { position:relative; min-width:0; max-width:100%; }
.card-chat { grid-template-rows:auto auto minmax(0,1fr) auto; }
.card-chat.drag-active::after { content:'Suelta los archivos para adjuntarlos'; position:absolute; z-index:20; inset:10px; display:grid; place-items:center; border:2px dashed var(--accent); border-radius:12px; background:color-mix(in srgb,var(--accent) 14%,rgba(255,255,255,.94)); color:var(--ink); font-weight:800; pointer-events:none; }
#chat-message-list,.chat-message,.chat-file,.rich-message { min-width:0; max-width:100%; box-sizing:border-box; overflow-wrap:anywhere; }
.chat-file img,.chat-file video,.chat-file audio,.rich-message img { max-width:100%; height:auto; object-fit:contain; }
.chat-file > button,.file-preview:has(img),.media-preview:has(img) { background:transparent!important; }
.chat-file img,.chat-file video { min-height:0; background:transparent; object-fit:contain; }
.card-main > .card-save-footer { margin-top:auto; flex:0 0 auto; position:sticky; z-index:5; bottom:0; background:#fff; }
.chat-compose { padding:8px 10px 9px; gap:4px; }
.chat-view-actions { min-height:26px; }
.chat-view-actions button { min-height:28px!important; padding:5px 7px!important; font-size:9px!important; }
.chat-compose-actions > button,.chat-compose-actions > label { min-height:37px!important; padding:7px 8px!important; font-size:11px!important; }
.rich-editor { min-height:60px; padding:8px; font-size:11px; }
.rich-toolbar { padding:3px; }
.rich-toolbar button { min-height:26px; padding:3px 6px; font-size:9px; }
.chat-pending-item { font-size:10px; }
.chat-pending-item small { font-size:8px; }
.section-comment-list { max-height:300px; overflow-y:auto; scrollbar-width:thin; }
.section-comments { position:relative; }
.chat-scroll-latest { position:sticky; z-index:8; bottom:8px; left:calc(100% - 42px); width:34px; height:34px; display:grid; place-items:center; padding:0; border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line)); border-radius:50%; background:#fff; color:var(--accent); box-shadow:0 5px 15px rgba(20,30,40,.18); cursor:pointer; }
.chat-scroll-latest.hidden { display:none; }
#chat-messages { position:relative; }
#chat-scroll-latest {
  position:sticky;
  left:auto;
  right:8px;
  flex:0 0 34px;
  align-self:flex-end;
  width:34px;
  min-width:34px;
  max-width:34px;
  height:34px;
  min-height:34px;
  max-height:34px;
  margin-left:auto;
  margin-right:2px;
  line-height:1;
  box-sizing:border-box;
}

/* Card chat layout: keep the timeline flexible and the composer compact. */
#card-modal .card-chat {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

#card-modal .card-chat > .chat-head,
#card-modal .card-chat > .chat-history-actions,
#card-modal .card-chat > .chat-compose {
  flex: 0 0 auto;
}

#card-modal .card-chat > #chat-messages {
  flex: 1 1 auto;
  height: auto;
  min-height: 120px;
  max-height: none;
}

#card-modal .card-chat > .chat-compose {
  display: flex;
  flex-direction: column;
  align-content: initial;
  justify-content: flex-start;
  gap: 6px;
  width: 100%;
  min-height: 0;
  padding: 8px 10px 9px;
  box-sizing: border-box;
}

#card-modal .card-chat .chat-compose > div {
  flex: 0 0 auto;
  margin-top: 0;
}

#card-modal .card-chat .rich-editor-wrap {
  display: grid;
  gap: 6px;
}

#card-modal .card-chat .rich-editor {
  height: auto;
  min-height: 60px;
  max-height: 130px;
}

#card-modal .card-chat .chat-view-actions,
#card-modal .card-chat .chat-compose-actions {
  width: 100%;
  min-height: 0;
}

#card-modal .card-chat .chat-compose-actions {
  overflow-x: auto;
  overflow-y: hidden;
}

#card-modal .card-chat .chat-pending.hidden,
#card-modal .card-chat .rich-toolbar.hidden {
  display: none !important;
}

.chat-history-actions { position:static; top:auto; width:100%; margin:0; padding:6px 10px; border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--accent) 4%,#fff); box-sizing:border-box; }
.chat-history-actions button { box-shadow:none; }
.voice-recording-live { width:100%; min-width:0; display:grid; grid-template-columns:auto minmax(70px,1fr) auto auto; align-items:center; gap:7px; padding:7px; border-radius:8px; background:#fff; box-sizing:border-box; }
.recording-dot { width:9px; height:9px; border-radius:50%; background:#d1242f; animation:voice-pulse 1s infinite; }
.recording-bars { height:22px; display:flex; align-items:center; gap:3px; overflow:hidden; }
.recording-bars i { width:3px; height:35%; border-radius:3px; background:var(--accent); animation:recording-wave .8s ease-in-out infinite alternate; }
.recording-bars i:nth-child(2),.recording-bars i:nth-child(4){animation-delay:.2s}.recording-bars i:nth-child(3){animation-delay:.4s}
.voice-recording-live small { color:var(--muted); font-size:8px; }
@keyframes recording-wave { to { height:95%; } }
#admin-password-modal { z-index:90; }
#password-modal,#media-modal,#unsaved-modal { z-index:80; }
#admin-list-modal,#project-settings-modal { z-index:50; }
.date-range-filter { position:relative; z-index:20; }
.date-range-filter[open] { z-index:70; }
.date-range-panel { z-index:75; }
.cards-toolbar { position:relative; z-index:80; overflow:visible; }
.cards-toolbar:has(.date-range-filter[open],.project-members[open]) { z-index:120; }
.project-members[open] { z-index:125; }
.project-members-panel { z-index:130; }

/* Persistent light/dark appearance. */
html { color-scheme: light; }
html[data-theme="dark"] {
  color-scheme: dark;
  --paper:#1c1d1a;
  --soft:#272923;
  --line:#3b3d37;
  --muted:#b8ad98;
  --shadow:0 18px 55px rgba(0,0,0,.42);
}
body,.sidebar,.page>header,main,.project-workspace,.workspace-background,.workspace-content,
.toolbar,.column,.card,.panel,.modal,.auth-card,.file,.secondary,.upload-button,.icon,
input,textarea,select,.search,.date-range-panel,.compact-popover-panel,.project-members-panel,
.list-table,.list-row,.calendar,.day,.record-edit,.setting-chip,.rich-editor,.rich-toolbar,
.card-chat,.chat-compose,.section-inline-panel,.check-island,.check-item,.media-modal {
  transition:background-color .32s ease,color .32s ease,border-color .32s ease,box-shadow .32s ease,filter .32s ease;
}
.theme-toggle { position:relative; width:38px; height:38px; margin-left:auto; display:grid; place-items:center; border:1px solid transparent; border-radius:50%; padding:0; background:transparent; color:var(--ink); }
.theme-toggle:hover { background:var(--soft); border-color:var(--line); transform:rotate(8deg); }
.notification-center { position:relative;flex:0 0 auto; }
.notification-bell { position:relative;width:38px;height:38px;display:grid;place-items:center;padding:0;border:1px solid transparent;border-radius:50%;background:transparent;color:var(--ink);cursor:pointer; }
.notification-bell:hover,.notification-bell[aria-expanded="true"] { border-color:var(--line);background:var(--soft); }
.notification-bell svg { width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round; }
.notification-unread-dot { position:absolute;top:5px;right:5px;width:9px;height:9px;border:2px solid var(--paper);border-radius:50%;background:#35bf78;box-sizing:content-box; }
.notification-panel { position:absolute;z-index:120;top:calc(100% + 10px);right:0;width:min(390px,calc(100vw - 24px));max-height:min(560px,calc(100vh - 85px));overflow:hidden;border:1px solid var(--line);border-radius:16px;background:var(--paper);box-shadow:0 18px 50px rgba(17,25,32,.2);color:var(--ink); }
.notification-panel > header { display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px;border-bottom:1px solid var(--line); }
.notification-panel > header small { color:var(--accent);font-size:.67rem;font-weight:800;letter-spacing:.09em; }
.notification-panel-actions { display:flex;align-items:center;gap:7px; }
.notification-refresh { width:32px;height:32px;min-height:32px;padding:0; }
.notification-refresh.loading { animation:notification-spin .75s linear infinite; }
@keyframes notification-spin { to { transform:rotate(360deg); } }
.notification-panel h2 { margin:3px 0 0;font-size:1.05rem; }
.notification-panel .secondary { padding:7px 10px;font-size:.74rem; }
.notification-list { display:grid;max-height:465px;overflow:auto; }
.notification-list > .empty { padding:34px 18px;text-align:center;color:var(--muted); }
.notification-item { width:100%;display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:10px;padding:13px 15px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:var(--paper);color:inherit;font:inherit;text-align:left;cursor:pointer; }
.notification-item:hover { background:var(--soft); }
.notification-item.unread { background:color-mix(in srgb,var(--accent) 8%,var(--paper)); }
.notification-type-icon { width:32px;height:32px;display:grid;place-items:center;border-radius:9px;background:color-mix(in srgb,var(--accent) 14%,var(--paper));color:var(--accent);font-size:.72rem; }
.notification-item header { display:flex;align-items:center;justify-content:space-between;gap:8px; }
.notification-item header em { color:#23945b;font-size:.67rem;font-style:normal;white-space:nowrap; }
.notification-item p { margin:4px 0;color:var(--ink);font-size:.84rem;line-height:1.4; }
.notification-item small { color:var(--muted);font-size:.7rem; }
.notification-go { color:var(--accent);font-size:1.5rem;font-weight:700; }
.theme-toggle-icon { position:relative; width:17px; height:17px; border:2px solid currentColor; border-radius:50%; transition:transform .36s ease,background .36s ease,border-color .36s ease; }
.theme-toggle-icon::before { content:""; position:absolute; inset:-7px; background:repeating-conic-gradient(from 0deg,currentColor 0 5deg,transparent 5deg 40deg); border-radius:50%; mask:radial-gradient(circle,transparent 0 63%,#000 65%); transition:opacity .25s ease,transform .36s ease; }
html[data-theme="dark"] .theme-toggle-icon { transform:rotate(-25deg); background:currentColor; border-color:currentColor; box-shadow:-5px -3px 0 0 #1c1d1a; }
html[data-theme="dark"] .theme-toggle-icon::before { opacity:0; transform:scale(.5); }
html[data-theme="dark"] .notification-panel,html[data-theme="dark"] .notification-item { background:#20211e;color:#f5ead5;border-color:#44463f; }
html[data-theme="dark"] .notification-item:hover { background:#2a2b27; }
html[data-theme="dark"] .notification-item.unread { background:color-mix(in srgb,var(--accent) 15%,#20211e); }
html[data-theme="dark"] .notification-item p { color:#f5ead5; }
.page>header .theme-toggle + .user,.page>header .notification-center + .user { margin-left:0; }

html[data-theme="dark"] body,
html[data-theme="dark"] .app,
html[data-theme="dark"] main { background:#171816; color:#f5ead5; }
html[data-theme="dark"] .auth-screen {
  background-color:#171816;
  background-image:linear-gradient(rgba(9,10,9,.68),rgba(9,10,9,.68)),var(--login-company-image,none);
}
html[data-theme="dark"] .fb-auth-view .auth-card {
  background:#20211e;
  border-color:#44463f;
  color:#f5ead5;
  box-shadow:0 24px 70px rgba(0,0,0,.56);
}
html[data-theme="dark"] .fb-auth-view .auth-card h1,
html[data-theme="dark"] .fb-auth-view .auth-card label,
html[data-theme="dark"] .fb-auth-view .login-flowboard-brand,
html[data-theme="dark"] .fb-auth-view .login-flowboard-brand>span,
html[data-theme="dark"] .fb-auth-view .login-company-brand>strong { color:#f5ead5; }
html[data-theme="dark"] .fb-auth-view .auth-card p,
html[data-theme="dark"] .fb-auth-view .auth-card .hint { color:#b8ad98; }
html[data-theme="dark"] .fb-auth-view .auth-card input,
html[data-theme="dark"] .fb-auth-view .auth-card textarea {
  background:#171816;
  border-color:#4a4c45;
  color:#f5ead5;
  caret-color:var(--login-company-primary,var(--accent));
}
html[data-theme="dark"] .fb-auth-view .auth-card input::placeholder,
html[data-theme="dark"] .fb-auth-view .auth-card textarea::placeholder { color:#8f897d; }
html[data-theme="dark"] .fb-auth-view .auth-card input:-webkit-autofill,
html[data-theme="dark"] .fb-auth-view .auth-card textarea:-webkit-autofill {
  -webkit-text-fill-color:#f5ead5;
  box-shadow:0 0 0 1000px #171816 inset;
  caret-color:#f5ead5;
}
html[data-theme="dark"] .fb-auth-view .password-input>[data-toggle-password] { color:#b8ad98; }
html[data-theme="dark"] .fb-auth-view .login-theme-toggle {
  background:#20211e;
  border-color:#44463f;
  color:#f5ead5;
  box-shadow:0 8px 28px rgba(0,0,0,.4);
}
html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .page>header { background:#1d1e1b; border-color:#3b3d37; }
html[data-theme="dark"] .workspace-background { filter:brightness(.48) saturate(.82); }
html[data-theme="dark"] .workspace-content { background:rgba(18,20,17,.20); }
html[data-theme="dark"] .toolbar { background:rgba(27,30,25,.90); border-color:#3b4639; }
html[data-theme="dark"] .column { background:rgba(31,32,29,.94); border:1px solid #41423c; }
html[data-theme="dark"] .card:not(.has-card-color),
html[data-theme="dark"] .list-row:not(.has-card-color),
html[data-theme="dark"] .calendar-card:not(.has-card-color) { background:#1c1d1a; border-color:#3e403a; color:#f5ead5; box-shadow:0 2px 0 rgba(0,0,0,.25); }
html[data-theme="dark"] .card:not(.has-card-color):hover { box-shadow:0 12px 28px rgba(0,0,0,.34); border-color:#55574e; }
html[data-theme="dark"] .secondary,
html[data-theme="dark"] .upload-button,
html[data-theme="dark"] .icon,
html[data-theme="dark"] .search,
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] .project-members>summary,
html[data-theme="dark"] .compact-popover>summary { background:#20211e; color:#f5ead5; border-color:#44463f; }
html[data-theme="dark"] .primary { background:#30363a; color:#fff; }
html[data-theme="dark"] .primary:hover { background:#3b4449; }
html[data-theme="dark"] .project-link:hover,
html[data-theme="dark"] .project-link.active,
html[data-theme="dark"] .side-button:hover { background:#2a2b27; }
html[data-theme="dark"] .project-link,
html[data-theme="dark"] .side-button,
html[data-theme="dark"] .brand,
html[data-theme="dark"] .user,
html[data-theme="dark"] .tab.active { color:#f5ead5; }
html[data-theme="dark"] .sidebar-project-add { background:#fff4e6; color:var(--accent); border-color:#eedbc8; }
html[data-theme="dark"] .panel,
html[data-theme="dark"] .modal,
html[data-theme="dark"] .auth-card,
html[data-theme="dark"] .file,
html[data-theme="dark"] .record-edit,
html[data-theme="dark"] .setting-chip,
html[data-theme="dark"] .project-members-panel,
html[data-theme="dark"] .compact-popover-panel,
html[data-theme="dark"] .date-range-panel,
html[data-theme="dark"] .rich-toolbar,
html[data-theme="dark"] .rich-editor,
html[data-theme="dark"] .check-island,
html[data-theme="dark"] .check-item,
html[data-theme="dark"] .section-inline-panel,
html[data-theme="dark"] .card-chat,
html[data-theme="dark"] .chat-compose { background:#20211e; color:#f5ead5; border-color:#44463f; }
html[data-theme="dark"] .backdrop { background:rgba(5,6,5,.72); }
html[data-theme="dark"] .tab span,
html[data-theme="dark"] .column>header>span,
html[data-theme="dark"] .mini.plus { background:#30312d; color:#f5ead5; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background:#5a5b53; }
html[data-theme="dark"] ::selection { background:color-mix(in srgb,var(--accent) 55%,#111); color:#fff; }

@media (max-width:680px){
  #card-modal .collab-card,#card-modal.chat-expanded .collab-card,#card-modal.chat-fullscreen .collab-card { width:96vw; height:96dvh; grid-template-columns:1fr; }
  #card-modal.chat-expanded .card-main { display:none; }
  .chat-compose-actions { overflow-x:auto; flex-wrap:nowrap!important; }
}

.section-inline-panel.section-comments {
  position: relative;
  padding-top: 40px;
}

.inline-panel-close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 21px;
  cursor: pointer;
}

.inline-panel-close:hover {
  background: color-mix(in srgb,var(--accent) 10%,#fff);
  color: var(--ink);
}

/* General project view: due filtering, responsible avatars and independent indicators. */
.board-due-filter,
.board-assignee-filter {
  min-width: 170px;
  display: flex;
  align-items: center;
  padding: 0 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.board-due-filter select,
.board-assignee-filter select {
  width: 100%;
  min-width: 0;
  height: 32px;
  padding: 3px 25px 3px 6px;
  border: 0;
  background-color: transparent;
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
}

.card footer.card-overview-footer {
  display: grid;
  gap: 8px;
  margin-top: 11px;
}

.card-created-meta {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.25;
}

.card-created-detail {
  width: fit-content;
  max-width: 100%;
  margin: 0;
  padding: 5px 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 7%, #fff);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.card-created-detail:empty {
  display: none;
}

.card-indicator-row,
.card-primary-meta {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
}

.card-indicator-row {
  justify-content: space-between;
}

.card-due-chip {
  min-height: 27px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border: 1px solid color-mix(in srgb, var(--due-bg) 78%, #fff);
  border-radius: 8px;
  background: var(--due-bg);
  color: var(--due-text);
  box-shadow: 0 2px 7px color-mix(in srgb, var(--due-bg) 24%, transparent);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.card-due-chip b {
  padding-left: 6px;
  border-left: 1px solid color-mix(in srgb, var(--due-text) 42%, transparent);
  color: inherit;
  font-size: inherit;
}

.card-check-progress {
  display: grid;
  grid-template-columns: auto minmax(50px, 1fr);
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.card-check-progress > span {
  white-space: nowrap;
}

.card-check-progress > i {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 15%, #dfe5e8);
  box-shadow: inset 0 0 0 1px rgba(23,33,43,.06);
}

.card-check-progress > i > b {
  width: 0;
  height: 100%;
  display: block;
  border-radius: inherit;
  background: var(--accent);
  transition: width .18s ease;
}

.card-assignees {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding-left: 5px;
}

.card-assignees > i,
.card-assignees > small {
  width: 25px;
  height: 25px;
  overflow: hidden;
  display: grid;
  place-items: center;
  margin-left: -5px;
  border: 2px solid #fff;
  border-radius: 8px;
  color: #fff;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  box-shadow: 0 2px 5px rgba(23,33,43,.16);
}

.card-assignees img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-assignees > small {
  background: var(--ink);
  font-size: 9px;
}

@media (max-width: 680px) {
  .toolbar-actions,
  .board-due-filter,
  .board-assignee-filter {
    width: 100%;
  }

  .board-due-filter select,
  .board-assignee-filter select {
    flex: 1;
  }

  .card-due-chip {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  .card-due-chip b {
    padding: 0;
    border: 0;
  }

  .column-gap-add button {
    opacity: .82;
  }
}

/* Compact horizontal gutters and content-sized board columns. */
.page > header {
  padding-right: 18px;
  padding-left: 18px;
}

main {
  max-width: none;
  padding-right: 14px;
  padding-left: 14px;
}

.board {
  align-items: flex-start;
}

.column {
  height: auto;
  max-height: 100%;
  align-self: flex-start;
}

.column .card-list {
  flex: 0 1 auto;
  max-height: 100%;
}

@media (max-width: 650px) {
  .page > header {
    padding-right: 10px;
    padding-left: 10px;
  }

  main {
    padding-right: 6px;
    padding-left: 6px;
  }
}

/* Shared project filters, project members, detailed list and calendar deadlines. */
.project-members {
  min-width: 0;
  max-width: 210px;
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  padding: 2px 4px;
  scrollbar-width: thin;
}

.project-members-label {
  flex: 0 0 auto;
  margin-right: 3px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .7px;
}

.project-member-avatar {
  width: 29px;
  height: 29px;
  flex: 0 0 29px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 2px solid #fff;
  border-radius: 9px;
  color: #fff;
  font-size: 14px;
  box-shadow: 0 2px 7px rgba(23,33,43,.16);
}

.project-member-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.list-table {
  min-width: 980px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 7px 22px rgba(23,33,43,.08);
}

.list-table-head,
.list-row {
  display: grid;
  grid-template-columns: minmax(220px,1.6fr) minmax(130px,.8fr) minmax(185px,1fr) minmax(190px,1.1fr) minmax(145px,.85fr);
  align-items: center;
  gap: 10px;
}

.list-table-head {
  position: sticky;
  z-index: 2;
  top: 0;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--soft) 72%, #fff);
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.list-table-head label {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.list-table-head select {
  width: 100%;
  min-width: 0;
  height: 29px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 3px 24px 3px 6px;
  background: #fff;
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
}

.list-row {
  min-height: 66px;
  padding: 10px 12px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  text-align: left;
}

.list-row:last-child {
  border-bottom: 0;
}

.list-row:hover {
  background: color-mix(in srgb, var(--accent) 5%, #fff);
}

.list-row > strong {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.list-row > strong small,
.list-assignees > small {
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.list-assignees {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.list-assignees > small {
  flex: 1;
}

.list-due {
  display: flex;
  justify-content: flex-end;
}

.list-empty-value {
  color: var(--muted);
  font-size: 11px;
}

#calendar-content {
  min-width: 900px;
}

#calendar-content .day button {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 6px;
  padding: 5px 6px;
  background: #fff;
  box-shadow: 0 2px 7px rgba(23,33,43,.08);
}

.calendar-card-title {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#calendar-content .card-due-chip {
  min-height: 23px;
  padding: 4px 6px;
  font-size: 9px;
}

@media (max-width: 900px) {
  .cards-toolbar {
    flex-wrap: wrap;
  }

  .project-members {
    order: 3;
    width: 100%;
    max-width: none;
  }
}

/* Final cascade guards for rich list wrapping and explicit card colors. */
.list-row > strong,
.list-row > strong small,
.list-row > span,
.list-assignees > small {
  min-width: 0;
  overflow: visible;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}

.list-row.has-card-color,
#calendar-content .calendar-card.has-card-color {
  background: var(--card-surface);
  color: var(--card-surface-text);
}

.list-row.has-card-color > strong,
.list-row.has-card-color > strong small,
.list-row.has-card-color > span,
.list-row.has-card-color .list-assignees > small,
#calendar-content .calendar-card.has-card-color .calendar-card-title {
  color: var(--card-surface-text);
}

/* Compact project shell and controls. */
.project-head { padding-block: 4px; gap: 10px; }
.project-identity { gap: 10px; }
.project-icon { width: 68px; height: 68px; flex-basis: 68px; border-radius: 17px; font-size: 33px; }
.project-head h1 { font-size: clamp(24px, 2.6vw, 34px); line-height: 1.02; }
.project-head .eyebrow { margin-bottom: 2px; }
.project-head > div > p:last-child { margin-top: 1px; line-height: 1.12; }
main > nav { margin-top: 5px; }
.side-label-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 8px 8px 4px; }
.side-label-row .side-label { margin: 0; }
.sidebar-project-add { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line)); border-radius: 8px; padding: 0; background: color-mix(in srgb, var(--accent) 10%, #fff); color: var(--accent); font-size: 19px; font-weight: 800; cursor: pointer; }
.project-link { padding-block: 7px; }

/* Project team: three previews and a complete dropdown. */
.project-members { position: relative; max-width: none; overflow: visible; padding: 0; }
.project-members > summary { min-height: 34px; display: flex; align-items: center; gap: 6px; padding: 3px 7px; border: 1px solid var(--line); border-radius: 9px; background: #fff; cursor: pointer; list-style: none; }
.quick-card-add { width:34px; height:34px; flex:0 0 34px; display:grid; place-items:center; border:2px solid #fff; border-radius:10px; padding:0 0 2px; background:var(--accent); color:var(--accent-contrast,#fff); box-shadow:0 2px 7px rgba(23,33,43,.16); font-size:23px; font-weight:500; line-height:1; cursor:pointer; }
.quick-card-add:hover { transform:translateY(-1px); box-shadow:0 7px 16px color-mix(in srgb,var(--accent) 28%,transparent); }
.quick-card-add:focus-visible { outline:3px solid color-mix(in srgb,var(--accent) 30%,transparent); outline-offset:2px; }
.quick-card-add:disabled { cursor:not-allowed; opacity:.5; transform:none; }
.project-members > summary::-webkit-details-marker { display: none; }
.project-members-preview { position: relative; display: flex; padding-right: 6px; }
.project-members-preview .project-member-avatar + .project-member-avatar { margin-left: -7px; }
.project-member-overflow { position: absolute; top: -6px; right: -8px; min-width: 19px; height: 19px; display: grid; place-items: center; padding: 0 4px; border: 2px solid #fff; border-radius: 999px; background: var(--accent); color: var(--accent-contrast, #fff); font-size: 9px; }
html[data-theme="dark"] .project-member-overflow { color:#fff!important; }
.project-members-panel { position: absolute; z-index: 130; top: calc(100% + 6px); left: 0; width: min(390px, calc(100vw - 24px)); max-height: min(480px, 70vh); display: grid; gap: 7px; overflow:hidden; padding: 9px; border: 1px solid var(--line); border-radius: 11px; background: #fff; box-shadow: 0 16px 40px rgba(23,33,43,.18); }
.team-search { display:grid; gap:4px; color:var(--muted); font-size:10px; font-weight:800; }
.team-search input { width:100%; min-height:35px; border:1px solid var(--line); border-radius:8px; padding:6px 9px; }
.project-member-results { display:grid; gap:5px; max-height:330px; overflow-y:auto; overscroll-behavior:contain; }
.project-member-results > button { width:100%; display:grid; grid-template-columns:31px minmax(0,1fr) auto; align-items:center; gap:8px; padding:7px; border:1px solid var(--line); border-radius:8px; background:var(--soft); color:var(--ink); text-align:left; }
.project-member-results > button:not(:disabled):hover { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 8%,var(--soft)); }
.project-member-results > button:disabled { cursor:default; opacity:.72; }
.project-member-results > button > span { min-width:0; display:grid; }
.project-member-results > button b,.project-member-results > button small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.project-member-results > button em { display:flex; align-items:center; gap:5px; color:var(--muted); font-size:10px; font-style:normal; font-weight:800; }
.project-member-results > button em i { width:8px; height:8px; border-radius:50%; background:#949990; }
.project-member-results > button.online em { color:var(--green); }
.project-member-results > button.online em i { background:var(--green); box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 15%,transparent); }
.project-members-panel small { color: var(--muted); font-size: 10px; }
.clear-filters { white-space: nowrap; }
.cards-toolbar select,.list-table-head select { border-color: color-mix(in srgb, var(--ink) 16%, var(--line)); background-color: #fff; box-shadow: 0 2px 6px rgba(23,33,43,.05); }
.cards-toolbar select:hover,.cards-toolbar select:focus,.list-table-head select:hover,.list-table-head select:focus { border-color: var(--accent); outline: 2px solid color-mix(in srgb, var(--accent) 14%, transparent); }
.cards-toolbar select.has-selection { border-color: var(--accent); background: var(--accent); color: var(--accent-contrast, #fff); }
.list-table-head select:has(option:checked:not([value=""])),
.cards-toolbar select option:checked,
.list-table-head select option:checked { border-color: var(--accent); background: var(--accent); color: var(--accent-contrast, #fff); }

/* Sticky title row in list view. */
#list-view { overflow: auto; }
.list-table { overflow: visible; }
.list-table-head { z-index: 12; top: 0; box-shadow: 0 5px 12px rgba(23,33,43,.08); }

/* Global project labels: searchable, multiple and fully colored. */
.card-label-control { min-width: 0; }
.card-label-control > summary { min-height: 38px; }
.card-label-panel { width: min(340px, calc(100vw - 28px)); max-height: min(420px, 60vh); overflow-y: auto; }
#card-label-options { display: grid; gap: 5px; margin: 8px 0 0; padding: 0; border: 0; }
#card-label-options > label { cursor: pointer; }
#card-label-options input { position: absolute; opacity: 0; pointer-events: none; }
#card-label-options label > span { min-height: 38px; display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
#card-label-options label > span i { width: 15px; height: 15px; flex: 0 0 15px; border-radius: 5px; }
#card-label-options input:checked + span { border-color: var(--option-color); background: var(--option-color); color: var(--option-text); box-shadow: none; }
.card-column-control { min-width:0; }
.card-column-control > summary { min-height:38px; }
.card-column-panel { width:min(340px,calc(100vw - 28px));max-height:min(420px,60vh);overflow-y:auto; }
#card-column-options { display:grid;gap:5px;margin:8px 0 0;padding:0;border:0; }
#card-column-options > label { cursor:pointer; }
#card-column-options input { position:absolute;opacity:0;pointer-events:none; }
#card-column-options label > span { min-height:40px;display:grid;grid-template-columns:26px minmax(0,1fr) auto;align-items:center;gap:8px;padding:6px 8px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--ink); }
#card-column-options label > span i { width:24px;height:24px;display:grid;place-items:center;border-radius:7px;background:color-mix(in srgb,var(--accent) 12%,var(--soft));color:var(--accent);font-size:10px;font-style:normal;font-weight:900; }
#card-column-options label > span b { overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
#card-column-options label > span em { color:var(--muted);font-size:9px;font-style:normal;font-weight:800; }
#card-column-options input:checked + span { border-color:var(--accent);background:var(--accent);color:var(--accent-contrast,#fff); }
#card-column-options input:checked + span i { background:color-mix(in srgb,#fff 20%,transparent);color:inherit; }
#card-column-options input:checked + span em { color:inherit;opacity:.82; }
#card-column-options input:disabled + span { cursor:not-allowed;opacity:.58; }
html[data-theme="dark"] #card-column-options label > span { border-color:#45483f;background:#191a18;color:#f5ead5; }
html[data-theme="dark"] #card-column-options input:checked + span { border-color:var(--accent);background:var(--accent);color:var(--accent-contrast,#fff); }
.card-labels { display: flex; flex-wrap: wrap; gap: 4px; }
.card-labels > i,.card-labels > small { min-height: 20px; display: inline-flex; align-items: center; border: 1px solid color-mix(in srgb, var(--label-bg, var(--accent)) 72%, #000); border-radius: 6px; padding: 2px 6px; background: var(--label-bg, var(--accent)); color: var(--label-text, #fff); font-size: 9px; font-style: normal; font-weight: 800; }
.card-labels > small { --label-bg: var(--accent); --label-text: var(--accent-contrast, #fff); }
#card-assignee-options > label > input:checked + span,#column-assigned-users label > input:checked + span { border-color: var(--accent); background: var(--accent); color: var(--accent-contrast, #fff); box-shadow: none; }

/* Column responsibilities and granular permissions. */
#text-form[data-kind="column"] { width: min(940px, calc(100vw - 28px)); }
#text-form[data-kind="new-column"] { width: min(720px, calc(100vw - 28px)); }
.column-user-search { display: grid; gap: 4px; margin-bottom: 7px; color: var(--muted); font-size: 10px; font-weight: 800; }
.column-user-search input { min-height: 35px; }
#column-assigned-users label { border: 0; background: transparent; }
#column-assigned-users label > span { min-width: 0; display: flex; align-items: center; gap: 7px; }
#column-assigned-users .project-member-avatar { width: 26px; height: 26px; flex-basis: 26px; }
.column-permissions { margin: 10px 0; overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.column-permission-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px; background: color-mix(in srgb, var(--accent) 8%, #fff); }
.column-permission-head small { color: var(--muted); }
.permission-matrix-head,.permission-row { min-width: 740px; display: grid; grid-template-columns: minmax(190px,1fr) repeat(5,70px) 74px; align-items: center; gap: 4px; padding: 7px 9px; }
.permission-matrix-head { color: var(--muted); font-size: 9px; font-weight: 800; text-align: center; text-transform: uppercase; }
.permission-matrix-head > span:first-child { text-align: left; }
.permission-row { border-top: 1px solid var(--line); }
.permission-row > label { display: grid; place-items: center; }
.permission-row input { accent-color: var(--accent); }
.permission-user { min-width: 0; display: flex; align-items: center; gap: 8px; }
.permission-user > span:last-child { min-width: 0; display: grid; }
.permission-user small { color: var(--muted); font-size: 9px; }
.permission-user .project-member-avatar { width: 28px; height: 28px; flex-basis: 28px; }
#text-form.project-editor > .primary { border-color: var(--accent); background: var(--accent); color: var(--accent-contrast, #fff); }
.column-extra { display:grid; gap:10px; }
.column-state-options { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.column-state-options > label { min-height:38px; flex:1 1 220px; padding:8px 10px; border:1px solid var(--line); border-radius:9px; background:var(--soft); }
.column-state-options input { accent-color:var(--accent); }
.column-active-toggle:has(input:not(:checked)) { border-color:color-mix(in srgb,var(--red) 45%,var(--line)); background:color-mix(in srgb,var(--red) 8%,#fff); color:var(--red); }

/* Inactive columns remain visible as an archive at the far right of the board. */
.inactive-columns-column { width:270px; min-width:270px; border:1px dashed color-mix(in srgb,var(--muted) 55%,var(--line)); background:color-mix(in srgb,var(--soft) 80%,transparent); box-shadow:none; }
.inactive-columns-column > header { border-bottom:1px dashed var(--line); }
.inactive-columns-icon { width:23px; height:23px; flex:0 0 23px; display:grid; place-items:center; border-radius:7px; background:color-mix(in srgb,var(--muted) 13%,#fff); color:var(--muted); font-size:14px; }
.inactive-columns-column > p { margin:0 3px 10px; color:var(--muted); font-size:10px; line-height:1.35; }
.inactive-columns-list { display:grid; gap:7px; overflow-y:auto; overscroll-behavior:contain; }
.inactive-columns-list article { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:8px; padding:9px; border:1px solid var(--line); border-radius:9px; background:color-mix(in srgb,#fff 72%,transparent); }
.inactive-columns-list article > span { min-width:0; flex:1; }
.inactive-columns-list b,.inactive-columns-list small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.inactive-columns-list b { font-size:12px; }
.inactive-columns-list small { margin-top:3px; color:var(--muted); font-size:9px; }
.inactive-columns-list button { flex:0 0 auto; min-height:31px; padding:5px 8px; font-size:10px; }

/* Color is a real surface, not a decorative line. */
.check-island { background: color-mix(in srgb, var(--accent) 8%, #fff); box-shadow: 0 7px 18px color-mix(in srgb, var(--accent) 10%, transparent); }
.check-island.inactive { background: color-mix(in srgb, var(--muted) 8%, #fff); }

@media (max-width: 760px) {
  .project-head { padding-block: 2px; }
  .project-icon { width: 50px; height: 50px; }
  .project-members-panel { right: 0; left: auto; }
  .clear-filters { min-width: 34px; width: 34px; overflow: hidden; padding-inline: 7px; font-size: 0; }
  .clear-filters::first-letter { font-size: 14px; }
  #column-assigned-users { grid-template-columns: 1fr; }
}

.member-assignment-note {
  margin: -2px 0 2px;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 7%, #fff);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

#admin-view form[data-action="save_member"] select:disabled {
  cursor: not-allowed;
  opacity: .62;
}

/* Unified responsive shell: tablet starts before the sidebar squeezes the board. */
@media (max-width:1100px) {
  .sidebar { transform:translateX(-100%); box-shadow:var(--shadow); }
  .sidebar.open { transform:translateX(0); }
  .page { width:100%; margin-left:0; }
  .page>header [data-sidebar-open] { display:block; }
  main { padding-inline:clamp(14px,3vw,28px); }
  .cards-toolbar { display:grid; grid-template-columns:minmax(190px,1fr) auto auto; align-items:center; gap:9px; }
  .cards-toolbar .search { width:100%; min-width:0; }
  .cards-toolbar .project-members { width:auto; min-width:0; order:initial; }
  .cards-toolbar .toolbar-actions { grid-column:1 / -1; min-width:0; display:flex; justify-content:flex-end; flex-wrap:wrap; gap:7px; }
  .project-members-panel { left:auto; right:0; }
  .admin-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* Escritorio compacto: el sidebar deja menos ancho útil que el viewport. */
@media (min-width:1101px) and (max-width:1320px) {
  .fb-project-toolbar {
    display:grid;
    grid-template-columns:minmax(180px,260px) auto minmax(0,1fr);
    align-items:center;
    gap:8px;
  }

  .fb-project-toolbar > .search {
    grid-column:1;
    grid-row:1;
    width:100%;
    min-width:0;
    box-sizing:border-box;
  }

  .fb-project-toolbar > .project-members {
    grid-column:2;
    grid-row:1;
    width:auto;
  }

  .fb-project-toolbar > .quick-card-add {
    grid-column:3;
    grid-row:1;
    justify-self:end;
  }

  .fb-project-toolbar > .toolbar-actions {
    grid-column:1 / -1;
    grid-row:2;
    width:100%;
    min-width:0;
    display:grid;
    grid-template-columns:auto minmax(140px,1fr) minmax(165px,1.15fr) auto auto auto 34px;
    align-items:center;
    gap:6px;
  }

  .fb-project-toolbar > .toolbar-actions > * {
    min-width:0;
    margin:0;
  }

  .fb-project-toolbar > .toolbar-actions select,
  .fb-project-toolbar > .toolbar-actions .date-range-filter > summary {
    width:100%;
  }
}

@media (max-width:700px) {
  .page>header { height:58px; padding-inline:12px; }
  .global-company-brand { min-width:0; }
  .global-company-brand > span:last-child { min-width:0; }
  #header-company-name { display:block; max-width:38vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .theme-toggle { width:34px; height:34px; flex:0 0 34px; }
  .notification-bell { width:34px;height:34px; }
  .notification-panel { position:fixed;top:64px;right:10px;left:10px;width:auto;max-height:calc(100vh - 74px); }
  main { padding:16px 10px 0; }
  .project-head { display:block; }
  .project-identity { align-items:center; }
  .project-head h1 { font-size:clamp(22px,7vw,29px); overflow-wrap:anywhere; }
  .head-actions { margin-top:12px; justify-content:flex-start; }
  main>nav { gap:14px; overflow-x:auto; overscroll-behavior-inline:contain; scrollbar-width:none; }
  main>nav::-webkit-scrollbar { display:none; }
  main>nav .tab { flex:0 0 auto; }
  .cards-toolbar { grid-template-columns:minmax(0,1fr) auto; padding:9px; }
  .cards-toolbar .search { grid-column:1 / -1; }
  .cards-toolbar .project-members { width:100%; grid-column:1; }
  .cards-toolbar .quick-card-add { grid-column:2; }
  .cards-toolbar .toolbar-actions { width:100%; grid-column:1 / -1; }
  .cards-toolbar .toolbar-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); justify-content:stretch; }
  .cards-toolbar .toolbar-actions>* { min-width:0; width:100%; }
  .cards-toolbar .toolbar-actions select,.date-range-filter>summary { width:100%; }
  .project-members-panel,.date-range-panel { left:0; right:auto; width:min(390px,calc(100vw - 38px)); }
  #board-view:not(.hidden) { padding-inline:0; }
  .column { width:min(86vw,320px); min-width:min(86vw,320px); }
  .file-grid,.admin-grid,.settings-grid { grid-template-columns:minmax(0,1fr); }
  .toast { right:12px; bottom:12px; left:12px; text-align:center; }
}

@media (max-width:430px) {
  .global-company-brand small,.user-copy { display:none; }
  #header-company-name { max-width:42vw; }
  .project-icon { width:44px; height:44px; flex-basis:44px; }
  .head-actions { display:grid; grid-template-columns:1fr 1fr; }
  .head-actions>* { width:100%; }
  .cards-toolbar .toolbar-actions { grid-template-columns:1fr; }
  .column { width:calc(100vw - 38px); min-width:calc(100vw - 38px); }
  .modal { width:calc(100vw - 12px); max-width:none; padding:24px 14px; }
}

/* Final dark-mode guards: later light rules must not whiten lists or calendars. */
html[data-theme="dark"] body,
html[data-theme="dark"] .app,
html[data-theme="dark"] main {
  background:#0f110f;
}

html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .page>header {
  background:#151714;
  border-color:#353932;
}

html[data-theme="dark"] .workspace-content {
  background:rgba(10,12,10,.38);
}

html[data-theme="dark"] .cards-toolbar {
  background:rgba(18,21,17,.96);
  border-color:#3b4038;
}

html[data-theme="dark"] .cards-toolbar select,
html[data-theme="dark"] .list-table-head select,
html[data-theme="dark"] .cards-toolbar .search,
html[data-theme="dark"] .date-range-filter>summary,
html[data-theme="dark"] .project-members>summary {
  background:#11140f;
  color:#f5ead5;
  border-color:#4a5046;
  box-shadow:0 2px 7px rgba(0,0,0,.28);
}

html[data-theme="dark"] .cards-toolbar select:hover,
html[data-theme="dark"] .cards-toolbar select:focus,
html[data-theme="dark"] .list-table-head select:hover,
html[data-theme="dark"] .list-table-head select:focus {
  background:#171b15;
  border-color:var(--accent);
}

html[data-theme="dark"] .quick-card-add {
  border-color:#2a2d27;
}

html[data-theme="dark"] .list-table,
html[data-theme="dark"] .list-table-body {
  background:#111310;
  border-color:#3b3f38;
}

html[data-theme="dark"] .list-table-head {
  background:#252821;
  color:#d5cab5;
  border-color:#444940;
  box-shadow:0 5px 14px rgba(0,0,0,.34);
}

html[data-theme="dark"] .list-row:not(.has-card-color) {
  background:#171a16;
  color:#f5ead5;
  border-color:#363a33;
}

html[data-theme="dark"] .list-row:not(.has-card-color):hover {
  background:color-mix(in srgb,var(--accent) 9%,#171a16);
}

html[data-theme="dark"] #calendar-content .calendar,
html[data-theme="dark"] #calendar-content .calendar-week {
  background:#3d4239;
  border-color:#454a41;
}

html[data-theme="dark"] #calendar-content .calendar-weekdays {
  border-color:#454a41;
  background:#3d4239;
}

html[data-theme="dark"] #calendar-content .calendar-weekdays span {
  background:#20231e;
  color:#d8cdb8;
}

html[data-theme="dark"] #calendar-content .day {
  background:#151814;
  color:#f5ead5;
}

html[data-theme="dark"] #calendar-content .day.muted {
  background:#10120f;
  color:#807b70;
}

html[data-theme="dark"] #calendar-content .calendar-day-number {
  background:transparent !important;
  color:#d8cdb8;
}

html[data-theme="dark"] #calendar-content .calendar-day-number:hover {
  background:color-mix(in srgb,var(--accent) 16%,#151814) !important;
  color:#fff;
}

html[data-theme="dark"] #calendar-content .calendar-card:not(.has-card-color) {
  background:#22261f;
  color:#f5ead5;
  border:1px solid #41463d;
  box-shadow:0 2px 7px rgba(0,0,0,.3);
}

html[data-theme="dark"] #calendar-content .calendar-card:not(.has-card-color) .calendar-card-title {
  color:#f5ead5;
}

html[data-theme="dark"] .column-state-options > label,
html[data-theme="dark"] .inactive-columns-list article {
  background:#1b1e19;
  border-color:#41463d;
}

html[data-theme="dark"] .column-permissions,
html[data-theme="dark"] .permission-matrix-head,
html[data-theme="dark"] .permission-row {
  background:#171a16;
  color:#f5ead5;
  border-color:#41463d;
}

html[data-theme="dark"] .column-permission-head {
  background:color-mix(in srgb,var(--accent) 10%,#171a16);
}

html[data-theme="dark"] .column-active-toggle:has(input:not(:checked)) {
  background:color-mix(in srgb,var(--red) 13%,#171a16);
}

html[data-theme="dark"] .inactive-columns-column {
  background:rgba(18,21,17,.94);
  border-color:#50554b;
}

html[data-theme="dark"] .inactive-columns-icon {
  background:#292d26;
}

/* Administration: compact, aligned controls and complete theme surfaces. */
#admin-view .panel-head {
  display:flex;
  align-items:flex-end;
  gap:18px;
}

#admin-view .stats {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  margin-left:auto;
}

#admin-view .stats b {
  display:inline-flex;
  align-items:center;
  min-height:36px;
  color:var(--ink);
  white-space:nowrap;
}

#admin-view .admin-filters {
  display:grid;
  grid-template-columns:minmax(180px,210px) minmax(190px,230px) repeat(5,max-content);
  align-items:end;
  gap:10px;
  padding:12px 14px;
  background:var(--paper);
}

#admin-view .admin-filters label {
  display:grid;
  min-width:0;
  gap:6px;
  color:var(--muted);
  font-size:11px;
  font-weight:700;
}

#admin-view .admin-filters select,
#admin-view .admin-filters button {
  height:43px;
  min-width:0;
  margin:0;
}

#admin-view .admin-filters button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
}

#admin-view .admin-grid {
  align-items:start;
}

#admin-view .admin-grid > .panel {
  width:100%;
  align-self:start;
}

#admin-view .primary {
  background:var(--accent);
  color:var(--accent-contrast,#fff);
}

#admin-view .primary:hover,
#admin-view .primary:focus-visible {
  filter:brightness(.92);
}

#admin-view button:disabled {
  cursor:wait;
  opacity:.62;
}

html[data-theme="dark"] #admin-view:not(.hidden) {
  background:rgba(12,14,12,.76);
}

html[data-theme="dark"] #admin-view .admin-filters,
html[data-theme="dark"] #admin-view .panel,
html[data-theme="dark"] #admin-view .stats b {
  background:#1d201c;
  color:#f5ead5;
  border-color:#42483e;
}

html[data-theme="dark"] #admin-view .admin-filters label,
html[data-theme="dark"] #admin-view .panel > label,
html[data-theme="dark"] #admin-view .hint {
  color:#c7bcaa;
}

html[data-theme="dark"] #admin-view .admin-filters select,
html[data-theme="dark"] #admin-view .secondary {
  background:#242720;
  color:#f5ead5;
  border-color:#4b5146;
}

html[data-theme="dark"] #admin-view .secondary:hover,
html[data-theme="dark"] #admin-view .secondary:focus-visible {
  border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 12%,#242720);
}

@media (max-width:1350px) {
  #admin-view .admin-filters {
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
  #admin-view .admin-filters label {
    grid-column:span 2;
  }
  #admin-view .admin-filters button {
    width:100%;
  }
}

@media (max-width:700px) {
  #admin-view .panel-head {
    align-items:flex-start;
    flex-direction:column;
  }
  #admin-view .stats {
    justify-content:flex-start;
    margin-left:0;
  }
  #admin-view .admin-filters {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  #admin-view .admin-filters label {
    grid-column:auto;
  }
}

@media (max-width:430px) {
  #admin-view .admin-filters {
    grid-template-columns:minmax(0,1fr);
  }
}

/* Board glass surfaces are isolated from columns/cards used by other features. */
.fb-board-view .fb-board-column {
  border-color:rgba(255,255,255,.54);
  background:linear-gradient(145deg,rgba(232,237,240,.88),rgba(215,223,227,.82));
  box-shadow:0 12px 30px rgba(18,28,34,.16),inset 0 1px 0 rgba(255,255,255,.28);
  -webkit-backdrop-filter:blur(10px) saturate(112%);
  backdrop-filter:blur(10px) saturate(112%);
}

.fb-board-view .fb-board-task:not(.has-card-color) {
  border-color:rgba(170,181,187,.42);
  background:rgba(255,255,255,.92);
  box-shadow:0 4px 12px rgba(18,28,34,.09),inset 0 1px 0 rgba(255,255,255,.32);
  -webkit-backdrop-filter:blur(5px) saturate(105%);
  backdrop-filter:blur(5px) saturate(105%);
}

.fb-board-view .fb-board-task:not(.has-card-color):hover {
  border-color:rgba(126,143,151,.58);
  box-shadow:0 10px 24px rgba(18,28,34,.16),inset 0 1px 0 rgba(255,255,255,.36);
}

html[data-theme="dark"] .fb-board-view .fb-board-column {
  border-color:rgba(133,157,165,.34);
  background:linear-gradient(145deg,rgba(43,51,54,.91),rgba(31,38,41,.88));
  box-shadow:0 14px 34px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.055);
  -webkit-backdrop-filter:blur(9px) saturate(88%);
  backdrop-filter:blur(9px) saturate(88%);
}

html[data-theme="dark"] .workspace-background.type-image {
  filter:brightness(.68) saturate(.94) contrast(1.03);
}

html[data-theme="dark"] .fb-board-view .fb-board-column h2 {
  color:#deded9;
}

html[data-theme="dark"] .fb-board-view .fb-board-column .mini,
html[data-theme="dark"] .fb-board-view .fb-board-column .column-drag-handle,
html[data-theme="dark"] .fb-board-view .fb-board-column .add-card,
html[data-theme="dark"] .fb-board-view .fb-board-column .column-inactive {
  color:#aaa9a2;
}

html[data-theme="dark"] .fb-board-view .fb-board-task:not(.has-card-color) {
  border-color:rgba(105,122,128,.42);
  background:rgba(19,23,24,.93);
  color:#eeeeea;
  box-shadow:0 5px 16px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.025);
  -webkit-backdrop-filter:blur(5px) saturate(82%);
  backdrop-filter:blur(5px) saturate(82%);
}

html[data-theme="dark"] .fb-board-view .fb-board-task:not(.has-card-color) h3 {
  color:#eeeeea;
}

html[data-theme="dark"] .fb-board-view .fb-board-task:not(.has-card-color) p,
html[data-theme="dark"] .fb-board-view .fb-board-task:not(.has-card-color) footer,
html[data-theme="dark"] .fb-board-view .fb-board-task:not(.has-card-color) .card-created-meta {
  color:#aaa9a3;
}

html[data-theme="dark"] .fb-board-view .fb-board-task:not(.has-card-color):hover {
  border-color:rgba(144,166,173,.58);
  background:rgba(22,27,28,.95);
  box-shadow:0 12px 28px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.04);
}

/*
 * Component isolation layer
 * -------------------------
 * Feature-specific rules must start at an `fb-*` component root. Generic
 * classes such as `.card`, `.modal`, `.column` and `.panel` are legacy
 * primitives and must not be used as the root of new feature styles.
 *
 * Task modal: #card-modal.fb-task-modal
 * Board:      .fb-board-view / .fb-board-column / .fb-board-task
 * List:       .fb-list-view / .fb-list-task
 * Calendar:   .fb-calendar-view / .fb-calendar-task
 * Admin:      .fb-admin-view
 */

/* Mobile task views: one reliable scroll, editor first and chat below. */
@media (max-width:820px) {
  #card-modal.fb-task-modal {
    align-items:stretch;
    overflow:hidden;
    padding:0;
  }

  #card-modal.fb-task-modal .collab-card,
  #card-modal.fb-task-modal.chat-expanded .collab-card,
  #card-modal.fb-task-modal.chat-fullscreen .collab-card {
    width:100vw;
    height:100vh;
    height:100dvh;
    min-width:0;
    min-height:0;
    max-width:none;
    max-height:none;
    display:flex;
    flex-direction:column;
    overflow-x:hidden;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-y;
    overscroll-behavior:contain;
    margin:0;
    border-radius:0;
  }

  #card-modal.fb-task-modal .card-main {
    width:100%;
    min-width:0;
    min-height:auto;
    flex:0 0 auto;
    overflow:visible;
    padding:0 12px 12px;
    scrollbar-gutter:auto;
    touch-action:pan-y;
  }

  #card-modal.fb-task-modal .card-editor-sticky {
    top:0;
    margin:0 -12px;
    padding:10px 54px 9px 12px;
    grid-template-columns:minmax(0,1fr);
    background:color-mix(in srgb,var(--paper) 96%,transparent);
  }

  #card-modal.fb-task-modal [data-close] {
    display:grid!important;
    place-items:center;
    position:fixed;
    z-index:310;
    top:8px;
    right:8px;
    width:38px;
    height:38px;
    border:1px solid var(--line);
    background:var(--paper);
    box-shadow:0 4px 14px rgba(20,30,40,.14);
  }

  #card-modal.fb-task-modal .card-editor-sticky .card-chat-reopen {
    position:fixed;
    z-index:309;
    top:8px;
    right:52px;
    grid-column:auto;
    grid-row:auto;
  }

  #card-modal.fb-task-modal .card-kicker {
    min-width:0;
    padding-right:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  #card-modal.fb-task-modal .title-input {
    width:100%;
    min-width:0;
    min-height:42px;
    max-height:30vh;
    max-height:30dvh;
    padding:2px 4px 5px 0;
    overflow:hidden;
    resize:none;
    white-space:pre-wrap;
    overflow-wrap:anywhere;
    font-size:clamp(20px,6vw,25px);
  }

  #card-modal.fb-task-modal .description-field,
  #card-modal.fb-task-modal .card-creation-row,
  #card-modal.fb-task-modal .card-details-row,
  #card-modal.fb-task-modal .check-island,
  #card-modal.fb-task-modal .new-section,
  #card-modal.fb-task-modal .files-heading,
  #card-modal.fb-task-modal #card-files,
  #card-modal.fb-task-modal .card-save-footer {
    min-width:0;
    max-width:100%;
  }

  #card-modal.fb-task-modal .card-details-row {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  #card-modal.fb-task-modal .card-details-row > *,
  #card-modal.fb-task-modal .card-creation-row > * {
    min-width:0;
  }

  #card-modal.fb-task-modal .compact-field,
  #card-modal.fb-task-modal .compact-popover > summary {
    width:100%;
    min-width:0;
  }

  #card-modal.fb-task-modal .compact-field select,
  #card-modal.fb-task-modal .compact-popover > summary b {
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  #card-modal.fb-task-modal .compact-popover-panel {
    position:fixed;
    z-index:150;
    inset:auto 10px 10px;
    width:auto;
    max-height:min(70vh,620px);
    max-height:min(70dvh,620px);
    overflow-y:auto;
  }

  #card-modal.fb-task-modal .new-section {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:stretch;
  }

  #card-modal.fb-task-modal .new-section textarea {
    width:100%;
    min-width:0;
  }

  #card-modal.fb-task-modal .files-heading {
    display:flex;
    align-items:center;
    flex-wrap:nowrap;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    scrollbar-width:thin;
  }

  #card-modal.fb-task-modal .files-heading > * {
    flex:0 0 auto;
  }

  #card-modal.fb-task-modal #card-files.file-mosaic {
    columns:2 130px;
  }

  #card-modal.fb-task-modal .card-save-footer {
    position:static!important;
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:8px;
    margin:2px 0 0;
    border-radius:11px!important;
    box-shadow:none;
  }

  #card-modal.fb-task-modal .card-save-actions {
    width:100%;
    display:flex;
    flex-direction:row;
    align-items:stretch;
  }

  #card-modal.fb-task-modal .card-save-footer > button,
  #card-modal.fb-task-modal .card-save-actions > button {
    min-height:42px;
  }

  #card-modal.fb-task-modal .card-save-actions > button {
    min-width:0;
    flex:1 1 0;
  }

  #card-modal.fb-task-modal .card-chat {
    width:100%;
    min-width:0;
    min-height:min(680px,82vh);
    min-height:min(680px,82dvh);
    max-height:none;
    flex:0 0 auto;
    grid-template-rows:auto auto minmax(260px,1fr) auto;
    overflow:hidden;
    border-top:1px solid var(--line);
    border-left:0;
  }

  #card-modal.fb-task-modal #chat-messages {
    width:100%;
    height:auto;
    min-height:260px;
    max-height:52vh;
    max-height:52dvh;
  }

  #card-modal.fb-task-modal .chat-head,
  #card-modal.fb-task-modal .chat-compose {
    padding:12px;
  }

  #card-modal.fb-task-modal .chat-compose-actions {
    width:100%;
    overflow-x:auto;
    flex-wrap:nowrap!important;
  }

  #card-modal.fb-task-modal .chat-compose-actions > * {
    flex:0 0 auto;
  }

  #card-modal.fb-task-modal .chat-view-actions {
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:6px!important;
    overflow:visible;
  }

  #card-modal.fb-task-modal .chat-view-actions button {
    width:100%;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  #card-modal.fb-task-modal.chat-expanded .card-main,
  #card-modal.fb-task-modal.chat-fullscreen .card-main {
    display:none;
  }

  #card-modal.fb-task-modal.chat-expanded .card-chat,
  #card-modal.fb-task-modal.chat-fullscreen .card-chat {
    min-height:100vh;
    min-height:100dvh;
  }

  .fb-board-view .fb-board-task .card-overview-footer {
    gap:8px;
  }

  .fb-board-view .fb-board-task .card-created-meta,
  .fb-board-view .fb-board-task .card-indicator-row,
  .fb-board-view .fb-board-task .card-check-progress {
    width:100%;
  }

  .fb-board-view .fb-board-task .card-indicator-row {
    flex-wrap:wrap;
  }

  .fb-board-view .fb-board-task .card-due-chip {
    align-items:center;
    flex-direction:row;
    gap:6px;
  }

  .fb-board-view .fb-board-task .card-due-chip b {
    padding-left:6px;
    border-left:1px solid color-mix(in srgb,var(--due-text) 42%,transparent);
  }
}

/* Mobile board: keep each column inside the viewport so its cards remain scrollable. */
@media (max-width:700px) {
  #board-view:not(.hidden),
  #board-view:not(.hidden) .board { min-height:0; }
  #board-view:not(.hidden) .board {
    height:100%;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
  }
  #board-view:not(.hidden) .column {
    height:100%;
    min-height:0;
    max-height:100%;
    align-self:stretch;
  }
  #board-view:not(.hidden) .column .card-list {
    min-height:0;
    flex:1 1 auto;
    max-height:none;
    overflow-x:hidden;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-y;
    overscroll-behavior-y:contain;
  }
}

@media (max-width:480px) {
  #card-modal.fb-task-modal .card-main {
    padding-inline:8px;
  }

  #card-modal.fb-task-modal .card-editor-sticky {
    margin-inline:-8px;
    padding:10px 50px 9px 8px;
  }

  #card-modal.fb-task-modal .card-details-row {
    gap:6px;
  }

  #card-modal.fb-task-modal .new-section {
    grid-template-columns:minmax(0,1fr);
  }

  #card-modal.fb-task-modal .new-section button {
    width:100%;
  }

  #card-modal.fb-task-modal .check-island {
    padding:9px 7px 8px;
  }

  #card-modal.fb-task-modal .check-island > header {
    grid-template-columns:26px minmax(0,1fr);
  }

  #card-modal.fb-task-modal .check-island > header .section-tools {
    grid-column:1 / -1;
    justify-content:flex-end;
  }

  #card-modal.fb-task-modal .card-save-actions {
    flex-direction:column;
  }
}
/* Project mobile header and filters. Kept inside the project namespaces. */
.fb-project-toolbar > .fb-filter-menu-toggle {
  display:none;
}

@media (max-width:700px) {
  .fb-project-main .fb-project-header {
    min-width:0;
  }

  .fb-project-main .fb-project-header .project-identity {
    width:100%;
    max-width:100%;
    min-width:0;
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    align-items:flex-start;
  }

  .fb-project-main .fb-project-header .project-identity > div:last-child {
    width:100%;
    min-width:0;
  }

  .fb-project-main .fb-project-header .title-line {
    width:100%;
    min-width:0;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto auto;
    align-items:start;
    gap:6px;
  }

  .fb-project-main .fb-project-header h1 {
    width:100%;
    max-width:100%;
    min-width:0;
    overflow:visible;
    text-overflow:clip;
    white-space:normal;
    overflow-wrap:anywhere;
    line-height:1.08;
  }

  .fb-project-main .fb-project-header #project-description {
    display:block;
    width:100%;
    max-width:100%;
    margin-top:5px;
    overflow:visible;
    text-overflow:clip;
    white-space:normal;
    overflow-wrap:anywhere;
    line-height:1.3;
  }

  .fb-project-toolbar {
    width:calc(100% - 20px);
    max-width:calc(100% - 20px);
    grid-template-columns:minmax(0,1fr) auto auto;
    align-items:center;
    gap:7px;
    margin:10px 10px 14px;
    padding:8px;
  }

  .fb-project-toolbar > .search {
    grid-column:1;
    grid-row:1;
    width:100%;
    min-width:0;
    overflow:hidden;
  }

  .fb-project-toolbar > .quick-card-add {
    grid-column:2;
    grid-row:1;
  }

  .fb-project-toolbar > .fb-filter-menu-toggle {
    grid-column:3;
    grid-row:1;
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    flex:0 0 38px;
    padding:0;
    border:1px solid var(--line);
    border-radius:9px;
    background:var(--paper);
    color:var(--ink);
    box-shadow:0 2px 7px rgba(23,33,43,.08);
    font-size:18px;
    line-height:1;
    cursor:pointer;
  }

  .fb-project-toolbar > .fb-filter-menu-toggle[aria-expanded="true"] {
    border-color:var(--accent);
    background:var(--accent);
    color:var(--accent-contrast,#fff);
  }

  .fb-project-toolbar > .project-members,
  .fb-project-toolbar > .toolbar-actions {
    display:none;
  }

  .fb-project-toolbar.mobile-filters-open > .project-members {
    grid-column:1 / -1;
    grid-row:2;
    width:100%;
    display:block;
  }

  .fb-project-toolbar.mobile-filters-open > .toolbar-actions {
    grid-column:1 / -1;
    grid-row:3;
    width:100%;
    min-width:0;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px;
  }

  .fb-project-toolbar.mobile-filters-open > .toolbar-actions > * {
    width:100%;
    min-width:0;
    margin:0;
  }

  .fb-project-toolbar.mobile-filters-open > .toolbar-actions select,
  .fb-project-toolbar.mobile-filters-open > .toolbar-actions .date-range-filter > summary {
    width:100%;
    min-width:0;
  }

  .fb-project-toolbar.mobile-filters-open > .toolbar-actions > .icon {
    width:38px;
    justify-self:start;
  }

  .fb-project-workspace .fb-board-view:not(.hidden) {
    padding-top:2px;
  }
}

html[data-theme="dark"] .fb-project-toolbar > .fb-filter-menu-toggle {
  border-color:#4b5146;
  background:#242720;
  color:#f5ead5;
}

html[data-theme="dark"] .fb-project-toolbar > .fb-filter-menu-toggle[aria-expanded="true"] {
  border-color:var(--accent);
  background:var(--accent);
  color:var(--accent-contrast,#fff);
}

/* Task editor components: never target generic `.modal`, `.card` or `.panel`. */
#card-modal.fb-task-modal .fb-task-media {
  min-width:0;
  display:grid;
  gap:9px;
  padding:12px;
  border:1px solid color-mix(in srgb,var(--accent) 24%,var(--line));
  border-radius:13px;
  background:color-mix(in srgb,var(--accent) 5%,#fff);
}

#card-modal.fb-task-modal .fb-task-media-toggle {
  width:100%;
  min-height:42px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  align-items:center;
  gap:9px;
  padding:8px 10px;
  border:0;
  border-radius:12px;
  background:transparent;
  color:var(--ink);
  text-align:left;
  font-weight:800;
}

#card-modal.fb-task-modal .fb-task-media-toggle b {
  min-width:24px;
  min-height:24px;
  display:grid;
  place-items:center;
  padding:2px 6px;
  border-radius:999px;
  background:color-mix(in srgb,var(--accent) 14%,var(--soft));
  font-size:11px;
}

#card-modal.fb-task-modal .fb-task-media-toggle i {
  font-style:normal;
  transition:transform .18s ease;
}

#card-modal.fb-task-modal .fb-task-media-content {
  min-width:0;
  display:grid;
  gap:9px;
}

#card-modal.fb-task-modal .fb-task-media:not(.is-open) .fb-task-media-content {
  display:none;
}

#card-modal.fb-task-modal .fb-task-media.is-open .fb-task-media-toggle i {
  transform:rotate(180deg);
}

#card-modal.fb-task-modal .fb-task-media .files-heading,
#card-modal.fb-task-modal .fb-task-media #card-files {
  min-width:0;
  margin:0;
}

#card-modal.fb-task-modal .fb-task-footer-chat {
  display:none;
}

@media (max-width:820px) {
  #card-modal.fb-task-modal .fb-task-header .card-chat-reopen {
    display:none!important;
  }

  #card-modal.fb-task-modal .fb-task-planning-row {
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-auto-rows:minmax(54px,auto);
    align-items:stretch;
  }

  #card-modal.fb-task-modal .fb-task-planning-row > * {
    width:100%;
    min-width:0;
    min-height:54px;
    height:100%;
    margin:0;
  }

  #card-modal.fb-task-modal .fb-task-planning-row > details > summary,
  #card-modal.fb-task-modal .fb-task-planning-row > .compact-field {
    min-height:54px;
    height:100%;
  }

  #card-modal.fb-task-modal .fb-task-column > span {
    display:none;
  }

  #card-modal.fb-task-modal .fb-task-column {
    padding:0;
    border:0;
    background:transparent;
  }

  #card-modal.fb-task-modal .fb-task-column select {
    width:100%;
    min-height:54px;
    padding:7px 10px;
    border:1px solid var(--line);
    border-radius:9px;
    background:var(--paper);
  }

  #card-modal.fb-task-modal .fb-task-media {
    padding:0;
    border-color:var(--line);
    background:var(--paper);
  }

  #card-modal.fb-task-modal .fb-task-media-toggle {
    width:100%;
    min-height:46px;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto auto;
    align-items:center;
    gap:9px;
    padding:9px 11px;
    border:0;
    border-radius:12px;
    background:transparent;
    color:var(--ink);
    text-align:left;
    font-weight:800;
  }

  #card-modal.fb-task-modal .fb-task-media-toggle b {
    min-width:24px;
    min-height:24px;
    display:grid;
    place-items:center;
    padding:2px 6px;
    border-radius:999px;
    background:color-mix(in srgb,var(--accent) 14%,var(--soft));
    font-size:11px;
  }

  #card-modal.fb-task-modal .fb-task-media-toggle i {
    font-style:normal;
    transition:transform .18s ease;
  }

  #card-modal.fb-task-modal .fb-task-media:not(.is-open) .fb-task-media-content {
    display:none;
  }

  #card-modal.fb-task-modal .fb-task-media.is-open .fb-task-media-toggle {
    border-bottom:1px solid var(--line);
    border-radius:12px 12px 0 0;
  }

  #card-modal.fb-task-modal .fb-task-media.is-open .fb-task-media-toggle i {
    transform:rotate(180deg);
  }

  #card-modal.fb-task-modal .fb-task-media.is-open .fb-task-media-content {
    display:grid;
    gap:9px;
    padding:9px;
  }

  #card-modal.fb-task-modal .fb-task-footer {
    position:fixed!important;
    z-index:45;
    right:8px;
    bottom:0;
    left:8px;
    width:auto;
    grid-template-columns:auto auto minmax(0,1fr);
    align-items:stretch;
    gap:7px;
    margin:0;
    padding:9px;
    padding-bottom:max(9px,env(safe-area-inset-bottom));
    border-radius:12px 12px 0 0!important;
    background:color-mix(in srgb,var(--paper) 96%,transparent)!important;
    box-shadow:0 -10px 28px rgba(20,30,40,.14);
    backdrop-filter:blur(12px);
  }

  #card-modal.fb-task-modal .fb-task-main {
    padding-bottom:92px;
  }

  #card-modal.fb-task-modal .fb-task-footer-chat {
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }

  #card-modal.fb-task-modal .fb-task-footer .card-save-actions {
    min-width:0;
  }

  #card-modal.fb-task-modal .fb-task-chat {
    display:none;
  }

  #card-modal.fb-task-modal.mobile-chat-open .fb-task-chat {
    position:fixed;
    z-index:360;
    inset:max(10px,env(safe-area-inset-top)) 10px max(10px,env(safe-area-inset-bottom));
    width:auto;
    height:auto;
    min-width:0;
    min-height:0;
    max-width:none;
    max-height:none;
    display:grid;
    grid-template-rows:auto auto minmax(0,1fr) auto;
    overflow:hidden;
    border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line));
    border-radius:16px;
    background:var(--paper);
    box-shadow:0 24px 70px rgba(10,16,22,.34),0 0 0 100vmax rgba(10,16,22,.5);
  }

  #card-modal.fb-task-modal.mobile-chat-open .fb-task-main {
    pointer-events:none;
    user-select:none;
  }

  #card-modal.fb-task-modal.mobile-chat-open .fb-task-chat {
    pointer-events:auto;
    user-select:text;
  }

  #card-modal.fb-task-modal.mobile-chat-open .fb-task-chat #chat-messages {
    height:auto;
    min-height:0;
    max-height:none;
  }

  #card-modal.fb-task-modal.mobile-chat-open .fb-task-chat .chat-compose {
    max-height:48dvh;
    overflow-y:auto;
  }

  #card-modal.fb-task-modal .fb-task-chat .chat-view-actions {
    display:none!important;
  }

  #card-modal.fb-task-modal .fb-task-check-section > header {
    grid-template-columns:26px minmax(70px,1fr) auto;
    align-items:center;
    gap:5px;
  }

  #card-modal.fb-task-modal .fb-task-check-section > header .fb-task-section-tools {
    grid-column:3;
    grid-row:1;
    align-self:center;
    justify-content:flex-end;
    gap:3px;
    padding:0;
  }

  #card-modal.fb-task-modal .fb-task-check-section > header .section-tool-trigger,
  #card-modal.fb-task-modal .fb-task-check-section > header .section-trash {
    width:31px;
    min-width:31px;
    height:34px;
  }

  #card-modal.fb-task-modal .fb-task-check-section > header .add-task-trigger {
    width:40px;
    min-width:40px;
  }

  #card-modal.fb-task-modal .fb-task-check-section > header .section-trash,
  #card-modal.fb-task-modal .fb-task-check-section > header .section-trash:hover {
    transform:none;
  }

  #card-modal.fb-task-modal .fb-task-check-item {
    grid-template-columns:24px 25px minmax(70px,1fr) auto 39px;
    grid-template-rows:auto;
    align-items:center;
    gap:4px;
    padding-left:6px;
  }

  #card-modal.fb-task-modal .fb-task-check-item > .item-drag,
  #card-modal.fb-task-modal .fb-task-check-item > input[type=checkbox],
  #card-modal.fb-task-modal .fb-task-check-item > .task-copy,
  #card-modal.fb-task-modal .fb-task-check-item > .task-hover-actions,
  #card-modal.fb-task-modal .fb-task-check-item > .task-trash {
    grid-row:1;
  }

  #card-modal.fb-task-modal .fb-task-check-item > .task-hover-actions {
    grid-column:4;
    justify-self:end;
    opacity:1;
    transform:none;
    pointer-events:auto;
  }

  #card-modal.fb-task-modal .fb-task-check-item > .task-trash {
    grid-column:5;
    width:39px;
    min-width:39px;
  }
}

@media (max-width:480px) {
  #card-modal.fb-task-modal .fb-task-footer {
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  }

  #card-modal.fb-task-modal .fb-task-main {
    padding-bottom:138px;
  }

  #card-modal.fb-task-modal .fb-task-footer > button {
    width:100%;
    min-width:0;
    padding-inline:8px;
  }

  #card-modal.fb-task-modal .fb-task-footer .card-save-actions {
    grid-column:1 / -1;
    display:flex;
    flex-direction:row;
  }

  #card-modal.fb-task-modal .fb-task-check-section {
    padding-inline:7px;
  }

  #card-modal.fb-task-modal .fb-task-check-section > header textarea {
    font-size:16px;
  }

  #card-modal.fb-task-modal .fb-task-check-item {
    grid-template-columns:20px 24px minmax(58px,1fr) auto 36px;
    gap:3px;
  }

  #card-modal.fb-task-modal .fb-task-check-item > .task-trash {
    grid-column:5;
    width:36px;
    min-width:36px;
  }

  #card-modal.fb-task-modal .fb-task-check-item .task-hover-actions button {
    width:26px;
    min-width:26px;
    height:28px;
  }
}

html[data-theme="dark"] #card-modal.fb-task-modal .fb-task-media,
html[data-theme="dark"] #card-modal.fb-task-modal.mobile-chat-open .fb-task-chat,
html[data-theme="dark"] #card-modal.fb-task-modal .fb-task-footer {
  border-color:#44463f;
  background:#20211e!important;
  color:#f5ead5;
}

/* Closing the card chat must also remove its reserved grid column. */
#card-modal.fb-task-modal #card-form.chat-hidden {
  grid-template-columns:minmax(0,1fr);
}

#card-modal.fb-task-modal #card-form.chat-hidden .fb-task-main {
  width:100%;
  max-width:none;
}

/* Final responsive sizing for the card detail controls. */
@media (max-width:480px) {
  #card-modal.fb-task-modal .card-details-row {
    grid-template-columns:minmax(0,1fr);
  }
}

/* Spreadsheet card import */
#import-view:not(.hidden) {
  padding:16px;
  overflow:auto;
  background:color-mix(in srgb,var(--canvas) 88%,transparent);
  backdrop-filter:blur(9px);
}

.batch-import-panel {
  width:min(1180px,100%);
  margin:0 auto;
  padding:20px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--paper);
  box-shadow:0 12px 35px rgba(23,33,43,.12);
}

.batch-import-panel .panel-head { align-items:flex-start; }
.import-template-tools { display:grid;gap:12px;margin:16px 0;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--soft); }
.import-mode-options { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px; }
.import-mode-options label { display:flex;align-items:flex-start;gap:9px;min-width:0;padding:11px;border:1px solid var(--line);border-radius:11px;background:var(--paper);cursor:pointer; }
.import-mode-options label:has(input:checked) { border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent); }
.import-mode-options input { flex:0 0 auto;margin-top:3px;accent-color:var(--accent); }
.import-mode-options span { display:grid;gap:3px;min-width:0; }
.import-mode-options small { color:var(--muted);line-height:1.35; }
.import-template-choice { display:grid;grid-template-columns:minmax(220px,1fr) auto auto;align-items:end;gap:10px; }
.import-template-choice label { min-width:0; }
.import-template-choice strong { align-self:center;padding:7px 10px;border-radius:999px;background:color-mix(in srgb,var(--accent) 16%,var(--paper));color:var(--accent);font-size:.78rem;white-space:nowrap; }
.batch-import-empty { min-height:260px;display:grid;place-content:center;gap:8px;padding:22px;text-align:center;border:2px dashed var(--line);border-radius:14px;color:var(--muted);cursor:pointer;transition:border-color .16s ease,background .16s ease,transform .16s ease; }
.batch-import-empty b { color:var(--ink);font-size:1.05rem; }
.batch-import-empty small { color:var(--muted); }
.batch-import-empty:hover,.batch-import-empty:focus-visible,.batch-import-empty.dragging { border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--paper));outline:0; }
.batch-import-empty.dragging { transform:scale(.995);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--accent) 16%,transparent); }
.batch-import-empty.loading { cursor:wait;opacity:.72;pointer-events:none; }
.batch-import-summary { display:grid;grid-template-columns:minmax(160px,1fr) 150px minmax(190px,1fr) minmax(190px,1fr);gap:12px;margin:16px 0 22px; }
.batch-import-summary > div,.batch-import-summary > label { min-width:0;padding:12px;border:1px solid var(--line);border-radius:11px;background:var(--soft); }
.batch-import-summary span,.batch-import-summary label { color:var(--muted);font-size:.78rem;font-weight:700; }
.batch-import-summary b { display:block;margin-top:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.batch-import-fields { display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin:12px 0; }
.batch-map-field { display:grid;grid-template-columns:1fr;gap:5px;padding:11px;border:1px solid var(--line);border-radius:11px;background:var(--soft); }
.batch-map-field span { color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.05em; }
.batch-map-field b { min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.import-target-picker { position:relative;min-width:0; }
.import-target-picker > summary { width:100%;min-height:40px;box-sizing:border-box; }
.import-target-panel { z-index:45;left:0;right:auto;width:min(430px,calc(100vw - 34px));padding:8px; }
.import-target-tools { display:grid;grid-template-columns:1fr;gap:7px;align-items:stretch; }
.import-target-tools:has([data-add-import-field]) { grid-template-columns:minmax(0,85fr) minmax(54px,15fr); }
.import-target-tools input { width:100%;min-width:0;height:38px; }
.import-target-tools [data-add-import-field] { width:100%;min-width:54px;height:38px;display:flex;align-items:center;justify-content:center;gap:3px;padding:0 5px; }
.import-target-tools [data-add-import-field] > span { color:inherit;font-size:19px;line-height:1; }
.import-target-tools [data-add-import-field] > small { color:inherit;font-size:.57rem;line-height:1.05;text-transform:none;letter-spacing:0; }
.import-target-options { display:grid;gap:5px;max-height:260px;margin-top:7px;overflow-y:auto;overscroll-behavior:contain; }
.import-target-group { display:grid;gap:5px;padding:6px;border:1px solid color-mix(in srgb,var(--line) 78%,transparent);border-radius:10px;background:color-mix(in srgb,var(--soft) 72%,transparent); }
.import-target-group h4 { position:sticky;top:-1px;z-index:1;margin:-6px -6px 1px;padding:8px 9px 6px;border-radius:9px 9px 0 0;background:var(--soft);color:var(--muted);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase; }
.import-target-group > button { width:100%;min-height:38px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 9px;border:1px solid var(--line);border-radius:9px;background:var(--paper);color:var(--ink);text-align:left;font-weight:700;cursor:pointer; }
.import-target-group > button:hover { border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--paper)); }
.import-target-group > button.selected { border-color:var(--accent);background:var(--accent);color:var(--accent-contrast,#fff); }
.import-target-group > button i { font-style:normal;font-weight:900; }
.import-target-group > button.filtered-out,.import-target-group.filtered-out { display:none; }
.import-target-picker.unresolved > summary { border-color:color-mix(in srgb,#d97706 70%,var(--line));background:color-mix(in srgb,#f59e0b 10%,var(--paper)); }
.import-target-picker.unresolved > summary b { color:#b45309; }
html[data-theme="dark"] .import-target-group { border-color:#45483f;background:#20211e; }
html[data-theme="dark"] .import-target-group h4 { background:#272824;color:#c8bea9; }
html[data-theme="dark"] .import-target-group > button { border-color:#45483f;background:#191a18;color:#f5ead5; }
html[data-theme="dark"] .import-target-group > button.selected { border-color:var(--accent);background:var(--accent);color:var(--accent-contrast,#fff); }
html[data-theme="dark"] .import-target-picker.unresolved > summary b { color:#fbbf24; }
.batch-import-preview-wrap { max-height:min(62vh,620px);margin-top:18px;overflow:auto;border:1px solid var(--line);border-radius:12px;scrollbar-width:thin;scrollbar-color:var(--accent) var(--soft); }
.batch-import-preview-wrap h3 { position:sticky;z-index:3;top:0;left:0;margin:0;padding:12px;background:var(--soft); }
.batch-import-preview { width:100%;border-collapse:collapse;white-space:nowrap; }
.batch-import-preview th,.batch-import-preview td { max-width:320px;padding:9px 12px;border-top:1px solid var(--line);overflow:hidden;text-align:left;text-overflow:ellipsis; }
.batch-import-preview th { position:sticky;z-index:2;top:44px;background:var(--soft);color:var(--muted);font-size:.76rem;text-transform:uppercase; }
.batch-import-actions { display:flex;justify-content:flex-end;gap:10px;margin-top:16px; }
.batch-import-result { margin-top:16px;padding:14px;border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line));border-radius:12px;background:color-mix(in srgb,var(--paper) 92%,var(--accent)); }
.batch-import-result-head { display:flex;align-items:center;justify-content:space-between;gap:12px; }
.batch-import-result-head > div { display:grid;gap:3px; }
.batch-import-result-head span { color:var(--muted);font-size:.85rem; }
.batch-import-issues { display:grid;gap:7px;max-height:300px;margin-top:12px;overflow:auto; }
.batch-import-issues article { display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 10px;border:1px solid var(--line);border-radius:9px;background:var(--paper); }
.batch-import-issues article span { display:grid;gap:2px;min-width:0; }
.batch-import-issues article small { color:var(--muted); }
.batch-import-pending { width:min(1180px,100%);margin:16px auto 0;padding:18px;border:1px solid var(--line);border-radius:16px;background:var(--paper);box-shadow:0 10px 28px rgba(23,33,43,.09); }
.batch-pending-head { display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px; }
.batch-pending-head h2 { margin:3px 0 0; }
.batch-pending-head h2 span { display:inline-grid;min-width:25px;height:25px;place-items:center;border-radius:20px;background:var(--accent);color:var(--accent-contrast,#fff);font-size:.75rem;vertical-align:middle; }
#batch-pending-list { display:grid;gap:9px;max-height:min(62vh,620px);padding-right:5px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--accent) var(--soft); }
.batch-pending-item { padding:12px;border:1px solid var(--line);border-radius:11px;background:var(--soft); }
.batch-pending-item header,.batch-pending-item footer { display:flex;align-items:center;justify-content:space-between;gap:10px; }
.batch-pending-item header span { display:grid;gap:2px; }
.batch-pending-item header small { color:var(--muted); }
.batch-pending-item header em { padding:4px 8px;border-radius:20px;background:color-mix(in srgb,var(--accent) 18%,var(--paper));color:var(--accent);font-size:.75rem;font-style:normal;font-weight:700; }
.batch-pending-item > p { margin:9px 0;color:var(--ink); }
.batch-pending-values { display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px; }
.batch-pending-values span { display:flex;gap:5px;max-width:100%;padding:5px 8px;border:1px solid var(--line);border-radius:7px;background:var(--paper);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.78rem; }
.batch-pending-item footer { justify-content:flex-end; }

html[data-theme="dark"] .batch-import-panel { background:#20211e;color:#f5ead5; }
html[data-theme="dark"] .import-template-tools { background:#272824; }
html[data-theme="dark"] .import-mode-options label { background:#20211e; }
html[data-theme="dark"] .batch-import-result,html[data-theme="dark"] .batch-import-issues article,html[data-theme="dark"] .batch-import-pending { background:#272824; }

/* Notifications keep readable semantic colors independently of project colors. */
.toast {
  z-index:160;
  border:1px solid rgba(255,255,255,.18);
  border-left:4px solid #54c98b;
  background:#202a25;
  color:#f8fff9;
  box-shadow:0 14px 36px rgba(8,14,11,.3);
  font-weight:700;
  line-height:1.4;
}
.toast.error-toast {
  border-color:rgba(255,255,255,.16);
  border-left-color:#ff9189;
  background:#802f2c;
  color:#fff7f6;
}
html[data-theme="dark"] .toast {
  border-color:#475249;
  border-left-color:#65d99b;
  background:#202620;
  color:#f5f1e7;
  box-shadow:0 16px 40px rgba(0,0,0,.52);
}
html[data-theme="dark"] .toast.error-toast {
  border-color:#74423f;
  border-left-color:#ff8c84;
  background:#4b2422;
  color:#fff1ef;
}
html[data-theme="dark"] .duplicate-authorization-prompt {
  border-color:color-mix(in srgb,var(--accent) 55%,#4a5046);
  background:#20231e;
  color:#f5ead5;
  box-shadow:0 18px 50px rgba(0,0,0,.58);
}
html[data-theme="dark"] .duplicate-authorization-prompt p small { color:#b9b09f; }
html[data-theme="dark"] .duplicate-authorization-prompt .secondary {
  border-color:#4a5046;
  background:#171a16;
  color:#f5ead5;
}
html[data-theme="dark"] .edit-conflict-banner {
  border-color:#8c6933;
  background:#392e1c;
  color:#ffe3ad;
}
html[data-theme="dark"] .edit-conflict-banner .secondary {
  border-color:#806238;
  background:#211c13;
  color:#ffe3ad;
}
html[data-theme="dark"] .batch-import-result,
html[data-theme="dark"] .batch-import-pending,
html[data-theme="dark"] .batch-import-issues article,
html[data-theme="dark"] .batch-pending-item {
  border-color:#474c43;
  background:#20231e;
  color:#f5ead5;
}
html[data-theme="dark"] .batch-pending-values span {
  border-color:#474c43;
  background:#171a16;
  color:#f5ead5;
}

/* Dark task modal: final component-scoped normalization over legacy card rules. */
html[data-theme="dark"] #card-modal.fb-task-modal .collab-card,
html[data-theme="dark"] #card-modal.fb-task-modal .fb-task-main {
  --ink:#f5ead5;
  --canvas:#181916;
  border-color:#41443d;
  background:#1c1d1a;
  color:#f5ead5;
}
html[data-theme="dark"] #card-modal.fb-task-modal .card-editor-sticky {
  border-color:#41443d;
  background:color-mix(in srgb,#1c1d1a 96%,transparent);
}
html[data-theme="dark"] #card-modal.fb-task-modal .title-input,
html[data-theme="dark"] #card-modal.fb-task-modal .description-field textarea,
html[data-theme="dark"] #card-modal.fb-task-modal .check-island textarea,
html[data-theme="dark"] #card-modal.fb-task-modal .check-item textarea,
html[data-theme="dark"] #card-modal.fb-task-modal .new-section textarea {
  border-color:#45483f;
  background:#20211e;
  color:#f5ead5;
}
html[data-theme="dark"] #card-modal.fb-task-modal .description-field,
html[data-theme="dark"] #card-modal.fb-task-modal .card-creation-row,
html[data-theme="dark"] #card-modal.fb-task-modal .card-details-row,
html[data-theme="dark"] #card-modal.fb-task-modal .card-custom-fields,
html[data-theme="dark"] #card-modal.fb-task-modal .checklist-title,
html[data-theme="dark"] #card-modal.fb-task-modal #checklist,
html[data-theme="dark"] #card-modal.fb-task-modal .new-section,
html[data-theme="dark"] #card-modal.fb-task-modal .files-heading,
html[data-theme="dark"] #card-modal.fb-task-modal #card-files {
  border-color:#41443d;
  background:#20211e;
  color:#f5ead5;
}
html[data-theme="dark"] #card-modal.fb-task-modal .file-filter-menu > summary,
html[data-theme="dark"] #card-modal.fb-task-modal .file-sort-menu > summary,
html[data-theme="dark"] #card-modal.fb-task-modal .file-actions-menu > summary,
html[data-theme="dark"] #card-modal.fb-task-modal .file-download-menu > summary {
  border-color:#50534a;
  background:#292b26;
  color:#f5ead5;
}
html[data-theme="dark"] #card-modal.fb-task-modal .file-type-options,
html[data-theme="dark"] #card-modal.fb-task-modal .file-sort-options,
html[data-theme="dark"] #card-modal.fb-task-modal .file-actions-options,
html[data-theme="dark"] #card-modal.fb-task-modal .file-download-options {
  border-color:#50534a;
  background:#20211e;
  color:#f5ead5;
  box-shadow:0 14px 34px rgba(0,0,0,.45);
}
html[data-theme="dark"] #card-modal.fb-task-modal .file-type-options label,
html[data-theme="dark"] #card-modal.fb-task-modal .file-sort-options button,
html[data-theme="dark"] #card-modal.fb-task-modal .file-actions-options button,
html[data-theme="dark"] #card-modal.fb-task-modal .file-download-options a { color:#f5ead5; }
html[data-theme="dark"] #card-modal.fb-task-modal .file-sort-options button:hover,
html[data-theme="dark"] #card-modal.fb-task-modal .file-sort-options button.active,
html[data-theme="dark"] #card-modal.fb-task-modal .file-actions-options button:hover,
html[data-theme="dark"] #card-modal.fb-task-modal .file-actions-options button.active,
html[data-theme="dark"] #card-modal.fb-task-modal .file-download-options a:hover { background:color-mix(in srgb,var(--accent) 18%,#292b26);color:#fff; }
html[data-theme="dark"] #card-modal.fb-task-modal #checklist {
  background:#181916;
}
html[data-theme="dark"] #card-modal.fb-task-modal .compact-field,
html[data-theme="dark"] #card-modal.fb-task-modal .compact-popover > summary,
html[data-theme="dark"] #card-modal.fb-task-modal .compact-popover-panel,
html[data-theme="dark"] #card-modal.fb-task-modal .section-tool-panel,
html[data-theme="dark"] #card-modal.fb-task-modal .task-planning-popover {
  border-color:#45483f;
  background:#20211e;
  color:#f5ead5;
  box-shadow:0 14px 34px rgba(0,0,0,.4);
}
html[data-theme="dark"] #card-modal.fb-task-modal .compact-popover > summary b,
html[data-theme="dark"] #card-modal.fb-task-modal .compact-field b,
html[data-theme="dark"] #card-modal.fb-task-modal h2,
html[data-theme="dark"] #card-modal.fb-task-modal h3,
html[data-theme="dark"] #card-modal.fb-task-modal h4 {
  color:#f5ead5;
}
html[data-theme="dark"] #card-modal.fb-task-modal .check-island {
  border-color:#4a4d44;
  border-left-color:var(--accent);
  background:#20211e;
  color:#f5ead5;
  box-shadow:0 7px 18px rgba(0,0,0,.25);
}
html[data-theme="dark"] #card-modal.fb-task-modal .check-item {
  border-color:#45483f;
  background:#191a18;
  color:#f5ead5;
  box-shadow:0 3px 10px rgba(0,0,0,.28);
}
html[data-theme="dark"] #card-modal.fb-task-modal .check-item textarea:focus {
  border-color:var(--accent);
  background:#242620;
}
html[data-theme="dark"] #card-modal.fb-task-modal .inactive-tasks,
html[data-theme="dark"] #card-modal.fb-task-modal .inactive-sections {
  border-color:#51544b;
  background:#292b26;
  color:#b8ad98;
}
html[data-theme="dark"] #card-modal.fb-task-modal .section-tool > summary {
  border-color:#4a4d44;
  background:#292b26;
  color:#f5ead5;
}
html[data-theme="dark"] #card-modal.fb-task-modal .task-trash,
html[data-theme="dark"] #card-modal.fb-task-modal .icon-danger {
  border-color:#74413f;
  background:#3a2321;
  color:#ff777e;
}
html[data-theme="dark"] #card-modal.fb-task-modal .card-save-footer {
  border-color:#41443d;
  background:color-mix(in srgb,#20211e 96%,transparent)!important;
  color:#f5ead5;
}
html[data-theme="dark"] #card-modal.fb-task-modal .fb-task-chat,
html[data-theme="dark"] #card-modal.fb-task-modal .card-chat {
  border-color:#41443d;
  background:#181916;
  color:#f5ead5;
}
html[data-theme="dark"] #card-modal.fb-task-modal .chat-head,
html[data-theme="dark"] #card-modal.fb-task-modal .chat-history-actions,
html[data-theme="dark"] #card-modal.fb-task-modal .chat-compose {
  border-color:#41443d;
  background:#20211e;
  color:#f5ead5;
}
html[data-theme="dark"] #card-modal.fb-task-modal #chat-messages {
  background:#181916;
}
html[data-theme="dark"] #card-modal.fb-task-modal #chat-message-list > .chat-message,
html[data-theme="dark"] #card-modal.fb-task-modal #chat-message-list > .chat-message.tone-white {
  border-color:#45483f;
  background:#242520;
  color:#f5ead5;
}
html[data-theme="dark"] #card-modal.fb-task-modal #chat-message-list > .chat-message.mine,
html[data-theme="dark"] #card-modal.fb-task-modal #chat-message-list > .chat-message.tone-theme {
  border-color:color-mix(in srgb,var(--accent) 42%,#45483f);
  background:color-mix(in srgb,var(--accent) 14%,#242520);
  color:#f5ead5;
}
html[data-theme="dark"] #card-modal.fb-task-modal .section-comments p,
html[data-theme="dark"] #card-modal.fb-task-modal .section-comments .section-comment {
  border-color:#45483f;
  background:#242520;
  color:#f5ead5;
}
html[data-theme="dark"] #card-modal.fb-task-modal .rich-editor,
html[data-theme="dark"] #card-modal.fb-task-modal .rich-toolbar,
html[data-theme="dark"] #card-modal.fb-task-modal .rich-toolbar button,
html[data-theme="dark"] #card-modal.fb-task-modal .chat-pending-item,
html[data-theme="dark"] #card-modal.fb-task-modal .voice-recording-live {
  border-color:#45483f;
  background:#191a18;
  color:#f5ead5;
}
html[data-theme="dark"] #card-modal.fb-task-modal .chat-pending {
  background:color-mix(in srgb,var(--accent) 8%,#191a18);
}
html[data-theme="dark"] #card-modal.fb-task-modal .chat-voice-note { border-color:#50534a;background:#191a18; }
html[data-theme="dark"] #card-modal.fb-task-modal .chat-voice-note b { color:#f5ead5; }

/* Compact mobile task summary: due/assignees, then status/label/color. */
@media (max-width:820px) {
  #card-modal.fb-task-modal .fb-task-main { display:block; }
  #card-modal.fb-task-modal .fb-task-description { margin-top:10px; }
  #card-modal.fb-task-modal .fb-task-meta-row { display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:stretch;gap:8px;margin-top:9px; }
  #card-modal.fb-task-modal .fb-task-meta-row .card-created-detail { display:none; }
  #card-modal.fb-task-modal .fb-task-meta-row > .fb-task-due,
  #card-modal.fb-task-modal .fb-task-meta-row > .fb-task-assignees { width:100%;min-width:0;margin:0; }
  #card-modal.fb-task-modal .fb-task-meta-row > details > summary { width:100%;height:44px;min-height:44px;box-sizing:border-box; }
  #card-modal.fb-task-modal .fb-task-meta-row .fb-task-due > summary { justify-content:flex-start;text-align:left; }
  #card-modal.fb-task-modal .fb-task-meta-row .fb-task-due > summary::before { content:"";width:18px;height:18px;flex:0 0 18px;background:currentColor;mask:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='5' width='18' height='16' rx='2' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M8 3v4M16 3v4M3 10h18' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
  #card-modal.fb-task-modal .fb-task-meta-row .fb-task-assignees > summary > span { width:20px;flex:0 0 20px;overflow:hidden;font-size:0; }
  #card-modal.fb-task-modal .fb-task-meta-row .fb-task-assignees > summary > span::before { content:"";display:block;width:20px;height:20px;background:currentColor;mask:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='9' cy='8' r='3' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M3.5 19c.5-4 2.2-6 5.5-6s5 2 5.5 6M16 6.5a3 3 0 0 1 0 5.8M16 14c2.7.2 4.1 1.9 4.5 5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
  #card-modal.fb-task-modal .fb-task-planning-row,
  #card-modal.fb-task-modal .card-details-row { display:grid;grid-template-columns:minmax(0,1.25fr) minmax(64px,.8fr) minmax(76px,.85fr);grid-auto-rows:44px;align-items:stretch;gap:8px;margin-top:9px; }
  #card-modal.fb-task-modal .fb-task-planning-row > *,
  #card-modal.fb-task-modal .fb-task-planning-row > .compact-field,
  #card-modal.fb-task-modal .fb-task-planning-row > details > summary { width:100%;min-width:0;height:44px;min-height:44px;margin:0;box-sizing:border-box; }
  #card-modal.fb-task-modal .fb-task-planning-row .fb-task-column > summary { min-height:44px;height:44px; }
  #card-modal.fb-task-modal .fb-task-label > span,
  #card-modal.fb-task-modal .fb-task-color > summary > span { position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap; }
  #card-modal.fb-task-modal .fb-task-label select { width:100%;height:100%;padding:0 8px;text-align:center; }
  #card-modal.fb-task-modal .fb-task-color > summary { justify-content:center;padding:5px; }
  #card-modal.fb-task-modal .fb-task-color #card-color-swatch { width:100%;height:30px;min-width:0;border-radius:7px; }
}

#admin-list-modal.user-management-open { padding:8px; }
.fb-app-shell.admin-mode .fb-project-header,
.fb-app-shell.admin-mode .fb-project-main > nav { display:none!important; }
.fb-app-shell.admin-mode .fb-project-main { min-height:0; }
.fb-app-shell.admin-mode .fb-project-workspace { min-height:calc(100dvh - 66px);margin:0;border-radius:0; }
.fb-app-shell.admin-mode .fb-project-workspace > .workspace-background { display:none; }
.fb-app-shell.admin-mode .fb-project-workspace > .workspace-content { min-height:calc(100dvh - 66px);padding:18px;background:var(--canvas); }
.fb-app-shell.admin-mode .fb-admin-view { margin:0; }
#admin-list-modal.user-management-open > .modal { width:min(1180px,98vw);max-height:96dvh;padding:18px;background:#0e171d;overflow:auto; }
#admin-list-modal.user-management-open > .modal > .eyebrow,#admin-list-modal.user-management-open > .modal > #admin-list-title { display:none; }
.admin-users-heading { display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:18px; }
.admin-users-heading h2 { margin:2px 0;font-size:26px; }
.admin-users-heading p { margin:0;color:var(--muted); }
.admin-users-filters { display:grid;grid-template-columns:minmax(250px,1.6fr) repeat(3,minmax(115px,.55fr)) auto;align-items:end;gap:10px;margin-bottom:14px; }
.admin-users-search { height:42px;display:flex;flex-direction:row;align-items:center;gap:8px;padding:0 11px;border:1px solid var(--line);border-radius:8px; }
.admin-users-search input { width:100%;height:38px;padding:0;border:0;background:transparent; }
.admin-users-filters select { height:42px; }
.admin-users-filters > b { align-self:center;white-space:nowrap;color:var(--muted);font-size:11px; }
.admin-users-table-head,.admin-user-summary { display:grid;grid-template-columns:1.1fr 1.1fr 1.25fr .8fr .75fr .7fr .9fr 38px;align-items:center;gap:9px; }
.admin-users-table-head { padding:10px 14px;color:var(--muted);font-size:10px;font-weight:800; }
.admin-user-entry { border:1px solid var(--line);border-radius:9px;margin-bottom:7px;overflow:hidden;background:var(--paper); }
.admin-user-entry.filtered-out { display:none; }
.admin-user-entry.expanded { border-color:var(--accent);box-shadow:0 0 0 1px var(--accent); }
.admin-user-summary { width:100%;min-height:54px;padding:8px 12px;border:0;background:transparent;color:var(--ink);text-align:left;cursor:pointer; }
.admin-user-summary > span { min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px; }
.admin-user-summary > i { font-style:normal;text-align:center; }
.admin-user-identity { display:flex!important;align-items:center;gap:8px; }
.admin-user-avatar { width:34px;height:34px;flex:0 0 34px;display:grid;place-items:center;border-radius:10px;overflow:hidden;font-size:20px; }
.admin-user-avatar img { width:100%;height:100%;object-fit:cover; }
.admin-role,.admin-status { display:inline-flex;padding:5px 8px;border-radius:7px;background:color-mix(in srgb,var(--accent) 14%,var(--soft));font-size:9px;font-style:normal; }
.admin-status.active { color:#34d399;background:rgba(16,185,129,.12); }
.admin-status.inactive { color:#fb7185;background:rgba(244,63,94,.12); }
.admin-user-entry .user-record { margin:0 10px 10px;padding:14px;border-color:color-mix(in srgb,var(--accent) 55%,var(--line));background:color-mix(in srgb,var(--accent) 4%,var(--canvas)); }
.admin-user-entry .user-record { grid-template-columns:110px repeat(3,minmax(140px,1fr));align-items:start;border-radius:10px; }
.admin-user-entry .user-record > .visual-editor { grid-column:1;grid-row:1 / span 3;width:90px;display:block;padding:0;border:0;background:transparent; }
.admin-user-entry .user-record > .visual-editor .visual-preview { width:88px;height:88px;min-height:88px;margin:0;border-color:color-mix(in srgb,var(--accent) 55%,var(--line));cursor:pointer;box-shadow:0 8px 20px rgba(0,0,0,.18); }
.admin-user-entry .user-record > .visual-editor .crop-controls { display:none!important; }
.admin-user-entry .user-record > label[data-emoji-field],.admin-user-entry .user-record > label[data-photo-field],.admin-user-entry .user-record > label:has([name="avatar_type"]),.admin-user-entry .user-record > label:has([name="avatar_background"]) { display:none!important; }
.admin-user-entry .user-record > .inline { align-self:center;min-height:42px; }
.admin-user-entry .user-record > small { grid-column:2 / -1;padding-top:10px;border-top:1px solid var(--line); }
.admin-user-entry .user-record > .record-actions { grid-column:2 / -1;display:flex;justify-content:flex-end;gap:8px; }
.admin-user-entry .user-record textarea,.admin-user-entry .user-record input,.admin-user-entry .user-record select { min-height:40px; }
.admin-user-entry.expanded .admin-user-summary { border-bottom:1px solid color-mix(in srgb,var(--accent) 45%,var(--line)); }
.admin-user-avatar-backdrop { z-index:120; }
.admin-user-avatar-modal { width:min(760px,95vw); }
.admin-avatar-types { display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0; }
.admin-avatar-types button { min-height:42px;border:1px solid var(--line);border-radius:9px;background:var(--paper);color:var(--muted);font-weight:800; }
.admin-avatar-types button.active { border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--paper));color:var(--accent); }
.admin-avatar-editor-grid { display:grid;grid-template-columns:minmax(260px,1fr) minmax(210px,.65fr);gap:20px; }
.admin-avatar-stage { width:min(100%,380px);aspect-ratio:1;display:grid;place-items:center;overflow:hidden;border:2px solid var(--accent);border-radius:22px;background:#273846; }
.admin-avatar-stage span { font-size:clamp(70px,18vw,150px); }
.admin-avatar-stage img { width:100%;height:100%;object-fit:cover; }
.admin-avatar-controls { display:grid;align-content:start;gap:11px; }
.admin-avatar-actions { display:flex;justify-content:flex-end;gap:8px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line); }
html[data-theme="dark"] .admin-user-avatar-modal,html[data-theme="dark"] .admin-avatar-types button { background:#171a1c;color:#f5ead5;border-color:#45483f; }
html[data-theme="dark"] #admin-list-modal.user-management-open > .modal,html[data-theme="dark"] .admin-user-entry { border-color:#263743;background:#0e171d;color:#e8eef2; }
html[data-theme="dark"] .admin-user-entry .user-record { background:#101b22;color:#e8eef2; }
@media (max-width:760px){.admin-users-heading{align-items:flex-start;flex-direction:column}.admin-users-filters{grid-template-columns:1fr 1fr}.admin-users-search{grid-column:1/-1}.admin-users-table-head{display:none}.admin-user-summary{grid-template-columns:1fr auto}.admin-user-summary>span:nth-child(n+3){display:none}.admin-user-entry .user-record{grid-template-columns:1fr}.admin-user-entry .user-record>.visual-editor,.admin-user-entry .user-record>small,.admin-user-entry .user-record>.record-actions{grid-column:1;grid-row:auto}.admin-users-heading .primary{width:100%}.admin-avatar-editor-grid{grid-template-columns:1fr}.admin-avatar-stage{max-width:300px;margin:auto}.admin-avatar-actions{flex-direction:column-reverse}.admin-avatar-actions button{width:100%}}
html[data-theme="dark"] #card-modal.fb-task-modal .chat-scroll-latest {
  border-color:#4a4d44;
  background:#292b26;
  color:var(--accent);
}
html[data-theme="dark"] #card-modal.fb-task-modal .file-tile,
html[data-theme="dark"] #card-modal.fb-task-modal .file-drop-zone {
  border-color:#45483f!important;
  background:#191a18;
  color:#f5ead5;
}
html[data-theme="dark"] #card-modal.fb-task-modal input::placeholder,
html[data-theme="dark"] #card-modal.fb-task-modal textarea::placeholder,
html[data-theme="dark"] #card-modal.fb-task-modal .rich-editor:empty::before {
  color:#9d9688;
}
@media (max-width:720px) {
  #import-view:not(.hidden) { padding:8px; }
  .batch-import-panel { padding:13px; }
  .batch-import-panel .panel-head,.batch-import-summary { grid-template-columns:1fr; }
  .import-mode-options,.import-template-choice { grid-template-columns:1fr; }
  .import-template-choice strong { justify-self:start;white-space:normal; }
  .batch-import-panel .panel-head { display:grid;gap:12px; }
  .batch-import-panel .upload-button { width:100%;justify-content:center; }
  .batch-import-result-head,.batch-import-issues article { align-items:stretch;flex-direction:column; }
  .batch-pending-head,.batch-pending-item header,.batch-pending-item footer { align-items:stretch;flex-direction:column; }
}

/* Administration workspace and URL-addressable section tabs. */
.fb-app-shell.admin-mode .fb-project-main {
  min-height:0;
  padding:4px 0 0;
  display:block;
}
.fb-app-shell.admin-mode .fb-project-workspace {
  height:calc(100dvh - 70px);
  min-height:0;
  margin:0;
  border-radius:0;
}
.fb-app-shell.admin-mode .fb-project-workspace > .workspace-content {
  height:100%;
  min-height:0;
  padding:10px 18px 18px;
}
#admin-view .admin-filters {
  grid-template-columns:minmax(0,1fr);
}
#admin-view .admin-filters > label { display:none; }

#admin-view .admin-filters > .admin-section-tabs { grid-column:1; }
#admin-view .admin-section-tabs {
  min-width:0;
  display:flex;
  align-items:flex-end;
  align-self:stretch;
  gap:4px;
  overflow-x:auto;
  border-bottom:1px solid var(--line);
  scrollbar-width:thin;
}
#admin-view .admin-section-tab {
  height:43px;
  min-width:max-content;
  margin:0;
  padding:0 12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  border:0;
  border-bottom:3px solid transparent;
  border-radius:8px 8px 0 0;
  background:transparent;
  color:var(--muted);
  font-weight:800;
  white-space:nowrap;
}
#admin-view .admin-section-tab > span { font-size:16px;line-height:1; }
#admin-view .admin-section-tab:hover,
#admin-view .admin-section-tab:focus-visible {
  color:var(--ink);
  background:color-mix(in srgb,var(--accent) 8%,transparent);
}
#admin-view .admin-section-tab.active {
  color:var(--accent);
  border-bottom-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 10%,transparent);
}
#admin-view .admin-section-hidden { display:none!important; }
#admin-view .admin-grid.admin-grid-empty { display:none; }
#admin-view .admin-grid:not(.admin-grid-empty) { grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr)); }
html[data-theme="dark"] #admin-view .admin-section-tab { background:transparent;color:#c7bcaa; }
html[data-theme="dark"] #admin-view .admin-section-tab.active { color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent); }
@media (max-width:1350px) {
  #admin-view .admin-filters { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #admin-view .admin-section-tabs { grid-column:1 / -1; }
}
@media (max-width:700px) {
  .fb-app-shell.admin-mode .fb-project-main { padding-top:2px; }
  .fb-app-shell.admin-mode .fb-project-workspace > .workspace-content { padding:8px 10px 14px; }
  #admin-view .admin-section-tab {
    flex:0 0 auto;
    width:auto!important;
  }
}
@media (max-width:430px) {
  #admin-view .admin-filters { grid-template-columns:minmax(0,1fr); }
  #admin-view .admin-section-tabs { grid-column:1; }
}

/* User management belongs to the Users administration tab, not to an overlay. */
#admin-view > #admin-list-modal.user-management-inline {
  position:static;
  inset:auto;
  z-index:auto;
  width:100%;
  height:auto;
  min-height:0;
  padding:0;
  display:block;
  overflow:visible;
  overscroll-behavior:auto;
  touch-action:pan-y;
  background:transparent;
  backdrop-filter:none;
}
#admin-view:not(.hidden) {
  height:100%;
  min-height:0;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:auto;
  scrollbar-gutter:stable;
  touch-action:pan-y;
}
#admin-view > #admin-list-modal.user-management-inline.hidden { display:none; }
#admin-view > #admin-list-modal.user-management-inline > .modal {
  position:static;
  width:100%;
  max-width:none;
  max-height:none;
  margin:0;
  padding:16px;
  overflow:visible;
  border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line));
  border-radius:12px;
  background:color-mix(in srgb,var(--paper) 96%,var(--accent) 4%);
  color:var(--ink);
  box-shadow:none;
}
#admin-view > #admin-list-modal.user-management-inline > .modal > .close,
#admin-view > #admin-list-modal.user-management-inline > .modal > .eyebrow,
#admin-view > #admin-list-modal.user-management-inline > .modal > #admin-list-title { display:none; }
#admin-view .admin-users-heading { margin-bottom:14px; }
#admin-view .admin-users-filters { margin-bottom:8px; }
#admin-view .admin-users-table-head {
  margin-top:0;
  border-bottom:1px solid color-mix(in srgb,var(--accent) 22%,var(--line));
  color:var(--muted);
}
#admin-view .admin-user-entry {
  border-color:color-mix(in srgb,var(--accent) 20%,var(--line));
  background:var(--paper);
  color:var(--ink);
}
#admin-view .admin-user-summary { color:var(--ink); }
#admin-view .admin-users-search,
#admin-view .admin-users-filters select {
  border-color:color-mix(in srgb,var(--accent) 22%,var(--line));
  background:var(--paper);
  color:var(--ink);
}
#admin-view .admin-user-entry .user-record {
  background:color-mix(in srgb,var(--paper) 94%,var(--accent) 6%);
  color:var(--ink);
}
html[data-theme="dark"] #admin-view > #admin-list-modal.user-management-inline > .modal,
html[data-theme="dark"] #admin-view .admin-user-entry,
html[data-theme="dark"] #admin-view .admin-user-entry .user-record {
  border-color:color-mix(in srgb,var(--accent) 32%,var(--line));
  background:color-mix(in srgb,var(--paper) 92%,var(--accent) 8%);
  color:var(--ink);
}
@media (max-width:760px) {
  #admin-view > #admin-list-modal.user-management-inline > .modal { padding:12px; }
}

/* Searchable multi-select filters for the embedded Users table. */
#admin-view .admin-users-heading { order:1; }
#admin-view .admin-users-filters { order:2; }
#admin-view .admin-users-table-head { order:3; }
#admin-view .admin-user-entry { order:4; }
#admin-view .admin-users-multiselect {
  position:relative;
  min-width:0;
}
#admin-view .admin-users-multiselect > summary {
  height:42px;
  min-width:0;
  padding:6px 10px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  align-items:center;
  gap:6px;
  border:1px solid color-mix(in srgb,var(--accent) 22%,var(--line));
  border-radius:8px;
  background:var(--paper);
  color:var(--ink);
  cursor:pointer;
  list-style:none;
}
#admin-view .admin-users-multiselect > summary::-webkit-details-marker { display:none; }
#admin-view .admin-users-multiselect > summary span { overflow:hidden;text-overflow:ellipsis;color:var(--muted);font-size:10px;font-weight:800; }
#admin-view .admin-users-multiselect > summary b { overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px; }
#admin-view .admin-users-multiselect > summary i { color:var(--muted);font-style:normal;transition:transform .18s ease; }
#admin-view .admin-users-multiselect[open] > summary,
#admin-view .admin-users-multiselect.has-selection > summary { border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 14%,transparent); }
#admin-view .admin-users-multiselect[open] > summary i { transform:rotate(180deg); }
#admin-view .admin-users-filter-panel {
  position:absolute;
  z-index:45;
  top:calc(100% + 6px);
  left:0;
  width:max(100%,240px);
  max-width:min(330px,calc(100vw - 28px));
  padding:9px;
  display:grid;
  gap:8px;
  border:1px solid color-mix(in srgb,var(--accent) 34%,var(--line));
  border-radius:10px;
  background:var(--paper);
  color:var(--ink);
  box-shadow:0 16px 38px color-mix(in srgb,var(--ink) 20%,transparent);
}
#admin-view .admin-users-filter-panel > label { display:grid;gap:4px;color:var(--muted);font-size:10px;font-weight:800; }
#admin-view .admin-users-filter-panel input[type="search"] { width:100%;height:36px;background:var(--canvas);color:var(--ink); }
#admin-view .admin-users-filter-options { max-height:220px;display:grid;gap:5px;overflow-y:auto;overscroll-behavior:contain; }
#admin-view .admin-users-filter-options > label {
  min-height:36px;
  padding:7px 9px;
  display:flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--line);
  border-radius:8px;
  background:color-mix(in srgb,var(--paper) 92%,var(--accent) 8%);
  color:var(--ink);
  cursor:pointer;
  font-size:11px;
}
#admin-view .admin-users-filter-options > label:has(input:checked) { border-color:var(--accent);background:color-mix(in srgb,var(--accent) 16%,var(--paper)); }
#admin-view .admin-users-filter-options input { width:16px;height:16px;accent-color:var(--accent); }
#admin-view .admin-users-filter-panel > button { min-height:34px;border:1px solid var(--line);border-radius:8px;background:var(--soft);color:var(--ink);font-weight:800; }
@media (max-width:760px) {
  #admin-view .admin-users-multiselect { min-width:0; }
  #admin-view .admin-users-filter-panel { position:fixed;z-index:140;top:50%;left:50%;width:min(360px,calc(100vw - 24px));max-height:70dvh;transform:translate(-50%,-50%); }
}

/* Readable user rows and the established square visual identity. */
#admin-view .admin-users-heading h2 { font-size:clamp(28px,2.2vw,36px);line-height:1.05; }
#admin-view .admin-users-heading p { font-size:14px;line-height:1.45; }
#admin-view .admin-users-table-head { padding:12px 14px;font-size:11px;letter-spacing:.015em; }
#admin-view .admin-user-summary { min-height:64px;padding:10px 13px; }
#admin-view .admin-user-summary > span { font-size:13px; }
#admin-view .admin-user-identity { gap:11px; }
#admin-view .admin-user-identity > b { font-size:13px; }
#admin-view .admin-user-avatar {
  width:42px;
  height:42px;
  flex-basis:42px;
  border:1px solid color-mix(in srgb,var(--accent) 38%,var(--line));
  border-radius:11px;
  background:color-mix(in srgb,var(--accent) 12%,var(--paper));
  font-size:24px;
}
#admin-view .admin-role,
#admin-view .admin-status { min-height:26px;align-items:center;padding:6px 10px;border-radius:999px;font-size:10px;font-weight:800; }
#admin-view .admin-status.active { color:#087a4b;background:#d9f8e9;border:1px solid #a6e9c9; }
#admin-view .admin-status.inactive { color:#b4233c;background:#ffe1e6;border:1px solid #ffc0cb; }
html[data-theme="dark"] #admin-view .admin-status.active { color:#84f0bd;background:#123e2c;border-color:#216747; }
html[data-theme="dark"] #admin-view .admin-status.inactive { color:#ff9cac;background:#4b2029;border-color:#783542; }
#admin-view .admin-user-active-switch {
  min-height:44px;
  padding:6px 10px;
  display:flex!important;
  align-items:center;
  gap:10px;
  border:1px solid var(--line);
  border-radius:9px;
  background:var(--paper);
  color:var(--ink);
  font-size:12px;
  font-weight:800;
  cursor:pointer;
}
#admin-view .admin-user-active-switch input[type="checkbox"],
.company-list-active-toggle,
.fb-company-create-modal .fb-company-modal-state input[role="switch"] {
  position:relative;
  width:42px;
  min-width:42px;
  height:24px;
  min-height:24px;
  margin:0;
  appearance:none;
  border:1px solid color-mix(in srgb,var(--muted) 55%,var(--line));
  border-radius:999px;
  background:color-mix(in srgb,var(--muted) 28%,var(--soft));
  cursor:pointer;
  transition:.2s ease;
}
#admin-view .admin-user-active-switch input[type="checkbox"]::after,
.company-list-active-toggle::after,
.fb-company-create-modal .fb-company-modal-state input[role="switch"]::after {
  content:"";
  position:absolute;
  top:2px;
  left:2px;
  width:18px;
  height:18px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.22);
  transition:transform .2s ease;
}
#admin-view .admin-user-active-switch input[type="checkbox"]:checked,
.company-list-active-toggle:checked,
.fb-company-create-modal .fb-company-modal-state input[role="switch"]:checked { border-color:var(--accent);background:var(--accent); }
#admin-view .admin-user-active-switch input[type="checkbox"]:checked::after,
.company-list-active-toggle:checked::after,
.fb-company-create-modal .fb-company-modal-state input[role="switch"]:checked::after { transform:translateX(18px); }
#admin-view .admin-user-password-action {
  min-height:46px;
  padding:7px 11px;
  display:inline-flex;
  align-items:center;
  gap:9px;
  text-align:left;
  border-color:color-mix(in srgb,var(--accent) 35%,var(--line));
}
#admin-view .admin-user-password-action > span:first-child {
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:color-mix(in srgb,var(--accent) 16%,var(--paper));
  font-size:15px;
}
#admin-view .admin-user-password-action b,
#admin-view .admin-user-password-action small { display:block; }
#admin-view .admin-user-password-action b { color:var(--ink);font-size:11px; }
#admin-view .admin-user-password-action small { margin-top:2px;color:var(--muted);font-size:9px; }
@media (max-width:760px) {
  #admin-view .admin-user-summary { min-height:62px; }
  #admin-view .admin-user-avatar { width:40px;height:40px;flex-basis:40px; }
}
#admin-view .admin-password-key svg { width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;color:var(--accent); }

/* Users: neutral surfaces, accent borders and expanded fluorescent depth. */
#admin-view > #admin-list-modal.user-management-inline > .modal,
#admin-view .admin-user-entry,
#admin-view .admin-user-entry .user-record,
#admin-view .admin-user-password-panel { background:var(--paper);color:var(--ink); }
#admin-view .admin-user-entry { border-color:color-mix(in srgb,var(--accent) 58%,var(--line)); }
html[data-theme="dark"] #admin-view > #admin-list-modal.user-management-inline > .modal,
html[data-theme="dark"] #admin-view .admin-user-entry,
html[data-theme="dark"] #admin-view .admin-user-entry .user-record,
html[data-theme="dark"] #admin-view .admin-user-password-panel { background:var(--paper);color:var(--ink); }
#admin-view .admin-user-summary { min-height:70px; }
#admin-view .admin-user-avatar { width:48px;height:48px;flex-basis:48px;border-radius:12px;font-size:28px; }
#admin-view .admin-user-entry.expanded { position:relative;isolation:isolate;overflow:hidden;border-color:var(--accent);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 48%,transparent); }
#admin-view .admin-user-entry.expanded::before { display:none; }
#admin-view .admin-user-entry.expanded .user-record { position:relative;isolation:isolate;overflow:hidden;background:var(--paper); }
#admin-view .admin-user-entry.expanded .user-record::before { content:"";position:absolute;z-index:-1;top:-45px;left:12%;width:76%;height:150px;pointer-events:none;background:radial-gradient(ellipse at top,color-mix(in srgb,var(--accent) 15%,transparent) 0%,color-mix(in srgb,var(--accent) 6%,transparent) 46%,transparent 76%);filter:blur(12px); }
#admin-view .admin-user-entry.expanded .user-record > * { position:relative;z-index:1; }
#admin-view .admin-user-entry .user-record > .visual-editor { width:116px; }
#admin-view .admin-user-entry .user-record > .visual-editor .visual-preview { width:112px;height:112px;min-height:112px;border-width:2px;border-radius:16px;background:var(--paper); }
#admin-view .admin-user-password-panel { grid-column:1 / -1;min-width:0;padding:12px;display:grid;grid-template-columns:minmax(190px,.8fr) repeat(2,minmax(170px,1fr)) auto;align-items:end;gap:10px;border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line));border-radius:10px; }
#admin-view .admin-user-password-title { min-height:42px;display:flex;align-items:center;gap:10px; }
#admin-view .admin-user-password-title > span:first-child { width:34px;height:34px;display:grid;place-items:center;border-radius:9px;background:color-mix(in srgb,var(--accent) 16%,var(--paper));font-size:17px; }
#admin-view .admin-user-password-title b,#admin-view .admin-user-password-title small { display:block; }
#admin-view .admin-user-password-title b { font-size:12px;color:var(--ink); }
#admin-view .admin-user-password-title small { margin-top:3px;font-size:9px;color:var(--muted); }
#admin-view .admin-user-password-panel > label { min-width:0;display:grid;gap:5px;color:var(--muted);font-size:10px;font-weight:800; }
#admin-view .admin-user-password-panel input { width:100%;height:42px; }
#admin-view .admin-user-password-panel > .admin-user-password-action { height:42px;white-space:nowrap;text-align:center; }
@media (max-width:760px) {
  #admin-view .admin-user-avatar { width:44px;height:44px;flex-basis:44px; }
  #admin-view .admin-user-entry .user-record > .visual-editor { width:100%; }
  #admin-view .admin-user-entry .user-record > .visual-editor .visual-preview { width:104px;height:104px;min-height:104px; }
  #admin-view .admin-user-password-panel { grid-template-columns:1fr; }
  #admin-view .admin-user-password-panel > .admin-user-password-action { width:100%; }
}

/* Match the card-label picker: compact list, accent selection and inline clear. */
#admin-view .admin-users-filter-panel { position:absolute; }
#admin-view .admin-users-filter-panel > label { position:relative; }
#admin-view .admin-users-filter-panel input[type="search"] { padding-right:40px; }
#admin-view .admin-users-filter-panel > button[data-clear-user-filter] {
  position:absolute;
  z-index:2;
  top:13px;
  right:13px;
  width:28px;
  min-width:28px;
  height:28px;
  min-height:28px;
  padding:0;
  display:grid;
  place-items:center;
  overflow:hidden;
  border:0;
  border-radius:7px;
  background:transparent;
  color:var(--muted);
  font-size:0;
  cursor:pointer;
}
#admin-view .admin-users-filter-panel > button[data-clear-user-filter]::before { content:"×";font-size:20px;line-height:1; }
#admin-view .admin-users-filter-panel > button[data-clear-user-filter]:hover,
#admin-view .admin-users-filter-panel > button[data-clear-user-filter]:focus-visible { background:color-mix(in srgb,var(--accent) 13%,var(--paper));color:var(--accent); }
#admin-view .admin-users-filter-options { gap:6px; }
#admin-view .admin-users-filter-options > label {
  min-height:40px;
  display:grid;
  grid-template-columns:18px minmax(0,1fr);
  align-items:center;
  text-align:left;
  transition:background .16s ease,border-color .16s ease,color .16s ease;
}
#admin-view .admin-users-filter-options > label:hover { border-color:color-mix(in srgb,var(--accent) 55%,var(--line));background:color-mix(in srgb,var(--accent) 9%,var(--paper)); }
#admin-view .admin-users-filter-options > label:has(input:checked) {
  border-color:var(--accent);
  background:var(--accent);
  color:var(--accent-contrast,#fff);
  box-shadow:0 5px 13px color-mix(in srgb,var(--accent) 20%,transparent);
}
#admin-view .admin-users-filter-options > label:has(input:checked) input { accent-color:var(--accent-contrast,#fff); }
#admin-view .admin-users-filter-options > label:has(input:checked) span { color:inherit;font-weight:800; }
#admin-view .admin-users-filter-panel > label {
  display:block;
  font-size:0;
}
#admin-view .admin-users-filter-panel > label input[type="search"] {
  display:block;
  font-size:11px;
}
#admin-view .admin-users-filter-options > label {
  grid-template-columns:minmax(0,1fr);
  justify-items:start;
  padding:9px 11px;
}
#admin-view .admin-users-filter-options > label input[type="checkbox"] {
  position:absolute;
  width:1px;
  height:1px;
  min-height:0;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
}
#admin-view .admin-users-filter-options > label span { width:100%; }
#admin-view .admin-users-filter-options > label:has(input:focus-visible) { outline:2px solid var(--accent);outline-offset:1px; }
#admin-view .admin-users-multiselect {
  padding-top:18px;
}
#admin-view .admin-users-multiselect > summary {
  position:relative;
  height:43px;
  padding:0 12px;
  grid-template-columns:minmax(0,1fr) 18px;
  gap:8px;
  border-color:var(--line);
  border-radius:8px;
  background:var(--paper);
  box-shadow:none;
}
#admin-view .admin-users-multiselect > summary span {
  position:absolute;
  left:0;
  bottom:calc(100% + 6px);
  color:var(--muted);
  font-size:10px;
  font-weight:800;
  line-height:1;
}
#admin-view .admin-users-multiselect > summary b {
  grid-column:1;
  justify-self:start;
  color:var(--ink);
  font-size:11px;
}
#admin-view .admin-users-multiselect > summary i {
  grid-column:2;
  justify-self:end;
  width:14px;
  height:14px;
  display:grid;
  place-items:center;
  color:var(--ink);
  font-size:0;
}
#admin-view .admin-users-multiselect > summary i::before {
  content:"";
  width:6px;
  height:6px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
  border-radius:1px;
}
#admin-view .admin-users-multiselect[open] > summary,
#admin-view .admin-users-multiselect.has-selection > summary {
  border-color:var(--line);
  box-shadow:none;
}
#admin-view .admin-users-multiselect > summary:hover,
#admin-view .admin-users-multiselect > summary:focus-visible {
  border-color:color-mix(in srgb,var(--accent) 55%,var(--line));
  box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 10%,transparent);
}
#admin-view .admin-users-multiselect[open] > summary {
  border-color:var(--accent);
}

/* User editor: only the three identity text fields share the reference height. */
#admin-view .admin-user-entry .user-record > label:has([name="username"]),
#admin-view .admin-user-entry .user-record > label:has([name="name"]),
#admin-view .admin-user-entry .user-record > label:has([name="email"]) {
  min-width:0;
  display:grid;
  grid-template-rows:auto 42px;
  align-content:start;
  gap:6px;
}
#admin-view .admin-user-entry .user-record [name="username"],
#admin-view .admin-user-entry .user-record textarea[name="name"],
#admin-view .admin-user-entry .user-record [name="email"] {
  width:100%;
  height:42px;
  min-height:42px;
  max-height:42px;
  margin:0;
  padding:10px 11px;
  box-sizing:border-box;
  overflow:hidden;
  resize:none;
}
#admin-view .admin-user-entry .user-record textarea[name="name"] {
  white-space:pre-wrap;
}
#admin-view .admin-user-active-switch {
  min-height:0;
  padding:0;
  display:grid!important;
  grid-template-rows:auto 42px;
  align-content:start;
  gap:6px;
  border:0;
  border-radius:0;
  background:transparent;
}
#admin-view .admin-user-state-title {
  color:var(--muted);
  font-size:10px;
  font-weight:800;
  line-height:1.2;
}
#admin-view .admin-user-state-control {
  min-width:0;
  height:42px;
  padding:0 11px;
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid var(--line);
  border-radius:7px;
  background:var(--paper);
}
#admin-view .admin-user-state-value { color:var(--ink);font-size:11px;font-weight:800; }
#admin-view .admin-user-active-switch.is-inactive .admin-user-state-value { color:var(--muted); }
@media (max-width:760px) {
  #admin-view .admin-users-filter-panel { position:fixed; }
}
/* Shared visual identity editor, inline user creation, and login appearance control. */
.login-theme-toggle{position:fixed;top:18px;right:20px;z-index:5;background:var(--paper);color:var(--ink);border:1px solid var(--line);box-shadow:0 6px 20px rgba(18,27,35,.12)}
.project-icon-stage span{width:100%;height:100%;display:grid;place-items:center;line-height:1;pointer-events:none;will-change:transform}
#password-modal[data-forced="1"] .close{display:none}
#admin-view .admin-user-create-inline{display:grid;grid-template-columns:116px repeat(3,minmax(160px,1fr));gap:12px;align-items:start;margin:4px 0 18px;padding:18px;border:1px solid var(--accent);border-radius:12px;background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 7%,var(--paper)),var(--paper) 42%);box-shadow:inset 0 10px 30px color-mix(in srgb,var(--accent) 5%,transparent)}
#admin-view .admin-user-create-inline.hidden{display:none}
#admin-view .admin-user-create-inline>h3,#admin-view .admin-user-create-inline>.hint:first-of-type{grid-column:2 / -1;margin:0}
#admin-view .admin-user-create-inline>.admin-create-user-visual{grid-column:1;grid-row:1 / span 5;width:112px;padding:0;border:0;background:transparent}
#admin-view .admin-user-create-inline .visual-preview{width:112px;height:112px;min-height:112px;border-radius:16px;cursor:pointer}
#admin-view .admin-user-create-inline>.hint:not(:first-of-type){grid-column:2 / -1;margin:0}
#admin-view .admin-user-create-inline .admin-password-permanent{grid-column:2 / -1;min-height:46px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:9px 12px;border:1px solid var(--line);border-radius:9px}
#admin-view .admin-user-create-inline .admin-password-permanent span{display:grid;gap:2px}
#admin-view .admin-user-create-inline .admin-password-permanent small{color:var(--muted)}
#admin-view .admin-user-create-inline .admin-password-permanent input{appearance:none;width:42px;height:24px;margin:0;border-radius:999px;background:var(--line);cursor:pointer;position:relative;transition:.2s}
#admin-view .admin-user-create-inline .admin-password-permanent input::after{content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;border-radius:50%;background:white;transition:.2s}
#admin-view .admin-user-create-inline .admin-password-permanent input:checked{background:var(--accent)}
#admin-view .admin-user-create-inline .admin-password-permanent input:checked::after{transform:translateX(18px)}
#admin-view .admin-user-create-inline .admin-password-permanent{justify-content:flex-start;gap:9px;padding:0;border:0;min-height:32px}
#admin-view .admin-user-create-inline .admin-password-permanent>b{font-size:12px}
.password-input{position:relative;display:block;width:100%}
.password-input>input{width:100%;padding-right:42px!important}
.password-input>[data-toggle-password]{position:absolute;right:5px;top:50%;transform:translateY(-50%);width:32px;height:32px;display:grid;place-items:center;padding:0;border:0;border-radius:7px;background:transparent;color:var(--muted);cursor:pointer}
.password-input>[data-toggle-password]:hover,.password-input>[data-toggle-password]:focus-visible{background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent);outline:0}
.password-input>[data-toggle-password] svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.password-input>[data-toggle-password] .password-eye-slash{display:none}
.password-input>[data-toggle-password].visible .password-eye-slash{display:block}
#profile-form.profile-modal{width:min(570px,94vw)}
#profile-form .profile-identity{display:grid;grid-template-columns:116px minmax(0,1fr);gap:18px;align-items:center;margin:18px 0 22px}
#profile-form .profile-identity>.visual-editor{display:block;width:112px;padding:0;border:0;background:transparent}
#profile-form .profile-identity .visual-preview{width:112px;height:112px;min-height:112px;margin:0;border-radius:16px;cursor:pointer;box-shadow:0 8px 22px rgba(18,27,35,.16)}
#profile-form .profile-identity>label{margin:0}
#profile-form .profile-actions{padding-top:16px;border-top:1px solid var(--line)}
@media(max-width:520px){#profile-form .profile-identity{grid-template-columns:88px minmax(0,1fr);gap:12px}#profile-form .profile-identity>.visual-editor,#profile-form .profile-identity .visual-preview{width:84px;height:84px;min-height:84px}}
#admin-view .admin-user-create-inline>.record-actions{grid-column:2 / -1;justify-content:flex-end}
#admin-view .admin-user-dates{display:grid;gap:4px;overflow:visible;white-space:normal}
#admin-view .admin-user-dates small{display:grid;grid-template-columns:20px minmax(0,1fr);align-items:center;gap:5px;min-width:0;font-size:10px;line-height:1.2}
#admin-view .admin-user-dates small i{width:20px;height:18px;display:grid;place-items:center;border-radius:6px;background:color-mix(in srgb,#38b978 17%,var(--paper));color:color-mix(in srgb,#167a4a 88%,var(--ink));font-style:normal;font-weight:900}
#admin-view .admin-user-dates small+small i{background:color-mix(in srgb,var(--accent) 13%,var(--paper));color:color-mix(in srgb,var(--accent) 75%,var(--ink))}
#admin-view .admin-user-dates small span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}
@media(max-width:900px){#admin-view .admin-user-create-inline{grid-template-columns:96px 1fr}#admin-view .admin-user-create-inline>*{grid-column:2}#admin-view .admin-user-create-inline>.admin-create-user-visual{grid-column:1;grid-row:1 / span 6;width:88px}#admin-view .admin-user-create-inline .visual-preview{width:88px;height:88px;min-height:88px}}
@media(max-width:620px){.login-theme-toggle{top:10px;right:10px}#admin-view .admin-user-create-inline{grid-template-columns:1fr}#admin-view .admin-user-create-inline>*{grid-column:1!important}#admin-view .admin-user-create-inline>.admin-create-user-visual{grid-row:auto;width:100%}#admin-view .admin-user-create-inline .visual-preview{margin:auto}}

/* Company creation: isolated from project, user and record forms. */
.fb-company-create-modal{z-index:76;padding:18px}
.fb-company-create-modal .fb-company-create-form{width:min(780px,96vw);max-height:min(860px,94dvh);overflow:auto;padding:24px;display:grid;gap:16px;background:var(--paper);color:var(--ink);border:1px solid color-mix(in srgb,var(--accent) 42%,var(--line))}
.fb-company-create-heading{padding:0 44px 14px 0;border-bottom:1px solid var(--line)}
.fb-company-create-heading h2{margin:0 0 4px;font-size:clamp(24px,3vw,32px)}
.fb-company-create-heading p{margin:0;color:var(--muted)}
.fb-company-create-form>label,.fb-company-create-form .color-grid,.fb-company-create-form .background-emoji-fields{padding:14px;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--paper) 94%,var(--accent) 6%)}
.fb-company-create-form .color-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.fb-company-create-form .color-grid>label{min-width:0}
.fb-company-create-form .background-emoji-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.fb-company-create-form .background-emoji-fields.hidden{display:none}
.fb-company-create-form .background-emoji-fields>label:first-child,.fb-company-create-form .background-emoji-fields>.two{grid-column:1/-1}
.fb-company-create-actions{position:sticky;bottom:-24px;z-index:2;display:flex;justify-content:flex-end;gap:10px;margin:2px -24px -24px;padding:15px 24px;background:color-mix(in srgb,var(--paper) 94%,transparent);border-top:1px solid var(--line);backdrop-filter:blur(12px)}
.fb-company-create-actions button{min-width:150px}
.fb-company-create-launch-panel{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:112px}
.fb-company-create-launch-panel h3{margin:2px 0 4px}
.fb-company-create-launch-panel p{margin-bottom:0}
.fb-company-create-list{align-self:flex-end;margin:-44px 48px 14px auto;position:relative;z-index:2}
#admin-list-modal.user-management-open .fb-company-create-list{display:none!important}
html[data-theme="dark"] .fb-company-create-modal .fb-company-create-form,html[data-theme="dark"] .fb-company-create-form>label,html[data-theme="dark"] .fb-company-create-form .color-grid,html[data-theme="dark"] .fb-company-create-form .background-emoji-fields{background:var(--paper);color:var(--ink)}
@media(max-width:700px){.fb-company-create-modal{padding:8px}.fb-company-create-modal .fb-company-create-form{width:100%;max-height:97dvh;padding:18px;gap:12px}.fb-company-create-form .color-grid,.fb-company-create-form .background-emoji-fields{grid-template-columns:1fr}.fb-company-create-form .background-emoji-fields>*{grid-column:1!important}.fb-company-create-actions{bottom:-18px;margin:2px -18px -18px;padding:12px 18px;flex-direction:column-reverse}.fb-company-create-actions button{width:100%}.fb-company-create-launch-panel{align-items:stretch;flex-direction:column}.fb-company-create-launch-panel .primary{width:100%}.fb-company-create-list{margin:0 44px 12px auto}}

/* Registered companies: the Users management pattern, isolated to Companies. */
#admin-view > #admin-list-modal.company-management-inline {
  position:static;
  inset:auto;
  z-index:auto;
  width:100%;
  height:auto;
  min-height:0;
  padding:0;
  display:block;
  overflow:visible;
  overscroll-behavior:auto;
  background:transparent;
  backdrop-filter:none;
}
#admin-view > #admin-list-modal.company-management-inline.hidden { display:none; }
#admin-view > #admin-list-modal.company-management-inline > .modal {
  position:static;
  width:100%;
  max-width:none;
  max-height:none;
  margin:0;
  padding:18px;
  overflow:visible;
  border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line));
  border-radius:12px;
  background:var(--paper);
  color:var(--ink);
  box-shadow:none;
}
#admin-view > #admin-list-modal.company-management-inline > .modal > .close,
#admin-view > #admin-list-modal.company-management-inline > .modal > .eyebrow,
#admin-view > #admin-list-modal.company-management-inline > .modal > #admin-list-title,
#admin-list-modal.company-management-open + .fb-company-create-list,
#admin-list-modal.company-management-open .fb-company-create-list { display:none!important; }
#admin-view .fb-companies-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-bottom:14px;
}
#admin-view .fb-companies-heading h2 { margin:2px 0;font-size:clamp(28px,2.2vw,36px);line-height:1.05; }
#admin-view .fb-companies-heading p { margin:0;color:var(--muted);font-size:14px;line-height:1.45; }
#admin-view .fb-companies-filters {
  display:grid;
  grid-template-columns:minmax(250px,1fr) minmax(145px,.3fr) auto;
  align-items:end;
  gap:10px;
  margin-bottom:8px;
  padding:12px;
  border:1px solid color-mix(in srgb,var(--accent) 24%,var(--line));
  border-radius:10px;
  background:color-mix(in srgb,var(--paper) 96%,var(--accent) 4%);
}
#admin-view .fb-companies-search {
  height:43px;
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:8px;
  padding:0 11px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--paper);
}
#admin-view .fb-companies-search > span { color:var(--accent);font-weight:900; }
#admin-view .fb-companies-search input { width:100%;height:39px;padding:0;border:0;background:transparent;color:var(--ink); }
#admin-view .fb-companies-filters > label:not(.fb-companies-search) { display:grid;gap:6px;color:var(--muted);font-size:10px;font-weight:800; }
#admin-view .fb-companies-filters select { height:43px;background:var(--paper);color:var(--ink); }
#admin-view .fb-companies-filters > b { align-self:center;color:var(--muted);font-size:11px;white-space:nowrap; }
#admin-view .fb-companies-table-head,
#admin-view .fb-company-summary {
  display:grid;
  grid-template-columns:minmax(220px,1.7fr) 90px 120px minmax(105px,.75fr) 100px 130px 86px;
  align-items:center;
  gap:10px;
}
#admin-view .fb-companies-table-head {
  padding:12px 14px;
  border-bottom:1px solid color-mix(in srgb,var(--accent) 22%,var(--line));
  color:var(--muted);
  font-size:11px;
  font-weight:800;
}
#admin-view .fb-company-entry {
  position:relative;
  isolation:isolate;
  margin-bottom:7px;
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--accent) 42%,var(--line));
  border-radius:10px;
  background:var(--paper);
  color:var(--ink);
}
#admin-view .fb-company-entry.filtered-out { display:none; }
#admin-view .fb-company-summary {
  width:100%;
  min-height:70px;
  padding:10px 13px;
  border:0;
  background:transparent;
  color:var(--ink);
  text-align:left;
  cursor:pointer;
}
#admin-view .fb-company-summary:hover { background:color-mix(in srgb,var(--accent) 5%,transparent); }
#admin-view .fb-company-summary > span { min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px; }
#admin-view .fb-company-summary > span > small { display:block;margin-top:3px;color:var(--muted);font-size:9px; }
#admin-view .fb-company-summary > i { color:var(--muted);font-style:normal;text-align:center; }
#admin-view .fb-company-edit-action {
  min-width:78px;
  min-height:34px;
  padding:7px 10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line));
  border-radius:8px;
  background:color-mix(in srgb,var(--accent) 8%,var(--paper));
  color:var(--accent);
  font-size:10px;
  font-weight:800;
}
#admin-view .fb-company-edit-action:hover,
#admin-view .fb-company-edit-action:focus-visible { border-color:var(--accent);background:var(--accent);color:var(--accent-contrast,#fff);outline:0; }
#admin-view .fb-company-edit-action i { font-size:13px;font-style:normal; }
#admin-view .fb-company-identity { display:flex!important;align-items:center;gap:11px; }
#admin-view .fb-company-identity > span { min-width:0; }
#admin-view .fb-company-identity b { display:block;overflow:hidden;text-overflow:ellipsis;font-size:13px; }
#admin-view .fb-company-avatar {
  width:48px;
  height:48px;
  flex:0 0 48px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line));
  border-radius:12px;
  font-size:26px;
}
#admin-view .fb-company-avatar img { width:100%;height:100%;object-fit:cover; }
#admin-view .fb-company-palette { display:flex;overflow:visible; }
#admin-view .fb-company-palette i {
  width:30px;
  height:30px;
  display:block;
  border:2px solid var(--paper);
  border-radius:9px;
  background:var(--swatch);
  box-shadow:0 0 0 1px var(--line);
}
#admin-view .fb-company-palette i + i { margin-left:-8px; }
html:not([data-theme="dark"]) #admin-view .fb-company-palette i {
  border-color:#17212b;
  box-shadow:none;
}
html[data-theme="dark"] #admin-view .fb-company-palette i {
  border-color:#fff;
  box-shadow:none;
}
#admin-view .fb-company-status { display:inline-flex;padding:5px 8px;border-radius:7px;font-size:9px;font-style:normal; }
#admin-view .fb-company-status.active { color:#24a66a;background:rgba(16,185,129,.13); }
#admin-view .fb-company-status.inactive { color:#e64e66;background:rgba(244,63,94,.13); }
#admin-view .fb-company-entry.expanded { border-color:var(--accent);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 48%,transparent); }
#admin-view .fb-company-entry.expanded .fb-company-summary { border-bottom:1px solid color-mix(in srgb,var(--accent) 40%,var(--line)); }
#admin-view .fb-company-entry.expanded .company-record {
  position:relative;
  z-index:1;
  margin:0 10px 10px;
  padding:16px;
  border-color:color-mix(in srgb,var(--accent) 38%,var(--line));
  border-radius:11px;
  background:var(--paper);
  color:var(--ink);
  box-shadow:inset 0 34px 70px color-mix(in srgb,var(--accent) 7%,transparent);
}
#admin-view .fb-company-entry .company-record > label { color:var(--muted);font-size:10px;font-weight:800; }
#admin-view .fb-company-entry .company-record textarea,
#admin-view .fb-company-entry .company-record select,
#admin-view .fb-company-entry .company-record input:not([type="checkbox"]):not([type="color"]) { color:var(--ink); }
#admin-view .fb-company-entry .company-record > label:first-of-type { display:grid;grid-template-rows:auto 42px;gap:6px; }
#admin-view .fb-company-entry .company-record textarea[name="name"] { height:42px;min-height:42px;max-height:42px;resize:none; }
#admin-view .fb-company-entry .company-record > .visual-editor { background:color-mix(in srgb,var(--paper) 94%,var(--accent) 6%); }
#admin-view .fb-company-active-switch { min-height:0;display:grid!important;grid-template-rows:auto 42px;align-content:start;gap:6px;border:0;background:transparent; }
#admin-view .fb-company-state-title { color:var(--muted);font-size:10px;font-weight:800; }
#admin-view .fb-company-state-control { height:42px;padding:0 11px;display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:8px;background:var(--paper); }
#admin-view .fb-company-state-control input {
  appearance:none;
  position:relative;
  width:40px;
  height:22px;
  min-height:22px;
  margin:0;
  border:0;
  border-radius:999px;
  background:var(--line);
  cursor:pointer;
}
#admin-view .fb-company-state-control input::after { content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .18s ease; }
#admin-view .fb-company-state-control input:checked { background:var(--accent); }
#admin-view .fb-company-state-control input:checked::after { transform:translateX(18px); }
#admin-view .fb-company-state-control > i { display:none; }
#admin-view .fb-company-state-control > b { color:var(--ink);font-size:11px; }
#admin-view .fb-company-active-switch.is-inactive .fb-company-state-control > b { color:var(--muted); }

/* Company creation wizard: matches the supplied three-stage reference. */
.fb-company-create-modal { z-index:120;padding:clamp(10px,3vw,42px);background:rgba(3,7,9,.78);backdrop-filter:blur(5px); }
.fb-company-create-modal .fb-company-create-wizard {
  width:min(1330px,96vw);
  max-height:94dvh;
  padding:30px 36px 0;
  display:grid;
  gap:20px;
  overflow:auto;
  border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line));
  border-radius:16px;
  background:var(--paper);
  color:var(--ink);
  box-shadow:0 28px 80px rgba(0,0,0,.38);
}
.fb-company-create-wizard > .close { top:18px;right:20px;width:38px;height:38px;border:0;background:transparent;color:var(--muted);font-size:28px; }
.fb-company-create-wizard > .eyebrow { margin:0;color:var(--accent);font-size:12px;letter-spacing:.15em; }
.fb-company-wizard-heading { margin-top:-10px;padding-right:50px; }
.fb-company-wizard-heading h2 { margin:0 0 4px;font:700 clamp(30px,3vw,40px)/1.1 'Aptos','Segoe UI',sans-serif; }
.fb-company-wizard-heading p { margin:0;color:var(--muted);font-size:17px; }
.fb-company-wizard-steps { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;margin:2px 0 4px;border:0; }
.fb-company-wizard-steps > button { position:relative;display:grid;grid-template-columns:48px minmax(0,1fr);align-items:center;gap:16px;min-width:0;padding:0;border:0;background:transparent;color:var(--ink);text-align:left; }
.fb-company-wizard-steps > button:not(:last-child)::after { content:none; }
.fb-company-wizard-steps i { position:relative;z-index:1;width:48px;height:48px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;color:var(--ink);font-style:normal;font-weight:800; }
.fb-company-wizard-steps b { min-width:0;font-size:15px; }
.fb-company-wizard-steps small { display:block;margin-top:4px;overflow:hidden;text-overflow:ellipsis;color:var(--muted);font-size:12px;font-weight:500;white-space:nowrap; }
.fb-company-wizard-steps > button.active i { border:2px solid var(--accent);color:var(--accent);box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 7%,transparent); }
.fb-company-wizard-body { min-height:0;display:grid;grid-template-columns:minmax(440px,1.14fr) minmax(390px,.9fr);align-items:start;gap:16px; }
.fb-company-wizard-fields { display:grid;gap:14px; }
.fb-company-wizard-fields > section,
.fb-company-live-preview { padding:20px 24px;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--paper) 97%,var(--accent) 3%); }
.fb-company-wizard-fields > section > header { display:flex;align-items:center;gap:18px;margin-bottom:15px; }
.fb-company-wizard-fields > section > header > i { width:58px;height:58px;flex:0 0 58px;display:grid;place-items:center;border:1px solid var(--line);border-radius:11px;background:color-mix(in srgb,var(--paper) 92%,var(--soft));font-size:24px;font-style:normal; }
.fb-company-wizard-fields > section > header b,
.fb-company-wizard-fields > section > header small { display:block; }
.fb-company-wizard-fields > section > header b { font-size:17px; }
.fb-company-wizard-fields > section > header small { margin-top:5px;color:var(--muted);font-size:13px; }
.fb-company-wizard-fields > section > header > span { flex:1;min-width:0; }
.fb-company-wizard-fields > section > header > .fb-company-section-icon {
  width:76px;height:76px;flex:0 0 76px;order:-1;margin-left:0;
  border:1px solid var(--line);border-radius:16px;
  background:color-mix(in srgb,var(--paper) 94%,var(--company-action-color,var(--accent)) 6%);
  color:var(--ink);
}
.fb-company-section-icon svg { display:block;width:48px;height:48px; }
.visual-format-options { display:grid;grid-template-columns:1fr 1fr;gap:12px; }
.visual-format-options[hidden] { display:none; }
.visual-format-options button { display:flex;align-items:center;justify-content:center;gap:12px;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink); }
.visual-format-options svg { width:64px;height:40px;fill:none;stroke:currentColor;stroke-width:2; }
.visual-format-options button[aria-pressed="true"] { border:2px solid var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--paper));color:var(--accent); }
.fb-company-representation-label { margin:0 0 10px;font-weight:700;font-size:13px; }
.fb-company-favicon-editor { margin-top:18px;padding:16px;display:grid;grid-template-columns:80px minmax(0,1fr);align-items:center;gap:16px;border:1px solid var(--line);border-radius:12px; }
.fb-company-favicon-editor legend { font-weight:700;padding:0 6px; }
.fb-company-favicon-editor > .visual-editor { display:block;width:80px;margin:0;padding:0;border:0; }
.fb-company-favicon-editor .visual-preview { width:80px;height:80px;min-height:0;margin:0;aspect-ratio:1;border-radius:14px;overflow:hidden; }
.fb-company-favicon-editor p { margin:0;color:var(--muted);font-size:12px;line-height:1.5; }
.project-icon-editor-backdrop[data-kind="favicon"] .project-icon-stage { aspect-ratio:1;border-radius:20px; }
.file-dragging { outline:3px dashed var(--accent)!important;outline-offset:4px; }
.fb-company-background-preview { position:relative;display:grid;place-items:center; }
.fb-company-background-preview > span { color:var(--muted);font-size:12px;font-weight:700;pointer-events:none; }
.fb-company-background-preview[style*="background-image: url"] > span { opacity:0; }
@media(max-width:480px) { .visual-format-options button { flex-direction:column;padding:10px;font-size:12px; } }
.fb-company-wizard-fields [data-company-slot] > label { display:grid;gap:7px;color:var(--ink);font-size:13px;font-weight:800; }
.fb-company-wizard-fields [data-company-slot="identity"] textarea { height:48px;min-height:48px;max-height:48px;resize:none; }
.fb-company-create-wizard .color-grid { padding:0;border:0;border-radius:0;background:transparent; }
.fb-company-create-wizard .color-grid > label { display:grid;gap:7px;color:var(--ink);font-size:13px;font-weight:800; }
.fb-company-create-wizard .color-picker-field { height:55px;padding:5px;border-radius:10px;background:var(--paper); }
.fb-company-create-wizard .color-picker-field input[type="color"] { width:52px!important;height:43px!important; }
.fb-company-create-wizard .color-picker-field .hex-color { height:43px;background:transparent; }
.fb-company-create-wizard .background-emoji-fields { margin-top:12px;padding:12px;border-color:color-mix(in srgb,var(--accent) 24%,var(--line));background:color-mix(in srgb,var(--paper) 96%,var(--accent) 4%); }
.fb-company-live-preview { position:sticky;top:var(--company-preview-top,0px);display:grid;gap:10px; }
@media(min-width:1051px) {
  .fb-company-live-preview { max-height:var(--company-preview-height,none);overflow:auto; }
}
.fb-company-live-preview > header b,
.fb-company-live-preview > header small { display:block; }
.fb-company-live-preview > header b { font-size:18px; }
.fb-company-live-preview > header small { margin-top:4px;color:var(--muted);font-size:13px; }
.fb-company-live-preview > p { margin:0;color:var(--muted);font-size:11px; }
.fb-company-preview-shell {
  --company-preview-primary:#ed735d;
  --company-preview-secondary:#17212b;
  --company-preview-workspace:#f5f6f7;
  min-height:385px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:12px;
  background:#0d1216;
  color:#eff4f6;
  font-size:9px;
}
.fb-company-preview-top { height:58px;display:grid;grid-template-columns:34px 78px 26px 34px minmax(0,1fr);align-items:center;gap:7px;padding:8px 10px;border-bottom:1px solid #283238;background:#0f1519; }
.fb-company-preview-top > i { width:30px;height:30px;display:grid;place-items:center;border-radius:8px;background:var(--company-preview-primary);color:#fff;font-style:normal;font-size:17px;font-weight:900; }
.fb-company-preview-top > b { font-size:13px; }
.fb-company-preview-top > span { display:grid;place-items:center;font-size:18px; }
.fb-company-preview-top > em { width:30px;height:30px;display:grid;place-items:center;border-radius:8px;background:color-mix(in srgb,var(--company-preview-secondary) 75%,white);font-size:16px;font-style:normal; }
.fb-company-preview-top > strong { overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px; }
.fb-company-preview-main { min-height:327px;display:grid;grid-template-columns:142px minmax(0,1fr); }
.fb-company-preview-main > nav { padding:24px 10px;display:grid;align-content:start;gap:6px;border-right:1px solid #293238;background:#0c1114; }
.fb-company-preview-main > nav small { margin-bottom:8px;color:#9aa4aa;font-size:7px;letter-spacing:.12em; }
.fb-company-preview-main > nav b { padding:7px;border-radius:6px;font-size:10px; }
.fb-company-preview-main > nav b.active { background:#20282d; }
.fb-company-preview-main > nav span { margin:-4px 7px 5px;color:#9aa4aa;font-size:7px; }
.fb-company-preview-main > section { position:relative;isolation:isolate;padding:16px;overflow:hidden;background:var(--company-preview-workspace);color:#17212b; }
.fb-company-preview-main > section > header { position:relative;z-index:2;display:grid;gap:2px;margin-bottom:14px; }
.fb-company-preview-main > section > header small { color:var(--company-preview-primary);font-size:7px;letter-spacing:.12em; }
.fb-company-preview-main > section > header b { font-size:19px; }
.fb-company-preview-main > section > header span { font-size:8px; }
.fb-company-preview-toolbar { position:relative;z-index:2;height:38px;padding:0 10px;display:flex;align-items:center;border:1px solid rgba(23,33,43,.18);border-radius:8px;background:rgba(255,255,255,.8);color:#66727a; }
.fb-company-preview-toolbar i { width:28px;height:28px;margin-left:auto;display:grid;place-items:center;border-radius:7px;background:var(--company-preview-primary);color:#fff;font-size:18px;font-style:normal; }
.fb-company-preview-board { position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px; }
.fb-company-preview-board article { min-height:146px;padding:10px;display:grid;align-content:start;gap:14px;border:1px solid var(--line);border-radius:9px;background:var(--soft);color:var(--ink); }
.fb-company-preview-board article > span { padding:12px 8px;border:1px solid var(--line);border-left:3px solid var(--company-preview-primary);border-radius:6px;background:var(--paper);color:var(--ink); }
html[data-theme="dark"] .fb-company-preview-main > section { background:var(--canvas);color:var(--ink); }
html[data-theme="dark"] .fb-company-preview-toolbar { background:var(--paper);border-color:var(--line);color:var(--muted); }
.fb-company-preview-emoji { position:absolute;z-index:1;inset:0;display:flex;align-content:center;justify-content:center;flex-wrap:wrap;gap:16px;overflow:hidden;opacity:.13;line-height:1;pointer-events:none; }
.fb-company-preview-emoji[data-position="top-left"] { align-content:flex-start;justify-content:flex-start; }
.fb-company-preview-emoji[data-position="top-right"] { align-content:flex-start;justify-content:flex-end; }
.fb-company-preview-emoji[data-position="bottom-left"] { align-content:flex-end;justify-content:flex-start; }
.fb-company-preview-emoji[data-position="bottom-right"] { align-content:flex-end;justify-content:flex-end; }
html:not([data-theme="dark"]) .fb-company-preview-shell { border-color:#dce2e7;background:#f7f9fa;color:#17212b; }
html:not([data-theme="dark"]) .fb-company-preview-top { border-bottom-color:#dce2e7;background:#fff;color:#17212b; }
html:not([data-theme="dark"]) .fb-company-preview-top > span { color:#74808c; }
html:not([data-theme="dark"]) .fb-company-preview-main > nav { border-right-color:#dce2e7;background:#f7f9fa;color:#17212b; }
html:not([data-theme="dark"]) .fb-company-preview-main > nav small,
html:not([data-theme="dark"]) .fb-company-preview-main > nav span { color:#74808c; }
html:not([data-theme="dark"]) .fb-company-preview-main > nav b.active { background:#e7ebee; }
.fb-company-create-wizard > .fb-company-create-actions {
  position:sticky;
  z-index:8;
  bottom:0;
  margin:0 -36px;
  padding:18px 36px;
  border-top:1px solid var(--line);
  background:color-mix(in srgb,var(--paper) 94%,transparent);
  backdrop-filter:blur(14px);
}
.fb-company-create-wizard > .fb-company-create-actions button { min-width:190px;min-height:50px; }
.fb-company-create-wizard > .fb-company-create-actions .fb-company-footer-delete { margin-right:auto;border:1px solid color-mix(in srgb,#c94040 60%,var(--line));background:color-mix(in srgb,#c94040 8%,var(--paper));color:#b52d2d;padding-inline:18px; }
.fb-company-create-wizard > .fb-company-create-actions .fb-company-footer-delete:hover { background:color-mix(in srgb,#c94040 16%,var(--paper));color:#951f1f; }
.fb-company-create-wizard > .fb-company-create-actions .primary { background:var(--company-action-color,var(--accent));color:var(--company-action-contrast,var(--accent-contrast,#fff)); }
html[data-theme="dark"] .fb-company-create-wizard > .fb-company-create-actions .fb-company-footer-delete { border-color:#d85b55;background:#6a2727;color:#fff3f1; }
html[data-theme="dark"] .fb-company-create-wizard > .fb-company-create-actions .fb-company-footer-delete:hover { border-color:#ef7770;background:#853331;color:#fff; }
html[data-theme="dark"] #admin-view > #admin-list-modal.company-management-inline > .modal,
html[data-theme="dark"] #admin-view .fb-company-entry,
html[data-theme="dark"] #admin-view .fb-company-entry.expanded .company-record,
html[data-theme="dark"] .fb-company-create-modal .fb-company-create-wizard { background:var(--paper);color:var(--ink); }

@media(max-width:1050px) {
  #admin-view .fb-companies-table-head,
  #admin-view .fb-company-summary { grid-template-columns:minmax(210px,1.7fr) 75px 110px 95px 82px; }
  #admin-view .fb-companies-table-head > :nth-child(4),
  #admin-view .fb-company-summary > :nth-child(4),
  #admin-view .fb-companies-table-head > :nth-child(6),
  #admin-view .fb-company-summary > :nth-child(6) { display:none; }
  .fb-company-wizard-body { grid-template-columns:1fr; }
  .fb-company-live-preview { position:static; }
}
@media(max-width:760px) {
  #admin-view > #admin-list-modal.company-management-inline > .modal { padding:12px; }
  #admin-view .fb-companies-heading { align-items:stretch;flex-direction:column; }
  #admin-view .fb-companies-heading .primary { width:100%; }
  #admin-view .fb-companies-filters { grid-template-columns:1fr; }
  #admin-view .fb-companies-table-head { display:none; }
  #admin-view .fb-company-summary { grid-template-columns:minmax(0,1fr) auto; }
  #admin-view .fb-company-summary > span:nth-child(n+2) { display:none; }
  #admin-view .fb-company-edit-action { min-width:42px;padding-inline:9px; }
  #admin-view .fb-company-edit-action span { display:none; }
  #admin-view .fb-company-entry.expanded .company-record { grid-template-columns:1fr; }
  .fb-company-create-modal { padding:6px; }
  .fb-company-create-modal .fb-company-create-wizard { width:100%;max-height:98dvh;padding:22px 16px 0;gap:15px;border-radius:12px; }
  .fb-company-wizard-heading p { font-size:14px; }
  .fb-company-wizard-steps { gap:8px; }
  .fb-company-wizard-steps > button { grid-template-columns:38px minmax(0,1fr);gap:8px; }
  .fb-company-wizard-steps > button:not(:last-child)::after { display:none; }
  .fb-company-wizard-steps i { width:38px;height:38px; }
  .fb-company-wizard-steps small { display:none; }
  .fb-company-wizard-body { grid-template-columns:minmax(0,1fr); }
  .fb-company-wizard-fields > section,
  .fb-company-live-preview { padding:14px; }
  .fb-company-wizard-fields > section > header > i { width:44px;height:44px;flex-basis:44px; }
  .fb-company-create-wizard .color-grid { grid-template-columns:1fr; }
  .fb-company-preview-main { grid-template-columns:96px minmax(0,1fr); }
  .fb-company-preview-board { grid-template-columns:1fr; }
  .fb-company-preview-board article:last-child { display:none; }
  .fb-company-create-wizard > .fb-company-create-actions { margin:0 -16px;padding:14px 16px;flex-direction:column-reverse; }
  .fb-company-create-wizard > .fb-company-create-actions button { width:100%;min-width:0; }
}

/* Company modal tabs, identity editor and embedded project management. */
.fb-company-tabbed-modal .fb-company-wizard-fields > section.hidden { display:none!important; }
.fb-company-tabbed-modal .fb-company-wizard-fields > section { min-height:420px; }
.fb-company-identity-editor { display:grid;grid-template-columns:112px minmax(0,1fr);align-items:center;gap:18px;margin-top:18px;padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--paper); }
.fb-company-identity-editor > .visual-editor { width:112px;display:block;padding:0;border:0;background:transparent; }
.fb-company-identity-editor .visual-preview { width:112px;height:112px;min-height:112px;margin:0;border:2px solid color-mix(in srgb,var(--accent) 45%,var(--line));border-radius:16px;cursor:pointer; }
.fb-company-identity-editor > div:last-child b { display:block;font-size:14px; }
.fb-company-identity-editor > div:last-child p { margin:5px 0 12px;color:var(--muted);font-size:12px;line-height:1.45; }
.fb-company-modal-state { margin-top:14px;padding:12px 14px;display:flex!important;align-items:center;gap:10px;border:1px solid var(--line);border-radius:10px;background:var(--paper); }
.fb-company-modal-state input { width:20px;height:20px;accent-color:var(--company-action-color,var(--accent)); }
.fb-company-modal-state span b,.fb-company-modal-state span small { display:block; }
.fb-company-modal-state span small { margin-top:2px;color:var(--muted);font-size:10px;font-weight:500; }
.fb-company-workspace-settings { padding:15px;border:1px solid var(--line);border-radius:12px;background:var(--paper); }
.fb-company-workspace-settings h3,.fb-company-projects-head h3 { margin:0 0 4px;font-size:15px; }
.fb-company-workspace-settings > p,.fb-company-projects-head p { margin:0 0 13px;color:var(--muted);font-size:11px; }
.fb-company-workspace-settings [data-company-slot="workspace"] { display:grid;gap:10px; }
.fb-company-background-upload { width:max-content;margin-top:10px; }
.fb-company-background-preview { min-height:76px;margin-top:10px;border:1px dashed var(--line);border-radius:10px;background-color:var(--canvas);background-position:center;background-size:cover; }
.fb-company-projects-head { margin-top:16px;display:flex;align-items:center;justify-content:space-between;gap:12px; }
.fb-company-project-list { display:grid;gap:7px; }
.fb-company-project-row { min-height:62px;padding:8px 10px;display:grid;grid-template-columns:minmax(0,1fr) 125px 42px;align-items:center;gap:10px;border:1px solid var(--line);border-radius:10px;background:var(--paper); }
.fb-company-project-row > .fb-company-project-switch { order:1;justify-self:end;appearance:none;position:relative;width:42px;height:24px;min-height:24px;margin:0;padding:0;border:0;border-radius:999px;background:var(--line);cursor:pointer; }
.fb-company-project-switch::after { content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .15s; }
.fb-company-project-row > .fb-company-project-switch:checked { background:var(--company-action-color,var(--accent)); }
.fb-company-project-switch:checked::after { transform:translateX(18px); }
.fb-company-project-switch:focus-visible { outline:2px solid var(--company-action-color,var(--accent));outline-offset:3px; }
.fb-company-project-switch:disabled { opacity:.55;cursor:wait; }
.fb-company-project-identity { min-width:0;display:flex;align-items:center;gap:10px; }
.fb-company-project-identity > span:last-child { min-width:0; }
.fb-company-project-identity b,.fb-company-project-identity small { display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.fb-company-project-identity small { margin-top:3px;color:var(--muted);font-size:9px; }
.fb-company-project-row > span:nth-child(3) { color:var(--muted);font-size:10px; }
.fb-company-project-avatar { width:42px;height:42px;flex:0 0 42px;display:grid;place-items:center;overflow:hidden;border-radius:11px;font-size:22px; }
.fb-company-project-avatar img { width:100%;height:100%;object-fit:cover; }
.fb-company-project-empty { min-height:110px;padding:18px;display:grid;place-items:center;align-content:center;gap:5px;border:1px dashed var(--line);border-radius:10px;color:var(--muted);text-align:center; }
.fb-company-project-empty b { color:var(--ink); }

.fb-company-project-modal { z-index:135;padding:14px; }
.fb-company-project-form { width:min(850px,96vw)!important;max-height:94dvh;padding:26px!important;background:var(--paper)!important;color:var(--ink)!important; }
.fb-company-project-layout { display:grid;grid-template-columns:minmax(280px,.8fr) minmax(320px,1fr);gap:18px;align-items:start; }
.fb-company-project-layout > .visual-editor { display:block;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--canvas); }
.fb-company-project-layout .visual-preview { width:100%;height:auto;min-height:0;aspect-ratio:16/9;border-radius:14px;cursor:pointer; }
.fb-company-project-fields { display:grid;gap:12px; }
.fb-company-project-fields label { display:grid;gap:6px;color:var(--muted);font-size:10px;font-weight:800; }
.fb-company-project-fields textarea[name="name"] { min-height:44px;max-height:44px;resize:none; }
.fb-company-project-actions { display:flex;justify-content:flex-end;gap:10px;padding-top:15px;border-top:1px solid var(--line); }
.fb-company-project-actions button { min-width:150px; }
.project-icon-editor-modal.project-visual-horizontal { width:min(1040px,96vw); }
.project-icon-editor-modal.project-visual-horizontal .project-icon-editor-grid { grid-template-columns:minmax(520px,1.45fr) minmax(220px,.55fr); }
.project-icon-editor-modal.project-visual-horizontal .project-icon-stage { width:min(100%,680px);aspect-ratio:16/9;border-radius:20px; }
.project-icon-editor-modal.project-visual-horizontal .project-icon-stage span { font-size:clamp(64px,9vw,118px); }

/* Consistent automatic contrast for administrative primary actions. */
#admin-view .fb-admin-accent-action,
#admin-view [data-new-user],
.fb-company-project-modal .fb-admin-accent-action,
#admin-user-create-modal .primary { border-color:var(--accent);background:var(--accent);color:var(--accent-contrast,#fff); }
#admin-view button.primary { border-color:var(--accent);background:var(--accent);color:var(--accent-contrast,#fff); }
.fb-company-create-modal .fb-admin-accent-action { border-color:var(--company-action-color,var(--accent));background:var(--company-action-color,var(--accent));color:var(--company-action-contrast,var(--accent-contrast,#fff)); }
#admin-view .fb-admin-accent-action:hover,
#admin-view [data-new-user]:hover,
.fb-company-project-modal .fb-admin-accent-action:hover,
#admin-user-create-modal .primary:hover,
#admin-view button.primary:hover { filter:brightness(.92);color:var(--accent-contrast,#fff); }
.fb-company-create-modal .fb-admin-accent-action:hover { filter:brightness(.92);color:var(--company-action-contrast,var(--accent-contrast,#fff)); }

@media(max-width:760px) {
  .fb-company-tabbed-modal .fb-company-wizard-fields > section { min-height:0; }
  .fb-company-identity-editor { grid-template-columns:1fr; }
  .fb-company-identity-editor > .visual-editor { width:100%; }
  .fb-company-identity-editor .visual-preview { margin:auto; }
  .fb-company-projects-head { align-items:stretch;flex-direction:column; }
  .fb-company-projects-head button { width:100%; }
  .fb-company-project-row { grid-template-columns:minmax(0,1fr) auto; }
  .fb-company-project-row > span:nth-child(3) { display:none; }
  .fb-company-project-layout { grid-template-columns:1fr; }
  .fb-company-project-actions { flex-direction:column-reverse; }
  .fb-company-project-actions button { width:100%; }
  .project-icon-editor-modal.project-visual-horizontal .project-icon-editor-grid { grid-template-columns:1fr; }
}

/* User creation follows the same modal standard as company management. */
.admin-user-create-backdrop { z-index:125;padding:16px;background:rgba(3,7,9,.76);backdrop-filter:blur(5px); }
#admin-user-create-modal .admin-user-create-modal-form {
  width:min(1040px,96vw);
  max-height:94dvh;
  padding:28px;
  display:grid;
  grid-template-columns:132px repeat(3,minmax(160px,1fr));
  align-items:start;
  gap:14px;
  overflow:auto;
  border:1px solid color-mix(in srgb,var(--accent) 32%,var(--line));
  background:var(--paper);
  color:var(--ink);
}
#admin-user-create-modal .admin-user-create-modal-form > .close { top:18px;right:18px; }
#admin-user-create-modal .admin-user-create-modal-form > .eyebrow,
#admin-user-create-modal .admin-user-create-heading { grid-column:1 / -1; }
#admin-user-create-modal .admin-user-create-heading { margin:0 0 4px;padding-right:42px; }
#admin-user-create-modal .admin-user-create-heading h2 { margin:0;font:700 clamp(28px,3vw,38px)/1.1 'Aptos','Segoe UI',sans-serif; }
#admin-user-create-modal .admin-user-create-heading p { margin:5px 0 0;color:var(--muted); }
#admin-user-create-modal .admin-create-user-visual { grid-column:1;grid-row:3 / span 5;width:116px;padding:0;border:0;background:transparent; }
#admin-user-create-modal .admin-create-user-visual .visual-preview { width:116px;height:116px;min-height:116px;border:2px solid color-mix(in srgb,var(--accent) 45%,var(--line));border-radius:16px;cursor:pointer; }
#admin-user-create-modal .admin-user-create-modal-form > label:not(.admin-password-permanent) { min-width:0;display:grid;gap:6px;color:var(--muted);font-size:10px;font-weight:800; }
#admin-user-create-modal .admin-user-create-modal-form textarea,
#admin-user-create-modal .admin-user-create-modal-form input,
#admin-user-create-modal .admin-user-create-modal-form select { width:100%;min-height:43px; }
#admin-user-create-modal .admin-user-create-modal-form textarea { height:43px;min-height:43px;max-height:43px;resize:none; }
#admin-user-create-modal .admin-user-create-modal-form > .hint { grid-column:2 / -1;margin:0;color:var(--muted);font-size:10px; }
#admin-user-create-modal .admin-password-permanent { grid-column:2 / -1;display:flex;align-items:center;gap:8px; }
#admin-user-create-modal .admin-password-permanent input { width:18px;min-height:18px;height:18px;accent-color:var(--accent); }
#admin-user-create-modal .record-actions { grid-column:1 / -1;margin:6px -28px -28px;padding:16px 28px;display:flex;justify-content:flex-end;gap:10px;border-top:1px solid var(--line);background:color-mix(in srgb,var(--paper) 94%,transparent);backdrop-filter:blur(12px); }
#admin-user-create-modal .record-actions button { min-width:170px;min-height:48px; }
@media(max-width:760px) {
  .admin-user-create-backdrop { padding:6px; }
  #admin-user-create-modal .admin-user-create-modal-form { width:100%;max-height:98dvh;padding:20px 16px;grid-template-columns:1fr; }
  #admin-user-create-modal .admin-user-create-modal-form > * { grid-column:1!important;grid-row:auto!important; }
  #admin-user-create-modal .admin-create-user-visual { width:100%; }
  #admin-user-create-modal .admin-create-user-visual .visual-preview { margin:auto; }
  #admin-user-create-modal .record-actions { margin:4px -16px -20px;padding:14px 16px;flex-direction:column-reverse; }
  #admin-user-create-modal .record-actions button { width:100%; }
}
/* Company domain settings inside the shared company editor. */
[data-domain-access]{display:grid;gap:10px;min-width:0;margin:16px 0;padding:16px;border:1px solid var(--line,#d7dce0);border-radius:12px}
[data-domain-access] legend{padding:0 6px;font-weight:700}
[data-domain-access] output{font-weight:600}
[data-domain-access] p,[data-domain-summary] p{margin:0;overflow-wrap:anywhere}
[data-domain-summary]{border-top:1px solid var(--line,#d7dce0);display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
[data-global-domain]{flex-basis:100%;font-size:13px;overflow-wrap:anywhere}

/* Compact company identity and accessible active switch. */
.fb-company-create-modal .fb-company-identity-editor{grid-template-columns:104px minmax(0,1fr);gap:18px}
.fb-company-create-modal .fb-company-identity-editor>.visual-editor{width:104px}
.fb-company-create-modal .fb-company-identity-editor .visual-preview{width:104px;height:104px;min-height:104px;margin:0}
.fb-company-create-modal [data-company-name-slot]{min-width:0}
.fb-company-create-modal [data-company-name-slot] label{display:grid;gap:7px;margin:0}
.fb-company-create-modal [data-company-name-slot] textarea{width:100%;min-height:44px}
.fb-company-create-modal .fb-company-modal-state{justify-content:space-between;text-align:left;cursor:pointer}
.fb-company-create-modal .fb-company-modal-state>span{flex:1}
.fb-company-create-modal .fb-company-modal-state input[role="switch"]:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(max-width:480px){.fb-company-create-modal .fb-company-identity-editor{grid-template-columns:76px minmax(0,1fr);gap:12px;padding:12px}.fb-company-create-modal .fb-company-identity-editor>.visual-editor{width:76px}.fb-company-create-modal .fb-company-identity-editor .visual-preview{width:76px;height:76px;min-height:76px}}

.fb-company-create-modal .fb-company-modal-state input[role="switch"]{flex:none;max-width:42px;max-height:24px;padding:0;box-sizing:border-box;-webkit-appearance:none}

.company-list-active-toggle{flex:none;margin-left:auto!important;padding:0!important;box-sizing:border-box;max-width:42px;max-height:24px;-webkit-appearance:none}
.company-list-active-toggle:disabled{cursor:wait;opacity:.6}
.company-list-active-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

#admin-view .fb-company-heading-actions{margin-left:auto;display:flex;align-items:center;justify-content:flex-end;gap:18px;min-width:0}
#admin-view .fb-company-heading-actions [data-global-domain]{flex-basis:auto;text-align:right}
#admin-view .fb-company-heading-actions>.primary{flex:none;white-space:nowrap;width:auto}
@media(max-width:700px){#admin-view .fb-company-heading-actions{width:100%;flex-wrap:wrap;gap:12px}#admin-view .fb-company-heading-actions [data-global-domain]{flex:1;min-width:160px}}

.company-route-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 13px;border:1px solid var(--line);border-radius:8px;text-decoration:none;font-size:12px;overflow-wrap:anywhere;max-width:100%}
.company-route-button::after{content:'↗';flex:none}
.company-route-button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* Company sections stay on one continuous sheet; steps scroll to each section. */
.fb-company-tabbed-modal .fb-company-wizard-fields > section{min-height:0;scroll-margin-top:16px}
.fb-company-wizard-steps > button{margin-bottom:5px}

.project-icon-editor-backdrop.project-visual-horizontal .project-icon-stage{width:100%;height:auto;aspect-ratio:16/9}
#header-company-logo.visual-horizontal{width:96px;min-width:96px;aspect-ratio:16/9;height:54px}
.fb-company-create-modal .fb-company-identity-editor .visual-preview.visual-horizontal{height:auto;min-height:0;aspect-ratio:16/9}
#project-icon.visual-horizontal{width:96px;min-width:96px;height:54px;aspect-ratio:16/9}
#appearance-form .visual-preview.visual-horizontal{height:auto;min-height:0;aspect-ratio:16/9}

/* Company status beside the name, within the identity row. */
.fb-company-create-modal .fb-company-identity-editor{grid-template-columns:104px minmax(0,1fr) 42px}
.fb-company-create-modal .fb-company-identity-editor>.fb-company-inline-state{display:flex!important;align-items:center;justify-content:center;margin:20px 0 0;padding:0;border:0;background:transparent;width:42px;min-width:42px;gap:0}
@media(max-width:480px){.fb-company-create-modal .fb-company-identity-editor{grid-template-columns:76px minmax(0,1fr) 42px;gap:10px}}

/* Horizontal company artwork fills the complete header identity block. */
.fb-company-create-modal .fb-company-identity-editor:has(.visual-preview.visual-horizontal img) {
  grid-template-columns:minmax(0,7fr) minmax(0,3fr) 42px;
  align-items:end;
}
.fb-company-create-modal .fb-company-identity-editor:has(.visual-preview.visual-horizontal img) [data-company-name-slot] textarea { margin-bottom:0; }
.fb-company-create-modal .fb-company-identity-editor:has(.visual-preview.visual-horizontal img) > .visual-editor {
  width:100%;
  min-width:0;
}
.global-company-brand.company-image-banner{width:240px;max-width:42vw;gap:0;flex:none}
.global-company-brand.company-image-banner>span:last-child{display:none}
.global-company-brand.company-image-banner #header-company-logo{display:block;width:100%;min-width:0;height:auto;aspect-ratio:500/118;border:0;border-radius:10px;box-shadow:none;overflow:hidden}
.global-company-brand.company-image-banner #header-company-logo img{display:block;width:100%;height:100%;object-fit:contain;border-radius:inherit}
@media(max-width:600px){.global-company-brand.company-image-banner{width:200px;max-width:38vw}}

/* Company banners share the header's 500 x 118 framing at every preview size. */
.project-icon-editor-backdrop[data-kind="company"][data-type="image"].project-visual-horizontal .project-icon-stage,
.fb-company-create-modal .fb-company-identity-editor .visual-preview.visual-horizontal:has(img) {
  position:relative;
  width:100%;
  height:auto;
  min-height:0;
  aspect-ratio:500/118;
  border:0;
  border-radius:14px;
  box-shadow:none;
  outline:1px solid var(--line);
}
.project-icon-editor-backdrop[data-kind="company"][data-type="image"].project-visual-horizontal .project-icon-stage img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-height:none;
  object-fit:contain;
}
.project-icon-editor-backdrop[data-kind="company"][data-type="image"].project-visual-horizontal .project-icon-stage {
  /* El marco contiene el fondo desenfocado y la imagen se ajusta completa. */
  overflow:hidden;
}
.fb-company-create-modal .fb-company-identity-editor .visual-preview.visual-horizontal:has(img) {
  border-radius:10px;
  overflow:hidden;
  outline:0;
}
.fb-company-create-modal .fb-company-identity-editor .visual-preview.visual-horizontal:has(img) img {
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  object-fit:contain!important;
}
.fb-company-preview-top.company-image-banner { grid-template-columns:34px 78px 26px minmax(0,1fr); }
.fb-company-preview-top.company-image-banner > em { position:relative;width:min(100%,160px);min-width:0;height:auto;aspect-ratio:500/118;justify-self:start;border-radius:0;overflow:hidden; }
.fb-company-preview-top.company-image-banner > em img { position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain; }
.fb-company-preview-top.company-image-banner > strong { display:none; }

/* Keep the company title, navigation and close control visible while scrolling. */
.fb-company-sticky-header {
  position:sticky;
  top:-30px;
  z-index:10;
  display:grid;
  grid-template-columns:minmax(260px,.8fr) minmax(0,1.2fr);
  align-items:center;
  gap:24px;
  margin:-30px -36px 0;
  padding:48px 36px 22px;
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
.fb-company-sticky-header > .close { position:absolute;top:12px;right:14px;width:30px;height:30px;border:0;background:transparent;color:var(--muted);font-size:24px; }
.fb-company-sticky-title > .eyebrow { margin:0 0 4px;color:var(--accent);font-size:10px;letter-spacing:.15em; }
.fb-company-sticky-header .fb-company-wizard-heading { margin:0;padding:0; }
.fb-company-sticky-header .fb-company-wizard-heading h2 { margin:0;font-size:clamp(24px,2.5vw,36px); }
.fb-company-sticky-header .fb-company-wizard-heading p { display:none; }
.fb-company-sticky-header .fb-company-wizard-steps { gap:18px;margin:0; }
.fb-company-sticky-header .fb-company-wizard-steps > button { grid-template-columns:40px minmax(0,1fr);gap:12px;margin:0; }
.fb-company-sticky-header .fb-company-wizard-steps i { width:40px;height:40px; }
.fb-company-sticky-header .fb-company-wizard-steps > button::after { top:20px; }
.fb-company-sticky-header .fb-company-wizard-steps b { font-size:13px; }
.fb-company-sticky-header .fb-company-wizard-steps small { font-size:10px; }
@media(max-width:900px) {
  .fb-company-sticky-header { grid-template-columns:minmax(0,1fr);gap:18px; }
}
@media(max-width:760px) {
  .fb-company-sticky-header { top:-22px;margin:-22px -16px 0;padding:34px 16px 16px; }
  .fb-company-sticky-header .fb-company-wizard-steps { gap:8px; }
  .fb-company-sticky-header .fb-company-wizard-steps > button { grid-template-columns:32px minmax(0,1fr);gap:7px; }
  .fb-company-sticky-header .fb-company-wizard-steps i { width:32px;height:32px; }
}

/* User icons share the same base scale in editing, previews and the list. */
.project-icon-editor-backdrop[data-kind="user"] .project-icon-stage,
[data-visual-kind="user"] [data-visual-preview],
.admin-user-avatar,
#user-avatar{container-type:inline-size}
.project-icon-editor-backdrop[data-kind="user"] .project-icon-stage>span,
[data-visual-kind="user"] [data-visual-preview]>.visual-symbol,
.admin-user-avatar>.visual-symbol,
#user-avatar>.visual-symbol{font-size:58cqw;font-family:system-ui,sans-serif;font-weight:400;line-height:1;width:100%;height:100%;display:grid;place-items:center}

.project-icon-editor-controls .visual-format-compact{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.project-icon-editor-controls .visual-format-compact[hidden]{display:none}
.project-icon-editor-controls .visual-format-compact button{display:inline-flex;flex-direction:row;align-items:center;gap:6px;padding:5px 7px;border:1px solid transparent;border-radius:6px;font-size:12px;background:transparent;min-height:32px}
.project-icon-editor-controls .visual-format-compact svg{width:36px;height:24px;flex:none;stroke-width:2}
.project-icon-editor-controls .visual-format-compact button[aria-pressed="true"]{border:1px solid var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--paper));color:var(--accent)}

/* Company symbols use the editor's 30% base size in every representation. */
.project-icon-editor-backdrop[data-kind="company"] .project-icon-stage,
[data-visual-kind="company"]>.visual-editor [data-visual-preview],
.fb-company-identity-editor [data-visual-preview],
#header-company-logo,
[data-company-preview-logo]{container-type:inline-size}
.project-icon-editor-backdrop[data-kind="company"] .project-icon-stage>span,
[data-visual-kind="company"]>.visual-editor [data-visual-preview]>.visual-symbol,
.fb-company-identity-editor [data-visual-preview]>.visual-symbol,
#header-company-logo>.visual-symbol,
[data-company-preview-logo]>.visual-symbol{font-size:30cqw;font-family:system-ui,sans-serif;font-weight:400;font-style:normal;line-height:1;width:100%;height:100%;display:grid;place-items:center}

#admin-view.access-management-active>.admin-grid{display:none}
#admin-view>#admin-list-modal.access-management-inline{position:static;display:block;padding:0;background:transparent;backdrop-filter:none;z-index:auto}
#admin-view>#admin-list-modal.access-management-inline.hidden{display:none}
#admin-view>#admin-list-modal.access-management-inline>.modal{width:100%;max-width:none;max-height:none;margin:0;overflow:visible;box-shadow:none}
.access-management-inline>.modal>.close,.access-management-inline>.modal>.eyebrow,.access-management-inline #admin-list-title{display:none}
.access-list-tools header{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:20px}
.access-list-tools h2{margin:4px 0}.access-list-tools p{color:var(--muted)}
.access-list-filters{display:flex;align-items:end;gap:16px;flex-wrap:wrap;margin-bottom:16px}.access-list-filters label{flex:1;min-width:150px}
.access-list-entry{border:1px solid var(--line);border-radius:12px;margin-bottom:10px;overflow:hidden;background:var(--paper)}
.access-list-entry[hidden]{display:none}.access-list-entry summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px;cursor:pointer}.access-list-entry summary span{font-size:12px;color:var(--muted)}
.access-list-entry .record-edit{align-items:center;margin:0;border:0;border-top:1px solid var(--line)}
.access-list-entry .record-edit>*{align-self:center;margin-top:0;margin-bottom:0}
.access-switch{display:flex!important;align-items:center;gap:9px;cursor:pointer;white-space:nowrap}
.access-switch input[role="switch"]{appearance:none;-webkit-appearance:none;position:relative;width:42px!important;height:24px!important;min-width:42px;margin:0;padding:0;border:1px solid color-mix(in srgb,var(--muted) 55%,var(--line));border-radius:999px;background:color-mix(in srgb,var(--muted) 28%,var(--soft));cursor:pointer;transition:.2s ease}
.access-switch input[role="switch"]::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.22);transition:transform .2s ease}
.access-switch input[role="switch"]:checked{border-color:var(--accent);background:var(--accent)}
.access-switch input[role="switch"]:checked::after{transform:translateX(18px)}
.access-switch input[role="switch"]:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
#access-create-modal{z-index:130}.access-create-form{width:min(540px,95vw);display:grid;gap:14px}
@media(max-width:650px){.access-list-entry summary{align-items:start;flex-direction:column}.access-list-tools header{flex-wrap:wrap}}

#field-change-request-modal,#field-change-review-modal{z-index:150}
.field-change-request-modal,.field-change-review-modal{width:min(900px,95vw);max-height:90dvh;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--accent) var(--paper)}
.field-change-request-modal [data-field-change-control],.field-review-scroll{max-height:60dvh;overflow:auto;padding-right:10px;scrollbar-width:thin;scrollbar-color:var(--accent) var(--paper)}
.field-review-row{padding:16px;margin-bottom:12px;border:1px solid var(--line);border-radius:10px}
.field-review-row>small{display:block;margin-top:5px}.field-review-row p{white-space:pre-wrap;overflow-wrap:anywhere}
.field-review-unchanged{color:var(--muted);background:color-mix(in srgb,var(--paper) 85%,var(--muted));opacity:.65}
.field-review-scroll::-webkit-scrollbar,.field-change-request-modal [data-field-change-control]::-webkit-scrollbar{width:8px}
.field-review-scroll::-webkit-scrollbar-thumb,.field-change-request-modal [data-field-change-control]::-webkit-scrollbar-thumb{background:var(--accent);border-radius:8px}

.field-change-review-modal{display:flex;flex-direction:column;overflow:hidden}
.field-change-review-modal .field-review-scroll{min-height:0;flex:1;max-height:60dvh}
.field-review-footer{flex:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0 0;border-top:1px solid var(--line);background:var(--paper)}
.field-review-footer>span{font-size:12px;color:var(--muted)}
.field-review-footer .primary{background:var(--accent);border-color:var(--accent);color:var(--accent-contrast,#fff)}
.field-review-row [data-review-field-change]{background:var(--paper);color:var(--ink);border:1px solid var(--line)}
.field-review-row [data-review-field-change].review-selected{background:color-mix(in srgb,var(--accent) 16%,var(--paper));border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.field-review-saved .custom-field-actions{color:var(--muted)}
@media(max-width:600px){.field-review-footer{flex-wrap:wrap}.field-review-footer .primary{width:100%}}

@keyframes review-notification-orange{0%,100%{background:var(--paper);color:var(--ink);box-shadow:none}50%{background:#f97316;color:#fff;border-color:#f97316;box-shadow:0 0 0 5px #f9731638}}
#card-custom-fields [data-open-field-review].review-notification-flash{animation:review-notification-orange .8s ease-in-out 3;scroll-margin-block:24px}
@media(prefers-reduced-motion:reduce){#card-custom-fields [data-open-field-review].review-notification-flash{animation-timing-function:steps(1,end)}}

#card-inactivation-request-modal,#card-inactivation-review-modal{z-index:155}
.card-inactivation-modal{width:min(520px,calc(100vw - 28px))}
.card-inactivation-modal>p:not(.eyebrow){color:var(--muted)}
.card-inactivation-details{display:grid;gap:12px;margin:20px 0}
.card-inactivation-details>div{padding:14px;border:1px solid var(--line);border-radius:10px;background:var(--soft)}
.card-inactivation-details dt{margin-bottom:6px;color:var(--muted);font-size:12px;font-weight:700}
.card-inactivation-details dd{margin:0;color:var(--ink);font-weight:600}
[data-inactivation-reason]{white-space:pre-wrap;overflow-wrap:anywhere}
#delete-card:disabled{cursor:not-allowed;opacity:.65}

/* Patrón único para los botones X, basado en el cierre del chat de la tarjeta. */
:is(button.close,button.chat-close,button.popup-close,button.inline-panel-close,button[data-sidebar-close],button[data-remove-pending]){
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  padding:0;
  border:0;
  border-radius:9px;
  background:transparent;
  color:var(--muted);
  font-size:23px;
  line-height:1;
  cursor:pointer;
  transition:background-color .16s ease,color .16s ease,transform .12s ease;
}
:is(button.close,button.chat-close,button.popup-close,button.inline-panel-close,button[data-sidebar-close],button[data-remove-pending]):hover{
  background:color-mix(in srgb,var(--accent) 10%,#fff);
  color:var(--ink);
}
:is(button.close,button.chat-close,button.popup-close,button.inline-panel-close,button[data-sidebar-close],button[data-remove-pending]):focus-visible{
  outline:2px solid color-mix(in srgb,var(--accent) 72%,#fff);
  outline-offset:2px;
  background:color-mix(in srgb,var(--accent) 10%,#fff);
  color:var(--ink);
}
:is(button.close,button.chat-close,button.popup-close,button.inline-panel-close,button[data-sidebar-close],button[data-remove-pending]):active{
  background:color-mix(in srgb,var(--accent) 18%,#fff);
  transform:scale(.94);
}

/* Filtro múltiple de responsables con el mismo lenguaje visual de la tarjeta. */
.board-assignee-filter{
  position:relative;
  min-width:210px;
  display:block;
  padding:0;
  overflow:visible;
}
.board-assignee-filter>summary{
  min-height:34px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:9px;
  padding:5px 9px;
  border:0;
  border-radius:8px;
  background:var(--paper);
  cursor:pointer;
  list-style:none;
}
.board-assignee-filter>summary::-webkit-details-marker{display:none}
.board-assignee-filter>summary span{color:var(--muted);font-size:10px;font-weight:800;text-transform:uppercase}
.board-assignee-filter>summary b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}
.board-assignee-filter[open],.board-assignee-filter.has-selection{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 14%,transparent)}
.board-assignee-filter>[data-assignee-filter-panel]{right:0;left:auto;width:min(360px,calc(100vw - 28px));max-height:min(460px,70vh);overflow:auto}
.assignee-filter-options{display:grid;gap:5px;margin:8px 0;padding:0;border:0}
.assignee-filter-options>label{display:block;cursor:pointer}
.assignee-filter-options input{position:absolute;opacity:0;pointer-events:none}
.assignee-filter-options label>span{min-height:39px;display:flex;align-items:center;gap:8px;padding:5px 7px;border:1px solid var(--line);border-radius:9px;background:var(--paper)}
.assignee-filter-options label>span>i{width:27px;height:27px;display:grid;place-items:center;flex:0 0 27px;border-radius:8px;background:color-mix(in srgb,var(--accent) 10%,var(--soft));color:var(--accent);font-style:normal;font-weight:900}
.assignee-filter-options input:checked+span{border-color:color-mix(in srgb,var(--accent) 58%,var(--line));background:color-mix(in srgb,var(--accent) 10%,var(--paper));box-shadow:inset 3px 0 var(--accent)}
.assignee-filter-options input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.assignee-filter-clear{width:100%;margin-top:3px}
.list-assignee-filter{min-width:0;width:100%}
.list-assignee-filter>[data-assignee-filter-panel]{left:0;right:auto;z-index:30}
/* Virtual keyboards must not turn the fixed action bar into a second viewport. */
@media (max-width:820px) {
  #card-modal.fb-task-modal.mobile-keyboard-open .fb-task-footer {
    position:sticky!important;
    z-index:45;
    bottom:0;
    width:100%;
    margin:auto 0 0;
    border-radius:12px 12px 0 0!important;
    box-shadow:0 -8px 22px rgba(20,30,40,.12);
    backdrop-filter:blur(12px);
  }
  #card-modal.fb-task-modal.mobile-keyboard-open .fb-task-main { padding-bottom:12px; }
  #card-modal.fb-task-modal.mobile-keyboard-open .collab-card { scroll-padding-bottom:16px; }
  #card-modal.fb-task-modal.mobile-keyboard-open.mobile-chat-open .fb-task-chat {
    top:var(--mobile-viewport-top,0px);
    right:0;
    bottom:auto;
    left:0;
    width:100%;
    height:var(--mobile-viewport-height,100dvh);
    max-height:var(--mobile-viewport-height,100dvh);
    border-radius:0;
  }
  #card-modal.fb-task-modal.mobile-keyboard-open.mobile-chat-open .chat-compose {
    padding-bottom:max(9px,env(safe-area-inset-bottom));
  }
}

@media (max-width:820px) {
  #card-modal.fb-task-modal .card-editor-sticky {
    grid-template-columns:minmax(0,1fr) 38px;
    padding-right:12px;
  }
  #card-modal.fb-task-modal .card-editor-sticky > [data-close] {
    position:static;
    grid-column:2;
    grid-row:1 / 3;
    align-self:start;
  }
  #card-modal.fb-task-modal .card-editor-sticky .card-kicker,
  #card-modal.fb-task-modal .card-editor-sticky .title-input {
    grid-column:1;
    min-width:0;
    max-width:100%;
    box-sizing:border-box;
  }
}

@media (max-width:480px) {
  #card-modal.fb-task-modal .card-editor-sticky { padding-right:8px; }
}

/* Card selectors behave as focused dialogs on phones. */
@media (max-width:820px) {
  #card-modal.fb-task-modal:has(.fb-task-main .compact-popover[open])::before {
    content:"";
    position:fixed;
    z-index:140;
    inset:0;
    background:rgba(10,16,22,.42);
    -webkit-backdrop-filter:blur(5px);
    backdrop-filter:blur(5px);
    pointer-events:none;
  }
  #card-modal.fb-task-modal .fb-task-main .compact-popover[open] > .compact-popover-panel {
    position:fixed;
    z-index:150;
    top:calc(var(--mobile-viewport-top,0px) + var(--mobile-viewport-height,100dvh) / 2);
    right:auto;
    bottom:auto;
    left:50%;
    width:min(420px,calc(100vw - 28px));
    max-height:min(70dvh,620px);
    margin:0;
    transform:translate(-50%,-50%);
    border-radius:14px;
    box-shadow:0 24px 70px rgba(5,10,16,.35);
  }
}

/* Project navigation uses stable artwork and can collapse to an icon rail. */
.fb-sidebar .project-link {
  display:grid;
  grid-template-columns:42px minmax(0,1fr);
  align-items:center;
  gap:10px;
  padding:7px 8px;
}
.fb-sidebar .side-button {
  display:flex;
  align-items:center;
  gap:10px;
}
@media (min-width:1101px) {
  .fb-app-shell .fb-sidebar,
  .fb-app-shell .page { transition:width .22s ease,margin-left .22s ease; }
  .fb-app-shell.sidebar-compact .fb-sidebar { width:76px;padding-inline:10px; }
  .fb-app-shell.sidebar-compact .page { width:calc(100% - 76px);margin-left:76px; }
  .fb-app-shell.sidebar-compact .side-head { display:none; }
  .fb-app-shell.sidebar-compact .sidebar-compact-open { width:42px;height:40px;display:grid;place-items:center;flex:0 0 40px;margin:0 auto 8px;padding:0; }
  .fb-app-shell.sidebar-compact .side-head .brand,
  .fb-app-shell.sidebar-compact .side-head [data-sidebar-close],
  .fb-app-shell.sidebar-compact .side-label-row .side-label,
  .fb-app-shell.sidebar-compact .sidebar-project-copy,
  .fb-app-shell.sidebar-compact .side-button > span { display:none; }
  .fb-app-shell.sidebar-compact .side-label-row { justify-content:center;margin-inline:0; }
  .fb-app-shell.sidebar-compact .sidebar-project-add { width:42px;height:36px; }
  .fb-app-shell.sidebar-compact .project-link { grid-template-columns:42px;justify-content:center;padding-inline:7px; }
  .fb-app-shell.sidebar-compact .side-button { justify-content:center;padding-inline:0; }
  .fb-app-shell.sidebar-compact .page>header [data-sidebar-open] { display:none; }
}
.dynamic-filter-trigger{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.dynamic-filter-trigger svg{width:18px;height:18px}
.dynamic-filter-trigger> b{display:grid;place-items:center;min-width:21px;height:21px;padding:0 6px;border-radius:999px;background:var(--accent);color:var(--accent-contrast,#fff);font-size:11px}
.dynamic-filter-trigger.has-selection{border-color:var(--accent);color:var(--accent)}
.dynamic-filter-modal{width:min(900px,calc(100vw - 32px));max-height:min(760px,calc(100dvh - 32px));display:flex;flex-direction:column;overflow:hidden}
.dynamic-filter-modal>.hint{margin-top:-4px}
.dynamic-filter-layout{display:grid;grid-template-columns:minmax(210px,32%) minmax(0,1fr);gap:18px;min-height:340px;overflow:hidden}
.dynamic-filter-fields{min-width:0;display:block;margin-top:0;overflow-x:hidden;overflow-y:auto;padding:4px 8px 4px 0;border-right:1px solid var(--line);border-bottom:0}
.dynamic-filter-fields>small{display:block;margin:14px 8px 6px;color:var(--muted);font-size:10px;font-weight:800;letter-spacing:.11em;text-transform:uppercase}
.dynamic-filter-fields>small:first-child{margin-top:3px}
.dynamic-filter-fields button{width:100%;max-width:100%;min-height:42px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 11px;border:1px solid transparent;border-radius:10px;background:transparent;color:var(--ink);text-align:left;box-sizing:border-box;overflow:hidden}
.dynamic-filter-fields button>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dynamic-filter-fields button:hover{background:color-mix(in srgb,var(--accent) 8%,transparent)}
.dynamic-filter-fields button.active{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));background:color-mix(in srgb,var(--accent) 13%,var(--panel));color:var(--accent)}
.dynamic-filter-fields button b{display:grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--accent);color:var(--accent-contrast,#fff);font-size:11px}
.dynamic-filter-fields button i{font-size:20px;font-style:normal;color:var(--muted)}
.dynamic-filter-values{display:flex;min-width:0;flex-direction:column;overflow:hidden}
.dynamic-filter-values>header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.dynamic-filter-values>header small{color:var(--muted)}
.dynamic-filter-values h3{margin:3px 0 0}
.dynamic-filter-search{margin:0 0 10px}
.dynamic-checklist-mode{display:grid;grid-template-columns:auto minmax(230px,1fr);align-items:center;gap:7px 14px;margin:0 0 10px;padding:10px 12px;border:1px solid var(--line);border-radius:11px;background:color-mix(in srgb,var(--accent) 5%,var(--panel))}
.dynamic-checklist-mode>span{font-size:12px;font-weight:800}
.dynamic-checklist-mode>div{display:grid;grid-template-columns:1fr 1fr;padding:3px;border-radius:9px;background:var(--soft)}
.dynamic-checklist-mode button{min-height:34px;padding:6px 10px;border:0;border-radius:7px;background:transparent;color:var(--muted);font-weight:800}
.dynamic-checklist-mode button.active{background:var(--panel);color:var(--accent);box-shadow:0 2px 8px rgba(0,0,0,.1)}
.dynamic-checklist-mode>small{grid-column:1/-1;color:var(--muted)}
.dynamic-filter-option-list{display:grid;align-content:start;gap:7px;overflow:auto;padding:2px 5px 10px 2px}
.dynamic-filter-option-list :is(label,.dynamic-field-option){width:100%;display:grid;grid-template-columns:minmax(0,1fr);align-items:center;gap:12px;min-height:58px;padding:9px 14px;border:1px solid var(--line);border-radius:11px;background:var(--panel);color:var(--ink);text-align:left;box-sizing:border-box;cursor:pointer}
.dynamic-filter-option-list label{grid-template-columns:20px minmax(0,1fr)}
.dynamic-filter-option-list label:has(input:checked){border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--panel))}
.dynamic-field-option.selected{border-color:color-mix(in srgb,var(--accent) 48%,var(--line));background:color-mix(in srgb,var(--accent) 12%,var(--panel));color:var(--accent)}
.dynamic-checklist-option input{width:18px;height:18px;margin:0;accent-color:var(--accent)}
.dynamic-filter-option-list span{display:flex;min-width:0;align-items:center;justify-content:space-between;gap:12px}
.dynamic-filter-option-list b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dynamic-filter-option-list small{flex:none;color:var(--muted)}
.dynamic-filter-footer{display:flex;align-items:center;gap:12px;margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.dynamic-filter-footer span{flex:1;color:var(--muted);font-size:13px;text-align:center}
@media(max-width:680px){.dynamic-filter-trigger span{display:none}.dynamic-filter-modal{width:calc(100vw - 20px);max-height:calc(100dvh - 20px);padding:22px 16px 16px}.dynamic-filter-layout{grid-template-columns:1fr;grid-template-rows:auto minmax(250px,1fr);gap:10px}.dynamic-filter-fields{display:flex;gap:7px;margin-top:0;overflow-x:auto;overflow-y:hidden;padding:2px 0 9px;border-right:0;border-bottom:1px solid var(--line)}.dynamic-filter-fields>small{display:none}.dynamic-filter-fields button{width:auto;flex:none}.dynamic-checklist-mode{grid-template-columns:1fr}.dynamic-checklist-mode>small{grid-column:1}.dynamic-filter-footer{flex-wrap:wrap}.dynamic-filter-footer span{order:-1;flex-basis:100%}.dynamic-filter-footer button{flex:1}}