body{margin:0;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background-color:#1a1a1a;color:#e0e0e0;line-height:1.6;overflow-x:hidden}.app-container{display:flex;flex-direction:column;min-height:100vh;padding:20px;background:linear-gradient(135deg,#2c3e50,#1a1a1a)}.app-header{background-color:#1e1e1ecc;padding:15px 25px;border-radius:10px;margin-bottom:25px;box-shadow:0 4px 15px #0000004d;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border:1px solid rgba(255,255,255,.1)}.app-title{display:flex;align-items:center;gap:10px;font-size:28px;font-weight:700;color:#00bcd4;text-shadow:0 0 8px rgba(0,188,212,.5);margin:0 0 15px;justify-content:center}.app-icon{width:30px;height:30px;stroke:#00bcd4}.cloud-sync-indicator{font-size:14px;font-weight:500;color:#888;margin-left:auto;background-color:#ffffff0d;padding:5px 10px;border-radius:5px;border:1px solid rgba(255,255,255,.1)}.search-filter-container{display:flex;gap:15px;align-items:center;justify-content:center}.search-box{display:flex;align-items:center;background-color:#323232b3;padding:8px 15px;border-radius:8px;border:1px solid rgba(255,255,255,.1);flex-grow:1;max-width:400px}.search-icon{width:20px;height:20px;color:#aaa;margin-right:10px}.search-input{background:none;border:none;outline:none;color:#e0e0e0;font-size:16px;flex-grow:1;padding:0}.search-input::placeholder{color:#888}.filter-dropdown{display:flex;align-items:center;background-color:#323232b3;padding:8px 15px;border-radius:8px;border:1px solid rgba(255,255,255,.1)}.filter-icon{width:20px;height:20px;color:#aaa;margin-right:10px}.filter-select{background:none;border:none;outline:none;color:#e0e0e0;font-size:16px;cursor:pointer;padding:0 20px 0 0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-chevron-down' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right center}.filter-select option{background-color:#333;color:#e0e0e0}.main-content{display:flex;flex-grow:1;gap:30px;margin-top:20px}.codes-list-section{flex:1;min-width:300px;background-color:#1e1e1eb3;padding:20px;border-radius:10px;box-shadow:0 4px 15px #0000004d;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column}.category-tabs{display:flex;gap:10px;margin-bottom:20px;overflow-x:auto;padding-bottom:10px}.category-tab{background:none;border:none;color:#aaa;font-size:15px;font-weight:600;padding:8px 15px;border-radius:8px;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;gap:5px;white-space:nowrap;border:1px solid rgba(255,255,255,.1)}.category-tab svg{width:18px;height:18px;stroke:#aaa}.category-tab:hover{background-color:#ffffff1a;color:#e0e0e0}.category-tab.active{background:linear-gradient(135deg,#00bcd4,#0097a7);color:#fff;border-color:#00bcd4;text-shadow:0 0 5px rgba(255,255,255,.7)}.category-tab.active svg{stroke:#fff}.codes-list{flex-grow:1;overflow-y:auto;padding-right:10px}.code-item{background-color:#282828b3;padding:15px;border-radius:8px;margin-bottom:15px;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease;border:1px solid rgba(255,255,255,.1)}.code-item:hover{transform:translateY(-3px);box-shadow:0 6px 20px #0006}.code-item.selected{border:2px solid #00bcd4;background-color:#00bcd41a}.code-item-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.code-name{font-size:18px;font-weight:700;color:#fff;margin:0 10px 0 0;flex-grow:1}.favorite-button{background:none;border:none;cursor:pointer;padding:5px;display:flex;align-items:center;justify-content:center}.heart-icon{width:22px;height:22px;color:#aaa;transition:color .3s ease}.heart-icon.filled{color:#ff4081;fill:#ff4081}.code-category{font-size:13px;color:#00bcd4;font-weight:600;margin:0 0 5px;background-color:#00bcd41a;padding:2px 6px;border-radius:4px;display:inline-block}.code-description{font-size:14px;color:#ccc;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.no-results{text-align:center;color:#888;margin-top:50px;font-size:16px}.code-detail-section{flex:1;min-width:300px;background-color:#1e1e1eb3;padding:25px;border-radius:10px;box-shadow:0 4px 15px #0000004d;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column}.detail-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:15px;border-bottom:1px solid rgba(255,255,255,.1)}.detail-title{font-size:24px;font-weight:700;color:#00bcd4;margin:0;text-shadow:0 0 8px rgba(0,188,212,.5)}.close-button{background:none;border:none;font-size:28px;color:#888;cursor:pointer;padding:0 5px;transition:color .3s ease}.close-button:hover{color:#ff4081}.detail-content{flex-grow:1;display:flex;flex-direction:column}.code-display{background-color:#222;padding:15px 20px;border-radius:8px;margin-bottom:15px;position:relative;border:1px solid rgba(255,255,255,.1)}.code-text{font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;font-size:16px;color:#0f0;margin:0;white-space:pre-wrap;word-break:break-all;line-height:1.5}.copy-button{position:absolute;top:10px;right:10px;background:#00bcd4cc;color:#fff;border:none;padding:6px 12px;border-radius:5px;cursor:pointer;font-size:14px;font-weight:600;transition:background-color .3s ease,transform .2s ease;display:flex;align-items:center;gap:5px;box-shadow:0 2px 5px #00bcd44d}.copy-button:hover{background:#00bcd4;transform:translateY(-1px)}.copy-icon{width:18px;height:18px}.detail-description{font-size:15px;color:#ccc;margin-bottom:20px;background-color:#ffffff0d;padding:15px;border-radius:8px;border:1px solid rgba(255,255,255,.1)}.detail-meta{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:15px;border-top:1px solid rgba(255,255,255,.1)}.meta-label{font-weight:600;color:#aaa}.meta-value{color:#00bcd4;font-weight:600}.detail-favorite{margin-left:auto;background-color:#ff40811a;color:#ff4081;border:1px solid rgba(255,64,129,.5);padding:8px 15px;border-radius:8px;font-weight:600}.detail-favorite .heart-icon{color:#ff4081;fill:#ff4081;margin-right:8px}.app-footer{text-align:center;padding:20px;margin-top:30px;background-color:#1e1e1eb3;border-radius:10px;box-shadow:0 -4px 15px #0000004d;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border:1px solid rgba(255,255,255,.1);font-size:14px;color:#aaa}@media (max-width: 768px){.main-content{flex-direction:column}.codes-list-section,.code-detail-section{width:100%;box-sizing:border-box}.app-header{padding:15px}.app-title{font-size:22px;flex-wrap:wrap;justify-content:center}.cloud-sync-indicator{margin-left:0;margin-top:5px;width:100%;text-align:center}.search-filter-container{flex-direction:column;width:100%}.search-box,.filter-dropdown{width:calc(100% - 30px);max-width:none}.category-tabs{justify-content:center}.code-item{padding:12px}.code-name{font-size:16px}.detail-title{font-size:20px}.code-text{font-size:14px}}.codes-list::-webkit-scrollbar,.code-detail-section::-webkit-scrollbar{width:8px}.codes-list::-webkit-scrollbar-track,.code-detail-section::-webkit-scrollbar-track{background:#32323280;border-radius:4px}.codes-list::-webkit-scrollbar-thumb,.code-detail-section::-webkit-scrollbar-thumb{background:#646464b3;border-radius:4px}.codes-list::-webkit-scrollbar-thumb:hover,.code-detail-section::-webkit-scrollbar-thumb:hover{background:#969696e6}