/* ============================================================
   Meetnect デザインシステム — Linear風 / ライト・ダーク両対応
   原則: ニュートラル中心＋差し色1つ / 影より境界線 / 小さめ角丸 /
        大胆な余白 / 全状態(hover,focus,active,disabled) / 両テーマ
   ============================================================ */
:root{
  /* 面・文字（3層：沈む本体→浮く白カード） */
  --bg:#ffffff; --bg-2:#f5f6fb; --surface:#ffffff; --surface-2:#f7f9fc; --surface-3:#fafbfe;
  --text:#101426; --muted:#5b6274; --muted-2:#9aa1b2;
  --line:#e7e9f0; --line-2:#eef0f6; --line-strong:#d6dae6;
  /* 差し色（ブランド青・LPと統一） */
  --accent:#2158f5; --accent-hover:#1a49d6; --accent-press:#163fbb; --accent-fg:#ffffff;
  --accent-soft:#eaf0ff; --accent-ring:rgba(33,88,245,.32);
  --accent-grad:linear-gradient(135deg,#2a63ff,#2158f5);
  /* 意味の色 */
  --danger:#f04438; --danger-hover:#e03a2f; --danger-soft:#fdecec;
  --ok:#12b76a; --ok-soft:#e7f8f0; --warn:#f79009; --warn-soft:#fff4e5;
  --violet:#7c5cff; --violet-soft:#efeafe;
  /* サイドバー（ダークネイビー軸） */
  --nav-bg:#0f1830; --nav-bg-2:#0b1226; --nav-item:#aeb6cc; --nav-item-hover:#ffffff;
  --nav-active-bg:rgba(33,88,245,.18); --nav-active-text:#ffffff; --nav-border:rgba(255,255,255,.09);
  /* ステージ（LPのモック用） */
  --stage:#111218; --stage-2:#20222b;
  /* 形 */
  --r-card:14px; --r-ctrl:10px; --r-chip:8px; --radius:14px; --radius-sm:10px;
  --shadow-1:0 1px 2px rgba(16,20,38,.05);
  --shadow-card:0 4px 14px rgba(16,20,38,.06),0 1px 3px rgba(16,20,38,.04);
  --shadow-lg:0 14px 36px rgba(16,20,38,.12),0 4px 12px rgba(16,20,38,.06);
  --shadow-2:0 18px 48px rgba(16,20,38,.16),0 4px 12px rgba(16,20,38,.07);
  --font:"Zen Kaku Gothic New","Inter","Noto Sans JP",-apple-system,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  --font-num:"SF Pro Display","Segoe UI",var(--font);
}
:root[data-theme="dark"]{
  --bg:#0b1020; --bg-2:#0a0f1e; --surface:#141b30; --surface-2:#1a2238; --surface-3:#121a2e;
  --text:#eef1f8; --muted:#a8b0c5; --muted-2:#6b7590;
  --line:#242c44; --line-2:#1e2540; --line-strong:#30395a;
  --accent:#5b8cff; --accent-hover:#6f9bff; --accent-press:#4f83ff; --accent-fg:#ffffff;
  --accent-soft:#16224a; --accent-ring:rgba(91,140,255,.40); --accent-grad:linear-gradient(135deg,#5b8cff,#4f83ff);
  --danger:#f2555a; --danger-hover:#f36a6e; --danger-soft:#2c1a1c;
  --ok:#3fd18a; --ok-soft:#10281f; --warn:#f0a94a; --warn-soft:#2a2113;
  --violet:#9a83ff; --violet-soft:#241d40;
  --nav-bg:#0a0f1e; --nav-bg-2:#070b16; --nav-item:#8892ac; --nav-active-bg:rgba(91,140,255,.20); --nav-border:rgba(255,255,255,.08);
  --stage:#0d0e12; --stage-2:#1c1e26;
  --shadow-1:0 1px 2px rgba(0,0,0,.4);
  --shadow-card:0 4px 14px rgba(0,0,0,.4),0 1px 3px rgba(0,0,0,.3);
  --shadow-lg:0 16px 40px rgba(0,0,0,.55);
  --shadow-2:0 18px 48px rgba(0,0,0,.6),0 4px 12px rgba(0,0,0,.4);
}

*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased;line-height:1.55;letter-spacing:-.006em}
a{color:inherit}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input{font-family:inherit}
svg{display:block}
.hidden{display:none!important}
.muted{color:var(--muted)}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-ring);border-radius:6px}

/* 旧トップナビ（LPで使用） */
.nav{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line-2)}
.nav .inner{max-width:1080px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;gap:14px}
.brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:18px;color:var(--text);white-space:nowrap;flex-shrink:0;letter-spacing:-.02em}
.brand .logo{color:var(--accent);display:flex;align-items:center;justify-content:center}
.nav .sp{flex:1}
.nav a.link,.userchip .meta b,.userchip .meta span{white-space:nowrap}
.nav a.link{color:var(--muted);text-decoration:none;font-size:14px;padding:8px 12px;border-radius:8px;font-weight:500}
.nav a.link:hover{color:var(--text);background:var(--surface-2)}

/* ===== ボタン（全状態） ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:10px 17px;border-radius:var(--r-ctrl);font-size:13.5px;font-weight:700;background:var(--accent);color:var(--accent-fg);box-shadow:0 1px 2px rgba(33,88,245,.22),0 2px 8px rgba(33,88,245,.14);transition:background .13s,box-shadow .13s,transform .05s,opacity .13s;text-decoration:none;white-space:nowrap;letter-spacing:-.01em}
.btn:hover{background:var(--accent-hover);box-shadow:0 2px 6px rgba(33,88,245,.28),0 6px 18px rgba(33,88,245,.18)}
.btn:active{background:var(--accent-press);transform:translateY(.5px)}
.btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}
.btn.lg{padding:13px 24px;font-size:14.5px}
.btn.block{padding-top:13px;padding-bottom:13px;font-size:14.5px}
.btn.secondary{background:var(--surface);color:var(--text);border:1px solid var(--line);box-shadow:var(--shadow-1)}
.btn.secondary:hover{background:var(--surface-2);border-color:var(--line-strong);box-shadow:var(--shadow-1)}
.btn.neutral{background:var(--surface);color:var(--text);border:1px solid var(--line);box-shadow:var(--shadow-1)}
.btn.neutral:hover{background:var(--surface-2);border-color:var(--line-strong);box-shadow:var(--shadow-1)}
.btn.ghost{background:transparent;color:var(--accent);box-shadow:none}
.btn.ghost:hover{background:var(--accent-soft);box-shadow:none}
.btn.block{width:100%}
.btn.danger{background:var(--danger)}.btn.danger:hover{background:var(--danger-hover)}

/* ===== フォーム ===== */
.field{margin-bottom:15px}
.field label{display:block;font-size:12.5px;color:var(--text);margin-bottom:6px;font-weight:500}
.field input{width:100%;padding:10px 12px;border-radius:var(--r-ctrl);border:1px solid var(--line);background:var(--surface);font-size:14px;color:var(--text);transition:border-color .13s,box-shadow .13s}
.field input:hover{border-color:var(--line-strong)}
.field input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}
.field input::placeholder{color:var(--muted-2)}
.hint{font-size:12px;color:var(--muted);margin-top:6px}

/* ===== カード ===== */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow-card)}

/* ===== アプリシェル（サイドバー） ===== */
.shell{display:flex;min-height:100vh;background:var(--bg-2)}
.sidebar{width:248px;flex-shrink:0;background:linear-gradient(180deg,var(--nav-bg),var(--nav-bg-2));border-right:1px solid var(--nav-border);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;color:#fff}
.side-brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:16.5px;padding:20px 18px 10px;letter-spacing:-.02em;color:#fff}
.side-brand .logo{width:30px;height:30px;border-radius:9px;background:var(--accent-grad);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 10px rgba(33,88,245,.5)}
.side-sec{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.4);padding:18px 20px 8px;font-weight:700}
.side-nav{display:flex;flex-direction:column;gap:3px;padding:4px 12px 0}
.nav-item{position:relative;display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;color:var(--nav-item);text-decoration:none;font-size:14px;font-weight:600;transition:background .12s,color .12s;cursor:pointer;letter-spacing:-.01em}
.nav-item:hover{background:rgba(255,255,255,.06);color:#fff}
.nav-item.active{background:var(--nav-active-bg);color:#fff}
.nav-item.active::before{content:"";position:absolute;left:-4px;top:50%;transform:translateY(-50%);width:3px;height:20px;border-radius:2px;background:var(--accent)}
.nav-item svg{flex-shrink:0;opacity:.85}
.nav-item.active svg{opacity:1;color:#7ea6ff}
.side-foot{margin-top:auto;padding:12px;border-top:1px solid var(--nav-border);display:flex;align-items:center;gap:9px}
.side-foot .avatar,.side-foot .initials{width:32px;height:32px;flex-shrink:0}
.side-foot .meta{flex:1;min-width:0}
.side-foot .meta b{font-size:12.5px;font-weight:600;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff}
.side-foot .meta span{font-size:11px;color:rgba(255,255,255,.5);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-foot .lo,.side-foot .theme-btn{color:rgba(255,255,255,.6);padding:7px;border-radius:8px;display:flex}
.side-foot .lo:hover,.side-foot .theme-btn:hover{background:rgba(255,255,255,.1);color:#fff}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.pagehead{padding:26px 34px 8px;display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap}
.pagehead .ht{flex:1;min-width:200px}
.pagehead h1{font-size:25px;font-weight:700;margin:0;letter-spacing:-.03em}
.pagehead .sub{color:var(--muted);font-size:13px;margin:5px 0 0}
.content{padding:20px 34px 60px;max-width:1120px;width:100%}

@media(max-width:860px){
  .shell{flex-direction:column}
  .sidebar{width:100%;height:auto;position:sticky;top:0;z-index:30;flex-direction:row;align-items:center;border-right:none;border-bottom:1px solid var(--line-2);padding:0 6px}
  .side-brand{padding:12px;font-size:15.5px}
  .side-sec{display:none}
  .side-nav{flex-direction:row;padding:0;gap:1px;overflow-x:auto}
  .nav-item{padding:8px 10px;font-size:13px}
  .side-foot{margin:0 0 0 auto;border-top:none;padding:6px}
  .side-foot .meta{display:none}
  .pagehead{padding:18px 18px 4px}
  .content{padding:14px 18px 48px}
}

/* ===== パネル・リスト ===== */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:none;padding:24px 26px}
.panel + .panel{margin-top:22px}
.panel-h{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.panel-h h2{font-size:17px;font-weight:800;margin:0;letter-spacing:-.02em}
.panel-h .ic{display:none}
.panel .desc{color:var(--muted);font-size:12.5px;margin:2px 0 18px;padding-left:0}

.rowlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.rowlist li{display:flex;align-items:center;gap:12px;padding:10px 10px;border-radius:10px;box-shadow:inset 0 -1px var(--line-2);transition:background .12s}
.rowlist li:hover{background:var(--surface-2)}
.rowlist li:last-child{box-shadow:none}
.rowlist .ic{width:36px;height:36px;border-radius:9px;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.rowlist .ic.accent{background:var(--accent-soft);color:var(--accent)}
.rowlist .mm{flex:1;min-width:0}
.rowlist .mm b{font-size:13.5px;font-weight:600;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rowlist .mm span{font-size:12px;color:var(--muted);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.empty-note{color:var(--muted);font-size:13px;text-align:center;padding:24px 0}

/* 小ボタン・チップ */
.pill-btn{padding:6px 12px;border-radius:var(--r-ctrl);font-size:12.5px;font-weight:600;border:1px solid var(--line);background:var(--surface);color:var(--text);transition:background .12s,border-color .12s}
.pill-btn:hover{background:var(--surface-2);border-color:var(--line-strong)}
.pill-btn.primary{background:var(--accent);color:var(--accent-fg);border-color:transparent}
.pill-btn.primary:hover{background:var(--accent-hover)}
.pill-btn.danger{color:var(--danger);border-color:transparent;background:transparent}
.pill-btn.danger:hover{background:var(--danger-soft)}
.iconbtn{width:32px;height:32px;border-radius:var(--r-ctrl);display:flex;align-items:center;justify-content:center;color:var(--muted);border:1px solid transparent;transition:background .12s,color .12s}
.iconbtn:hover{background:var(--surface-2);color:var(--text)}
.iconbtn.del:hover{background:var(--danger-soft);color:var(--danger)}
.chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:3px 9px;border-radius:20px;background:var(--surface-2);color:var(--muted)}
.chip.accent{background:var(--accent-soft);color:var(--accent)}
.chip.ok{background:var(--ok-soft);color:var(--ok)}

/* KPIカード */
.stat{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-card);box-shadow:var(--shadow-1);padding:16px 18px}
.stat .l{font-size:12px;color:var(--muted);font-weight:500;display:flex;align-items:center;gap:6px;margin-bottom:8px}
.stat .l svg{opacity:.7}
.stat .n{font-size:26px;font-weight:700;line-height:1;letter-spacing:-.03em}

/* スケルトン読み込み */
.skel{position:relative;overflow:hidden;background:var(--surface-2);border-radius:6px}
.skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--surface) 60%,transparent),transparent);animation:shimmer 1.3s infinite}
@keyframes shimmer{100%{transform:translateX(100%)}}
.skel-line{height:12px;margin:7px 0}
.skel-row{display:flex;align-items:center;gap:12px;padding:11px 6px;border-bottom:1px solid var(--line-2)}
.skel-row .sk-ic{width:36px;height:36px;border-radius:9px;flex-shrink:0}
.skel-row .sk-tx{flex:1}

/* ===== リッチな分析UI ===== */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.grid-5-4{display:grid;grid-template-columns:1.55fr 1fr;gap:14px}
@media(max-width:920px){.grid-2,.grid-3,.grid-5-4{grid-template-columns:1fr}}

/* KPIカード（トレンド＋スパークライン） */
.kpi{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-card);box-shadow:var(--shadow-1);padding:15px 16px;display:flex;flex-direction:column;gap:2px;position:relative;overflow:hidden}
.kpi .k-top{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);font-weight:500}
.kpi .k-top svg{opacity:.75}
.kpi .k-num{font-size:26px;font-weight:700;letter-spacing:-.03em;line-height:1.1;margin-top:4px}
.kpi .k-foot{display:flex;align-items:center;gap:8px;margin-top:2px}
.trend{display:inline-flex;align-items:center;gap:3px;font-size:11.5px;font-weight:600;padding:1px 6px;border-radius:20px}
.trend.up{color:var(--ok);background:var(--ok-soft)}
.trend.down{color:var(--danger);background:var(--danger-soft)}
.trend.flat{color:var(--muted);background:var(--surface-2)}
.kpi .k-sub{font-size:11px;color:var(--muted-2)}
.kpi .spark{position:absolute;right:0;bottom:0;opacity:.9}

/* グラフカード */
.chartcard .ch-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.chartcard .ch-head h2{font-size:14.5px;font-weight:600;margin:0;letter-spacing:-.015em}
.legend{display:flex;gap:14px;font-size:11.5px;color:var(--muted)}
.legend i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:5px;vertical-align:middle}
.barchart{width:100%;display:block}
.barchart .gx{fill:var(--muted-2);font-size:9px}
.barchart .grid{stroke:var(--line-2)}

/* タイムライン（アクティビティ） */
.timeline{list-style:none;margin:0;padding:0;position:relative}
.timeline::before{content:"";position:absolute;left:16px;top:6px;bottom:6px;width:1px;background:var(--line-2)}
.timeline li{display:flex;gap:12px;padding:8px 0;position:relative}
.timeline .tl-ic{width:33px;height:33px;border-radius:50%;background:var(--surface);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;flex-shrink:0;z-index:1;color:var(--muted)}
.timeline .tl-ic.room{color:var(--accent);background:var(--accent-soft);border-color:transparent}
.timeline .tl-ic.rec{color:var(--danger);background:var(--danger-soft);border-color:transparent}
.timeline .tl-ic.member{color:var(--ok);background:var(--ok-soft);border-color:transparent}
.timeline .tl-bd{flex:1;min-width:0;padding-top:2px}
.timeline .tl-bd b{font-size:13px;font-weight:600}
.timeline .tl-bd .tl-tx{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.timeline .tl-bd .tl-t{font-size:11px;color:var(--muted-2);margin-top:1px}

/* メンバー別利用（横バー） */
.mbar{display:flex;flex-direction:column;gap:12px}
.mbar .row{display:grid;grid-template-columns:120px 1fr auto;align-items:center;gap:12px}
.mbar .nm{font-size:12.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:7px}
.mbar .track{height:8px;border-radius:5px;background:var(--surface-2);overflow:hidden;display:flex}
.mbar .track i{display:block;height:100%}
.mbar .track .r{background:var(--accent)}
.mbar .track .v{background:#8b5cf6}
.mbar .val{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}

/* ストレージ・プログレス */
.progress{height:8px;border-radius:5px;background:var(--surface-2);overflow:hidden;margin:10px 0 8px}
.progress i{display:block;height:100%;background:var(--accent);border-radius:5px}
.kv{display:flex;align-items:baseline;gap:8px}
.kv .big{font-size:22px;font-weight:700;letter-spacing:-.02em}
.kv .small{font-size:12px;color:var(--muted)}

/* テーマ切替ボタン */
.theme-btn{color:var(--muted);padding:7px;border-radius:var(--r-ctrl);display:flex}
.theme-btn:hover{background:var(--surface-2);color:var(--text)}

/* トースト */
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:var(--text);color:var(--bg);padding:10px 18px;border-radius:var(--r-ctrl);font-size:13.5px;font-weight:500;z-index:80;opacity:0;transition:opacity .2s;pointer-events:none;max-width:90vw;box-shadow:var(--shadow-2)}
.toast.show{opacity:1}
.avatar{width:30px;height:30px;border-radius:50%;object-fit:cover;background:var(--surface-2);flex-shrink:0}
.initials{width:30px;height:30px;border-radius:50%;background:var(--accent);color:var(--accent-fg);display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:600;flex-shrink:0}