:root{
  --bg:#0d1726;
  --bg2:#122033;
  --panel:#131f31;
  --panel-2:#182638;
  --panel-3:#1d2d42;
  --text:#edf2fb;
  --muted:#91a1bb;
  --line:#2c3f5d;
  --accent:#2f7cf6;
  --accent-2:#27b2a4;
  --success:#31c48d;
  --warning:#d48d34;
  --danger:#d85d5d;
  --shadow:0 18px 44px rgba(4,10,19,.24);
  --shadow-soft:0 10px 24px rgba(4,10,19,.14);
  --radius:24px;
  --radius-sm:18px;
  --surface:rgba(255,255,255,.04);
  --surface-2:rgba(255,255,255,.07);
}

:root[data-theme="light"]{
  --bg:#f4f7fb;
  --bg2:#ebf0f7;
  --panel:#ffffff;
  --panel-2:#f7f9fc;
  --panel-3:#eef3f9;
  --text:#142235;
  --muted:#64748b;
  --line:#d8e0ea;
  --accent:#1666d3;
  --accent-2:#1f9e92;
  --success:#1f9d68;
  --warning:#c97b1c;
  --danger:#d55454;
  --shadow:0 16px 36px rgba(15,23,42,.08);
  --shadow-soft:0 8px 22px rgba(15,23,42,.05);
  --surface:rgba(247,249,252,.96);
  --surface-2:#ffffff;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  font-family:"Aptos","Segoe UI Variable Text","Segoe UI",Tahoma,sans-serif;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:linear-gradient(180deg, #162235 0%, var(--bg) 22%, #0d1726 100%);
}

:root[data-theme="light"] body{
  background:linear-gradient(180deg, #f8fbff 0%, var(--bg) 26%, #f3f7fb 100%);
}

a{color:inherit;text-decoration:none}
.container{
  width:100%;
  max-width:none;
  margin:0;
  padding:24px clamp(20px,2.8vw,42px) 40px;
}
main.container{
  flex:1 0 auto;
  padding-top:24px;
}

.topbar{
  position:sticky;top:0;z-index:10;
  background:rgba(13,23,38,.92);
  border-bottom:1px solid rgba(255,255,255,.06);
  backdrop-filter:blur(18px);
}
.topbar__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding-top:14px;
  padding-bottom:14px;
}

:root[data-theme="light"] .topbar{
  background:rgba(255,255,255,.94);
  border-bottom:1px solid rgba(20,34,53,.08);
}

.brand{display:flex;align-items:center;gap:14px}
.brand__logo{
  width:38px;height:38px;border-radius:13px;display:grid;place-items:center;
  background:linear-gradient(135deg,#1559b9,#2f7cf6);
  border:1px solid rgba(255,255,255,.1);
  color:#f6fbff;font-weight:800;letter-spacing:.04em;
  box-shadow:0 12px 24px rgba(20,51,93,.22);
}
.brand__name{
  font-size:15px;
  font-weight:800;
  line-height:1.1;
  letter-spacing:-.02em;
}
.brand__tag{font-size:12px;color:var(--muted);margin-top:3px}

:root[data-theme="light"] .brand__logo{
  background:linear-gradient(135deg,#1559b9,#2380de);
  border-color:rgba(21,89,185,.12);
  color:#ffffff;
  box-shadow:0 10px 20px rgba(22,86,106,.18);
}

:root[data-theme="light"] .brand__name{
  color:#142235;
}

:root[data-theme="light"] .brand__tag{
  color:#64748b;
}

.nav{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.nav-toggle{
  display:none;
  width:44px;
  height:44px;
  padding:0;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  background:rgba(255,255,255,.04);
  color:var(--text);
  cursor:pointer;
}
.nav-toggle span{
  display:block;
  width:18px;
  height:2px;
  margin:4px auto;
  background:currentColor;
  border-radius:999px;
}
:root[data-theme="light"] .nav-toggle{
  background:rgba(247,249,252,.96);
  border-color:rgba(20,34,53,.08);
}
.theme-toggle{
  display:inline-flex;align-items:center;gap:6px;
  min-height:44px;padding:5px;border-radius:14px;
  border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);
  color:var(--text);cursor:pointer
}
.theme-toggle__sun,.theme-toggle__moon{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:62px;padding:8px 10px;border-radius:10px;
  font-size:12px;font-weight:700;transition:all .18s ease
}
:root[data-theme="dark"] .theme-toggle__moon{
  background:linear-gradient(135deg,var(--accent),#3d6bdb);
  color:#fff;box-shadow:0 10px 18px rgba(35,72,145,.28)
}
:root[data-theme="light"] .theme-toggle{
  background:rgba(247,249,252,.96);
  border-color:rgba(20,34,53,.08);
}
:root[data-theme="light"] .theme-toggle__sun{
  background:linear-gradient(135deg,var(--accent),#0e8aa1);
  color:#fff;box-shadow:0 10px 18px rgba(10,114,135,.18)
}
.nav__link,.nav__btn,.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:0 16px;border-radius:14px;border:1px solid transparent;
  transition:all .18s ease;font-weight:700
}
.nav__link{color:var(--muted)}
.nav__link:hover{color:var(--text);background:rgba(255,255,255,.06)}
:root[data-theme="light"] .nav__link:hover{background:rgba(20,34,53,.04)}
:root[data-theme="light"] .nav__link{color:#52637c}
.nav__btn,.btn{
  background:var(--accent);
  color:white;border-color:rgba(255,255,255,.08);
  box-shadow:0 10px 22px rgba(22,102,211,.24);
  cursor:pointer
}
.nav__btn:hover,.btn:hover{transform:translateY(-1px);filter:brightness(1.05)}
.btn--ghost{
  background:var(--surface);
  color:var(--text);
  border-color:rgba(255,255,255,.08);
  box-shadow:none
}
.btn--ghost:hover{background:var(--surface-2)}
.btn--danger{
  background:var(--danger);
  border-color:rgba(255,255,255,.08);
  box-shadow:0 10px 22px rgba(216,93,93,.2);
  color:#fff;
}
.btn--danger:hover{
  filter:brightness(1.04);
}
:root[data-theme="light"] .btn--ghost{
  background:rgba(247,249,252,.96);
  border-color:rgba(20,34,53,.08);
}
:root[data-theme="light"] .btn--ghost:hover{
  background:#ffffff;
}
.nav__logout{margin:0}

.card{
  background:var(--panel);
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--radius);
  padding:26px;
  box-shadow:var(--shadow);
  margin:20px 0;
}
:root[data-theme="light"] .card{
  background:var(--panel);
  border-color:rgba(20,34,53,.08);
}
.card__head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.card__head--stack{align-items:flex-start}
.card--compact{max-width:760px}

.hero{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;padding:6px 0 8px}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap}

h1,h2,h3{margin:0;color:#f6f8ff;letter-spacing:-.02em}
:root[data-theme="light"] h1,
:root[data-theme="light"] h2,
:root[data-theme="light"] h3{color:#10233b}
h1{font-size:clamp(2rem,2.2vw,2.8rem);margin-bottom:10px;font-weight:800}
h2{font-size:clamp(1.45rem,1.4vw,2rem);margin-bottom:10px;font-weight:800}
h3{font-size:1.08rem;margin-bottom:10px;font-weight:800}
p{margin:0}

.muted{color:var(--muted)}
.small{font-size:12px}
.strong{font-weight:700}
.mono{font-family:Consolas,"Courier New",monospace}

.alert{
  margin:16px 0;padding:15px 18px;border-radius:16px;border:1px solid rgba(255,255,255,.05)
}
.alert--success{background:rgba(49,196,141,.12);border-color:rgba(49,196,141,.32)}
.alert--danger{background:rgba(248,113,113,.12);border-color:rgba(248,113,113,.3)}
.alert--warning{background:rgba(246,173,85,.12);border-color:rgba(246,173,85,.32)}

.form{display:flex;flex-direction:column;gap:16px}
.form--inline{flex-direction:row;align-items:center;gap:10px;flex-wrap:wrap}
.form__actions{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch}

.field{display:flex;flex-direction:column;gap:8px;min-width:0}
.field span{font-size:12px;font-weight:700;color:#dbe6ff;letter-spacing:.02em}
:root[data-theme="light"] .field span{color:#24364d}
input,select,textarea{
  width:100%;padding:14px 15px;border-radius:14px;border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);color:var(--text);outline:none;font:inherit
}
:root[data-theme="light"] input,
:root[data-theme="light"] select,
:root[data-theme="light"] textarea{
  background:rgba(255,255,255,.96);
  border-color:rgba(20,34,53,.09);
  color:#15263b;
}
input::placeholder,textarea::placeholder{color:#7f93b8}
input:focus,select:focus,textarea:focus{
  border-color:rgba(79,140,255,.75);
  box-shadow:0 0 0 4px rgba(79,140,255,.16)
}
textarea{resize:vertical;min-height:110px}

.toggle{
  display:flex;align-items:center;gap:12px;padding:15px 16px;border:1px solid rgba(255,255,255,.08);
  border-radius:16px;background:rgba(255,255,255,.03)
}
:root[data-theme="light"] .toggle{
  background:var(--panel-2);
  border-color:rgba(20,34,53,.08);
}
.toggle input{width:auto;margin:0}

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

.stats-grid{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  gap:16px;margin:24px 0 28px
}
.stat-card{
  min-height:118px;padding:20px;border-radius:18px;
  background:var(--panel-2);
  border:1px solid rgba(255,255,255,.06);
  display:flex;flex-direction:column;justify-content:space-between
}
:root[data-theme="light"] .stat-card{
  background:var(--panel-2);
  border-color:rgba(20,34,53,.08);
}
:root .stat-card--warn{border-color:rgba(212,141,52,.28);background:rgba(212,141,52,.12)}
:root .stat-card--danger{border-color:rgba(216,93,93,.26);background:rgba(216,93,93,.1)}
:root[data-theme="light"] .stat-card--warn{
  background:rgba(201,123,28,.08)
}
:root[data-theme="light"] .stat-card--danger{
  background:rgba(213,84,84,.08)
}
.stat-card__label{
  display:block;font-size:11px;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.12em
}
.stat-card__value{font-size:clamp(2rem,2vw,2.6rem);font-weight:800;color:#fff;line-height:1}
:root[data-theme="light"] .stat-card__value{color:#10233b}

.filters{
  display:grid;grid-template-columns:2.2fr repeat(4,minmax(0,1fr)) auto;
  gap:12px;align-items:end;
  padding:18px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:18px;
  background:var(--panel-2);
  margin-bottom:24px
}
.filters--products{
  grid-template-columns:2fr 1fr 1.2fr 1.2fr 140px 160px 170px auto;
}
:root[data-theme="light"] .filters{
  background:var(--panel-2);
  border-color:rgba(20,34,53,.08);
  box-shadow:none;
}

.task-board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.task-card{
  display:block;padding:22px;border-radius:20px;border:1px solid rgba(255,255,255,.06);
  background:var(--panel-2);
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
  min-height:250px;
  box-shadow:var(--shadow-soft)
}
:root[data-theme="light"] .task-card{
  background:var(--panel);
  border-color:rgba(20,34,53,.08)
}
.task-card:hover{
  transform:translateY(-3px);
  border-color:rgba(47,124,246,.24);
  box-shadow:0 16px 34px rgba(4,10,19,.16)
}
.task-card__top{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:18px}
.task-card__title{font-size:clamp(1.35rem,1.2vw,1.7rem);font-weight:800;line-height:1.15;color:#f8fbff}
:root[data-theme="light"] .task-card__title{color:#10233b}
:root[data-theme="light"] .task-card__summary{color:#4e627e}
.task-card__meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.task-card__summary{
  margin-top:14px;
  max-width:58ch;
  color:var(--muted);
  line-height:1.6;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.task-card__grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px
}
.task-card__grid > div{
  padding:0;
  border-radius:0;
  background:transparent;
  border:none;
  border-top:1px solid rgba(255,255,255,.08);
  padding-top:14px
}
:root[data-theme="light"] .task-card__grid > div{
  background:transparent
}
:root[data-theme="light"] .task-card__grid > div{
  border-top-color:rgba(21,38,59,.08);
}
.task-card__label{
  display:block;margin-bottom:7px;font-size:11px;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.12em
}

.progress-ring{
  min-width:78px;height:78px;border-radius:50%;display:grid;place-items:center;
  background:
    radial-gradient(circle at center, #131f31 54%, transparent 55%),
    conic-gradient(var(--accent) calc(var(--progress, 0) * 1%), rgba(145,161,187,.2) 0);
  border:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)
}
:root[data-theme="light"] .progress-ring{
  background:
    radial-gradient(circle at center, #ffffff 51%, transparent 52%),
    conic-gradient(var(--accent) calc(var(--progress, 0) * 1%), #dbe3ee 0);
}
.progress-ring strong{font-size:16px;font-weight:800}

.progress-bar{
  width:100%;height:14px;background:rgba(9,20,35,.5);border-radius:999px;overflow:hidden;
  margin:10px 0 8px;border:none
}
.progress-bar span{
  display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--accent-2),var(--accent))
}

.pill{
  display:inline-flex;align-items:center;gap:8px;padding:7px 10px;border-radius:999px;
  font-size:12px;font-weight:700;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04)
}
:root[data-theme="light"] .pill{
  background:var(--panel-2);
  border-color:rgba(20,34,53,.08);
}
.pill--new{background:rgba(79,140,255,.14);border-color:rgba(79,140,255,.34)}
.pill--in_progress{background:rgba(49,196,141,.13);border-color:rgba(49,196,141,.3)}
.pill--blocked{background:rgba(246,173,85,.14);border-color:rgba(246,173,85,.34)}
.pill--done{background:rgba(49,196,141,.16);border-color:rgba(49,196,141,.32)}
.pill--cancelled{background:rgba(248,113,113,.16);border-color:rgba(248,113,113,.32)}
.pill--soft{background:rgba(151,167,198,.12);border-color:rgba(151,167,198,.22)}
.pill--priority{background:rgba(123,224,214,.1);border-color:rgba(123,224,214,.26)}
.pill--late{background:rgba(248,113,113,.16);border-color:rgba(248,113,113,.34)}
.pill--soon{background:rgba(246,173,85,.16);border-color:rgba(246,173,85,.34)}

.checklist{
  border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:10px;background:rgba(255,255,255,.02);
  max-height:240px;overflow:auto
}
:root[data-theme="light"] .checklist{
  background:var(--panel-2);
  border-color:rgba(20,34,53,.08);
}
.check{display:flex;gap:10px;align-items:flex-start;padding:8px;border-radius:12px}
.check:hover{background:rgba(19,35,61,.9)}
:root[data-theme="light"] .check:hover{background:rgba(255,255,255,.9)}
.check input{width:auto;margin-top:3px}

.prose{line-height:1.72}
.info{
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  padding:18px;
  background:rgba(255,255,255,.02)
}
:root[data-theme="light"] .info{
  background:var(--panel-2);
  border-color:rgba(20,34,53,.08);
}
.info__label{
  font-size:11px;color:var(--muted);margin-bottom:9px;text-transform:uppercase;letter-spacing:.12em;font-weight:700
}
.info-stack{display:grid;gap:14px}

.details-layout{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(320px,.8fr);gap:18px;margin-top:22px}
.details-side,.details-main{display:grid;gap:14px;align-content:start}

.meta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:8px}
.mt{margin-top:16px}

.list{margin:8px 0 0;padding-left:18px}
.subtask-list{display:grid;gap:18px}
.subtask-card{
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  padding:22px;
  background:var(--panel);
  box-shadow:var(--shadow-soft);
}
:root[data-theme="light"] .subtask-card{
  background:var(--panel);
  border-color:rgba(20,34,53,.08);
}
.subtask-card__header{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:flex-start;
  margin-bottom:18px;
}
.subtask-card__title-wrap{display:grid;gap:10px}
.subtask-card__title{
  margin:0;
  font-size:24px;
  line-height:1.2;
}
.subtask-card__badges{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.subtask-card__state{
  min-width:220px;
  padding:14px 16px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
}
.subtask-card__state--done{
  border-color:rgba(49,196,141,.22);
  background:rgba(49,196,141,.06);
}
.subtask-card__state-label{
  display:block;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
  margin-bottom:6px;
  font-weight:700;
}
.subtask-overview{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-bottom:16px;
}
.subtask-overview__item{
  padding:10px 0;
  border-radius:0;
  border:none;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:transparent;
}
:root[data-theme="light"] .subtask-overview__item{
  background:transparent;
}
:root[data-theme="light"] .subtask-overview__item{
  border-bottom-color:rgba(21,38,59,.08);
}
.subtask-overview__label,
.subtask-section__label{
  display:block;
  margin-bottom:6px;
  font-size:11px;
  font-weight:700;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.08em;
}
.subtask-overview__value{
  line-height:1.55;
  font-weight:600;
}
.subtask-section{
  margin-top:16px;
  padding:16px 0 0;
  border-radius:0;
  border:none;
  border-top:1px solid rgba(255,255,255,.08);
  background:transparent;
}
:root[data-theme="light"] .subtask-section{
  background:transparent;
}
:root[data-theme="light"] .subtask-section{
  border-top-color:rgba(21,38,59,.08);
}
.subtask-section__head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
  margin-bottom:14px;
}
.approval-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:12px;
}
.approval-card{
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.02);
}
:root[data-theme="light"] .approval-card{
  background:var(--panel-2);
  border-color:rgba(20,34,53,.08);
}
.approval-card--done{
  border-color:rgba(49,196,141,.22);
  background:rgba(49,196,141,.04);
}
.approval-card--waiting{
  border-color:rgba(34,57,95,.45);
  background:transparent;
}
.approval-card--neutral{
  border-color:rgba(34,57,95,.45);
  background:transparent;
}
.approval-card__title{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
  margin-bottom:6px;
  font-weight:700;
}
.approval-card__value{
  font-weight:800;
  margin-bottom:6px;
}
.approval-card__status{
  line-height:1.5;
}
.comment-thread{
  display:grid;
  gap:12px;
}
.comment{
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  padding:16px;
  background:rgba(255,255,255,.02);
  margin-top:10px;
}
:root[data-theme="light"] .comment{
  background:var(--panel-2);
  border-color:rgba(20,34,53,.08);
}
.comment--reply{
  margin-left:28px;
  border-style:solid;
  background:rgba(16,29,50,.14);
}
:root[data-theme="light"] .comment--reply{
  background:rgba(250,244,234,.92);
}
.comment__head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
  flex-wrap:wrap;
  margin-bottom:10px;
}
.comment__meta{
  font-size:12px;
  color:var(--muted);
  margin-top:2px;
}
.comment__body{
  line-height:1.7;
}
.comment-form{
  margin-top:14px;
  padding-top:14px;
  border-top:1px dashed rgba(34,57,95,.7);
}
.comment-form--new{
  margin-top:18px;
}
.comment-form__actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
}
.mention-box{
  display:grid;
  gap:4px;
  margin-top:8px;
  padding:8px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  background:rgba(255,255,255,.03);
}
:root[data-theme="light"] .mention-box{
  background:var(--panel-2);
  border-color:rgba(20,34,53,.08);
}
.mention-box__item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
  padding:8px 10px;
  border:none;
  border-radius:10px;
  background:transparent;
  color:var(--text);
  font:inherit;
  text-align:left;
  cursor:pointer;
}
.mention-box__item:hover,
.mention-box__item.is-active{
  background:rgba(255,255,255,.06);
}
:root[data-theme="light"] .mention-box__item:hover,
:root[data-theme="light"] .mention-box__item.is-active{
  background:#fff;
}
.mention-box__item small{
  color:var(--muted);
}
.action-group{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:16px;
}

.timeline{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:10px}
.timeline li{
  display:grid;gap:4px;padding:13px 14px;border:1px solid rgba(255,255,255,.08);border-radius:16px;background:rgba(255,255,255,.02)
}
:root[data-theme="light"] .timeline li{
  background:var(--panel-2);
  border-color:rgba(20,34,53,.08);
}

.table{display:flex;flex-direction:column;border:1px solid rgba(34,57,95,.95);border-radius:18px;overflow:hidden}
.table__row{
  display:grid;grid-template-columns:2fr 2fr 1fr 1fr;gap:10px;padding:12px 14px;align-items:center;
  border-bottom:1px solid rgba(34,57,95,.9)
}
.table__row:last-child{border-bottom:none}
.table__head{
  background:rgba(24,43,72,.95);color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.08em;font-weight:700
}
:root[data-theme="light"] .table__head{
  background:rgba(241,231,216,.92)
}
.table--compact .table__row{grid-template-columns:1.4fr 1.8fr .8fr 1fr}

.member-table{
  display:grid;
  gap:10px;
  margin-top:8px;
}
.member-table__head,
.member-table__row{
  display:grid;
  grid-template-columns:minmax(0,2fr) 150px 130px 150px;
  gap:12px;
  align-items:center;
}
.member-table__head{
  padding:0 12px 8px;
  color:var(--muted);
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.12em;
}
.member-table__row{
  padding:14px 12px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  background:rgba(255,255,255,.03);
}
:root[data-theme="light"] .member-table__row{
  background:var(--panel-2);
  border-color:rgba(20,34,53,.08);
}
.member-table__identity{
  display:grid;
  gap:4px;
  min-width:0;
}
.member-table__identity strong,
.member-table__identity span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.icon-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
}
.icon-actions__form{
  margin:0;
}
.icon-btn{
  width:38px;
  height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  color:var(--text);
  cursor:pointer;
  transition:all .18s ease;
}
:root[data-theme="light"] .icon-btn{
  background:#fff;
  border-color:rgba(20,34,53,.08);
}
.icon-btn:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.08);
}
:root[data-theme="light"] .icon-btn:hover{
  background:var(--panel-2);
}
.icon-btn svg{
  width:18px;
  height:18px;
  fill:currentColor;
}
.icon-btn--danger{
  color:var(--danger);
}
.icon-btn:disabled{
  opacity:.45;
  cursor:not-allowed;
  transform:none;
}

.note{
  margin-top:14px;padding:12px 14px;border-radius:14px;border:1px dashed rgba(79,140,255,.45);background:rgba(79,140,255,.08)
}

.wc-products{
  display:grid;
  gap:18px;
}
.wc-product-card{
  padding:10px;
}
.wc-product-card__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  margin-bottom:18px;
}
.wc-product-card__image{
  width:92px;
  height:92px;
  object-fit:cover;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
}
.wc-product-card__quick-fields{
  display:grid;
  grid-template-columns:minmax(220px,2.2fr) minmax(140px,1fr) minmax(140px,.9fr) minmax(140px,.9fr);
  gap:12px;
  margin-bottom:18px;
}
.field--compact{
  gap:6px;
}
.field--compact span,
.field--inline-status span{
  font-size:12px;
}
.field--compact input[readonly]{
  cursor:default;
}
.field--inline-status{
  min-width:220px;
  margin-left:0;
  order:2;
}
.field--inline-status select{
  min-width:220px;
}
.field--inline-status__select{
  height:44px;
  min-height:44px;
  padding-top:0;
  padding-bottom:0;
}
.form__actions .btn{height:44px}
.form__actions .btn--ghost{order:3}
.wc-product-card--details{
  margin-top:14px;
}
.wc-list{
  display:grid;
  gap:12px;
}
.wc-list__head,
.wc-list__row{
  display:grid;
  grid-template-columns:minmax(0,2fr) 120px 120px minmax(0,1.5fr) 140px;
  gap:12px;
  align-items:center;
}
.wc-list__head{
  padding:0 14px 6px;
}
.wc-list__sort{
  display:flex;
  align-items:center;
  gap:6px;
  padding:0;
  border:none;
  background:transparent;
  color:var(--muted);
  font:inherit;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.12em;
  cursor:pointer;
}
.wc-list__sort::after{
  content:"";
  opacity:.35;
}
.wc-list__sort[data-sort-direction="asc"]::after{
  content:"↑";
  opacity:1;
}
.wc-list__sort[data-sort-direction="desc"]::after{
  content:"↓";
  opacity:1;
}
.wc-list__item{
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  background:var(--panel-2);
  overflow:hidden;
}
:root[data-theme="light"] .wc-list__item{
  border-color:rgba(20,34,53,.08);
}
.wc-list__row{
  width:100%;
  padding:16px 18px;
  border:none;
  background:transparent;
  color:var(--text);
  font:inherit;
  text-align:left;
  cursor:pointer;
}
.wc-list__row:hover{
  background:rgba(255,255,255,.04);
}
:root[data-theme="light"] .wc-list__row:hover{
  background:rgba(20,34,53,.03);
}
.wc-list__row span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.wc-list__product{
  display:grid;
  gap:4px;
  min-width:0;
}
.wc-list__product strong,
.wc-list__product small{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.wc-list__product small{
  color:var(--muted);
}
.wc-list__details{
  padding:10px;
  border-top:1px solid rgba(255,255,255,.08);
}
:root[data-theme="light"] .wc-list__details{
  border-top-color:rgba(20,34,53,.08);
}
.wc-list__details[hidden]{
  display:none !important;
}
.wc-list__details.is-loading{
  min-height:88px;
}
.wc-list__loading{
  padding:18px 4px 4px;
  color:var(--muted);
  font-size:14px;
}
.wc-product-card{
  position:relative;
}
.wc-product-card__processing{
  position:absolute;
  inset:0;
  z-index:8;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  border-radius:18px;
  background:rgba(10,18,32,.42);
  backdrop-filter:blur(3px);
}
.wc-product-card__processing[hidden]{
  display:none !important;
}
:root[data-theme="light"] .wc-product-card__processing{
  background:rgba(255,255,255,.68);
}
.wc-product-card__spinner{
  width:54px;
  height:54px;
  border-radius:999px;
  border:4px solid rgba(255,255,255,.24);
  border-top-color:var(--accent);
  border-right-color:var(--accent-2);
  animation:wc-spin .9s linear infinite;
  box-shadow:0 10px 24px rgba(0,0,0,.18);
}
:root[data-theme="light"] .wc-product-card__spinner{
  border-color:rgba(20,34,53,.12);
  border-top-color:var(--accent);
  border-right-color:var(--accent-2);
}
.wc-product-card__processing-text{
  font-weight:700;
  color:var(--text);
}
@keyframes wc-spin{
  to{transform:rotate(360deg)}
}
.card__head-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  flex-wrap:wrap;
}
.wc-grok-inline{
  min-width:0;
}
.wc-product-card__description-grid{
  display:block;
}
.editor__toolbar--with-grok{align-items:center}
.switch--toolbar{
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  height:36px;
  min-height:36px;
  padding:0 12px;
  border-radius:12px;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  align-self:center;
  margin:0;
}
:root[data-theme="light"] .switch--toolbar{
  background:transparent !important;
  border:none !important;
}
.switch--toolbar .switch__label{
  font-size:14px;
  white-space:nowrap;
}
.wc-grok-inline__status{
  padding:0 4px;
  display:flex;
  align-items:center;
  min-height:36px;
  white-space:nowrap;
}
.checkbox{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:14px;
}
.field--toggle{
  align-self:end;
}
.switch{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:50px;
  padding:0 12px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  background:rgba(255,255,255,.03);
}
:root[data-theme="light"] .switch{
  background:#fff;
  border-color:rgba(20,34,53,.08);
}
.switch input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.switch__slider{
  position:relative;
  width:46px;
  height:26px;
  border-radius:999px;
  background:rgba(145,161,187,.35);
  transition:all .18s ease;
}
.switch__slider::after{
  content:"";
  position:absolute;
  top:3px;
  left:3px;
  width:20px;
  height:20px;
  border-radius:50%;
  background:#fff;
  transition:transform .18s ease;
  box-shadow:0 2px 8px rgba(0,0,0,.18);
}
.switch input:checked + .switch__slider{
  background:var(--success);
}
.switch input:checked + .switch__slider::after{
  transform:translateX(20px);
}
.switch__label{
  font-weight:700;
}
.pagination{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:20px;
}
.is-disabled{
  pointer-events:none;
  opacity:.45;
}

.attachment-field{
  gap:6px;
}
.upload-picker{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  cursor:pointer;
}
:root[data-theme="light"] .upload-picker{
  background:#ffffff;
  border-color:rgba(20,34,53,.09);
}
.upload-picker__input{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.upload-picker__button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:0 14px;
  border-radius:12px;
  background:linear-gradient(135deg,var(--accent-2),#167a71);
  color:#fff;
  font-size:13px;
  font-weight:700;
  flex:0 0 auto;
  text-shadow:0 1px 1px rgba(0,0,0,.12);
  color:#fff !important;
}
:root[data-theme="light"] .upload-picker__button,
:root[data-theme="dark"] .upload-picker__button{
  color:#fff !important;
}
.upload-picker__text{
  min-width:0;
  color:var(--muted);
  font-size:14px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.attachment-field--compact .upload-picker{
  padding:8px 10px;
}
.attachment-field--compact .upload-picker__button{
  min-height:34px;
  padding:0 12px;
  font-size:12px;
}
.attachment-field--compact .upload-picker__text{
  font-size:13px;
}
.attachment-strip{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:10px;
}
.attachment-chip{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  max-width:280px;
  padding:8px;
  position:relative;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
}
:root[data-theme="light"] .attachment-chip{
  background:var(--panel-2);
  border-color:rgba(20,34,53,.08);
}
.attachment-chip--image img{
  width:54px;
  height:54px;
  object-fit:cover;
  border-radius:10px;
  display:block;
}
.attachment-chip__preview{
  padding:0;
  border:none;
  background:transparent;
  cursor:pointer;
}
.attachment-chip__remove{
  position:absolute;
  top:-8px;
  right:-8px;
  width:24px;
  height:24px;
  border:none;
  border-radius:999px;
  background:var(--danger);
  color:#fff;
  font-size:18px;
  line-height:1;
  cursor:pointer;
  box-shadow:0 8px 18px rgba(0,0,0,.18);
}
.attachment-chip__remove:hover{
  filter:brightness(1.05);
}
.attachment-chip__icon{
  width:54px;
  height:54px;
  border-radius:10px;
  display:grid;
  place-items:center;
  font-size:12px;
  font-weight:800;
  background:rgba(79,140,255,.14);
  color:var(--accent);
}
.attachment-chip__meta{
  display:grid;
  min-width:0;
}
.attachment-chip__meta strong,
.attachment-chip__meta small{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.attachment-strip--pending{
  margin-top:12px;
}
.attachment-chip--pending{
  max-width:280px;
}
.attachment-chip--pending .attachment-chip__preview{
  flex:0 0 auto;
}
.attachment-chip--pending .attachment-chip__preview img{
  width:54px;
  height:54px;
  object-fit:cover;
  border-radius:10px;
  display:block;
}
.attachment-chip__actions{
  display:flex;
  align-items:center;
  gap:6px;
  margin-left:auto;
}
.attachment-chip__sort{
  width:30px;
  height:30px;
  border:1px solid var(--line);
  border-radius:10px;
  background:transparent;
  color:var(--text);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:15px;
  line-height:1;
}
.attachment-chip__sort:disabled{
  opacity:.4;
  cursor:not-allowed;
}
.attachment-chip__sort--danger{
  color:var(--danger);
  border-color:rgba(220,68,68,.25);
}
.wc-product-card__image-fields{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:14px;
  margin-top:18px;
}
.attachment-field__row{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:nowrap;
}
.attachment-field__row .upload-picker{
  flex:1 1 auto;
}
.attachment-field__switch{
  flex:0 0 auto;
}
.checkbox--switch{
  margin-top:6px;
}
.gallery-lightbox{
  position:fixed;
  inset:0;
  z-index:60;
  display:grid;
  place-items:center;
  padding:24px;
}
.gallery-lightbox[hidden]{
  display:none !important;
}
.gallery-lightbox__backdrop{
  position:absolute;
  inset:0;
  background:rgba(8,14,24,.82);
  border:none;
}
.gallery-lightbox__dialog{
  position:relative;
  z-index:1;
  display:grid;
  gap:10px;
  width:min(1200px,92vw);
}
.gallery-lightbox__image{
  width:100%;
  height:auto;
  max-height:80vh;
  aspect-ratio:16/9;
  border-radius:18px;
  background:#fff;
  object-fit:contain;
  object-position:center;
  display:block;
}
.gallery-lightbox__title{
  color:#fff;
  font-weight:700;
}
.gallery-lightbox__close{
  position:absolute;
  top:10px;
  right:10px;
  width:40px;
  height:40px;
  border:none;
  border-radius:999px;
  background:rgba(8,14,24,.72);
  color:#fff;
  font-size:24px;
  cursor:pointer;
}
.gallery-lightbox__nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:48px;
  height:48px;
  border:none;
  border-radius:999px;
  background:rgba(8,14,24,.72);
  color:#fff;
  font-size:34px;
  line-height:1;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  z-index:2;
}
.gallery-lightbox__nav--prev{
  left:14px;
}
.gallery-lightbox__nav--next{
  right:14px;
}
.attachment-form{
  border-top:1px dashed rgba(34,57,95,.55);
  padding-top:14px;
}

.editor{
  display:grid;
  gap:10px;
}
.editor__toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:10px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  background:rgba(255,255,255,.03);
}
:root[data-theme="light"] .editor__toolbar{
  background:var(--panel-2);
  border-color:rgba(20,34,53,.08);
}
.editor__tool{
  min-height:36px;
  padding:0 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.05);
  color:var(--text);
  font:inherit;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  transition:all .18s ease;
}
:root[data-theme="light"] .editor__tool{
  background:#fff;
  border-color:rgba(20,34,53,.08);
}
.editor__tool:hover{
  transform:translateY(-1px);
  background:rgba(79,140,255,.14);
  border-color:rgba(79,140,255,.32);
}
:root[data-theme="light"] .editor__tool:hover{
  background:rgba(22,102,211,.08);
}
.editor textarea{
  min-height:190px;
}

.lightbox{
  position:fixed;
  inset:0;
  z-index:140;
  display:grid;
  place-items:center;
  padding:20px;
}
.lightbox[hidden]{
  display:none;
}
.lightbox__backdrop{
  position:absolute;
  inset:0;
  border:none;
  background:rgba(5,10,18,.82);
  cursor:pointer;
}
.lightbox__dialog{
  position:relative;
  z-index:1;
  max-width:min(92vw,1200px);
  max-height:88vh;
}
.lightbox__dialog img{
  display:block;
  max-width:100%;
  max-height:88vh;
  border-radius:18px;
  box-shadow:0 24px 60px rgba(0,0,0,.45);
}
.lightbox__close{
  position:absolute;
  top:-14px;
  right:-14px;
  width:42px;
  height:42px;
  border:none;
  border-radius:999px;
  background:#fff;
  color:#12233b;
  font-size:28px;
  line-height:1;
  cursor:pointer;
}

body.modal-open{
  overflow:hidden;
}

.modal{
  position:fixed;
  inset:0;
  z-index:100;
  display:grid;
  place-items:center;
  padding:28px;
}
.modal[hidden]{
  display:none;
}
.modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(5,10,18,.56);
  backdrop-filter:blur(6px);
}
.modal__dialog{
  position:relative;
  z-index:1;
  width:min(1100px,100%);
  max-height:min(88vh,980px);
  overflow:auto;
  margin:0;
}
.modal__close{
  width:42px;
  height:42px;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(19,35,61,.9);
  color:var(--text);
  font:inherit;
  font-size:24px;
  line-height:1;
  cursor:pointer;
}
:root[data-theme="light"] .modal__close{
  background:rgba(255,250,240,.95);
}
.modal__close:hover{
  transform:translateY(-1px);
}

.footer{
  border-top:1px solid rgba(255,255,255,.06);background:rgba(13,23,38,.82)
}
:root[data-theme="light"] .footer{
  background:rgba(255,255,255,.92);
  border-top-color:rgba(20,34,53,.08);
}
.footer{margin-top:auto}
.footer__inner{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

@media (max-width:1100px){
  .stats-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .filters{grid-template-columns:repeat(2,minmax(0,1fr))}
  .task-board{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:900px){
  .grid--2,.grid--3,.grid--4,.details-layout{grid-template-columns:1fr}
  .topbar__inner,.hero,.card__head{flex-direction:column;align-items:flex-start}
  .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .task-board,.task-card__grid,.filters,.subtask-overview{grid-template-columns:1fr}
  .subtask-card__header{flex-direction:column}
  .subtask-card__state{min-width:0;width:100%}
  .member-table__head{display:none}
  .member-table__row{grid-template-columns:1fr}
  .icon-actions{justify-content:flex-start}
  .wc-product-card__head{flex-direction:column}
  .wc-product-card__quick-fields{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wc-product-card__description-grid{grid-template-columns:1fr}
  .wc-product-card__image-fields{grid-template-columns:1fr}
  .wc-grok-inline__toggles{
    flex-wrap:wrap;
    height:auto;
    min-height:58px;
    align-items:flex-start;
  }
  .wc-grok-inline__status{
    width:100%;
    min-height:0;
    white-space:normal;
    padding:0;
  }
  .wc-list__head{display:none}
  .wc-list__row{grid-template-columns:1fr}
  .field--inline-status{margin-left:0;min-width:0}
  .field--inline-status select{min-width:0}
  .topbar__inner{align-items:stretch}
  .nav-toggle{display:block;align-self:flex-end}
  .nav{
    display:none;
    width:100%;
    flex-direction:column;
    align-items:stretch;
    padding-top:8px;
  }
  .nav.is-open{display:flex}
  .nav__link,.nav__btn,.theme-toggle,.nav__logout .btn{
    width:100%;
    justify-content:flex-start;
  }
}

@media (max-width:1200px){
  .wc-product-card__description-grid{display:block}
  .wc-grok-inline__status{
    width:100%;
    min-height:0;
    white-space:normal;
    padding:0;
  }
}

@media (max-width:640px){
  h1{font-size:28px}
  .container{padding:18px 14px 28px}
  .stats-grid{grid-template-columns:1fr}
  .table__row,.table--compact .table__row{grid-template-columns:1fr}
  .progress-ring{min-width:64px;height:64px}
  .comment--reply{margin-left:12px}
  .subtask-card{padding:16px}
  .subtask-section{padding:14px}
  .modal{padding:12px}
  .wc-product-card__quick-fields{grid-template-columns:1fr}
  .attachment-field__row{
    flex-wrap:wrap;
    align-items:stretch;
  }
  .attachment-field__switch{
    width:100%;
  }
  .switch--toolbar{
    width:100%;
    justify-content:flex-start;
    padding:0;
  }
}