body { font-family: 'Noto Sans JP', system-ui, sans-serif; }
.nav-link { display: flex; align-items: center; gap: .5rem; padding: .6rem .75rem; border-radius: .5rem; color: #cbd5e1; transition: .15s; }
.nav-link:hover { background: #1e293b; color: #fff; }
.nav-link.active { background: #0ea5e9; color: #fff; }
.dot { width: 8px; height: 8px; border-radius: 9999px; display: inline-block; }
.page-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; padding: 2rem 2rem 1.5rem; flex-wrap: wrap; }
.card { background: #fff; border: 1px solid #e2e8f0; border-radius: .9rem; padding: 1.25rem; box-shadow: 0 1px 2px rgba(15,23,42,.04); }
.widget-card { background: #fff; border: 1px solid #e2e8f0; border-radius: .9rem; padding: 1.1rem 1.25rem; box-shadow: 0 1px 2px rgba(15,23,42,.04); min-width: 0; }
.widget-card:hover .widget-menu { opacity: 1; }
.widget-menu button { padding: 2px 5px; border-radius: 4px; }
.widget-menu button:hover { background: #f1f5f9; color: #334155; }
.kpi-card { border-top: 3px solid #0ea5e9; }
.btn-primary, .btn-secondary, .btn-danger { display: inline-flex; align-items: center; gap: .45rem; padding: .55rem 1rem; border-radius: .55rem; font-size: .85rem; font-weight: 500; transition: .15s; white-space: nowrap; justify-content: center; }
.btn-primary { background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff; }
.btn-primary:hover { filter: brightness(1.08); }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; }
.btn-secondary { background: #fff; border: 1px solid #e2e8f0; color: #334155; }
.btn-secondary:hover { background: #f8fafc; }
.btn-danger { background: #fff; border: 1px solid #fecdd3; color: #e11d48; }
.btn-danger:hover { background: #fff1f2; }
.input { width: 100%; border: 1px solid #e2e8f0; border-radius: .5rem; padding: .5rem .75rem; font-size: .875rem; background: #fff; font-weight: 400; color: #1e293b; }
.input:focus { outline: none; border-color: #818cf8; box-shadow: 0 0 0 3px rgba(129,140,248,.2); }
.badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 9999px; font-size: 11px; font-weight: 500; white-space: nowrap; }
.section-title { display: flex; align-items: center; gap: .5rem; font-weight: 700; margin-bottom: 1rem; }
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 4rem 1rem; color: #64748b; font-size: .9rem; line-height: 1.8; background: #fff; border: 1px dashed #cbd5e1; border-radius: 1rem; }
.skeleton { height: 120px; border-radius: .5rem; background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; }
.kpi-card .skeleton { height: 40px; }
@keyframes shimmer { to { background-position: -200% 0; } }
.data-table { width: 100%; font-size: 12px; border-collapse: collapse; }
.data-table th { position: sticky; top: 0; background: #f8fafc; text-align: left; padding: 6px 10px; font-weight: 600; color: #475569; border-bottom: 1px solid #e2e8f0; white-space: nowrap; }
.data-table td { padding: 6px 10px; border-bottom: 1px solid #f1f5f9; white-space: nowrap; max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
.data-table tr:hover td { background: #f8fafc; }
.code-block { background: #0f172a; color: #e2e8f0; font-family: ui-monospace, monospace; font-size: 12px; padding: 1rem; border-radius: .5rem; overflow-x: auto; white-space: pre-wrap; }
.fade-in { animation: fadeIn .2s ease-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.source-opt { display: flex; align-items: center; gap: .4rem; border: 1px solid #e2e8f0; border-radius: .5rem; padding: .5rem .8rem; font-weight: 500; color: #334155; cursor: pointer; }
.tree-item { display: flex; align-items: center; gap: .5rem; width: 100%; text-align: left; padding: .35rem .5rem; border-radius: .375rem; font-size: .82rem; color: #334155; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-item:hover { background: #f1f5f9; }
.src-tab { padding: .35rem .8rem; border-radius: .4rem; color: #64748b; }
.src-tab.active { background: #0f172a; color: #fff; }
.src-tab:disabled { opacity: .4; cursor: not-allowed; }
.chip { border: 1px solid #c7d2fe; background: #eef2ff; color: #4338ca; padding: .35rem .8rem; border-radius: 9999px; font-size: .8rem; }
.chip:hover { background: #e0e7ff; }
/* report */
.score-ring { width: 110px; height: 110px; border-radius: 50%; display: grid; place-items: center; text-align: center; background: conic-gradient(var(--c) calc(var(--p) * 1%), #f1f5f9 0); position: relative; }
.score-ring > div { width: 86px; height: 86px; border-radius: 50%; background: #fff; display: flex; flex-direction: column; justify-content: center; }
.rec-item { border: 1px solid #e2e8f0; border-radius: .75rem; padding: 1rem; }
.rec-num { width: 24px; height: 24px; border-radius: 9999px; background: #6366f1; color: #fff; font-size: 12px; font-weight: 700; display: inline-grid; place-items: center; }
.matrix { position: relative; aspect-ratio: 1; border: 1px solid #e2e8f0; border-radius: .75rem; background:
  linear-gradient(#e2e8f0, #e2e8f0) 50% 0 / 1px 100% no-repeat, linear-gradient(#e2e8f0, #e2e8f0) 0 50% / 100% 1px no-repeat; }
.matrix .q { position: absolute; font-size: 10px; font-weight: 700; color: #94a3b8; }
.q1 { left: 8px; top: 8px; color: #10b981 !important; } .q2 { right: 8px; top: 8px; color: #6366f1 !important; } .q3 { left: 8px; bottom: 22px; } .q4 { right: 8px; bottom: 22px; }
.matrix-dot { position: absolute; transform: translate(-50%, 50%); width: 26px; height: 26px; border-radius: 9999px; background: #6366f1; color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; box-shadow: 0 2px 6px rgba(99,102,241,.4); cursor: default; }
.axis-x { position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); font-size: 10px; color: #64748b; }
.axis-y { position: absolute; left: -2px; top: 50%; transform: rotate(-90deg) translateX(50%); transform-origin: left; font-size: 10px; color: #64748b; }
.phase-col { border-radius: .75rem; padding: 1rem; }
.phase-0 { background: #ecfdf5; } .phase-1 { background: #eff6ff; } .phase-2 { background: #f5f3ff; }
.md p { margin: .25rem 0; } .md ul { list-style: disc; padding-left: 1.2rem; } .md ol { list-style: decimal; padding-left: 1.2rem; } .md strong { font-weight: 700; }
.md table { font-size: 12px; margin: .5rem 0; } .md td, .md th { border: 1px solid #cbd5e1; padding: 2px 6px; }
.analyzing-orb { width: 64px; height: 64px; border-radius: 50%; background: conic-gradient(#6366f1, #8b5cf6, #ec4899, #6366f1); animation: spin 1.2s linear infinite; -webkit-mask: radial-gradient(circle, transparent 55%, #000 56%); mask: radial-gradient(circle, transparent 55%, #000 56%); }
@keyframes spin { to { transform: rotate(360deg); } }
@media print {
  #sidebar, #analysis-config, .page-header button, #analyst-chat, #toast-root { display: none !important; }
  #app { height: auto; overflow: visible; } #main-content { overflow: visible; }
  .card { break-inside: avoid; }
}
.dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2rem 1rem; border: 2px dashed #cbd5e1; border-radius: .9rem; background: #f8fafc; cursor: pointer; transition: .15s; }
.dropzone:hover, .dropzone.dragging { border-color: #0ea5e9; background: #f0f9ff; }
.code-inline { background: #f1f5f9; padding: 1px 5px; border-radius: 4px; font-size: .85em; }
/* import */
.import-tab { display: inline-flex; align-items: center; padding: .35rem .75rem; border: 1px solid #e2e8f0; border-radius: .5rem; font-size: .8rem; background: #fff; }
.import-tab.active { border-color: #10b981; background: #ecfdf5; color: #047857; font-weight: 600; }
.import-table th { background: #f8fafc; }
/* ER diagram */
.er-canvas { position: relative; overflow: auto; background-color: #fff; background-image: radial-gradient(#e2e8f0 1px, transparent 1px); background-size: 18px 18px; border: 1px solid #e2e8f0; border-radius: .9rem; min-height: 300px; }
#er-svg { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.er-line { fill: none; stroke: #6366f1; stroke-width: 2; pointer-events: stroke; cursor: pointer; }
.er-line:hover { stroke: #f59e0b; stroke-width: 3.5; }
.er-line.warn { stroke: #f59e0b; stroke-dasharray: 6 4; }
.er-temp { fill: none; stroke: #94a3b8; stroke-width: 2; stroke-dasharray: 5 4; }
.er-label { font-size: 11px; font-weight: 700; fill: #4f46e5; paint-order: stroke; stroke: #fff; stroke-width: 4px; }
.er-table { position: absolute; width: 240px; background: #fff; border: 1px solid #cbd5e1; border-radius: .6rem; box-shadow: 0 4px 14px rgba(15,23,42,.08); user-select: none; z-index: 1; }
.er-head { display: flex; align-items: center; gap: 4px; padding: .5rem .7rem; background: linear-gradient(135deg, #0f172a, #334155); color: #fff; font-size: .8rem; font-weight: 700; border-radius: .55rem .55rem 0 0; cursor: grab; touch-action: none; }
.er-head:active { cursor: grabbing; }
.er-table ul { max-height: 260px; overflow-y: auto; }
.er-col { position: relative; display: flex; align-items: center; gap: 6px; padding: 4px 10px; font-size: 12px; border-top: 1px solid #f1f5f9; }
.er-col:hover { background: #eef2ff; }
.er-col.linked { background: #f5f3ff; font-weight: 600; color: #4338ca; }
.col-handle { width: 10px; height: 10px; border-radius: 9999px; background: #c7d2fe; border: 2px solid #fff; box-shadow: 0 0 0 1px #a5b4fc; cursor: crosshair; flex-shrink: 0; touch-action: none; }
.col-handle:hover { background: #6366f1; }
.rel-item { border: 1px solid #e2e8f0; border-radius: .6rem; padding: .6rem .8rem; }