@font-face {
        font-family: "PixelFont";
        src: url("https://fonts.gstatic.com/s/pressstart2p/v14/e3t4euO8T-267oIAQAu6jDQyK3nVivNm4I81.woff2")
          format("woff2");
        font-weight: 400;
        font-style: normal;
      }

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

      body {
        font-family: "PixelFont", monospace;
        background-color: #e8e0f0;
        color: #333;
        min-height: 100vh;
        text-align: center;
      }

      header {
        background-color: #2a2a3a;
        color: #c3b9d0;
        padding: 15px;
        text-align: center;
        margin-bottom: 20px;
      }

      .container {
        width: 100%;
        max-width: 1200px;
        padding: 0 20px;
        margin: 0 auto;
      }

      .plant-detail-view {
        display: none;
        max-width: 350px;
        margin: 0 auto;
      }

      .plant-container {
        position: relative;
        margin-bottom: 20px;
      }

      .plant-image {
        width: 100px;
        height: 150px;
        margin: 0 auto;
        image-rendering: pixelated;
      }

      .plant-name {
        font-size: 18px;
        margin: 10px 0;
        color: #333;
      }

      .water-message {
        font-size: 14px;
        color: white;
        margin: 10px 0;
        text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
      }

      .last-watered {
        font-size: 10px;
        color: #666;
        margin-bottom: 5px;
      }

      .countdown {
        font-size: 16px;
        color: #333;
        margin: 15px 0;
        letter-spacing: 2px;
      }

      .water-button {
        background-color: white;
        border: none;
        border-radius: 50%;
        width: 50px;
        height: 50px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        transition: transform 0.2s;
      }

      .water-button:hover {
        transform: scale(1.05);
      }

      .water-button img {
        width: 24px;
        height: 24px;
      }

      .plant-list {
        display: flex;
        overflow-x: auto;
        gap: 10px;
        padding: 10px 0;
        margin-top: 20px;
      }

      .plant-option {
        min-width: 60px;
        cursor: pointer;
        padding: 5px;
        border-radius: 5px;
        transition: background-color 0.2s;
      }

      .plant-option:hover {
        background-color: rgba(255, 255, 255, 0.3);
      }

      .plant-option img {
        width: 40px;
        height: 60px;
        image-rendering: pixelated;
      }

      .plant-option.active {
        background-color: rgba(255, 255, 255, 0.5);
      }

      .add-plant-form {
        margin-top: 20px;
        display: none;
        background-color: white;
        padding: 15px;
        border-radius: 10px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        max-width: 350px;
        margin-left: auto;
        margin-right: auto;
      }

      .form-group {
        margin-bottom: 10px;
        text-align: left;
      }

      .form-group label {
        display: block;
        font-size: 12px;
        margin-bottom: 5px;
      }

      .form-group input,
      .form-group select {
        width: 100%;
        padding: 8px;
        border: 1px solid #ddd;
        border-radius: 5px;
        font-family: inherit;
      }

      .add-button {
        background-color: #8a7b99;
        color: white;
        border: none;
        padding: 8px 15px;
        border-radius: 5px;
        cursor: pointer;
        font-family: inherit;
        margin-top: 10px;
      }

      .add-button:hover {
        background-color: #6d5f7a;
      }

      .toggle-form {
        background: none;
        border: none;
        color: #8a7b99;
        cursor: pointer;
        font-family: inherit;
        font-size: 12px;

        text-decoration: underline;
      }

      /* Plant SVG styles */
      .plant-svg {
        width: 100px;
        height: 150px;
        margin: 0 auto;
      }

      /* Grid view styles */
      .plant-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 20px;
        margin-top: 20px;
      }

      .plant-card {
        background-color: #f5f0f9;
        border-radius: 10px;
        padding: 20px;
        text-align: center;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        cursor: pointer;
        transition: transform 0.2s;
        display: flex;
        flex-direction: column;
      }

      .plant-card:hover {
        transform: translateY(-5px);
      }

      .plant-card-image {
        width: 100px;
        height: 150px;
        margin: 0 auto 20px;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .plant-card-image svg {
        max-width: 100%;
        max-height: 100%;
      }

      .plant-card-name {
        font-size: 16px;
        margin-bottom: 5px;
        color: #333;
      }

      .plant-card-type {
        font-size: 12px;
        color: #666;
        margin-bottom: 15px;
      }

      .plant-card-info {
        display: flex;
        justify-content: space-between;
        margin-bottom: 15px;
        font-size: 12px;
      }

      .plant-card-last {
        display: flex;
        align-items: center;
        gap: 5px;
      }

      .plant-card-days {
        display: flex;
        align-items: center;
        gap: 5px;
      }

      .plant-card-actions {
        display: flex;
        justify-content: space-between;
        margin-top: auto;
      }

      .btn {
        padding: 8px 15px;
        border-radius: 5px;
        cursor: pointer;
        font-family: inherit;
        font-size: 12px;
        display: flex;
        align-items: center;
        gap: 5px;
      }

      .btn-logs {
        background-color: transparent;
        border: 1px solid #8a7b99;
        color: #333;
      }

      .btn-water {
        background-color: #8a7b99;
        border: none;
        color: white;
      }

      .btn-water:hover {
        background-color: #6d5f7a;
      }

      .view-toggle {
        display: flex;
        justify-content: center;
        margin: 20px 0;
        gap: 10px;
      }

      .view-toggle button {
        background-color: #8a7b99;
        color: white;
        border: none;
        padding: 8px 15px;
        border-radius: 5px;
        cursor: pointer;
        font-family: inherit;
        font-size: 12px;
      }

      .view-toggle button.active {
        background-color: #6d5f7a;
      }

      .icon {
        display: inline-block;
        width: 14px;
        height: 14px;
      }