/* Dedicated Tool Page Layouts & Workspaces */

.tool-page-wrapper {
  padding: 2.5rem 0 4rem 0;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--text-dim);
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.breadcrumb a {
  color: var(--text-muted);
}

.breadcrumb a:hover {
  color: var(--accent-purple);
}

.breadcrumb-separator {
  color: var(--border-grid);
}

.tool-header-block {
  margin-bottom: 2rem;
}

.tool-header-title {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-size: 2.25rem;
  margin-bottom: 0.5rem;
}

.tool-header-icon {
  color: var(--accent-purple);
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--bg-slate-canvas);
  border: 1px solid var(--border-grid);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}

.tool-header-desc {
  font-size: 1.1rem;
  color: var(--text-muted);
  max-width: 780px;
}

/* Tool Interface Workspace Grid */
.tool-workspace {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-bottom: 3.5rem;
}

@media (max-width: 900px) {
  .tool-workspace {
    grid-template-columns: 1fr;
  }
}

.tool-panel {
  background: var(--bg-slate-canvas);
  border: 1px solid var(--border-grid);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.tool-panel-title {
  font-size: 1.1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border-grid);
}

.output-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.output-box {
  width: 100%;
  min-height: 240px;
  background: var(--bg-deep-void);
  border: 1px solid var(--border-grid);
  border-radius: var(--radius-md);
  padding: 1rem;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 0.9rem;
  white-space: pre-wrap;
  word-break: break-all;
  overflow-y: auto;
  max-height: 500px;
}

/* Missing AI Provider Banner */
.provider-banner {
  background: rgba(168, 85, 247, 0.08);
  border: 1px solid var(--accent-purple-glow);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.provider-banner-text {
  font-size: 0.875rem;
  color: var(--text-primary);
}

.provider-banner-title {
  font-weight: 700;
  color: var(--accent-purple);
  margin-bottom: 0.2rem;
}

/* Interactive Workflow Designer & Node Editor Canvas */
.workflow-canvas-container {
  width: 100%;
  min-height: 520px;
  background-color: var(--bg-deep-void);
  background-image: radial-gradient(var(--border-grid) 1px, transparent 1px);
  background-size: 20px 20px;
  border: 1px solid var(--border-grid);
  border-radius: var(--radius-lg);
  padding: 2rem;
  position: relative;
  overflow: auto;
}

.canvas-toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.nodes-flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  max-width: 600px;
  margin: 0 auto;
}

.node-block {
  width: 100%;
  background: var(--bg-slate-canvas);
  border: 1px solid var(--border-grid);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  position: relative;
  box-shadow: var(--shadow-md);
  transition: border-color var(--transition-fast);
}

.node-block.node-ai { border-left: 4px solid var(--status-ai); }
.node-block.node-success { border-left: 4px solid var(--status-success); }
.node-block.node-warning { border-left: 4px solid var(--status-warning); }
.node-block.node-error { border-left: 4px solid var(--status-error); }

.node-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.node-title {
  font-weight: 700;
  font-size: 1rem;
}

.node-connector-line {
  width: 2px;
  height: 32px;
  background: var(--accent-purple);
  margin: 0 auto;
  position: relative;
}

.node-connector-line::after {
  content: '▼';
  position: absolute;
  bottom: -8px;
  left: -5px;
  font-size: 0.65rem;
  color: var(--accent-purple);
}

/* Simulation Badge */
.simulation-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--status-warning-bg);
  color: var(--status-warning);
  border: 1px solid rgba(245, 158, 11, 0.3);
  padding: 0.25rem 0.65rem;
  border-radius: var(--radius-full);
  font-size: 0.775rem;
  font-weight: 700;
}

/* Educational Content Styling */
.edu-content-section {
  margin-top: 4rem;
  padding-top: 3rem;
  border-top: 1px solid var(--border-grid);
}

.edu-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 3rem;
}

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

.edu-article h2 {
  font-size: 1.75rem;
  margin: 1.75rem 0 0.85rem 0;
}

.edu-article h3 {
  font-size: 1.3rem;
  margin: 1.5rem 0 0.75rem 0;
}

.edu-article p {
  margin-bottom: 1.25rem;
}

.edu-article ul, .edu-article ol {
  margin-bottom: 1.5rem;
  padding-left: 1.5rem;
}

.edu-article li {
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

.faq-accordion {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.5rem;
}

.faq-item {
  background: var(--bg-slate-canvas);
  border: 1px solid var(--border-grid);
  border-radius: var(--radius-md);
  padding: 1.25rem;
}

.faq-question {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.faq-answer {
  font-size: 0.925rem;
  color: var(--text-muted);
  line-height: 1.6;
}

.ad-placeholder {
  background: var(--bg-slate-canvas);
  border: 1px dashed var(--border-grid);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  text-align: center;
  color: var(--text-dim);
  font-size: 0.85rem;
  margin: 2rem 0;
}