@indinno/digicode-ui 0.1.0 → 0.1.1

package/dist/styles.css

@@ -0,0 +1,1496 @@
+:root {
+  --dc-ink: #1c2f41;
+  --dc-heading: #12212e;
+  --dc-muted: #60707e;
+  --dc-blue: #2474ad;
+  --dc-line: #e7ecef;
+  --dc-surface: #f4f7f9;
+  --dc-ease-out: cubic-bezier(0.19, 1, 0.22, 1);
+}
+
+.dc-button,
+.dc-input {
+  font: inherit;
+}
+
+.dc-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 13px;
+  min-height: 49px;
+  padding: 12px 24px;
+  border: 1px solid transparent;
+  border-radius: 12px;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 24px;
+  white-space: nowrap;
+  cursor: pointer;
+  text-decoration: none;
+  transition:
+    background 0.2s,
+    box-shadow 0.2s,
+    color 0.2s;
+}
+
+.dc-button:disabled {
+  cursor: wait;
+  opacity: 0.65;
+}
+
+.dc-button--dark {
+  color: #fff;
+  background: var(--dc-ink);
+  box-shadow:
+    inset 0 1px 1px #ffffff20,
+    0 1px 2px #14283d14;
+}
+
+.dc-button--dark:hover {
+  background: #284458;
+  box-shadow: 0 4px 12px #1c2f4120;
+}
+
+.dc-button--light {
+  color: var(--dc-ink);
+  background: #fff;
+  box-shadow: 0 2px 5px #14395208;
+}
+
+.dc-button--light:hover {
+  background: #f8fcff;
+}
+
+.dc-button--text {
+  min-height: 42px;
+  padding-inline: 0;
+  color: var(--dc-ink);
+  background: transparent;
+  border-radius: 0;
+}
+
+.dc-button--text:hover {
+  color: #236b9e;
+}
+
+.dc-button-label {
+  position: relative;
+  display: block;
+  height: 24px;
+  overflow: hidden;
+}
+
+.dc-button-label > span {
+  display: block;
+  transition: transform 1.125s var(--dc-ease-out);
+}
+
+.dc-button-label > span + span {
+  position: absolute;
+  inset: 0;
+  transform: translateY(110%);
+}
+
+.dc-button:hover .dc-button-label > span:first-child {
+  transform: translateY(-110%);
+}
+
+.dc-button:hover .dc-button-label > span + span {
+  transform: translateY(0);
+}
+
+.dc-button > svg {
+  transition: transform 0.3s var(--dc-ease-out);
+}
+
+.dc-button:hover > svg {
+  transform: translate(2px, -2px);
+}
+
+.dc-brand {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  color: var(--dc-ink);
+  line-height: 1;
+}
+
+.dc-brand-mark {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 39px;
+  height: 39px;
+  color: #fff;
+  background: #276f9f;
+  border-radius: 11px;
+  box-shadow:
+    inset 0 1px 1px #ffffff70,
+    0 2px 3px #173f5b16;
+  transform: rotate(-5deg);
+}
+
+.dc-brand-mark svg {
+  width: 26px;
+  height: 26px;
+  transform: rotate(5deg);
+}
+
+.dc-brand-type {
+  display: block;
+  font-weight: 650;
+  font-size: 24px;
+}
+
+.dc-brand-subtitle {
+  display: block;
+  margin-top: 6px;
+  color: #70818d;
+  font-size: 8px;
+  font-weight: 600;
+}
+
+.dc-brand--compact {
+  gap: 6px;
+}
+
+.dc-brand--compact .dc-brand-mark {
+  width: 24px;
+  height: 24px;
+  border-radius: 7px;
+}
+
+.dc-brand--compact .dc-brand-mark svg {
+  width: 17px;
+  height: 17px;
+}
+
+.dc-brand--compact .dc-brand-type {
+  font-size: 17px;
+}
+
+.dc-brand--compact .dc-brand-subtitle {
+  margin-top: 3px;
+  font-size: 5px;
+}
+
+.dc-eyebrow {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  margin: 0 0 19px;
+  color: #687985;
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.dc-eyebrow > span {
+  display: block;
+  width: 6px;
+  height: 6px;
+  background: #5c9ec7;
+  border-radius: 50%;
+  box-shadow: 0 0 0 4px #edf5fa;
+}
+
+.dc-section-heading {
+  display: flex;
+  align-items: end;
+  justify-content: space-between;
+  gap: 30px;
+  margin-bottom: 45px;
+}
+
+.dc-section-heading h2 {
+  margin: 0;
+  color: var(--dc-heading);
+  font-size: 43px;
+  font-weight: 600;
+  line-height: 1.22;
+}
+
+.dc-section-description {
+  max-width: 580px;
+  margin: 18px 0 0;
+  color: var(--dc-muted);
+}
+
+.dc-section-heading--center {
+  justify-content: center;
+  text-align: center;
+}
+
+.dc-section-heading--center .dc-eyebrow {
+  justify-content: center;
+}
+
+.dc-section-heading--center .dc-section-description {
+  margin-inline: auto;
+}
+
+.dc-section-heading-aside {
+  flex-shrink: 0;
+  padding-bottom: 3px;
+}
+
+.dc-field {
+  display: grid;
+  gap: 8px;
+  color: var(--dc-ink);
+}
+
+.dc-field-label {
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.dc-field-label > span {
+  color: #aa544a;
+}
+
+.dc-input {
+  width: 100%;
+  min-height: 52px;
+  padding: 13px 14px;
+  color: var(--dc-ink);
+  background: #f9fbfc;
+  border: 1px solid #dfe7ec;
+  border-radius: 10px;
+  outline: none;
+  transition:
+    border-color 0.2s,
+    background 0.2s,
+    box-shadow 0.2s;
+}
+
+.dc-input:hover,
+.dc-input:focus,
+.dc-input:focus-visible {
+  background: #fff;
+  border-color: #b7d1e2;
+  box-shadow: 0 0 0 4px #d8ecf750;
+}
+
+.dc-textarea {
+  min-height: 128px;
+  resize: vertical;
+}
+
+.dc-button[data-corners],
+.dc-input[data-corners] {
+  --dc-control-radius: 4px;
+  --dc-menu-radius: 4px;
+  --dc-option-radius: 2px;
+  border-radius: var(--dc-control-radius);
+}
+
+:is(.dc-button, .dc-input)[data-corners="square"] {
+  --dc-control-radius: 0px;
+  --dc-menu-radius: 0px;
+  --dc-option-radius: 0px;
+}
+
+:is(.dc-button, .dc-input)[data-corners="rounded"] {
+  --dc-control-radius: 10px;
+  --dc-menu-radius: 10px;
+  --dc-option-radius: 6px;
+}
+
+:is(.dc-button, .dc-input)[data-corners="pill"] {
+  --dc-control-radius: 999px;
+  --dc-menu-radius: 16px;
+  --dc-option-radius: 999px;
+}
+
+.dc-textarea[data-corners="pill"] {
+  border-radius: 24px;
+}
+
+.dc-select {
+  appearance: none;
+  padding-right: 44px;
+  cursor: pointer;
+  background-image:
+    linear-gradient(45deg, transparent 50%, #6b7a86 50%),
+    linear-gradient(135deg, #6b7a86 50%, transparent 50%);
+  background-position:
+    calc(100% - 18px) 50%,
+    calc(100% - 13px) 50%;
+  background-size:
+    5px 5px,
+    5px 5px;
+  background-repeat: no-repeat;
+}
+
+.dc-select:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+  box-shadow: none;
+}
+
+/* Keep native form, keyboard, and touch behavior; enhance supported pickers. */
+@supports (appearance: base-select) {
+  .dc-select:not([multiple]):not([size]),
+  .dc-select:not([multiple]):not([size])::picker(select) {
+    appearance: base-select;
+  }
+
+  .dc-select:not([multiple]):not([size]) {
+    align-items: center;
+    padding-right: 14px;
+    background-image: none;
+  }
+
+  .dc-select::picker-icon {
+    color: var(--dc-muted);
+    transition: rotate 200ms ease;
+  }
+
+  .dc-select:open::picker-icon {
+    rotate: 180deg;
+  }
+
+  .dc-select::picker(select) {
+    box-sizing: border-box;
+    margin-block: 8px;
+    padding: 6px;
+    max-height: min(320px, 50dvh);
+    overflow-y: auto;
+    color: var(--dc-ink);
+    background: #fff;
+    border: 1px solid #dfe7ec;
+    border-radius: var(--dc-menu-radius, 4px);
+    box-shadow: 0 14px 36px #1c2f411a, 0 3px 8px #1c2f4108;
+    opacity: 0;
+    transform: translateY(-4px);
+    transition: opacity 180ms ease, transform 180ms ease,
+      display 180ms allow-discrete, overlay 180ms allow-discrete;
+  }
+
+  .dc-select:open::picker(select) {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  @starting-style {
+    .dc-select:open::picker(select) {
+      opacity: 0;
+      transform: translateY(-4px);
+    }
+  }
+
+  .dc-select option {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    min-height: 44px;
+    padding: 10px 12px;
+    border-radius: var(--dc-option-radius, 2px);
+    cursor: pointer;
+    transition: background 140ms ease, color 140ms ease;
+  }
+
+  .dc-select option:checked {
+    color: #20658f;
+    background: #edf6fc;
+    font-weight: 600;
+  }
+
+  .dc-select option:hover,
+  .dc-select option:focus-visible {
+    background: #e2eff8;
+    outline: 2px solid #b7d1e2;
+    outline-offset: -2px;
+  }
+
+  .dc-select option::checkmark {
+    order: 1;
+    margin-left: auto;
+    color: var(--dc-blue);
+  }
+
+  .dc-select option:disabled {
+    color: #8d9aa4;
+    background: transparent;
+    cursor: not-allowed;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .dc-select::picker(select),
+  .dc-select::picker-icon,
+  .dc-select option {
+    transition: none;
+  }
+}
+
+.dc-field-hint {
+  color: var(--dc-muted);
+  font-size: 12px;
+}
+
+.dc-service-card {
+  background: linear-gradient(#f1f5f8, #fff);
+  border: 1px solid #e8edf0;
+  border-radius: 17px;
+  padding: 10px;
+  transition:
+    box-shadow 0.3s,
+    transform 0.3s;
+}
+
+.dc-service-card:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 10px 30px #1c2f4108;
+}
+
+.dc-service-card-content {
+  position: relative;
+  padding: 26px 21px 13px;
+}
+
+.dc-card-eyebrow {
+  color: #7b8a95;
+  font-size: 9px;
+  font-weight: 600;
+}
+
+.dc-service-card h3,
+.dc-product-card h3 {
+  margin: 9px 0 0;
+  color: var(--dc-heading);
+  font-size: 20px;
+  line-height: 1.4;
+}
+
+.dc-service-card p,
+.dc-product-card p {
+  margin: 12px 0 0;
+  color: var(--dc-muted);
+  font-size: 14px;
+}
+
+.dc-service-scope,
+.dc-feature-list {
+  display: grid;
+  gap: 8px;
+  margin: 18px 0;
+  padding: 0;
+  color: #455d70;
+  font-size: 13px;
+  line-height: 1.55;
+  list-style: none;
+}
+
+.dc-service-scope li,
+.dc-feature-list li {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+}
+
+.dc-service-scope svg,
+.dc-feature-list svg {
+  flex-shrink: 0;
+  margin-top: 3px;
+  color: #287663;
+}
+
+.dc-service-visual {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 258px;
+  overflow: hidden;
+  background: #eef6fb;
+  border-radius: 11px;
+}
+
+.dc-visual-grid,
+.dc-product-preview-grid {
+  position: absolute;
+  inset: 0;
+  background-image:
+    linear-gradient(#ffffff60 1px, transparent 1px),
+    linear-gradient(90deg, #ffffff60 1px, transparent 1px);
+  background-size: 32px 32px;
+  mask-image: radial-gradient(ellipse, #000, transparent 90%);
+}
+
+.dc-workflow-node {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 78%;
+  padding: 12px 14px;
+  background: #fff;
+  border: 1px solid #e7edef;
+  border-radius: 8px;
+  box-shadow: 0 5px 15px #193c4f10;
+}
+
+.dc-workflow-node b,
+.dc-store-notification b,
+.dc-extracted-card b {
+  display: block;
+  font-size: 9px;
+  font-weight: 500;
+}
+
+.dc-workflow-node small,
+.dc-store-notification small {
+  display: block;
+  color: #98a8b3;
+  font-size: 7px;
+}
+
+.dc-app-icon {
+  display: grid;
+  place-items: center;
+  width: 31px;
+  height: 31px;
+  color: #fff;
+  border-radius: 7px;
+}
+
+.dc-app-icon svg {
+  width: 18px;
+  height: 18px;
+}
+
+.dc-app-icon--green {
+  background: #25886a;
+}
+
+.dc-app-icon--blue {
+  background: #377ed2;
+}
+
+.dc-automation-visual {
+  flex-direction: column;
+  gap: 0;
+}
+
+.dc-workflow-connector {
+  display: grid;
+  place-items: center;
+  color: #8aa5b7;
+}
+
+.dc-workflow-connector span {
+  display: block;
+  width: 1px;
+  height: 17px;
+  background: #cfdde6;
+}
+
+.dc-workflow-branch {
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  width: 44%;
+  height: 13px;
+  margin-top: 13px;
+  border-top: 1px solid #cfdde6;
+}
+
+.dc-workflow-branch::before {
+  position: absolute;
+  top: -13px;
+  left: 50%;
+  width: 1px;
+  height: 13px;
+  background: #cfdde6;
+  content: "";
+}
+
+.dc-workflow-branch > span {
+  width: 1px;
+  height: 20px;
+  background: #cfdde6;
+}
+
+.dc-workflow-outputs {
+  position: relative;
+  display: flex;
+  gap: 19px;
+}
+
+.dc-workflow-outputs > span {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  padding: 10px 15px;
+  background: #fff;
+  border: 1px solid #e7edef;
+  border-radius: 6px;
+  font-size: 8px;
+}
+
+.dc-automation-toast {
+  position: absolute;
+  right: 17px;
+  bottom: 13px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 7px 10px;
+  background: #fff;
+  border: 1px solid #eaf0ed;
+  border-radius: 6px;
+  box-shadow: 0 5px 15px #193c4f10;
+  font-size: 7px;
+  transform: rotate(-3deg);
+  animation: dc-float 7s ease-in-out infinite;
+}
+
+.dc-store-visual {
+  background: #fdfefd;
+}
+
+.dc-store-browser {
+  width: 83%;
+  overflow: hidden;
+  background: #fff;
+  border: 1px solid #e4eaed;
+  border-radius: 9px;
+  box-shadow: 0 9px 25px #1b39400b;
+  transform: rotate(-3deg);
+}
+
+.dc-browser-bar,
+.dc-preview-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: #aab6bc;
+  border-bottom: 1px solid #eaf0f3;
+}
+
+.dc-browser-bar {
+  padding: 7px 10px;
+  background: #fafcfd;
+}
+
+.dc-browser-bar > span,
+.dc-preview-toolbar > span {
+  display: flex;
+  gap: 3px;
+}
+
+.dc-browser-bar i,
+.dc-preview-toolbar i {
+  display: block;
+  width: 4px;
+  height: 4px;
+  background: #dbe2e7;
+  border-radius: 50%;
+}
+
+.dc-browser-bar small,
+.dc-preview-toolbar small {
+  font-size: 6px;
+}
+
+.dc-store-nav {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 11px 17px;
+}
+
+.dc-store-nav > b {
+  color: #3b514b;
+  font-family: Georgia, serif;
+  font-size: 16px;
+}
+
+.dc-store-nav > span,
+.dc-store-content p,
+.dc-store-bottom {
+  color: #8f9994;
+  font-size: 6px;
+}
+
+.dc-store-content {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  align-items: center;
+  gap: 7px;
+  padding: 0 15px;
+}
+
+.dc-store-content small {
+  color: #9aab98;
+  font-size: 5px;
+}
+
+.dc-store-content strong {
+  display: block;
+  margin: 5px 0;
+  color: #425c4e;
+  font-family: Georgia, serif;
+  font-size: 24px;
+  font-weight: 400;
+  line-height: 1.15;
+}
+
+.dc-store-cta {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  margin-top: 10px;
+  padding: 6px 9px;
+  color: #fff;
+  background: #4e6b5e;
+  border-radius: 3px;
+  font-size: 6px;
+}
+
+.dc-store-photo {
+  display: block;
+  aspect-ratio: 1;
+  width: 100%;
+  background:
+    radial-gradient(circle at 36% 38%, #6b4934 0 15%, transparent 16%),
+    radial-gradient(circle at 58% 54%, #b8895e 0 21%, transparent 22%),
+    linear-gradient(135deg, #eee1d1, #8b674e);
+  border-radius: 4px;
+}
+
+.dc-store-bottom {
+  display: flex;
+  justify-content: space-between;
+  padding: 10px 18px;
+}
+
+.dc-store-notification {
+  position: absolute;
+  right: 17px;
+  bottom: 13px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 13px;
+  background: #fff;
+  border: 1px solid #e4ece7;
+  border-radius: 8px;
+  box-shadow: 0 5px 16px #274e3e10;
+  transform: rotate(2deg);
+  animation: dc-float 8s ease-in-out infinite reverse;
+}
+
+.dc-dispatch-card,
+.dc-report-card {
+  width: 85%;
+  padding: 17px;
+  background: #fff;
+  border: 1px solid #e6edf1;
+  border-radius: 8px;
+  box-shadow: 0 7px 25px #1c2f4106;
+}
+
+.dc-mini-panel-heading,
+.dc-dispatch-detail,
+.dc-delivery-labels,
+.dc-report-days {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.dc-mini-panel-heading {
+  color: var(--dc-ink);
+  font-size: 9px;
+}
+
+.dc-status-pill {
+  padding: 3px 6px;
+  color: #7e9b8e;
+  background: #edf7f0;
+  border-radius: 20px;
+  font-size: 6px;
+}
+
+.dc-delivery-line {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 26px 8px 7px;
+}
+
+.dc-delivery-line::before {
+  position: absolute;
+  right: 0;
+  left: 0;
+  height: 1px;
+  background: linear-gradient(90deg, #83b8cf 50%, #e5eaf0 50%);
+  content: "";
+}
+
+.dc-delivery-line > span {
+  position: relative;
+  display: grid;
+  place-items: center;
+  width: 37px;
+  height: 37px;
+  color: #bac6cf;
+  background: #f5f7f9;
+  border-radius: 9px;
+  box-shadow: 0 0 0 7px #fff;
+}
+
+.dc-delivery-line > span.done {
+  color: #7aa6c3;
+  background: #eaf3f9;
+}
+
+.dc-delivery-labels,
+.dc-dispatch-detail {
+  color: #8c9aa6;
+  font-size: 7px;
+}
+
+.dc-dispatch-detail {
+  margin-top: 22px;
+  padding-top: 10px;
+  border-top: 1px solid #edf2f6;
+}
+
+.dc-dispatch-detail > span {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+}
+
+.dc-report-total {
+  display: flex;
+  align-items: baseline;
+  gap: 7px;
+  margin-top: 15px;
+}
+
+.dc-report-total > strong {
+  font-size: 25px;
+  font-weight: 500;
+}
+
+.dc-report-total > span,
+.dc-report-days {
+  color: #9ba9b4;
+  font-size: 7px;
+}
+
+.dc-report-total > small {
+  margin-left: auto;
+  color: #74a68a;
+  font-size: 6px;
+}
+
+.dc-report-bars {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 10px;
+  height: 79px;
+  margin-top: 7px;
+  background: repeating-linear-gradient(0deg, transparent, transparent 24px, #f4f6f8 24px, #f4f6f8 25px);
+  border-bottom: 1px solid #e9eff3;
+}
+
+.dc-report-bars > span {
+  flex: 1;
+  max-width: 23px;
+  background: #c2daec;
+  border-radius: 4px 4px 0 0;
+  animation: dc-grow 0.8s var(--dc-ease-out) both;
+}
+
+.dc-report-bars > span:nth-child(2n) {
+  background: #9bbfd9;
+}
+
+.dc-ai-path {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+}
+
+.dc-ai-path > span {
+  display: grid;
+  place-items: center;
+  width: 43px;
+  height: 43px;
+  color: #93aabc;
+  background: #f3f6fa;
+  border: 1px solid #e7edf2;
+  border-radius: 9px;
+}
+
+.dc-ai-path > i {
+  display: block;
+  width: 23px;
+  height: 1px;
+  background: #d8e4ec;
+}
+
+.dc-ai-path > .dc-ai-center {
+  width: 68px;
+  height: 68px;
+  color: #658ba9;
+  background: #fff;
+  border: 5px solid #edf3f8;
+  border-radius: 15px;
+  box-shadow: 0 7px 20px #1c2f4108;
+}
+
+.dc-extracted-card {
+  position: relative;
+  width: 80%;
+  margin-top: 23px;
+  padding: 11px;
+  background: #fff;
+  border: 1px solid #e6edf2;
+  border-radius: 7px;
+  box-shadow: 0 5px 15px #1c2f4105;
+}
+
+.dc-extracted-card > div {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  color: #6d8596;
+}
+
+.dc-status-dot {
+  width: 7px;
+  height: 7px;
+  margin-left: auto;
+  background: #73aa8c;
+  border-radius: 50%;
+}
+
+.dc-extracted-card > p {
+  display: flex;
+  justify-content: space-between;
+  margin: 9px 0 0;
+  color: #99a9b5;
+  font-size: 6px;
+}
+
+.dc-extracted-card > p > span:last-child {
+  display: inline-flex;
+  align-items: center;
+  color: #73aa8c;
+}
+
+.dc-product-card {
+  overflow: hidden;
+  background: #fff;
+  border: 1px solid var(--dc-line);
+  border-radius: 14px;
+  transition: box-shadow 0.3s;
+}
+
+.dc-product-card:hover {
+  box-shadow: 0 12px 28px #1c2f4109;
+}
+
+.dc-product-preview-trigger {
+  position: relative;
+  display: block;
+  width: 100%;
+  padding: 0;
+  color: inherit;
+  text-align: left;
+  background: none;
+  border: 0;
+}
+
+button.dc-product-preview-trigger {
+  cursor: pointer;
+}
+
+.dc-product-preview {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 258px;
+  padding: 27px;
+  overflow: hidden;
+  background: #eaf2f8;
+}
+
+.dc-product-preview--inventory {
+  background: #edf4ef;
+}
+
+.dc-product-preview--school {
+  background: #f0eef7;
+}
+
+.dc-preview-window {
+  position: relative;
+  width: 100%;
+  max-width: 360px;
+  background: #fff;
+  border: 1px solid #e2eaf0;
+  border-radius: 8px;
+  box-shadow: 0 8px 20px #223e5012;
+  transform: rotate(-3deg);
+  transition: transform 0.4s var(--dc-ease-out);
+}
+
+.dc-product-preview--inventory .dc-preview-window {
+  transform: rotate(2deg);
+}
+
+.dc-product-preview-trigger:hover .dc-preview-window {
+  transform: rotate(0) translateY(-3px);
+}
+
+.dc-preview-toolbar {
+  padding: 7px 10px;
+}
+
+.dc-task-preview-content,
+.dc-inventory-preview-content {
+  padding: 13px;
+}
+
+.dc-preview-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 5px;
+  font-size: 10px;
+}
+
+.dc-preview-heading > b {
+  font-weight: 500;
+}
+
+.dc-preview-heading > span:not(.dc-preview-avatar) {
+  display: flex;
+  align-items: center;
+  gap: 3px;
+  padding: 3px 5px;
+  color: #90a3b0;
+  background: #eff4f8;
+  border-radius: 3px;
+  font-size: 6px;
+}
+
+.dc-preview-tabs {
+  display: flex;
+  gap: 16px;
+  margin-top: 14px;
+  padding-bottom: 6px;
+  color: #9babb6;
+  border-bottom: 1px solid #edf2f6;
+  font-size: 6px;
+}
+
+.dc-preview-tabs > b {
+  color: #63859f;
+  font-weight: 500;
+}
+
+.dc-preview-task {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  padding: 9px 0;
+  border-bottom: 1px solid #f2f5f7;
+  font-size: 7px;
+}
+
+.dc-preview-task > span:nth-child(2) {
+  flex: 1;
+}
+
+.dc-preview-task small {
+  display: block;
+  margin-top: 2px;
+  color: #a5b0b9;
+  font-size: 5px;
+}
+
+.dc-task-check {
+  display: grid;
+  place-items: center;
+  width: 11px;
+  height: 11px;
+  border: 1px solid #dae4eb;
+  border-radius: 3px;
+}
+
+.dc-task-check.checked {
+  color: #70a58b;
+  background: #e3f1e9;
+  border-color: #d5e9df;
+}
+
+.dc-preview-avatar {
+  display: inline-grid;
+  place-items: center;
+  width: 18px;
+  height: 18px;
+  color: #879dc7;
+  background: #e8edf9;
+  border-radius: 50%;
+  font-size: 5px;
+}
+
+.dc-avatar-1 {
+  color: #bf9f88;
+  background: #f8e9de;
+}
+
+.dc-avatar-2 {
+  color: #92b7a0;
+  background: #e8f3eb;
+}
+
+.dc-preview-summary {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 11px;
+  color: #94a6b2;
+  font-size: 6px;
+}
+
+.dc-preview-summary > span {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.dc-preview-summary i {
+  width: 4px;
+  height: 4px;
+  background: #87b69e;
+  border-radius: 50%;
+}
+
+.dc-inventory-counts {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 7px;
+  margin-top: 16px;
+}
+
+.dc-inventory-counts > span {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px;
+  padding: 7px;
+  color: #89a895;
+  background: #f5f9f6;
+  border: 1px solid #eef3ef;
+  border-radius: 4px;
+}
+
+.dc-inventory-counts small {
+  font-size: 5px;
+}
+
+.dc-inventory-counts b {
+  width: 100%;
+  color: #5f7d6c;
+  font-size: 19px;
+  font-weight: 500;
+}
+
+.dc-order-list {
+  margin-top: 13px;
+}
+
+.dc-order-list > div {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  padding: 7px 0;
+  border-bottom: 1px solid #f1f5f2;
+  font-size: 6px;
+}
+
+.dc-order-list b {
+  color: #809688;
+  font-weight: 500;
+}
+
+.dc-order-box {
+  display: grid;
+  place-items: center;
+  width: 19px;
+  height: 19px;
+  color: #9db3a2;
+  background: #f0f5f1;
+  border-radius: 3px;
+}
+
+.dc-order-status {
+  margin-left: auto;
+  padding: 2px 4px;
+  color: #8aa9bc;
+  background: #edf5fa;
+  border-radius: 3px;
+  font-size: 5px;
+}
+
+.dc-order-status-1 {
+  color: #c0aa8a;
+  background: #fcf3e8;
+}
+
+.dc-order-status-2 {
+  color: #87ac92;
+  background: #edf7f0;
+}
+
+.dc-school-preview-content {
+  display: flex;
+  min-height: 180px;
+}
+
+.dc-school-preview-sidebar {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  align-items: center;
+  width: 35px;
+  padding: 13px 0;
+  color: #a49bb9;
+  background: #fcfbfd;
+  border-right: 1px solid #f0eef5;
+}
+
+.dc-school-preview-main {
+  flex: 1;
+  padding: 13px 11px;
+}
+
+.dc-school-stat {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  margin: 14px 0;
+  padding: 10px;
+  color: #a094b6;
+  background: #f7f5fc;
+  border: 1px solid #efecf6;
+  border-radius: 6px;
+}
+
+.dc-school-stat > span {
+  display: grid;
+  place-items: center;
+  padding: 5px;
+  background: #eee8f7;
+  border-radius: 5px;
+}
+
+.dc-school-stat small {
+  display: block;
+  font-size: 5px;
+}
+
+.dc-school-stat b {
+  color: #887899;
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.dc-school-stat em {
+  font-size: 5px;
+  font-style: normal;
+}
+
+.dc-school-stat strong {
+  margin-left: auto;
+  color: #9fa89c;
+  font-size: 10px;
+  font-weight: 500;
+}
+
+.dc-class-title {
+  color: #94879f;
+  font-size: 7px;
+  font-weight: 500;
+}
+
+.dc-class-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 7px 0;
+  color: #a193ac;
+  border-bottom: 1px solid #f3f0f7;
+  font-size: 6px;
+}
+
+.dc-class-row > svg {
+  margin-left: auto;
+}
+
+.dc-class-dot {
+  width: 5px;
+  height: 5px;
+  background: #c6b4de;
+  border-radius: 2px;
+}
+
+.dc-class-dot-1 {
+  background: #a6c8b6;
+}
+
+.dc-class-dot-2 {
+  background: #e2c8ab;
+}
+
+.dc-product-preview--large {
+  height: 270px;
+}
+
+.dc-product-preview--large .dc-preview-window {
+  max-width: 330px;
+}
+
+.dc-preview-open {
+  position: absolute;
+  right: 14px;
+  bottom: 14px;
+  display: grid;
+  place-items: center;
+  width: 31px;
+  height: 31px;
+  background: #fff;
+  border-radius: 50%;
+  box-shadow: 0 2px 4px #1c2f4110;
+  transition: transform 0.2s;
+}
+
+.dc-product-preview-trigger:hover .dc-preview-open {
+  transform: rotate(45deg);
+}
+
+.dc-product-card-body {
+  padding: 25px 23px 16px;
+}
+
+.dc-product-category {
+  display: inline-block;
+  margin-bottom: 11px;
+  padding: 2px 8px;
+  color: #6b7b86;
+  border: 1px solid #e6ebef;
+  border-radius: 5px;
+  font-size: 10px;
+}
+
+.dc-product-card h3 {
+  font-size: 18px;
+}
+
+.dc-product-card p {
+  min-height: 69px;
+  margin-top: 10px;
+}
+
+.dc-product-card-bottom {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-top: 19px;
+  padding-top: 12px;
+  border-top: 1px solid var(--dc-line);
+}
+
+.dc-product-card-bottom > span {
+  color: #7c8892;
+  font-size: 10px;
+}
+
+@keyframes dc-float {
+  0%,
+  100% {
+    translate: 0 0;
+  }
+  50% {
+    translate: 0 -8px;
+  }
+}
+
+@keyframes dc-grow {
+  from {
+    scale: 1 0.15;
+    transform-origin: bottom;
+  }
+}
+
+@media (max-width: 640px) {
+  .dc-section-heading {
+    display: block;
+  }
+
+  .dc-section-heading h2 {
+    font-size: 32px;
+  }
+
+  .dc-section-heading-aside {
+    margin-top: 20px;
+  }
+
+  .dc-service-visual,
+  .dc-product-preview {
+    min-height: 240px;
+  }
+
+  .dc-workflow-node {
+    width: 86%;
+  }
+
+  .dc-workflow-outputs {
+    gap: 10px;
+  }
+
+  .dc-workflow-outputs > span {
+    padding: 9px 12px;
+    font-size: 7px;
+  }
+
+  .dc-product-card-body {
+    padding: 22px 18px 16px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .dc-button-label > span,
+  .dc-button > svg,
+  .dc-service-card,
+  .dc-preview-window,
+  .dc-preview-open,
+  .dc-report-bars > span,
+  .dc-automation-toast,
+  .dc-store-notification {
+    animation: none;
+    transition: none;
+  }
+
+  .dc-button:hover .dc-button-label > span:first-child,
+  .dc-button .dc-button-label > span + span {
+    transform: none;
+  }
+}