#platecraft-app{
  --platecraft-ink: #172033;
  --platecraft-muted: #697482;
  --platecraft-line: #d9dee5;
  --platecraft-soft: #f4f6f8;
  --platecraft-paper: #fff;
  --platecraft-brand: #163c46;
  --platecraft-brand-2: #2f7c82;
  --platecraft-select: #2f80ed;
  --platecraft-danger: #b93644;
  --platecraft-font: "Segoe UI", Aptos, Inter, Arial, sans-serif;
}

html, body{ margin: 0; padding: 0; background: #f4f6f8; }
#platecraft-app, #platecraft-app *{ box-sizing: border-box; }
#platecraft-app{ margin: 0; min-width: 320px; max-width: 100%; min-height: 100vh; overflow-x: clip; direction: ltr; text-align: left; line-height: 1.45; letter-spacing: normal; background: var(--platecraft-soft); color: var(--platecraft-ink); font: 13px/1.45 var(--platecraft-font); -webkit-font-smoothing: antialiased; }
#platecraft-app button, #platecraft-app input, #platecraft-app select, #platecraft-app textarea{ font: inherit; color: inherit; letter-spacing: normal; text-transform: none; margin: 0; box-shadow: none; }
#platecraft-app button{ cursor: pointer; line-height: 1.25; }
#platecraft-app button:disabled{ cursor: not-allowed; opacity: .45; }
#platecraft-app svg{ max-width: none; }
#platecraft-app .platecraft-hidden{ display: none !important; }

#platecraft-app .platecraft-topbar{
  position: relative; z-index: 50;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  min-height: 54px; padding: 0 22px;
  border-bottom: 1px solid var(--platecraft-line); background: rgba(255,255,255,.98);
}
#platecraft-app .platecraft-brand, #platecraft-app .platecraft-top-actions, #platecraft-app .platecraft-toolbar, #platecraft-app .platecraft-heading-controls, #platecraft-app .platecraft-field-row, #platecraft-app .platecraft-inspector-actions, #platecraft-app .platecraft-tab-buttons{
  display: flex; align-items: center;
}
#platecraft-app .platecraft-brand{ gap: 10px; }
#platecraft-app .platecraft-brand-mark{ display: grid; grid-template-columns: repeat(2, 6px); place-content: center; gap: 3px; width: 29px; height: 29px; border-radius: 7px; background: var(--platecraft-brand); }
#platecraft-app .platecraft-brand-mark i{ width: 6px; height: 6px; border-radius: 50%; background: #b8e1dd; }
#platecraft-app .platecraft-brand-name{ color: var(--platecraft-brand); font-size: 13px; font-weight: 800; letter-spacing: .14em; }
#platecraft-app .platecraft-brand-sub{ margin-top: 3px; color: #7b8490; font-size: 10px; }
#platecraft-app .platecraft-save-state{ display: flex; align-items: center; gap: 6px; color: #71808a; font-size: 12px; }
#platecraft-app .platecraft-save-dot{ width: 7px; height: 7px; border-radius: 50%; background: #3aa37a; }
#platecraft-app .platecraft-top-actions{ justify-content: flex-end; gap: 7px; }

#platecraft-app .platecraft-btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 34px; padding: 0 12px; border: 1px solid #cfd5dc; border-radius: 7px;
  background: #fff; font-size: 12px; font-weight: 650; white-space: nowrap;
}
#platecraft-app .platecraft-btn:hover{ background: #f7f9fa; }
#platecraft-app .platecraft-btn:focus-visible, #platecraft-app .platecraft-axis:focus-visible, #platecraft-app .platecraft-tab-btn:focus-visible, #platecraft-app .platecraft-template-card:focus-visible, #platecraft-app .platecraft-template-category:focus-visible, #platecraft-app summary:focus-visible{ outline: 2px solid var(--platecraft-select); outline-offset: 2px; }
#platecraft-app .platecraft-btn.platecraft-primary{ border-color: var(--platecraft-brand); background: var(--platecraft-brand); color: #fff; }
#platecraft-app .platecraft-btn.platecraft-primary:hover{ background: #1b4b56; }
#platecraft-app .platecraft-btn.platecraft-ghost{ border-color: transparent; background: transparent; }
#platecraft-app .platecraft-btn.platecraft-danger{ color: var(--platecraft-danger); }
#platecraft-app .platecraft-btn.platecraft-icon{ width: 34px; padding: 0; }
#platecraft-app .platecraft-btn svg{ width: 16px; height: 16px; flex-shrink: 0; }
#platecraft-app .platecraft-divider{ width: 1px; height: 22px; background: var(--platecraft-line); }

#platecraft-app details.platecraft-menu{ position: relative; }
#platecraft-app details.platecraft-menu > summary{ list-style: none; }
#platecraft-app details.platecraft-menu > summary::-webkit-details-marker{ display: none; }
#platecraft-app .platecraft-menu-pop{ position: absolute; right: 0; top: 42px; z-index: 80; width: 255px; padding: 6px; border: 1px solid #ccd2d9; border-radius: 9px; background: #fff; box-shadow: 0 10px 28px rgba(23,32,51,.13); }
#platecraft-app .platecraft-menu-label{ padding: 7px 9px 5px; color: #7a8490; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
#platecraft-app .platecraft-menu-sep{ height: 1px; margin: 5px; background: #e7eaee; }
#platecraft-app .platecraft-menu-item{ display: flex; width: 100%; align-items: flex-start; gap: 10px; padding: 9px; border: 0; border-radius: 6px; background: transparent; text-align: left; }
#platecraft-app .platecraft-menu-item:hover{ background: #f2f5f6; }
#platecraft-app .platecraft-menu-item b, #platecraft-app .platecraft-menu-item small{ display: block; }
#platecraft-app .platecraft-menu-item b{ font-size: 12px; }
#platecraft-app .platecraft-menu-item small{ margin-top: 2px; color: #7b8590; font-size: 10px; font-weight: 400; }
#platecraft-app .platecraft-menu-icon{ display: flex; align-items: center; justify-content: center; width: 18px; color: var(--platecraft-brand-2); }
#platecraft-app .platecraft-menu-icon svg{ width: 16px; height: 16px; }

#platecraft-app .platecraft-workspace-heading{ display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 14px 20px; padding: 14px 22px 12px; }
#platecraft-app .platecraft-workspace-heading > div:first-child{ min-width: 0; flex: 1 1 300px; }
#platecraft-app .platecraft-plate-title{ width: min(600px, 100%); border: 0; border-bottom: 1px solid transparent; background: transparent; font-size: clamp(19px, 1.75vw, 22px); font-weight: 700; outline: none; padding: 1px 0; text-overflow: ellipsis; }
#platecraft-app .platecraft-plate-title:focus{ border-color: #aab4be; }
#platecraft-app .platecraft-project-line{ display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 5px; color: #64748b; font-size: 12px; }
#platecraft-app .platecraft-project-input{ width: min(220px, 100%); border: 0; border-bottom: 1px solid #cfd5dc; background: transparent; outline: none; font-size: 12px; color: var(--platecraft-ink); }
#platecraft-app .platecraft-heading-controls{ align-items: flex-end; gap: 9px; flex-shrink: 0; }
#platecraft-app .platecraft-field{ display: flex; flex-direction: column; gap: 5px; min-width: 0; }
#platecraft-app .platecraft-field label{ display: flex; align-items: center; color: #475569; font-size: 11.5px; font-weight: 700; }
#platecraft-app .platecraft-help-btn{ width: 14px; height: 14px; min-height: 14px; margin-left: 5px; padding: 0; color: #a1abb5; display: inline-flex; }
#platecraft-app .platecraft-help-btn:hover{ color: var(--platecraft-brand-2); }
#platecraft-app .platecraft-input, #platecraft-app .platecraft-select, #platecraft-app .platecraft-textarea{ width: 100%; border: 1px solid #cbd5e1; border-radius: 7px; background: #fff; outline: none; font-size: 12.5px; }
#platecraft-app .platecraft-input, #platecraft-app .platecraft-select{ height: 34px; padding: 0 10px; }
#platecraft-app .platecraft-textarea{ min-height: 66px; padding: 8px 10px; resize: vertical; }
#platecraft-app .platecraft-input:focus, #platecraft-app .platecraft-select:focus, #platecraft-app .platecraft-textarea:focus{ border-color: #4f8e93; box-shadow: 0 0 0 2px rgba(47,124,130,.12); }

#platecraft-app .platecraft-toolbar{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  min-height: 48px;
  padding: 7px 22px;
  border-block: 1px solid var(--platecraft-line);
  background: #fff;
}
#platecraft-app .platecraft-toolbar-group{
  display: flex;
  align-items: center;
  gap: 8px;
}
#platecraft-app .platecraft-selection-status{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 20px;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  color: #334155;
  font-size: 11.5px;
  font-weight: 600;
}
#platecraft-app .platecraft-selection-status b{
  color: #0f172a;
  font-weight: 800;
}
#platecraft-app .platecraft-selection-status svg{
  width: 14px;
  height: 14px;
  color: var(--platecraft-brand-2);
}
#platecraft-app .platecraft-select-actions{
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
#platecraft-app .platecraft-clipboard-actions{
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 4px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
}
#platecraft-app .platecraft-clipboard-actions .platecraft-btn{
  min-height: 28px;
  padding: 0 8px;
  border-color: transparent;
  background: transparent;
  font-size: 11.5px;
  gap: 5px;
}
#platecraft-app .platecraft-clipboard-actions .platecraft-btn:not(:disabled):hover{
  border-color: #cbd5e1;
  background: #fff;
}
#platecraft-app .platecraft-clipboard-actions .platecraft-btn.platecraft-paste-ready:not(:disabled){
  border-color: #b8cecf;
  background: #eef7f6;
  color: var(--platecraft-brand);
}
#platecraft-app .platecraft-workflow-group{
  margin-left: auto;
  gap: 8px;
}
#platecraft-app .platecraft-template-trigger{
  border-color: #b8cecf;
  background: #f4f9f9;
  color: var(--platecraft-brand);
  font-weight: 700;
}
#platecraft-app .platecraft-template-trigger:hover{
  background: #eaf4f3;
  border-color: var(--platecraft-brand-2);
}
#platecraft-app .platecraft-dilution-trigger{
  border-color: #cbd5e1;
  background: #fff;
  color: #334155;
  font-weight: 700;
}
#platecraft-app .platecraft-dilution-trigger:hover{
  background: #f8fafc;
  border-color: #94a3b8;
}