.two-pane { display:grid; grid-template-columns: 220px 1fr; gap:12px; }
.two-pane .cats { margin:0; padding:12px; }
.two-pane .main { margin:0; padding:12px; }
.vert-cats { display:flex; flex-direction:column; gap:6px; }
.vert-cats .cat { padding:6px 10px; border:1px solid var(--gray-200); border-radius:6px; background:#fff; cursor:pointer; font-size:12px; }
.vert-cats .cat.active { background: var(--muted); border-color: var(--gray-200); font-weight:600; }
html, body { margin: 0; padding: 0; background: var(--gray-50); color: var(--gray-800); }
.header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: #fff; border-bottom: 1px solid var(--gray-200); }
.header .logo { font-weight: 700; color: var(--line-green); }
.sidebar { width: 260px; background: #fff; border-right: 1px solid var(--gray-200); padding: 16px; }
.filter-bar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--gray-200); background: #fff; }
.filter-bar .search-section input { padding: 8px 10px; border: 1px solid var(--gray-200); border-radius: 6px; }
.filter-bar select { padding: 8px 10px; border: 1px solid var(--gray-200); border-radius: 6px; }
.btn-primary { background: var(--line-green); color: #fff; border: none; padding: 8px 12px; border-radius: 8px; cursor: pointer; transition: background .15s ease, box-shadow .15s ease; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.btn-primary:hover { background: var(--line-green-dark); box-shadow: 0 2px 6px rgba(0,0,0,.08); }
.btn-primary:disabled { background: var(--line-green-dark); opacity: 0.6; cursor: not-allowed; }
.pagination { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 12px; }
.btn { padding: 6px 10px; border: 1px solid var(--gray-200); background: #fff; border-radius: 6px; cursor: pointer; transition: background .15s ease, box-shadow .15s ease; }
.btn:hover { background: var(--gray-100); box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.friend-header { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.modal { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.modal-content { background: #fff; border-radius: 12px; padding: 16px; width: 90%; max-width: 640px; box-shadow: 0 6px 24px rgba(0,0,0,.12); max-height: 90vh; overflow: auto; }
.modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.modal-close { background: transparent; border: none; font-size: 18px; cursor: pointer; }
/* sidebar nav */
.sidebar nav ul { list-style: none; margin: 0; padding: 0; }
.sidebar nav li { margin: 4px 0; }
.sidebar nav a { display: block; padding: 8px 10px; color: inherit; text-decoration: none; border-radius: 6px; }
.sidebar nav a:hover { background: var(--gray-100); }
.sidebar nav a.active { background: var(--line-green-light); font-weight: 600; }

/* ---------- Dashboard & Panels ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 12px; padding: 16px; }
.card { background:#fff; border:1px solid var(--gray-200); border-radius:12px; padding:16px; box-shadow: 0 2px 10px rgba(0,0,0,.04); }
.card-title { font-size:12px; color:var(--gray-600); margin-bottom:6px; }
.card-value { font-size:20px; font-weight:700; color:var(--gray-800); }
.panel { background:#fff; border:1px solid var(--gray-200); border-radius:12px; padding:16px; margin:16px; box-shadow: 0 2px 10px rgba(0,0,0,.04); }
.panel h3 { margin: 0 0 8px 0; font-size: 16px; color: var(--gray-800); }
.list { display:flex; flex-direction:column; gap:8px; }
.list.small { font-size: 12px; color: var(--gray-600); }

/* ---------- Forms ---------- */
.form-row { display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
.form-row label { font-size:12px; color:var(--gray-600); }
.form-row input[type="text"], .form-row textarea, .form-row select { padding:10px 12px; border:1px solid var(--gray-200); border-radius:8px; background:#fff; outline:none; }
.form-row input[type="file"] { border:1px dashed var(--gray-200); padding:10px; border-radius:8px; background:#fff; }
/* sticky actions inside modal */
.sticky-actions { position: sticky; bottom: 0; background: #fff; padding-top: 8px; border-top: 1px solid var(--gray-200); }

/* ---------- Richmenu Grid ---------- */
.rm-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.rm-row { display:flex; flex-direction:column; gap: 8px; padding:12px; border:1px solid var(--gray-200); border-radius:10px; background:#fff; box-shadow: 0 1px 6px rgba(0,0,0,.04); transition: box-shadow .15s ease, transform .1s ease; }
.rm-row:hover { box-shadow: 0 6px 18px rgba(0,0,0,.08); transform: translateY(-1px); }
.rm-title { font-weight:700; color:var(--gray-800); font-size:14px; }
.rm-imagewrap { width:100%; }
.rm-thumb { display:block; max-width: 100%; width: 100%; max-height: 160px; height: auto; object-fit: cover; border:1px solid var(--gray-200); border-radius:6px; background:#fff; }
.rm-ops { display:flex; gap:8px; flex-wrap: wrap; }

/* デフォルト情報の画像（小さめ・はみ出し防止） */
.rm-default-thumb { display:block; width: auto; height: auto; max-width: 100%; max-height: 120px; object-fit: contain; border:1px solid var(--gray-200); border-radius:8px; }

/* ---------- Utilities ---------- */
.empty-state { text-align:center; color:var(--gray-600); padding:24px; }
.page-info { color: var(--gray-600); }

/* ---------- Friend Detail ---------- */
.friend-detail .fd-header { display:flex; align-items:center; gap:12px; }
.friend-detail .fd-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.friend-detail .fd-col { background:#fff; }
.fd-header-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.fd-header-left { min-width: 0; }
.fd-header-right { min-width: 0; background: var(--surface); padding: 8px; border-radius: 8px; border:1px solid var(--gray-200); }
.head-tabs { display:flex; gap:6px; border-bottom:1px solid var(--gray-200); margin-bottom:8px; }
.head-tabs .tab { border:none; background: var(--gray-100); padding:6px 10px; border-radius:6px 6px 0 0; cursor:pointer; font-size:12px; }
.head-tabs .tab.active { background:#fff; border:1px solid var(--gray-200); border-bottom-color: transparent; }
.friend-detail .tabs { display:flex; gap:6px; border-bottom:1px solid var(--gray-200); margin-bottom:8px; }
.friend-detail .tab { border:none; background: var(--gray-100); padding:6px 10px; border-radius:6px 6px 0 0; cursor:pointer; font-size:12px; }
.friend-detail .tab.active { background:#fff; border:1px solid var(--gray-200); border-bottom-color: transparent; }
.friend-detail .tab-panel { background:#fff; }

/* Subtle theming to reduce glare */
body { --surface:#f9fafb; --panel:#ffffff; --muted:#f3f4f6; }
.panel { background: var(--panel); }
.friend-detail .chip { background: var(--muted); }
.chat-list { background: var(--surface); }
.friend-detail .fd-header { background: var(--surface); padding: 8px; border-radius: 8px; }
.friend-detail .form-row.inline { flex-direction: row; align-items: center; gap:8px; }
.friend-detail .form-row.inline label { width: 90px; font-size: 12px; color: var(--gray-700); }
.friend-detail .form-row.inline input[type="text"] { flex: 1; }
.friend-detail .form-row.inline select { min-width: 220px; }
.friend-detail .chip-list { display:flex; flex-wrap:wrap; gap:6px; }
.friend-detail .chip { padding:4px 8px; border:1px solid var(--gray-200); background:#fff; border-radius: 999px; cursor:pointer; font-size:12px; }
.friend-detail .chip:hover { background: var(--gray-100); }
.friend-detail .fd-actions { display:flex; gap:6px; }
.tag-checklist { display:grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap:8px; align-items: start; }
.tag-checklist .tag-item { display:flex; align-items:center; gap:6px; padding:6px 8px; border:1px solid var(--gray-200); border-radius:6px; background:#fff; font-size:12px; width:100%; box-sizing:border-box; }
.tag-checklist input { transform: scale(1.0); }
.friend-detail .mini-section { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--gray-200); }
.friend-detail .mini-section h4 { margin: 4px 0 6px; font-size: 13px; color: var(--gray-700); }
.friend-detail .panel { margin: 12px; padding: 12px; }
.friend-detail .panel h3 { font-size: 14px; margin-bottom: 6px; }
.friend-detail .form-row { gap: 4px; margin-bottom: 8px; }
.friend-detail .form-row input[type="text"], .friend-detail .form-row textarea, .friend-detail .form-row select { padding: 8px 10px; font-size: 13px; }
.friend-detail .btn, .friend-detail .btn-primary { padding: 5px 9px; font-size: 12px; border-radius: 6px; }
.friend-detail .fd-header .friend-avatar { width: 40px; height: 40px; border-radius: 50%; }
.friend-detail .fd-header h3 { font-size: 16px; margin: 0; }
.friend-detail .fd-header p { font-size: 12px; margin: 0; color: var(--gray-600); }

/* Fields compact rows */
.field-row { display:grid; grid-template-columns: 120px 1fr; align-items:center; gap:8px; padding:4px 0; border-bottom:1px dashed var(--gray-200); }
.field-row:last-child { border-bottom:none; }
.field-label { font-size: 12px; color: var(--gray-700); }

/* User fields table */
.uf-table { display:flex; flex-direction:column; gap:6px; }
.uf-header, .uf-row { display:grid; grid-template-columns: 1.8fr 1.2fr 1.8fr 0.8fr; gap:6px; align-items:center; padding:6px 8px; border:1px solid var(--gray-200); border-radius:6px; background:#fff; }
.uf-header { background: var(--muted); font-weight:600; color: var(--gray-700); font-size:12px; }
.uf-row { font-size:13px; }
.uf-row .cell.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size:12px; color: var(--gray-700); }
.uf-row .ops { display:flex; gap:6px; justify-content:flex-end; }
.user-fields .btn, .user-fields .btn-primary { padding:4px 8px; font-size:12px; border-radius:6px; }

/* Tags table (4 columns: name, feature, count, actions) */
.tag-header, .tag-row { display:grid; grid-template-columns: 2fr 1.2fr 0.9fr 1.6fr; gap:6px; align-items:center; padding:6px 8px; border:1px solid var(--gray-200); border-radius:6px; background:#fff; }
.tag-header { background: var(--muted); font-weight:600; color: var(--gray-700); font-size:12px; }
.tag-row { font-size:13px; }
.tag-row .ops { display:flex; gap:6px; justify-content:flex-start; }

@media (max-width: 960px) {
	.friend-detail .fd-grid { grid-template-columns: 1fr; }
}

/* Chat list */
.chat-list { display:flex; flex-direction:column; gap:8px; max-height: 70vh; overflow:auto; border:1px solid var(--gray-200); border-radius: 8px; padding: 8px; }
.chat-item { display:flex; gap:6px; }
.chat-item.sent { justify-content: flex-end; }
.chat-bubble { max-width: 75%; padding: 8px 10px; border-radius: 10px; line-height: 1.4; box-shadow: 0 1px 3px rgba(0,0,0,.06); font-size: 13px; }
.chat-item.received .chat-bubble { background:#fff; border:1px solid var(--gray-200); }
.chat-item.sent .chat-bubble { background: var(--line-green-light); border:1px solid var(--line-green); }
.chat-meta { font-size: 10px; color: var(--gray-600); margin-top: 2px; text-align: right; }

/* ---------- Template placeholders grid ---------- */
.uf-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap:8px; margin-top:6px; }
.uf-chip { background:#fff; border:1px solid var(--gray-200); padding:8px 10px; border-radius:8px; font-size:12px; cursor:pointer; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.uf-chip:hover { background: var(--gray-100); }

/* ---------- Messages grid ---------- */
.messages-grid { display:grid; grid-template-columns: 2fr 3fr; gap:12px; align-items: start; }
.messages-grid .panel { margin: 0; }
.messages-grid .listing { order: 1; }
.messages-grid .composer { order: 2; }
.messages-grid .composer .form-row textarea { min-height: 220px; }
.messages-grid .listing #tplList .rm-row { padding:10px; }

/* ---------- Messages tabs & list rows ---------- */
.msg-tabs { display:flex; gap:6px; border-bottom:1px solid var(--gray-200); }
.msg-tab { border:none; background: var(--gray-100); padding:6px 10px; border-radius:6px 6px 0 0; cursor:pointer; font-size:12px; }
.msg-tab.active { background:#fff; border:1px solid var(--gray-200); border-bottom-color: transparent; }
.tpl-row { display:flex; align-items:center; justify-content: space-between; padding:8px 10px; border:1px solid var(--gray-200); border-radius:8px; background:#fff; }
.tpl-row .tpl-title { font-weight:600; font-size:13px; color: var(--gray-800); }
.tpl-row .tpl-ops { display:flex; gap:6px; }