:root {
     --color-background: #ffffff;
     --color-primary: #ffffff;
     --color-secondary: #f3f3f3;
     --color-accent: #5dadec;
     --color-accent-hover: #dd2e44;
     --color-accent-text: #ffffff;
     --color-text: #000000;
     --color-text-secondary: #595959;
     --color-border: #e7e7e7;
     --color-hover: #ececec;
     --color-card-bg: #f7f7f7;
     --color-info: #3aadff;
     --color-warning: #FF9800;
     --font-family: 'Inter', sans-serif;
     --font-family-Sans: 'DM Sans', sans-serif;
     --font-size-base: 16px;
     --font-weight-normal: 400;
     --font-weight-bold: 600;
     --shadow-card: rgba(0, 0, 0, 0.1) 0px 4px 12px;
     --shadow-footer: rgba(0, 0, 0, 0.24) 0px 3px 8px;
     --gradient-accent: linear-gradient(135deg, #4CAF50, #66BB6A);
     --gradient-background: linear-gradient(135deg, #121212, #1C1C1E);
     --transition-speed: 0.25s;
     --font-famili-emoji: 'Roboto', 'Twemoji Mozilla', 'Apple Color Emoji', 'Segoe UI Emoji', 'EmojiOne Color', 'Noto Color Emoji', "Noto Emoji" sans-serif;
 }

 body {
     margin: 0;
     padding: 0;
     font-family: var(--font-family-Sans), var(--font-famili-emoji);
     color: var(--color-text);
     height: 100vh;
     overflow: hidden;
     background: var(--color-primary)
 }

 h1 {
     text-align: center
 }

 .search-bar {
     display: flex;
     justify-content: center;
     padding: 10px 0;
     border-bottom: 1px solid var(--color-border)
 }

 .search-input-container {
     position: relative;
     display: flex;
     justify-content: center;
     width: calc(100% - 40px);
     max-width: 700px;
     margin: 0 auto;
     padding-right: 60px
 }

 .search-bar input {
     width: 100%;
     padding: 10px 20px;
     font-size: 1rem;
     border: none;
     border-radius: 25px;
     outline: none;
     background: var(--color-secondary);
     border: 2px solid var(--color-secondary);
     color: var(--color-text)
 }

 .search-bar input:focus {
     border: 2px solid var(--color-accent)
 }

 .search-bar input::placeholder {
     color: var(--color-text)
 }

 .clear-search-btn {
     position: absolute;
     right: 75px;
     top: 50%;
     transform: translateY(-50%);
     background: none;
     border: none;
     font-size: 1.2rem;
     cursor: pointer;
     visibility: hidden;
     opacity: 0;
     transition: visibility 0.3s, opacity 0.3s
 }

 .search-bar input:focus+.clear-search-btn,
 .search-bar input:not(:placeholder-shown)+.clear-search-btn {
     visibility: visible;
     opacity: 1
 }

 .clear-search-btn:hover {
     color: var(--color-accent-hover)
 }

 .category-container {
     padding: 20px;
     display: flex;
     flex-direction: column;
     gap: 5px;
     align-items: flex-end
 }

 .category-button {
     color: var(--color-text);
     background: var(--color-background);
     border: none;
     padding: 7px 10px;
     border-radius: 30px;
     cursor: pointer;
     font-size: 1rem;
     transition: all 0.3s ease;
     font-family: var(--font-famili-emoji);
     width: 100%;
     text-align: left;
     max-width: 230px;
     white-space: nowrap
 }

 .category-button:hover {
     background: var(--color-hover)
 }

 .category-button.active {
     background: var(--color-accent);
     color: var(--color-accent-text)
 }

 .main-container {
     display: grid;
     grid-template-columns: 1.5fr 3fr 1.5fr;
     height: calc(100vh - 60px);
     overflow: hidden;
     background: var(--color-primary)
 }

 .left-info-panel,
 .right-info-panel {
     padding: 0;
     background: var(--color-primary);
     overflow-y: auto
 }

 .left-info-panel {
     border-right: 1px solid var(--color-border)
 }

 .right-info-panel {
     border-left: 1px solid var(--color-border)
 }

 .results-wrapper {
     overflow: hidden;
     border-left: none;
     border-right: none
 }

 .emoji-container {
     height: calc(100vh - 64px);
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(125px, 1fr));
     gap: 4px;
     padding: 10px;
     padding-left: 38px;
     padding-right: 10px;
     overflow-y: auto;
     background: var(--color-primary);
     align-content: start;
     scrollbar-width: auto;
     box-sizing: border-box
 }

 .emoji-container::-webkit-scrollbar {
     width: auto;
     height: auto
 }

 .emoji-container::-webkit-scrollbar {
     width: auto;
     height: auto
 }

 .results-card {
     display: flex;
     flex-direction: column;
     align-items: center;
     padding: 15px;
     padding-top: 30px;
     padding-bottom: 0;
     border-radius: 14px;
     cursor: pointer;
     transition: all 0.2s;
     position: relative;
     text-align: center;
     font-size: 3rem;
     max-height: 150px;
     min-height: 124px;
     background: var(--color-primary);
     border: 2px solid #fff0;
     overflow: hidden
 }

 .results-card.active,
 .results-card:hover {
     padding-bottom: 20px;
     padding-top: 10px;
     box-shadow: rgb(0 0 0 / .1) 0 4px 12px;
     overflow: visible
 }

 .results-card:hover {
     z-index: 3
 }

 .results-card.active {
     z-index: 2
 }

 .results-card p {
     margin: 2px 0;
     font-size: .6em;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     max-width: 80px
 }

 .results-card p.name {
     font-size: .9rem;
     max-width: 105px;
     min-height: 20px;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     color: var(--color-text)
 }

 .suggested-card {
     background-color: #f6fbff;
     border: 1px dashed #007bff
 }

 .category-header,
 .sub-category-header {
     grid-column: 1 / -1;
     font-size: 1rem;
     font-weight: 400;
     font-family: var(--font-family-Sans);
     color: var(--color-text-secondary);
     padding: 3px;
     margin: 0 0;
     border-radius: 10px;
     text-align: left;
     display: none
 }

 .suggested-sep {
     display: flex;
     justify-content: center;
     align-items: center;
     font-size: 1.1rem;
     font-weight: 700;
     color: #007bff;
     background-color: #f0f8ff;
     padding: 10px 0;
     margin: 20px 0;
     position: relative;
     border-radius: 14px;
     opacity: .5
 }

 .suggested-sep::before,
 .suggested-sep::after {
     content: '';
     flex: 1;
     height: 1px;
     background-color: #007bff;
     margin: 0 10px
 }

 .suggested-sep::before {
     margin-right: 20px
 }

 .suggested-sep::after {
     margin-left: 20px
 }

 .sentinel {
     display: block;
     width: 0;
     height: 0;
     position: absolute;
     visibility: hidden;
 }

 .copy-buttons-container {
     display: flex;
     justify-content: center;
     align-items: center;
     margin-top: 0;
     gap: 5px;
     opacity: 0;
     transition: opacity 0.1s ease-in-out
 }

 .results-card.active .copy-buttons-container,
 .results-card:hover .copy-buttons-container {
     opacity: 1
 }

 .copy-button {
     font-size: .7rem;
     border: none;
     background: var(--color-hover);
     border-radius: 5px;
     padding: 5px;
     cursor: pointer;
     transition: background 0.1s;
     width: 50px;
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap
 }

 .copy-button:hover {
     background: var(--color-accent-hover);
     color: var(--color-accent-text)
 }

 .view-toggle-container {
     display: flex;
     justify-content: flex-start;
     flex-direction: column;
     padding-right: 20px;
     position: absolute;
     width: 40px;
     z-index: 10
 }

 .view-toggle-button {
     background: var(--color-primary);
     border: none;
     border-radius: 4px;
     padding: 3px;
     cursor: pointer;
     margin: 5px 5px;
     font-size: .9rem;
     transition: background 0.1s ease;
     width: 25px;
     height: 25px
 }

 .view-toggle-button.active {
     background: var(--color-hover)
 }

 .emoji-container.simple-view {
     grid-template-columns: repeat(auto-fill, minmax(55px, 1fr))
 }

 .emoji-container.simple-view .results-card {
     padding: 5px;
     min-height: 50px;
     max-height: 50px;
     font-size: 1.8rem;
     overflow: hidden;
     max-width: 50px
 }

 .emoji-container.simple-view .results-card p.name {
     color: #fff0
 }

 .emoji-container.simple-view .results-card .copy-buttons-container {
     display: none
 }

 .emoji-container.simple-view .suggested-sep {
     font-size: 0.5rem !important;
     font-weight: 400 !important;
     min-height: 50px;
     max-height: 50px;
     overflow: hidden;
     max-width: 50px;
     margin: 0px !important
 }

 @media (max-width:768px) {
     .main-container {
         flex-direction: column
     }
 }

 .category-button {
     display: flex;
     justify-content: flex-start;
     align-items: center;
     gap: 10px;
     padding: 7px 10px;
     border-radius: 30px;
     font-size: 1rem;
     white-space: nowrap
 }

 .category-button span {
     pointer-events: none
 }

 @media (max-width:1200px) {
     .main-container {
         display: grid;
         grid-template-columns: 0fr 3fr 1.5fr
     }

     .left-info-panel {
         width: 55px;
         padding: 5px
     }

     .category-container {
         gap: 8px;
         align-items: center;
         padding: 0
     }

     .category-button {
         justify-content: center;
         width: 100%;
         padding: 10px 0;
         border-radius: 20px;
         font-size: 1.2rem;
         background: var(--color-background)
     }

     .category-button.active {
         background: var(--color-accent);
         color: var(--color-accent-text)
     }

     .category-button span {
         display: none
     }

     .category-button:hover {
         background: var(--color-accent-hover)
     }
 }

 @media (max-width:780px) {
     .main-container {
         grid-template-columns: 0fr 3fr 0fr
     }

     .right-info-panel {
         border-top: thin solid var(--color-border);
         position: absolute;
         bottom: 0;
         height: 170px;
         width: 100%;
         scrollbar-width: auto;
         z-index: 100;
         overflow: hidden
     }

     .right-info-panel::-webkit-scrollbar {
         width: auto;
         height: auto
     }

     .card-container,
     .main-section,
     .info-section {
         max-width: 100%
     }

     .main-section {
         display: flex;
         flex-direction: row
     }

     .buttons-container {
         max-width: 130px;
         padding: 5px;
         position: absolute;
         left: 0;
         top: 0
     }

     .buttons-container .button:nth-child(1) {
         min-width: 100%
     }

     .buttons-container .button:nth-child(2) {
         display: none;
         max-width: 0
     }

     .main-image {
         margin-top: 30px;
         font-size: 70px;
         width: 100px;
         height: 100px
     }

     .info-section {
         display: none
     }

     .card-container .name {
         font-size: 1rem
     }

     .tag {
         font-size: .7rem
     }

     .details {
         max-height: 140px;
         overflow: auto;
         border: thin solid var(--color-border);
         padding: 5px;
         border-radius: 8px
     }
 }