:root{--primary-red:#e5322d;--primary-red-dark:#c21a15;--action-green:#28a745;--action-green-dark:#218838;--background-light:#f8f8fa;--background-white:#fff;--text-dark:#333;--text-light:#666;--text-article:#444;--border-color:#e0e0e0;--shadow-light:0 4px 12px rgba(0,0,0,.08);--shadow-strong:0 8px 24px rgba(0,0,0,.15)}*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background-color:var(--background-light);color:var(--text-dark);line-height:1.6}body.modal-open{overflow:hidden}.container{max-width:1200px;margin:0 auto;padding:0 20px}button{cursor:pointer;font-family:inherit}.header{position:sticky;top:0;width:100%;background-color:var(--background-white);z-index:1000;transition:box-shadow .3s ease;border-bottom:1px solid var(--border-color)}.header.scrolled{box-shadow:var(--shadow-light)}.navbar{display:flex;justify-content:space-between;align-items:center;height:70px}.logo{display:flex;align-items:center;text-decoration:none;cursor:pointer}.nav-menu{display:flex;list-style:none;gap:30px}.nav-menu a{color:var(--text-dark);text-decoration:none;font-weight:500;transition:color .3s ease;cursor:pointer}.nav-menu a:hover{color:var(--primary-red)}.hamburger{display:none;cursor:pointer;z-index:1001}.bar{display:block;width:25px;height:3px;margin:5px auto;background-color:var(--text-dark);transition:all .3s ease-in-out}.hamburger.active .bar:nth-child(2){opacity:0}.hamburger.active .bar:nth-child(1){transform:translateY(8px) rotate(45deg)}.hamburger.active .bar:nth-child(3){transform:translateY(-8px) rotate(-45deg)}.mobile-nav{position:fixed;top:70px;left:-100%;width:100%;height:calc(100vh - 70px);background-color:var(--background-white);display:flex;flex-direction:column;justify-content:flex-start;padding-top: 50px; align-items:center;transition:left .4s ease-in-out;z-index:999}.mobile-nav.active{left:0}.mobile-nav .nav-menu{flex-direction:column;gap:30px;font-size:1.5rem;text-align:center; width: 100%;}.hero{text-align:center;padding:70px 20px;background:linear-gradient(180deg,var(--background-white) 0%,var(--background-light) 100%)}.hero h1{font-size:3rem;margin-bottom:15px;color:var(--text-dark)}.hero p{font-size:1.2rem;color:var(--text-light);max-width:600px;margin:0 auto}#tools{padding:60px 0}#tools h2{text-align:center;font-size:2.5rem;margin-bottom:20px;color:var(--text-dark)}.tools-subtitle{text-align:center;max-width:600px;margin:0 auto 40px auto;font-size:1.1rem;color:var(--text-light)}#no-results-message{display:none;text-align:center;margin-top:30px;font-size:1.2rem;color:var(--text-light)}.tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:30px}

/* Tool Card Animation Styles - START */
.tool-card{
    background-color:var(--background-white);
    border-radius:12px;
    padding:30px;
    text-align:center;
    border:1px solid var(--border-color);
    cursor:pointer;
    transition:all .4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    position:relative;
    overflow:hidden
}
.tool-card:hover{
    transform:translateY(-10px) scale(1.02);
    box-shadow:0 15px 30px rgba(229,50,45,0.15);
    border-color:var(--primary-red)
}
.tool-card .icon img{
    transition:transform .4s ease;
    width:100%;
    height:100%;
    object-fit:contain
}
.tool-card:hover .icon img{
    transform:scale(1.15) rotate(5deg)
}
.tool-card:hover h3{
    color:var(--primary-red);
    transition:color .3s ease
}
/* Tool Card Animation Styles - END */

.tool-card .icon{margin-bottom:20px; width: 64px; height: 64px; object-fit: contain;}.tool-card h3{font-size:1.2rem;margin-bottom:10px;color:var(--text-dark)}.tool-card p{font-size:.9rem;color:var(--text-light)}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background-color:var(--background-light);z-index:2000;display:none;overflow-y:auto;animation:fadeIn .3s ease}.modal-header-nav{position:sticky;top:0;background-color:var(--background-white);box-shadow:var(--shadow-light);z-index:2001}.modal-navbar{display:flex;justify-content:space-between;align-items:center;height:70px;max-width:1200px;margin:auto;padding:0 20px}.modal-navbar .hamburger{display:none}.modal-navbar .nav-menu{display:flex}.modal-close-btn{font-size:2.5rem;color:var(--text-light);cursor:pointer;border:none;background:none;margin-left:20px}
.modal-header-nav .modal-close-btn svg {width: 28px; height: 28px; fill: #555; display: block;}
.modal-content-area{max-width:1200px;margin:40px auto;padding:0 20px}.modal-tool-title{text-align:center;font-size:2.5rem;margin-bottom:30px;color:var(--text-dark)}.drop-area{border:3px dashed var(--border-color);border-radius:8px;padding:50px;text-align:center;cursor:pointer;transition:border-color .3s,background-color .3s}.drop-area.dragover{border-color:var(--primary-red);background-color:#fff8f7}.drop-area-text{font-size:1.1rem;color:var(--text-light)}.drop-area-text span{background-color:var(--action-green);color:white;padding:16px 80px;border-radius:8px;font-weight:600;display:inline-block;margin-top:15px;transition:background-color .2s ease;font-size:1.1rem}#file-input{display:none}.file-list{margin-top:20px}.file-item{display:flex;justify-content:space-between;align-items:center;background-color:var(--background-white);border:1px solid var(--border-color);padding:10px 15px;border-radius:4px;margin-bottom:10px;font-size:.9rem}.remove-file{cursor:pointer;color:var(--primary-red);font-weight:700;border:none;background:none;font-size:1.2rem}.tool-options{margin-top:30px}.tool-options:not(:empty){padding-top:20px;border-top:1px solid var(--border-color)}.tool-options label{display:block;margin-bottom:10px;font-weight:600}.tool-options input,.tool-options select{width:100%;padding:10px;border-radius:4px;border:1px solid var(--border-color);margin-bottom:15px;background-color:var(--background-white);color:var(--text-dark)}.article-content{margin-top:50px;padding-top:30px;border-top:2px solid var(--border-color);color:var(--text-article)}.article-content h3{font-size:1.8rem;margin-bottom:15px;color:var(--primary-red)}.article-content h4{font-size:1.4rem;margin-top:25px;margin-bottom:15px}.article-content p,.article-content li{margin-bottom:15px;font-size:1.05rem;line-height:1.7}.article-content ul,.article-content ol{padding-left:25px}.static-modal-content{background-color:var(--background-white);padding:2rem;border-radius:8px}.static-modal-content h2{font-size:2.2rem;margin-bottom:20px;color:var(--primary-red)}.static-modal-content a{color:var(--primary-red)}.process-btn{display:block;width:100%;padding:15px;background-color:var(--primary-red);color:white;border:none;border-radius:8px;font-size:1.2rem;font-weight:700;cursor:pointer;transition:background-color .3s,display .3s;margin-top:30px}.process-btn:hover:not(:disabled){background-color:var(--primary-red-dark)}.process-btn:disabled{background-color:#ccc;cursor:not-allowed}#output-area{margin-top:40px;display:flex;flex-direction:column;align-items:center;gap:20px;width:100%}.download-container{text-align:center;background-color:var(--background-white);padding:20px;border-radius:8px;border:1px solid var(--border-color);width:100%;max-width:500px}.download-container p{margin-bottom:15px;font-weight:500;word-break:break-all}.download-link{display:inline-block;padding:16px 80px;font-size:1.1rem;background-color:var(--action-green);color:white;text-decoration:none;border-radius:8px;font-weight:600;transition:background-color .2s ease;border:none}.download-link:hover{background-color:var(--action-green-dark)}.loader-container{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(255,255,255,1);z-index:3000;display:none;flex-direction:column;justify-content:center;align-items:center}.loader{border:8px solid #f3f3f3;border-top:8px solid var(--primary-red);border-radius:50%;width:60px;height:60px;animation:spin 1s linear infinite}#loader-text{margin-top:20px;font-size:1rem;font-weight:500;color:var(--text-dark)}
#support-fab{position:fixed;bottom:50px;right:30px;background-color:var(--primary-red);color:white;width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;cursor:pointer;box-shadow:var(--shadow-strong);z-index:2002;transition:transform .3s ease}#support-fab:hover{transform:scale(1.1)}#ai-chat-modal{position:fixed;bottom:130px;right:30px;width:370px;max-width:90vw;height:500px;max-height:70vh;background-color:var(--background-white);border-radius:12px;box-shadow:var(--shadow-strong);z-index:2002;display:flex;flex-direction:column;overflow:hidden;animation:fadeIn .3s ease}
.chat-header{background-color:var(--primary-red);color:white;padding:15px;display:flex;justify-content:space-between;align-items:center}.chat-header h4{margin:0;font-size:1.1rem}#close-chat-btn{font-size:1.5rem;background:none;border:none;color:white;cursor:pointer}.chat-messages{flex-grow:1;padding:15px;overflow-y:auto;display:flex;flex-direction:column;gap:12px;background-color:var(--background-light)}.chat-message{padding:10px 15px;border-radius:18px;max-width:80%;line-height:1.4}.user-message{background-color:#e0e0e0;color:var(--text-dark);align-self:flex-end;border-bottom-right-radius:4px}.ai-message{background-color:var(--primary-red);color:white;align-self:flex-start;border-bottom-left-radius:4px}.chat-form{display:flex;padding:15px;border-top:1px solid var(--border-color)}#chat-input{flex-grow:1;padding:10px;border:1px solid var(--border-color);border-radius:20px;outline:none}#chat-submit{background:none;border:none;font-size:1.5rem;color:var(--primary-red);margin-left:10px;cursor:pointer}.hidden{display:none!important}.footer{background-color:#2c3e50;background-image:linear-gradient(135deg,#34495e 0%,#2c3e50 100%);color:#ecf0f1;padding:60px 0 20px 0;font-size:.95rem}.footer-grid{display:grid;grid-template-columns:2fr repeat(4,1fr);gap:40px;max-width:1200px;margin:0 auto;padding:0 20px}
.footer-col:first-child{ padding-bottom: 20px; }
.footer-col h4{margin-bottom:20px;color:#fff;font-weight:600;text-transform:uppercase;font-size:1rem}.footer-col p{line-height:1.7;color:#bdc3c7}.footer-col ul{list-style:none}.footer-col ul li{margin-bottom:12px}.footer-col ul li a{color:#bdc3c7;text-decoration:none;transition:color .3s;cursor:pointer}.footer-col ul li a:hover{color:var(--primary-red)}
.social-icons-container{display:flex;align-items:center;justify-content:flex-start;gap:15px;margin-top:15px;}
.social-icons-container img{width:36px;height:36px;transition:transform .2s ease;}
.social-icons-container img:hover{transform:scale(1.1);}
.footer-logo-text {font-weight:bold; font-size:40px; color:black !important;}
.footer-bottom{text-align:center;margin-top:40px;padding-top:20px;border-top:1px solid #46627f;color:#95a5a6;font-size:.9rem}
.footer-bottom a {color:#ecf0f1; text-decoration: none; background-color: #34495e; padding: 4px 12px; border-radius: 4px; transition: background-color 0.3s ease; cursor:pointer;}
.footer-bottom a:hover {background-color: var(--primary-red);}

#pdf-editor-container {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    position: relative;
    width: 100%;
    max-width: 1200px;
}

#editor-toolbar {
    position: sticky; top: 70px;
    z-index: 10; display: flex; flex-direction: column; gap: 8px;
    padding: 10px; background-color: var(--background-white); border-radius: 8px;
    border: 1px solid var(--border-color); margin-bottom: 15px; width: auto; 
    margin-left: auto; margin-right: auto; box-shadow: 0 4px 12px rgba(0,0,0,.08);
}

#toolbar-top-row, #toolbar-bottom-row {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; width: 100%;
}

.tool-group {
    display: flex; align-items: center; gap: 8px; padding: 0 10px; position: relative;
    min-height: 38px;
}
.tool-group:not(:last-child) { border-right: 1px solid var(--border-color); }

fieldset { border: none; padding: 0; margin: 0; display: flex; align-items: center; gap: 8px; }
fieldset:disabled, .tool-group.disabled { opacity: .5; pointer-events: none; }


#editor-toolbar label { font-weight: 500; margin: 0 5px 0 0; user-select: none; }
#editor-toolbar select, #editor-toolbar input[type=number] { padding: 4px 8px; border-radius: 4px; border: 1px solid var(--border-color); height: 34px; box-sizing: border-box; }
#font-size-input { width: 70px; }
#editor-toolbar button {
    padding: 6px; border-radius: 4px; border: 1px solid var(--border-color);
    background-color: #fff; font-weight: 500; font-size: 16px; line-height: 1;
    min-width: 38px; height: 38px; display: flex; justify-content: center;
    align-items: center; gap: 6px; cursor: pointer;
}
#editor-toolbar button svg, #editor-toolbar button img { width: 20px; height: 20px; pointer-events: none; }
#editor-toolbar button.active { background-color: var(--primary-red); border-color: var(--primary-red); }
#editor-toolbar button.active svg, #editor-toolbar button.active { color: white; }
#editor-toolbar button.active svg { fill: white; }
#editor-toolbar button:disabled { opacity: 0.5; cursor: not-allowed; }

.font-style-buttons { display: flex; border: 1px solid var(--border-color); border-radius: 4px; overflow: hidden; height: 34px; }
.font-style-buttons button {
    font-family: 'Times New Roman', Times, serif; min-width: 30px; padding: 4px 8px;
    border: none; border-radius: 0; border-right: 1px solid var(--border-color); height: 100%; box-sizing: border-box;
}
.font-style-buttons button:last-child { border-right: none; }
.font-style-buttons button.active { background-color: #ffc0cb; border-color: #ffc0cb; color: #000; }
.bold { font-weight: bold; }
.italic { font-style: italic; }
.underline { text-decoration: underline; }

.color-palette-container { display: flex; align-items: center; gap: 8px; }
#selected-color-view { width: 28px; height: 28px; border: 1px solid #ccc; background-color: #000; cursor: pointer; }
.color-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px; }
.color-box { width: 20px; height: 20px; border: 1px solid #ccc; cursor: pointer; }

#thickness-btn { width: auto; padding: 0 8px; gap: 6px; }
#thickness-btn > span { font-size: 14px; font-weight: 500; }
#thickness-btn svg { width: 16px; height: 16px; fill: var(--text-dark); }
#thickness-dropdown {
    display: none; position: absolute; top: calc(100% + 5px); left: 50%;
    transform: translateX(-50%); background-color: var(--background-white);
    border: 1px solid var(--border-color); border-radius: 6px; padding: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,.1); z-index: 20; min-width: 150px;
}
.thickness-option { padding: 8px; cursor: pointer; border-radius: 4px; display: flex; align-items: center; justify-content: center; }
.thickness-option:hover { background-color: #f0f0f0; }
.thickness-option span { display: block; background-color: var(--text-dark); width: 100%; border-radius: 5px; }

#text-editor-container {
    position: absolute;
    display: none;
    border: 1px dashed var(--primary-red);
    background: rgba(255, 255, 255, .9);
    cursor: move;
    z-index: 20;
    padding: 0;
    box-sizing: border-box;
}
#text-editor-input {
    width: 100%;
    height: 100%;
    resize: none;
    border: none;
    outline: none;
    background: transparent;
    padding: 2px;
    box-sizing: border-box;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    font-weight: inherit;
    font-style: inherit;
    text-decoration: inherit;
    line-height: 1.1;
    white-space: pre-wrap;
    overflow-wrap: break-word;
}

#canvas-wrapper {
    position: relative;
    overflow: auto;
    max-width: 100%;
    border: 1px solid var(--border-color);
    border-radius: 4px;
}
#pdf-canvas {
    display: block;
    max-width: none; 
    height: auto;
    cursor: default;
    position: relative;
    z-index: 1;
}
#text-overlays-container { position: absolute; top: 0; left: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }
.editable-text-overlay {
    position: absolute; box-sizing: border-box; margin: 0; padding: 0; white-space: pre;
    color: transparent; background: transparent; border: none; outline: none; display: block;
    vertical-align: top; transition: background-color 0.2s, outline 0.2s;
    line-height: 1;
}
#pdf-editor-container.text-edit-mode .editable-text-overlay { 
    pointer-events: auto; 
    cursor: text;
    background-color: rgba(0, 123, 255, 0.08);
    outline: 1px dashed rgba(0, 123, 255, 0.4);
}
#pdf-editor-container.text-edit-mode .editable-text-overlay:hover { 
    background-color: rgba(0, 123, 255, 0.15);
    outline-width: 2px;
}
.editing {
    pointer-events: auto; outline: 2px dashed var(--primary-red) !important;
    background-color: rgba(229, 50, 45, 0.1) !important; color: black !important;
}

#editor-pagination { display: none; align-items: center; gap: 15px; margin-top: 10px; }
#editor-pagination button { padding: 8px 16px; background-color: var(--primary-red); color: white; border: none; border-radius: 4px; font-weight: 600; cursor: pointer; }
#editor-pagination button:disabled { background-color: #ccc; cursor: not-allowed; }
#page-indicator { font-weight: 600; }

#save-btn-editor {
    display: none; width: 100%; padding: 15px;
    background-color: var(--primary-red); color: white;
    border: none; border-radius: 8px; font-size: 1.2rem;
    font-weight: 700; cursor: pointer; transition: background-color .3s;
    margin-top: 20px;
}
#save-btn-editor:hover:not(:disabled) { background-color: var(--primary-red-dark); }
#save-btn-editor:disabled { background-color: #ccc; cursor: not-allowed; }


#delete-pages-viewer { display: none; flex-direction: column; background-color: white; padding: 15px; border-radius: 8px; border: 1px solid var(--border-color); }
#delete-pages-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid var(--border-color); flex-wrap: wrap; gap: 10px; }
#pdf-file-name { font-weight: bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 250px; }
.zoom-controls { display: flex; align-items: center; gap: 10px; }
.zoom-controls button { font-size: 1.5rem; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border-color); background-color: #f0f0f0; display: flex; align-items: center; justify-content: center; }
.zoom-controls span { font-weight: 600; }
.actions { display: flex; align-items: center; gap: 15px; }
#download-deleted-btn { background-color: var(--primary-red); color: white; padding: 16px 80px; border-radius: 8px; font-weight: 600; border: none; font-size: 1.1rem; }
.action-dropdown { position: relative; display: flex; }
#process-selection-btn { padding: 8px; border-radius: 5px 0 0 5px; border: none; color: white; line-height: 1; transition: background-color 0.2s; }
#action-toggle-btn { padding: 8px 10px; border-radius: 0 5px 5px 0; border: none; color: white; transition: background-color 0.2s; }
.action-dropdown .delete-mode, .action-dropdown .delete-mode:hover { background-color: var(--primary-red); border-right: 1px solid var(--primary-red-dark); }
.action-dropdown .save-mode, .action-dropdown .save-mode:hover { background-color: var(--action-green); border-right: 1px solid var(--action-green-dark); }
#action-menu { position: absolute; top: 105%; right: 0; background-color: white; border: 1px solid var(--border-color); border-radius: 5px; box-shadow: var(--shadow-light); list-style: none; padding: 5px 0; z-index: 10; min-width: 150px; }
#action-menu.hidden { display: none; }
#action-menu li { padding: 10px 15px; cursor: pointer; display: flex; align-items: center; gap: 8px; }
#action-menu li:hover { background-color: #f0f0f0; }
#action-menu li svg { width: 18px; height: 18px; }
#delete-layout-container { display: flex; gap: 15px; height: 70vh; }
#page-thumbnails-sidebar { width: 200px; overflow-y: auto; background-color: #f8f8fa; border: 1px solid var(--border-color); border-radius: 5px; padding: 10px; display: flex; flex-direction: column; gap: 10px; }
#main-page-viewer { flex: 1; background-color: #e9e9e9; border-radius: 5px; overflow: auto; padding: 10px; display: flex; justify-content: flex-start; align-items: flex-start; }
#main-viewer-canvas { box-shadow: 0 4px 10px rgba(0,0,0,0.2); }
.thumbnail-item { position: relative; border: 2px solid transparent; border-radius: 4px; padding: 5px; text-align: center; background: white; cursor: pointer; transition: border-color 0.2s; }
.thumbnail-item:hover { border-color: #aaa; }
.thumbnail-item.active { border-color: var(--primary-red); box-shadow: 0 0 8px rgba(229, 50, 45, 0.5); }
.thumbnail-item canvas { width: 100%; height: auto; border: 1px solid #ccc; }
.thumbnail-item .page-number { font-size: 0.9rem; margin-top: 5px; font-weight: 500; }
.thumbnail-item input[type="checkbox"] { position: absolute; top: 10px; left: 10px; width: 25px; height: 25px; accent-color: black; cursor: pointer; }
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.reveal{opacity:0;transform:translateY(30px);transition:opacity .6s ease,transform .6s ease}.reveal.active{opacity:1;transform:translateY(0)}@media (max-width:992px){.footer-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}}@media (max-width:768px){.nav-menu{display:none}.hamburger{display:block}.footer-grid{grid-template-columns:1fr;text-align:center}.footer-grid .footer-col:first-child{align-items:center;display:flex;flex-direction:column} .social-icons-container{justify-content:center}}@media (max-width:576px){.hero h1{font-size:2.2rem}.modal-tool-title{font-size:1.8rem}#ai-chat-modal{bottom:80px;right:15px}#support-fab{bottom:20px;right:20px}}

#pdf-editor-container.text-edit-mode .editable-text-overlay {
border: 2px dotted blue !important;
cursor: pointer !important;
transition: background-color 0.2s;
}
#pdf-editor-container.text-edit-mode .editable-text-overlay:hover {
background-color: rgba(0, 123, 255, 0.15) !important;
}
#pdf-editor-container.text-edit-mode .editable-text-overlay.editing {
border: 1px dashed var(--primary-red) !important;
cursor: text !important;
}

@media (max-width:768px){.mobile-nav .nav-menu li a {
        display: block;
        padding: 15px;
        font-size: 1.2rem;
        border-bottom: 1px solid #eee;
        width: 100%;
    }
}