/* ===================================================================
   AI推進ダッシュボード v5.0 — Asana 設計原則による全面刷新（Phase 14）
   8pt grid / 6段階タイポ / アクセント1色＋グレースケール8段 / フラット
   =================================================================== */

/* ========== デザイントークン ========== */
:root{
  /* スペーシング（8pt grid・4pt 半段階） */
  --sp-0: 0;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 40px;
  --sp-8: 48px;
  --sp-9: 64px;

  /* タイポグラフィ（6段階） */
  --fs-micro: 11px;
  --fs-caption: 12px;
  --fs-body: 14px;
  --fs-h2: 16px;
  --fs-h1: 20px;
  --fs-display: 24px;
  --lh-tight: 1.3;
  --lh-base: 1.5;

  --ff: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Meiryo", system-ui, sans-serif;

  /* 配色 — ニュートラル8段 */
  --n-0:   #ffffff;
  --n-50:  #f9fafb;
  --n-100: #f3f4f6;
  --n-200: #e5e7eb;
  --n-300: #d1d5db;
  --n-400: #9ca3af;
  --n-500: #6b7280;
  --n-600: #4b5563;
  --n-700: #374151;
  --n-900: #111827;

  /* アクセント (Asana コーラル) */
  --a-50:  #fff5f0;
  --a-100: #ffe5d4;
  --a-200: #ffcab0;
  --a-400: #f88b6f;
  --a-500: #f06a6a;
  --a-600: #e85a5a;
  --a-700: #c14444;

  /* ステータス色 */
  --success:    #16a34a;
  --success-bg: #f0fdf4;
  --success-br: #bbf7d0;
  --warning:    #d97706;
  --warning-bg: #fffbeb;
  --warning-br: #fde68a;
  --danger:     #dc2626;
  --danger-bg:  #fef2f2;
  --danger-br:  #fecaca;
  --info:       #2563eb;
  --info-bg:    #eff6ff;
  --info-br:    #bfdbfe;

  /* 角丸 */
  --r-sm: 4px;
  --r:    6px;
  --r-lg: 8px;
  --r-pill: 999px;

  /* シャドウ */
  --sh-sm: 0 1px 2px rgba(17,24,39,.05);
  --sh:    0 2px 6px rgba(17,24,39,.06), 0 1px 2px rgba(17,24,39,.04);
  --sh-md: 0 4px 12px rgba(17,24,39,.08);
  --sh-lg: 0 10px 30px rgba(17,24,39,.12);

  /* 構造 */
  --topbar-h: 56px;
  --sidebar-w: 240px;
  --sidebar-w-collapsed: 60px;
  --content-max: 1440px;

  /* 旧変数の互換エイリアス（既存 .dash-* 用） */
  --dash-accent:        var(--a-500);
  --dash-accent-dark:   var(--a-700);
  --dash-accent-light:  var(--a-400);
  --dash-accent-bg:     var(--a-50);
  --dash-accent-border: var(--a-200);
  --dash-border:        var(--n-200);
  --dash-border-strong: var(--n-300);
  --dash-bg:            var(--n-0);
  --dash-bg-card:       var(--n-0);
  --dash-bg-hover:      var(--n-50);
  --dash-bg-header:     var(--n-100);
  --dash-bg-warning:    var(--warning-bg);
  --dash-bg-info:       var(--info-bg);
  --dash-text:          var(--n-900);
  --dash-text-sub:      var(--n-600);
  --dash-text-dim:      var(--n-400);
  --dash-green:         var(--success);
  --dash-green-bg:      var(--success-bg);
  --dash-yellow:        var(--warning);
  --dash-yellow-bg:     var(--warning-bg);
  --dash-red:           var(--danger);
  --dash-red-bg:        var(--danger-bg);
  --dash-blue:          var(--info);
  --dash-blue-bg:       var(--info-bg);
  /* 紫はチーム識別色（data.js TEAM_COLORS）と Obsidian リンク背景でのみ使用、UIアクセントとしては使わない */
  --dash-purple:        #7c3aed;
  --dash-radius:        var(--r-lg);
  --dash-radius-sm:     var(--r);
  --dash-shadow:        var(--sh);
  --dash-shadow-hover:  var(--sh-md);
}

/* ========== リセット & ベース ========== */
*{margin:0;padding:0;box-sizing:border-box}
html, body{height:100%}
body{
  font-family: var(--ff);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  font-weight: 500;
  color: var(--n-900);
  background: var(--n-50);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
button, input, select, textarea{ font-family: inherit; font-size: inherit; }
a{ color: var(--info); text-decoration: none; }
a:hover{ text-decoration: underline; }

/* ========== アプリ全体構造 ========== */
.app-shell{
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: var(--topbar-h) 1fr;
  grid-template-areas:
    "topbar topbar"
    "sidebar content";
  min-height: 100vh;
}
.app-shell.is-sidebar-collapsed{
  grid-template-columns: var(--sidebar-w-collapsed) 1fr;
}

/* ========== TOPBAR ========== */
.app-topbar{
  grid-area: topbar;
  background: var(--n-0);
  border-bottom: 1px solid var(--n-200);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: 0 var(--sp-5);
  position: sticky;
  top: 0;
  z-index: 20;
}
.app-topbar__brand{
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: 800;
  color: var(--n-900);
  font-size: var(--fs-h2);
  white-space: nowrap;
}
.app-topbar__brand-accent{ color: var(--a-500); }
.app-topbar__brand-sub{
  font-size: var(--fs-micro);
  font-weight: 700;
  color: var(--n-400);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-left: var(--sp-1);
}
.app-topbar__search{
  flex: 1;
  max-width: 560px;
  display: flex;
  align-items: center;
  background: var(--n-100);
  border: 1px solid transparent;
  border-radius: var(--r);
  padding: 0 var(--sp-3);
  height: 36px;
  transition: .15s;
}
.app-topbar__search:focus-within{
  background: var(--n-0);
  border-color: var(--a-500);
  box-shadow: 0 0 0 3px var(--a-100);
}
.app-topbar__search-icon{ color: var(--n-400); margin-right: var(--sp-2); flex-shrink: 0; }
.app-topbar__search input{
  background: transparent;
  border: none;
  outline: none;
  width: 100%;
  font-size: var(--fs-body);
  color: var(--n-900);
}
.app-topbar__search input::placeholder{ color: var(--n-400); }
.app-topbar__actions{
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-left: auto;
}

/* ========== SIDEBAR ========== */
.app-sidebar{
  grid-area: sidebar;
  background: var(--n-0);
  border-right: 1px solid var(--n-200);
  padding: var(--sp-3) 0;
  overflow-y: auto;
  position: sticky;
  top: var(--topbar-h);
  height: calc(100vh - var(--topbar-h));
}
.app-sidebar__section{
  padding: var(--sp-2) 0;
}
.app-sidebar__section + .app-sidebar__section{
  border-top: 1px solid var(--n-100);
  margin-top: var(--sp-2);
}
.app-sidebar__heading{
  font-size: var(--fs-micro);
  font-weight: 700;
  color: var(--n-400);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: var(--sp-2) var(--sp-4) var(--sp-1);
}
.nav-item{
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-4);
  margin: 0 var(--sp-2);
  border-radius: var(--r);
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--n-700);
  cursor: pointer;
  transition: .15s;
  border: none;
  background: transparent;
  width: calc(100% - var(--sp-4));
  text-align: left;
  position: relative;
}
.nav-item:hover{ background: var(--n-100); color: var(--n-900); }
.nav-item.is-active{
  background: var(--a-50);
  color: var(--a-700);
}
.nav-item.is-active::before{
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 3px;
  background: var(--a-500);
  border-radius: 0 2px 2px 0;
}
.nav-item__icon{
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.nav-item__label{ flex: 1; }
.nav-item__badge{
  background: var(--a-500);
  color: var(--n-0);
  font-size: var(--fs-micro);
  font-weight: 700;
  border-radius: var(--r-pill);
  padding: 1px 6px;
  min-width: 18px;
  text-align: center;
}
.nav-item__badge.is-muted{ background: var(--n-300); color: var(--n-700); }

.app-sidebar__sources{
  padding: var(--sp-2) var(--sp-4);
}
.app-sidebar__sources-link{
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--r-sm);
  font-size: var(--fs-caption);
  color: var(--n-600);
  text-decoration: none;
}
.app-sidebar__sources-link:hover{
  background: var(--n-50);
  color: var(--n-900);
  text-decoration: none;
}
.app-sidebar__sources-icon{
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  flex-shrink: 0;
}

/* ========== CONTENT AREA ========== */
.app-content{
  grid-area: content;
  padding: var(--sp-5) var(--sp-6);
  max-width: var(--content-max);
  margin: 0 auto;
  width: 100%;
  background: var(--n-50);
}
.view{ display: none; }
.view.is-active{ display: block; }

.view-header{
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
  flex-wrap: wrap;
}
.view-header__title{
  font-size: var(--fs-display);
  font-weight: 800;
  color: var(--n-900);
  line-height: var(--lh-tight);
}
.view-header__sub{
  font-size: var(--fs-caption);
  color: var(--n-500);
  font-weight: 500;
}
.view-header__actions{ margin-left: auto; display: flex; gap: var(--sp-2); align-items: center; }

.section{ margin-bottom: var(--sp-6); }
.section-header{
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
  flex-wrap: wrap;
}
.section-title{
  font-size: var(--fs-h1);
  font-weight: 700;
  color: var(--n-900);
  line-height: var(--lh-tight);
}
.section-sub{
  font-size: var(--fs-caption);
  color: var(--n-500);
  font-weight: 500;
}
.section-action{ margin-left: auto; }

/* ========== BUTTON ========== */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  border: 1px solid transparent;
  transition: .15s;
  height: 36px;
  white-space: nowrap;
}
.btn:focus-visible{ outline: 3px solid var(--a-100); outline-offset: 1px; }
.btn--primary{
  background: var(--a-500);
  color: var(--n-0);
}
.btn--primary:hover{ background: var(--a-600); }
.btn--primary:active{ background: var(--a-700); }
.btn--secondary{
  background: var(--n-0);
  color: var(--n-700);
  border-color: var(--n-300);
}
.btn--secondary:hover{ background: var(--n-50); border-color: var(--n-400); }
.btn--ghost{
  background: transparent;
  color: var(--n-600);
}
.btn--ghost:hover{ background: var(--n-100); color: var(--n-900); }
.btn--danger{
  background: var(--n-0);
  color: var(--danger);
  border-color: var(--danger);
}
.btn--danger:hover{ background: var(--danger); color: var(--n-0); }
.btn--sm{ height: 28px; padding: var(--sp-1) var(--sp-3); font-size: var(--fs-caption); }
.btn--lg{ height: 44px; padding: var(--sp-3) var(--sp-5); font-size: var(--fs-h2); font-weight: 700; }
.btn--icon{ width: 36px; padding: 0; }
.btn--icon-sm{ width: 28px; height: 28px; padding: 0; }

/* ========== CARD ========== */
.card{
  background: var(--n-0);
  border: 1px solid var(--n-200);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
}
.card__body{ padding: var(--sp-4); }
.card__header{
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--n-100);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.card__title{ font-size: var(--fs-h2); font-weight: 700; color: var(--n-900); }
.card__sub{ font-size: var(--fs-caption); color: var(--n-500); }
.card--clickable{ cursor: pointer; transition: .15s; }
.card--clickable:hover{ border-color: var(--n-300); box-shadow: var(--sh-md); }

/* ========== BADGE / TAG ========== */
.badge{
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 2px var(--sp-2);
  font-size: var(--fs-micro);
  font-weight: 700;
  border-radius: var(--r-sm);
  border: 1px solid;
  white-space: nowrap;
}
.badge--success{ background: var(--success-bg); color: var(--success); border-color: var(--success-br); }
.badge--warning{ background: var(--warning-bg); color: var(--warning); border-color: var(--warning-br); }
.badge--danger { background: var(--danger-bg);  color: var(--danger);  border-color: var(--danger-br); }
.badge--info   { background: var(--info-bg);   color: var(--info);    border-color: var(--info-br); }
.badge--neutral{ background: var(--n-100);     color: var(--n-700);   border-color: var(--n-200); }
.badge--accent { background: var(--a-50);      color: var(--a-700);   border-color: var(--a-200); }

.tag{
  display: inline-flex;
  align-items: center;
  padding: 2px var(--sp-2);
  font-size: var(--fs-micro);
  font-weight: 700;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  white-space: nowrap;
}

/* ========== LIST ROW (Asana 風コンパクト1行表示) ========== */
.list{
  background: var(--n-0);
  border: 1px solid var(--n-200);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.list-row{
  display: grid;
  grid-template-columns: 24px 1fr 110px 90px 80px 90px 110px 32px;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--n-100);
  font-size: var(--fs-body);
  transition: .1s;
  cursor: pointer;
}
.list-row:last-child{ border-bottom: none; }
.list-row:hover{ background: var(--n-50); }
.list-row__check{
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--n-300);
  border-radius: 50%;
  cursor: pointer;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: .15s;
}
.list-row__check:hover{ border-color: var(--success); }
.list-row__check.is-done{
  background: var(--success);
  border-color: var(--success);
  color: var(--n-0);
  font-size: 11px;
  font-weight: 900;
}
.list-row__title{
  font-weight: 600;
  color: var(--n-900);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.list-row__title.is-done{ text-decoration: line-through; color: var(--n-400); }
.list-row__meta{
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fs-caption);
  color: var(--n-600);
}
.list-row__cell{
  font-size: var(--fs-caption);
  color: var(--n-600);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.list-row__cell--right{ text-align: right; }
.list-row.is-overdue .list-row__title{ color: var(--danger); }
.list-row__action{
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--n-200);
  color: var(--n-400);
  cursor: pointer;
  opacity: 0;
  transition: .15s;
}
.list-row:hover .list-row__action{ opacity: 1; }
.list-row__action:hover{ border-color: var(--danger); color: var(--danger); }

.list-section{
  background: var(--n-0);
  border: 1px solid var(--n-200);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: var(--sp-4);
}
.list-section__header{
  padding: var(--sp-3) var(--sp-4);
  background: var(--n-50);
  border-bottom: 1px solid var(--n-200);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: 700;
  font-size: var(--fs-body);
  color: var(--n-900);
}
.list-section__count{
  margin-left: auto;
  font-size: var(--fs-caption);
  color: var(--n-500);
  font-weight: 600;
}
.list-section__empty{
  padding: var(--sp-5) var(--sp-4);
  text-align: center;
  color: var(--n-400);
  font-size: var(--fs-caption);
}

/* ========== BOARD (カンバン) ========== */
.board{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
  align-items: start;
}
.board-column{
  background: var(--n-100);
  border-radius: var(--r-lg);
  padding: var(--sp-3);
  min-height: 200px;
}
.board-column__header{
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
  font-weight: 700;
  font-size: var(--fs-body);
  color: var(--n-900);
}
.board-column__count{
  font-size: var(--fs-caption);
  color: var(--n-500);
  font-weight: 600;
}
.board-card{
  background: var(--n-0);
  border: 1px solid var(--n-200);
  border-radius: var(--r);
  padding: var(--sp-3);
  margin-bottom: var(--sp-2);
  font-size: var(--fs-body);
  cursor: pointer;
  transition: .15s;
}
.board-card:hover{ border-color: var(--n-300); box-shadow: var(--sh); }
.board-card__title{
  font-weight: 600;
  color: var(--n-900);
  margin-bottom: var(--sp-2);
  line-height: 1.4;
}
.board-card__meta{
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  flex-wrap: wrap;
  font-size: var(--fs-micro);
  color: var(--n-500);
}
.board-column.is-drop-target{
  background: var(--a-50);
  outline: 2px dashed var(--a-500);
  outline-offset: -2px;
}

/* ========== KPI CARD ========== */
.kpi-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-3);
}
.kpi{
  background: var(--n-0);
  border: 1px solid var(--n-200);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.kpi__label{
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--n-500);
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}
.kpi__value{
  font-size: var(--fs-display);
  font-weight: 800;
  color: var(--n-900);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.kpi__value-unit{ font-size: var(--fs-h2); font-weight: 700; color: var(--n-500); margin-left: var(--sp-1); }
.kpi__sub{
  font-size: var(--fs-micro);
  color: var(--n-500);
  font-weight: 500;
}
.kpi__progress{
  height: 4px;
  background: var(--n-100);
  border-radius: 2px;
  overflow: hidden;
  margin-top: var(--sp-1);
}
.kpi__progress-fill{
  height: 100%;
  background: var(--a-500);
  transition: width .3s ease;
}
.kpi--clickable{ cursor: pointer; transition: .15s; }
.kpi--clickable:hover{ border-color: var(--n-300); box-shadow: var(--sh-md); }
.kpi--accent .kpi__value{ color: var(--a-500); }
.kpi--success .kpi__value{ color: var(--success); }
.kpi--danger .kpi__value{ color: var(--danger); }
.kpi--info .kpi__value{ color: var(--info); }

/* ========== BANNER ========== */
.banner{
  border-radius: var(--r-lg);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-3);
  font-size: var(--fs-body);
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  cursor: pointer;
  transition: .15s;
  border: 1px solid;
}
.banner__icon{
  font-size: var(--fs-h1);
  line-height: 1;
  flex-shrink: 0;
}
.banner__body{ flex: 1; }
.banner__title{ font-weight: 700; margin-bottom: var(--sp-1); }
.banner__list{ list-style: none; margin: 0; padding: 0; font-size: var(--fs-caption); }
.banner__list li{ padding: 2px 0; }
.banner__list li::before{ content: '・'; font-weight: 900; margin-right: var(--sp-1); }
.banner__cta{ display: inline-block; margin-top: var(--sp-1); font-size: var(--fs-micro); text-decoration: underline; }

.banner--danger{ background: var(--danger-bg); color: var(--danger); border-color: var(--danger-br); }
.banner--danger:hover{ background: #fee2e2; }
.banner--warning{ background: var(--warning-bg); color: var(--warning); border-color: var(--warning-br); }
.banner--info{ background: var(--info-bg); color: var(--info); border-color: var(--info-br); }

/* ========== INFO TOOLTIP (ⓘ) ========== */
.tip{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--n-200);
  color: var(--n-600);
  font-size: 10px;
  font-weight: 800;
  font-style: normal;
  margin-left: var(--sp-1);
  cursor: help;
  border: 1px solid var(--n-300);
  vertical-align: middle;
  position: relative;
  user-select: none;
}
.tip::before{ content: 'i'; line-height: 1; }
.tip:hover{ background: var(--info); color: var(--n-0); border-color: var(--info); }
.tip:hover::after{
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--n-900);
  color: var(--n-0);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r);
  font-size: var(--fs-micro);
  font-weight: 500;
  white-space: pre-wrap;
  width: 280px;
  max-width: 90vw;
  z-index: 100;
  pointer-events: none;
  line-height: 1.5;
  box-shadow: var(--sh-lg);
  text-align: left;
}

/* ========== USER BADGE (TOPBAR) ========== */
.user-badge{
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  height: 36px;
  padding: 0 var(--sp-3);
  background: var(--a-50);
  border: 1px solid var(--a-200);
  border-radius: var(--r);
  font-size: var(--fs-caption);
  color: var(--a-700);
  cursor: default;
}
.user-badge__main, .user-badge__switch{ cursor: pointer; padding: var(--sp-1) 2px; }
.user-badge__main:hover, .user-badge__switch:hover{ background: var(--a-100); border-radius: 3px; }
.user-badge__name{ font-weight: 800; }
.user-badge__count{ color: var(--n-500); font-weight: 500; margin-left: var(--sp-1); }

.sync-badge{
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  height: 36px;
  padding: 0 var(--sp-3);
  border-radius: var(--r);
  font-size: var(--fs-caption);
  font-weight: 600;
}
.sync-badge--ok{ background: var(--success-bg); color: var(--success); border: 1px solid var(--success-br); }
.sync-badge--warning{ background: var(--warning-bg); color: var(--warning); border: 1px solid var(--warning-br); }
.sync-badge--syncing{ background: var(--info-bg); color: var(--info); border: 1px solid var(--info-br); }

.inbox-btn{
  position: relative;
}
.inbox-btn__unread{
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 var(--sp-1);
  background: var(--danger);
  color: var(--n-0);
  border-radius: var(--r-pill);
  font-size: var(--fs-micro);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ========== TEAM BUCKET ========== */
.team-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-3);
}
.bucket{
  background: var(--n-0);
  border: 1px solid var(--n-200);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  transition: .15s;
}
.bucket.is-drop-target{ border-color: var(--a-500); background: var(--a-50); }
.bucket__head{
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}
.bucket__avatar{
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--a-100);
  color: var(--a-700);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: var(--fs-h2);
  flex-shrink: 0;
}
.bucket__name{ font-weight: 700; color: var(--n-900); font-size: var(--fs-h2); }
.bucket__count{ font-size: var(--fs-caption); color: var(--n-500); margin-left: auto; }
.bucket__load-bar{
  height: 3px;
  background: var(--n-100);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: var(--sp-3);
}
.bucket__load-fill{
  height: 100%;
  background: var(--a-500);
  transition: width .3s ease;
}
.bucket__cells{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-2);
}
.bucket__cell{
  background: var(--n-50);
  border-radius: var(--r);
  padding: var(--sp-2);
  cursor: pointer;
  transition: .1s;
  text-align: center;
}
.bucket__cell:hover{ background: var(--n-100); }
.bucket__cell-num{ font-size: var(--fs-h1); font-weight: 800; color: var(--n-900); display: block; line-height: 1.1; }
.bucket__cell-label{ font-size: var(--fs-micro); color: var(--n-500); font-weight: 600; display: block; margin-top: 2px; }
.bucket__cell--doing .bucket__cell-num{ color: var(--info); }
.bucket__cell--todo .bucket__cell-num{ color: var(--n-700); }
.bucket__cell--stalled .bucket__cell-num{ color: var(--danger); }
.bucket__cell--done .bucket__cell-num{ color: var(--success); }
.bucket__droptip{
  text-align: center;
  margin-top: var(--sp-2);
  font-size: var(--fs-micro);
  color: var(--n-400);
}

/* ========== WEEK CARDS ========== */
.weeks{ display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); }
.week-card{
  background: var(--n-0);
  border: 1px solid var(--n-200);
  border-radius: var(--r-lg);
  padding: var(--sp-3);
  cursor: pointer;
  transition: .15s;
}
.week-card:hover{ border-color: var(--n-300); box-shadow: var(--sh); }
.week-card.is-current{ border-color: var(--a-500); background: var(--a-50); }
.week-card__label{ font-size: var(--fs-caption); font-weight: 700; color: var(--n-900); }
.week-card__range{ font-size: var(--fs-micro); color: var(--n-500); margin-top: 2px; }
.week-card__num{ font-size: var(--fs-display); font-weight: 800; color: var(--a-500); margin-top: var(--sp-2); }
.week-card__num--empty{ color: var(--n-300); }
.week-card__list{ font-size: var(--fs-micro); color: var(--n-600); margin-top: var(--sp-1); line-height: 1.4; }

/* ========== PRIORITY CARDS (今週の優先タスク) ========== */
.priority-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sp-3);
}
.priority-card{
  background: var(--n-0);
  border: 1px solid var(--n-200);
  border-radius: var(--r-lg);
  border-left: 3px solid var(--a-500);
  padding: var(--sp-3);
  cursor: pointer;
  transition: .15s;
}
.priority-card:hover{ box-shadow: var(--sh-md); border-color: var(--n-300); }
.priority-card__title{ font-size: var(--fs-body); font-weight: 700; color: var(--n-900); margin-bottom: var(--sp-1); line-height: 1.4; }
.priority-card__team{ display: inline-block; margin-bottom: var(--sp-2); }
.priority-card__note{ font-size: var(--fs-caption); color: var(--n-600); line-height: 1.5; }

/* ========== COST PROGRESS (今月の到達度) ========== */
.cost-progress{
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--sp-5);
  align-items: center;
}
.cost-progress__bar{
  height: 32px;
  background: var(--n-100);
  border-radius: var(--r-pill);
  position: relative;
  overflow: hidden;
}
.cost-progress__projected, .cost-progress__actual{
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  transition: width .5s ease;
}
.cost-progress__projected{ background: var(--info); opacity: .35; }
.cost-progress__actual{ background: var(--success); }
.cost-progress__label{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-caption);
  font-weight: 700;
  color: var(--n-900);
  text-shadow: 0 0 4px rgba(255,255,255,.8);
}
.cost-progress__legend{
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-micro);
  color: var(--n-500);
  margin-top: var(--sp-2);
}
.cost-progress__legend-dot{ display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: var(--sp-1); vertical-align: middle; }

/* ========== MODAL ========== */
.modal-overlay{
  position: fixed;
  inset: 0;
  background: rgba(17,24,39,.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: var(--sp-5);
}
.modal-overlay.is-open{ display: flex; }
.modal{
  background: var(--n-0);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  width: 100%;
  max-width: 720px;
  max-height: 90vh;
  overflow-y: auto;
  padding: var(--sp-5);
}
.modal__header{
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.modal__eyebrow{
  font-size: var(--fs-micro);
  font-weight: 700;
  color: var(--n-500);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.modal__title{
  font-size: var(--fs-h1);
  font-weight: 800;
  color: var(--n-900);
  margin-top: 2px;
}
.modal__meta{ margin-top: var(--sp-1); display: flex; gap: var(--sp-1); flex-wrap: wrap; }
.modal__close{
  margin-left: auto;
  width: 32px;
  height: 32px;
  background: transparent;
  border: 1px solid var(--n-200);
  border-radius: var(--r);
  cursor: pointer;
  color: var(--n-500);
  font-size: var(--fs-h2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal__close:hover{ background: var(--n-100); color: var(--n-900); }
.modal__section{ margin-bottom: var(--sp-4); }
.modal__section--accent{
  background: var(--a-50);
  border: 1px solid var(--a-200);
  border-radius: var(--r);
  padding: var(--sp-4);
}
.modal__field{ margin-bottom: var(--sp-3); }
.modal__field-label{
  font-size: var(--fs-micro);
  font-weight: 700;
  color: var(--n-600);
  display: block;
  margin-bottom: var(--sp-1);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.modal__grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3);
}

/* ========== INPUT / SELECT ========== */
.input, .select, .textarea{
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-body);
  font-family: var(--ff);
  border: 1px solid var(--n-300);
  border-radius: var(--r);
  background: var(--n-0);
  color: var(--n-900);
  transition: .15s;
}
.input:focus, .select:focus, .textarea:focus{
  outline: none;
  border-color: var(--a-500);
  box-shadow: 0 0 0 3px var(--a-100);
}
.textarea{ min-height: 100px; resize: vertical; line-height: var(--lh-base); }

/* ========== SNACKBAR ========== */
.snackbar{
  position: fixed;
  bottom: var(--sp-5);
  left: 50%;
  transform: translateX(-50%) translateY(60px);
  background: var(--n-900);
  color: var(--n-0);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r);
  font-size: var(--fs-body);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  opacity: 0;
  transition: .25s;
  z-index: 200;
  box-shadow: var(--sh-lg);
}
.snackbar.is-show{ opacity: 1; transform: translateX(-50%) translateY(0); }
.snackbar button{
  background: transparent;
  border: 1px solid rgba(255,255,255,.3);
  color: var(--a-200);
  padding: 2px var(--sp-2);
  border-radius: var(--r-sm);
  cursor: pointer;
  font-weight: 700;
}
.snackbar button:hover{ background: rgba(255,255,255,.1); }

/* ========== INBOX ENTRY ========== */
.inbox-list{ display: flex; flex-direction: column; gap: var(--sp-1); }
.inbox-entry{
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: var(--sp-3);
  padding: var(--sp-3);
  background: var(--n-0);
  border: 1px solid var(--n-200);
  border-radius: var(--r);
  cursor: pointer;
  transition: .15s;
  align-items: center;
}
.inbox-entry:hover{ border-color: var(--n-300); background: var(--n-50); }
.inbox-entry.is-unread{ border-left: 3px solid var(--a-500); }
.inbox-entry__avatar{
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--a-100);
  color: var(--a-700);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--fs-caption);
  flex-shrink: 0;
}
.inbox-entry__body{ overflow: hidden; }
.inbox-entry__title{ font-weight: 600; color: var(--n-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-entry__msg{ font-size: var(--fs-caption); color: var(--n-600); margin-top: 2px; }
.inbox-entry__time{ font-size: var(--fs-micro); color: var(--n-400); white-space: nowrap; }

/* ========== ONBOARDING ========== */
.onboarding{
  background: var(--a-50);
  border: 1px solid var(--a-200);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.onboarding summary{
  cursor: pointer;
  font-weight: 700;
  font-size: var(--fs-h2);
  color: var(--n-900);
  list-style: none;
  outline: none;
}
.onboarding summary::-webkit-details-marker{ display: none; }
.onboarding[open] summary{ margin-bottom: var(--sp-3); }
.onboarding__body{ font-size: var(--fs-body); line-height: 1.7; color: var(--n-700); }
.onboarding__body p{ margin-bottom: var(--sp-2); }

/* ========== FILTER BAR ========== */
.filter-bar{
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-bottom: var(--sp-3);
  align-items: center;
}
.filter-bar .input, .filter-bar .select{
  height: 36px;
  width: auto;
  min-width: 120px;
}
.filter-bar__search{ flex: 1; min-width: 200px; max-width: 300px; }

/* ========== DRILL TABLE ========== */
.drill-table{
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-body);
}
.drill-table th{
  background: var(--n-50);
  font-size: var(--fs-micro);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--n-600);
  padding: var(--sp-2) var(--sp-3);
  text-align: left;
  border-bottom: 1px solid var(--n-200);
}
.drill-table td{
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--n-100);
}
.drill-table tr{ cursor: pointer; }
.drill-table tr:hover td{ background: var(--n-50); }

/* ========== レガシー互換: 既存 .dash-* クラスを新トークンで再表現 ========== */
.dash-tag{
  display: inline-block;
  padding: 2px var(--sp-2);
  font-size: var(--fs-micro);
  font-weight: 700;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
}
.dash-tag-team{ background: var(--n-100); color: var(--n-700); border-color: var(--n-200); }
.dash-tag-status-未着手{ background: var(--n-100); color: var(--n-600); border: 1px solid var(--n-200); }
.dash-tag-status-進行中{ background: var(--info-bg); color: var(--info); border: 1px solid var(--info-br); }
.dash-tag-status-完了{ background: var(--success-bg); color: var(--success); border: 1px solid var(--success-br); }
.dash-tag-priority-高{ background: var(--danger-bg); color: var(--danger); border: 1px solid var(--danger-br); }
.dash-tag-priority-中{ background: var(--warning-bg); color: var(--warning); border: 1px solid var(--warning-br); }
.dash-tag-priority-低{ background: var(--n-100); color: var(--n-600); border: 1px solid var(--n-200); }

.dash-input, .dash-select, .dash-textarea{
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-body);
  font-family: var(--ff);
  border: 1px solid var(--n-300);
  border-radius: var(--r);
  background: var(--n-0);
  color: var(--n-900);
}
.dash-input:focus, .dash-select:focus, .dash-textarea:focus{
  outline: none; border-color: var(--a-500); box-shadow: 0 0 0 3px var(--a-100);
}
.dash-textarea{ min-height: 100px; resize: vertical; line-height: var(--lh-base); }

.dash-btn{ /* alias for .btn */
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-4); border-radius: var(--r); font-size: var(--fs-body); font-weight: 600;
  cursor: pointer; border: 1px solid transparent; transition: .15s; height: 36px; white-space: nowrap;
}
.dash-btn--primary{ background: var(--a-500); color: var(--n-0); }
.dash-btn--primary:hover{ background: var(--a-600); }
.dash-btn--secondary{ background: var(--n-0); color: var(--n-700); border-color: var(--n-300); }
.dash-btn--secondary:hover{ background: var(--n-50); }
.dash-btn--danger{ background: var(--n-0); color: var(--danger); border-color: var(--danger); }
.dash-btn--danger:hover{ background: var(--danger); color: var(--n-0); }

.dash-card{
  background: var(--n-0);
  border: 1px solid var(--n-200);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  margin-bottom: var(--sp-3);
}
.dash-card--flush{ padding: 0; overflow: hidden; }
.dash-card--info{
  background: var(--info-bg);
  border-color: var(--info-br);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
}
.dash-info-title{ font-weight: 700; color: var(--n-900); font-size: var(--fs-body); }
.dash-info-sub{ font-size: var(--fs-caption); color: var(--n-500); margin-top: 2px; }

.dash-section-title{
  font-size: var(--fs-h1); font-weight: 700; color: var(--n-900); line-height: var(--lh-tight);
  padding-left: var(--sp-2); border-left: 3px solid var(--a-500); margin: var(--sp-5) 0 var(--sp-3);
}
.dash-section-title:first-child{ margin-top: 0; }
.dash-section-desc{ font-size: var(--fs-caption); color: var(--n-500); margin: -2px 0 var(--sp-3); font-weight: 500; }

.dash-actionbar{ display: flex; justify-content: flex-end; margin-bottom: var(--sp-3); }

/* 既存 dash-table */
.dash-table{ width: 100%; border-collapse: collapse; font-size: var(--fs-body); background: var(--n-0); }
.dash-table thead th{
  background: var(--n-50); font-size: var(--fs-micro); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.3px; color: var(--n-600); padding: var(--sp-2) var(--sp-3); text-align: left;
  border-bottom: 1px solid var(--n-200);
}
.dash-table tbody td{ padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--n-100); }
.dash-table tbody tr{ cursor: pointer; transition: .1s; }
.dash-table tbody tr:hover{ background: var(--n-50); }
.dash-table-row--overdue td:nth-child(2){ color: var(--danger); font-weight: 600; }
.dash-table-row--dragging{ opacity: .5; }
.dash-table tr[draggable="true"]{ cursor: grab; }
.dash-table tr[draggable="true"]:active{ cursor: grabbing; }

.dash-table-col-id{ width: 40px; }
.dash-table-col-actions{ width: 40px; text-align: center; }
.dash-cell-editable:hover{ background: var(--a-50); }
.dash-cell-editing{ background: var(--a-50); padding: 0 !important; }
.dash-cell-editing select, .dash-cell-editing input{ width: 100%; height: 100%; border: 2px solid var(--a-500); padding: var(--sp-1) var(--sp-2); font-size: var(--fs-caption); font-family: inherit; }

.dash-cell-actions{ text-align: center; padding: 0 !important; }
.dash-row-delete{
  background: transparent; border: 1px solid var(--danger-br); color: var(--danger);
  width: 24px; height: 24px; border-radius: 50%; cursor: pointer;
  font-size: 14px; font-weight: 900; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  opacity: .6; transition: .15s; font-family: inherit;
}
.dash-table tr:hover .dash-row-delete{ opacity: 1; }
.dash-row-delete:hover{ background: var(--danger); color: var(--n-0); transform: scale(1.1); }

.dash-table-footer{
  display: flex; justify-content: space-between; padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-caption); color: var(--n-500); background: var(--n-50);
  border-top: 1px solid var(--n-200);
}

/* 既存 dash-modal-* */
.dash-modal-overlay{
  position: fixed; inset: 0; background: rgba(17,24,39,.5);
  display: none; align-items: center; justify-content: center; z-index: 100; padding: var(--sp-5);
}
.dash-modal-overlay--show{ display: flex; }
.dash-modal-panel{
  background: var(--n-0); border-radius: var(--r-lg); box-shadow: var(--sh-lg);
  width: 100%; max-width: 720px; max-height: 90vh; overflow-y: auto; padding: var(--sp-5);
}
.dash-modal-header{ display: flex; align-items: flex-start; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.dash-modal-eyebrow{ font-size: var(--fs-micro); font-weight: 700; color: var(--n-500); letter-spacing: 0.5px; text-transform: uppercase; }
.dash-modal-title{ font-size: var(--fs-h1); font-weight: 800; color: var(--n-900); margin-top: 2px; }
.dash-modal-meta{ margin-top: var(--sp-1); display: flex; gap: var(--sp-1); flex-wrap: wrap; }
.dash-modal-close{
  margin-left: auto; width: 32px; height: 32px; background: transparent;
  border: 1px solid var(--n-200); border-radius: var(--r); cursor: pointer; color: var(--n-500);
  font-size: var(--fs-h2); display: flex; align-items: center; justify-content: center;
}
.dash-modal-close:hover{ background: var(--n-100); color: var(--n-900); }
.dash-modal-section{ margin-bottom: var(--sp-4); }
.dash-modal-section--accent{ background: var(--a-50); border: 1px solid var(--a-200); border-radius: var(--r); padding: var(--sp-4); }
.dash-modal-section-title{ font-size: var(--fs-h2); font-weight: 700; color: var(--n-900); margin-bottom: var(--sp-2); }
.dash-modal-section-note{ font-size: var(--fs-caption); color: var(--n-600); margin-top: var(--sp-2); line-height: 1.6; }
.dash-modal-field{ }
.dash-modal-field-label{ font-size: var(--fs-micro); font-weight: 700; color: var(--n-600); display: block; margin-bottom: var(--sp-1); text-transform: uppercase; letter-spacing: 0.3px; }
.dash-modal-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); margin-bottom: var(--sp-3); }
.dash-modal-danger-zone{ border-top: 1px solid var(--n-200); padding-top: var(--sp-4); margin-top: var(--sp-4); }
.dash-modal-danger-note{ font-size: var(--fs-caption); color: var(--n-500); margin-top: var(--sp-1); line-height: 1.5; }

.dash-calc-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.dash-calc-label{ font-size: var(--fs-micro); font-weight: 700; color: var(--n-600); display: block; margin-bottom: var(--sp-1); }
.dash-calc-preview{ font-size: var(--fs-caption); color: var(--n-700); margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-3); background: var(--n-0); border: 1px solid var(--n-200); border-radius: var(--r); line-height: 1.7; }

/* 既存 dash-summary（旧サマリーバー、ホームに残す） */
.dash-summary{ display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); margin-bottom: var(--sp-4); }
.dash-summary-card{
  background: var(--n-0); border: 1px solid var(--n-200); border-radius: var(--r-lg);
  padding: var(--sp-4); cursor: pointer; transition: .15s;
}
.dash-summary-card:hover{ border-color: var(--n-300); box-shadow: var(--sh); }
.dash-summary-value{ font-size: var(--fs-display); font-weight: 800; line-height: 1.1; }
.dash-summary-label{ font-size: var(--fs-caption); color: var(--n-500); margin-top: var(--sp-1); font-weight: 600; }
.dash-progress-track{ height: 4px; background: var(--n-100); border-radius: 2px; overflow: hidden; margin-top: var(--sp-2); }
.dash-progress-fill{ height: 100%; background: var(--a-500); transition: width .3s ease; }

.dash-summary-breakdown{ font-size: var(--fs-micro); color: var(--n-500); margin-top: var(--sp-1); font-weight: 600; }
.dash-summary-breakdown strong{ color: var(--n-900); font-weight: 700; }
.dash-bucket-done-breakdown{ display: inline-block; font-size: 9px; color: var(--n-500); font-weight: 600; margin-left: 2px; }

.dash-overdue-banner{
  grid-column: 1/-1; background: var(--danger-bg); border: 1px solid var(--danger);
  border-radius: var(--r); padding: var(--sp-3); font-size: var(--fs-body); font-weight: 700;
  color: var(--danger); cursor: pointer;
}
.dash-overdue-banner:hover{ background: #fee2e2; }

.dash-consistency-banner{
  background: var(--danger-bg); border: 1px solid var(--danger); border-radius: var(--r-lg);
  padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-3); color: var(--danger);
  font-weight: 700; cursor: pointer; transition: .15s;
}
.dash-consistency-banner:hover{ background: #fee2e2; box-shadow: var(--sh-md); }
.dash-consistency-banner-title{ font-size: var(--fs-body); margin-bottom: var(--sp-1); display: flex; align-items: center; gap: var(--sp-2); }
.dash-consistency-banner-list{ font-size: var(--fs-caption); color: #7f1d1d; line-height: 1.7; margin: var(--sp-1) 0 0; padding-left: 0; list-style: none; font-weight: 600; }
.dash-consistency-banner-list li{ padding: 2px 0; }
.dash-consistency-banner-list li::before{ content: '・'; color: var(--danger); font-weight: 900; margin-right: var(--sp-1); }
.dash-consistency-banner-cta{ display: inline-block; margin-top: var(--sp-1); font-size: var(--fs-micro); color: var(--danger); text-decoration: underline; }

.dash-kpi-info{
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--n-200); color: var(--n-600); font-size: 10px; font-weight: 800;
  font-style: normal; margin-left: var(--sp-1); cursor: help;
  border: 1px solid var(--n-300); vertical-align: middle; position: relative; user-select: none;
}
.dash-kpi-info::before{ content: 'i'; line-height: 1; }
.dash-kpi-info:hover{ background: var(--info); color: var(--n-0); border-color: var(--info); }
.dash-kpi-info:hover::after{
  content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  background: var(--n-900); color: var(--n-0); padding: var(--sp-2) var(--sp-3); border-radius: var(--r);
  font-size: var(--fs-micro); font-weight: 500; white-space: pre-wrap; width: 280px; max-width: 90vw;
  z-index: 100; pointer-events: none; line-height: 1.5; box-shadow: var(--sh-lg); text-align: left;
}

.dash-badge--measured{
  display: inline-block; font-size: var(--fs-micro); font-weight: 700; padding: 1px var(--sp-1);
  border-radius: var(--r-sm); background: var(--success-bg); color: var(--success);
  border: 1px solid var(--success-br); margin-left: var(--sp-1);
}
.dash-badge--unmeasured{
  display: inline-block; font-size: var(--fs-micro); font-weight: 700; padding: 1px var(--sp-1);
  border-radius: var(--r-sm); background: var(--warning-bg); color: var(--warning);
  border: 1px solid var(--warning-br); margin-left: var(--sp-1);
}

/* 既存 dash-cost-* */
.dash-cost-row{ display: grid; grid-template-columns: 1fr 360px; gap: var(--sp-5); align-items: center; }
.dash-cost-progress-area{ }
.dash-cost-progress-head{ display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--sp-2); }
.dash-cost-progress-title{ font-size: var(--fs-body); color: var(--n-700); font-weight: 600; }
.dash-cost-progress-period{ font-size: var(--fs-micro); color: var(--n-500); }
.dash-cost-bar{ position: relative; height: 32px; background: var(--n-100); border-radius: var(--r-pill); overflow: hidden; }
.dash-cost-bar-projected{ position: absolute; top: 0; left: 0; height: 100%; background: var(--info); opacity: .35; transition: width .5s ease; }
.dash-cost-bar-actual{ position: absolute; top: 0; left: 0; height: 100%; background: var(--success); transition: width .5s ease; }
.dash-cost-bar-label{ position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: var(--fs-caption); font-weight: 700; color: var(--n-900); text-shadow: 0 0 4px rgba(255,255,255,.8); }
.dash-cost-legend{ display: flex; justify-content: space-between; font-size: var(--fs-micro); color: var(--n-500); margin-top: var(--sp-2); }
.dash-cost-legend-dot{ display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: var(--sp-1); vertical-align: middle; }
.dash-cost-kpis{ display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.dash-cost-kpi{
  background: var(--n-50); border: 1px solid var(--n-200); border-radius: var(--r);
  padding: var(--sp-3); cursor: pointer; transition: .15s; text-align: center;
}
.dash-cost-kpi:hover{ border-color: var(--n-300); background: var(--n-0); box-shadow: var(--sh-sm); }
.dash-cost-kpi-label{ font-size: var(--fs-micro); font-weight: 700; color: var(--n-500); text-transform: uppercase; letter-spacing: 0.3px; display: flex; align-items: center; justify-content: center; gap: var(--sp-1); }
.dash-cost-kpi-value{ font-size: var(--fs-display); font-weight: 800; color: var(--n-900); line-height: 1.1; margin-top: var(--sp-1); }
.dash-cost-kpi-sub{ font-size: var(--fs-micro); color: var(--n-400); margin-top: 2px; }
.dash-cost-note{
  margin-top: var(--sp-3); padding: var(--sp-2) var(--sp-3); background: var(--n-50);
  border-radius: var(--r); font-size: var(--fs-caption); color: var(--n-600); line-height: 1.6;
}

/* 既存 dash-team-grid（→ 新 team-grid に置換、但し旧クラスも維持） */
.dash-team-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-3); }
.dash-bucket{
  background: var(--n-0); border: 1px solid var(--n-200); border-radius: var(--r-lg);
  padding: var(--sp-3); transition: .15s;
}
.dash-bucket--drop-target{ border-color: var(--a-500); background: var(--a-50); }
.dash-bucket-head{ display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.dash-bucket-name{ font-weight: 700; color: var(--n-900); font-size: var(--fs-h2); }
.dash-bucket-count{ font-size: var(--fs-caption); color: var(--n-500); margin-left: auto; }
.dash-bucket-load-bar{ height: 3px; background: var(--n-100); border-radius: 2px; overflow: hidden; margin-bottom: var(--sp-2); }
.dash-bucket-load-fill{ height: 100%; background: var(--a-500); transition: width .3s ease; }
.dash-bucket-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-1); }
.dash-bucket-cell{
  background: var(--n-50); border-radius: var(--r); padding: var(--sp-2);
  cursor: pointer; transition: .1s; text-align: center;
}
.dash-bucket-cell:hover{ background: var(--n-100); }
.dash-bucket-cell-num{ font-size: var(--fs-h1); font-weight: 800; color: var(--n-900); display: block; line-height: 1.1; }
.dash-bucket-cell-label{ font-size: var(--fs-micro); color: var(--n-500); font-weight: 600; display: block; margin-top: 2px; }
.dash-bucket-cell--doing .dash-bucket-cell-num{ color: var(--info); }
.dash-bucket-cell--todo .dash-bucket-cell-num{ color: var(--n-700); }
.dash-bucket-cell--stalled .dash-bucket-cell-num{ color: var(--danger); }
.dash-bucket-cell--stalled-empty .dash-bucket-cell-num{ color: var(--n-300); }
.dash-bucket-cell--done .dash-bucket-cell-num{ color: var(--success); }
.dash-bucket-droptip{ text-align: center; margin-top: var(--sp-2); font-size: var(--fs-micro); color: var(--n-400); }

/* 既存 dash-weeks-grid */
.dash-weeks-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); }
.dash-week-card{
  background: var(--n-0); border: 1px solid var(--n-200); border-radius: var(--r-lg);
  padding: var(--sp-3); cursor: pointer; transition: .15s;
}
.dash-week-card:hover{ border-color: var(--n-300); box-shadow: var(--sh); }
.dash-week-card--current{ border-color: var(--a-500); background: var(--a-50); }
.dash-week-card-head{ }
.dash-week-card-label{ font-size: var(--fs-caption); font-weight: 700; color: var(--n-900); }
.dash-week-card-range{ font-size: var(--fs-micro); color: var(--n-500); margin-top: 2px; }
.dash-week-card-body{ display: flex; align-items: baseline; gap: var(--sp-1); margin-top: var(--sp-2); }
.dash-week-card-num{ font-size: var(--fs-display); font-weight: 800; color: var(--a-500); }
.dash-week-card-num--empty{ color: var(--n-300); }
.dash-week-card-unit{ font-size: var(--fs-caption); color: var(--n-500); font-weight: 600; }
.dash-week-card-list{ font-size: var(--fs-micro); color: var(--n-600); margin-top: var(--sp-1); line-height: 1.4; }

/* 既存 dash-priority-* */
.dash-priority-source{ font-size: var(--fs-micro); color: var(--n-500); margin-bottom: var(--sp-2); }
.dash-priority-source code{ background: var(--n-100); padding: 1px var(--sp-1); border-radius: var(--r-sm); font-size: var(--fs-micro); font-family: monospace; }
.dash-priority-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-3); }
.dash-priority-card{
  background: var(--n-0); border: 1px solid var(--n-200); border-left: 3px solid var(--a-500);
  border-radius: var(--r-lg); padding: var(--sp-3); cursor: pointer; transition: .15s;
}
.dash-priority-card:hover{ box-shadow: var(--sh-md); border-color: var(--n-300); }
.dash-priority-card-head{ display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.dash-priority-checkbox{
  width: 16px; height: 16px; border: 1.5px solid var(--n-300); border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 900;
  color: var(--n-0); background: transparent; flex-shrink: 0;
}
.dash-priority-checkbox--done{ background: var(--success); border-color: var(--success); }
.dash-priority-name{ font-weight: 700; color: var(--n-900); font-size: var(--fs-body); }
.dash-priority-name--done{ text-decoration: line-through; color: var(--n-400); }
.dash-priority-note{ font-size: var(--fs-caption); color: var(--n-600); margin-top: var(--sp-2); line-height: 1.5; }

/* 既存 dash-drill-* */
.dash-drill-wrap{ overflow-x: auto; }
.dash-drill-table{ width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
.dash-drill-table th{
  background: var(--n-50); font-size: var(--fs-micro); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.3px; color: var(--n-600); padding: var(--sp-2) var(--sp-3); text-align: left;
  border-bottom: 1px solid var(--n-200);
}
.dash-drill-table td{ padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--n-100); }
.dash-drill-table tr{ cursor: pointer; }
.dash-drill-table tr:hover td{ background: var(--n-50); }

/* 既存 dash-progress-bar / dash-kpi（アカウント用） */
.dash-progress-bar{ height: 6px; background: var(--n-100); border-radius: 3px; overflow: hidden; margin-top: var(--sp-1); }
.dash-progress-bar-fill{ height: 100%; transition: width .3s ease; }
.dash-progress-item{ margin-bottom: var(--sp-2); }
.dash-progress-head{ display: flex; justify-content: space-between; font-size: var(--fs-caption); margin-bottom: 2px; }
.dash-progress-dot{ display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: var(--sp-1); vertical-align: middle; }
.dash-progress-list{ background: var(--n-0); border: 1px solid var(--n-200); border-radius: var(--r-lg); padding: var(--sp-4); margin-bottom: var(--sp-4); }

.dash-kpi-row{ display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-3); }
.dash-kpi{
  background: var(--n-0); border: 1px solid var(--n-200); border-radius: var(--r-lg);
  padding: var(--sp-4);
}
.dash-kpi-label{ font-size: var(--fs-caption); font-weight: 600; color: var(--n-500); }
.dash-kpi-value{ font-size: var(--fs-display); font-weight: 800; color: var(--n-900); line-height: 1.1; margin-top: var(--sp-1); letter-spacing: -0.02em; }
.dash-kpi-sub{ font-size: var(--fs-micro); color: var(--n-500); margin-top: 2px; }

/* 既存 dash-filter-bar */
.dash-filter-bar{
  display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-3); align-items: center;
}
.dash-filter-bar .dash-select, .dash-filter-bar .dash-input{ height: 36px; width: auto; min-width: 120px; }
.dash-filter-add{ margin-left: auto; }

/* 既存 dash-badge */
.dash-badge{
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: 0 var(--sp-3); height: 36px;
  border-radius: var(--r); font-size: var(--fs-caption); font-weight: 600;
}
.dash-badge-sync{ background: var(--success-bg); color: var(--success); border: 1px solid var(--success-br); }
.dash-badge-warning{ background: var(--warning-bg); color: var(--warning); border: 1px solid var(--warning-br); }
.dash-badge--user{
  background: var(--a-50); color: var(--a-700); border: 1px solid var(--a-200); padding: 0 var(--sp-3); cursor: default;
}
.dash-badge--user .user-badge-main, .dash-badge--user .user-badge-switch{ cursor: pointer; padding: var(--sp-1) 2px; }
.dash-badge--user .user-badge-main:hover, .dash-badge--user .user-badge-switch:hover{ background: var(--a-100); border-radius: var(--r-sm); }
.dash-badge--user strong{ font-weight: 800; }
.dash-badge--user .user-badge-count{ font-size: var(--fs-micro); color: var(--n-500); margin-left: var(--sp-1); font-weight: 500; }

/* 既存 dash-snackbar */
.dash-snackbar{
  position: fixed; bottom: var(--sp-5); left: 50%; transform: translateX(-50%) translateY(60px);
  background: var(--n-900); color: var(--n-0); padding: var(--sp-2) var(--sp-4); border-radius: var(--r);
  font-size: var(--fs-body); display: flex; align-items: center; gap: var(--sp-3);
  opacity: 0; transition: .25s; z-index: 200; box-shadow: var(--sh-lg);
}
.dash-snackbar--show{ opacity: 1; transform: translateX(-50%) translateY(0); }
.dash-snackbar button{
  background: transparent; border: 1px solid rgba(255,255,255,.3); color: var(--a-200);
  padding: 2px var(--sp-2); border-radius: var(--r-sm); cursor: pointer; font-weight: 700;
}
.dash-snackbar button:hover{ background: rgba(255,255,255,.1); }

/* 既存 dash-modal-danger-zone */
.dash-modal-danger-zone{ border-top: 1px solid var(--n-200); padding-top: var(--sp-4); margin-top: var(--sp-4); }

/* レスポンシブ */
@media (max-width: 1024px){
  .app-shell{ grid-template-columns: var(--sidebar-w-collapsed) 1fr; }
  .nav-item__label, .nav-item__badge, .app-sidebar__heading, .app-sidebar__sources{ display: none; }
  .nav-item{ justify-content: center; padding: var(--sp-2); }
}
@media (max-width: 768px){
  .app-shell{ grid-template-columns: 1fr; grid-template-areas: "topbar" "content"; }
  .app-sidebar{ display: none; }
  .app-content{ padding: var(--sp-3) var(--sp-3); }
  .app-topbar__search{ display: none; }
}

/* 印刷 */
@media print{
  .app-sidebar, .app-topbar__search, .app-topbar__actions .btn--icon, .app-topbar__actions .inbox-btn{ display: none !important; }
  .app-shell{ grid-template-columns: 1fr; grid-template-areas: "topbar" "content"; }
  .app-content{ padding: 0; }
}

/* ========== レガシー dash-header（旧ヘッダー、新 .app-topbar に置換、互換維持） ========== */
.dash-header{ display: none; }
.dash-tabs{ display: none; }
.dash-tab-panel{ display: none; }
.dash-tab-panel--active{ display: block; }
.dash-footer{
  text-align: center; padding: var(--sp-3); font-size: var(--fs-micro); color: var(--n-400); border-top: 1px solid var(--n-200);
}