/* =========================================
   1. CORE TOOL WORKSPACE & INPUTS
========================================= */
#toolView { max-width: 800px; margin: 40px auto; padding: 0 20px; }
.tool-header { margin-bottom: 20px; }
.btn-back { background: none; border: none; color: var(--text-muted); font-size: 1rem; font-weight: 600; cursor: pointer; }
.btn-back:hover { color: var(--primary); }

.workspace-container {
  background: var(--bg-card); padding: 40px; border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05); border: 1px solid var(--border-color);
}
.tool-workspace { display: none; }
.tool-workspace.view-active { display: block; }
.tool-workspace h2 { text-align: center; margin-bottom: 25px; font-size: 1.8rem; border-bottom: 1px solid var(--border-color); padding-bottom: 15px; color: var(--text-dark); }

.form-group { margin-bottom: 20px; }
.form-group label { display: block; font-weight: 500; margin-bottom: 8px; color: var(--text-dark); }
input, select, textarea { 
  width: 100%; padding: 12px; border: 1px solid var(--border-color); 
  border-radius: 6px; outline: none; background: var(--bg-main); color: var(--text-dark); 
  box-sizing: border-box; /* Prevetns input box from overflowing on mobile */
}
input:focus, select:focus, textarea:focus { border-color: var(--primary); }
.input-lg { font-size: 1.1rem; padding: 14px; }

/* =========================================
   NEW UTILITY CLASSES 
========================================= */
.w-100 { width: 100% !important; }
.mt-5 { margin-top: 5px !important; }
.mt-10 { margin-top: 10px !important; }
.mt-15 { margin-top: 15px !important; }
.mt-20 { margin-top: 20px !important; }
.mb-10 { margin-bottom: 10px !important; }
.mb-15 { margin-bottom: 15px !important; }
.mb-20 { margin-bottom: 20px !important; }
.display-block { display: block !important; }
.flex-row { display: flex; flex-direction: row; gap: 10px; flex-wrap: wrap; }
.flex-grow { flex-grow: 1; }
.flex-center { display: flex; justify-content: center; align-items: center; }
.flex-space-between { display: flex; justify-content: space-between; align-items: center; }
.gap-10 { gap: 10px; }
.img-responsive { max-width: 100%; height: auto; }

.upload-area { border: 2px dashed var(--border-color); padding: 20px; text-align: center; border-radius: 8px; background: var(--bg-main); color: var(--text-dark); }
.preview-area { text-align: center; margin-top: 15px; }
.preview-area img { max-width: 100%; max-height: 250px; border-radius: 8px; border: 1px solid var(--border-color); }
.result-area { background: var(--bg-main); padding: 20px; border-radius: 8px; border: 1px solid var(--border-color); color: var(--text-dark); }
.success-bg { background: rgba(56, 161, 105, 0.1); border-color: var(--success); text-align: center; }

/* SEO Content Boxes for Tools */
.seo-box { background: var(--bg-main); padding: 20px; border-radius: 8px; border: 1px solid var(--border-color); text-align: left; }
.seo-box h3 { font-size: 1.1rem; margin-bottom: 8px; color: var(--text-dark); }
.seo-box p { font-size: 0.95rem; color: var(--text-muted); }

.tool-seo-box {
  margin-top: 30px; padding: 25px; background: var(--bg-main); border-radius: 8px;
  border: 1px solid var(--border-color); border-left: 5px solid var(--primary);
  box-shadow: 0 2px 10px rgba(0,0,0,0.02); text-align: left;
}
.tool-seo-box h3 { color: var(--primary); margin-bottom: 15px; font-size: 1.3rem; display: flex; align-items: center; gap: 10px; }
.tool-seo-box h4 { color: var(--text-dark); margin-top: 20px; margin-bottom: 10px; font-size: 1.1rem; }
.tool-seo-box p, .tool-seo-box ul { color: var(--text-muted); margin-bottom: 15px; line-height: 1.7; font-size: 0.95rem; }
.tool-seo-box ul { margin-left: 20px; }
.tool-seo-box strong { color: var(--text-dark); }

/* =========================================
   2. SPECIFIC TOOLS: EXIF & Photo Privacy
========================================= */
.upload-zone { border: 3px dashed var(--primary); background: var(--bg-main); padding: 50px 20px; text-align: center; border-radius: 12px; cursor: pointer; transition: all 0.3s ease; margin-bottom: 20px; }
.upload-zone:hover, .upload-zone.dragover { background: rgba(229, 50, 45, 0.05); transform: scale(1.01); }
.upload-zone i { font-size: 3.5rem; color: var(--primary); margin-bottom: 15px; }
.upload-zone h3 { font-size: 1.5rem; margin-bottom: 5px; color: var(--text-dark); }
.upload-zone p { color: var(--text-muted); }

.exif-results-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; padding: 25px; margin-top: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.03); }
.exif-warning-header { background: rgba(220, 53, 69, 0.1); color: var(--danger); padding: 15px; border-radius: 8px; font-weight: 700; display: flex; align-items: center; gap: 10px; margin-bottom: 20px; border: 1px solid rgba(220, 53, 69, 0.2); }
.exif-safe-header { background: rgba(39, 174, 96, 0.1); color: #27ae60; padding: 15px; border-radius: 8px; font-weight: 700; display: flex; align-items: center; gap: 10px; margin-bottom: 20px; border: 1px solid rgba(39, 174, 96, 0.2); }

.exif-data-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 25px; }
.exif-data-item { background: var(--bg-main); padding: 12px; border-radius: 6px; border: 1px solid var(--border-color); }
.exif-data-item label { display: block; font-size: 0.85rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; margin-bottom: 4px; }
.exif-data-item span { font-weight: 700; color: var(--text-dark); word-break: break-all; }

.action-buttons-flex { display: flex; gap: 15px; flex-wrap: wrap; margin-top: 20px; }
.btn-scrub { background: var(--primary); color: white; border: none; padding: 15px 30px; font-size: 1.2rem; font-weight: 700; border-radius: 8px; cursor: pointer; flex-grow: 1; transition: 0.2s; }
.btn-scrub:hover { background: #c0392b; }
.btn-reset { background: transparent; border: 2px solid var(--text-muted); color: var(--text-muted); padding: 15px 30px; font-size: 1.1rem; font-weight: 600; border-radius: 8px; cursor: pointer; transition: 0.2s; }
.btn-reset:hover { background: var(--text-muted); color: white; }
.legal-focus-box { background: rgba(255, 165, 0, 0.1); border: 1px solid rgba(255, 165, 0, 0.3); padding: 20px; border-radius: 8px; margin-top: 15px; }
.legal-focus-box h4 { margin-bottom: 8px; font-size: 1rem; color: var(--color-orange); display: flex; align-items: center; gap: 8px; }
.legal-focus-box p { font-size: 0.85rem; color: var(--text-muted); line-height: 1.6; margin-bottom: 12px; }
.legal-focus-box .disclaimer-title { color: var(--danger); font-size: 0.95rem; margin-bottom: 5px; font-weight: 700; display: flex; align-items: center; gap: 8px; }

/* =========================================
   3. SPECIFIC TOOLS: Free Invoice Generator
========================================= */
.invoice-box { background: var(--bg-card); padding: 30px; border-radius: 12px; border: 1px solid var(--border-color); box-shadow: 0 4px 15px rgba(0,0,0,0.02); }
.invoice-header-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-bottom: 25px; }
.invoice-section-title { font-size: 1.1rem; color: var(--primary); margin-bottom: 15px; border-bottom: 2px solid var(--border-color); padding-bottom: 5px; }

.logo-upload-box { border: 2px dashed var(--border-color); padding: 20px; text-align: center; border-radius: 8px; cursor: pointer; transition: 0.2s; background: var(--bg-main); height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.logo-upload-box:hover { border-color: var(--primary); background: rgba(229, 50, 45, 0.05); }
.logo-preview { max-width: 150px; max-height: 80px; display: none; margin-bottom: 10px; }

.invoice-table-wrapper { overflow-x: auto; margin-bottom: 20px; }
.invoice-table { width: 100%; border-collapse: collapse; min-width: 600px; }
.invoice-table th, .invoice-table td { padding: 12px; border: 1px solid var(--border-color); text-align: left; }
.invoice-table th { background: var(--bg-main); font-weight: 600; color: var(--text-dark); }
.item-row input { width: 100%; border: 1px solid transparent; background: transparent; color: var(--text-dark); padding: 8px; border-radius: 4px; outline: none; font-family: inherit; font-size: 0.95rem; transition: 0.2s; }
.item-row input:focus { border-color: var(--primary); background: var(--bg-card); border: 1px solid var(--primary); }
.item-row input[type="number"] { text-align: right; }

.btn-add-item { background: var(--bg-main); color: var(--primary); border: 1px dashed var(--primary); padding: 12px; width: 100%; border-radius: 6px; cursor: pointer; font-weight: 600; transition: 0.2s; }
.btn-add-item:hover { background: rgba(229, 50, 45, 0.1); }
.btn-remove-row { color: var(--danger); cursor: pointer; background: none; border: none; font-size: 1.2rem; padding: 5px; }

.invoice-totals { width: 350px; float: right; margin-bottom: 30px; background: var(--bg-main); padding: 20px; border-radius: 8px; }
.invoice-totals .tot-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--border-color); }
.invoice-totals .tot-row label { font-weight: 600; color: var(--text-muted); }
.invoice-totals .tot-row input { width: 90px; text-align: right; padding: 5px; border: 1px solid var(--border-color); border-radius: 4px; background: var(--bg-card); color: var(--text-dark); }
.invoice-totals .tot-row.grand { font-size: 1.3rem; font-weight: 700; color: var(--text-dark); border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.clear-fix { clear: both; }

.top-controls { display: flex; flex-wrap: wrap; gap: 15px; justify-content: space-between; align-items: center; margin-bottom: 20px; background: var(--bg-card); padding: 15px; border-radius: 8px; border: 1px solid var(--border-color); }
.action-buttons-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 15px; margin-top: 20px; }
.btn-clear-form { background: transparent; border: 2px solid var(--danger); color: var(--danger); font-size: 1.1rem; padding: 15px; border-radius: 8px; cursor: pointer; font-weight: 600; transition: 0.2s; text-align: center; }
.btn-clear-form:hover { background: var(--danger); color: white; }

/* =========================================
   4. SPECIFIC TOOLS: Image Resizer & Mockup
========================================= */
.drag-drop-zone { border: 2px dashed var(--primary); padding: 40px 20px; text-align: center; border-radius: 10px; background: var(--bg-main); cursor: pointer; transition: all 0.3s ease; }
.drag-drop-zone.dragover { background: rgba(229, 50, 45, 0.1); border-color: var(--primary-hover); }
.preview-container { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 20px; justify-content: center; }
.preview-box { flex: 1; min-width: 250px; text-align: center; background: var(--bg-main); padding: 15px; border: 1px solid var(--border-color); border-radius: 8px; }
.preview-box img { max-width: 100%; max-height: 250px; border-radius: 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.controls-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-top: 20px; background: var(--bg-card); padding: 20px; border-radius: 8px; border: 1px solid var(--border-color); }
.control-item label { font-weight: 600; font-size: 0.95rem; display: block; margin-bottom: 5px; color: var(--text-dark); }
.btn-icon { padding: 10px 15px; font-size: 1.1rem; border-radius: 6px; border: 1px solid var(--border-color); cursor: pointer; background: var(--bg-card); color: var(--text-dark); }
.btn-icon:hover { background: var(--bg-main); color: var(--primary); border-color: var(--primary); }
.switch-wrapper { display: flex; align-items: center; gap: 10px; margin-top: 5px; }

.switch { position: relative; display: inline-block; width: 40px; height: 22px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--border-color); transition: .4s; border-radius: 22px; }
.slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; }
input:checked + .slider { background-color: var(--primary); }
input:checked + .slider:before { transform: translateX(18px); }

/* Mockup Specific */
.mockup-layout { display: grid; grid-template-columns: 350px 1fr; gap: 30px; align-items: start; }
.mockup-controls { background: var(--bg-card); padding: 25px; border-radius: 12px; border: 1px solid var(--border-color); box-shadow: 0 4px 15px rgba(0,0,0,0.02); }
.mockup-preview-area { background: var(--bg-main); border: 2px dashed var(--border-color); border-radius: 12px; min-height: 500px; display: flex; justify-content: center; align-items: center; padding: 40px; overflow: hidden; position: relative; }
#exportMockupArea { display: flex; justify-content: center; align-items: center; padding: 40px; transition: all 0.3s; }

.device-frame { position: relative; background: #000; box-shadow: 0 15px 35px rgba(0,0,0,0.2); overflow: hidden; display: flex; justify-content: center; align-items: center; }
.device-screen { background: #111; position: relative; overflow: hidden; width: 100%; height: 100%; background-size: cover; background-position: top center; background-repeat: no-repeat; display: flex; justify-content: center; align-items: center; color: #666; text-align: center; padding: 20px; }
.device-phone { width: 280px; height: 580px; border-radius: 40px; border: 12px solid #222; }
.device-phone::before { content: ''; position: absolute; top: -2px; left: 50%; transform: translateX(-50%); width: 120px; height: 25px; background: #222; border-radius: 0 0 15px 15px; z-index: 2; }
.device-laptop-wrapper { display: flex; flex-direction: column; align-items: center; }
.device-laptop { width: 550px; height: 340px; border-radius: 15px 15px 0 0; border: 15px solid #222; border-bottom: 5px solid #222; }
.laptop-base { width: 650px; height: 20px; background: #d0d0d0; border-radius: 0 0 15px 15px; position: relative; box-shadow: inset 0 -3px 5px rgba(0,0,0,0.2); }
.laptop-notch { width: 80px; height: 8px; background: #a0a0a0; margin: 0 auto; border-radius: 0 0 5px 5px; }

.upload-ss-btn { border: 2px dashed var(--primary); background: rgba(229, 50, 45, 0.05); color: var(--primary); padding: 20px; border-radius: 8px; text-align: center; cursor: pointer; font-weight: 600; margin-bottom: 20px; transition: 0.2s; }
.upload-ss-btn:hover { background: var(--primary); color: white; }

/* =========================================
   5. SPECIFIC TOOLS: Text & Utilities
========================================= */

/* WORD COUNTER */

/* 1. Page Background & Main Layout */


#toolView {
    max-width: 1000px;
    margin: 30px auto;
    padding: 0 15px;
}

/* 2. Main Tool Workspace */
.workspace-container {
    background: #ffffff;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.04);
    border: 1px solid #e2e8f0;
}

.tool-workspace h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.tool-workspace h2 i { color: var(--primary); }

/* 3. Textarea - High Focus */
#wcInput {
    width: 100%;
    min-height: 220px;
    padding: 15px;
    font-size: 1rem;
    line-height: 1.6;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #fdfdfd;
    color: #1e293b;
    transition: 0.2s;
    box-sizing: border-box;
    outline: none;
}

#wcInput:focus {
    border-color: var(--primary);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(229, 50, 45, 0.1);
}

/* 4. Action Buttons (Compact) */
.flex-space-between {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 12px;
}

.btn-secondary, .btn-danger {
    padding: 8px 18px;
    font-weight: 600;
    border-radius: 6px;
    font-size: 0.85rem;
    border: none;
    cursor: pointer;
    transition: 0.2s;
}

.btn-secondary { background: #e2e8f0; color: #475569; }
.btn-danger { background: #fee2e2; color: #b91c1c; }

/* 5. ULTRA-COMPACT STATS GRID (Ye hai wo change) */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); /* Boxes narrow kiye */
    gap: 10px;
    margin-top: 25px;
}

.stat-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 10px 5px; /* Padding kam karke size chota kiya */
    border-radius: 8px;
    text-align: center;
    transition: 0.2s;
}

.stat-box:hover {
    border-color: var(--primary);
    background: #fff;
    transform: translateY(-2px);
}

.stat-box h4 {
    font-size: 0.65rem; /* Label chota kiya */
    text-transform: uppercase;
    color: #64748b;
    margin-bottom: 2px;
    letter-spacing: 0.5px;
    font-weight: 700;
}

.stat-box p {
    font-size: 1.3rem; /* Number sharp rakha */
    font-weight: 800;
    color: #0f172a;
    margin: 0;
}

/* Special color for time stats */
#wcReadTime, #wcSpeakTime { color: var(--primary) !important; }

/* 6. Keyword Density (Clean Badges) */
.density-box {
    margin-top: 25px;
    padding: 15px 20px;
    background: #ffffff;
    border: 1px dashed #cbd5e1;
    border-radius: 10px;
}

.density-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    margin-top: 10px;
}

.density-list li {
    background: #f1f5f9;
    padding: 5px 12px;
    border-radius: 4px;
    font-size: 0.8rem;
    color: #334155;
    border: 1px solid #e2e8f0;
    font-weight: 600;
}

.density-list li strong { color: var(--primary); }

/* 7. SEO Content (Better Spacing) */
.tool-seo-box {
    margin-top: 50px;
    padding: 20px 0;
}

.tool-seo-box h1 { font-size: 1.8rem; color: #1e293b; margin-bottom: 15px; }
.tool-seo-box h2 { font-size: 1.3rem; color: #1e293b; margin-top: 30px; margin-bottom: 10px; border-bottom: 2px solid #e2e8f0; display: inline-block; padding-bottom: 5px; }
.tool-seo-box p { font-size: 1rem; line-height: 1.7; color: #475569; margin-bottom: 15px; }

/* Mobile View Adjustments */
@media (max-width: 600px) {
    .stats-grid { grid-template-columns: repeat(3, 1fr); } /* Mobile par 3 columns */
    .stat-box p { font-size: 1.1rem; }
}

/* Case Converter */
.case-btn-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-top: 20px; margin-bottom: 20px; }
.case-btn { background: var(--bg-card); border: 1px solid var(--border-color); padding: 12px 10px; border-radius: 6px; font-weight: 600; font-size: 0.95rem; color: var(--text-dark); cursor: pointer; transition: all 0.2s ease; box-shadow: 0 2px 4px rgba(0,0,0,0.02); }
.case-btn:hover { background: var(--primary); color: white; border-color: var(--primary); transform: translateY(-2px); }
.case-utils { display: flex; flex-wrap: wrap; gap: 10px; background: var(--bg-main); padding: 15px; border-radius: 8px; border: 1px solid var(--border-color); justify-content: center; }
.util-btn { background: var(--bg-card); border: 1px solid var(--border-color); color: var(--text-dark); padding: 8px 15px; font-size: 0.9rem; font-weight: 500; border-radius: 5px; cursor: pointer; transition: 0.2s; }
.util-btn:hover { background: var(--bg-main); color: var(--primary); border-color: var(--primary); }
.text-stats-bar { display: flex; justify-content: space-between; font-size: 0.9rem; color: var(--text-muted); margin-top: 8px; font-weight: 500; }

/* Password Gen */
.password-display-box { background: var(--bg-main); border: 2px solid var(--border-color); border-radius: 8px; padding: 20px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; }
.password-display-box input { background: transparent; border: none; font-size: 1.5rem; font-weight: 700; color: var(--text-dark); width: 100%; outline: none; letter-spacing: 2px; }
.btn-copy-lg { background: var(--primary); color: white; border: none; padding: 12px 20px; border-radius: 6px; cursor: pointer; font-size: 1.1rem; transition: 0.3s; }
.btn-copy-lg:hover { background: var(--primary-hover); transform: scale(1.05); }
.strength-meter-container { margin-bottom: 25px; }
.strength-bars { display: flex; gap: 5px; height: 8px; margin-top: 10px; margin-bottom: 5px; }
.strength-bar { flex: 1; background: var(--border-color); border-radius: 4px; transition: all 0.3s ease; }
.strength-text { font-weight: 600; font-size: 0.9rem; text-align: right; color: var(--text-muted); }
.length-slider-container { margin-bottom: 25px; }
.length-slider-container input[type=range] { width: 100%; accent-color: var(--primary); cursor: pointer; }
.checkbox-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px; margin-bottom: 25px; }
.checkbox-label { display: flex; align-items: center; gap: 10px; font-weight: 500; cursor: pointer; background: var(--bg-card); padding: 10px 15px; border: 1px solid var(--border-color); border-radius: 6px; transition: 0.2s; color: var(--text-dark); }
.checkbox-label:hover { border-color: var(--primary); }
.checkbox-label input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--primary); cursor: pointer; }

/* Font Gen & Line Break */
.font-generator-box { background: var(--bg-main); border: 1px solid var(--border-color); padding: 20px; border-radius: 12px; margin-bottom: 25px; }
.font-list-container { display: flex; flex-direction: column; gap: 15px; max-height: 600px; overflow-y: auto; padding-right: 10px; }
.font-list-container::-webkit-scrollbar { width: 8px; }
.font-list-container::-webkit-scrollbar-track { background: var(--bg-main); border-radius: 4px; }
.font-list-container::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 4px; }
.font-item-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 8px; padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 2px 4px rgba(0,0,0,0.02); }
.font-output-text { font-size: 1.3rem; color: var(--text-dark); word-break: break-all; padding-right: 15px; }
.btn-copy-sm { background: var(--bg-main); border: 1px solid var(--border-color); color: var(--primary); padding: 8px 15px; border-radius: 6px; font-weight: 600; cursor: pointer; transition: 0.2s; }
.caption-box { background: var(--bg-card); border: 1px solid var(--border-color); padding: 20px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.02); }
.caption-textarea { width: 100%; min-height: 250px; padding: 15px; border: 1px solid var(--border-color); border-radius: 8px; font-size: 1.1rem; line-height: 1.6; resize: vertical; background: var(--bg-main); color: var(--text-dark); font-family: inherit; }
.caption-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-top: 15px; margin-bottom: 20px; }
.caption-stat-card { background: var(--bg-main); border: 1px solid var(--border-color); padding: 15px; border-radius: 8px; text-align: center; }
.caption-stat-card span { display: block; font-size: 1.5rem; font-weight: 700; color: var(--primary); }
.caption-stat-card label { font-size: 0.9rem; color: var(--text-muted); font-weight: 600; }
.caption-stat-card.limit-warning span { color: var(--danger); }

/* RNG & Converters */
.rng-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px; margin-bottom: 20px; }
.rng-result-box { background: var(--bg-main); border: 2px dashed var(--primary); border-radius: 12px; padding: 30px 20px; text-align: center; margin: 20px 0; min-height: 120px; display: flex; align-items: center; justify-content: center; flex-direction: column; }
.rng-big-number { font-size: 3.5rem; font-weight: 800; color: var(--primary); line-height: 1.2; word-wrap: break-word; }
.rng-multiple-numbers { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 15px; }
.rng-chip { background: var(--bg-card); border: 1px solid var(--border-color); padding: 10px 20px; border-radius: 30px; font-size: 1.5rem; font-weight: 700; color: var(--text-dark); box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
.rng-options { background: var(--bg-card); border: 1px solid var(--border-color); padding: 15px; border-radius: 8px; margin-bottom: 20px; display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }

.converter-box { background: var(--bg-card); border: 1px solid var(--border-color); padding: 30px; border-radius: 12px; box-shadow: 0 4px 10px rgba(0,0,0,0.03); }
.converter-grid { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; margin-top: 20px; }
.unit-group { display: flex; flex-direction: column; gap: 10px; }
.unit-group label { font-weight: 600; color: var(--text-dark); }
.swap-btn { background: var(--bg-main); border: 1px solid var(--border-color); color: var(--primary); width: 45px; height: 45px; border-radius: 50%; font-size: 1.2rem; cursor: pointer; display: flex; justify-content: center; align-items: center; transition: 0.3s; margin: 0 auto; }
.result-display { background: var(--bg-main); padding: 20px; border-radius: 8px; margin-top: 25px; text-align: center; border: 1px dashed var(--border-color); color: var(--text-dark); }
.result-display span { font-size: 1.8rem; font-weight: 700; color: var(--color-blue); }

.tip-calc-container { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; background: var(--bg-card); padding: 30px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.03); border: 1px solid var(--border-color); margin-top: 20px; }
.quick-tip-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 10px; margin-bottom: 20px; }
.btn-tip { background: var(--bg-main); border: 1px solid var(--border-color); padding: 10px; border-radius: 6px; font-weight: 600; cursor: pointer; transition: 0.2s; color: var(--text-dark); }
.btn-tip:hover, .btn-tip.active { background: var(--primary); color: white; border-color: var(--primary); }
.tip-summary-box { background: var(--bg-main); padding: 25px; border-radius: 10px; border: 1px solid var(--border-color); display: flex; flex-direction: column; gap: 20px; }
.summary-row { display: flex; justify-content: space-between; align-items: center; }
.summary-label { font-weight: 600; color: var(--text-muted); font-size: 0.95rem; }
.summary-value { font-size: 1.5rem; font-weight: 700; color: var(--text-dark); }
.summary-value.highlight { color: var(--primary); font-size: 2rem; }
.currency-input-wrapper { position: relative; display: flex; align-items: center; }
.currency-symbol { position: absolute; left: 15px; font-weight: 600; color: var(--text-muted); font-size: 1.1rem; }
.currency-input-wrapper input { padding-left: 35px; }

/* QR Code Gen Layout Setup */
.qr-container { display: grid; grid-template-columns: 1.2fr 1fr; gap: 30px; align-items: start; }
.qr-settings-panel { background: var(--bg-card); padding: 25px; border-radius: 12px; border: 1px solid var(--border-color); box-shadow: 0 4px 15px rgba(0,0,0,0.02); }
.qr-preview-box { background: var(--bg-main); padding: 30px; border-radius: 12px; border: 2px dashed var(--border-color); display: flex; flex-direction: column; align-items: center; justify-content: center; position: sticky; top: 100px; }
.qr-canvas-wrapper { background: #ffffff; padding: 15px; border-radius: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.qr-type-selector { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; background: var(--bg-main); padding: 10px; border-radius: 8px; border: 1px solid var(--border-color); }
.qr-type-btn { flex: 1; min-width: 80px; background: transparent; border: none; padding: 10px; border-radius: 6px; font-weight: 600; color: var(--text-muted); cursor: pointer; transition: 0.2s; text-align: center; }
.qr-type-btn.active { background: var(--primary); color: white; box-shadow: 0 2px 5px rgba(229, 50, 45, 0.3); }
.qr-dynamic-form { display: none; }
.qr-dynamic-form.active { display: block; }
.two-col-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }

/* =========================================
   6. RESPONSIVE BREAKPOINTS (Tools Only)
========================================= */
@media (max-width: 768px) {
  .invoice-header-grid { grid-template-columns: 1fr; gap: 20px; }
  .invoice-totals { width: 100%; float: none; }
  .action-buttons-grid { grid-template-columns: 1fr; }
  .mockup-layout { grid-template-columns: 1fr; }
  .tip-calc-container { grid-template-columns: 1fr; }
  /* Fixed Mobile views */
  .qr-container { grid-template-columns: 1fr; }
  .qr-preview-box { position: static; }
  .two-col-grid { grid-template-columns: 1fr; } 
}

@media (max-width: 900px) {
  .device-laptop { width: 300px; height: 190px; border-width: 10px; }
  .laptop-base { width: 360px; height: 15px; }
}

@media (max-width: 600px) {
  .exif-data-grid { grid-template-columns: 1fr; }
  .action-buttons-flex { flex-direction: column; }
  .converter-grid { grid-template-columns: 1fr; gap: 10px; }
}

/* =========================================
   WHATSAPP DIRECT CHAT TOOL (tool.css)
========================================= */

/* Main Container */
.wa-tool-container {
    max-width: 700px;
    margin: 0 auto;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}

/* Input Group */
.wa-input-group {
    display: flex;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-main);
    transition: all 0.3s ease;
}

.wa-input-group:focus-within {
    border-color: #25D366;
    box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.15);
}

.wa-country-code {
    width: 95px;
    border: none;
    background: transparent;
    padding: 14px 10px;
    font-weight: 600;
    color: var(--text-dark);
    border-right: 1px solid var(--border-color);
    outline: none;
    cursor: pointer;
    text-align: center;
}

#waNumber {
    flex: 1;
    border: none;
    padding: 14px 15px;
    font-size: 1.05rem;
    color: var(--text-dark);
    background: transparent;
    outline: none;
}

.error-text {
    display: none;
    color: #ff4d4d;
    font-size: 0.85rem;
    margin-top: 8px;
    font-weight: 500;
}

/* Textarea */
#waMessage {
    width: 100%;
    padding: 15px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-main);
    color: var(--text-dark);
    font-family: inherit;
    font-size: 1rem;
    resize: vertical;
    outline: none;
    transition: border-color 0.3s ease;
    margin-top: 5px;
}

#waMessage:focus {
    border-color: #25D366;
}

/* Quick Templates */
.quick-templates {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 15px;
    align-items: center;
}

.template-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-muted);
    width: 100%;
    margin-bottom: 5px;
}

.template-btn {
    background: var(--bg-main);
    border: 1px solid var(--border-color);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    color: var(--text-dark);
    cursor: pointer;
    transition: all 0.2s ease;
}

.template-btn:hover {
    border-color: #25D366;
    background: rgba(37, 211, 102, 0.08);
    color: #128C7E;
    transform: translateY(-2px);
}

/* Action Buttons (Start Chat & Reset) */
.action-buttons-wa {
    display: flex;
    gap: 15px;
    margin-top: 25px;
}

.btn-whatsapp-main {
    flex: 2;
    background-color: #25D366;
    color: white;
    border: none;
    padding: 16px;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    transition: background-color 0.3s ease;
}

.btn-whatsapp-main:hover {
    background-color: #128C7E;
}

.btn-clear {
    flex: 1;
    background-color: var(--bg-main);
    color: var(--text-dark);
    border: 1px solid var(--border-color);
    padding: 16px;
    border-radius: 8px;
    font-size: 1.05rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.btn-clear:hover {
    background-color: #ffecec;
    border-color: #ff4d4d;
    color: #ff4d4d;
}

/* History Section */
.history-container {
    margin-top: 30px;
    border-top: 1px dashed var(--border-color);
    padding-top: 20px;
}

.history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.history-header h4 {
    color: var(--text-dark);
    margin: 0;
    font-size: 1.1rem;
}

.btn-clear-history {
    background: none;
    border: none;
    color: #ff4d4d;
    cursor: pointer;
    text-decoration: underline;
    font-size: 0.9rem;
    font-weight: 500;
}

.history-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.history-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-main);
    padding: 12px 15px;
    border-radius: 8px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--text-dark);
    font-weight: 600;
}

.history-item i {
    color: #25D366;
    font-size: 1.2rem;
}

.history-item:hover {
    border-color: #25D366;
    background: rgba(37, 211, 102, 0.05);
}

/* SEO Content specific styling */
.seo-list {
    margin-left: 20px;
    margin-bottom: 20px;
}

.seo-list li {
    margin-bottom: 10px;
}

.faq-item {
    background: var(--bg-card);
    padding: 20px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    margin-bottom: 15px;
}

.faq-item h4 {
    color: var(--text-dark);
    margin-bottom: 10px;
    font-size: 1.1rem;
}

.faq-item p {
    margin-bottom: 0;
}

/* Mobile Responsiveness */
@media (max-width: 600px) {
    .action-buttons-wa {
        flex-direction: column;
    }
    
    .wa-tool-container {
        padding: 20px;
    }
}


.seo-content-container {
    margin-top: 50px;
    line-height: 1.8;
    color: var(--text-muted);
    font-size: 1.05rem;
}

.seo-content-container h2 {
    color: var(--text-dark);
    margin-top: 40px;
    margin-bottom: 15px;
    font-size: 1.8rem;
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 8px;
}

.seo-content-container h3 {
    color: var(--text-dark);
    margin-top: 30px;
    margin-bottom: 15px;
    font-size: 1.4rem;
}

.seo-content-container p {
    margin-bottom: 18px;
}
/* =========================================================
   TOOLASAAN - ATS RESUME CHECKER (ISOLATED WHATSAPP THEME)
========================================================= */

/* 1. Main Page Wrapper */
.ats-premium-layout {
    max-width: 1000px;
    margin: 40px auto;
    padding: 0 20px;
}

/* Header & Badge */
.ats-tool-header { text-align: center; margin-bottom: 35px; }
.ats-btn-back { background: var(--bg-card); border: 1px solid var(--border-color); padding: 10px 18px; border-radius: 8px; color: var(--text-dark); font-size: 0.95rem; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: all 0.2s ease; white-space: nowrap; margin-bottom: 15px; }
.ats-btn-back:hover { background: var(--bg-main); transform: translateX(-4px); border-color: var(--primary); color: var(--primary); }
.ats-premium-badge { display: inline-block; background: rgba(214, 158, 46, 0.1); color: #d69e2e; padding: 6px 16px; border-radius: 20px; font-weight: 700; font-size: 0.85rem; margin-bottom: 15px; border: 1px solid rgba(214, 158, 46, 0.3); }

/* 2. Workspace Split Panels */
.ats-workspace {
    display: flex;
    gap: 25px;
    margin-bottom: 50px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.ats-input-panel, .ats-result-panel {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03); 
    flex: 1;
    min-width: 320px;
    box-sizing: border-box;
}
.ats-result-panel { flex: 1.4; }

/* 3. Inputs & Forms */
.ats-step-indicator { font-size: 0.85rem; text-transform: uppercase; color: var(--text-muted); font-weight: 700; margin-bottom: 12px; border-bottom: 1px dashed var(--border-color); padding-bottom: 8px; margin-top: 15px; }
.ats-step-indicator:first-child { margin-top: 0; }
.ats-input-group label { display: block; font-weight: 600; color: var(--text-dark); margin-bottom: 10px; font-size: 0.95rem; }

/* Dropzone */
.ats-premium-dropzone {
    border: 2px dashed var(--border-color);
    border-radius: 8px;
    background: var(--bg-main);
    padding: 30px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}
.ats-premium-dropzone:hover, .ats-drag-active { border-color: var(--primary); background: rgba(229, 50, 45, 0.04); }
.ats-upload-icon { font-size: 2.5rem; color: var(--text-muted); margin-bottom: 10px; transition: color 0.3s; }
.ats-premium-dropzone:hover .ats-upload-icon { color: var(--primary); }
.ats-upload-text { font-size: 0.95rem; color: var(--text-dark); font-weight: 600; margin-bottom: 5px; }
.ats-upload-subtext { font-size: 0.8rem; color: var(--text-muted); }

/* Textarea */
.ats-premium-textarea {
    width: 100%;
    height: 140px;
    padding: 15px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-main);
    color: var(--text-dark);
    font-family: inherit;
    font-size: 1rem;
    resize: vertical;
    outline: none;
    transition: border-color 0.3s ease;
    box-sizing: border-box;
}
.ats-premium-textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(229, 50, 45, 0.1); }

/* Main Action Button */
.ats-btn-large {
    width: 100%;
    background-color: var(--primary);
    color: white;
    border: none;
    padding: 16px;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    transition: background-color 0.3s ease;
    margin-top: 20px;
}
.ats-btn-large:hover { opacity: 0.9; }

/* 4. Results Dashboard Elements */
.ats-report-header { text-align: center; margin-bottom: 30px; border-bottom: 1px dashed var(--border-color); padding-bottom: 20px; }
.ats-report-header h3 { font-size: 1.4rem; color: var(--text-dark); margin-bottom: 5px; }
.ats-report-subtitle { color: var(--text-muted); font-size: 0.95rem; }

.ats-score-overview-grid { display: grid; grid-template-columns: 130px 1fr; gap: 20px; align-items: center; margin-bottom: 30px; }
.ats-main-score-box { text-align: center; }
.ats-score-circle { width: 110px; height: 110px; border-radius: 50%; border: 8px solid var(--primary); display: flex; align-items: center; justify-content: center; font-size: 1.8rem; font-weight: 800; background: var(--bg-main); color: var(--text-dark); margin: 0 auto; transition: border-color 0.3s, color 0.3s;}
.ats-score-high { border-color: #25D366; color: #128C7E; }
.ats-score-medium { border-color: #f59e0b; color: #b45309; }
.ats-score-low { border-color: #ff4d4d; color: #991b1b; }
.ats-score-message { margin-top: 10px; font-weight: 600; font-size: 0.95rem; color: var(--text-dark); }

.ats-resume-stats-box { background: var(--bg-main); padding: 20px; border-radius: 8px; border: 1px solid var(--border-color); }
.ats-resume-stats-box h4 { margin-bottom: 15px; font-size: 1rem; color: var(--text-dark); }
.ats-stats-list { list-style: none; padding: 0; margin: 0; }
.ats-stats-list li { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 0.95rem; color: var(--text-muted); padding-bottom: 10px; border-bottom: 1px solid rgba(0,0,0,0.05); }
.ats-stats-list li:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

.ats-status-badge { padding: 4px 10px; border-radius: 6px; font-size: 0.75rem; font-weight: 600; }
.ats-badge-pass { background: rgba(37, 211, 102, 0.1); color: #128C7E; border: 1px solid rgba(37, 211, 102, 0.2); }
.ats-badge-warn { background: rgba(255, 153, 0, 0.1); color: #cc7a00; border: 1px solid rgba(255, 153, 0, 0.2); }

/* Check Items */
.ats-assessment-box h4 { font-size: 1rem; color: var(--text-dark); margin-bottom: 10px; }
.ats-check-item { display: flex; gap: 10px; font-size: 0.9rem; color: var(--text-dark); padding: 10px; background: var(--bg-main); border: 1px solid var(--border-color); border-radius: 6px; margin-bottom: 8px;}

/* Keywords Tags */
.ats-keyword-box { background: var(--bg-main); border: 1px solid var(--border-color); padding: 20px; border-radius: 8px; margin-bottom: 20px; }
.ats-keyword-box h4 { font-size: 1rem; color: var(--text-dark); margin-bottom: 5px; }
.ats-keyword-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 15px; }
.ats-tag { padding: 6px 14px; border-radius: 20px; font-size: 0.85rem; font-weight: 600; border: 1px solid var(--border-color); }
.ats-tag-matched { background: rgba(37, 211, 102, 0.1); color: #128C7E; border-color: rgba(37, 211, 102, 0.3); }
.ats-tag-missing { background: rgba(255, 77, 77, 0.1); color: #ff4d4d; border-color: rgba(255, 77, 77, 0.3); }

/* 5. SEO Article & FAQ */
.ats-tool-seo-box { max-width: 1000px; margin: 0 auto; line-height: 1.8; color: var(--text-muted); font-size: 1.05rem; }
.ats-seo-main-heading { color: var(--text-dark); margin-top: 40px; margin-bottom: 15px; font-size: 1.8rem; border-bottom: 2px solid var(--border-color); padding-bottom: 8px; }
.ats-seo-sub-heading { color: var(--text-dark); margin-top: 35px; margin-bottom: 15px; font-size: 1.4rem; }
.ats-tool-seo-box p { margin-bottom: 18px; }
.ats-seo-list { margin-left: 20px; margin-bottom: 20px; }
.ats-seo-list li { margin-bottom: 10px; }

/* Table Setup */
.ats-table-responsive { overflow-x: auto; margin: 25px 0; border: 1px solid var(--border-color); border-radius: 8px; }
.ats-seo-table { width: 100%; border-collapse: collapse; background: var(--bg-card); }
.ats-seo-table th, .ats-seo-table td { padding: 15px; border-bottom: 1px solid var(--border-color); text-align: left; }
.ats-seo-table th { background: var(--bg-main); font-weight: 600; color: var(--text-dark); }
.ats-table-feature { font-weight: 700 !important; color: var(--text-dark) !important; width: 30%; }

/* FAQ Match (No Red Line) */
.ats-faq-item {
    background: var(--bg-card);
    padding: 20px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    margin-bottom: 15px;
}
.ats-faq-item h4 { color: var(--text-dark); margin-bottom: 10px; font-size: 1.1rem; }
.ats-faq-item p { margin-bottom: 0; }

.ats-example-list {
    background: var(--bg-card);
    padding: 20px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    margin-left: 0;
    list-style: none;
}

/* Utilities */
.ats-view-hidden { display: none !important; }
.ats-loading-container { text-align: center; padding: 20px; color: var(--text-muted); }
.text-red { color: #ff4d4d; }
.text-green { color: #25D366; }
.text-blue { color: #3b82f6; }

/* Mobile Adjustments */
@media (max-width: 768px) {
    .ats-workspace { flex-direction: column; }
    .ats-input-panel, .ats-result-panel { width: 100%; padding: 20px; }
    .ats-score-overview-grid { grid-template-columns: 1fr; text-align: center; }
}
/* =========================================================
   TOOLASAAN - AI IMAGE TO TEXT (OCR) STYLES
========================================================= */

/* 1. Main Layout & Header */
.ocr-premium-layout {
    max-width: 1000px;
    margin: 40px auto;
    padding: 0 20px;
}

.ocr-tool-header { text-align: center; margin-bottom: 35px; }
.ocr-btn-back { background: var(--bg-card); border: 1px solid var(--border-color); padding: 10px 18px; border-radius: 8px; color: var(--text-dark); font-size: 0.95rem; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: all 0.2s ease; white-space: nowrap; margin-bottom: 15px; }
.ocr-btn-back:hover { background: var(--bg-main); transform: translateX(-4px); border-color: var(--primary); color: var(--primary); }
.ocr-premium-badge { display: inline-block; background: rgba(59, 130, 246, 0.1); color: #3b82f6; padding: 6px 16px; border-radius: 20px; font-weight: 700; font-size: 0.85rem; margin-bottom: 15px; border: 1px solid rgba(59, 130, 246, 0.3); }

.ocr-h1-seo { margin: 0 0 10px 0; font-size: 1.8rem; color: var(--text-dark); }
.ocr-tool-header p { margin: 0; color: var(--text-muted); font-size: 0.95rem; line-height: 1.6; }

/* 2. Workspace Split Panels */
.ocr-workspace {
    display: flex;
    gap: 25px;
    margin-bottom: 50px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.ocr-input-panel, .ocr-result-panel {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03); 
    flex: 1;
    min-width: 320px;
    box-sizing: border-box;
}
.ocr-result-panel { flex: 1.2; display: flex; flex-direction: column; }

/* 3. Upload & Dropzone Area */
.ocr-step-indicator { font-size: 0.85rem; text-transform: uppercase; color: var(--text-muted); font-weight: 700; margin-bottom: 12px; border-bottom: 1px dashed var(--border-color); padding-bottom: 8px; }

.ocr-dropzone {
    border: 2px dashed var(--border-color);
    border-radius: 8px;
    background: var(--bg-main);
    padding: 40px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 20px;
    position: relative;
}
.ocr-dropzone:hover, .ocr-drag-active { border-color: var(--primary); background: rgba(229, 50, 45, 0.04); }
.ocr-upload-icon { font-size: 3rem; color: var(--text-muted); margin-bottom: 15px; transition: color 0.3s; }
.ocr-dropzone:hover .ocr-upload-icon { color: var(--primary); }
.ocr-upload-text { font-size: 1rem; color: var(--text-dark); font-weight: 600; margin-bottom: 5px; }
.ocr-upload-subtext { font-size: 0.85rem; color: var(--text-muted); }

/* Image Preview UI */
#imagePreviewContainer { position: relative; display: inline-block; width: 100%; }
#imagePreview { max-width: 100%; max-height: 200px; border-radius: 6px; object-fit: contain; border: 1px solid var(--border-color); background: #fff; padding: 5px; }
.ocr-btn-remove { position: absolute; top: -10px; right: -10px; background: #ff4d4d; color: #fff; border: none; width: 28px; height: 28px; border-radius: 50%; cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 5px rgba(0,0,0,0.2); transition: 0.2s; }
.ocr-btn-remove:hover { background: #e60000; transform: scale(1.1); }

/* Main Action Button */
.ocr-btn-large {
    width: 100%;
    background-color: var(--primary);
    color: white;
    border: none;
    padding: 16px;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
}
.ocr-btn-large:hover:not(:disabled) { opacity: 0.9; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(229, 50, 45, 0.2); }
.ocr-btn-large:disabled { background-color: #cbd5e1; cursor: not-allowed; transform: none; box-shadow: none; }

/* Progress Bar UI */
.ocr-loading-container { margin-top: 20px; text-align: center; }
.ocr-status-text { font-size: 0.9rem; color: var(--text-dark); font-weight: 600; margin-bottom: 8px; }
.ocr-progress-bar-bg { width: 100%; height: 8px; background: #e2e8f0; border-radius: 10px; overflow: hidden; margin-bottom: 5px; }
.ocr-progress-bar-fill { height: 100%; background: var(--primary); width: 0%; transition: width 0.3s ease; }
#progressPercentage { font-size: 0.8rem; color: var(--text-muted); font-weight: 700; margin: 0; }

/* 4. Results Panel */
.ocr-report-header { margin-bottom: 20px; border-bottom: 1px dashed var(--border-color); padding-bottom: 15px; }
.ocr-report-header h3 { font-size: 1.3rem; color: var(--text-dark); margin-bottom: 5px; }
.ocr-report-subtitle { color: var(--text-muted); font-size: 0.9rem; margin: 0; }

.ocr-result-textarea {
    width: 100%;
    flex-grow: 1; /* Takes available space */
    min-height: 250px;
    padding: 15px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-main);
    color: var(--text-dark);
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.6;
    resize: vertical;
    outline: none;
    transition: border-color 0.3s ease;
    box-sizing: border-box;
    margin-bottom: 20px;
}
.ocr-result-textarea:focus { border-color: var(--primary); background: #fff; box-shadow: 0 0 0 3px rgba(229, 50, 45, 0.1); }
.ocr-result-textarea[readonly] { background: #f8fafc; cursor: default; }

.ocr-action-row { display: flex; gap: 15px; }
.ocr-btn-secondary { flex: 1; background: var(--bg-card); border: 1px solid var(--border-color); color: var(--text-dark); padding: 14px; border-radius: 8px; font-weight: 600; font-size: 1rem; cursor: pointer; display: flex; justify-content: center; align-items: center; gap: 8px; transition: 0.2s; }
.ocr-btn-secondary:hover:not(:disabled) { background: var(--bg-main); border-color: var(--primary); color: var(--primary); }
.ocr-btn-secondary:disabled { opacity: 0.5; cursor: not-allowed; }

/* 5. Deep SEO Article & FAQ */
.ocr-tool-seo-box { max-width: 1000px; margin: 0 auto; line-height: 1.8; color: var(--text-muted); font-size: 1.05rem; }
.ocr-seo-main-heading { color: var(--text-dark); margin-top: 40px; margin-bottom: 15px; font-size: 1.8rem; border-bottom: 2px solid var(--border-color); padding-bottom: 8px; }
.ocr-seo-sub-heading { color: var(--text-dark); margin-top: 35px; margin-bottom: 15px; font-size: 1.4rem; }
.ocr-tool-seo-box p { margin-bottom: 18px; }
.ocr-seo-list { margin-left: 20px; margin-bottom: 20px; }
.ocr-seo-list li { margin-bottom: 10px; }

/* SEO Table */
.ocr-table-responsive { overflow-x: auto; margin: 25px 0; border: 1px solid var(--border-color); border-radius: 8px; }
.ocr-seo-table { width: 100%; border-collapse: collapse; background: var(--bg-card); }
.ocr-seo-table th, .ocr-seo-table td { padding: 15px; border-bottom: 1px solid var(--border-color); text-align: left; }
.ocr-seo-table th { background: var(--bg-main); font-weight: 600; color: var(--text-dark); }
.ocr-table-feature { font-weight: 700 !important; color: var(--text-dark) !important; width: 25%; }

/* FAQ and Example Boxes (Clean, NO Left Border) */
.ocr-faq-item, .ocr-example-list {
    background: var(--bg-card) !important;
    padding: 20px !important;
    border-radius: 8px !important;
    border: 1px solid var(--border-color) !important;
    margin-bottom: 15px !important;
    box-shadow: none !important;
    margin-left: 0 !important;
}
.ocr-faq-item h4 { color: var(--text-dark); margin-bottom: 10px; font-size: 1.1rem; }
.ocr-faq-item p { margin-bottom: 0; }
.ocr-example-list { list-style: none !important; }

/* Utilities */
.ocr-hidden { display: none !important; }
.text-red { color: #ff4d4d; }
.text-green { color: #25D366; }
.text-blue { color: #3b82f6; }

/* Mobile Adjustments */
@media (max-width: 768px) {
    .ocr-workspace { flex-direction: column; }
    .ocr-input-panel, .ocr-result-panel { width: 100%; padding: 20px; }
    .ocr-action-row { flex-direction: column; gap: 10px; }
}
/* =========================================
   ADVANCED UNIT CONVERTER STYLES
   ========================================= */

/* Main Tool Container */
.converter-box {
    background: var(--bg-card, #ffffff);
    padding: 35px;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.04);
    border: 1px solid var(--border-color, #e2e8f0);
}

/* Grid Layout for Desktop */
.converter-grid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 25px;
}

.unit-group {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.unit-group label {
    font-weight: 600;
    color: var(--text-dark, #1e293b);
    margin-bottom: 8px;
    font-size: 1rem;
}

/* Inputs and Select Dropdowns */
.input-lg {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--border-color, #cbd5e1);
    border-radius: 8px;
    font-size: 1.05rem;
    font-family: inherit;
    color: var(--text-dark, #1e293b);
    background: var(--bg-main, #f8fafc);
    transition: all 0.3s ease;
}

.input-lg:focus {
    outline: none;
    border-color: var(--primary, #e5322d);
    box-shadow: 0 0 0 3px rgba(229, 50, 45, 0.1);
}

/* Utility Classes used in HTML */
.mt-10 { margin-top: 10px; }
.mb-20 { margin-bottom: 20px; }
.w-100 { width: 100%; }

/* Interactive Swap Button */
.swap-btn {
    background: var(--primary, #e5322d);
    color: #ffffff;
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 28px; /* Pushes button down to align with input boxes, ignoring label height */
    box-shadow: 0 4px 10px rgba(229, 50, 45, 0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    flex-shrink: 0;
}

.swap-btn:hover {
    transform: scale(1.1) rotate(180deg); /* Cool rotation effect */
    box-shadow: 0 6px 15px rgba(229, 50, 45, 0.4);
}

.swap-btn:active {
    transform: scale(0.95);
}

/* Final Result Display Box */
.result-display {
    background: rgba(229, 50, 45, 0.05); /* Light tint of your primary color */
    border: 1px dashed rgba(229, 50, 45, 0.3);
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    margin-top: 15px;
}

#ucResultText {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--primary, #e5322d);
    word-wrap: break-word;
}

/* =========================================
   MOBILE OPTIMIZATION (ULTRA-COMPACT)
   ========================================= */
@media (max-width: 600px) {
    .converter-box {
        padding: 20px 15px; /* Reduces padding to save space on small screens */
    }

    /* KEY FIX: Keeps inputs side-by-side on mobile instead of stacking them */
    .converter-grid {
        flex-direction: row; 
        align-items: stretch;
        gap: 10px;
    }

    .unit-group {
        min-width: 0; /* Prevents text from overflowing the flex container */
    }

    .unit-group label {
        font-size: 0.9rem;
    }

    .input-lg {
        padding: 12px 10px;
        font-size: 0.95rem; /* Slightly smaller text for mobile */
    }

    /* Shrink the swap button so it fits perfectly between the inputs */
    .swap-btn {
        width: 40px;
        height: 40px;
        font-size: 1rem;
        margin-top: 30px; 
    }

    .result-display {
        padding: 15px;
    }

    #ucResultText {
        font-size: 1.25rem; 
    }
}

/* =========================================
   TOOLASAAN VIBE MATCH - CORE STYLES
========================================= */

/* --- CSS VARIABLES (Reddish/Romantic Theme) --- */
:root {
    --primary: #ff2a5f;
    --primary-light: #ff4d79;
    --primary-dark: #e60039;
    --bg-main: #fffafb;
    --card-bg: #ffffff;
    --text-dark: #2d3748;
    --text-muted: #718096;
    --border-light: #ffccd5;
    
    /* Status Colors */
    --success-green: #38a169;
    --warning-orange: #ed8936;
    --danger-red: #e53e3e;
    
    /* Shadows & Radii */
    --shadow-sm: 0 4px 6px rgba(255, 42, 95, 0.04);
    --shadow-md: 0 10px 25px rgba(255, 42, 95, 0.08);
    --radius-lg: 20px;
    --radius-md: 12px;
}

/* --- RESET & TYPOGRAPHY --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-main);
    color: var(--text-dark);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; color: var(--primary); }

/* --- UTILITY CLASSES --- */
.hidden { display: none !important; }
.text-center { text-align: center; }
.flex-row { display: flex; justify-content: space-between; align-items: center; }

/* Smooth Fade In Animation */
.fade-in {
    animation: fadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes fadeIn {
    0% { opacity: 0; transform: translateY(15px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* --- NAVBAR & FOOTER --- */
.navbar {
    background-color: var(--card-bg);
    padding: 15px 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-light);
}

.navbar .logo {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--primary-dark);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-links a {
    font-weight: 600;
    color: var(--text-dark);
}

.footer {
    text-align: center;
    padding: 40px 20px;
    margin-top: 50px;
    border-top: 1px solid #e2e8f0;
    color: var(--text-muted);
}
.footer-links { margin-bottom: 10px; }
.footer-links a { color: var(--text-muted); margin: 0 10px; font-weight: 500; }

/* --- MAIN CONTAINER & HEADERS --- */
.tool-container {
    max-width: 600px;
    margin: 40px auto;
    padding: 0 20px;
}

.tool-header-section {
    text-align: center;
    margin-bottom: 30px;
}

.tool-title {
    color: var(--primary);
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 8px;
}

.tool-subtitle {
    color: var(--text-muted);
    font-size: 1.1rem;
    font-weight: 500;
}

/* --- CARDS & FORMS --- */
.card-container {
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    padding: 30px;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-light);
    margin-bottom: 25px;
}

.input-group {
    margin-bottom: 20px;
}

.input-group label {
    display: block;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 8px;
    font-size: 1.05rem;
}

.label-mt {
    margin-top: 15px !important;
}

.badge-optional {
    font-size: 0.75rem;
    background: #ffe5ea;
    color: var(--primary);
    padding: 3px 8px;
    border-radius: 12px;
    margin-left: 8px;
    font-weight: 600;
}

.input-control {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid #ffe5ea;
    border-radius: var(--radius-md);
    font-size: 1rem;
    font-family: 'Inter', sans-serif;
    transition: all 0.3s ease;
    background-color: #fffbfa;
    color: var(--text-dark);
}

.input-control:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(255, 42, 95, 0.1);
    background-color: var(--card-bg);
}

.divider-icon {
    text-align: center;
    margin: 20px 0;
    color: var(--primary-light);
    font-size: 2rem;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

/* --- BUTTONS --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 15px 20px;
    border-radius: var(--radius-md);
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    font-family: 'Inter', sans-serif;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary) 0%, #ff6b8b 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(255, 42, 95, 0.3);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 42, 95, 0.4);
}

.btn-submit { width: 100%; margin-top: 10px; font-size: 1.2rem; }

.btn-whatsapp {
    background-color: #25D366;
    color: white;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
}

.btn-whatsapp:hover { background-color: #1ebd5c; transform: translateY(-2px); }

.btn-outline {
    background-color: #f7fafc;
    color: var(--text-dark);
    border: 2px solid #e2e8f0;
}

.btn-outline:hover { background-color: #edf2f7; }

.actions-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.full-width { grid-column: span 2; }

/* --- LOADER (SYNCING ANIMATION) --- */
.loader-wrapper {
    padding: 50px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.sync-loader-container {
    position: relative;
    width: 130px;
    height: 130px;
    margin-bottom: 25px;
}

.sync-orbit {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    border-radius: 50%;
    border: 3px dashed rgba(255, 42, 95, 0.3);
    animation: spinOrbit 4s linear infinite;
}

.sync-satellite {
    position: absolute;
    width: 20px; height: 20px;
    background-color: var(--primary);
    border-radius: 50%;
    top: 50%; left: -10px;
    margin-top: -10px;
    box-shadow: 0 0 15px var(--primary);
    animation: orbit 1.5s linear infinite;
}

.sync-core {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    color: var(--primary);
}

@keyframes spinOrbit { 100% { transform: rotate(360deg); } }
@keyframes orbit {
    0% { transform: rotate(0deg) translateX(65px) rotate(0deg); }
    100% { transform: rotate(360deg) translateX(65px) rotate(-360deg); }
}

.dynamic-loader-text {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary);
    height: 30px;
}

/* --- RESULT CARD CANVAS --- */
.result-canvas {
    background: linear-gradient(to bottom right, #ffffff, #fff0f3);
    padding: 30px 20px;
    border-radius: var(--radius-lg);
    text-align: center;
    border: 2px solid var(--border-light);
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden;
    margin-bottom: 20px;
}

.result-canvas::before {
    content: '❤️';
    position: absolute;
    font-size: 12rem;
    color: rgba(255, 42, 95, 0.03);
    top: -30px;
    right: -30px;
    z-index: 0;
    transform: rotate(15deg);
}

.result-content { position: relative; z-index: 1; }

.badge-verified {
    display: inline-block;
    background: #fff;
    color: var(--primary);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 800;
    margin-bottom: 20px;
    border: 1px solid var(--border-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.names-display {
    background: #ffffff;
    padding: 15px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 42, 95, 0.1);
    margin-bottom: 20px;
}

.score-display {
    font-size: 6rem;
    font-weight: 900;
    color: var(--primary);
    line-height: 1;
    text-shadow: 3px 3px 0px #ffd6e0;
    margin: 10px 0;
    letter-spacing: -2px;
}

.tag-display {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--text-dark);
    margin: 15px 0 10px 0;
    line-height: 1.3;
}

.desc-display {
    color: #4a5568;
    font-size: 1.05rem;
    font-weight: 500;
    margin-bottom: 20px;
    line-height: 1.5;
}

/* --- FLAGS & WARNING STATES --- */
.flags-container {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-md);
    padding: 15px;
    text-align: left;
    margin-bottom: 20px;
}

.flags-title {
    font-weight: 800;
    font-size: 0.95rem;
    color: var(--text-dark);
    margin-bottom: 10px;
}

.flags-list {
    list-style-type: none; /* Emoticons act as bullets */
}

.flag-item {
    font-size: 0.95rem;
    color: var(--text-dark);
    font-weight: 500;
    margin-bottom: 8px;
    line-height: 1.4;
}
.flag-item:last-child { margin-bottom: 0; }

/* Dynamic Warning Classes applied via JS for Red Flags */
.text-warning {
    color: var(--warning-orange) !important;
    text-shadow: 3px 3px 0px #feebc8 !important;
}
.box-warning {
    background: #fffaf0 !important;
    border-color: #fbd38d !important;
}

/* --- ASTRO LOGIC --- */
.astro-logic-box {
    background: rgba(255, 255, 255, 0.9);
    padding: 15px;
    border-radius: var(--radius-md);
    text-align: left;
    border-left: 5px solid var(--primary);
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}

.astro-logic-title {
    font-weight: 800;
    color: var(--primary);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 5px;
}

.astro-logic-desc {
    font-size: 0.95rem;
    color: var(--text-dark);
    font-weight: 500;
}

.watermark {
    margin-top: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    color: #cbd5e0;
}

/* --- FUN LINERS & ACTIONS --- */
.fun-liner-box {
    background: #fff3cd;
    color: #856404;
    padding: 12px;
    border-radius: var(--radius-md);
    margin-bottom: 20px;
    font-weight: 700;
    font-size: 1rem;
    border-left: 4px solid #ffeeba;
}

.action-hint {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 15px;
    font-weight: 600;
}

/* --- SEO ARTICLE --- */
.seo-article {
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    padding: 30px;
    margin-top: 50px;
    box-shadow: var(--shadow-sm);
    border: 1px solid #e2e8f0;
    color: #4a5568;
}

.seo-article h2 {
    color: var(--text-dark);
    font-size: 1.6rem;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--border-light);
}

.seo-article h3 {
    color: var(--text-dark);
    font-size: 1.2rem;
    margin: 25px 0 12px 0;
}

.seo-article p { margin-bottom: 15px; font-size: 1rem; }
.seo-article ul { margin-bottom: 20px; padding-left: 20px; }
.seo-article li { margin-bottom: 10px; font-size: 1rem; }

.disclaimer-box {
    background: #fff5f5;
    border-left: 4px solid var(--danger-red);
    padding: 15px;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    margin: 20px 0;
}
.disclaimer-box h4 {
    color: var(--danger-red);
    margin-bottom: 8px;
    font-size: 1.05rem;
}

/* --- RESPONSIVE MOBILE ADJUSTMENTS --- */
@media (max-width: 480px) {
    .tool-title { font-size: 2rem; }
    .score-display { font-size: 5rem; }
    .tag-display { font-size: 1.4rem; }
    
    /* Stack action buttons vertically on small screens */
    .mobile-col { grid-template-columns: 1fr; }
    .full-width { grid-column: span 1; }
    
    .names-display { padding: 10px; }
    .vs-text { font-size: 1.2rem !important; margin: 0 10px !important; }
}

/* Fix for html2canvas (removes borders/shadows during image capture) */
.capture-mode {
    border-radius: 0 !important;
    box-shadow: none !important;
    border: none !important;
}