:root{
  --bg:#f7f8fc;
  --card:#ffffff;
  --text:#1e2942;
  --muted:#7b859b;
  --line:#e5e8f0;
  --primary:#5967e8;
  --primary-dark:#4756d7;
  --primary-soft:#eef0ff;
  --green:#268b59;
  --green-soft:#eaf8f0;
  --red:#ce5962;
  --red-soft:#fff0f2;
  --yellow:#8a7621;
  --yellow-soft:#fff7d6;
  --shadow:0 8px 28px rgba(26,37,64,.055);
}

*{
  box-sizing:border-box;
}

html,body{
  margin:0;
  min-height:100%;
}

body{
  background:var(--bg);
  color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

button,input,select{
  font:inherit;
}

button{
  cursor:pointer;
}

a{
  color:inherit;
  text-decoration:none;
}


/* top bar */

.topbar{
  height:70px;
  background:#fff;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 28px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
}

.logo{
  width:38px;
  height:38px;
  border-radius:10px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#5967e8,#7058df);
  color:#fff;
  font-weight:800;
  font-size:13px;
}

.brandcopy{
  display:grid;
  gap:2px;
}

.brandcopy strong{
  font-size:15px;
}

.brandcopy small{
  color:var(--muted);
  font-size:10px;
}

.back{
  color:var(--primary);
  font-size:11px;
  font-weight:700;
}


/* layout */

.layout{
  min-height:calc(100vh - 70px);
  display:grid;
  grid-template-columns:220px minmax(0,1fr);
}

.sidebar{
  background:#fff;
  border-right:1px solid var(--line);
  padding:24px 14px 18px;
  display:flex;
  flex-direction:column;
}

.side-title{
  margin:0 10px 15px;
  color:#303b55;
  font-size:13px;
  font-weight:800;
}

.side{
  width:100%;
  border:0;
  border-radius:8px;
  background:transparent;
  color:#69748b;
  padding:10px 12px;
  text-align:left;
  font-size:11px;
}

.side:hover{
  background:#f7f8fc;
}

.side.active{
  background:var(--primary-soft);
  color:var(--primary);
  font-weight:750;
}

.side-foot{
  margin-top:auto;
  padding:12px 10px;
  color:#8a93a7;
  border-top:1px solid var(--line);
  font-size:9px;
}

main{
  min-width:0;
  padding:24px 26px 28px;
}


/* heading */

.heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  margin-bottom:18px;
}

.heading h1{
  margin:0 0 5px;
  font-size:22px;
  letter-spacing:-.02em;
}

.heading h1 span{
  color:#7f88a0;
  font-weight:500;
}

.heading p{
  margin:0;
  color:var(--muted);
  font-size:11px;
}

.ghost{
  border:1px solid #aab3f7;
  border-radius:8px;
  color:var(--primary);
  background:#fff;
  padding:8px 11px;
  font-size:10px;
}


/* generic panels */

.panel{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:var(--shadow);
}

.topgrid{
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(360px,.85fr);
  gap:16px;
  margin-bottom:16px;
}

.lowergrid{
  display:grid;
  grid-template-columns:270px minmax(560px,1fr) 315px;
  gap:16px;
}

.ptitle,
.bar{
  min-height:54px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.ptitle{
  min-height:auto;
}

.ptitle b,
.bar b{
  font-size:12px;
}

.mock{
  display:inline-flex;
  align-items:center;
  padding:3px 6px;
  border-radius:999px;
  background:var(--yellow-soft);
  color:var(--yellow);
  font-size:8px;
  font-style:normal;
  font-weight:800;
}

.bar{
  padding:0 14px;
  border-bottom:1px solid var(--line);
}

.bar button{
  border:1px solid var(--line);
  background:#fff;
  color:var(--primary);
  border-radius:7px;
  padding:6px 8px;
  font-size:9px;
}


/* upload */

.uploadpanel{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(210px,.75fr);
  gap:15px;
  padding:15px;
}

.dropzone{
  min-height:225px;
  border:1.5px dashed #c8d0e2;
  border-radius:10px;
  background:#fbfcff;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  padding:24px;
  text-align:center;
  transition:.15s ease;
}

.dropzone:hover,
.dropzone.dragging{
  border-color:var(--primary);
  background:var(--primary-soft);
}

.cloud{
  color:var(--primary);
  font-size:38px;
  line-height:1;
  margin-bottom:10px;
}

.dropzone h2{
  margin:0 0 4px;
  font-size:13px;
}

.dropzone p{
  margin:0 0 12px;
  color:var(--muted);
  font-size:10px;
}

.dropzone small{
  display:block;
  color:#8a94aa;
  font-size:8px;
  margin-top:4px;
}

.uploadopts{
  display:flex;
  flex-direction:column;
  padding:5px 2px;
}

.uploadopts h3{
  margin:0 0 12px;
  font-size:10px;
}

.uploadopts label{
  display:grid;
  grid-template-columns:18px 1fr;
  gap:7px;
  margin-bottom:11px;
}

.uploadopts label input{
  margin-top:2px;
}

.uploadopts label span{
  display:grid;
  gap:2px;
}

.uploadopts label b{
  font-size:10px;
}

.uploadopts label small{
  color:var(--muted);
  font-size:8px;
}

.field{
  display:grid;
  gap:6px;
  margin:7px 0 13px;
}

.field span{
  color:#667187;
  font-size:9px;
  font-weight:750;
}

.field select{
  width:100%;
  border:1px solid var(--line);
  border-radius:7px;
  background:#fff;
  color:var(--text);
  padding:8px 9px;
  font-size:9px;
}

.primary{
  margin-top:auto;
  border:0;
  border-radius:7px;
  background:linear-gradient(90deg,var(--primary),#6757e6);
  color:#fff;
  padding:9px 11px;
  font-size:10px;
  font-weight:750;
}


/* summary */

.summary{
  padding:15px;
}

.stats{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  margin-top:14px;
}

.stats > div{
  min-height:58px;
  display:grid;
  align-content:center;
  gap:4px;
  padding:9px;
  background:#fafbfe;
  border:1px solid #edf0f5;
  border-radius:8px;
}

.stats small{
  color:var(--muted);
  font-size:7.5px;
}

.stats strong{
  font-size:13px;
}

.sumfoot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:14px;
}

.sumfoot small{
  color:var(--muted);
  font-size:8px;
}

.sumfoot span{
  border-radius:6px;
  background:var(--green-soft);
  color:var(--green);
  padding:5px 7px;
  font-size:8px;
  font-weight:750;
}


/* suite tree */

.suitebody{
  padding:8px 12px 14px;
}

.suites details{
  margin:2px 0;
}

.suites summary{
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:8px 5px;
  color:#455169;
  font-size:9.5px;
  font-weight:750;
}

.suites summary i{
  margin-left:auto;
  min-width:20px;
  padding:2px 5px;
  border-radius:999px;
  background:#f0f3f7;
  color:#747e93;
  text-align:center;
  font-size:7px;
  font-style:normal;
}

.suites p{
  margin:0 0 0 23px;
  padding:6px 8px;
  border-radius:6px;
  color:#737d91;
  font-size:8.5px;
}

.suites p:hover{
  background:var(--primary-soft);
  color:var(--primary);
}


/* table */

.tablepanel{
  min-width:0;
}

.tablebar{
  gap:14px;
}

.search{
  display:flex;
  align-items:center;
  gap:6px;
}

.search input{
  width:190px;
  border:1px solid var(--line);
  border-radius:7px;
  background:#fbfcff;
  padding:7px 9px;
  outline:0;
  font-size:9px;
}

.search button{
  width:30px;
  height:30px;
  padding:0;
}

.tablewrap{
  overflow:auto;
}

table{
  width:100%;
  min-width:720px;
  border-collapse:collapse;
  font-size:8.5px;
}

thead{
  background:#fbfcff;
}

th{
  padding:9px 8px;
  color:#7d879c;
  border-bottom:1px solid var(--line);
  text-align:left;
  font-weight:750;
}

td{
  padding:9px 8px;
  color:#505c72;
  border-bottom:1px solid #eef1f5;
}

tbody tr{
  cursor:pointer;
}

tbody tr:hover{
  background:#fafbff;
}

tbody tr.selected{
  background:var(--primary-soft);
}

td strong{
  color:#344059;
}

.loc{
  display:inline-flex;
  border-radius:5px;
  padding:4px 6px;
  font-size:7px;
  font-weight:750;
}

.loc.neo{
  background:var(--green-soft);
  color:var(--green);
}

.loc.workspace{
  background:var(--yellow-soft);
  color:var(--yellow);
}

.actions{
  display:flex;
  gap:5px;
}

.action{
  width:26px;
  height:26px;
  border:1px solid var(--line);
  border-radius:6px;
  background:#fff;
  display:grid;
  place-items:center;
  padding:0;
}

.action.save{
  color:var(--primary);
}

.action.delete{
  color:var(--red);
  border-color:#efc0c5;
}

.tablefoot{
  padding:10px 13px;
  color:var(--muted);
  font-size:8px;
}


/* details */

#details{
  padding:15px;
}

.empty{
  min-height:230px;
  display:grid;
  place-items:center;
  color:var(--muted);
  text-align:center;
  font-size:9px;
}

.dhead{
  display:flex;
  align-items:center;
  gap:7px;
  margin-bottom:12px;
}

.dhead h3{
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  margin:0;
  font-size:11px;
}

.activebadge{
  border-radius:5px;
  background:var(--green-soft);
  color:var(--green);
  padding:3px 6px;
  font-size:7px;
  font-weight:800;
}

.drow{
  display:grid;
  grid-template-columns:88px minmax(0,1fr);
  gap:8px;
  padding:7px 0;
  border-bottom:1px solid #eef1f5;
  font-size:8px;
}

.drow span{
  color:var(--muted);
}

.drow strong{
  color:#4f5a70;
  overflow-wrap:anywhere;
}

.detailbuttons{
  display:grid;
  gap:7px;
  margin-top:15px;
}

.detailbuttons button{
  border:1px solid #aab3f7;
  border-radius:7px;
  background:#fff;
  color:var(--primary);
  padding:8px 9px;
  font-size:8.5px;
  font-weight:750;
}

.detailbuttons .danger{
  border-color:#efbcc1;
  color:var(--red);
}

.neo4jbox{
  margin-top:17px;
  padding-top:13px;
  border-top:1px solid var(--line);
}

.neo4jbox h4{
  margin:0 0 8px;
  font-size:9px;
}

.nrow{
  display:flex;
  justify-content:space-between;
  gap:8px;
  margin-top:6px;
  color:var(--muted);
  font-size:7.5px;
}

.nrow strong{
  color:#505b71;
}

.nrow .ok{
  color:var(--green);
}


/* notice */

.notice{
  margin-top:16px;
  border-radius:8px;
  background:var(--primary-soft);
  color:#6d7890;
  padding:11px 13px;
  font-size:8.5px;
}

.notice b{
  color:var(--primary);
}


/* responsive */

@media(max-width:1280px){
  .lowergrid{
    grid-template-columns:250px minmax(0,1fr);
  }

  .detail{
    grid-column:1/-1;
  }
}

@media(max-width:980px){
  .layout{
    grid-template-columns:1fr;
  }

  .sidebar{
    display:none;
  }

  .topgrid,
  .lowergrid{
    grid-template-columns:1fr;
  }

  .uploadpanel{
    grid-template-columns:1fr;
  }
}

@media(max-width:700px){
  .topbar{
    height:auto;
    align-items:flex-start;
    gap:12px;
    padding:14px 16px;
    flex-direction:column;
  }

  main{
    padding:16px 12px 22px;
  }

  .heading{
    flex-direction:column;
  }

  .stats{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

/* ========================================================================== */
/* REAL NEO4J MODE                                                            */
/* ========================================================================== */

.db-toolbar{
  display:flex;
  align-items:center;
  gap:8px;
}

.db-state{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:5px 8px;
  border-radius:999px;
  background:#eef1f6;
  color:#6d778c;
  font-size:8px;
  font-weight:750;
}

.db-state.ok{
  background:var(--green-soft);
  color:var(--green);
}

.db-state.error{
  background:var(--red-soft);
  color:var(--red);
}

.unlock{
  border:1px solid #aab3f7;
  border-radius:8px;
  background:#fff;
  color:var(--primary);
  padding:8px 10px;
  font-size:9px;
  font-weight:750;
}

.unlock.unlocked{
  border-color:#a9d8be;
  background:var(--green-soft);
  color:var(--green);
}

.destination{
  margin:3px 0 12px;
  padding:10px;
  border:1px solid #dfe4ef;
  border-radius:8px;
  background:#fafbfe;
}

.destination small{
  display:block;
  color:var(--muted);
  font-size:8px;
  margin-top:3px;
}

.destination strong{
  color:#3d4860;
  font-size:10px;
}

.import-progress{
  margin-top:8px;
  min-height:15px;
  color:var(--muted);
  font-size:8px;
}

.import-progress.ok{
  color:var(--green);
}

.import-progress.error{
  color:var(--red);
}

.notice.real{
  background:#fff7e8;
  color:#7d6a43;
}

.notice.real b{
  color:#9a6c13;
}

.suite-list{
  padding:8px 12px 14px;
}

.suite-entry{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:9px 7px;
  border-bottom:1px solid #eef1f5;
  font-size:9px;
}

.suite-entry:last-child{
  border-bottom:0;
}

.suite-entry strong{
  color:#47536b;
}

.suite-entry span{
  min-width:22px;
  padding:3px 6px;
  border-radius:999px;
  background:#f0f3f7;
  color:#747e93;
  text-align:center;
  font-size:7px;
}

.metadata-uri{
  word-break:break-all;
}

/* URL / IRI import --------------------------------------------------------- */

.source-tabs{
  display:flex;
  gap:6px;
  margin-bottom:12px;
}
.source-tab{
  border:1px solid var(--line);
  border-radius:7px;
  background:#fff;
  color:#6d778d;
  padding:7px 10px;
  font-size:9px;
  font-weight:750;
}
.source-tab.active{
  border-color:#aab3f7;
  background:var(--primary-soft);
  color:var(--primary);
}
.source-pane{display:none}
.source-pane.active{display:block}

.url-entry{
  display:grid;
  gap:6px;
  margin-bottom:10px;
}
.url-entry label{
  color:#5f6b82;
  font-size:9px;
  font-weight:750;
}
.url-entry input,
.field input{
  width:100%;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
  color:var(--text);
  padding:9px 10px;
  outline:0;
  font-size:9px;
}
.url-entry input:focus,
.field input:focus{
  border-color:#9ca7f5;
  box-shadow:0 0 0 3px rgba(89,103,232,.08);
}

.import-options{
  display:grid;
  gap:7px;
  margin:10px 0;
}
.option-row{
  display:grid !important;
  grid-template-columns:18px 1fr !important;
  gap:7px !important;
  margin:0 !important;
}
.option-row span{
  display:grid;
  gap:2px;
}
.option-row b{font-size:9px !important}
.option-row small{
  color:var(--muted);
  font-size:7.5px !important;
}

.depth-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin:10px 0 12px;
  color:#667187;
  font-size:9px;
  font-weight:750;
}
.depth-row select{
  width:78px;
  border:1px solid var(--line);
  border-radius:7px;
  background:#fff;
  padding:7px 8px;
  font-size:9px;
}

.button-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:8px;
}
.secondary-primary{
  border:1px solid #aab3f7;
  border-radius:7px;
  background:#fff;
  color:var(--primary);
  padding:9px 10px;
  font-size:9px;
  font-weight:750;
}
.secondary-primary:disabled,
.primary:disabled{
  opacity:.45;
  cursor:not-allowed;
}

.analysis-panel{
  margin-bottom:16px;
  overflow:hidden;
}
.analysis-body{padding:14px}
.analysis-empty{
  min-height:70px;
  display:grid;
  place-items:center;
  color:var(--muted);
  text-align:center;
  font-size:9px;
}
.analysis-summary{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:8px;
  margin-bottom:12px;
}
.analysis-stat{
  border:1px solid #edf0f5;
  border-radius:8px;
  background:#fafbfe;
  padding:9px;
  display:grid;
  gap:4px;
}
.analysis-stat small{
  color:var(--muted);
  font-size:7px;
}
.analysis-stat strong{font-size:12px}

.analysis-grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:12px;
}
.analysis-section{
  min-width:0;
  border:1px solid var(--line);
  border-radius:9px;
  overflow:hidden;
}
.analysis-section h3{
  margin:0;
  padding:9px 10px;
  border-bottom:1px solid var(--line);
  background:#fbfcff;
  font-size:9px;
}
.analysis-list{
  max-height:250px;
  overflow:auto;
}
.analysis-item{
  padding:9px 10px;
  border-bottom:1px solid #eef1f5;
  font-size:8px;
}
.analysis-item:last-child{border-bottom:0}
.analysis-item strong{
  display:block;
  color:#455168;
  margin-bottom:3px;
  overflow-wrap:anywhere;
}
.analysis-item small{
  display:block;
  color:var(--muted);
  overflow-wrap:anywhere;
}
.analysis-badges{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin-top:5px;
}
.analysis-badge{
  display:inline-flex;
  padding:3px 5px;
  border-radius:5px;
  background:#f0f3f8;
  color:#687389;
  font-size:7px;
  font-weight:750;
}
.analysis-badge.root{
  background:var(--primary-soft);
  color:var(--primary);
}
.analysis-badge.import{
  background:var(--green-soft);
  color:var(--green);
}
.analysis-badge.alignment{
  background:var(--yellow-soft);
  color:var(--yellow);
}
.analysis-error{color:var(--red) !important}
.analysis-note{
  margin-top:10px;
  color:var(--muted);
  font-size:7.5px;
}

@media(max-width:900px){
  .analysis-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
  .analysis-grid{grid-template-columns:1fr}
}

/* Complete Suite Resolver 4.0 --------------------------------------------- */

.suite-resolver-intro{
  margin-bottom:12px;
  padding:10px 11px;
  border:1px solid #dfe4ef;
  border-radius:8px;
  background:#fafbfe;
  display:grid;
  gap:4px;
}

.suite-resolver-intro strong{
  color:#3d4860;
  font-size:10px;
}

.suite-resolver-intro small{
  color:var(--muted);
  font-size:8px;
  line-height:1.45;
}

.suite-resolution-box{
  margin-bottom:12px;
  padding:10px;
  border:1px solid #dfe4ef;
  border-radius:9px;
  background:#fbfcff;
}

.suite-resolution-box h3{
  margin:0 0 7px;
  font-size:9px;
}

.suite-resolution-row{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:4px 0;
  color:var(--muted);
  font-size:7.5px;
}

.suite-resolution-row strong{
  color:#4c586e;
  text-align:right;
}

.analysis-badge.member{
  background:#eaf4ff;
  color:#3974a7;
}

.analysis-badge.dependency{
  background:#f2efff;
  color:#725ab1;
}

.resolver-note{
  margin-top:8px;
  color:var(--muted);
  font-size:7.5px;
}

/* OPENSPAD VECTORIZATION UI 6.0.2 START */
.vectorization-panel{margin-bottom:18px;overflow:hidden}
.vectorization-bar{display:flex;align-items:center;justify-content:space-between;gap:12px}
.vector-state{font-size:12px;font-weight:700;color:var(--muted)}
.vector-state.ready{color:var(--green)}
.vector-state.pending{color:var(--yellow)}
.vector-state.error{color:var(--red)}
.vectorization-content{padding:16px}
.vector-model,.vector-counts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:12px}
.vector-model{grid-template-columns:2fr 1fr 1fr}
.vector-model>div,.vector-counts>div{border:1px solid var(--line);border-radius:10px;padding:11px 12px;background:#fafbff}
.vector-model small,.vector-counts small{display:block;color:var(--muted);font-size:11px;margin-bottom:5px}
.vector-model strong,.vector-counts strong{display:block;color:var(--text);font-size:14px;overflow-wrap:anywhere}
.vector-indexes{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 14px}
.vector-indexes span{padding:6px 9px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--muted);font-size:11px;font-weight:700}
.vector-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.vector-note{margin-top:12px;padding:10px 12px;border-radius:8px;background:var(--primary-soft);color:var(--muted);font-size:11px;line-height:1.5}
@media(max-width:900px){.vector-model,.vector-counts{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.vector-model,.vector-counts{grid-template-columns:1fr}}
/* OPENSPAD VECTORIZATION UI 6.0.2 END */