/* ============================================
   FINAL CSS - 5 BOXES PER ROW, CENTERED (PC ONLY)
   ============================================ */

/* ============================================ */
/* ✅ BORDER STYLES FOR TOOL BOXES */
/* ============================================ */

/* Default: No border, will be set by classes */
.tool-grid li {
    border: none !important;
    border-radius: 12px;
    transition: all 0.3s ease;
}

/* All Sides */
.border-all .tool-grid li {
    border: 2px solid var(--primary-color, #667eea) !important;
}

/* Top Only */
.border-top .tool-grid li {
    border: 2px solid transparent !important;
    border-top: 4px solid var(--primary-color, #667eea) !important;
}

/* Bottom Only */
.border-bottom .tool-grid li {
    border: 2px solid transparent !important;
    border-bottom: 4px solid var(--primary-color, #667eea) !important;
}

/* Left Only */
.border-left .tool-grid li {
    border: 2px solid transparent !important;
    border-left: 4px solid var(--primary-color, #667eea) !important;
}

/* Right Only */
.border-right .tool-grid li {
    border: 2px solid transparent !important;
    border-right: 4px solid var(--primary-color, #667eea) !important;
}

/* Top & Bottom */
.border-top-bottom .tool-grid li {
    border: 2px solid transparent !important;
    border-top: 4px solid var(--primary-color, #667eea) !important;
    border-bottom: 4px solid var(--primary-color, #667eea) !important;
}

/* Left & Right */
.border-left-right .tool-grid li {
    border: 2px solid transparent !important;
    border-left: 4px solid var(--primary-color, #667eea) !important;
    border-right: 4px solid var(--primary-color, #667eea) !important;
}

/* ============================================ */
/* EXISTING STYLES (UNCHANGED) */
/* ============================================ */

/* HEADER */
.heading-bar {
    display: flex;
    gap: 5px;
    padding: 15px;
    overflow-x: auto;
    justify-content: center;
    flex-wrap: wrap;
}

.heading-bar::-webkit-scrollbar {
    display: none;
}

.heading-bar button {
    padding: 5px 8px;
    border-radius: 5px;
    cursor: pointer;
    color: #fff;
    border: none;
    transition: all 0.3s ease;
    background: var(--main-color, #007bff);
}

.heading-bar button:hover {
    transform: translateY(-2px);
    opacity: 0.9;
}

/* TOOL BOX */
.tool-box {
    display: none;
    width: 100%;
    max-width: 1200px;
    margin: 15px auto;
    background: var(--card-bg, #fff);
    padding: 15px;
    border-radius: 8px;
    border: 1px solid var(--border-color, #eee);
}

.tool-box.show {
    display: block;
}

body {
    padding-top: 50px;
}

.site-title {
    text-align: center;
    margin-top: 7px;
}

.site-description {
    text-align: center;
    max-width: 800px;
    margin: 10px auto;
    font-size: 18px;
    color: var(--text-muted, #666);
    line-height: 1.2;
}

/* ============================================
   MAIN GRID - 5 BOXES, CENTERED
   ============================================ */

/* Make all tool containers transparent */
[id^="tools"] {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 0 30px 0 !important;
    display: flex;
    justify-content: center;
}

/* Grid Container - Fixed 5 columns */
.tool-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(100px, 220px));
    gap: 15px;
    padding: 20px;
    list-style: none;
    margin: 0 auto;
    justify-content: center;
    max-width: 1200px;
}

/* Square Boxes */
.tool-grid li {
    aspect-ratio: 1 / 1;
    position: relative;
    background: var(--card-bg, rgba(255, 255, 255, 0.95));
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
    width: 100%;
}

/* Link Styling */
.tool-grid li a {
    color: var(--text-color, #333);
    text-decoration: none;
    font-size: 13px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 10px;
    z-index: 1;
}

/* Icon Styling */
.tool-grid li a i {
    font-size: 28px;
    margin-bottom: 8px;
}

/* Title Styling */
.tool-grid li a .tool-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-color, #333);
    margin-bottom: 4px;
}

/* Description Styling */
.tool-grid li a .tool-desc {
    font-size: 11px;
    color: var(--text-muted, #666);
    line-height: 1.2;
}

/* Hover Effects */
.tool-grid li:hover {
    transform: translateY(-5px) scale(1.03);
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
    background: var(--card-bg-hover, rgba(255, 255, 255, 1));
}

/* ============================================
   ICON COLORS (ALL TOOLS) - UNCHANGED
   ============================================ */

/* PDF Tools */
.icon-merge-pdf i { color: #ff5733 !important; }
.icon-split-pdf i { color: #28a745 !important; }
.icon-compress-pdf i { color: #007bff !important; }
.icon-convert-pdf i { color: #ffc107 !important; }
.icon-pdf-to-word i { color: #6f42c1 !important; }
.icon-pdf-to-ppt i { color: #e83e8c !important; }
.icon-pdf-to-excel i { color: #17a2b8 !important; }
.icon-word-to-pdf i { color: #fd7e14 !important; }
.icon-ppt-to-pdf i { color: #20c997 !important; }
.icon-excel-to-pdf i { color: #6610f2 !important; }
.icon-edit-pdf i { color: #dc3545 !important; }
.icon-sign-pdf i { color: #fd7e14 !important; }
.icon-watermark i { color: #ffc107 !important; }
.icon-rotate-pdf i { color: #6f42c1 !important; }
.icon-unlock-pdf i { color: #28a745 !important; }
.icon-protect-pdf i { color: #dc3545 !important; }
.icon-organize-pdf i { color: #20c997 !important; }
.icon-pdf-to-pdfa i { color: #6610f2 !important; }
.icon-repair-pdf i { color: #007bff !important; }
.icon-page-numbers i { color: #ff5733 !important; }
.icon-scan-to-pdf i { color: #28a745 !important; }
.icon-compare-pdf i { color: #e83e8c !important; }
.icon-redact-pdf i { color: #dc3545 !important; }
.icon-crop-pdf i { color: #20c997 !important; }
.icon-ai-summarizer i { color: #6610f2 !important; }

/* Calculator Tools */
.icon-age i { color: #FF6B6B !important; }
.icon-emi i { color: #4D96FF !important; }
.icon-fd i { color: #6BCB77 !important; }
.icon-sip i { color: #FFD93D !important; }
.icon-percentage i { color: #845EC2 !important; }
.icon-discount i { color: #FF9671 !important; }
.icon-gst i { color: #00C9A7 !important; }
.icon-profit-loss i { color: #FFAB76 !important; }
.icon-simple-interest i { color: #FF6EC7 !important; }
.icon-compound-interest i { color: #4ECDC4 !important; }
.icon-loan i { color: #FFE66D !important; }
.icon-salary i { color: #A8E6CF !important; }
.icon-bmi i { color: #FF8B94 !important; }
.icon-bmr i { color: #FFAAA5 !important; }
.icon-calorie i { color: #FFD3B6 !important; }
.icon-time-duration i { color: #B5EAD7 !important; }
.icon-date-diff i { color: #C7CEEA !important; }

/* Image Tools */
.icon-image-resizer i { color: #FF6B6B !important; }
.icon-image-compressor i { color: #4ECDC4 !important; }
.icon-jpg-to-png i { color: #95E77E !important; }
.icon-png-to-jpg i { color: #FFD93D !important; }
.icon-webp-to-jpg i { color: #845EC2 !important; }
.icon-image-cropper i { color: #FF9671 !important; }
.icon-image-rotator i { color: #00C9A7 !important; }
.icon-image-flipper i { color: #FFAB76 !important; }
.icon-blur-image i { color: #FF6EC7 !important; }
.icon-sharpen-image i { color: #4D96FF !important; }
.icon-remove-bg i { color: #E74C3C !important; }
.icon-meme-generator i { color: #F39C12 !important; }
.icon-thumbnail-preview i { color: #9B59B6 !important; }

/* Color & CSS Tools */
.icon-gradient i { color: #FF6B6B !important; }
.icon-color-palette i { color: #FFD93D !important; }
.icon-hex-rgb i { color: #6BCB77 !important; }
.icon-rgb-hex i { color: #4D96FF !important; }
.icon-css-button i { color: #FF6EC7 !important; }
.icon-css-shadow i { color: #845EC2 !important; }
.icon-css-gradient i { color: #FF9671 !important; }
.icon-flexbox i { color: #00C9A7 !important; }
.icon-grid-layout i { color: #FFAB76 !important; }

/* JSON & Code Tools */
.icon-json-formatter i { color: #F7B32B !important; }
.icon-json-validator i { color: #2ECC71 !important; }
.icon-html-minifier i { color: #E74C3C !important; }
.icon-css-minifier i { color: #3498DB !important; }
.icon-js-minifier i { color: #F1C40F !important; }
.icon-base64-encoder i { color: #9B59B6 !important; }
.icon-base64-decoder i { color: #1ABC9C !important; }
.icon-url-encoder i { color: #E67E22 !important; }
.icon-url-decoder i { color: #34495E !important; }
.icon-regex-tester i { color: #16A085 !important; }
.icon-html-to-text i { color: #8E44AD !important; }
.icon-text-to-html i { color: #D35400 !important; }
.icon-code-beautifier i { color: #27AE60 !important; }
.icon-meta-generator i { color: #2980B9 !important; }
.icon-og-generator i { color: #C0392B !important; }
.icon-robots-generator i { color: #7F8C8D !important; }

/* Text Tools */
.icon-word-counter i { color: #FF6B6B !important; }
.icon-character-counter i { color: #4ECDC4 !important; }
.icon-sentence-counter i { color: #95E77E !important; }
.icon-paragraph-counter i { color: #FFD93D !important; }
.icon-case-converter i { color: #845EC2 !important; }
.icon-title-case i { color: #FF9671 !important; }
.icon-slug i { color: #00C9A7 !important; }
.icon-random-name i { color: #FFAB76 !important; }
.icon-username i { color: #FF6EC7 !important; }
.icon-fancy-text i { color: #4D96FF !important; }
.icon-text-reverser i { color: #6BCB77 !important; }
.icon-remove-duplicates i { color: #E74C3C !important; }
.icon-line-sorter i { color: #3498DB !important; }
.icon-keyword-density i { color: #F39C12 !important; }
.icon-hashtag i { color: #1ABC9C !important; }
.icon-bio i { color: #9B59B6 !important; }
.icon-caption i { color: #E67E22 !important; }
.icon-password i { color: #27AE60 !important; }
.icon-random-text i { color: #D35400 !important; }
.icon-word-scrambler i { color: #8E44AD !important; }

/* Unit Tools */
.icon-unit-converter i { color: #FF6B6B !important; }
.icon-speed-calculator i { color: #4D96FF !important; }
.icon-fuel-cost i { color: #6BCB77 !important; }
.icon-random-number i { color: #FFD93D !important; }

/* Games Tools */
.icon-dice-roller i { color: #FF6B6B !important; }
.icon-flip-coin i { color: #FFD93D !important; }
.icon-countdown-timer i { color: #4D96FF !important; }
.icon-stopwatch i { color: #6BCB77 !important; }
.icon-alarm-tool i { color: #FF9671 !important; }
.icon-time-zone i { color: #845EC2 !important; }
.icon-calendar-generator i { color: #00C9A7 !important; }

/* Productivity Tools */
.icon-work-hours i { color: #FF6B6B !important; }
.icon-meeting-time i { color: #4D96FF !important; }
.icon-habit-tracker i { color: #6BCB77 !important; }
.icon-todo i { color: #FFD93D !important; }
.icon-notes i { color: #845EC2 !important; }
.icon-clipboard i { color: #FF9671 !important; }
.icon-text-compare i { color: #00C9A7 !important; }
.icon-duplicate-finder i { color: #FFAB76 !important; }
.icon-random-picker i { color: #FF6EC7 !important; }
.icon-decision-maker i { color: #4ECDC4 !important; }
.icon-name-wheel i { color: #95E77E !important; }
.icon-yes-no i { color: #E74C3C !important; }

/* ============================================
   DARK MODE
   ============================================ */
.dark-mode .tool-grid li {
    background: rgba(30, 30, 40, 0.95);
    border-color: #444;
}

.dark-mode .tool-grid li a .tool-title {
    color: #eee;
}

.dark-mode .tool-grid li a .tool-desc {
    color: #aaa;
}

.dark-mode .tool-grid li:hover {
    background: rgba(40, 40, 50, 1);
}

/* ===== SOFT OVERLAY GRADIENT - PINK ONLY ===== */
body {
    background: #ffffff !important;
    position: relative;
    min-height: 100vh;
}
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255, 182, 193, 0.50) 0%, rgba(255, 182, 193, 0.30) 50%, rgba(255, 255, 255, 0.50) 100%);
    pointer-events: none;
    z-index: -1;
}