/* Canva-inspired redesign for Etsy Design Studio.
   This stylesheet intentionally leaves all original IDs and workflows intact. */
:root {
  --canva-purple: #7d2ae8;
  --canva-purple-2: #8b3dff;
  --canva-blue: #00c4cc;
  --canva-blue-2: #2b6cff;
  --canva-pink: #ff4b86;
  --canva-orange: #ff6b23;
  --canva-green: #00a86b;
  --canva-ink: #0d121c;
  --canva-text: #14161c;
  --canva-muted: #6b6f7b;
  --canva-soft: #f5f6f8;
  --canva-soft-2: #f0f1f4;
  --canva-line: #e6e7ec;
  --canva-shadow: 0 2px 8px rgba(20, 22, 28, .06), 0 16px 42px rgba(35, 28, 67, .06);
  --canva-shadow-hover: 0 4px 12px rgba(20, 22, 28, .08), 0 24px 52px rgba(61, 35, 109, .12);
  --premium-sidebar-width: 76px;
}

body.dark {
  --canva-ink: #f8f8fb;
  --canva-text: #f5f5fa;
  --canva-muted: #acafba;
  --canva-soft: #17191f;
  --canva-soft-2: #20232b;
  --canva-line: #30343e;
  --premium-bg: #111318;
  --premium-surface: #1b1e25;
  --premium-surface-soft: #20232b;
  --premium-text: #f6f7fb;
  --premium-muted: #a9acb8;
  --premium-line: #30343e;
  --premium-line-strong: #3d424e;
}

html { scroll-padding-top: 96px; }
body {
  overflow-x: hidden;
  background: #fff;
  color: var(--canva-text);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
body.dark { background: #111318; }
body::before { display: none; }

.shell {
  min-height: 100vh;
  margin: 0;
  padding: 16px 18px 52px 92px;
  background: transparent;
}

/* Slim Canva-style navigation rail */
.section-nav.canva-rail {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 120;
  display: flex;
  width: 76px;
  padding: 14px 8px 12px;
  overflow: hidden auto;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  border: 0;
  border-right: 1px solid #ececf1;
  border-radius: 0;
  background: rgba(255, 255, 255, .97);
  box-shadow: 4px 0 18px rgba(18, 20, 29, .035);
  backdrop-filter: blur(20px);
}
body.dark .section-nav.canva-rail {
  border-right-color: #2c3039;
  background: rgba(20, 22, 28, .97);
}
.rail-logo {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0 auto 4px;
  padding: 0;
  color: #6f45bc;
  border: 0;
  border-radius: 12px;
  background: transparent;
  box-shadow: none;
}
.rail-logo:hover:not(:disabled) { background: #f3edff; box-shadow: none; transform: none; }
.rail-logo svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.rail-create {
  display: grid;
  place-items: center;
  gap: 5px;
  width: 60px;
  min-height: 72px;
  margin: 3px auto 5px;
  padding: 7px 3px;
  color: #5b22b7;
  border: 0;
  border-radius: 14px;
  background: transparent;
  box-shadow: none;
  font-size: .67rem;
  font-weight: 730;
}
.rail-create:hover:not(:disabled) { background: #f7f3ff; box-shadow: none; transform: none; }
.rail-create-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  color: #fff;
  border-radius: 50%;
  background: linear-gradient(145deg, #9f4cff, #6f2ce8);
  box-shadow: 0 8px 17px rgba(125, 42, 232, .27);
  font-size: 1.8rem;
  font-weight: 300;
  line-height: 1;
}
.rail-links { display: grid; gap: 3px; }
.section-nav.canva-rail .nav-item {
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
  gap: 4px;
  width: 60px;
  min-height: 66px;
  margin: 0 auto;
  padding: 7px 2px 6px;
  color: #5d527a;
  border: 0;
  border-radius: 13px;
  background: transparent;
  box-shadow: none;
  text-align: center;
}
.section-nav.canva-rail .nav-item:hover:not(:disabled) {
  color: #452087;
  border: 0;
  background: #f7f3ff;
  box-shadow: none;
  transform: none;
}
.section-nav.canva-rail .nav-item.active {
  color: #5d22b8;
  border: 0;
  background: #efe7ff;
  box-shadow: none;
}
.section-nav.canva-rail .nav-icon {
  width: 32px;
  height: 32px;
  color: currentColor;
  border-radius: 9px;
  background: transparent;
  box-shadow: none;
}
.section-nav.canva-rail .nav-item.active .nav-icon {
  color: #6b2ddd;
  background: transparent;
  box-shadow: none;
}
.section-nav.canva-rail .nav-icon svg { width: 22px; height: 22px; }
.section-nav.canva-rail .nav-item > span:last-child,
.section-nav.canva-rail .nav-item strong { display: block; width: 100%; }
.section-nav.canva-rail .nav-item strong {
  overflow: hidden;
  color: currentColor;
  font-size: .61rem;
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.section-nav.canva-rail .nav-item small { display: none; }
.rail-footer { display: grid; place-items: center; gap: 10px; margin-top: auto; padding-top: 10px; }
.rail-footer-button {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  color: #5c4a7e;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
}
.rail-footer-button:hover:not(:disabled) { background: #f1ecfa; box-shadow: none; transform: none; }
.rail-avatar {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, #596fd9, #7451c9);
  box-shadow: 0 7px 16px rgba(91, 80, 191, .2);
  font-size: .72rem;
  font-weight: 850;
}

/* Header appears only inside tool pages; dashboard uses its own hero */
body[data-active-page="dashboard"] .app-header { display: none; }
.app-header {
  top: 10px;
  min-height: 78px;
  margin: 0 0 16px;
  padding: 12px 16px;
  border: 1px solid rgba(225, 226, 233, .9);
  border-radius: 18px;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 7px 28px rgba(24, 26, 35, .055);
  backdrop-filter: blur(22px) saturate(1.15);
}
body.dark .app-header { border-color: #30343e; background: rgba(27, 30, 37, .9); }
.brand-mark {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 13px;
  color: #fff;
  background: linear-gradient(145deg, #00c4cc, #7d2ae8 72%);
  box-shadow: 0 9px 22px rgba(87, 52, 192, .2);
}
.brand-block .eyebrow { color: #7a43cf; font-size: .59rem; letter-spacing: .13em; }
.brand-block h1 { margin-top: 2px; font-size: 1.2rem; letter-spacing: -.035em; }
.brand-block p { margin-top: 2px; font-size: .72rem; }
.topbar-health {
  min-height: 44px;
  border: 1px solid var(--canva-line);
  border-radius: 12px;
  background: var(--premium-surface);
}
.header-actions button { min-height: 38px; border-radius: 10px; }
.mobile-nav-toggle { border-radius: 10px; }

/* Home dashboard */
.canva-dashboard { display: grid; gap: 34px; }
.canva-hero {
  position: relative;
  min-height: 350px;
  padding: 54px 28px 24px;
  overflow: visible;
  border: 0;
  border-radius: 22px;
  background:
    radial-gradient(circle at 94% -24%, rgba(179, 110, 255, .7), transparent 31%),
    radial-gradient(circle at 4% -14%, rgba(77, 226, 227, .53), transparent 34%),
    radial-gradient(circle at 46% 110%, rgba(255,255,255,.82), transparent 46%),
    linear-gradient(118deg, #d5fbf9 0%, #ddecff 40%, #ead9ff 75%, #f3d6ff 100%);
  box-shadow: 0 1px 0 rgba(92, 74, 142, .04), 0 16px 44px rgba(88, 58, 149, .08);
}
.canva-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.02) 65%);
}
.hero-setup-pill {
  position: absolute;
  top: 18px;
  right: 24px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 14px;
  color: #27232f;
  border: 1px solid rgba(127, 75, 206, .25);
  border-radius: 12px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 4px 14px rgba(49, 30, 86, .09);
  font-size: .72rem;
}
.hero-setup-pill strong { font-size: .74rem; }
.setup-progress {
  position: relative;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: conic-gradient(#8f3fff 0 82%, #ede8f7 82% 100%);
}
.setup-progress::after { content:""; position:absolute; inset:4px; border-radius:50%; background:#fff; }
.setup-progress i { position:absolute; inset:0; z-index:1; }
.canva-hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  max-width: 990px;
  margin: 0 auto;
  text-align: center;
}
.canva-hero-kicker {
  margin-bottom: 8px;
  color: rgba(76, 36, 139, .65);
  font-size: .63rem;
  font-weight: 850;
  letter-spacing: .16em;
}
.canva-hero h2 {
  margin: 0 0 22px;
  color: transparent;
  background: linear-gradient(90deg, #2672ce 0%, #384cdb 42%, #8427ef 100%);
  -webkit-background-clip: text;
  background-clip: text;
  font-size: clamp(2rem, 3.15vw, 3rem);
  font-weight: 650;
  letter-spacing: -.055em;
  line-height: 1.02;
}
.canva-command-search {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  width: min(840px, 80vw);
  min-height: 66px;
  padding: 0 16px 0 20px;
  border: 2px solid #8c42ff;
  border-radius: 18px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 12px 30px rgba(98, 42, 198, .13);
  text-align: left;
}
.canva-command-search > svg { width: 24px; height: 24px; color: #13151a; }
.canva-command-search input {
  min-width: 0;
  min-height: 58px;
  padding: 0 12px;
  color: #20222a;
  border: 0;
  background: transparent;
  box-shadow: none;
  font-size: .93rem;
  outline: none;
}
.canva-command-search input:focus { border: 0; box-shadow: none; }
.canva-command-search kbd {
  padding: 5px 8px;
  color: #777180;
  border: 1px solid #e5e0eb;
  border-radius: 7px;
  background: #f8f7fa;
  font-family: inherit;
  font-size: .65rem;
}
.command-suggestions {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 20;
  display: none;
  overflow: hidden;
  border: 1px solid #e6e2ec;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(37, 27, 60, .18);
}
.command-suggestions.visible { display: grid; }
.command-suggestion {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 8px 12px;
  color: #25222b;
  border: 0;
  border-bottom: 1px solid #efedf2;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
  text-align: left;
}
.command-suggestion:last-child { border-bottom: 0; }
.command-suggestion:hover:not(:disabled), .command-suggestion.active { background: #f7f3ff; box-shadow: none; transform: none; }
.command-suggestion-icon { display:grid; place-items:center; width:32px; height:32px; border-radius:9px; color:#fff; background:linear-gradient(145deg,#00c4cc,#7d2ae8); }
.command-suggestion strong { display:block; font-size:.76rem; }
.command-suggestion small { display:block; margin-top:2px; color:#777180; font-size:.66rem; }

.canva-tool-strip {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(14px, 2vw, 31px);
  max-width: 1420px;
  margin: 47px auto 0;
  overflow-x: auto;
  padding: 0 4px 3px;
  scrollbar-width: none;
}
.canva-tool-strip::-webkit-scrollbar { display: none; }
.canva-tool {
  display: grid;
  justify-items: center;
  gap: 8px;
  width: 82px;
  min-width: 82px;
  padding: 0;
  color: #4d4d57;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.canva-tool:hover:not(:disabled) { color: #3d1c78; background: transparent; box-shadow: none; transform: translateY(-3px); }
.canva-tool strong {
  overflow: hidden;
  max-width: 92px;
  font-size: .69rem;
  font-weight: 650;
  line-height: 1.12;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tool-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 8px 18px rgba(44, 32, 72, .12);
}
.tool-icon svg { width: 26px; height: 26px; }
.tool-icon.gradient-purple { background: linear-gradient(145deg,#a147ff,#7328e9); }
.tool-icon.orange { background: linear-gradient(145deg,#ff7d00,#ff4c00); }
.tool-icon.coral { background: linear-gradient(145deg,#ff5d70,#ff304f); }
.tool-icon.pink { background: linear-gradient(145deg,#eb4fff,#d730d8); }
.tool-icon.violet { background: linear-gradient(145deg,#9f32ff,#6c28e9); }
.tool-icon.teal { background: linear-gradient(145deg,#21b8c7,#0795a7); }
.tool-icon.green { background: linear-gradient(145deg,#18ae5f,#008c45); }
.tool-icon.blue { background: linear-gradient(145deg,#36a0ff,#1776e8); }
.tool-icon.indigo { background: linear-gradient(145deg,#6257ff,#4335de); }
.tool-icon.neutral { color:#1c1d22; background:#f0f1f3; box-shadow: inset 0 0 0 1px #e8e9ed; }

.recent-workspace { padding: 0 16px; }
.recent-heading-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}
.recent-eyebrow { color: #8a45d2; font-size: .61rem; font-weight: 850; letter-spacing: .14em; }
.recent-heading-row h2 { margin: 4px 0 0; color: #18191f; font-size: 1.45rem; letter-spacing: -.036em; }
body.dark .recent-heading-row h2 { color: #f7f7fb; }
.recent-controls { display: flex; align-items: center; gap: 8px; }
.recent-filter, .recent-view {
  min-height: 39px;
  padding: 0 14px;
  color: #282830;
  border: 1px solid #dedbe6;
  border-radius: 999px;
  background: #fff;
  box-shadow: none;
  font-size: .72rem;
  font-weight: 620;
}
.recent-filter:hover:not(:disabled), .recent-view:hover:not(:disabled) { border-color:#bb9aec; background:#faf7ff; box-shadow:none; transform:none; }
.recent-filter span { margin-left: 8px; }
.recent-view { display:grid; place-items:center; width:39px; padding:0; border-color:transparent; }
.recent-view.active { color:#6d2bd0; background:#f1eaff; }
.recent-view svg { width:19px; height:19px; }
.recent-project-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(210px, 1fr));
  gap: 24px 18px;
}
.project-tile {
  display: grid;
  min-width: 0;
  padding: 0;
  color: inherit;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-align: left;
}
.project-tile:hover:not(:disabled) { background: transparent; box-shadow: none; transform: translateY(-3px); }
.project-preview {
  position: relative;
  display: block;
  aspect-ratio: 1.55 / 1;
  overflow: hidden;
  border: 1px solid #ececf0;
  border-radius: 11px;
  background: #f0f1f3;
  box-shadow: 0 1px 2px rgba(18,20,26,.04);
  transition: box-shadow .18s ease, border-color .18s ease;
}
.project-tile:hover .project-preview { border-color:#d8c9ef; box-shadow:0 13px 30px rgba(42, 28, 70, .12); }
.preview-private {
  position: absolute;
  top: 9px;
  left: 9px;
  z-index: 4;
  padding: 3px 8px;
  color: #fff;
  border-radius: 5px;
  background: rgba(35,35,42,.68);
  font-size: .56rem;
  font-weight: 750;
  backdrop-filter: blur(6px);
}
.project-meta { display: grid; gap: 4px; padding: 10px 2px 0; }
.project-meta strong { overflow:hidden; color:#25262c; font-size:.8rem; font-weight:760; text-overflow:ellipsis; white-space:nowrap; }
body.dark .project-meta strong { color:#f4f4f8; }
.project-meta small { overflow:hidden; color:#777983; font-size:.66rem; text-overflow:ellipsis; white-space:nowrap; }
.meta-dot { display:inline-block; width:9px; height:9px; margin-right:5px; border-radius:3px; vertical-align:-1px; }
.meta-dot.purple{background:#8136e9}.meta-dot.teal{background:#00aeb8}.meta-dot.blue{background:#2c7cf1}.meta-dot.coral{background:#ff526c}.meta-dot.pink{background:#e743dd}.meta-dot.orange{background:#ff7417}.meta-dot.green{background:#00a66a}.meta-dot.indigo{background:#5a4fea}

/* Dashboard card art */
.preview-automation { background: linear-gradient(145deg,#eef8ff,#f1eaff); }
.flow-node { position:absolute; display:grid; place-items:center; width:48px; height:48px; border-radius:13px; color:#fff; font-style:normal; font-size:.65rem; font-weight:850; box-shadow:0 10px 24px rgba(75,43,135,.2); }
.flow-node.n1{left:14%;top:42%;background:#00aeb8}.flow-node.n2{left:42%;top:26%;background:#8a37ef}.flow-node.n3{right:13%;top:49%;background:#316be9}.flow-line{position:absolute;height:3px;border-radius:99px;background:linear-gradient(90deg,#54bbc5,#8851df);transform-origin:left center}.flow-line.l1{left:29%;top:51%;width:22%;transform:rotate(-14deg)}.flow-line.l2{left:56%;top:48%;width:21%;transform:rotate(15deg)}
.preview-research { background: linear-gradient(155deg,#fff7ed,#ffe8d4); }
.chart-title{position:absolute;left:14px;bottom:15px;color:#723a12;font-size:.62rem;font-weight:800}.mini-chart{position:absolute;inset:34px 20px 36px;display:flex;align-items:flex-end;gap:7px}.mini-chart i{flex:1;border-radius:5px 5px 1px 1px;background:linear-gradient(180deg,#ff873e,#ff5b20)}.chart-number{position:absolute;right:17px;bottom:12px;color:#e64f12;font-size:1.05rem;font-weight:900}
.preview-extract { background: #f4f2ef; }
.listing-photo{position:absolute;left:8%;top:20%;width:39%;height:67%;border-radius:9px;background:radial-gradient(circle at 50% 35%,#ffd8b7 0 12%,transparent 13%),linear-gradient(150deg,#c6f2e4,#7fd3bd);box-shadow:0 8px 20px rgba(49,75,66,.15)}
.listing-lines{position:absolute;left:52%;right:8%;top:27%;display:grid;gap:8px}.listing-lines i{height:7px;border-radius:99px;background:#d6d2ce}.listing-lines i:nth-child(2){width:78%}.listing-lines i:nth-child(3){width:58%}.listing-lines b{margin-top:4px;color:#333;font-size:.82rem}
.preview-seo{background:linear-gradient(145deg,#eef6ff,#f4f1ff)}.seo-paper{position:absolute;inset:20px 12%;padding:20px 18px;border-radius:8px;background:#fff;box-shadow:0 12px 28px rgba(49,42,77,.13)}.seo-paper b{display:block;margin-bottom:12px;color:#262331;font-size:.67rem}.seo-paper i{display:block;height:6px;margin:7px 0;border-radius:99px;background:#e3e0e8}.seo-paper i:nth-child(3){width:82%}.seo-paper i:nth-child(4){width:64%}.seo-paper span{position:absolute;left:18px;bottom:14px;color:#6e37c0;font-size:.55rem;font-weight:750}
.preview-images{background:#edecef}.image-mosaic{position:absolute;inset:18px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:5px}.image-mosaic i{border-radius:6px;background:linear-gradient(145deg,#f8c8a5,#d88770)}.image-mosaic i:nth-child(2){background:linear-gradient(145deg,#b7e3dc,#6ab2a7)}.image-mosaic i:nth-child(3){background:linear-gradient(145deg,#ded0fa,#9b79d9)}.image-mosaic i:nth-child(4){background:linear-gradient(145deg,#f5e4a9,#cdb35f)}.image-count{position:absolute;right:14px;bottom:12px;display:grid;place-items:center;width:44px;height:30px;color:#fff;border-radius:8px;background:rgba(23,22,29,.72);font-size:.65rem;font-weight:850}
.preview-competitors{background:linear-gradient(150deg,#fff1f4,#f4e8ff)}.competitor-grid{position:absolute;inset:22px 24px 34px;display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.competitor-grid i{border-radius:6px;background:linear-gradient(145deg,#f5b2bc,#d87085)}.competitor-grid i:nth-child(2),.competitor-grid i:nth-child(5){background:linear-gradient(145deg,#d8c4ff,#9277d9)}.competitor-grid i:nth-child(3){background:linear-gradient(145deg,#f4d79a,#cf9f4e)}.competitor-grid i:nth-child(4){background:linear-gradient(145deg,#bce9df,#6cbcad)}.competitor-grid i:nth-child(6){background:linear-gradient(145deg,#bad9f3,#679ac8)}.winner-badge{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);padding:4px 9px;color:#6c248c;border-radius:99px;background:#fff;font-size:.54rem;font-weight:800;white-space:nowrap;box-shadow:0 4px 12px rgba(77,42,99,.12)}
.preview-export{background:#f3f4f6}.folder-shape{position:absolute;inset:35px 20px 15px;border-radius:10px;background:#e7e9ee}.folder-shape::before{content:"";position:absolute;left:0;top:-14px;width:44%;height:22px;border-radius:9px 9px 0 0;background:#e7e9ee}.download-cloud{position:absolute;inset:0;display:grid;place-items:center;color:#5a5f6a}.download-cloud svg{width:46px;height:46px}
.preview-deploy{background:radial-gradient(circle at 50% 42%,#7969ff 0 7%,transparent 8%),radial-gradient(circle at 50% 42%,rgba(115,84,255,.22) 0 25%,transparent 26%),linear-gradient(145deg,#e7f8ff,#eee7ff)}.deploy-orb{position:absolute;inset:0;display:grid;place-content:center;text-align:center}.deploy-orb i{width:58px;height:58px;margin:0 auto 8px;border-radius:18px;background:linear-gradient(145deg,#00c4cc,#7d2ae8);box-shadow:0 15px 30px rgba(77,48,166,.25)}.deploy-orb b{color:#30265c;font-size:.7rem}.deploy-orb small{margin-top:3px;color:#6f6885;font-size:.56rem}

/* Hide old dashboard-only strips to keep the cleaner Canva home composition */
body[data-active-page="dashboard"] #dashboardStatusBar,
body[data-active-page="dashboard"] #overviewStrip,
body[data-active-page="dashboard"] #workflowProgress { display: none !important; }

/* Tool pages */
.layout { display: block; width: 100%; }
.layout > main { width: 100%; }
.workspace-section-heading {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  max-width: 1300px;
  margin: 20px auto 10px;
  padding: 0 6px;
}
.workspace-section-heading .section-kicker {
  display: inline-grid;
  place-items: center;
  min-width: 72px;
  min-height: 27px;
  padding: 4px 8px;
  color: #7429cb;
  border: 1px solid #e2d2fa;
  border-radius: 999px;
  background: #f6f0ff;
  font-size: .55rem;
  letter-spacing: .08em;
}
.workspace-section-heading h2 { margin: 1px 0 3px; color: var(--canva-text); font-size: 1.3rem; letter-spacing: -.035em; }
.workspace-section-heading p { color: var(--canva-muted); font-size: .78rem; line-height: 1.55; }
.card {
  max-width: 1300px;
  margin: 0 auto 16px;
  padding: 21px;
  border: 1px solid var(--canva-line);
  border-radius: 18px;
  background: var(--premium-surface);
  box-shadow: 0 1px 2px rgba(20,22,28,.025), 0 10px 30px rgba(31,33,45,.045);
}
.card:hover { border-color: color-mix(in srgb, var(--canva-line) 70%, #9b62e5); box-shadow: 0 2px 6px rgba(20,22,28,.03), 0 14px 34px rgba(56,36,88,.06); }
.card::after { display: none; }
.card[data-premium-label]::before {
  display: inline-flex;
  width: auto;
  height: auto;
  margin-bottom: 13px;
  padding: 4px 8px;
  color: #7640be;
  border: 1px solid #eadffc;
  border-radius: 999px;
  background: #faf7ff;
  content: attr(data-premium-label);
  font-size: .56rem;
  font-weight: 800;
  letter-spacing: .055em;
  text-transform: uppercase;
}
.card h2 { color: var(--canva-text); font-size: 1.08rem; }
.card h3 { color: var(--canva-text); }
.notice, .status, .helper-note {
  border-radius: 12px;
  font-size: .74rem;
  line-height: 1.55;
}
.status.good { border-color: #bcebd9; background:#f0fbf7; }
.status.warn { border-color: #f0d5a9; background:#fff9ee; }
body.dark .status.good { background:#17342b; }
body.dark .status.warn { background:#3a2d17; }

button, .button-like, input, select, textarea { font-family: inherit; }
button {
  min-height: 39px;
  padding: 9px 14px;
  border-radius: 10px;
  background: linear-gradient(145deg, #8b3dff, #7128db);
  box-shadow: 0 5px 12px rgba(125,42,232,.15);
  font-size: .72rem;
  font-weight: 720;
}
button:hover:not(:disabled) { box-shadow: 0 8px 17px rgba(125,42,232,.21); transform: translateY(-1px); }
button.secondary, button.ghost {
  color: #34323b;
  border: 1px solid #dedbe4;
  background: #fff;
  box-shadow: none;
}
body.dark button.secondary, body.dark button.ghost { color:#f4f4f7; border-color:#3c414d; background:#24272f; }
button.secondary:hover:not(:disabled), button.ghost:hover:not(:disabled) { border-color:#b48be8; background:#faf7ff; box-shadow:none; }
input, select, textarea {
  min-height: 42px;
  color: var(--canva-text);
  border: 1px solid #dddde4;
  border-radius: 10px;
  background: var(--premium-surface);
  box-shadow: 0 1px 2px rgba(20,22,28,.025);
  font-size: .75rem;
}
input:focus, select:focus, textarea:focus {
  border-color: #8c42ff;
  box-shadow: 0 0 0 3px rgba(140,66,255,.11);
  outline: none;
}
label { color:#43444d; font-size:.69rem; font-weight:720; }
body.dark label { color:#d7d8de; }
.table-wrap { border: 1px solid var(--canva-line); border-radius: 13px; }
table { font-size: .72rem; }
th { color:#5d5e68; background:var(--canva-soft); font-size:.6rem; }
td { border-color:var(--canva-line); }
tr:hover td { background:#faf8ff; }
body.dark tr:hover td { background:#24252e; }

.csv-drop-grid, .reference-upload-grid { gap: 12px; }
.file-drop, .drop-zone, .upload-zone {
  border: 1.5px dashed #cfc5df;
  border-radius: 14px;
  background: linear-gradient(145deg,#fbfaff,#f7f9ff);
}
body.dark .file-drop, body.dark .drop-zone, body.dark .upload-zone { background:#20232b; }
.listing-type-card { border-radius: 14px; }
.listing-type-card.selected { border-color:#8b3dff; box-shadow:0 0 0 3px rgba(139,61,255,.1); }
.approval-panel, .reference-examples-panel, .workflow-choice-panel, .subpanel {
  border: 1px solid var(--canva-line);
  border-radius: 15px;
  background: var(--canva-soft);
}

.seo-workspace-grid {
  max-width: 1300px;
  margin: 0 auto 16px;
  grid-template-columns: minmax(320px, .9fr) minmax(440px, 1.1fr);
  gap: 16px;
}
.seo-workspace-grid > .card { max-width:none; width:100%; }
.results-card { position:relative; }
.copybox { border-radius:10px; background:var(--canva-soft); }
details { border-color:var(--canva-line); border-radius:12px; }
summary { background:var(--canva-soft); }

footer {
  max-width: 1300px;
  margin: 28px auto 0;
  padding: 18px 20px;
  color: var(--canva-muted);
  border: 1px solid var(--canva-line);
  border-radius: 14px;
  background: var(--premium-surface);
  font-size: .67rem;
}
body[data-active-page="dashboard"] footer { display:none; }

/* Dashboard help bubble */
body[data-active-page="dashboard"]::after {
  content: "?";
  position: fixed;
  right: 20px;
  bottom: 18px;
  z-index: 90;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  color: #fff;
  border-radius: 50%;
  background: linear-gradient(145deg,#9b40ff,#7327e7);
  box-shadow: 0 11px 24px rgba(111,39,222,.3);
  font-size: 1.2rem;
  font-weight: 800;
}

/* Responsive behavior */
@media (max-width: 1280px) {
  .canva-tool-strip { justify-content: flex-start; }
  .recent-project-grid { grid-template-columns: repeat(3, minmax(210px, 1fr)); }
  .seo-workspace-grid { grid-template-columns: 1fr; }
}
@media (max-width: 980px) {
  .shell { padding-left: 82px; padding-right: 12px; }
  .canva-hero { min-height: 335px; padding-left:20px; padding-right:20px; }
  .canva-command-search { width:min(760px,88vw); }
  .recent-project-grid { grid-template-columns: repeat(2, minmax(210px, 1fr)); }
  .topbar-health { display:none; }
}
@media (max-width: 720px) {
  :root { --premium-sidebar-width: 0px; }
  .shell { padding: 10px 10px 80px; }
  .section-nav.canva-rail {
    inset: auto 8px 8px;
    width: auto;
    height: 66px;
    padding: 5px 6px;
    overflow-x: auto;
    overflow-y: hidden;
    flex-direction: row;
    justify-content: flex-start;
    border: 1px solid #e7e7ec;
    border-radius: 18px;
    box-shadow:0 12px 35px rgba(29,25,41,.18);
  }
  .rail-logo, .rail-create, .rail-footer { display:none; }
  .rail-links { display:flex; gap:2px; }
  .section-nav.canva-rail .nav-item { width:58px; min-width:58px; min-height:54px; padding:4px 2px; }
  .section-nav.canva-rail .nav-icon { width:27px; height:27px; }
  .section-nav.canva-rail .nav-icon svg { width:19px; height:19px; }
  .section-nav.canva-rail .nav-item strong { font-size:.54rem; }
  body[data-active-page="dashboard"] .app-header { display:none; }
  .app-header { top:6px; min-height:68px; border-radius:15px; }
  .brand-block p, .brand-block .eyebrow, .header-actions #loadButton, .header-actions #resetButton { display:none; }
  .canva-hero { min-height: 400px; padding:54px 12px 22px; border-radius:18px; }
  .hero-setup-pill { top:12px; right:12px; min-height:38px; }
  .canva-hero h2 { max-width:310px; font-size:2.15rem; }
  .canva-command-search { width:100%; min-height:58px; grid-template-columns:25px minmax(0,1fr); }
  .canva-command-search input { min-height:52px; font-size:.82rem; }
  .canva-command-search kbd { display:none; }
  .canva-tool-strip { margin-top:35px; gap:12px; justify-content:flex-start; }
  .canva-tool { width:70px; min-width:70px; }
  .tool-icon { width:48px; height:48px; }
  .recent-workspace { padding:0 2px; }
  .recent-heading-row { align-items:flex-start; }
  .recent-controls .recent-filter { display:none; }
  .recent-project-grid { grid-template-columns: 1fr 1fr; gap:18px 10px; }
  .project-meta strong { font-size:.7rem; }
  .workspace-section-heading { margin-top:14px; }
  .workspace-section-heading .section-kicker { display:none; }
  .card { padding:15px; border-radius:15px; }
  .two, .three, .csv-drop-grid, .reference-upload-grid { grid-template-columns:1fr !important; }
  body[data-active-page="dashboard"]::after { bottom:82px; right:14px; width:42px; height:42px; }
}
@media (max-width: 480px) {
  .canva-hero { min-height:380px; }
  .canva-hero h2 { font-size:1.82rem; }
  .canva-hero-kicker { font-size:.55rem; }
  .canva-tool-strip { margin-top:28px; }
  .recent-heading-row h2 { font-size:1.15rem; }
  .recent-project-grid { grid-template-columns:1fr; }
  .project-preview { aspect-ratio:1.65/1; }
}
.canva-focus-pulse { animation: canvaFocusPulse 1.2s ease; }
@keyframes canvaFocusPulse {
  0%,100% { box-shadow: 0 1px 2px rgba(20,22,28,.025), 0 10px 30px rgba(31,33,45,.045); }
  40% { box-shadow: 0 0 0 5px rgba(139,61,255,.15), 0 18px 44px rgba(91,48,153,.13); }
}
/* Final readability and inherited-style resets */
.brand-block h1 { color: var(--canva-text) !important; }
.brand-block p, .muted, .helper-note, .card p, .card small { color: var(--canva-muted); }
.card[data-premium-label]::before {
  position: static;
  inset: auto;
  width: auto;
  min-width: 0;
  opacity: 1;
  vertical-align: top;
}
.automation-card { border-top-width: 1px; background: var(--premium-surface); }
.automation-header { margin: 0 0 16px; }