[data-theme="dark"]{--bg:#222;--text:#fff;--border:#444;--primary:#4dabf7}
.main-content{
    max-width:100%;
    margin:0 auto;
    display:flex;
    background-color:var(--bg-primary);
}
.favorite-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--bg-color-button);
    transition: all 0.2s ease;
    text-decoration: none;
    cursor: pointer;
}
.sidebar{
    width:clamp(31%, calc(31% + 9% * ((1150px - 100vw) / 382px)), 40%);
    border-right:10px solid var(--bg-big-border);
    min-height:100vh;
    height:auto;
    overflow-y:auto;
    overflow-x:hidden;
}
.content{width:clamp(60%, calc(69% - 9% * ((1150px - 100vw) / 382px)), 69%)}
.rumor-container{display:block; padding: 0px 5px;}
.rumor-field{margin-bottom:18px;}
.rumor-meta{font-size:12px;opacity:0.5;margin-bottom:15px;font-weight:600}
.rumor-description{font-size:1.1rem;color:var(--text);opacity:0.9;line-height:1.6;margin-bottom:20px;font-weight:500}
.rumor-paragraph{font-size:16px;color:var(--text-rumor-paragraph);opacity:0.95;line-height:1.6;margin-bottom:15px}
.rumor-strong{font-size:13px;color:var(--text);line-height:1.5;margin-bottom:15px;font-weight:600;
    text-align:center;display:block;background-color:var(--bg-color-brandlist);border-radius:
    4px;margin-left:auto;margin-right:auto;width:fit-content;opacity:0.5}
.rumor-h4{font-size:1.3rem;color:var(--text);font-weight:bold;margin:20px 0 15px 0;border-left:4px solid var(--primary);padding-left:15px}
.rumor-source{font-size:0.9rem;color:var(--primary);margin-top:20px}
.rumor-source a{text-decoration:none;color:var(--primary);font-weight:500}
.rumor-source a:hover{text-decoration:underline}
 .rumor-image{width:100%;height:auto;display:block;margin:0px auto;
    border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,0.1);
    max-height: 500px;
}
.rumor-top-image{width:100%;height:auto;display:block;margin:0px auto;
    box-shadow:0 2px 8px rgba(0,0,0,0.1);
    max-width: 100%;
    max-height: 100%;
}
 .image-with-overlay{position:relative;display:block;width:100%;margin:0px auto;text-align:center}
 .image-overlay{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;
    align-items:center;justify-content:center;border-radius:8px}
 .overlay-caption-wrap{position:absolute;left:0;top:0;right:0;bottom:10%;display:flex;justify-content:center;align-items:center}
 .overlay-caption{position:static;padding:1px 5px;text-align:start;display:flex;align-items:center;justify-content:center;border-radius:6px}
 .overlay-title .line-bg{display:inline;
     background-image: url(https://fdn.gsmarena.com/vv/assets12/i/pattern-diag-dark-33.png);
     background-repeat: repeat, repeat;
     background-size: auto, auto;
     -webkit-box-decoration-break: clone;
     box-decoration-break: clone;
     padding: 7px 10px;
     font: 400 clamp(32px, 3vw, 48px) Google-Oswald,Arimo,Arial,sans-serif;
     line-height: 1.5;
     color: #ffffff;
     text-shadow: 1px 1px 2px rgba(0,0,0,.8)}
 .video-container{width:100%;max-width:600px;margin:15px auto;border-radius:8px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,0.1)}
 .video-container iframe{width:100%;height:340px;border:none;border-radius:8px}
 .video-container video{width:100%;height:auto;border-radius:8px}
.twitter-container{width:100%;max-width:600px;margin:15px auto;border-radius:8px;overflow:visible;box-shadow:0 2px 8px rgba(0,0,0,0.1)}
.twitter-container iframe{width:100%;height:auto;min-height:120px;border:none;border-radius:8px;transition:height 220ms ease}
.image-scroll-container{overflow-x:auto;padding:10px 0;
    scrollbar-width: thin;scrollbar-color: var(--border-color) var(--bg-color-brandlist);}
.image-scroll-container::-webkit-scrollbar{height:6px}
.image-scroll-container::-webkit-scrollbar-track{background:var(--bg-color-brandlist);border-radius:3px}
.image-scroll-container::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:3px}
.image-scroll-container::-webkit-scrollbar-thumb:hover{background:var(--border-color)}
.image-group{display:flex;gap:15px;min-width:max-content;padding:0 5px;justify-content: center;}
.image-group img{width:250px;height:280px;object-fit:cover;flex-shrink:0;}
        @media (max-width:768px){
    .sidebar{
        display:none!important
    }
    .main-content{
        width:100%;
        flex-direction:column;
    }
    .content{
        width:100%;
    }
    .main-content{max-width:100%}
    .rumor-title{font-size:1.3rem}
    .image-group img{width:200px;height:140px}
    .video-container{max-width:100%}
    .video-container iframe{height:200px}
    .twitter-container{max-width:100%}
    .twitter-container iframe{height:825px}
}
 .related-phones-section {
     border-top: 1px solid var(--border);
 }
 .related-title {
     font-size: 1.4rem;
     font-weight: bold;
     color: var(--text);
     margin-bottom: 20px;
     border-left: 4px solid var(--primary);
     padding-left: 15px;
 }
 .related-phones-container {
     overflow-x: auto;
     padding: 10px 0;
     background-color: var(--bg-color-brandlist);
     scrollbar-width: thin;
  }
 .related-phones-container::-webkit-scrollbar {
     height: 6px;
 }
 .related-phones-container::-webkit-scrollbar-track {
     background: #f1f1f1;
     border-radius: 3px;
 }
 .related-phones-container::-webkit-scrollbar-thumb {
     background: #c1c1c1;
     border-radius: 3px;
 }
 .related-phones-container::-webkit-scrollbar-thumb:hover {
     background: #a8a8a8;
 }
 .related-phones-grid {
     display: flex;
     gap: 12px;
     min-width: max-content;
     padding: 0 5px;
 }
 .phone-card {
     width: 140px;
     background: var(--bg);
     border: 1px solid var(--color-card-borderbottom);
    background-color: var(--bg-primary);
     overflow: hidden;
     transition: transform 0.2s, box-shadow 0.2s;
     cursor: pointer;
     flex-shrink: 0;
 }
 .phone-card:hover {
     transform: translateY(-2px);
     box-shadow: 0 4px 12px rgba(0,0,0,0.15);
 }
 .phone-card img {
     width: 100%;
     height: 80px;
     object-fit: cover;
 }
 .phone-card-content {
     padding: 8px;
 }
 .phone-card-model {
     font-size: 0.75rem;
     font-weight: bold;
     color: var(--text);
     margin-bottom: 3px;
     line-height: 1.2;
 }
 .phone-card-brand {
     font-size: 0.65rem;
     color: var(--text);
     opacity: 0.7;
     text-transform: capitalize;
 }
 .loading-spinner {
     text-align: center;
     padding: 20px;
     color: var(--text);
     opacity: 0.7;
 }
           .no-results {
      text-align: center;
      padding: 20px;
      color: var(--text);
      opacity: 0.7;
      font-style: italic;
  }
  .sources-container {
      margin-top: 30px;
      padding-top: 20px;
      border-top: 1px solid var(--border);
  }
  .sources-title {
      font-size: 1.2rem;
      font-weight: bold;
      color: var(--text);
      margin-bottom: 15px;
      border-left: 4px solid var(--primary);
      padding-left: 15px;
  }
  .sources-grid {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
  }
  .source-item {
      flex: 1;
      min-width: 120px;
      max-width: 200px;
  }
  .source-link {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 15px;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 6px;
      text-decoration: none;
      color: var(--primary);
      transition: all 0.2s;
      font-size: 0.9rem;
  }
  .source-link:hover {
      background: var(--primary);
      color: white;
      transform: translateY(-1px);
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  }
  .source-number {
      background: var(--primary);
      color: white;
      border-radius: 50%;
      width: 20px;
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.8rem;
      font-weight: bold;
  }
  .source-link:hover .source-number {
      background: white;
      color: var(--primary);
  }
  .source-text {
      font-weight: 500;
  }
           @media (max-width: 768px) {
     .sources-grid {
         flex-direction: column;
     }
     .source-item {
         max-width: none;
     }
 }
.image-viewer-overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.9);
     z-index: 10000;
     display: none;
     align-items: center;
     justify-content: center;
    overscroll-behavior: contain;
 }
.image-viewer-container {
     width: 100%;
     height: 100%;
     display: flex;
     background: #fff;
     overflow: hidden;
    overscroll-behavior: contain;
 }
 .image-viewer-main {
     width: 80%;
     height: 100%;
     position: relative;
     background: #000;
     display: flex;
     align-items: center;
     justify-content: center;
     overflow: hidden;
    overscroll-behavior: contain;
    touch-action: none;
 }
 .image-viewer-main img {
     max-width: 100%;
     max-height: 100%;
     object-fit: contain;
     cursor: zoom-in;
     transition: transform 0.2s ease-out;
     transform-origin: center center;
     will-change: transform;
 }
           .image-viewer-main img.zoomed {
      user-select: none;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
  }
.image-viewer-minimap {
     position: absolute;
     top: 15px;
     left: 15px;
     width: 150px;
     height: 100px;
     background: rgba(0, 0, 0, 0.8);
     border: 2px solid white;
     border-radius: 4px;
    display: none !important;
     z-index: 10002;
 }
 .image-viewer-minimap img {
     width: 100%;
     height: 100%;
     object-fit: contain;
     opacity: 0.7;
 }
 .image-viewer-minimap .viewport-indicator {
     position: absolute;
     border: 2px solid #ff0000;
     background: rgba(255, 0, 0, 0.2);
     pointer-events: none;
 }
.image-viewer-sidebar {
     width: 20%;
     height: 100%;
     background: #f5f5f5;
     overflow-y: auto;
     display: flex;
     padding: 5px;
     flex-direction: column;
     gap: 10px;
    overscroll-behavior: contain;
 }
 .image-viewer-sidebar img {
     width: 100%;
     height: auto;
     object-fit: cover;
     cursor: pointer;
     border: 2px solid transparent;
     transition: all 0.2s ease;
 }
 .image-viewer-sidebar img:hover {
     border-color: #007bff;
 }
 .image-viewer-sidebar img.selected {
     border-color: #007bff;
     box-shadow: 0 0 8px rgba(0, 123, 255, 0.5);
 }
 .image-viewer-close {
     position: absolute;
     top: 15px;
     right: 15px;
     background: rgba(0, 0, 0, 0.7);
     color: white;
     border: none;
     border-radius: 50%;
     width: 40px;
     height: 40px;
     font-size: 20px;
     cursor: pointer;
     z-index: 10001;
 }
 .image-viewer-close:hover {
     background: rgba(0, 0, 0, 0.9);
 }
 .image-viewer-zoom-controls {
     position: absolute;
     bottom: 15px;
     left: 50%;
     transform: translateX(-50%);
     background: rgba(0, 0, 0, 0.7);
     border-radius: 20px;
     padding: 8px;
     display: flex;
     gap: 10px;
     z-index: 10000;
     pointer-events: auto;
     width: fit-content;
 }
 .image-viewer-zoom-controls button {
     background: rgba(255, 255, 255, 0.2);
     border: none;
     color: white;
     border-radius: 50%;
     width: 35px;
     height: 35px;
     cursor: pointer;
     font-size: 16px;
     z-index: 10001;
     pointer-events: auto;
     position: relative;
 }
 .image-viewer-zoom-controls button:hover {
     background: rgba(255, 255, 255, 0.3);
 }
 .zoom-instructions {
     position: absolute;
     bottom: 20px;
     left: 50%;
     transform: translateX(-50%);
     background: rgba(0, 0, 0, 0.7);
     color: white;
     padding: 8px 16px;
     border-radius: 20px;
     font-size: 12px;
     pointer-events: none;
     opacity: 0.8;
     transition: opacity 0.3s ease;
 }
 .zoom-instructions:hover {
     opacity: 1;
 }
 @media (max-width: 768px) {
       body{
    background:var(--bg-primary);
}
.rumor-container{
    padding:0px 3px ;
}
   .image-with-overlay{
       display: flex;
       flex-direction: column;
       align-items: center;
   }
   .image-overlay{
       position: static;
       order: -1;
       width: 100%;
       margin-bottom: 8px;
   }
   .overlay-caption-wrap{
       position: static;
       left: auto;
       right: auto;
       top: auto;
       bottom: auto;
       display: flex;
       justify-content: center;
       align-items: center;
   }
   .overlay-caption{
       text-align: start;
       margin-top: 10px;
   }
    .rumor-image{
        max-width: 100%;
        max-height: 430px;
        width: auto;
        height: auto;
        object-fit: cover;
        object-position: center;
    }
     .image-viewer-container {
         width: 100%;
         height: 100%;
         flex-direction: column;
     }
     .image-viewer-main {
         width: 100%;
         height: 90%;
     }
     .image-viewer-sidebar {
         width: 100%;
         flex-direction: row;
         height: 10%;
     }
     .zoom-instructions {
         font-size: 10px;
         padding: 6px 12px;
         bottom: 15px;
     }
     .image-viewer-zoom-controls {
         bottom: 100px;
         right: 10px;
     }
     .image-viewer-zoom-controls button {
         width: 30px;
         height: 30px;
         font-size: 14px;
     }
    .overlay-title .line-bg{
     display:inline;
     background-image: none;
     background-repeat: repeat, repeat;
     background-size: auto, auto;
     -webkit-box-decoration-break: clone;
     box-decoration-break: clone;
     padding: 1px 10px;
     font: 600 clamp(25px, 6vw, 39px) Google-Oswald,Arimo,Arial,sans-serif;
     line-height: 1;
     color: var(--accent-color);
     text-shadow: none}
 }
 .rumor-image {
     cursor: pointer;
     transition: transform 0.2s ease;
 }
 @media (max-width:480px){ 
    .overlay-title .line-bg{
     padding: 1px 10px;
     font: 600 clamp(15px, 7vw, 25px) Google-Oswald,Arimo,Arial,sans-serif;
    }
    .rumor-paragraph{
        font-size: 15px;
        line-height: 1.45;
    }
    .rumor-strong{
        font-size: 12px;
    }
    .rumor-h4{
        font-size: 14px;
    }
    .rumor-meta{
        font-size: 12px;
    }
    .rumor-description{
        font-size: 14px;
    }
    .rumor-source{
        font-size: 14px;
    }
    .rumor-source a{
        font-size: 14px;
    }
    .rumor-source a:hover{
        font-size: 14px;
    }
    .rumor-image{
        max-width: 100%;
        max-height: 300px;
        width: auto;
        height: auto;
        object-fit: cover;
        object-position: center;
    }
    .image-group img{width:150px;height:250px;}
    .overlay-text{
     font:600 clamp(25px, 3vw, 25px) Google-Oswald,Arimo,Arial,sans-serif;
 }
 @media screen and (max-width:240px){
    .overlay-text{
     font:400 clamp(15px, 3vw, 20px) Google-Oswald,Arimo,Arial,sans-serif;
    }
    .image-group img{
        width:130px;height:180px;
    }
 }
 .sidebar-section {
     width: 100%;
     margin-bottom: 1px;
 }
 .section-content {
     margin-left: 10px;
     height: 335px;
     overflow-y: auto;
     scrollbar-width: thin;
     overflow-x: hidden;
     box-sizing: border-box;
     scrollbar-width: thin;
 }
 .phone-grid {
     background-color: var(--bg-sidebar-section-bg-layer);
     display: grid;
     padding: 4px 0px 0px 0px;
     grid-template-columns: repeat(3, 1fr);
     width: 100%;
     box-sizing: border-box;
 }