/* ===== BASE ===== */
    html, body {
      font-family: Helvetica, Arial, sans-serif !important;
      font-size: 100% !important;
      background-color: #fff;
      line-height: 30px !important;
      padding: 0 !important;
      margin: 0;
    }
    a { color: #3c99f5; transition: 0.5s all; }
    a:hover { color: #f84251; text-decoration: none; }

    /* ===== HEADER ===== */
    .header { background: white; border-bottom: 1px solid #e0e0e0; }
    .top-header { padding: 10px 0; }
    .logo { float: left; margin-top: 0.25em; }
    .logo a { color: #333; font-weight: 700; font-size: 22px; text-decoration: none; display: block; line-height: 1.2; }
    .logo a span { color: #3c99f5; }

    nav { position: relative; float: right; }
    nav ul { padding: 0; float: right; margin: 0.75em 0; list-style: none; }
    nav li { display: inline; float: left; position: relative; }
    nav a { color: #333; display: inline-block; text-align: center; text-decoration: none; line-height: 40px; padding: 0.4em 0.9em; font-size: 13px; text-transform: uppercase; font-weight: 600; }
    nav a:hover { color: black; background-color: whitesmoke; border-radius: 4px; }
    nav li.active a { color: white; background-color: #3c99f5; border-radius: 4px; }
    nav a#pull { display: none; }

    /* ===== HERO STRIP ===== */
    .show-slider { background: whitesmoke; padding: 1% 1% 1.7% 1%; margin-bottom: 20px; }
    .top-headline { text-align: center; }
    .top-headline h1 { font-weight: bold; }

    /* ===== CONVERTER BOX ===== */
    .tab-content {
      padding: 15px 15px 0px 15px;
      border-radius: 3px;
      background: #3c99f5;
      overflow: hidden;
    }

    /* ===== UPLOAD BOX ===== */
    #upload-box-inside {
      border: 2px dotted #14518d;
      text-align: center;
      background-color: #3c99f5;
      padding: 70px 39px;
      cursor: pointer;
    }
    #upload-box-inside.hover { border: 2px dashed #fff !important; }
    #upload-box-inside p {
      padding: 20px 0px 0px 0px;
      font-size: 28px;
      color: white;
      margin: 0;
    }
    .converterinfo { color: white !important; font-size: 17px !important; font-style: italic !important; opacity: 0.9; }
    a#pdfSelect { color: #123a5d; font-weight: bold; }
    a#pdfSelect:hover { color: #f84251; }

    /* ===== FILE LIST ===== */
    #file-list-section { margin-top: 12px; }
    #file-list-section h3 { color: white; }

    .pdf-item {
      background: white;
      border-radius: 4px;
      padding: 8px 10px;
      margin-bottom: 6px;
      display: flex;
      align-items: center;
      gap: 8px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    }
    .pdf-item .pdf-icon {
      color: #f84251;
      font-size: 22px;
      flex-shrink: 0;
      line-height: 1;
    }
    .pdf-item .pdf-name {
      flex: 1;
      font-size: 14px;
      font-weight: 600;
      color: #333;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .pdf-item .pdf-size {
      font-size: 12px;
      color: #888;
      flex-shrink: 0;
    }
    .pdf-item .btn-arrow {
      background: #3c99f5;
      color: white;
      border: none;
      border-radius: 3px;
      width: 28px;
      height: 28px;
      font-size: 14px;
      line-height: 1;
      cursor: pointer;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
    }
    .pdf-item .btn-arrow:hover { background: #2a7fd4; }
    .pdf-item .btn-arrow:disabled { background: #ccc; cursor: default; }
    
    .pdf-item .btn-remove {
      background: #f84251;
      color: white;
      border: none;
      border-radius: 3px;
      width: 28px;
      height: 28px;
      font-size: 16px;
      line-height: 1;
      cursor: pointer;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
    }
    .pdf-item .btn-remove:hover { background: #c0392b; }
    
    .pdf-item .btn-preview {
      background: #28a745;
      color: white;
      border: none;
      border-radius: 3px;
      width: 28px;
      height: 28px;
      font-size: 15px;
      line-height: 1;
      cursor: pointer;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
    }
    .pdf-item .btn-preview:hover { background: #1e7e34; }
    
    .pdf-item .btn-download-jpg,
    .pdf-item .btn-download-png {
      color: white;
      border: none;
      border-radius: 3px;
      width: 40px;
      height: 28px;
      font-size: 11px;
      font-weight: bold;
      text-transform: uppercase;
      line-height: 1;
      cursor: pointer;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
    }
    .pdf-item .btn-download-jpg { background: #f0a500; }
    .pdf-item .btn-download-jpg:hover { background: #c8880a; }
    .pdf-item .btn-download-png { background: #8e44ad; }
    .pdf-item .btn-download-png:hover { background: #6c3483; }

    .pdf-item .page-label {
      font-size: 11px;
      color: #888;
      flex-shrink: 0;
      white-space: nowrap;
    }

    /* ===== PDF PREVIEW MODAL ===== */
    #pdf-modal-overlay {
      display: none;
      position: fixed;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: rgba(0,0,0,0.75);
      z-index: 9999;
      justify-content: center;
      align-items: center;
    }
    #pdf-modal-overlay.open { display: flex; }
    #pdf-modal {
      background: #fff;
      border-radius: 6px;
      box-shadow: 0 8px 40px rgba(0,0,0,0.5);
      width: 90%;
      max-width: 860px;
      max-height: 90vh;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      position: relative;
    }
    #pdf-modal-header {
      background: #3c99f5;
      color: white;
      padding: 12px 48px 12px 18px;
      font-weight: bold;
      font-size: 15px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      flex-shrink: 0;
    }
    #pdf-modal-close {
      position: absolute;
      top: 8px;
      right: 12px;
      background: #f84251;
      color: white;
      border: none;
      border-radius: 50%;
      width: 32px;
      height: 32px;
      font-size: 18px;
      font-weight: bold;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
      z-index: 1;
    }
    #pdf-modal-close:hover { background: #c0392b; }
    #pdf-modal-body {
      flex: 1;
      overflow-y: auto;
      background: #525659;
      padding: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
    }
    #pdf-modal-body canvas {
      background: white;
      box-shadow: 0 2px 8px rgba(0,0,0,0.4);
      max-width: 100%;
    }
    #pdf-modal-loading {
      color: white;
      font-size: 16px;
      padding: 40px;
      text-align: center;
    }
    #pdf-modal-footer {
      background: #f5f5f5;
      border-top: 1px solid #ddd;
      padding: 8px 16px;
      text-align: center;
      font-size: 13px;
      color: #555;
      flex-shrink: 0;
    }
    .adsbox {
      width: 100%;
      height: auto;
      margin: 0 auto;
      display: block;
      position: relative;
      text-align: center;
    }
    .jpg {
      width: 100%;
      height: auto;
    }
    .icon-image {
      clear: both;
      display: block;
      text-align: center;
      margin: 0 auto;
    }

    /* ===== ACTION BUTTONS ===== */
    #action-bar { margin-top: 14px; display: none; gap: 10px; }
    #action-bar.show { display: flex; flex-wrap: wrap; }

    .btn-merge {
      cursor: pointer;
      font-family: Helvetica, sans-serif;
      background-color: #f84251;
      color: white;
      text-transform: uppercase;
      font-size: 16px;
      font-weight: bold;
      border-radius: 3px;
      flex: 1;
      min-width: 180px;
      display: block;
      padding: 14px 0px;
      border: 1px solid #f84251;
      text-align: center;
      width: 100%;
      margin-bottom: 15px;
    }
    .btn-merge:hover { background-color: white; color: black; border: 1px solid #ccc; }
    .btn-merge:disabled { background-color: #aaa; border-color: #aaa; cursor: not-allowed; }

    .btn-reset-all {
      cursor: pointer;
      font-family: Helvetica, sans-serif;
      background-color: black;
      color: white;
      text-transform: uppercase;
      font-size: 16px;
      font-weight: bold;
      border-radius: 3px;
      padding: 5px 24px;
      border: 1px solid black;
      margin: 0 auto;
      display: block;
    }
    .btn-reset-all:hover { background-color: #333; }

    /* ===== STATUS ===== */
    #status-msg {
      margin-top: 10px;
      font-size: 14px;
      color: white;
      font-weight: bold;
      min-height: 22px;
      text-align: center;
    }

    /* ===== CONTENT SECTIONS ===== */
    .section-container { margin-top: 20px; display: block; position: relative; }
    .section-head { overflow: hidden; }
    .section-head h2 { font-weight: 700; text-align: center; }
    .features-grid-info { text-align: center; }
    .proscons {
      background: whitesmoke;
      border: 1px dashed gray;
      display: block;
      padding: 10px 20px;
      text-align: left;
    }

    /* ===== FOOTER ===== */
    .space { margin-bottom: 60px; }
    .footer { background-color: whitesmoke; }
    .footer-grids { text-align: center; margin: 0 auto; display: block; position: relative; padding: 2em 0; }
    .footer-grid p { font-size: 0.875em; line-height: 1.8em; }

    /* ===== SOCIAL ===== */
    .fbbt { background-color: #4267b2; color: white; padding: 0px 19px; border-radius: 5px; font-size: 13px; letter-spacing: 1px; display: inline-block; }
    .twbt { background-color: #55acee; color: white; padding: 0px 19px; border-radius: 5px; font-size: 13px; letter-spacing: 1px; display: inline-block; }
    .fbbt:hover, .twbt:hover { color: white; text-decoration: none; opacity: 0.7; }
    .facebook-bottom-share, .twitter-bottom-share { display: inline-block; padding-left: 10px; }

    /* ===== RESPONSIVE NAV ===== */
    @media screen and (max-width: 768px) {
      nav { height: auto; float: none; }
      nav ul { display: none; width: 100%; height: auto; background: #fff; padding-bottom: 20px; margin: 0; }
      nav li { width: 100%; display: block; float: none; }
      nav li a { border-bottom: 1px solid #eee; text-align: left; width: 100%; }
      nav a#pull { display: block; position: absolute; top: 12px; right: 0; color: #f26d7d; }
    }
    @media screen and (max-width: 600px) {
      h1 { font: 24px/36px Helvetica, Arial, sans-serif; }
    }

    body.dragging-over #upload-box-inside { border: 2px dashed #fff !important; background-color: #2a7fd4; }