/* ============================================================
   Portal v3 — スクロールレス・コンパクトレイアウト
   ＋ ドラッグ&ドロップ カスタマイズ ＋ お気に入り
   theme.css の後に読み込むオーバーライド
   ============================================================ */

/* hero を圧縮（挨拶＋小型クイックアクション＋カスタマイズボタン） */
.cx-portal .cx-hero { padding:16px 22px 14px; margin-bottom:12px; border-radius:14px; }

/* ヒーローをアクセント色に連動（theme.css の固定グラデーションを上書き） */
.cx .cx-hero { background:linear-gradient(135deg, var(--hero-a,#06122b) 0%, var(--hero-b,#0a2f6e) 55%, var(--hero-c,#0b57c4) 100%); }
.cx[data-accent="navy"]  { --hero-a:#050c1c; --hero-b:#0a2450; --hero-c:#10408a; }
.cx[data-accent="sky"]   { --hero-a:#04123a; --hero-b:#0637a0; --hero-c:#005aff; }
.cx[data-accent="green"] { --hero-a:#06180f; --hero-b:#0f5136; --hero-c:#1f8a5b; }
.cx[data-accent="teal"]  { --hero-a:#051b20; --hero-b:#0a4c58; --hero-c:#0d7a8c; }
.cx-portal .cx-hero h1 { font-size:19px; margin:4px 0 2px; }
.cx-portal .cx-hero .sub { font-size:12px; opacity:.78; position:relative; z-index:1; color:#fff; }
.cx-portal .cx-hero .hero-top { display:flex; align-items:flex-start; position:relative; z-index:1; }
.cx-hero .cust-btn { margin-left:auto; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.25);
  color:#fff; border-radius:9px; padding:7px 12px; font-size:12.5px; font-weight:700; cursor:pointer;
  display:flex; align-items:center; gap:6px; white-space:nowrap; }
.cx-hero .cust-btn:hover { background:rgba(255,255,255,.24); }

/* ヒーロー内 小型クイックアクション */
.cx-hero .quick.sm { margin-top:10px; flex-wrap:wrap; gap:8px; }
.cx-hero .quick.sm .qbtn { padding:5px 10px; font-size:12px; border-radius:8px; gap:6px; font-weight:600; }

/* KPI（表示時）を圧縮 */
.cx-portal .cx-stats { gap:10px; }
.cx-portal .cx-stat { padding:9px 14px; }
.cx-portal .cx-stat .lab { margin-bottom:5px; }
.cx-portal .cx-stat .val { font-size:19px; }
.cx-portal .cx-stat .delta { margin-top:3px; font-size:11.5px; }

/* セクション見出し */
.cx-portal .cx-sec-h { margin:6px 2px 10px; }

/* 最近の活動（コンパクト行） */
.cx-portal .act-row { display:flex; align-items:center; gap:12px; padding:8px 16px; }

/* ============================================================
   業務メニュー（Claude Skills 風イラストカード）
   ============================================================ */
.cx-menu-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
@media (max-width:1100px) { .cx-menu-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:820px)  { .cx-menu-grid { grid-template-columns:repeat(2,1fr); } }
.cx-menu-btn { display:flex; flex-direction:column; background:#fff; border:1px solid var(--c-border);
  border-radius:14px; padding:0; overflow:hidden; cursor:pointer; position:relative;
  transition:box-shadow .15s, border-color .15s, transform .1s; }
.cx-menu-btn:hover { box-shadow:var(--c-shadow-2); border-color:#c9d4e4; transform:translateY(-2px); }
.cx-menu-btn .art-band { height:84px; position:relative; flex-shrink:0; }
.cx-menu-btn .art-band svg { display:block; }
.cx-menu-btn .body { display:flex; flex-direction:column; gap:5px; padding:10px 14px 11px; flex:1; }
.cx-menu-btn h3 { font-size:13.5px; font-weight:700; line-height:1.35; display:flex; align-items:center; gap:6px; }
.cx-menu-btn h3 .beta { font-size:10px; font-weight:800; color:var(--c-warn, #b45309); background:#fdf3e2;
  border:1px solid #f3ddb5; border-radius:99px; padding:1px 7px; }
.cx-menu-btn .desc { font-size:11.8px; color:var(--c-text-2); line-height:1.55; margin:0; flex:1;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.cx-menu-btn .foot { display:flex; align-items:center; gap:6px; min-width:0; }
.cx-menu-btn .foot .cx-chip { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cx-menu-btn .foot .open { margin-left:auto; color:var(--c-primary); display:flex; align-items:center; gap:3px;
  font-size:11.5px; font-weight:700; white-space:nowrap; }
/* リスト表示（Tweaks: ポータル=リスト） */
.cx-menu-grid.list { grid-template-columns:1fr; gap:10px; }
.cx-menu-grid.list .cx-menu-btn { flex-direction:row; align-items:stretch; }
.cx-menu-grid.list .cx-menu-btn .art-band { width:150px; height:auto; min-height:72px; flex-shrink:0; }
.cx-menu-grid.list .cx-menu-btn .body { padding:10px 16px; justify-content:center; }
.cx-menu-grid.list .cx-menu-btn .desc { flex:0 1 auto; -webkit-line-clamp:1; }
.cx-menu-grid.list .cx-menu-btn .foot { margin-top:2px; }

/* イラスト帯の上のお気に入り・グリップ */
.cx-menu-btn .art-band .fav-btn2 { position:absolute; top:6px; left:8px; background:rgba(255,255,255,.85);
  border-radius:99px; padding:4px; }
.cx-menu-btn .art-band .fav-btn2:hover { background:#fff; }
.cx-menu-btn .art-band .grip { position:absolute; top:8px; left:10px; color:var(--c-text-2);
  background:rgba(255,255,255,.85); border-radius:7px; padding:3px; display:flex; }

/* お気に入り（星）ボタン：メニュー行内 */
.fav-btn2 { background:none; border:0; cursor:pointer; color:#c3ccd9; padding:5px; border-radius:7px;
  display:flex; flex-shrink:0; }
.fav-btn2:hover { background:var(--c-hover); color:#f5a623; }
.fav-btn2.on { color:#f5a623; }
.fav-btn2.on svg path { fill:#f5a623; }

/* すべて／お気に入り 切替（セグメント） */
.cx-seg { display:flex; background:var(--c-surface); border:1px solid var(--c-border);
  border-radius:9px; padding:3px; gap:2px; }
.cx-seg button { border:0; background:none; font-size:12.5px; font-weight:700; padding:5px 12px;
  border-radius:7px; cursor:pointer; color:var(--c-text-2); display:flex; align-items:center; gap:5px; }
.cx-seg button.on { background:#fff; color:var(--c-primary); box-shadow:var(--c-shadow-1); }

/* お気に入り空状態 */
.fav-empty { border:1.5px dashed var(--c-border); border-radius:var(--c-radius-lg);
  padding:30px 20px; text-align:center; color:var(--c-text-3); font-size:13px; line-height:1.8; }

/* ============================================================
   カスタマイズモード（ドラッグ&ドロップ）
   ============================================================ */
.cust-banner { display:flex; align-items:center; gap:9px; background:var(--c-primary-bg);
  border:1px solid #bcd3f5; color:var(--c-primary); border-radius:12px; padding:9px 14px;
  font-size:12.5px; margin-bottom:12px; }
.cust-banner b { font-weight:700; }

/* ドラッグ可能なメニューボタン */
.cx-menu-btn.editing { cursor:grab; border-style:dashed; border-color:#9db8dd; }
.cx-menu-btn.editing:active { cursor:grabbing; }
.cx-menu-btn.editing:hover { transform:none; box-shadow:var(--c-shadow-1); }
.cx-menu-btn .grip { color:var(--c-text-3); display:flex; flex-shrink:0; }

/* ドラッグ可能なダッシュボードセクション */
.sec-wrap { border:1.5px dashed #9db8dd; border-radius:14px; padding:10px 12px 2px; margin-bottom:12px;
  background:rgba(240,246,255,.45); cursor:grab; }
.sec-wrap:active { cursor:grabbing; }
.sec-wrap.off { opacity:.55; background:var(--c-surface); border-color:var(--c-border); }
.sec-wrap .sec-head { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.sec-wrap .sec-head .grip { color:var(--c-text-3); display:flex; }
.sec-wrap .sec-head .nm { font-size:12.5px; font-weight:700; color:var(--c-text-2); }
.sec-wrap .sec-head .sw { margin-left:auto; display:flex; align-items:center; gap:6px; font-size:12px;
  color:var(--c-text-2); cursor:pointer; }
.sec-wrap.off .sec-body { display:none; }
.sec-wrap .sec-body { pointer-events:none; }