/* ===== ベース ===== */
.wagri-wrap{font-family:system-ui,-apple-system,Segoe UI,Roboto,"Noto Sans JP","Hiragino Kaku Gothic ProN",Arial,sans-serif;color:#111827}
.badge{display:inline-block;padding:2px 8px;border-radius:12px;background:#ececec}
.badge.warn{background:#fff3cd;color:#8a6d3b}.badge.ok{background:#e7f7ee;color:#0f7a48}.badge.err{background:#fdecea;color:#b71c1c}

/* ===== 2カラムレイアウト ===== */
.wagri-layout{display:grid;grid-template-columns:260px 1fr;gap:18px}
@media (max-width: 980px){
  .wagri-layout{grid-template-columns:1fr}
}

/* ===== サイドバー ===== */
.wagri-sidenav{
  position:sticky;top:72px;align-self:start;
  background:#fff;border:1px solid #e6e8eb;border-radius:14px;padding:10px
}
.wagri-logo{display:flex;align-items:center;gap:8px;padding:8px 10px;font-weight:800}
.wagri-sidenav .nav{
  display:flex;flex-direction:column;gap:6px;margin-top:6px
}
.wagri-sidenav .nav button{
  appearance:none;border:0;background:#fff;
  text-align:left;padding:10px 12px;border-radius:10px;cursor:pointer;color:#4b5563;
  display:flex;align-items:center;gap:10px
}
.wagri-sidenav .nav button:hover{background:#f5f7fb}
.wagri-sidenav .nav button.is-active{background:#eef2ff;color:#1f2937;font-weight:700}

/* モバイル：サイドバー開閉 */
.wagri-side-toggle{display:none}
@media (max-width:980px){
  .wagri-sidenav{display:none}
  .wagri-sidenav.is-open{display:block}
  .wagri-side-toggle{display:inline-flex;gap:8px;align-items:center;padding:8px 12px;border:1px solid #e6e8eb;border-radius:10px;background:#fff;cursor:pointer}
}

/* ===== メイン ===== */
.wagri-main{}
.wagri-heading{font-size:1.1rem;font-weight:800;margin:.6rem 0}

/* ===== アップローダ & ボタン ===== */
.uploader{border:2px dashed #c9ced6;padding:18px;border-radius:12px;text-align:center;background:#fafbfc}
.uploader input[type=file]{margin:10px 0}
.btn-primary-lg{display:inline-flex;align-items:center;gap:8px;padding:14px 22px;border-radius:12px;border:0;background:#2a6bf4;color:#fff;font-weight:700;box-shadow:0 6px 16px rgba(42,107,244,.25);cursor:pointer}
.btn-primary-lg:hover{background:#275fe0}

/* ===== プレビュー ===== */
.wagri-preview{position:relative;background:#fff;border:1px solid #e6e8eb;border-radius:12px;padding:16px}
.preview-stage{position:relative;overflow:hidden;min-height:260px;display:flex;align-items:center;justify-content:center}
.preview-stage img{max-width:100%;max-height:62vh;object-fit:contain;border-radius:8px;display:block}
.preview-arrow{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;border:0;background:rgba(0,0,0,.5);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center}
.preview-arrow.left{left:10px}.preview-arrow.right{right:10px}
.preview-pager{margin-top:10px;text-align:center;color:#6b7280}

/* ===== 操作ツールバー ===== */
.wagri-toolbar{display:flex;gap:8px;flex-wrap:wrap;padding:8px 0 12px}
.wagri-toolbar .toolbtn{border:1px solid #d7dbe2;background:#fff;padding:8px 10px;border-radius:8px;cursor:pointer;color:#374151}
.wagri-toolbar .toolbtn:hover{background:#f5f7fb}

/* ===== 表 ===== */
.wagri-rows table.widefat{width:100%;border-collapse:collapse;border:1px solid #e6e8eb}
.wagri-rows th,.wagri-rows td{padding:10px;border-bottom:1px solid #eef1f4}
.wagri-rows thead th{background:#f8fafc;font-weight:700}

/* ===== 使用量 ===== */
.usage-card{border:1px solid #e6e8eb;border-radius:12px;padding:14px;background:#fff}
.usage-bar{height:10px;background:#eef2f7;border-radius:999px;overflow:hidden}
.usage-bar>span{display:block;height:100%;width:0;background:#2a6bf4;transition:width .3s}