.scwb-v310 {
  --scwb-v310-ink: #17202a;
  --scwb-v310-muted: #5c6873;
  --scwb-v310-border: #cfd8df;
  --scwb-v310-soft: #f4f7f8;
  --scwb-v310-panel: #ffffff;
  --scwb-v310-accent: #7a1020;
  --scwb-v310-accent-dark: #560b17;
  --scwb-v310-ok: #1f6f43;
  --scwb-v310-warn: #925c00;
  --scwb-v310-danger: #a12622;
  color: var(--scwb-v310-ink);
  background: var(--scwb-v310-panel);
  border: 1px solid var(--scwb-v310-border);
  border-radius: 6px;
  font: inherit;
  overflow: hidden;
}
.scwb-v310, .scwb-v310 * { box-sizing: border-box; }
.scwb-v310__header {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: flex-start;
  padding: 28px;
  background: linear-gradient(180deg, #f8fafb 0%, #eef3f5 100%);
  border-bottom: 1px solid var(--scwb-v310-border);
}
.scwb-v310__eyebrow {
  margin: 0 0 8px;
  color: var(--scwb-v310-accent);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.scwb-v310 h2 { margin: 0 0 10px; font-size: clamp(1.55rem, 3vw, 2.2rem); line-height: 1.15; }
.scwb-v310__header p:last-child { max-width: 780px; margin: 0; color: var(--scwb-v310-muted); }
.scwb-v310__status {
  flex: 0 0 auto;
  padding: 8px 11px;
  color: var(--scwb-v310-ok);
  background: #edf8f1;
  border: 1px solid #add2bb;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 800;
}
.scwb-v310__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: end;
  padding: 16px 20px;
  background: #fff;
  border-bottom: 1px solid var(--scwb-v310-border);
}
.scwb-v310__project-select { display: grid; gap: 5px; min-width: min(320px, 100%); margin-right: auto; }
.scwb-v310__project-select span,
.scwb-v310__field > span,
.scwb-v310__filters label > span,
.scwb-v310__revision-controls label > span { color: var(--scwb-v310-muted); font-size: .76rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.scwb-v310 input,
.scwb-v310 select,
.scwb-v310 textarea {
  width: 100%;
  min-height: 42px;
  padding: 9px 11px;
  color: var(--scwb-v310-ink);
  background: #fff;
  border: 1px solid #aebbc4;
  border-radius: 4px;
  font: inherit;
}
.scwb-v310 textarea { min-height: 118px; resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .86rem; line-height: 1.55; }
.scwb-v310 input:focus,
.scwb-v310 select:focus,
.scwb-v310 textarea:focus,
.scwb-v310 button:focus-visible { outline: 3px solid rgba(122, 16, 32, .22); outline-offset: 2px; }
.scwb-v310__button,
.scwb-v310__project-card-actions button,
.scwb-v310__recent button {
  min-height: 42px;
  padding: 9px 14px;
  color: var(--scwb-v310-ink);
  background: #fff;
  border: 1px solid #9eabb4;
  border-radius: 4px;
  font: inherit;
  font-size: .88rem;
  font-weight: 750;
  cursor: pointer;
}
.scwb-v310__button:hover,
.scwb-v310__project-card-actions button:hover,
.scwb-v310__recent button:hover { background: var(--scwb-v310-soft); }
.scwb-v310__button--primary { color: #fff; background: var(--scwb-v310-accent); border-color: var(--scwb-v310-accent); }
.scwb-v310__button--primary:hover { color: #fff; background: var(--scwb-v310-accent-dark); }
.scwb-v310__button:disabled { opacity: .5; cursor: not-allowed; }
.scwb-v310__nav {
  display: flex;
  gap: 0;
  overflow-x: auto;
  background: #202a32;
  border-bottom: 1px solid #11181d;
}
.scwb-v310__tab {
  flex: 0 0 auto;
  min-height: 48px;
  padding: 11px 16px;
  color: #dce5ea;
  background: transparent;
  border: 0;
  border-right: 1px solid #3d4850;
  border-bottom: 3px solid transparent;
  font: inherit;
  font-size: .84rem;
  font-weight: 800;
  cursor: pointer;
}
.scwb-v310__tab:hover { color: #fff; background: #2c3841; }
.scwb-v310__tab.is-active { color: #fff; background: #131b20; border-bottom-color: #e45568; }
.scwb-v310__body { min-height: 420px; }
.scwb-v310__panel { display: none; padding: 24px; }
.scwb-v310__panel.is-active { display: block; }
.scwb-v310__cards,
.scwb-v310__storage-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.scwb-v310__cards article,
.scwb-v310__storage-grid article {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 18px;
  background: var(--scwb-v310-soft);
  border: 1px solid var(--scwb-v310-border);
  border-radius: 5px;
}
.scwb-v310__cards span,
.scwb-v310__storage-grid span { color: var(--scwb-v310-muted); font-size: .87rem; line-height: 1.5; }
.scwb-v310__project-summary {
  display: grid;
  gap: 4px;
  margin-top: 18px;
  padding: 17px 18px;
  background: #fff;
  border: 1px solid var(--scwb-v310-border);
  border-left: 4px solid var(--scwb-v310-accent);
}
.scwb-v310__project-summary span { color: var(--scwb-v310-muted); font-size: .85rem; }
.scwb-v310__recent { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.scwb-v310__recent button { display: grid; gap: 5px; min-height: auto; text-align: left; }
.scwb-v310__recent span { color: var(--scwb-v310-muted); font-size: .74rem; }
.scwb-v310__filters,
.scwb-v310__revision-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(160px, .35fr) auto;
  gap: 12px;
  align-items: end;
  margin-bottom: 18px;
}
.scwb-v310__filters label,
.scwb-v310__revision-controls label { display: grid; gap: 5px; }
.scwb-v310__check { display: inline-flex !important; align-items: center; gap: 8px; color: var(--scwb-v310-muted); font-size: .88rem; }
.scwb-v310__check input { width: auto; min-height: auto; }
.scwb-v310__project-list,
.scwb-v310__revision-list { display: grid; gap: 12px; }
.scwb-v310__project-card,
.scwb-v310__revision-list article {
  display: grid;
  gap: 10px;
  padding: 17px;
  background: #fff;
  border: 1px solid var(--scwb-v310-border);
  border-radius: 5px;
}
.scwb-v310__project-card > div:first-child,
.scwb-v310__revision-list article { grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; }
.scwb-v310__project-card > div:first-child { display: grid; gap: 3px; }
.scwb-v310__project-card span,
.scwb-v310__revision-list span,
.scwb-v310__revision-list time { color: var(--scwb-v310-muted); font-size: .82rem; }
.scwb-v310__project-card p { margin: 0; color: var(--scwb-v310-muted); }
.scwb-v310__project-card-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.scwb-v310__project-card-actions button { min-height: 34px; padding: 6px 10px; }
.scwb-v310__revision-list article.is-server { border-left: 4px solid #2b6e9b; }
.scwb-v310__form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.scwb-v310__field { display: grid; gap: 5px; }
.scwb-v310__field--wide { grid-column: 1 / -1; }
.scwb-v310__save-state { margin-top: 14px; padding: 10px 12px; color: var(--scwb-v310-muted); background: var(--scwb-v310-soft); border: 1px solid var(--scwb-v310-border); font-size: .84rem; }
.scwb-v310[data-scwb-v310-dirty="true"] .scwb-v310__save-state { color: var(--scwb-v310-warn); border-color: #d6b263; background: #fff9e9; }
.scwb-v310__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.scwb-v310__sync-note { padding: 15px; background: var(--scwb-v310-soft); border: 1px solid var(--scwb-v310-border); }
.scwb-v310__sync-result { min-height: 170px; margin: 18px 0 0; padding: 16px; overflow: auto; color: #b7ffba; background: #090d0f; border: 1px solid #202a2f; border-radius: 4px; font-size: .79rem; line-height: 1.5; }
.scwb-v310__notice { padding: 11px 20px; color: var(--scwb-v310-muted); background: #f7f9fa; border-top: 1px solid var(--scwb-v310-border); font-size: .86rem; }
.scwb-v310__notice[data-kind="success"] { color: var(--scwb-v310-ok); background: #eff8f2; }
.scwb-v310__notice[data-kind="warning"] { color: var(--scwb-v310-warn); background: #fff8e8; }
.scwb-v310__notice[data-kind="error"] { color: var(--scwb-v310-danger); background: #fff0ef; }
.scwb-v310__boundary { margin: 0; padding: 14px 20px 18px; color: var(--scwb-v310-muted); background: #f7f9fa; font-size: .8rem; line-height: 1.55; }
.scwb-v310__empty { padding: 20px; color: var(--scwb-v310-muted); text-align: center; background: var(--scwb-v310-soft); border: 1px dashed var(--scwb-v310-border); }
.scwb-v310--compact .scwb-v310__header { padding: 20px; }
.scwb-v310--compact .scwb-v310__panel { padding: 18px; }
@media (max-width: 980px) {
  .scwb-v310__cards,
  .scwb-v310__storage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scwb-v310__recent { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .scwb-v310__header { display: grid; padding: 20px; }
  .scwb-v310__status { justify-self: start; }
  .scwb-v310__toolbar { display: grid; grid-template-columns: 1fr; }
  .scwb-v310__project-select { margin: 0; }
  .scwb-v310__toolbar .scwb-v310__button { width: 100%; }
  .scwb-v310__cards,
  .scwb-v310__storage-grid,
  .scwb-v310__form-grid,
  .scwb-v310__filters,
  .scwb-v310__revision-controls { grid-template-columns: 1fr; }
  .scwb-v310__project-card > div:first-child,
  .scwb-v310__revision-list article { grid-template-columns: 1fr; }
  .scwb-v310__panel { padding: 18px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .scwb-v310 *, .scwb-v310 *::before, .scwb-v310 *::after { scroll-behavior: auto !important; transition: none !important; }
}
