@font-face {
    font-family: 'Pyidaungsu';
    src: url('fonts/Pyidaungsu-2.5.3_Regular.ttf') format('truetype');
}

@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

:root {
    --blue: #4285F4; --red: #EA4335; --yellow: #FBBC05; --green: #e70abe;
    
    --primary-color: #09a22f; 
    --primary-color-dark: #df12bd;

    /* Light Mode (Default) - Unchanged */
    --secondary-color: #eeebed; 
    --secondary-color-dark: #e90bda;
    --danger-color: #ef4444; 
    --danger-color-dark: #ec13bd;
    --background-gradient: linear-gradient(135deg, #f9fafb 0%, #e5e7eb 100%);
    --card-inner-background: #ffffff;
    --header-background: rgba(255, 255, 255, 0.8);
    --text-primary: #111827;
    --text-secondary: #634b5f;
    --border-color: #d1d5db;
    --shadow-sm: 0 2px 4px rgba(10, 145, 98, 0.377);
    --shadow-md: 0 4px 12px rgba(14, 94, 191, 0.407);
    --shadow-lg: 0 15px 30px -10px rgba(11, 240, 42, 0.199);
    --font-family: 'Pyidaungsu', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    --btn-secondary-bg: #e8eef0;
    --btn-secondary-hover-bg: #d1d5db;
    --btn-tertiary-bg: #262627;
    --btn-tertiary-hover-bg: #375140;
    --btn-tertiary-text: #ffffff;
}

/* --- Dark Mode Overrides (New "Gemini" Theme) --- */
body.dark-mode {
    --background-gradient: linear-gradient(135deg, #202124 0%, #171717 100%);
    --card-inner-background: #202124;
    --header-background: rgba(32, 33, 36, 0.7);
    --secondary-color: #201e1e;
    --text-primary: #e8eaed;
    --text-secondary: #bdc1c6;
    --border-color: #3c4043;
    --shadow-lg: 0 15px 30px -10px rgba(0,0,0,0.4);

    --btn-secondary-bg: #34373aad;
    --btn-secondary-hover-bg: 34373aad;
    --btn-tertiary-bg: #11dcef;
    --btn-tertiary-hover-bg: #eb11bb;
    --btn-tertiary-text: #202124;
}

body {
    margin: 0;
    font-family: var(--font-family);
    background-image: var(--background-gradient);
    background-color: #f9fafb;
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: all 0.3s ease;
}

* { -webkit-tap-highlight-color: rgba(17, 176, 224, 0.366); }

.app-header {
    background-color: var(--header-background);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: var(--shadow-sm);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.5rem 1.5rem;
    position: sticky; top: 0; z-index: 100;
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}
.app-nav { display: flex; gap: 0.5rem; margin: 0 auto; }
.nav-btn {
    font-family: var(--font-family); font-size: 0.9rem; font-weight: 700;
    padding: 0.6rem 1.2rem; border: none; border-radius: 0.75rem;
    background-color: transparent; color: var(--text-secondary);
    cursor: pointer; transition: all 0.2s ease;
}
.nav-btn.active { background-color: var(--primary-color); color: white; box-shadow: var(--shadow-md); }
.nav-btn:not(.active):hover { background-color: var(--secondary-color); color: var(--text-primary); }

.theme-toggle {
    position: absolute; right: 1.5rem;
    background: var(--secondary-color);
    border: 1px solid var(--border-color);
    border-radius: 50%; width: 40px; height: 40px;
    display: flex; justify-content: center; align-items: center;
    cursor: pointer; color: var(--text-primary);
    transition: all 0.3s ease;
}
.theme-toggle:hover { transform: rotate(15deg) scale(1.1); box-shadow: var(--shadow-md); }
.theme-toggle svg { width: 20px; height: 20px; }

.page-container { padding: 1.5rem; box-sizing: border-box; }
.main-container { width: 100%; max-width: 800px; margin: 0 auto; transition: max-width 0.3s ease; }

.converter-card {
    border-radius: 1.5rem;
    box-shadow: var(--shadow-lg);
    position: relative;
    background: transparent;
    transition: box-shadow 0.3s ease;
    padding: 3px; 
}
.card-header { text-align: center; padding: 2.5rem 2rem 1.5rem; }
.card-header h1 { font-size: 1.875rem; font-weight: 800; margin: 0; color: var(--text-primary); }
.card-header p { font-size: 1rem; color: var(--text-secondary); margin-top: 0.5rem; }
.card-body { padding: 2rem; }

.converter-card > * { position: relative; z-index: 2; }

.converter-card::after {
    content: ''; 
    position: absolute;
    background: var(--card-inner-background);
    z-index: 1; 
    transition: background-color 0.3s ease;
    top: 3px;
    left: 3px;
    width: calc(100% - 6px);
    height: calc(100% - 6px);
    border-radius: calc(1.5rem - 3px);
}

@keyframes spin { to { --angle: 360deg; } }
.converter-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: conic-gradient(from var(--angle), var(--blue), var(--green), var(--yellow), var(--red), var(--blue));
    border-radius: inherit;
    animation: spin 4s linear infinite;
    z-index: 0;
}

/* More beautiful animated border for dark mode */
body.dark-mode .converter-card::before {
    background: conic-gradient(from var(--angle), #d9d207, #db2777, #14b8a6, #06dc0a);
}

@media (min-width: 992px) { .main-container { max-width: 1100px; } }

.upload-box{border:2px dashed var(--border-color);border-radius:1rem;padding:2.5rem;text-align:center;cursor:pointer;transition:all .3s}.upload-box:hover,.upload-box.dragover{background-color:rgba(79,70,229,.05);border-color:var(--primary-color);transform:translateY(-5px);box-shadow:var(--shadow-md)}.upload-icon{color:var(--primary-color);margin-bottom:1rem}.upload-text{font-weight:700;font-size:1.125rem;margin:0}.upload-hint{font-size:.875rem;color:var(--text-secondary);margin-top:.5rem}.image-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:1rem;max-height:400px;overflow-y:auto;border:1px solid var(--border-color);border-radius:1rem;padding:1rem;background-color:var(--secondary-color);margin-bottom:1rem;transition:background-color .3s ease}.image-preview-item{position:relative;border-radius:.5rem;overflow:hidden;border:1px solid var(--border-color);background-color:var(--card-inner-background);box-shadow:0 1px 3px rgba(0,0,0,.05);aspect-ratio:1/1;cursor:grab;transition:transform .2s,box-shadow .2s}.image-preview-item.dragging{opacity:.5;transform:scale(1.05);box-shadow:0 10px 20px rgba(0,0,0,.2);cursor:grabbing}.image-preview-item img{width:100%;height:100%;object-fit:cover}.item-remove-btn{position:absolute;top:5px;right:5px;background-color:rgba(239,68,68,.8);color:white;border:none;border-radius:50%;width:24px;height:24px;font-size:14px;line-height:24px;cursor:pointer;transition:background-color .2s}.item-remove-btn:hover{background-color:var(--danger-color)}.watermark-options,.page-setup-options{background-color:var(--secondary-color);border-radius:1rem;padding:1.5rem;margin-bottom:1.5rem;text-align:left;border:1px solid var(--border-color);transition:background-color .3s ease,border-color .3s ease}.options-title{margin-top:0;margin-bottom:1.5rem;font-size:1.125rem;font-weight:700;text-align:center}.form-group{margin-bottom:1rem}.form-group:last-child{margin-bottom:0}.form-label{display:block;font-size:.875rem;font-weight:600;color:var(--text-secondary);margin-bottom:.5rem}.form-input,select.form-input{width:100%;padding:.75rem 1rem;font-size:1rem;border-radius:.5rem;border:1px solid var(--border-color);box-sizing:border-box;transition:border-color .2s,box-shadow .2s,background-color .3s,color .3s;font-family:var(--font-family);background-color:var(--card-inner-background);color:var(--text-primary)}select.form-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");background-position:right .5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem}.form-input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px rgba(79,70,229,.2)}textarea.form-input{resize:vertical;min-height:80px}.form-slider{width:100%;cursor:pointer}.form-input-color{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:48px;background-color:transparent;border:1px solid var(--border-color);border-radius:.5rem;cursor:pointer}.form-input-color::-webkit-color-swatch{border-radius:.375rem;border:none}.form-input-color::-moz-color-swatch{border-radius:.375rem;border:none}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem 1.5rem}.preset-section{margin-bottom:1.5rem}.preset-buttons{display:flex;gap:.75rem}.preset-btn{flex-grow:1;font-family:var(--font-family);font-size:.875rem;font-weight:700;padding:.6rem 1rem;background-color:var(--card-inner-background);color:var(--text-primary);border:1px solid var(--border-color);border-radius:.5rem;cursor:pointer;transition:all .2s}.preset-btn:hover{background-color:var(--secondary-color);border-color:#9ca3af}.preset-btn:active{box-shadow:inset 0 2px 4px rgba(0,0,0,.1)}#editor-container{border:1px solid var(--border-color);border-radius:.75rem;overflow:hidden;margin-bottom:1.5rem;box-shadow:var(--shadow-sm)}#editor{height:450px;font-size:16px;background-color:var(--card-inner-background)}.ql-toolbar{background-color:var(--secondary-color) !important;border-bottom:1px solid var(--border-color) !important}.ql-container{border:none !important}.ql-editor{font-family:var(--font-family);color:var(--text-primary)}.ql-snow .ql-stroke{stroke:var(--text-secondary)}.ql-snow .ql-picker-label{color:var(--text-secondary)}.ql-snow .ql-fill{fill:var(--text-secondary)}.status-text{color:var(--text-secondary);font-size:.875rem;min-height:1.25rem;margin-bottom:1.5rem;text-align:center}.button-group{display:flex;flex-wrap:wrap;gap:1rem}.btn{display:inline-flex;justify-content:center;align-items:center;gap:.5rem;font-family:var(--font-family);font-size:1rem;font-weight:700;padding:.875rem 1.5rem;border-radius:.75rem;border:none;cursor:pointer;transition:all .2s ease-in-out;flex-grow:1;box-shadow:var(--shadow-sm)}.btn:disabled{cursor:not-allowed;opacity:.6}.btn:not(:disabled):hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}.btn:not(:disabled):active{transform:translateY(-1px)}.btn-primary{background-color:var(--primary-color);color:white}.btn-primary:not(:disabled):hover{background-color:var(--primary-color-dark)}.btn-secondary{background-color:var(--btn-secondary-bg);color:var(--text-primary);border:1px solid var(--border-color)}.btn-secondary:not(:disabled):hover{background-color:var(--btn-secondary-hover-bg)}.btn-tertiary{background-color:var(--btn-tertiary-bg);color:var(--btn-tertiary-text)}.btn-tertiary:not(:disabled):hover{background-color:var(--btn-tertiary-hover-bg)}.btn-danger{background-color:var(--danger-color);color:white}.btn-danger:not(:disabled):hover{background-color:var(--danger-color-dark)}.btn-add-more{width:100%;margin-bottom:1.5rem}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.7);display:flex;justify-content:center;align-items:center;z-index:1000;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}.modal-overlay:not(.hidden){opacity:1;visibility:visible}.modal-content{background-color:var(--card-inner-background);width:90%;height:90%;max-width:900px;border-radius:1rem;box-shadow:0 10px 30px rgba(0,0,0,.2);position:relative;display:flex;flex-direction:column;padding:1rem;transform:scale(.95);transition:transform .3s ease}.modal-overlay:not(.hidden) .modal-content{transform:scale(1)}.modal-close-btn{position:absolute;top:-15px;right:-15px;width:36px;height:36px;background-color:var(--text-primary);color:var(--card-inner-background);border:2px solid var(--card-inner-background);border-radius:50%;font-size:1.5rem;line-height:32px;text-align:center;cursor:pointer;z-index:10;box-shadow:0 4px 10px rgba(0,0,0,.3)}#pdf-viewer{width:100%;height:100%;border:1px solid var(--border-color);border-radius:.5rem}.hidden{display:none !important}

/* --- Mobile View အတွက် Padding များကို လျှော့ချခြင်း --- */
@media (max-width: 767px) {
    .page-container { 
        padding: 0.75rem; 
    }
    .card-header { 
        padding: 1.5rem 1rem 1rem; 
    }
    .card-body { 
        padding: 1.5rem; 
    }
    .upload-box { 
        padding: 2rem 1rem; /* Upload box ကို ပိုကျစ်လစ်စေရန် */
    }
    .form-grid { 
        grid-template-columns: 1fr; 
        gap: 0.75rem; 
    }
    .card-header h1 { 
        font-size: 1.5rem; 
    }
}