/* ============================================================
   xa-design.css — X-Alpha Module Design System
   ต้นแบบ: mockup_imgs/m01–m04 (ธีมสว่าง น้ำเงินกรมท่า ไอคอนเส้น)
   ใช้ร่วมกันทุกโมดูล M01–M07 — แก้ที่นี่ที่เดียว มีผลทั้งระบบ
   ออกแบบสำหรับ viewport ~1600x1280 (เท่ารูปต้นแบบ)
   ============================================================ */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  /* พื้นผิว */
  --white:#ffffff;
  --canvas:#fcfcfd;      /* พื้นหลัง content */
  --surface:#f8fafc;     /* พื้นรอง: หัวตาราง, footer modal */
  --surface2:#f1f5f9;    /* hover */
  --border:#e5e7eb;
  --border2:#d1d5db;

  /* ตัวอักษร */
  --text:#111827;
  --text2:#6b7280;
  --text3:#9ca3af;

  /* แบรนด์ */
  --navy:#1e3a8a;        /* โลโก้ หัวข้อ เมนู active */
  --navy-dark:#1e40af;
  --blue:#1d4ed8;        /* ปุ่มหลัก ลิงก์ */
  --blue-hover:#1e40af;
  --blue-50:#eff6ff;
  --blue-100:#dbeafe;

  /* สถานะ — สงวนไว้สำหรับความหมาย ห้ามใช้แทนสี series */
  --green:#16a34a; --green-bg:#dcfce7;
  --amber:#d97706; --amber-bg:#fef3c7;
  --red:#dc2626;   --red-bg:#fee2e2;
  --grey:#64748b;  --grey-bg:#f1f5f9;

  --r:8px; --r-lg:12px; --r-xl:16px;
  --sh:0 1px 2px rgba(16,24,40,.04);
  --sh-md:0 1px 3px rgba(16,24,40,.08),0 1px 2px rgba(16,24,40,.04);
  --sh-lg:0 12px 32px rgba(16,24,40,.12);
  --ease:cubic-bezier(.4,0,.2,1);
}

body{
  background:var(--canvas);color:var(--text);
  font-family:'IBM Plex Sans Thai',sans-serif;
  font-size:.9375rem;line-height:1.6;font-weight:400;
  display:flex;height:100vh;overflow:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ── ไอคอนเส้น ── */
.i{width:1.25rem;height:1.25rem;flex-shrink:0;stroke:currentColor;fill:none;
   stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.i-sm{width:1rem;height:1rem}
.i-lg{width:1.5rem;height:1.5rem}

/* ══ SIDEBAR ══ */
.sidebar{width:280px;background:var(--white);border-right:1px solid var(--border);
  display:flex;flex-direction:column;flex-shrink:0}
.logo{padding:1.25rem 1.25rem;display:flex;align-items:center;gap:.75rem}
.logo-box{width:40px;height:40px;border-radius:10px;flex-shrink:0;
  background:linear-gradient(135deg,var(--navy),var(--blue));
  display:flex;align-items:center;justify-content:center;color:#fff}
.logo-box .i{width:1.375rem;height:1.375rem;stroke-width:2}
.logo-text h2{font-size:1.0625rem;font-weight:700;color:var(--navy);line-height:1.3}
.logo-text p{font-size:.75rem;color:var(--text3);line-height:1.3}

.nav{flex:1;padding:.75rem .75rem;overflow-y:auto}
.nav-section{font-size:.6875rem;font-weight:600;color:var(--text3);
  letter-spacing:.06em;text-transform:uppercase;padding:.75rem .75rem .35rem}
.nav-item{display:flex;align-items:center;gap:.75rem;padding:.6875rem .75rem;
  border-radius:var(--r);cursor:pointer;font-size:.875rem;color:var(--text2);
  text-decoration:none;margin-bottom:2px;transition:.15s var(--ease);
  position:relative;border-left:3px solid transparent}
.nav-item:hover{background:var(--surface2);color:var(--text)}
.nav-item.active{background:var(--blue-50);color:var(--navy);font-weight:600;
  border-left-color:var(--navy)}
.nav-item.active .i{stroke-width:2}
.nav-badge{margin-left:auto;background:var(--red);color:#fff;font-size:.6875rem;
  font-weight:600;padding:.05rem .4rem;border-radius:99px;line-height:1.5}

.sidebar-footer{padding:1rem .75rem;border-top:1px solid var(--border);
  display:flex;flex-direction:column;gap:.25rem}
.sidebar-footer .btn{margin-bottom:.5rem}
.foot-link{display:flex;align-items:center;gap:.75rem;padding:.6rem .75rem;
  border-radius:var(--r);font-size:.875rem;color:var(--text2);
  text-decoration:none;transition:.15s var(--ease)}
.foot-link:hover{background:var(--surface2);color:var(--text)}
.foot-link.danger{color:var(--red)}
.foot-link.danger:hover{background:var(--red-bg)}

/* ══ MAIN + TOPBAR ══ */
.main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
.topbar{height:64px;flex-shrink:0;padding:0 1.5rem;background:var(--white);
  border-bottom:1px solid var(--border);display:flex;align-items:center;gap:1rem}
.search{flex:1;max-width:560px;position:relative}
.search input{width:100%;background:var(--surface);border:1px solid transparent;
  border-radius:99px;padding:.5625rem 1rem .5625rem 2.75rem;font-size:.875rem;
  color:var(--text);outline:none;transition:.15s var(--ease);
  font-family:inherit}
.search input::placeholder{color:var(--text3)}
.search input:focus{background:var(--white);border-color:var(--blue);
  box-shadow:0 0 0 3px var(--blue-100)}
.search .i{position:absolute;left:1rem;top:50%;transform:translateY(-50%);
  color:var(--text3);pointer-events:none}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:.25rem}
.icon-btn{width:38px;height:38px;border-radius:var(--r);border:none;
  background:transparent;color:var(--text2);cursor:pointer;position:relative;
  display:flex;align-items:center;justify-content:center;transition:.15s var(--ease)}
.icon-btn:hover{background:var(--surface2);color:var(--text)}
.icon-btn .dot{position:absolute;top:8px;right:9px;width:7px;height:7px;
  border-radius:50%;background:var(--red);border:2px solid var(--white)}
.topbar-divider{width:1px;height:28px;background:var(--border);margin:0 .5rem}
.user-chip{display:flex;align-items:center;gap:.75rem;cursor:pointer;
  padding:.25rem .5rem;border-radius:var(--r);transition:.15s var(--ease)}
.user-chip:hover{background:var(--surface2)}
.user-chip .u-txt{text-align:right;line-height:1.35}
.user-chip h4{font-size:.875rem;font-weight:600;color:var(--navy)}
.user-chip p{font-size:.75rem;color:var(--text2)}

.avatar{width:38px;height:38px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:.8125rem;font-weight:600;color:var(--navy);
  background:var(--blue-100);overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover}
.avatar-sm{width:30px;height:30px;font-size:.6875rem}
.avatar.a-green{background:var(--green-bg);color:var(--green)}
.avatar.a-amber{background:var(--amber-bg);color:var(--amber)}
.avatar.a-red{background:var(--red-bg);color:var(--red)}
.avatar.a-grey{background:var(--grey-bg);color:var(--grey)}

/* ══ CONTENT ══ */
.content{flex:1;overflow-y:auto;padding:1.75rem 1.5rem 2.5rem;background:var(--canvas)}
.page-head{display:flex;align-items:flex-start;justify-content:space-between;
  gap:1rem;margin-bottom:1.5rem;flex-wrap:wrap}
.page-title{font-size:1.75rem;font-weight:700;color:var(--navy);line-height:1.25}
.page-sub{font-size:.875rem;color:var(--text2);margin-top:.125rem}
.page-actions{display:flex;align-items:center;gap:.625rem}

/* ══ ปุ่ม ══ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.625rem 1.125rem;border-radius:var(--r);font-size:.875rem;
  font-weight:600;cursor:pointer;border:1px solid transparent;
  transition:.15s var(--ease);font-family:inherit;white-space:nowrap;
  text-decoration:none;line-height:1.5}
.btn-primary{background:var(--navy);color:#fff}
.btn-primary:hover{background:var(--navy-dark)}
.btn-blue{background:var(--blue);color:#fff}
.btn-blue:hover{background:var(--blue-hover)}
.btn-outline{background:var(--white);color:var(--text2);border-color:var(--border2)}
.btn-outline:hover{border-color:var(--text3);color:var(--text);background:var(--surface)}
.btn-text{background:transparent;color:var(--text2)}
.btn-text:hover{background:var(--surface2);color:var(--text)}
.btn-danger{background:var(--red);color:#fff}
.btn-danger:hover{filter:brightness(.92)}
.btn-sm{padding:.4375rem .75rem;font-size:.8125rem}
.btn-block{width:100%}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* ══ การ์ด ══ */
.card{background:var(--white);border:1px solid var(--border);
  border-radius:var(--r-lg);box-shadow:var(--sh);overflow:hidden}
.card-head{padding:1rem 1.25rem;border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;gap:.75rem}
.card-head h3{font-size:1rem;font-weight:600;color:var(--text);
  display:flex;align-items:center;gap:.5rem}
.card-note{font-size:.8125rem;color:var(--text3);font-weight:400}
.card-body{padding:1.25rem}

/* ══ Stat cards ══ */
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:1rem;margin-bottom:1.5rem}
.stat-card{background:var(--white);border:1px solid var(--border);
  border-radius:var(--r-lg);box-shadow:var(--sh);padding:1.25rem;
  display:flex;align-items:center;gap:1rem}
.stat-badge{width:56px;height:56px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center}
.stat-badge .i{width:1.5rem;height:1.5rem}
.sb-blue{background:var(--blue-100);color:var(--blue)}
.sb-green{background:var(--green-bg);color:var(--green)}
.sb-amber{background:var(--amber-bg);color:var(--amber)}
.sb-red{background:var(--red-bg);color:var(--red)}
.sb-grey{background:var(--grey-bg);color:var(--grey)}
.stat-txt{min-width:0}
.stat-label{font-size:.8125rem;color:var(--text2);line-height:1.4}
.stat-num{font-size:1.625rem;font-weight:700;color:var(--text);line-height:1.25}
.stat-sub{font-size:.75rem;color:var(--text3);display:flex;align-items:center;gap:.25rem}
.stat-sub.up{color:var(--green)}
.stat-sub.dn{color:var(--red)}

/* ══ Toolbar / filter ══ */
.toolbar{display:flex;align-items:center;gap:.625rem;margin-bottom:1.25rem;flex-wrap:wrap}
.toolbar-spacer{flex:1}
.select{background:var(--white);border:1px solid var(--border2);border-radius:var(--r);
  padding:.5625rem .875rem;font-size:.875rem;color:var(--text);outline:none;
  cursor:pointer;font-family:inherit;transition:.15s var(--ease)}
.select:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-100)}
.filter-card{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:1rem 1.25rem}
.filter-card label{font-size:.8125rem;color:var(--text2);
  font-weight:500;display:block;margin-bottom:.5rem}
.filter-row{display:flex;gap:.5rem}
.filter-row .select{flex:1}

/* ══ ตาราง ══ */
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse}
thead th{padding:.875rem 1.25rem;font-size:.8125rem;font-weight:600;
  color:var(--text2);text-align:left;background:var(--surface);
  border-bottom:1px solid var(--border);white-space:nowrap}
th.num,td.num{text-align:right;font-variant-numeric:tabular-nums}
tbody td{padding:1rem 1.25rem;font-size:.875rem;border-bottom:1px solid var(--border);
  vertical-align:middle}
tbody tr{transition:.12s var(--ease)}
tbody tr:hover{background:var(--surface)}
tbody tr:last-child td{border-bottom:none}
.cell-code{font-weight:600;color:var(--blue);text-decoration:none}
.cell-code:hover{text-decoration:underline}
.cell-who{display:flex;align-items:center;gap:.625rem}
.cell-who h4{font-size:.875rem;font-weight:500;color:var(--text);line-height:1.4}
.cell-who p{font-size:.75rem;color:var(--text3);line-height:1.4}
.cell-stack{line-height:1.5}
.cell-stack .s2{font-size:.8125rem;color:var(--text2)}
.row-actions{display:flex;gap:.25rem;justify-content:flex-end}
.act-btn{width:32px;height:32px;border-radius:6px;border:none;background:transparent;
  color:var(--text3);cursor:pointer;display:inline-flex;align-items:center;
  justify-content:center;transition:.15s var(--ease)}
.act-btn:hover{background:var(--blue-50);color:var(--blue)}
.act-btn.danger:hover{background:var(--red-bg);color:var(--red)}

/* ══ Chip / badge สถานะ ══ */
.chip{display:inline-flex;align-items:center;gap:.375rem;padding:.25rem .625rem;
  border-radius:99px;font-size:.75rem;font-weight:500;white-space:nowrap;line-height:1.5}
.chip::before{content:'';width:6px;height:6px;border-radius:50%;
  background:currentColor;flex-shrink:0}
.chip.no-dot::before{display:none}
.chip-green{background:var(--green-bg);color:#15803d}
.chip-amber{background:var(--amber-bg);color:#b45309}
.chip-red{background:var(--red-bg);color:#b91c1c}
.chip-blue{background:var(--blue-100);color:var(--blue)}
.chip-grey{background:var(--grey-bg);color:var(--grey)}
.count-badge{display:inline-flex;align-items:center;justify-content:center;
  min-width:22px;height:22px;padding:0 .375rem;border-radius:6px;
  font-size:.75rem;font-weight:600}
.cb-grey{background:var(--surface2);color:var(--text2)}
.cb-blue{background:var(--blue);color:#fff}
.cb-green{background:var(--green);color:#fff}
.cb-amber{background:var(--amber);color:#fff}

/* ══ Progress ══ */
.bar{height:6px;background:var(--surface2);border-radius:99px;overflow:hidden;
  position:relative}
.bar-fill{height:100%;border-radius:99px;transition:.4s var(--ease)}
.bf-blue{background:var(--blue)}
.bf-green{background:var(--green)}
.bf-amber{background:var(--amber)}
.bf-red{background:var(--red)}
.bf-navy{background:var(--navy)}

/* ══ Pagination ══ */
.pager{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.875rem 1.25rem;border-top:1px solid var(--border);
  background:var(--surface);flex-wrap:wrap}
.pager-info{font-size:.8125rem;color:var(--text2)}
.pages{display:flex;align-items:center;gap:.25rem}
.pg{min-width:32px;height:32px;padding:0 .5rem;border-radius:6px;border:none;
  background:transparent;color:var(--text2);font-size:.8125rem;font-weight:500;
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  transition:.15s var(--ease);font-family:inherit}
.pg:hover{background:var(--white);color:var(--text)}
.pg.active{background:var(--navy);color:#fff;font-weight:600}
.pg:disabled{opacity:.4;cursor:not-allowed}

/* ══ Kanban ══ */
.kanban{display:grid;grid-template-columns:repeat(4,minmax(240px,1fr));
  gap:1.25rem;align-items:start}
.kan-col{min-width:0}
.kan-head{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem;
  font-size:1rem;font-weight:600;color:var(--text)}
.kan-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.kan-list{display:flex;flex-direction:column;gap:.875rem}
.kan-card{background:var(--white);border:1px solid var(--border);
  border-left:3px solid var(--grey);border-radius:var(--r-lg);
  box-shadow:var(--sh);padding:1rem;cursor:pointer;transition:.15s var(--ease)}
.kan-card:hover{box-shadow:var(--sh-md);transform:translateY(-1px)}
.kan-card.k-blue{border-left-color:var(--blue)}
.kan-card.k-green{border-left-color:var(--green)}
.kan-card.k-amber{border-left-color:var(--amber)}
.kan-card.k-done{background:var(--surface);opacity:.72;border-left-color:var(--border2)}
.kan-top{display:flex;align-items:center;justify-content:space-between;
  gap:.5rem;margin-bottom:.5rem}
.kan-code{font-size:.8125rem;font-weight:600;color:var(--text2)}
.kan-card.k-blue .kan-code{color:var(--blue)}
.kan-card.k-green .kan-code{color:var(--green)}
.kan-title{font-size:.9375rem;font-weight:600;color:var(--text);line-height:1.4}
.kan-sub{font-size:.8125rem;color:var(--text2);margin-bottom:.75rem}
.kan-meta{display:flex;align-items:center;gap:.375rem;font-size:.8125rem;
  color:var(--text2);margin-bottom:.75rem}
.kan-prog{display:flex;align-items:center;justify-content:space-between;
  font-size:.75rem;color:var(--text2);margin-bottom:.375rem}
.kan-prog b{color:var(--text);font-weight:600}

/* ══ ฟอร์ม ══ */
.form-group{margin-bottom:1.25rem}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form-label{display:block;font-size:.875rem;font-weight:500;color:var(--text);
  margin-bottom:.5rem}
.form-label .req{color:var(--red)}
.form-control{width:100%;background:var(--white);border:1px solid var(--border2);
  border-radius:var(--r);padding:.6875rem .875rem;font-size:.875rem;
  color:var(--text);outline:none;transition:.15s var(--ease);font-family:inherit}
.form-control::placeholder{color:var(--text3)}
.form-control:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-100)}
textarea.form-control{resize:vertical;min-height:96px}
.form-hint{font-size:.75rem;color:var(--text3);margin-top:.375rem}
.check-item{display:flex;align-items:center;gap:.75rem;padding:.625rem .875rem;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  cursor:pointer;transition:.15s var(--ease);margin-bottom:.5rem}
.check-item:hover{border-color:var(--border2);background:var(--surface2)}
.check-item input[type=checkbox]{accent-color:var(--blue);width:16px;height:16px;
  cursor:pointer;flex-shrink:0}
.check-item label{font-size:.875rem;cursor:pointer;flex:1}
.check-item .tag{font-size:.75rem;color:var(--text3)}
.switch{width:40px;height:22px;border-radius:99px;background:var(--border2);
  position:relative;cursor:pointer;transition:.2s var(--ease);border:none;flex-shrink:0}
.switch::after{content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;
  border-radius:50%;background:#fff;transition:.2s var(--ease);
  box-shadow:0 1px 3px rgba(0,0,0,.2)}
.switch.on{background:var(--blue)}
.switch.on::after{left:20px}

/* ══ MODAL ══ */
.modal-bd{position:fixed;inset:0;background:rgba(17,24,39,.45);
  backdrop-filter:blur(3px);z-index:500;display:flex;align-items:center;
  justify-content:center;padding:1.5rem;opacity:0;pointer-events:none;
  transition:.2s var(--ease)}
.modal-bd.show{opacity:1;pointer-events:all}
.modal{background:var(--white);border-radius:var(--r-xl);width:100%;
  max-height:90vh;display:flex;flex-direction:column;overflow:hidden;
  box-shadow:var(--sh-lg);transform:translateY(12px) scale(.98);
  transition:.24s var(--ease)}
.modal-bd.show .modal{transform:none}
.modal-sm{max-width:460px}.modal-md{max-width:620px}.modal-lg{max-width:820px}
.modal-hd{padding:1.5rem 1.75rem 1.25rem;display:flex;align-items:flex-start;
  justify-content:space-between;gap:1rem;flex-shrink:0;border-bottom:1px solid var(--border)}
.modal-hd h2{font-size:1.25rem;font-weight:700;color:var(--navy);line-height:1.3}
.modal-hd .sub{font-size:.8125rem;color:var(--text2);margin-top:.125rem;font-weight:400}
.modal-x{width:34px;height:34px;border-radius:var(--r);border:none;background:transparent;
  color:var(--text2);cursor:pointer;display:flex;align-items:center;
  justify-content:center;transition:.15s var(--ease);flex-shrink:0}
.modal-x:hover{background:var(--surface2);color:var(--text)}
.modal-body{flex:1;overflow-y:auto;padding:1.5rem 1.75rem}
.modal-ft{padding:1.125rem 1.75rem;background:var(--surface);
  border-top:1px solid var(--border);display:flex;align-items:center;
  gap:.75rem;justify-content:flex-end;flex-shrink:0}
.modal-ft .spacer{margin-right:auto}

/* ── Stepper ── */
.steps{display:flex;align-items:center;gap:.5rem;margin-bottom:1.5rem}
.step{display:flex;align-items:center;gap:.5rem;font-size:.8125rem;
  font-weight:500;color:var(--text3)}
.step-n{width:24px;height:24px;border-radius:50%;background:var(--surface2);
  color:var(--text3);display:flex;align-items:center;justify-content:center;
  font-size:.75rem;font-weight:600;flex-shrink:0}
.step.on{color:var(--blue)}
.step.on .step-n{background:var(--blue);color:#fff}
.step-line{flex:1;height:1px;background:var(--border)}

/* ── Option cards ── */
.opt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem}
.opt-card{border:1.5px solid var(--border);border-radius:var(--r-lg);
  padding:1rem;cursor:pointer;text-align:center;transition:.15s var(--ease);
  background:var(--white)}
.opt-card:hover{border-color:var(--border2);background:var(--surface)}
.opt-card.sel{border-color:var(--blue);background:var(--blue-50)}
.opt-card .i{margin:0 auto .5rem;color:var(--text2);width:1.5rem;height:1.5rem}
.opt-card.sel .i{color:var(--blue)}
.opt-name{font-size:.875rem;font-weight:600;color:var(--text)}
.opt-desc{font-size:.75rem;color:var(--text3);margin-top:.125rem}

/* ── Success ── */
.success{text-align:center;padding:2rem 1rem}
.success-ico{width:72px;height:72px;border-radius:50%;background:var(--green-bg);
  color:var(--green);display:flex;align-items:center;justify-content:center;
  margin:0 auto 1.25rem;animation:pop .35s var(--ease)}
.success-ico .i{width:2.25rem;height:2.25rem;stroke-width:2}
@keyframes pop{0%{transform:scale(.4);opacity:0}70%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
.success h3{font-size:1.125rem;font-weight:700;margin-bottom:.375rem}
.success p{font-size:.875rem;color:var(--text2)}

/* ── Empty ── */
.empty{text-align:center;padding:3rem 1rem;color:var(--text3)}
.empty .i{width:2.5rem;height:2.5rem;margin:0 auto .75rem;stroke-width:1.5}
.empty h4{font-size:.9375rem;font-weight:600;color:var(--text2);margin-bottom:.25rem}
.empty p{font-size:.8125rem}

/* ── Tooltip ── */
[data-tip]{position:relative}
[data-tip]:hover::after{content:attr(data-tip);position:absolute;
  bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);
  background:var(--text);color:#fff;padding:.4rem .625rem;border-radius:6px;
  font-size:.75rem;font-weight:400;white-space:pre;z-index:60;
  pointer-events:none;box-shadow:var(--sh-md);line-height:1.5}

/* ── Utilities ── */
.grid2{display:grid;grid-template-columns:1.4fr 1fr;gap:1.25rem;margin-bottom:1.25rem}
.grid-eq{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin-bottom:1.25rem}
.mb0{margin-bottom:0}.mb1{margin-bottom:1.25rem}
.legend{display:flex;gap:1rem;flex-wrap:wrap}
.legend-item{display:flex;align-items:center;gap:.375rem;font-size:.8125rem;color:var(--text2)}
.legend-dot{width:8px;height:8px;border-radius:2px;flex-shrink:0}
.divider{height:1px;background:var(--border);margin:1.25rem 0}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media (max-width:1280px){
  .kanban{grid-template-columns:repeat(2,minmax(240px,1fr))}
  .grid2,.grid-eq{grid-template-columns:1fr}
}
@media (max-width:900px){
  .sidebar{width:72px}
  .logo-text,.nav-item span,.foot-link span,.nav-section,.user-chip .u-txt{display:none}
  .nav-item{justify-content:center}
  .kanban{grid-template-columns:1fr}
}