.elementor-450 .elementor-element.elementor-element-3f2ef82{padding:30px 30px 30px 30px;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );line-height:var( --e-global-typography-primary-line-height );color:var( --e-global-color-primary );}.elementor-450 .elementor-element.elementor-element-8a1ea27{text-align:center;}.elementor-450 .elementor-element.elementor-element-8a1ea27 .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );line-height:var( --e-global-typography-primary-line-height );}.elementor-450 .elementor-element.elementor-element-4d765cf{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding:30px 30px 30px 30px;}.elementor-450 .elementor-element.elementor-element-4d765cf > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-450 .elementor-element.elementor-element-12c2dde{text-align:justify;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );}.elementor-450 .elementor-element.elementor-element-36184ea img{border-radius:5px 5px 5px 5px;}.elementor-450 .elementor-element.elementor-element-6b7bcdb{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding:30px 30px 30px 30px;}.elementor-450 .elementor-element.elementor-element-6b7bcdb > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-450 .elementor-element.elementor-element-3c352be img{border-radius:5px 5px 5px 5px;}.elementor-450 .elementor-element.elementor-element-abca6f0{text-align:justify;}.elementor-450 .elementor-element.elementor-element-d5e7dd8{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding:30px 30px 30px 30px;}.elementor-450 .elementor-element.elementor-element-d5e7dd8 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-450 .elementor-element.elementor-element-c240632{text-align:center;}.elementor-450 .elementor-element.elementor-element-916eec4 img{border-radius:5px 5px 5px 5px;}.elementor-450 .elementor-element.elementor-element-33f5d26{text-align:justify;}.elementor-450 .elementor-element.elementor-element-f0297b0:not(.elementor-motion-effects-element-type-background), .elementor-450 .elementor-element.elementor-element-f0297b0 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-0c9b6a0 );}.elementor-450 .elementor-element.elementor-element-f0297b0{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-450 .elementor-element.elementor-element-f0297b0 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-450 .elementor-element.elementor-element-b88e85d{text-align:center;}.elementor-450 .elementor-element.elementor-element-ad60fbf > .elementor-container > .elementor-column > .elementor-widget-wrap{align-content:center;align-items:center;}.elementor-450 .elementor-element.elementor-element-ad60fbf:not(.elementor-motion-effects-element-type-background), .elementor-450 .elementor-element.elementor-element-ad60fbf > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:linear-gradient(180deg, var( --e-global-color-0c9b6a0 ) 0%, var( --e-global-color-db231ca ) 100%);}.elementor-450 .elementor-element.elementor-element-ad60fbf{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-450 .elementor-element.elementor-element-ad60fbf > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-450 .elementor-element.elementor-element-b5d80aa.elementor-column > .elementor-widget-wrap{justify-content:center;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-size:var( --e-global-typography-accent-font-size );font-weight:var( --e-global-typography-accent-font-weight );line-height:var( --e-global-typography-accent-line-height );}.elementor-450 .elementor-element.elementor-element-bf04d14{width:auto;max-width:auto;padding:10px 10px 10px 10px;}.elementor-450 .elementor-element.elementor-element-4ea68c8{width:auto;max-width:auto;padding:10px 10px 10px 10px;}.elementor-450 .elementor-element.elementor-element-39300b9{width:auto;max-width:auto;padding:10px 10px 10px 10px;}.elementor-450 .elementor-element.elementor-element-6076762{width:auto;max-width:auto;padding:10px 10px 10px 10px;}.elementor-450 .elementor-element.elementor-element-19fe1e3{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding:30px 30px 30px 30px;}.elementor-450 .elementor-element.elementor-element-19fe1e3 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}@media(min-width:768px){.elementor-450 .elementor-element.elementor-element-be0064f{width:55%;}.elementor-450 .elementor-element.elementor-element-70da27b{width:45%;}.elementor-450 .elementor-element.elementor-element-640169a{width:45%;}.elementor-450 .elementor-element.elementor-element-340d16c{width:55%;}}@media(max-width:1024px){.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );}.elementor-450 .elementor-element.elementor-element-8a1ea27 .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );}.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-widget-image .widget-image-caption{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-widget-button .elementor-button{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );}}@media(max-width:767px){.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );}.elementor-450 .elementor-element.elementor-element-8a1ea27 .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );}.elementor-450 .elementor-element.elementor-element-4d765cf{padding:20px 10px 20px 10px;}.elementor-450 .elementor-element.elementor-element-0ab82d4 > .elementor-element-populated{padding:0px 0px 0px 0px;}.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-widget-image .widget-image-caption{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-450 .elementor-element.elementor-element-6b7bcdb{padding:20px 10px 20px 10px;}.elementor-450 .elementor-element.elementor-element-77e354f > .elementor-element-populated{padding:0px 0px 0px 0px;}.elementor-450 .elementor-element.elementor-element-d5e7dd8{padding:20px 10px 20px 10px;}.elementor-450 .elementor-element.elementor-element-3e890d1 > .elementor-element-populated{padding:0px 0px 0px 0px;}.elementor-widget-button .elementor-button{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );}.elementor-450 .elementor-element.elementor-element-19fe1e3{padding:20px 10px 20px 10px;}.elementor-450 .elementor-element.elementor-element-ee656ec > .elementor-element-populated{padding:0px 0px 0px 0px;}}/* Start custom CSS for html, class: .elementor-element-00856e0 */:root {
      --bg: #f8fafc;
      --card: #fff;
      --text: #1e293b;
      --muted: #64748b;
      --primary: #06b6d4;
      --primary-dark: #0891b2;
      --highlight: #fef08a;
      --danger: #f43f5e;
      --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
      --border-color: #e2e8f0;
      --primary-light: #bae6fd;
    }

    h1, h2 { color: var(--text); }

    main.container {
 
      flex-grow: 1;
      display: grid;
      grid-template-columns: 360px 1fr;
      gap: 24px;
      min-height: 0;
    }

    .sidebar {
      background: var(--card);
      border-radius: 12px;
      padding: 20px 16px;
      box-shadow: var(--shadow);
      display: flex;
      flex-direction: column;
      overflow-y: auto;
      max-height: calc(100vh - 130px);
    }

    .sidebar button {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 12px;
      width: 100%;
      margin-bottom: 12px;
      padding: 14px 18px;
      border-radius: 8px;
      border: 1px solid var(--border-color);
      background: #fff;
      cursor: pointer;
      text-align: left;
      font-size: 1rem;
      font-weight: 500;
      transition: all 0.2s ease;
      user-select: none;
      white-space: nowrap;
    }

    .sidebar button:hover:not(.active) {
      background: #f1f5f9;
      border-color: #cbd5e1;
    }

    .sidebar button.active {
      background: var(--primary);
      color: #fff;
      border-color: var(--primary-dark);
      font-weight: 600;
    }

    .sidebar hr {
      border-top: 1px solid var(--border-color);
      margin: 20px 0;
      width: 100%;
    }

    .sidebar small.muted {
      text-align: center;
      color: var(--muted);
      font-size: 0.9rem;
      line-height: 1.3;
      margin-top: auto;
      user-select: none;
    }

    section.panel {
      background: var(--card);
      border-radius: 12px;
      padding: 24px;
      box-shadow: var(--shadow);
      overflow-y: auto;
      max-height: calc(100vh - 130px);
      display: flex;
      flex-direction: column;
    }

    .module > h2 {
      font-weight: 600;
      font-size: 1.5rem;
      margin-bottom: 12px;
    }

    .muted { color: var(--muted); font-size: 0.95rem; }

    label.drop {
      border: 2px dashed var(--border-color);
      border-radius: 8px;
      padding: 32px 24px;
      text-align: center;
      color: var(--muted);
      cursor: pointer;
      transition: border-color 0.2s, background 0.2s;
      user-select: none;
      font-size: 1.15rem;
      margin-top: 12px;
      display: block;
      max-width: 100%;
    }

    label.drop small { display: block; margin-top: 6px; font-size: 0.9rem; }

    label.drop.drag-over {
      border-color: var(--primary);
      background: #e0f2fe;
      color: var(--primary-dark);
    }

    input[type="file"] { display: none; }

    .actions {
      display: flex;
      gap: 14px;
      margin-top: 18px;
      flex-wrap: wrap;
      justify-content: flex-start;
    }

    .btn {
      padding: 12px 22px;
      border-radius: 8px;
      border: none;
      cursor: pointer;
      font-weight: 600;
      font-size: 1rem;
      transition: background 0.2s ease;
      user-select: none;
      flex-shrink: 0;
      white-space: nowrap;
    }

    .btn.primary { background: var(--primary); color: #fff; }
    .btn.primary:hover { background: var(--primary-dark); }
    .btn:not(.primary) { background: var(--border-color); color: var(--text); border: 1.5px solid var(--border-color); }
    .btn:not(.primary):hover { background: #cbd5e1; }

    pre#preview_text {
      white-space: pre-wrap;
      word-break: break-word;
      background: #1e293b;
      color: #f8fafc;
      padding: 18px;
      border-radius: 8px;
      min-height: 140px;
      max-height: 320px;
      overflow-x: auto;
      margin-top: 20px;
      font-family: 'Courier New', Courier, monospace;
      font-size: 0.95rem;
      user-select: text;
    }

    .input-group {
      display: flex;
      gap: 12px;
      margin-top: 18px;
      flex-wrap: nowrap;
    }

    .input-group input {
      padding: 12px;
      border: 1.5px solid var(--border-color);
      border-radius: 8px;
      flex-grow: 1;
      font-size: 1rem;
      outline-offset: 0;
      outline-color: var(--primary-light);
      transition: outline-color 0.3s ease, border-color 0.3s ease;
    }

    .input-group input:focus {
      outline-color: var(--primary);
      border-color: var(--primary);
    }

    #viewer {
      position: relative;
      border: 1px solid var(--border-color);
      border-radius: 8px;
      overflow: auto;
      max-height: 600px;
      background: #fff;
      font-size: 1rem;
      margin-top: 18px;
      user-select: text;
    }

    #viewer canvas { display: block; margin: 0 auto; max-width: 100%; height: auto !important; }

    #viewer .textLayer {
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      overflow: hidden;
      line-height: 1.0;
      font-size: 1rem;
      pointer-events: none;
      user-select: text;
    }

    #viewer .textLayer span { position: absolute; color: transparent; user-select: text; }

    .textLayer .highlight {
      background-color: var(--highlight);
      border-radius: 3px;
      padding: 0 4px;
      pointer-events: auto;
    }

    .status-message {
      padding: 12px;
      border-radius: 8px;
      margin-top: 16px;
      font-size: 0.95rem;
      user-select: none;
    }

    .status-error { background: #fee2e2; color: var(--danger); border: 1.5px solid var(--danger); }
    .status-info { background: #dbeafe; color: #1e40af; border: 1.5px solid #93c5fd; }

    /* Responsive */
    @media (max-width: 992px) {
      main.container { grid-template-columns: 280px 1fr; gap: 18px; margin: 24px auto; padding: 12px; }
      .sidebar { max-height: calc(100vh - 120px); padding: 18px 14px; }
      section.panel { padding: 20px; max-height: calc(100vh - 120px); }
    }

    @media (max-width: 768px) {
      main.container { display: flex; flex-direction: column; margin: 20px 12px; padding: 0; gap: 12px; }
      .sidebar { order: 2; max-height: unset; padding: 16px 12px; overflow: visible; border-radius: 0 0 12px 12px; }
      section.panel { order: 1; padding: 18px 14px; max-height: none; overflow: visible; border-radius: 12px 12px 0 0; }
      .sidebar small.muted { margin-top: 16px; }
      .sidebar button { font-size: 1.1rem; padding: 14px 16px; }
      label.drop { padding: 28px 18px; font-size: 1.1rem; }
      .actions { justify-content: center; }
      pre#preview_text { max-height: 240px; font-size: 0.9rem; padding: 14px; }
      #viewer { max-height: 400px; margin-top: 12px; }
    }

    @media (max-width: 480px) {
      header h1 { font-size: 1.4rem; }
      .sidebar button { padding: 12px 14px; font-size: 1rem; }
      label.drop { padding: 24px 16px; font-size: 1rem; }
      .btn { padding: 10px 16px; font-size: 0.95rem; }
      .input-group input { font-size: 0.95rem; padding: 10px; }
      .input-group { flex-wrap: wrap; }
      .input-group .btn { width: 100%; }
    }/* End custom CSS */