/* ============================================================
   フェアーパートナーズ — マイページ（ダッシュボード）モック
   style.css のトークン（--brand 等）を継承
   ============================================================ */
.mp{background:var(--brand-wash);min-height:100vh}
.mp-shell{display:grid;grid-template-columns:248px 1fr;min-height:100vh}

/* ---------- Sidebar ---------- */
.mp-side{background:#fff;border-right:1px solid var(--line);display:flex;flex-direction:column;
  padding:24px 16px;position:sticky;top:0;height:100vh}
.mp-brand{margin:4px 8px 28px;gap:.5em}
.mp-brand .brand-mark{width:30px;height:30px}
.mp-brand .brand-name{font-size:.9rem;font-weight:900;white-space:nowrap}
.mp-nav{display:flex;flex-direction:column;gap:4px;flex:1}
.mp-nav a{display:flex;align-items:center;gap:.85em;padding:.8em 1em;border-radius:12px;
  font-weight:600;font-size:.92rem;color:var(--ink-soft);transition:background .2s,color .2s}
.mp-nav a .ic{width:20px;height:20px}
.mp-nav a:hover{background:var(--brand-wash);color:var(--brand)}
.mp-nav a.is-active{background:var(--brand);color:#fff}
.mp-logout{display:flex;align-items:center;gap:.7em;padding:.8em 1em;border-radius:12px;
  font-weight:600;font-size:.9rem;color:var(--muted);margin-top:8px}
.mp-logout .ic{width:18px;height:18px}
.mp-logout:hover{color:var(--brand);background:var(--brand-wash)}

/* ---------- Main ---------- */
.mp-main{padding:clamp(20px,3vw,40px);max-width:1120px;width:100%}
.mp-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px}
.mp-greet{font-size:.86rem;color:var(--muted);margin-bottom:.2em}
.mp-top h1{font-size:1.6rem;font-weight:900}
.mp-user{display:flex;align-items:center;gap:.6em}
.mp-avatar{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
  background:var(--brand);color:#fff;font-weight:800}

.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);padding:clamp(20px,2.5vw,30px)}

/* ---------- 与信枠 + CTA ---------- */
.mp-hero-grid{display:grid;grid-template-columns:1.45fr 1fr;gap:20px;margin-bottom:20px}
.mp-credit{background:linear-gradient(135deg,var(--brand),var(--brand-deep));color:#fff;border:none}
.mp-credit-head{display:flex;justify-content:space-between;align-items:center;
  font-size:.9rem;opacity:.95;margin-bottom:.5em;gap:10px}
.mp-badge{background:rgba(255,255,255,.2);padding:.32em .85em;border-radius:999px;
  font-size:.76rem;font-weight:700;white-space:nowrap}
.mp-credit-amount{font-family:var(--latin);font-size:clamp(2.2rem,4vw,2.9rem);font-weight:800;
  line-height:1.1;margin-bottom:.45em}
.mp-credit-bar{height:12px;border-radius:8px;background:rgba(255,255,255,.25);overflow:hidden;margin-bottom:.6em}
.mp-credit-bar span{display:block;height:100%;background:#fff;border-radius:8px}
.mp-credit-foot{display:flex;justify-content:space-between;font-size:.8rem;opacity:.92;margin-bottom:1.1em}
.mp-incr{display:inline-block;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.45);
  padding:.6em 1.2em;border-radius:999px;font-weight:700;font-size:.85rem;color:#fff;transition:background .2s}
.mp-incr:hover{background:rgba(255,255,255,.3)}
.mp-cta{display:flex;flex-direction:column;justify-content:center;gap:.5em}
.mp-cta h2{font-size:1.45rem;font-weight:900;line-height:1.3}
.mp-cta p{font-size:.86rem;color:var(--ink-soft)}
.mp-cta .btn{align-self:flex-start;margin-top:.5em}

/* ---------- stats ---------- */
.mp-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:20px}
.mp-stat{padding:22px 24px}
.mp-stat-label{display:block;font-size:.82rem;color:var(--muted);margin-bottom:.35em}
.mp-stat-num{font-family:var(--latin);font-size:1.65rem;font-weight:800;color:var(--ink)}

/* ---------- progress / history / tasks ---------- */
.mp-progress,.mp-history{margin-bottom:20px}
.mp-progress h3,.mp-history h3,.mp-tasks h3{font-size:1.1rem;font-weight:800;margin-bottom:1em}
.mp-prog-row{display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:16px;border:1px solid var(--line);border-radius:12px;background:#fbfdff}
.mp-prog-row strong{display:block;font-weight:700}
.mp-prog-row small{color:var(--muted);font-size:.82rem}
.mp-status{font-size:.78rem;font-weight:700;padding:.4em .9em;border-radius:999px;white-space:nowrap}
.mp-status.reviewing{background:#fff4e0;color:#c9881a}
.mp-status.done{background:#e3f6ec;color:#1f9d57}

.mp-history-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:1em}
.mp-history-head h3{margin:0}
.mp-history-head a{font-size:.85rem;color:var(--brand);font-weight:600}
.mp-table-wrap{overflow-x:auto}
.mp-table{width:100%;border-collapse:collapse;min-width:600px}
.mp-table th{text-align:left;font-size:.78rem;color:var(--muted);font-weight:600;
  padding:0 14px 12px;border-bottom:1px solid var(--line)}
.mp-table td{padding:14px;border-bottom:1px solid var(--line);font-size:.9rem}
.mp-table tbody tr:last-child td{border-bottom:none}
.mp-table td:nth-child(3),.mp-table td:nth-child(4),.mp-table td:nth-child(5){font-family:var(--latin);font-weight:600}

.mp-tasks-lead{font-size:.88rem;color:var(--ink-soft);margin-bottom:1.1em}
.mp-task-list{list-style:none;display:flex;flex-direction:column;gap:10px}
.mp-task-list li{display:flex;align-items:center;gap:.85em;padding:14px 16px;
  border:1px solid var(--line);border-radius:12px;font-weight:600;font-size:.92rem}
.mp-task-list li.done{color:var(--muted)}
.mp-check{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;flex:none;font-size:.72rem}
.mp-task-list li.done .mp-check{background:var(--brand);color:#fff}
.mp-check.todo{border:2px solid var(--line)}
.mp-task-pt{margin-left:auto;font-size:.8rem;color:var(--brand);font-weight:700;white-space:nowrap}

/* ---------- responsive ---------- */
@media (max-width:860px){
  .mp-shell{grid-template-columns:1fr}
  .mp-side{flex-direction:row;height:auto;position:sticky;top:0;z-index:50;
    padding:10px 14px;gap:8px;overflow-x:auto;align-items:center;border-right:none;border-bottom:1px solid var(--line)}
  .mp-brand{margin:0 6px 0 0;flex:none}
  .mp-brand .brand-name{display:none}
  .mp-nav{flex-direction:row;flex:0 0 auto;gap:4px}
  .mp-nav a{white-space:nowrap;padding:.6em .85em;font-size:.85rem}
  .mp-logout{margin-top:0;flex:none;white-space:nowrap;padding:.6em .85em}
  .mp-logout span,.mp-nav a{font-size:.85rem}
  .mp-hero-grid,.mp-stats{grid-template-columns:1fr}
  .mp-cta{order:-1}
}