:root {
  --brand: #1e3a8a;
  --brand-2: #2563eb;
  --accent: #0ea5e9;
  --ok: #059669;
  --warn: #d97706;
  --ng: #dc2626;
}

* { -webkit-font-smoothing: antialiased; }

body {
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", Meiryo, system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---------- Layout ---------- */
.app-shell { display: flex; min-height: 100vh; }
.sidebar {
  width: 264px; flex-shrink: 0;
  background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
  color: #e2e8f0; display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}
.sidebar-brand { padding: 18px 20px; border-bottom: 1px solid rgba(255,255,255,.08); }
.sidebar-brand .logo { font-size: 15px; font-weight: 700; letter-spacing: .02em; }
.sidebar-brand .sub { font-size: 11px; color: #94a3b8; margin-top: 3px; }

.nav-group-label { font-size: 10px; text-transform: uppercase; letter-spacing: .12em; color: #64748b; padding: 16px 20px 6px; }
.nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 20px; font-size: 13.5px; color: #cbd5e1;
  cursor: pointer; border-left: 3px solid transparent; transition: all .12s;
}
.nav-item:hover { background: rgba(255,255,255,.05); color: #fff; }
.nav-item.active { background: rgba(37,99,235,.22); border-left-color: #3b82f6; color: #fff; font-weight: 600; }
.nav-item i { width: 17px; text-align: center; font-size: 13px; }
.nav-item .badge { margin-left: auto; font-size: 10px; background: rgba(255,255,255,.12); padding: 1px 7px; border-radius: 10px; }

.sidebar-footer { margin-top: auto; padding: 14px 20px; border-top: 1px solid rgba(255,255,255,.08); font-size: 11px; color: #64748b; }

.main-area { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  height: 60px; background: #fff; border-bottom: 1px solid #e2e8f0;
  display: flex; align-items: center; gap: 16px; padding: 0 24px;
  position: sticky; top: 0; z-index: 30;
}
.topbar h1 { font-size: 16px; font-weight: 700; color: #0f172a; }
.topbar .crumb { font-size: 12px; color: #64748b; }

.content { padding: 24px; flex: 1; }

/* ---------- Cards / UI ---------- */
.card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; }
.card-pad { padding: 18px 20px; }
.stat-card { background:#fff; border:1px solid #e2e8f0; border-radius:12px; padding:16px 18px; }
.stat-card .label { font-size: 11.5px; color:#64748b; font-weight:600; }
.stat-card .value { font-size: 26px; font-weight: 800; color:#0f172a; line-height:1.15; margin-top:4px; }
.stat-card .hint { font-size: 11px; color:#94a3b8; margin-top:4px; }

.btn {
  display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600;
  padding: 8px 15px; border-radius: 8px; cursor:pointer; border:1px solid transparent;
  transition: all .12s; white-space:nowrap;
}
.btn-primary { background: var(--brand-2); color:#fff; }
.btn-primary:hover { background:#1d4ed8; }
.btn-ghost { background:#fff; color:#334155; border-color:#cbd5e1; }
.btn-ghost:hover { background:#f8fafc; }
.btn-danger { background:#fef2f2; color:#dc2626; border-color:#fecaca; }
.btn-sm { padding:5px 11px; font-size:12px; }
.btn:disabled { opacity:.5; cursor:not-allowed; }

.badge-pill { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600; padding:2px 9px; border-radius:999px; }
.pill-blue { background:#eff6ff; color:#1d4ed8; }
.pill-green { background:#ecfdf5; color:#047857; }
.pill-amber { background:#fffbeb; color:#b45309; }
.pill-red { background:#fef2f2; color:#b91c1c; }
.pill-slate { background:#f1f5f9; color:#475569; }
.pill-purple { background:#f5f3ff; color:#6d28d9; }

.rank-badge { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:9px; font-weight:800; font-size:16px; color:#fff; }
.rank-A { background:#059669; } .rank-B { background:#2563eb; } .rank-C { background:#d97706; } .rank-D { background:#dc2626; }

table.data { width:100%; border-collapse: collapse; font-size:13px; }
table.data th { text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:#64748b; padding:9px 12px; border-bottom:1px solid #e2e8f0; font-weight:700; background:#f8fafc; }
table.data td { padding:11px 12px; border-bottom:1px solid #f1f5f9; vertical-align:middle; }
table.data tr:hover td { background:#f8fafc; }

.input, .select, .textarea {
  width:100%; font-size:13px; border:1px solid #cbd5e1; border-radius:8px; padding:8px 11px;
  background:#fff; color:#0f172a; outline:none; transition:border .12s;
}
.input:focus, .select:focus, .textarea:focus { border-color: var(--brand-2); box-shadow: 0 0 0 3px rgba(37,99,235,.1); }
label.field-label { display:block; font-size:11.5px; font-weight:700; color:#475569; margin-bottom:5px; }

/* folder tree */
.tree-node { user-select:none; }
.tree-row { display:flex; align-items:center; gap:8px; padding:6px 10px; border-radius:7px; cursor:pointer; font-size:13px; }
.tree-row:hover { background:#f1f5f9; }
.tree-row.selected { background:#e0e7ff; color:#1e3a8a; font-weight:600; }
.tree-children { margin-left: 18px; border-left:1px dashed #cbd5e1; padding-left:6px; }

/* chat */
.chat-msg { display:flex; gap:12px; margin-bottom:18px; }
.chat-avatar { width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; background:#f1f5f9; }
.chat-bubble { background:#fff; border:1px solid #e2e8f0; border-radius:12px; padding:14px 16px; font-size:13.5px; line-height:1.7; flex:1; min-width:0; }
.chat-bubble.user { background:#eff6ff; border-color:#bfdbfe; }

.progress-bar { height:8px; background:#e2e8f0; border-radius:999px; overflow:hidden; }
.progress-fill { height:100%; border-radius:999px; transition:width .4s; }

.sortable { cursor:pointer; }

.spinner { display:inline-block; width:15px; height:15px; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite; }
.spinner-dark { border:2px solid rgba(0,0,0,.12); border-top-color:#334155; }
@keyframes spin { to { transform: rotate(360deg); } }

.toast-wrap { position:fixed; top:16px; right:16px; z-index:100; display:flex; flex-direction:column; gap:9px; }
.toast { background:#0f172a; color:#fff; padding:11px 16px; border-radius:9px; font-size:13px; box-shadow:0 8px 24px rgba(0,0,0,.22); max-width:380px; display:flex; gap:9px; align-items:flex-start; animation:slidein .2s ease-out; }
.toast.ok { background:#065f46; } .toast.err { background:#991b1b; } .toast.warn { background:#92400e; }
@keyframes slidein { from { opacity:0; transform:translateX(20px);} to {opacity:1; transform:none;} }

.modal-backdrop { position:fixed; inset:0; background:rgba(15,23,42,.55); z-index:60; display:flex; align-items:center; justify-content:center; padding:20px; }
.modal { background:#fff; border-radius:14px; max-width:720px; width:100%; max-height:88vh; overflow:auto; box-shadow:0 24px 60px rgba(0,0,0,.3); }

.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.md-content { font-size:13.5px; line-height:1.75; }
.md-content h1 { font-size:17px; font-weight:800; margin:10px 0 6px; }
.md-content h2 { font-size:15px; font-weight:700; margin:12px 0 5px; }
.md-content h3 { font-size:13.5px; font-weight:700; margin:10px 0 4px; }
.md-content ul { list-style:disc; padding-left:20px; margin:5px 0; }
.md-content table { width:100%; border-collapse:collapse; font-size:12.5px; margin:8px 0; }
.md-content th, .md-content td { border:1px solid #e2e8f0; padding:5px 9px; text-align:left; }
.md-content th { background:#f8fafc; }

.scroll-y { overflow-y:auto; }
.hidden { display:none !important; }

@media (max-width: 900px) {
  .sidebar { position:fixed; z-index:50; transform:translateX(-100%); transition:transform .2s; }
  .sidebar.open { transform:none; }
}