:root {
      --navy: #070e2d;
      --text: #30384f;
      --muted: #697083;
      --green: #008978;
      --green-dark: #007468;
      --green-soft: #e8f6f2;
      --purple: var(--green);
      --orange: #f47b20;
      --border: #edf1f5;
      --shadow: 0 18px 45px rgba(8, 20, 40, 0.16);
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      min-height: 100vh;
      font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
      color: var(--navy);
      background: #ffffff;
    }

    .demo-page {
      width: min(100%, 1600px);
      margin: 0 auto;
      padding: 28px 48px 70px;
      position: relative;
      overflow: hidden;
    }

    .demo-header {
      margin-bottom: 22px;
    }

    .demo-header h1 {
      font-size: clamp(2rem, 3.3vw, 3.4rem);
      line-height: 1.1;
      font-weight: 800;
      letter-spacing: 0.02em;
    }

    .steps {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 42px;
      align-items: start;
      position: relative;
    }

    .step {
      position: relative;
      display: grid;
      justify-items: center;
      text-align: center;
      min-width: 0;
    }

    .step-number {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: var(--green);
      color: white;
      font-size: 24px;
      font-weight: 800;
      margin-bottom: 16px;
      box-shadow: 0 10px 24px rgba(0, 137, 120, 0.22);
    }

    .arrow {
      position: absolute;
      top: 188px;
      right: -34px;
      color: #4f5968;
      font-size: 42px;
      font-weight: 300;
      z-index: 2;
    }

    .phone {
      width: 196px;
      height: 405px;
      border: 5px solid #151515;
      border-radius: 28px;
      background: #111;
      box-shadow: var(--shadow);
      overflow: hidden;
      position: relative;
    }

    .phone::before {
      content: "";
      position: absolute;
      top: 8px;
      left: 50%;
      transform: translateX(-50%);
      width: 76px;
      height: 19px;
      background: #050505;
      border-radius: 0 0 13px 13px;
      z-index: 20;
    }

    .screen {
      height: 100%;
      border-radius: 22px;
      background: #ffffff;
      overflow: hidden;
      position: relative;
    }

    .phone-top {
      height: 34px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 14px;
      font-size: 9px;
      font-weight: 700;
      color: #111;
      position: relative;
      z-index: 10;
    }

    .app-bar {
      height: 34px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 14px;
      font-size: 11px;
      font-weight: 700;
      border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    }

    .photo-screen {
      background: #111;
      color: white;
    }

    .photo-view {
      height: 294px;
      background:
        radial-gradient(circle at 45% 42%, #f4f0e5 0 19%, transparent 20%),
        radial-gradient(circle at 44% 38%, #ffffff 0 23%, transparent 24%),
        linear-gradient(135deg, #72654f, #2f2c21 45%, #4b5e29);
      position: relative;
      display: grid;
      place-items: center;
      overflow: hidden;
    }

    .yogurt-cup {
      width: 126px;
      height: 110px;
      background: linear-gradient(180deg, #fdfdf9, #f3efe2);
      border-radius: 46% 46% 26% 26%;
      box-shadow: inset 0 -14px 22px rgba(0, 0, 0, 0.10), 0 10px 28px rgba(0, 0, 0, 0.32);
      transform: rotate(3deg);
      position: relative;
    }

    .yogurt-cup::before {
      content: "";
      position: absolute;
      top: -13px;
      left: 10px;
      width: 106px;
      height: 26px;
      border-radius: 50%;
      background: #fffef8;
      box-shadow: 0 5px 12px rgba(0, 0, 0, 0.12);
    }

    .yogurt-cup::after {
      content: "Froagurt";
      position: absolute;
      top: 42px;
      left: 20px;
      color: #101529;
      font-size: 23px;
      font-weight: 800;
      letter-spacing: -0.08em;
    }

    .camera-controls {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 76px;
      background: rgba(10, 10, 10, 0.94);
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      align-items: center;
      color: white;
      font-size: 17px;
    }

    .shutter {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      background: white;
      border: 4px solid #e8e8e8;
      justify-self: center;
    }

    .analysis-body {
      height: calc(100% - 34px);
      display: grid;
      place-items: center;
      padding: 22px;
      background: #f6f7f8;
    }

    .loader {
      width: 46px;
      height: 46px;
      border-radius: 50%;
      border: 5px solid #dedede;
      border-top-color: #1d1d1d;
      animation: spin 1.1s linear infinite;
      margin: 0 auto 22px;
    }

    @keyframes spin {
      to { transform: rotate(360deg); }
    }

    .analysis-card {
      width: 100%;
      text-align: center;
      color: #222;
      font-weight: 700;
      font-size: 14px;
    }

    .black-btn {
      margin-top: 28px;
      width: 100%;
      height: 38px;
      border: none;
      border-radius: 10px;
      background: #171717;
      color: white;
      font-weight: 700;
    }

    .extract-screen {
      padding: 64px 18px 22px;
    }

    .extract-screen h2 {
      font-size: 18px;
      margin-bottom: 22px;
      text-align: left;
    }

    .info-line {
      text-align: left;
      margin-bottom: 21px;
      font-size: 13px;
      color: #333;
      line-height: 1.4;
    }

    .info-line strong {
      display: block;
      font-size: 15px;
      color: #101529;
      margin-bottom: 4px;
    }

    .purple-btn {
      position: absolute;
      left: 18px;
      right: 18px;
      bottom: 24px;
      height: 42px;
      border: none;
      border-radius: 10px;
      background: linear-gradient(135deg, var(--green), var(--green-dark));
      color: white;
      font-weight: 800;
      font-size: 14px;
    }

    .inventory-screen {
      padding: 50px 14px 58px;
    }

    .inventory-title {
      text-align: left;
      font-size: 15px;
      font-weight: 800;
      margin-bottom: 16px;
    }

    .inventory-list {
      display: grid;
      gap: 11px;
    }

    .inventory-item {
      display: grid;
      grid-template-columns: 36px 1fr 20px;
      gap: 9px;
      align-items: center;
      min-height: 55px;
      padding: 8px;
      border-radius: 9px;
      background: #ffffff;
      box-shadow: 0 8px 18px rgba(0, 0, 0, 0.06);
      text-align: left;
    }

    .item-img {
      width: 34px;
      height: 34px;
      border-radius: 7px;
      display: grid;
      place-items: center;
      background: var(--green-soft);
      font-size: 18px;
    }

    .inventory-item h3 {
      font-size: 11px;
      margin-bottom: 1px;
    }

    .inventory-item p {
      color: var(--orange);
      font-size: 9px;
      font-weight: 800;
      line-height: 1.25;
    }

    .item-menu {
      color: #555;
      letter-spacing: 1px;
      font-weight: 800;
      font-size: 10px;
    }

    .bottom-tabs {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 49px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      align-items: center;
      background: #ffffff;
      box-shadow: 0 -8px 18px rgba(0, 0, 0, 0.04);
      font-size: 8px;
      color: var(--muted);
    }

    .tab {
      display: grid;
      gap: 2px;
      justify-items: center;
    }

    .tab.active {
      color: var(--green-dark);
      font-weight: 800;
    }

    .add-item-screen .inventory-screen {
      padding-bottom: 76px;
    }

    .add-item-screen .purple-btn {
      bottom: 18px;
    }

    .step-label {
      margin-top: 24px;
      color: var(--text);
      font-size: 22px;
      font-weight: 800;
      line-height: 1.25;
      letter-spacing: 0.01em;
    }

    .barcode-demo {
      margin-top: 80px;
      padding-top: 42px;
      border-top: 1px solid rgba(0, 137, 120, 0.16);
    }

    .barcode-header {
      margin-bottom: 28px;
    }

    .scan-screen {
      background: #101418;
      color: white;
    }

    .scan-screen .phone-top,
    .scan-screen .app-bar {
      color: white;
      border-bottom-color: rgba(255, 255, 255, 0.08);
    }

    .barcode-camera {
      height: calc(100% - 68px);
      display: grid;
      place-items: center;
      align-content: center;
      gap: 22px;
      background:
        radial-gradient(circle at center, rgba(0, 137, 120, 0.28), transparent 34%),
        linear-gradient(135deg, #182128, #0b0f13);
      padding: 18px;
    }

    .barcode-camera p {
      color: rgba(255, 255, 255, 0.78);
      font-size: 12px;
      font-weight: 700;
    }

    .scan-frame {
      width: 145px;
      height: 110px;
      border: 3px solid var(--green);
      border-radius: 18px;
      display: grid;
      place-items: center;
      position: relative;
      box-shadow: 0 0 28px rgba(0, 137, 120, 0.35);
      overflow: hidden;
    }

    .barcode-lines {
      width: 104px;
      height: 58px;
      display: flex;
      align-items: stretch;
      justify-content: center;
      gap: 5px;
      padding: 6px;
      background: white;
      border-radius: 6px;
    }

    .barcode-lines span {
      display: block;
      width: 4px;
      background: #111;
      border-radius: 1px;
    }

    .barcode-lines span:nth-child(2),
    .barcode-lines span:nth-child(5) {
      width: 8px;
    }

    .barcode-lines span:nth-child(4),
    .barcode-lines span:nth-child(7) {
      width: 2px;
    }

    .scan-line {
      position: absolute;
      left: 14px;
      right: 14px;
      top: 20px;
      height: 3px;
      background: var(--green);
      border-radius: 999px;
      box-shadow: 0 0 18px rgba(0, 137, 120, 0.9);
      animation: scanMove 1.8s ease-in-out infinite alternate;
    }

    @keyframes scanMove {
      from { transform: translateY(0); }
      to { transform: translateY(66px); }
    }

    .green-loader {
      border-top-color: var(--green);
    }

    .green-action {
      background: linear-gradient(135deg, var(--green), var(--green-dark));
      box-shadow: 0 10px 22px rgba(0, 137, 120, 0.20);
    }

    .manual-date-screen {
      padding-top: 56px;
    }

    .date-card {
      text-align: left;
      padding: 12px 14px;
      margin-bottom: 12px;
      border-radius: 12px;
      background: var(--green-soft);
      border: 1px solid rgba(0, 137, 120, 0.16);
    }

    .date-card span {
      display: block;
      color: var(--muted);
      font-size: 10px;
      font-weight: 700;
      margin-bottom: 4px;
    }

    .date-card strong {
      color: var(--navy);
      font-size: 13px;
    }

    .page-number {
      position: fixed;
      right: 0;
      bottom: 0;
      width: 76px;
      height: 76px;
      display: grid;
      place-items: center;
      background: var(--green);
      color: white;
      font-size: 25px;
      font-weight: 800;
      border-radius: 24px 0 0 0;
    }

    @media (max-width: 1200px) {
      .demo-page {
        padding: 28px 26px 90px;
      }

      .steps {
        grid-template-columns: repeat(2, minmax(260px, 1fr));
        gap: 58px 34px;
      }

      .arrow {
        display: none;
      }
    }

    @media (max-width: 640px) {
      .demo-page {
        padding: 24px 18px 90px;
      }

      .steps {
        grid-template-columns: 1fr;
      }

      .demo-header h1 {
        font-size: 2rem;
      }

      .phone {
        width: 210px;
        height: 430px;
      }
    }