:root {
  --r-navy: #08233d;
  --r-navy-2: #061a31;
  --r-blue: #1267dc;
  --r-blue-2: #0b5bd3;
  --r-ink: #10213d;
  --r-muted: #64748b;
  --r-line: #dbe4ef;
  --r-soft: #f5f8fc;
  --r-green: #18a957;
  --r-amber: #f2a500;
  --r-red: #dc3f3f;
}

* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; min-height: 100%; font-family: Inter, Arial, sans-serif; color: var(--r-ink); background: #eef3f9; letter-spacing: 0; }
body { overflow: hidden; }

.concept-frame {
  width: 1672px;
  height: 941px;
  display: grid;
  grid-template-columns: 215px 1fr;
  overflow: hidden;
  background: #f8fbff;
}
.concept-frame.retrieval-frame { grid-template-columns: 168px 1fr; }
.concept-frame.canvas-frame { grid-template-columns: 178px 1fr; }
.retrieval-frame .r-sidebar { padding-left: 9px; padding-right: 9px; }
.retrieval-frame .r-brand { font-size: 18px; margin-left: 9px; gap: 8px; }
.retrieval-frame .r-brand-mark { width: 21px; height: 21px; }
.retrieval-frame .r-nav-item { font-size: 12px; padding: 0 9px; }
.canvas-frame .r-sidebar { padding-left: 10px; padding-right: 10px; }
.canvas-frame .r-brand { font-size: 18px; margin-left: 8px; gap: 8px; }
.canvas-frame .r-brand-mark { width: 21px; height: 21px; }
.canvas-frame .r-nav-item { font-size: 12px; padding: 0 9px; }

.r-sidebar {
  background: linear-gradient(180deg, var(--r-navy), var(--r-navy-2));
  color: #eaf4ff;
  padding: 22px 15px 18px;
  display: flex;
  flex-direction: column;
}
.r-brand { display: flex; align-items: center; gap: 12px; font-size: 24px; font-weight: 750; margin: 0 0 34px 13px; }
.r-brand-mark { width: 25px; height: 25px; border-radius: 7px; background: linear-gradient(135deg, #27e3e5, #0a71d8); display: inline-block; transform: rotate(30deg); }
.r-nav { display: grid; gap: 7px; }
.r-nav-item { height: 36px; display: flex; align-items: center; gap: 12px; padding: 0 12px; border-radius: 6px; font-size: 13px; font-weight: 650; color: #e6f0fb; }
.r-nav-item.is-active { background: #1267f1; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.r-nav-item em { margin-left: auto; font-style: normal; font-size: 11px; color: #055c2e; background: #b7f7cb; border-radius: 4px; padding: 3px 6px; }
.r-nav-icon { width: 16px; height: 16px; border-radius: 4px; border: 1.7px solid currentColor; opacity: .9; }
.r-sidebar-bottom { margin-top: auto; border-top: 1px solid rgba(255,255,255,.12); padding-top: 18px; display: grid; gap: 7px; }
.r-region { margin-top: 16px; border: 1px solid rgba(255,255,255,.18); border-radius: 8px; padding: 12px 14px; font-size: 12px; color: #cde0f4; }

.r-main { min-width: 0; display: grid; grid-template-rows: 58px 1fr; background: #f8fbff; }
.r-topbar { height: 58px; display: grid; grid-template-columns: 270px minmax(420px, 1fr) auto; align-items: center; gap: 24px; padding: 0 20px; border-bottom: 1px solid var(--r-line); background: rgba(255,255,255,.96); }
.r-case-switch, .r-search { height: 38px; border: 1px solid var(--r-line); border-radius: 7px; display: flex; align-items: center; padding: 0 14px; background: white; color: #5b6b82; font-size: 13px; }
.r-search { max-width: 540px; justify-self: center; width: 100%; color: #7d8ca1; }
.r-top-actions { display: flex; align-items: center; gap: 18px; font-size: 12px; color: #31435d; white-space: nowrap; }
.r-avatar { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, #f4b78d, #1e3a5d); display: inline-block; }

.r-content { padding: 18px 20px 18px; overflow: hidden; }
.r-page-head { display: flex; justify-content: space-between; align-items: start; margin-bottom: 18px; }
.r-page-head h1 { margin: 0 0 5px; font-size: 22px; line-height: 1.1; }
.r-page-head p { margin: 0; color: #53657e; font-size: 13px; }
.r-button { height: 32px; border: 1px solid var(--r-line); border-radius: 6px; background: white; padding: 0 12px; font-size: 12px; color: #1f3350; font-weight: 650; }
.r-button.primary { background: var(--r-blue); border-color: var(--r-blue-2); color: white; }
.r-button.green { background: #f1fbf4; border-color: #8ee5ad; color: #12763d; }

.r-panel { background: white; border: 1px solid var(--r-line); border-radius: 8px; overflow: hidden; box-shadow: 0 1px 1px rgba(15,23,42,.03); }
.r-panel-head { min-height: 46px; display: flex; align-items: center; justify-content: space-between; padding: 13px 15px 10px; border-bottom: 1px solid #e8eef6; }
.r-panel-head h3 { margin: 0; font-size: 14px; line-height: 1.1; }
.r-panel-head p { margin: 4px 0 0; color: #64748b; font-size: 11px; }
.r-panel-body { padding: 13px 14px; }
.r-kebab { color: #7b8da3; }

.r-status { display: inline-flex; align-items: center; height: 22px; border-radius: 12px; padding: 0 9px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.r-status-green { background: #e9f9ef; color: #158247; }
.r-status-blue { background: #eaf2ff; color: #1260d3; }
.r-status-amber { background: #fff6df; color: #a46800; }
.r-status-red { background: #ffecec; color: #bf3030; }
.r-status-neutral { background: #eff3f8; color: #53657e; }

.r-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.r-table th { color: #64748b; font-weight: 650; text-align: left; background: #f8fafc; border-bottom: 1px solid #e8eef6; padding: 9px 9px; }
.r-table td { border-bottom: 1px solid #edf2f7; padding: 9px; vertical-align: middle; color: #263a55; }
.r-table.is-compact th, .r-table.is-compact td { padding: 6px 7px; font-size: 11px; }
.r-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 5px; background: var(--r-green); }
.r-dot.amber { background: var(--r-amber); }
.r-dot.red { background: var(--r-red); }
.r-score { color: #11914c; font-weight: 800; }

.r-tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.r-tab { border: 1px solid var(--r-line); border-radius: 6px; height: 27px; padding: 0 12px; display: inline-flex; align-items: center; font-size: 12px; background: white; color: #40536e; }
.r-tab.active { color: #0f5fd2; border-color: #86b7ff; background: #eef6ff; font-weight: 700; }
.r-field { border: 1px solid var(--r-line); background: white; border-radius: 6px; height: 31px; display: flex; align-items: center; padding: 0 10px; font-size: 12px; color: #485a73; }

.r-mini-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.r-mini-card { border: 1px solid var(--r-line); border-radius: 8px; background: #fff; padding: 14px; min-height: 106px; }
.r-mini-card h4 { margin: 8px 0 8px; font-size: 13px; }
.r-mini-card strong { display: block; font-size: 12px; color: #1a2e4a; }
.r-mini-card p { margin: 7px 0 0; color: #64748b; font-size: 11px; line-height: 1.35; }
.r-mini-icon { width: 31px; height: 31px; border-radius: 50%; border: 2px solid var(--r-blue); }
.r-mini-icon.green { border-color: var(--r-green); background: #eefbf4; }
.r-mini-icon.amber { border-color: var(--r-amber); background: #fff7e7; }
.r-mini-icon.blue { border-color: var(--r-blue); background: #edf5ff; }

.r-progress { height: 5px; background: #e5edf6; border-radius: 999px; overflow: hidden; display: block; }
.r-progress > span { display: block; height: 100%; background: var(--r-green); border-radius: inherit; }
.r-ring { width: 78px; height: 78px; border-radius: 50%; border: 14px solid #e8f2fb; border-left-color: #1a68de; border-top-color: #25a85b; display: grid; place-items: center; font-weight: 800; font-size: 17px; color: #1b2e4b; }

.source-layout { display: grid; grid-template-columns: minmax(0, 1fr) 430px; gap: 16px; height: 846px; }
.source-left { display: grid; grid-template-rows: 214px 317px 1fr; gap: 12px; min-width: 0; }
.source-add { display: grid; grid-template-columns: repeat(4, 1fr) 300px; gap: 12px; }
.source-preview { display: grid; grid-template-rows: auto auto 1fr auto; gap: 10px; }
.pdf-preview { border: 1px solid var(--r-line); border-radius: 7px; padding: 18px; background: #fbfdff; height: 290px; overflow: hidden; }
.pdf-preview h4 { margin: 0 0 8px; font-size: 16px; }
.pdf-table { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 11px; }
.pdf-table td, .pdf-table th { border: 1px solid #dfe7f1; padding: 7px; }
.website-grid { display: grid; grid-template-columns: 1.3fr .8fr .8fr 1fr; gap: 13px; }
.allow-box, .deny-box { border-radius: 7px; border: 1px solid #b7e8c9; background: #f1fbf4; padding: 14px; min-height: 148px; font-size: 12px; line-height: 1.8; }
.deny-box { border-color: #fac0c0; background: #fff4f4; }

.retrieval-layout { height: 846px; display: grid; grid-template-rows: 96px 46px 488px 1fr; gap: 12px; }
.retrieval-question { border: 1px solid var(--r-line); border-radius: 8px; background: white; padding: 17px 17px; display: grid; grid-template-columns: 1fr 120px 160px 110px 150px; gap: 12px; align-items: center; }
.retrieval-question h2 { font-size: 17px; margin: 7px 0 0; line-height: 1.4; }
.filter-row { display: grid; grid-template-columns: 60px repeat(7, minmax(105px, 1fr)); gap: 10px; align-items: center; }
.method-grid { display: grid; grid-template-columns: 110px repeat(5, 1fr); height: 488px; border: 1px solid var(--r-line); border-radius: 8px; overflow: hidden; background: white; }
.method-side { background: #fbfdff; border-right: 1px solid var(--r-line); padding: 16px 12px; font-size: 12px; color: #52647e; }
.method-col { border-right: 1px solid var(--r-line); padding: 12px; }
.method-col:last-child { border-right: 0; }
.method-title { display: flex; justify-content: space-between; align-items: center; font-weight: 800; font-size: 13px; margin-bottom: 10px; }
.hit-card { border-bottom: 1px solid #e8eef6; padding: 9px 0 10px; min-height: 88px; }
.hit-card h4 { margin: 0 0 4px; font-size: 12px; }
.hit-card p { margin: 0; font-size: 10.5px; color: #5d6f87; line-height: 1.35; }
.eval-bars { margin-top: 10px; display: grid; gap: 8px; }
.eval-row { display: grid; grid-template-columns: 28px 1fr 10px; align-items: center; gap: 7px; font-size: 11px; }
.retrieval-bottom { display: grid; grid-template-columns: 1fr 720px; gap: 12px; }

.canvas-layout { height: 883px; display: grid; grid-template-columns: 1fr 478px; gap: 0; }
.canvas-main { padding: 18px 24px; border-right: 1px solid var(--r-line); overflow: hidden; }
.canvas-right { background: #fbfdff; padding: 18px 16px; }
.canvas-toolbar { display: flex; justify-content: space-between; align-items: center; margin: 14px 0 18px; }
.canvas-filters { display: grid; grid-template-columns: 130px 170px 1fr; gap: 10px; }
.canvas-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 21px; }
.canvas-card { border: 1px solid var(--r-line); border-radius: 8px; background: white; padding: 18px 16px; height: 304px; display: flex; flex-direction: column; }
.canvas-card.active { border: 2px solid #1673ff; box-shadow: 0 0 0 2px rgba(22,115,255,.08); }
.canvas-card h3 { margin: 0 0 10px; font-size: 15px; }
.canvas-card p { margin: 0 0 13px; font-size: 13px; line-height: 1.75; color: #263b58; }
.confidence { margin-left: auto; width: 43px; height: 43px; border-radius: 50%; border: 5px solid var(--r-green); display: grid; place-items: center; font-size: 11px; font-weight: 800; }
.canvas-meta { margin-top: auto; border-top: 1px solid #e8eef6; padding-top: 11px; display: flex; align-items: center; justify-content: space-between; color: #65768f; font-size: 11px; }
.add-block { margin-top: 17px; height: 51px; border: 1px dashed #8aa4c5; border-radius: 6px; display: grid; place-items: center; color: #3c5778; font-size: 13px; background: #fbfdff; }
.detail-title { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 15px; margin-bottom: 20px; }
.detail-tabs { display: flex; gap: 26px; border-bottom: 1px solid #dfe7f1; margin-bottom: 18px; font-size: 12px; font-weight: 700; color: #52647e; }
.detail-tabs span:first-child { color: #1168e7; border-bottom: 2px solid #1168e7; padding-bottom: 12px; }
.detail-section { border-bottom: 1px solid #e1e9f3; padding: 13px 0; }
.detail-section h4 { margin: 0 0 10px; font-size: 13px; }
.detail-box { border: 1px solid #dfe7f1; border-radius: 6px; background: white; padding: 13px; font-size: 12px; line-height: 1.55; }
.detail-box.green { border-color: #80d6a1; background: #fbfffc; }
.source-list { display: grid; gap: 7px; }
.source-row { display: grid; grid-template-columns: 22px 1fr 42px 28px; gap: 8px; align-items: center; border: 1px solid #e1e9f3; border-radius: 6px; background: white; padding: 8px; font-size: 11px; }
.action-row { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 10px; margin-top: 14px; }