/* ===== FILE PREVIEW PANEL (in-card, after processing) ===== */
.file-preview-panel{display:none;margin-top:10px;border:1.5px solid #d0e2f5;border-radius:10px;overflow:hidden;background:#f7fbff;}
.file-preview-panel.visible{display:block;}
.fpp-header{background:#eef5ff;padding:8px 14px;font-size:11px;font-weight:700;color:#0056b3;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #d0e2f5;}
.fpp-img-wrap{padding:10px;text-align:center;background:#fff;}
.fpp-img{max-width:100%;max-height:200px;object-fit:contain;border-radius:6px;display:block;margin:0 auto;}
.fpp-pdf{width:100%;height:220px;border:none;display:block;}
.fpp-text{padding:10px 14px;font-size:11px;color:#555;line-height:1.5;max-height:120px;overflow-y:auto;white-space:pre-wrap;word-break:break-word;}
.fpp-actions{padding:10px 12px;background:#f0f6ff;border-top:1px solid #d0e2f5;display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.btn-download-ready{background:linear-gradient(135deg,#1d976c,#28a745);color:#fff;border:none;border-radius:8px;padding:9px 18px;font-size:12px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:7px;font-family:'Poppins',sans-serif;transition:.2s;flex-shrink:0;}
.btn-download-ready:hover{background:linear-gradient(135deg,#17856b,#1e7e34);transform:translateY(-1px);box-shadow:0 4px 12px rgba(29,151,108,.3);}
.fpp-info-label{font-size:11px;color:#555;font-weight:600;}



*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:'Poppins',sans-serif;background:#eef2f7;color:#222;padding-top:78px;}
a{text-decoration:none;}

/* ===== ACCESSIBILITY: skip link + focus visibility ===== */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.skip-link{position:fixed;top:-60px;left:8px;background:#0056b3;color:#fff;padding:10px 18px;border-radius:6px;font-weight:600;font-size:14px;z-index:10000;transition:top .2s;}
.skip-link:focus{top:8px;}
:focus-visible{outline:3px solid #ffc107;outline-offset:2px;}
.card-head:focus-visible{outline-offset:-3px;}

/* TOPBAR + NAVBAR - same as courses.html */
.topbar { background: #0b1f3a; color: #fff; padding: 8px 30px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 13.5px; position: fixed; top: 0; width: 100%; z-index: 1001; box-sizing: border-box; transition: transform 0.35s ease; }
.topbar-info { display: flex; align-items: center; gap: 25px; flex-wrap: wrap; }
.topbar-info span, .topbar-info a { color: #fff; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.topbar-info a:hover { color: #ffc107; }
.topbar-info i { color: #ffc107; }
.topbar-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.topbar-btn { padding: 7px 20px; border-radius: 6px; font-weight: 600; font-size: 13px; color: #fff !important; white-space: nowrap; transition: 0.3s; }
.topbar-btn.franchise { background: #17a2b8; }
.topbar-btn.franchise:hover { background: #138496; }
.topbar-btn.admin { background: #ffc107; color: #222 !important; }
.topbar-btn.admin:hover { background: #e0a800; }

.navbar { background: #1565c0; padding: 12px 30px; display: flex; justify-content: flex-start; align-items: center; color: #ffffff; position: fixed; top: 0; width: 100%; z-index: 1000; box-shadow: 0 4px 6px rgba(0,0,0,0.08); gap: 30px; box-sizing: border-box; transition: top 0.35s ease; }
.logo { font-size: 24px; font-weight: 700; display: flex; align-items: center; gap: 10px; flex-shrink: 0; order: -1; }
.nav-links { display: flex; justify-content: flex-start; align-items: center; flex-wrap: nowrap; white-space: nowrap; gap: 28px; }
.nav-links a { color: #ffffff; font-weight: 600; transition: 0.3s; white-space: nowrap; font-size: 14.5px; }
.nav-links a:hover { color: #ffc107; }
.nav-links a.active-nav { color: #ffc107; }

.nav-dropdown { position: relative; display: flex; align-items: center; }
.nav-dropdown-menu {
  position: absolute; top: 100%; left: 0; background: #ffffff; min-width: 240px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.18); border-radius: 8px; padding: 8px 0;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease; z-index: 1002;
}
.nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown:focus-within .nav-dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-dropdown-menu a { display: flex; align-items: center; gap: 8px; padding: 11px 20px; color: #16223f !important; font-weight: 600; font-size: 14px; white-space: nowrap; }
.nav-dropdown-menu a:hover { background: #f0f4fa; color: #1565c0 !important; }
.nav-dropdown > a { display: inline-flex; align-items: center; gap: 6px; }

.admin-btn { background: #dc3545; color: white; padding: 8px 15px; border-radius: 5px; font-weight: 600; transition: 0.3s; display: flex; align-items: center; gap: 8px; }
.admin-btn:hover { background: #c82333; transform: translateY(-2px); color: white !important; }
.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: none; padding: 5px; z-index: 1100; order: 1; }
.hamburger span { display: block; width: 25px; height: 3px; background: #ffffff; border-radius: 3px; transition: 0.3s; }
.hamburger.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
.nav-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 998; }
.nav-overlay.active { display: block; }

@media (max-width: 992px) {
  .topbar-info span:not(.topbar-phone) { display: none; }
}
@media (max-width: 768px) {
  .topbar { padding: 8px 15px; font-size: 12.5px; }
  .topbar-info { gap: 12px; }
  .topbar-btn { padding: 6px 12px; font-size: 12px; }
  .navbar { flex-direction: row; justify-content: space-between; overflow: hidden; top: 0; padding: 12px 15px; }
  .logo { font-size: 20px; order: 1; display: flex; }
  .logo img { height: 46px !important; }
  .hamburger { display: flex; order: -1; }
  .nav-links {
    display: none; position: fixed; top: 70px; left: 0; width: 260px; height: calc(100vh - 70px);
    background: #0b1f3a; flex-direction: column; align-items: flex-start; gap: 0; padding: 0 0 30px;
    z-index: 999; transition: transform 0.3s ease, top 0.35s ease, height 0.35s ease;
    box-shadow: 4px 0 15px rgba(0,0,0,0.2); overflow-y: auto; overflow-x: hidden; transform: translateX(-280px);
  }
  .nav-links.open { display: flex; transform: translateX(0); }
  .nav-links a:not(.admin-btn) { width: 100%; padding: 14px 25px; font-size: 15px; border-bottom: 1px solid rgba(255,255,255,0.1); display: flex; align-items: center; gap: 10px; color: #fff; }
  .nav-links a:hover { background: rgba(255,255,255,0.1); color: #ffc107; }
  .nav-dropdown { flex-direction: column; align-items: stretch; width: 100%; }
  .nav-dropdown-menu {
    position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border-radius: 0;
    background: rgba(255,255,255,0.05); padding: 0; min-width: unset; max-height: 0; overflow: hidden;
    transition: max-height 0.3s ease;
  }
  .nav-dropdown.active .nav-dropdown-menu { max-height: 200px; }
  .nav-dropdown-menu a { padding: 12px 25px 12px 45px !important; color: #fff !important; font-size: 14px !important; font-weight: 500 !important; border-bottom: 1px solid rgba(255,255,255,0.1) !important; }
  .nav-dropdown-menu a:hover { background: rgba(255,255,255,0.1) !important; color: #ffc107 !important; }
  .nav-dropdown > a { justify-content: space-between; }
  .nav-dropdown > a .fa-chevron-down { transition: transform 0.3s ease; font-size: 12px; }
  .nav-dropdown.active > a .fa-chevron-down { transform: rotate(180deg); }
  .admin-btn { margin: 15px 15px 0; width: calc(100% - 30px); max-width: 230px; justify-content: center; border-radius: 8px; box-sizing: border-box; }
  body.menu-open { overflow: hidden; }
}

body.header-hidden .topbar { transform: translateY(-100%); }
body.header-hidden .navbar { top: 0; }
@media (max-width: 768px) {
  body.header-hidden .navbar { top: 0; }
  body.header-hidden .nav-links { top: 70px; height: calc(100vh - 70px); }
}

/* HERO */
/* HERO UPGRADED */
.hero{background:linear-gradient(135deg,#0032a0 0%,#0056b3 45%,#0099e6 100%);color:#fff;text-align:center;padding:44px 20px 0;position:relative;overflow:hidden;}
.hero::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");pointer-events:none;}
.hero-inner{position:relative;z-index:1;max-width:860px;margin:0 auto;}
.hero-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.15);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.25);border-radius:20px;padding:6px 18px;font-size:12px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;margin-bottom:20px;}
.hero h1{font-size:44px;font-weight:700;margin-bottom:14px;line-height:1.15;}
.hero h1 span{background:linear-gradient(90deg,#fff 0%,#a8d8ff 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.hero p{font-size:16px;opacity:.88;margin-bottom:36px;line-height:1.7;max-width:580px;margin-left:auto;margin-right:auto;}
.hero-stats{display:flex;justify-content:center;gap:0;background:rgba(0,0,0,.18);backdrop-filter:blur(10px);border-top:1px solid rgba(255,255,255,.12);margin:0 -24px;padding:22px 24px;}
.hero-stat{flex:1;max-width:220px;text-align:center;position:relative;}
.hero-stat:not(:last-child)::after{content:'';position:absolute;right:0;top:10%;height:80%;width:1px;background:rgba(255,255,255,.15);}
.hero-stat .h-num{font-size:34px;font-weight:700;line-height:1;margin-bottom:5px;}
.hero-stat .h-lbl{font-size:11px;opacity:.75;font-weight:600;text-transform:uppercase;letter-spacing:.8px;}
@media(max-width:560px){.hero h1{font-size:24px;}.hero-stat .h-num{font-size:20px;}.hero-stats{gap:0;}}

/* BOTTOM STATS BAR */
.bottom-stats{display:flex;justify-content:center;flex-wrap:wrap;gap:0;color:#fff;background:linear-gradient(135deg,#0032a0 0%,#0056b3 45%,#0099e6 100%);padding:22px 20px;}

/* BREADCRUMB */
.breadcrumb{background:#fff;border-bottom:1px solid #e8edf5;padding:9px 24px;}
.breadcrumb-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:6px;font-size:12px;flex-wrap:wrap;}
.breadcrumb-inner a{color:#0056b3;font-weight:500;text-decoration:none;display:flex;align-items:center;gap:4px;transition:color .2s;}
.breadcrumb-inner a:hover{color:#003d82;text-decoration:underline;}
.bc-sep{color:#bbb;font-size:10px;}
.bc-current{color:#555;font-weight:600;display:flex;align-items:center;gap:5px;}
.bc-current i{color:#0056b3;font-size:11px;}
@media(max-width:480px){.breadcrumb{padding:6px 14px;}.breadcrumb-inner{font-size:11px;gap:4px;}}

/* STICKY HEADER WRAPPER (TABS + SEARCH) */
.sticky-header{position:sticky;top:var(--navbar-h,56px);z-index:99;transition:transform .28s ease;}
.sticky-header.sh-hidden{transform:translateY(-100%);}

/* TABS */
.tabs-bar{background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.08);overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;}
.tabs-bar::-webkit-scrollbar{height:5px;}
.tabs-bar::-webkit-scrollbar-thumb{background:#c8d4e3;border-radius:4px;}

.tabs-inner{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:stretch;justify-content:flex-start;max-width:1280px;margin:0 auto;overflow:visible;width:100%;}
.tab-btn{padding:0 12px;height:52px;font-family:'Poppins',sans-serif;font-size:13px;font-weight:600;color:#666;background:none;border:none;border-right:1px solid #f0f0f0;border-bottom:3px solid transparent;cursor:pointer;transition:.2s;display:inline-flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap;flex-shrink:0;}
/* Last tab no right border */
.tab-btn:last-of-type{border-right:none;}
/* Search aligned right */
.tabs-search-inline{margin-left:auto;border-left:1px solid #e8edf5;display:flex;align-items:center;justify-content:center;padding:8px 16px;background:#fff;flex-shrink:0;}

@media(max-width:768px){
  .tabs-inner{
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
    max-width:100%;
    padding:0 4px;
  }
  .tabs-inner::-webkit-scrollbar{display:none;}
  .tab-btn{
    flex:0 0 auto;
    scroll-snap-align:start;
    min-width:max-content;
    min-height:48px;
    padding:12px 16px;
    font-size:13px;
    border-right:none;
    border-bottom:3px solid transparent;
    border-top:none;
  }
  /* Remove second-row top borders on mobile */
  .tab-btn:nth-child(5),.tab-btn:nth-child(6),.tab-btn:nth-child(7),.tab-btn:nth-child(8){border-top:none;}
  .tabs-search-inline{
    display:none; /* Search bar already shown below tabs on mobile */
  }
}
.tabs-search-inline-wrap{position:relative;display:flex;align-items:center;width:190px;}
.tabs-search-inline-wrap .si-icon{position:absolute;left:10px;color:#999;font-size:13px;pointer-events:none;}
.tabs-search-inline input{width:100%;padding:8px 30px 8px 32px;border:1.5px solid #dde3f0;border-radius:6px;font-family:'Poppins',sans-serif;font-size:12px;background:#fff;outline:none;transition:border-color .2s;color:#333;}
.tabs-search-inline input:focus{border-color:#0056b3;}
.tabs-search-inline input::placeholder{color:#bbb;}
.si-clear{position:absolute;right:8px;background:none;border:none;color:#bbb;font-size:11px;cursor:pointer;padding:2px 4px;display:none;line-height:1;}
.si-clear:hover{color:#dc3545;}
.si-clear.visible{display:flex;align-items:center;}
.tab-btn:hover{color:#0056b3;background:#f7fbff;}
.tab-btn.active{color:#0056b3;border-bottom-color:#0056b3;background:#f7fbff;}
.tab-lbl-short{display:none;}

/* CATEGORY HEADING (shown only in "All Tools" view) */
.cat-heading{display:none;align-items:center;gap:10px;font-size:16px;font-weight:700;color:#1a1a2e;background:#eef5ff;border-left:4px solid #0056b3;padding:10px 14px;border-radius:8px;margin:0 0 6px;}
body.view-all .cat-heading{display:flex;}
body.view-all .tab-content{margin-top:0;padding-top:28px;border-top:1px solid #e3e9f3;}
body.view-all #tab-pdf{border-top:none;padding-top:0;}

/* CONTENT */
.tab-content{display:none;max-width:1280px;margin:28px auto;padding:0 28px 70px;}
.tab-content.active{display:block;}
.sec-title{font-size:11.5px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:#0056b3;margin:36px 0 16px;display:flex;align-items:center;gap:12px;}
.sec-title::after{content:'';flex:1;height:2px;background:#dde3f0;}

/* TOOL GRID */
.tools-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
@media(max-width:1200px){.tools-grid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:900px){.tools-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.tools-grid{grid-template-columns:1fr;}}

/* 2-COLUMN TOOL GRID (e.g. Watermark) */
.tools-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;}
@media(max-width:700px){.tools-grid-2{grid-template-columns:1fr;}}

/* TYPING TEST LAYOUT */
.typing-layout{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media(max-width:700px){.typing-layout{grid-template-columns:1fr;}}

/* RESUME BUILDER LAYOUT */
.resume-layout{display:grid;grid-template-columns:1fr 1.1fr;gap:24px;align-items:start;}
.resume-preview-col{position:sticky;top:80px;}
@media(max-width:900px){
  .resume-layout{grid-template-columns:1fr;}
  .resume-preview-col{position:static;}
}

/* TOOL CARD */
.tool-card{background:#fff;border-radius:16px;box-shadow:0 2px 12px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.04);overflow:hidden;display:flex;flex-direction:column;transition:transform .22s,box-shadow .22s;border:1px solid rgba(0,0,0,.05);}
.tool-card:hover{transform:translateY(-5px);box-shadow:0 12px 32px rgba(0,0,0,.13),0 4px 8px rgba(0,0,0,.06);}
.card-head{padding:20px 16px 16px 22px;display:flex;align-items:center;gap:16px;border-bottom:1px solid #f0f4fb;cursor:pointer;position:relative;transition:background .2s;min-height:44px;}
@media(max-width:768px){
  .card-head{min-height:56px;padding:14px 48px 14px 16px;gap:12px;}
  .card-icon{width:44px;height:44px;font-size:20px;}
  .card-head h3{font-size:14px;}
  .card-toggle-icon{right:14px;font-size:16px;}
  .card-body{padding:14px 16px;}
}
.card-head:hover{background:#f7fbff;}
.card-toggle-icon{position:absolute;right:18px;top:50%;transform:translateY(-50%);color:#bbb;font-size:14px;transition:transform .25s,color .2s;}
.tool-card.active .card-toggle-icon{transform:translateY(-50%) rotate(180deg);color:#0056b3;}
.tool-card .card-body{display:none;}
.tool-card.active .card-body{display:flex;}
.tool-card:not(.active) .card-head{border-bottom-color:transparent;}
.card-icon{width:54px;height:54px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:24px;color:#fff;flex-shrink:0;box-shadow:0 4px 10px rgba(0,0,0,.15);}
.card-head h3{font-size:15.5px;color:#1a1a2e;margin-bottom:4px;font-weight:700;}
.card-head p{font-size:11px;color:#999;}
.card-body{padding:18px 22px 20px;flex:1;display:flex;flex-direction:column;gap:10px;}
label{font-size:11px;font-weight:600;color:#555;}
input[type=text],input[type=number],input[type=date],input[type=email],input[type=color],select,textarea{width:100%;padding:10px 14px;border:1.5px solid #dde3f0;border-radius:9px;font-family:'Poppins',sans-serif;font-size:13px;color:#333;background:#f9fbff;outline:none;transition:border-color .2s,box-shadow .2s;}
input:focus,select:focus,textarea:focus{border-color:#0056b3;background:#fff;}
textarea{resize:none;height:78px;}
.btn{width:100%;padding:11px 14px;border:none;border-radius:9px;font-family:'Poppins',sans-serif;font-size:13px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:.2s;}
.btn-primary{background:#0056b3;color:#fff;}.btn-primary:hover{background:#004494;}
.btn-red{background:#dc3545;color:#fff;}.btn-red:hover{background:#b02a37;}
.btn-green{background:#28a745;color:#fff;}.btn-green:hover{background:#1e7e34;}
.btn-orange{background:#fd7e14;color:#fff;}.btn-orange:hover{background:#d96a0a;}
.btn-purple{background:#6f42c1;color:#fff;}.btn-purple:hover{background:#5a32a3;}
.result-box{background:#f0f6ff;border:1.5px solid #d0e2f5;border-radius:8px;padding:10px 14px;font-size:13px;color:#0056b3;font-weight:600;min-height:40px;display:flex;align-items:center;word-break:break-word;}
.file-drop{border:2px dashed #b0c8e8;border-radius:10px;padding:22px 16px;text-align:center;background:#f7fbff;cursor:pointer;font-size:13px;color:#666;transition:.2s;position:relative;}
.file-drop:hover{border-color:#0056b3;background:#eef5ff;transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,86,179,.08);}
.file-drop i{font-size:28px;color:#0056b3;margin-bottom:8px;display:block;}
.file-drop strong{color:#333;font-size:13px;}
.file-drop small{font-size:11px;color:#aaa;margin-top:4px;display:block;}
.progress-bar{height:8px;background:#eee;border-radius:6px;overflow:hidden;margin-top:4px;}
.progress-fill{height:100%;background:#0056b3;border-radius:6px;transition:width .4s;width:0%;}
.tag{display:inline-block;background:#e8f0fe;color:#0056b3;font-size:10px;font-weight:700;padding:2px 8px;border-radius:20px;margin-bottom:2px;}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:8px;}

/* TIMER */
.timer-big{text-align:center;font-size:46px;font-weight:700;color:#0056b3;letter-spacing:3px;padding:6px 0 12px;}

/* TYPING */
#typing-source{background:#fff8e6;border:1.5px solid #ffe082;border-radius:8px;padding:10px 12px;font-size:13px;line-height:1.9;color:#555;min-height:65px;margin-bottom:6px;}
#typing-source .correct{color:#28a745;font-weight:600;}
#typing-source .wrong{color:#dc3545;background:#fdd;border-radius:2px;}

/* STRENGTH BAR */
.strength-bar{height:6px;border-radius:4px;background:#eee;overflow:hidden;}
.strength-fill{height:100%;border-radius:4px;transition:width .3s,background .3s;width:0%;}

/* WC STATS */
.wc-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;}
.wc-stat{background:#f0f6ff;border:1.5px solid #d0e2f5;border-radius:8px;padding:8px 4px;text-align:center;}
.wc-stat .num{font-size:20px;font-weight:700;color:#0056b3;}
.wc-stat .lbl{font-size:9px;color:#888;font-weight:700;text-transform:uppercase;}

/* AGE BOXES */
.age-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;}
.age-box{background:#f0f6ff;border:1.5px solid #d0e2f5;border-radius:8px;padding:10px 4px;text-align:center;}
.age-box .val{font-size:22px;font-weight:700;color:#0056b3;}
.age-box .lbl{font-size:9px;color:#888;font-weight:700;text-transform:uppercase;}

/* COLOR PREVIEW */
.color-prev{width:100%;height:50px;border-radius:8px;border:1.5px solid #dde3f0;transition:background .2s;}

/* RESUME */
:root{--resume-color:#0056b3;}
.resume-section-title{font-size:13px;font-weight:700;color:#0056b3;margin:14px 0 8px;border-bottom:2px solid #dde3f0;padding-bottom:6px;}
#resume-preview{background:#fff;border:1.5px solid #dde3f0;border-radius:10px;padding:32px 28px;font-size:13px;line-height:1.7;min-height:200px;font-family:'Poppins',sans-serif;}
#resume-preview .r-header{background:var(--resume-color);color:#fff;margin:-32px -28px 20px;padding:24px 28px 20px;border-radius:9px 9px 0 0;}
#resume-preview .r-header h2{font-size:22px;color:#fff;font-weight:700;margin-bottom:2px;overflow-wrap:anywhere;word-break:break-word;}
#resume-preview .r-header{overflow:hidden;}
#resume-preview .r-header .r-header-text{min-width:0;flex:1 1 auto;}
#resume-preview .r-header img{flex-shrink:0;}
#resume-preview .r-header .r-subtitle{font-size:13px;opacity:.88;margin-bottom:8px;}
#resume-preview .r-header .r-contact{display:flex;flex-wrap:wrap;gap:6px 0;font-size:11px;opacity:.92;letter-spacing:.3px;}
#resume-preview .r-header .r-contact span{display:flex;align-items:center;}
#resume-preview .r-header .r-contact span:not(:last-child)::after{content:'•';margin:0 10px;opacity:.6;}
#resume-preview .r-summary{background:#f7fbff;border-left:4px solid var(--resume-color);padding:10px 14px;border-radius:0 6px 6px 0;font-size:12px;color:#555;margin-bottom:14px;line-height:1.6;}
#resume-preview .r-section{margin-bottom:14px;}
#resume-preview .r-section h4{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--resume-color);margin-bottom:8px;border-bottom:1.5px solid var(--resume-color);padding-bottom:3px;}
#resume-preview .r-item{margin-bottom:6px;font-size:12.5px;}
#resume-preview .r-item strong{color:#1a1a2e;font-size:13px;}
#resume-preview .r-item .r-meta{font-size:11px;color:#888;margin-bottom:2px;}
#resume-preview .r-chips{display:flex;flex-wrap:wrap;gap:5px;}
#resume-preview .r-chip{background:#e8f0fe;color:var(--resume-color);padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600;}

/* SKELETON LOADING */
@keyframes skeleton-pulse{0%{background-position:-400px 0;}100%{background-position:400px 0;}}
.skeleton{background:linear-gradient(90deg,#e8edf5 25%,#f4f7fb 37%,#e8edf5 63%);background-size:800px 100%;animation:skeleton-pulse 1.4s ease-in-out infinite;border-radius:8px;}
#page-skeleton{position:fixed;inset:0;background:#f0f4f8;z-index:9999;display:flex;flex-direction:column;align-items:center;padding:90px 18px 0;gap:14px;}
#page-skeleton .sk-hero{width:100%;max-width:1160px;height:120px;border-radius:14px;}
#page-skeleton .sk-tabs{width:100%;max-width:1160px;height:48px;border-radius:10px;}
#page-skeleton .sk-grid{width:100%;max-width:1160px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
@media(max-width:900px){#page-skeleton .sk-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){#page-skeleton .sk-grid{grid-template-columns:1fr;}}
#page-skeleton .sk-card{height:160px;border-radius:14px;}
.tool-skeleton{display:flex;flex-direction:column;gap:10px;padding:4px 0;}
.tool-skeleton .sk-line{height:14px;width:100%;}
.tool-skeleton .sk-line.short{width:60%;}
.tool-skeleton .sk-box{height:120px;width:100%;}
.img-preview{width:100%;max-height:160px;object-fit:contain;border-radius:8px;border:1.5px solid #dde3f0;background:#f9f9f9;display:none;margin-top:6px;}

/* ============================================================
   MODERN CARD LOOK — sabhi tools par (passport tool jaisa)
   Ye sirf CSS hai: kisi tool ka JS/logic nahi badla gaya.
   ============================================================ */

/* Card khud thoda uthaa hua, hover par lift */
.tool-card{transition:transform .22s,box-shadow .22s,border-color .22s;}
.tool-card:hover{box-shadow:0 8px 26px rgba(15,35,70,.10),0 2px 6px rgba(0,0,0,.05);}
.tool-card.active{border-color:#cfe0f5;}

/* Sab controls poori chaudai lein — .card-body par align-items:start hai,
   isliye children apni content-width tak sikud jaate the aur card ki
   right side khaali dikhti thi. */
.card-body > *{max-width:100%;align-self:stretch;}
/* Inline style="display:grid/flex" wale wrappers bhi poori chaudai lein */
.card-body > div[style*="display:grid"],
.card-body > div[style*="display: grid"],
.card-body > div[style*="display:flex"],
.card-body > div[style*="display: flex"]{width:100%;}
/* Image preview apni jagah leti hai par khinche nahi */
.card-body > img.img-preview{align-self:center;}

/* --- Labels: chhote uppercase headers --- */
.card-body label:not(.pp-switch):not(.pp-opt):not(.tm-chk):not(.tm-swatch){
  font-size:10.5px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.5px;}

/* --- Inputs / selects: softer, focus par ring --- */
.card-body input[type=text],.card-body input[type=number],.card-body input[type=date],
.card-body input[type=email],.card-body select,.card-body textarea{
  border-radius:10px;background:#fff;border-color:#dde5f0;padding:11px 14px;}
.card-body input[type=text]:hover,.card-body input[type=number]:hover,
.card-body select:hover,.card-body textarea:hover{border-color:#b9d3ee;}
.card-body input[type=text]:focus,.card-body input[type=number]:focus,.card-body input[type=date]:focus,
.card-body input[type=email]:focus,.card-body select:focus,.card-body textarea:focus{
  border-color:#0056b3;box-shadow:0 0 0 3px rgba(0,86,179,.10);}

/* --- Select: custom arrow --- */
.card-body select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:34px;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:14px;}

/* --- Drop zone: bada, friendly, hover par uthe --- */
.card-body .file-drop{border-radius:14px;border:2px dashed #c3d7ef;background:#f8fbff;padding:26px 18px;}
.card-body .file-drop:hover{border-color:#0056b3;background:#eff6ff;transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(0,86,179,.10);}
.card-body .file-drop i{transition:transform .22s;}
.card-body .file-drop:hover i{transform:scale(1.12) translateY(-2px);}

/* --- Image preview: framed, hover par halka zoom --- */
.card-body .img-preview{border-radius:12px;border:1.5px solid #dde3f0;
  background:linear-gradient(135deg,#f8fafc,#eef3fa);box-shadow:0 3px 10px rgba(15,35,70,.06);
  transition:transform .25s,box-shadow .25s,border-color .25s;padding:4px;}
.card-body .img-preview:hover{transform:scale(1.015);border-color:#0056b3;
  box-shadow:0 6px 20px rgba(0,86,179,.16);}

/* --- Buttons: lift + soft shadow --- */
.card-body .btn{border-radius:10px;padding:12px 16px;letter-spacing:.2px;}
.card-body .btn-primary,.card-body .btn-green,.card-body .btn-orange,.card-body .btn-purple{
  box-shadow:0 3px 10px rgba(0,86,179,.16);}
.card-body .btn:hover{transform:translateY(-1px);}
.card-body .btn:active{transform:translateY(0);}

/* --- Result box: accent border --- */
.card-body .result-box{border-radius:10px;border-left:4px solid #0056b3;}

/* --- Result panel: rounded + shadow --- */
.card-body .file-preview-panel{border-radius:12px;box-shadow:0 3px 12px rgba(15,35,70,.07);}

/* --- Progress bar: smooth --- */
.card-body .progress-bar{border-radius:20px;overflow:hidden;}
.card-body .progress-fill{transition:width .3s ease;}

/* --- Checkbox: bade aur blue --- */
.card-body input[type=checkbox]{width:16px;height:16px;accent-color:#0056b3;cursor:pointer;flex-shrink:0;}

/* Checkbox waale labels ko halka "option row" look — JS chhede bina.
   :has() modern browsers mein chalta hai; purane browser mein sirf
   ye extra styling nahi milegi, tool phir bhi theek chalega. */
.card-body label:has(> input[type=checkbox]){
  padding:9px 11px;border-radius:9px;border:1.5px solid #e6ecf5;background:#f8fafc;
  transition:border-color .18s,background .18s;font-weight:600!important;color:#44506b!important;
  text-transform:none!important;letter-spacing:0!important;font-size:12.5px!important;}
.card-body label:has(> input[type=checkbox]):hover{border-color:#b9d3ee;background:#f2f8ff;}
.card-body label:has(> input[type=checkbox]:checked){border-color:#9dc4ee;background:#eef5ff;color:#0056b3!important;}
/* Passport ke apne toggle switches / option cards par ye apply na ho */
.card-body label.pp-switch:has(> input[type=checkbox]),
.card-body label.pp-opt:has(> input[type=checkbox]){padding:0;border:none;background:none;}

/* --- Range slider --- */
.card-body input[type=range]{accent-color:#0056b3;cursor:pointer;}

/* ===== PASSPORT PHOTO MAKER — modern layout ===== */

/* Step 1: drop zone (left) + photo preview (right) */
.pp-drop-row{display:flex;gap:12px;align-items:stretch;}
.pp-drop-row .file-drop{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;margin:0;}
.pp-preview-col{display:none;flex:0 0 148px;flex-direction:column;gap:7px;align-items:center;justify-content:center;}
.pp-preview-col.has-photo{display:flex;animation:ppFadeIn .32s ease;}
@keyframes ppFadeIn{from{opacity:0;transform:translateX(-8px) scale(.96);}to{opacity:1;transform:none;}}

/* Photo frame — hover par zoom + overlay actions */
.pp-frame{position:relative;width:100%;border-radius:12px;overflow:hidden;border:1.5px solid #dde3f0;
  background:linear-gradient(135deg,#f8fafc,#eef3fa);box-shadow:0 3px 10px rgba(15,35,70,.07);transition:.25s;}
.pp-frame:hover{border-color:#0056b3;box-shadow:0 6px 20px rgba(0,86,179,.18);transform:translateY(-2px);}
.pp-frame img{width:100%;height:158px;object-fit:contain;display:block;transition:transform .3s ease;}
.pp-frame:hover img{transform:scale(1.04);}

/* Hover overlay: Adjust / Change */
.pp-frame-ov{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  background:linear-gradient(to top,rgba(4,20,45,.86),rgba(4,20,45,.42));opacity:0;transition:opacity .25s;}
.pp-frame:hover .pp-frame-ov,.pp-frame:focus-within .pp-frame-ov{opacity:1;}
.pp-frame-ov button{background:rgba(255,255,255,.95);border:none;border-radius:7px;padding:6px 12px;cursor:pointer;
  font-family:'Poppins',sans-serif;font-size:11px;font-weight:700;color:#0056b3;display:inline-flex;align-items:center;gap:5px;
  transition:.18s;width:auto;}
.pp-frame-ov button:hover{background:#fff;transform:scale(1.05);}

/* "Ready" badge */
.pp-badge{position:absolute;top:7px;left:7px;background:rgba(26,158,75,.95);color:#fff;font-size:9.5px;font-weight:700;
  padding:3px 8px;border-radius:20px;font-family:'Poppins',sans-serif;letter-spacing:.3px;display:flex;align-items:center;gap:4px;
  box-shadow:0 2px 6px rgba(0,0,0,.2);}

.pp-meta{font-size:10.5px;color:#7c8798;font-weight:600;text-align:center;line-height:1.45;font-family:'Poppins',sans-serif;}

/* Result panel: page ki asli jaankari (px se pata nahi chalta ki
   page kitna bada hai, isliye mm/inch aur photo count bhi dikhate hain) */
.pp-res-stats{display:flex;flex-wrap:wrap;gap:6px 14px;padding:9px 14px;background:#f7fbff;
  border-bottom:1px solid #e2ecf7;font-family:'Poppins',sans-serif;}
.pp-res-stats span{font-size:11px;font-weight:600;color:#55627a;display:inline-flex;align-items:center;gap:5px;}
.pp-res-stats i{color:#0056b3;font-size:11px;}
/* Sheet (A4 / 4x6) lamba hota hai — chhote box mein kuch dikhta nahi tha */
#passport-preview-panel .fpp-img{max-height:220px;}
#passport-preview-panel .fpp-img.pp-tall{max-height:420px;box-shadow:0 2px 12px rgba(15,35,70,.13);}
@media(max-width:560px){ #passport-preview-panel .fpp-img.pp-tall{max-height:320px;} }

/* Poora card use karo: card-body ka align-items:start children ko
   sikod deta tha, isliye right side khaali padi rehti thi. */
#tool-passport-size-photo-maker .card-body > *{width:100%;align-self:stretch;}

/* 2-column workspace — left: photo, right: settings */
.pp-workspace{display:grid;grid-template-columns:minmax(300px,1fr) minmax(340px,1.15fr);gap:16px;align-items:start;}
.pp-left{display:flex;flex-direction:column;gap:10px;min-width:0;}
.pp-right{display:flex;flex-direction:column;gap:10px;min-width:0;}
.pp-right .btn-primary{margin-top:2px;}
@media(max-width:900px){ .pp-workspace{grid-template-columns:1fr;} }

/* Section box */
.pp-sec{background:#f8fafc;border:1px solid #e6ecf5;border-radius:12px;padding:13px 14px;}
.pp-sec-title{font-size:10.5px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.6px;
  display:flex;align-items:center;gap:6px;margin-bottom:10px;font-family:'Poppins',sans-serif;}
.pp-sec-title i{color:#0056b3;font-size:12px;}

/* Layout ke visual cards (Single / 4x6 / A4) */
.pp-opts{display:flex;gap:8px;flex-wrap:wrap;}
.pp-opt{flex:1;min-width:88px;cursor:pointer;}
.pp-opt input{position:absolute;opacity:0;pointer-events:none;}
.pp-opt span{display:flex;flex-direction:column;align-items:center;gap:5px;padding:11px 6px;border:1.6px solid #dde5f0;
  border-radius:10px;background:#fff;font-size:11.5px;font-weight:600;color:#5b6780;text-align:center;transition:.18s;
  font-family:'Poppins',sans-serif;line-height:1.3;}
.pp-opt span i{font-size:17px;color:#94a3b8;transition:.18s;}
.pp-opt:hover span{border-color:#9dc4ee;background:#f7fbff;}
.pp-opt input:checked + span{border-color:#0056b3;background:#eef5ff;color:#0056b3;box-shadow:0 0 0 3px rgba(0,86,179,.10);}
.pp-opt input:checked + span i{color:#0056b3;}
.pp-opt input:focus-visible + span{outline:2px solid #0056b3;outline-offset:2px;}

/* Toggle switch (border / cutlines) */
.pp-switch{display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;padding:7px 0;
  font-size:12.5px;font-weight:600;color:#44506b;font-family:'Poppins',sans-serif;}
.pp-switch input{position:absolute;opacity:0;pointer-events:none;}
.pp-switch .tr{flex:0 0 38px;height:21px;border-radius:20px;background:#cbd5e1;position:relative;transition:.2s;}
.pp-switch .tr::after{content:'';position:absolute;top:2.5px;left:2.5px;width:16px;height:16px;border-radius:50%;
  background:#fff;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.2);}
.pp-switch input:checked + .tr{background:#0056b3;}
.pp-switch input:checked + .tr::after{transform:translateX(17px);}
.pp-switch input:focus-visible + .tr{outline:2px solid #0056b3;outline-offset:2px;}

/* Chuni hui size ka chip */
.pp-size-chip{display:none;align-items:center;justify-content:space-between;gap:10px;background:linear-gradient(135deg,#eef5ff,#f7fbff);
  border:1.5px solid #cfe0f5;border-radius:10px;padding:10px 13px;margin-top:10px;font-family:'Poppins',sans-serif;}
.pp-size-chip.show{display:flex;}
.pp-chip-edit{background:none;border:none;color:#0056b3;font-weight:700;font-size:12px;cursor:pointer;
  display:inline-flex;align-items:center;gap:5px;font-family:'Poppins',sans-serif;padding:4px 6px;border-radius:6px;}
.pp-chip-edit:hover{background:rgba(0,86,179,.09);}

@media(max-width:560px){
  .pp-drop-row{flex-direction:column;}
  .pp-preview-col{flex:1 1 auto;}
  .pp-preview-col img{max-height:190px;}
}

/* INFO BOX */
.info-box{background:#fff8e6;border:1.5px solid #ffe082;border-radius:8px;padding:10px 13px;font-size:12px;color:#7a5c00;}

/* SCROLLBAR */
.tabs-bar::-webkit-scrollbar{height:3px;}
.tabs-bar::-webkit-scrollbar-thumb{background:#0056b3;border-radius:4px;}

/* FOOTER */
footer{background:#222;color:#ccc;text-align:center;padding:20px;font-size:13px;}
footer a{color:#ffc107;}

/* ===== DARK MODE TOGGLE BUTTON ===== */
.dm-toggle-nav{position:relative;background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.25);color:#fff;padding:0;width:56px;height:28px;border-radius:20px;cursor:pointer;display:flex;align-items:center;transition:.3s;flex-shrink:0;margin-left:auto;}
.dm-toggle-nav .dm-track{position:relative;width:100%;height:100%;border-radius:20px;display:flex;align-items:center;padding:0 4px;justify-content:space-between;}
.dm-toggle-nav .dm-icon-moon,.dm-toggle-nav .dm-icon-sun{font-size:11px;z-index:1;transition:.3s;line-height:1;}
.dm-toggle-nav .dm-icon-moon{color:rgba(255,255,255,.6);}
.dm-toggle-nav .dm-icon-sun{color:rgba(255,255,255,.4);}
.dm-toggle-nav .dm-thumb{position:absolute;left:3px;top:50%;transform:translateY(-50%);width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.25);transition:.3s;display:flex;align-items:center;justify-content:center;}
.dm-toggle-nav .dm-thumb i{font-size:11px;color:#0056b3;transition:.3s;}
.dm-toggle-nav:hover{background:rgba(255,255,255,.22);}

/* ===== CLEAR BUTTON ===== */
.file-drop-wrap{position:relative;display:flex;flex-direction:column;gap:4px;}
.clear-btn{display:none;align-self:flex-end;background:none;border:none;font-size:11px;color:#dc3545;cursor:pointer;font-family:'Poppins',sans-serif;font-weight:600;padding:2px 6px;border-radius:6px;transition:.2s;}
.clear-btn:hover{background:#ffe8e8;}
.clear-btn.visible{display:inline-flex;align-items:center;gap:4px;}

/* ===== DRAG-OVER HIGHLIGHT ===== */
.file-drop.drag-over{border-color:#0056b3;background:#eef5ff;transform:scale(1.01);}

/* ===== SPINNER ===== */
.spinner-overlay{display:none;position:absolute;inset:0;background:rgba(255,255,255,.82);border-radius:14px;z-index:10;flex-direction:column;align-items:center;justify-content:center;gap:10px;font-size:13px;font-weight:600;color:#0056b3;}
.spinner-overlay.active{display:flex;}
.spinner{width:36px;height:36px;border:4px solid #dde3f0;border-top-color:#0056b3;border-radius:50%;animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.tool-card{position:relative;}

/* ===== IMAGE PREVIEW MODAL ===== */
.preview-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:5000;align-items:center;justify-content:center;flex-direction:column;gap:16px;padding:20px;}
.preview-modal.active{display:flex;}
.preview-modal .modal-inner{background:#fff;border-radius:14px;padding:20px;max-width:900px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.4);}
.preview-modal .modal-title{font-size:14px;font-weight:700;color:#0056b3;margin-bottom:14px;display:flex;align-items:center;justify-content:space-between;}
.preview-modal .modal-close{background:none;border:none;font-size:20px;cursor:pointer;color:#aaa;}
.preview-modal .modal-close:hover{color:#dc3545;}
.preview-compare{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media(max-width:600px){.preview-compare{grid-template-columns:1fr;}}
.preview-compare img{width:100%;max-height:300px;object-fit:contain;border-radius:8px;border:1.5px solid #dde3f0;}
.preview-compare .pc-label{font-size:11px;font-weight:700;color:#555;margin-bottom:6px;text-align:center;}
.preview-actions{display:flex;gap:10px;margin-top:14px;justify-content:flex-end;}
.preview-actions .btn{width:auto;padding:9px 20px;}

/* ===== RECENTLY USED ===== */
.recently-used{display:none;background:#fff;border-radius:12px;padding:14px 18px;box-shadow:0 2px 10px rgba(0,0,0,.07);margin-bottom:18px;}
.recently-used h4{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#0056b3;margin-bottom:10px;}
.ru-chips{display:flex;flex-wrap:wrap;gap:8px;}
.ru-chip{background:#eef5ff;border:1.5px solid #d0e2f5;border-radius:20px;padding:5px 14px;font-size:12px;font-weight:600;color:#0056b3;cursor:pointer;transition:.2s;display:flex;align-items:center;gap:6px;}
.ru-chip:hover{background:#0056b3;color:#fff;border-color:#0056b3;}

/* ===== TOOL SEARCH BAR ===== */
/* ===== UPGRADED SEARCH BAR ===== */
.search-bar-wrap{background:#fff;border-bottom:1px solid #eee;padding:10px 18px;z-index:98;display:flex;align-items:center;gap:10px;}
.search-wrap{position:relative;flex:1;display:flex;flex-direction:column;}
.search-input-row{display:flex;align-items:center;position:relative;flex:1;min-width:0;background:#f7fbff;border:2px solid #dde3f0;border-radius:28px;transition:border-color .2s,box-shadow .2s,background .2s;}
.search-input-row:focus-within{border-color:#0056b3;background:#fff;box-shadow:0 0 0 3px rgba(0,86,179,.1);}
.search-bar-wrap input{flex:1;padding:10px 8px 10px 0;border:none;border-radius:0;font-family:'Poppins',sans-serif;font-size:13px;background:transparent;outline:none;color:#333;min-width:0;}
.search-bar-wrap input:focus{border-color:transparent;background:transparent;box-shadow:none;}
.search-bar-icon{flex-shrink:0;padding:0 10px 0 16px;color:#aaa;font-size:14px;pointer-events:none;transition:color .2s;}
.search-input-row:focus-within .search-bar-icon{color:#0056b3;}
.search-right-btns{display:flex;align-items:center;gap:4px;padding-right:10px;flex-shrink:0;}
.search-clear{background:none;border:none;font-size:13px;color:#aaa;cursor:pointer;display:none;padding:4px 6px;border-radius:6px;transition:color .2s,background .2s;}
.search-clear:hover{color:#dc3545;background:#fff0f0;}
.search-kbd{background:#f0f0f0;border:1px solid #ddd;border-radius:5px;font-size:10px;font-weight:700;color:#888;padding:2px 6px;pointer-events:none;white-space:nowrap;font-family:'Poppins',sans-serif;}
.search-bar-wrap input:focus ~ .search-right-btns .search-kbd,
.search-input-row:focus-within .search-kbd{display:none;}
@media(max-width:768px){
  .search-kbd{display:none;}
  .search-bar-wrap{padding:10px 14px;}
  .search-bar-wrap input{font-size:15px;padding:12px 8px 12px 0;}
  .search-input-row{border-radius:32px;min-height:48px;}
  .search-bar-icon{font-size:16px;padding:0 10px 0 14px;}
  .search-clear{padding:6px 8px;font-size:15px;}
}

/* Suggestions dropdown */
.search-suggestions{display:none;position:absolute;top:calc(100% + 6px);left:0;right:0;background:#fff;border:1.5px solid #dde3f0;border-radius:14px;box-shadow:0 8px 28px rgba(0,0,0,.12);overflow:hidden;z-index:200;max-height:320px;overflow-y:auto;}
.search-suggestions.visible{display:block;}
.sugg-item{display:flex;align-items:center;gap:12px;padding:10px 16px;cursor:pointer;transition:background .15s;font-size:13px;}
.sugg-item:hover,.sugg-item.active{background:#f0f6ff;}
.sugg-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;color:#fff;flex-shrink:0;}
.sugg-info{flex:1;min-width:0;}
.sugg-name{font-weight:600;color:#1a1a2e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sugg-name mark{background:none;color:#0056b3;font-weight:700;}
.sugg-desc{font-size:11px;color:#999;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sugg-tab{font-size:10px;font-weight:700;background:#e8f0fe;color:#0056b3;padding:2px 8px;border-radius:20px;flex-shrink:0;}
.sugg-divider{font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#bbb;padding:8px 16px 4px;background:#fafafa;}
.sugg-empty{padding:20px;text-align:center;color:#aaa;font-size:13px;}
.sugg-empty i{font-size:24px;display:block;margin-bottom:6px;}

/* Quick filter chips */
.search-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px;padding:0 4px;}
.search-chip{background:#f0f4f8;border:1.5px solid #dde3f0;border-radius:20px;padding:3px 12px;font-size:11px;font-weight:600;color:#666;cursor:pointer;transition:.15s;white-space:nowrap;}
.search-chip:hover{border-color:#0056b3;color:#0056b3;background:#eef5ff;}
.search-chip.active{background:#0056b3;color:#fff;border-color:#0056b3;}

.search-no-results{text-align:center;padding:40px 20px;color:#aaa;font-size:14px;display:none;}
.tool-card.search-hidden{display:none!important;}
.sec-title.search-hidden{display:none!important;}
.tools-grid.search-hidden{display:none!important;}
.tools-grid-2.search-hidden{display:none!important;}
/* highlight matched cards */
.tool-card.search-match .card-head{background:#f0f6ff;}
/* ===== END UPGRADED SEARCH ===== */

/* ===== FOCUS MODE (one tool open) ===== */
.focus-hidden{display:none!important;}

/* Grid becomes single centered column when a tool is open */
body.tool-focus-active .tab-content.active .tools-grid,
body.tool-focus-active .tab-content.active .tools-grid-2{
  display:flex!important;
  flex-direction:column;
  align-items:center;
}

/* Active card: centered, max-width */
body.tool-focus-active .tab-content.active .tool-card.active{
  display:flex!important;
  width:100%;
  max-width:860px;
  border-radius:18px;
  box-shadow:0 8px 40px rgba(0,86,179,.18);
}

/* Show card-body when active */
body.tool-focus-active .tab-content.active .tool-card.active .card-body{
  display:flex!important;
  min-height:260px;
}

/* Back button */
.back-to-tools{display:none;align-items:center;gap:8px;background:#fff;border:1.5px solid #dde3f0;border-radius:10px;padding:9px 16px;font-size:13px;font-weight:600;color:#0056b3;cursor:pointer;margin-bottom:16px;transition:.2s;width:fit-content;}
.back-to-tools:hover{background:#eef5ff;border-color:#0056b3;}
.back-to-tools.visible{display:flex;}
/* ===== END FOCUS MODE =====*//

/* ===== BATCH IMAGE TOOL ===== */
.batch-table{width:100%;border-collapse:collapse;font-size:12px;margin-top:8px;}
.batch-table th{background:#eef5ff;color:#0056b3;font-weight:700;padding:8px 10px;text-align:left;border-bottom:2px solid #d0e2f5;}
.batch-table td{padding:7px 10px;border-bottom:1px solid #f0f0f0;vertical-align:middle;}
.batch-table tr:last-child td{border-bottom:none;}
.batch-table .status-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:12px;font-size:10px;font-weight:700;}
.batch-table .status-badge.pending{background:#f0f0f0;color:#888;}
.batch-table .status-badge.processing{background:#fff3cd;color:#856404;}
.batch-table .status-badge.done{background:#d4edda;color:#155724;}
.batch-table .status-badge.error{background:#f8d7da;color:#721c24;}
.batch-overall-bar{height:10px;background:#eee;border-radius:6px;overflow:hidden;margin:8px 0 4px;}
.batch-overall-fill{height:100%;background:linear-gradient(90deg,#0056b3,#00b4ff);border-radius:6px;transition:width .3s;}
.batch-stats{display:flex;gap:14px;font-size:12px;color:#666;margin-bottom:10px;flex-wrap:wrap;}
.batch-stats strong{color:#0056b3;}

/* ===== ERROR BOUNDARY ===== */
.card-error-msg{display:none;background:#fff5f5;border:1.5px solid #fed7d7;border-radius:8px;padding:10px 12px;font-size:12px;color:#c53030;margin-top:6px;align-items:flex-start;gap:8px;}
.card-error-msg.visible{display:flex;}
.card-error-msg .err-retry{margin-left:auto;background:none;border:1px solid #c53030;color:#c53030;border-radius:6px;padding:3px 10px;font-size:11px;cursor:pointer;font-family:'Poppins',sans-serif;}

/* CANVAS hidden */
#img-canvas{display:none;}

/* ===== RESUME TEMPLATE STYLES ===== */
/* Modern (sidebar) template */
#resume-preview.tpl-modern{display:grid;grid-template-columns:180px 1fr;}
#resume-preview.tpl-modern .r-header{grid-column:1/3;border-radius:9px 9px 0 0;}
#resume-preview.tpl-modern .r-sidebar{background:var(--resume-color,#0056b3);color:#fff;padding:18px 16px;display:flex;flex-direction:column;gap:12px;}
#resume-preview.tpl-modern .r-main{padding:14px 20px;display:flex;flex-direction:column;gap:10px;}
#resume-preview.tpl-modern .r-sidebar .r-section h4{color:#fff;border-bottom-color:rgba(255,255,255,.3);}
#resume-preview.tpl-modern .r-sidebar .r-chip{background:rgba(255,255,255,.18);color:#fff;}
#resume-preview.tpl-modern .r-sidebar .r-item{color:rgba(255,255,255,.88);font-size:11.5px;}
/* Minimal template */
#resume-preview.tpl-minimal .r-header{background:#fff;color:#1a1a2e;padding:20px 28px 12px;border-bottom:3px solid var(--resume-color,#0056b3);}
#resume-preview.tpl-minimal .r-header h2{color:#1a1a2e;font-size:20px;}
#resume-preview.tpl-minimal .r-header .r-subtitle{color:var(--resume-color,#0056b3);opacity:1;}
#resume-preview.tpl-minimal .r-header .r-contact{color:#555;}
#resume-preview.tpl-minimal .r-summary{border-left:none;border-top:2px solid #eee;border-radius:0;background:transparent;padding:10px 0;}
#resume-preview.tpl-minimal .r-section h4{letter-spacing:3px;color:#333;font-size:9px;border-bottom:1px solid #ddd;}
.resume-tpl-btn:hover{border-color:#0056b3!important;color:#0056b3!important;background:#eef5ff!important;}

/* ===== PASSWORD GENERATOR CRITERIA ===== */
.pwd-check{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:600;padding:3px 9px;border-radius:20px;background:#f0f4f8;color:#999;transition:.2s;}
.pwd-check.pass{background:#d4edda;color:#155724;}

/* ===== INVOICE GENERATOR ===== */
.inv-item-row{display:grid;grid-template-columns:1fr 60px 80px 24px;gap:6px;align-items:center;}
.inv-item-row input{font-size:12px;padding:6px 8px;}
.inv-del-btn{background:none;border:none;color:#dc3545;cursor:pointer;font-size:14px;padding:4px;flex-shrink:0;}
.inv-del-btn:hover{color:#b02a37;}

/* Invoice color theme swatches */
.inv-color-swatch{width:30px;height:30px;border-radius:50%;cursor:pointer;border:2px solid #fff;flex-shrink:0;transition:.2s;display:inline-block;}
.inv-color-swatch:hover{transform:scale(1.12);}
.inv-color-swatch.active{box-shadow:0 0 0 2.5px currentColor,0 0 0 4.5px #fff;}

/* Invoice logo upload */
.inv-logo-drop{border:1.5px dashed #b9cfe8;border-radius:8px;padding:10px;text-align:center;cursor:pointer;background:#fff;transition:.2s;font-size:11px;color:#777;}
.inv-logo-drop:hover{border-color:#0056b3;background:#eef5ff;}
.inv-logo-prev-wrap{display:flex;align-items:center;gap:10px;margin-top:6px;}
.inv-logo-prev-wrap img{max-height:46px;max-width:120px;object-fit:contain;border-radius:6px;background:#fff;border:1px solid #e8edf5;padding:3px;}
.inv-logo-remove{background:#fdecea;color:#dc3545;border:none;border-radius:6px;padding:6px 10px;font-size:11px;font-weight:600;cursor:pointer;flex-shrink:0;}
.inv-logo-remove:hover{background:#f8d7da;}

/* Toast notification */
.sce-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:#1a1a2e;color:#fff;padding:13px 22px;border-radius:10px;font-size:13px;font-weight:600;display:flex;align-items:center;gap:10px;box-shadow:0 8px 24px rgba(0,0,0,.25);z-index:5000;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;font-family:'Poppins',sans-serif;max-width:90vw;}
.sce-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.sce-toast i{font-size:15px;flex-shrink:0;}
.sce-toast.toast-success i{color:#28a745;}
.sce-toast.toast-info i{color:#60a5fa;}
.sce-toast.toast-error i{color:#fc8181;}

/* ===== EMI CALCULATOR ===== */
.emi-breakdown-row{display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px solid #dde3f0;font-size:12px;}

@media(max-width:900px){
  /* Tabs: 4-col grid, icon + SHORT label (fixes text overflow/overlap on tablet widths) */
  .tabs-inner{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:auto auto;gap:2px;padding:4px;}
  .tabs-search-inline{display:none;}
  .tab-btn{
    flex-direction:column;
    gap:3px;
    padding:8px 4px;
    font-size:11px;
    border-right:none;
    border-bottom:none;
    border-radius:8px;
    white-space:normal;
    line-height:1.2;
    text-align:center;
  }
  .tab-btn i{font-size:15px;}
  .tab-btn.active{background:#eef5ff;border-bottom:none;border-radius:8px;}
  .tab-lbl-full{display:none;}
  .tab-lbl-short{display:block;}
  /* Tool grid 2-col */
  .tools-grid{grid-template-columns:repeat(2,1fr);}
  /* Resume layout stacks */
  .resume-layout{grid-template-columns:1fr;}
  .resume-preview-col{position:static;}
  /* Age/WC grid adjust */
  .age-grid,.wc-stats{grid-template-columns:repeat(3,1fr);}
}

/* ===================================================
   RESPONSIVE — Mobile (≤600px)
=================================================== */
@media(max-width:600px){
  /* Body */
  body{padding-top:70px;}

  /* Hero */
  .hero{padding:28px 14px 0;}
  .hero h1{font-size:22px;line-height:1.25;}
  .hero p{font-size:13px;margin-bottom:20px;}
  .hero-badge{font-size:10px;padding:4px 11px;}
  .hero-stat .h-num{font-size:18px;}
  .hero-stat .h-lbl{font-size:9px;}
  .hero-stats{padding:14px 12px;}

  /* Sticky header */
  .sticky-header{top:var(--navbar-h,52px);}

  /* Tabs — icon + short label, 4-per-row grid */
  .tabs-bar{overflow-x:visible;}
  .tabs-inner{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    grid-template-rows:auto auto;
    gap:2px;
    padding:4px;
    /* Reset desktop nth-child column spans */
  }
  .tab-btn:nth-child(6){grid-column:auto;}
  .tab-btn:nth-child(7){grid-column:auto;}
  .tab-btn:nth-child(8){grid-column:auto;}
  .tabs-search-inline{display:none;}
  .tab-btn{
    flex-direction:column;
    gap:3px;
    padding:7px 3px;
    font-size:11px;
    border-right:none;
    border-bottom:none;
    border-radius:8px;
    line-height:1.2;
    white-space:normal;
    text-align:center;
  }
  .tab-btn i{font-size:14px;}
  .tab-btn.active{background:#eef5ff;border-bottom:none;border-radius:8px;}
  .tab-lbl-full{display:none;}
  .tab-lbl-short{display:block;}
  /* Remove row divider on mobile */
  .tab-btn:nth-child(6),.tab-btn:nth-child(7),.tab-btn:nth-child(8){border-top:none;}

  /* Search bar */
  .search-bar-wrap{padding:7px 12px;gap:8px;}
  .search-bar-wrap input{padding:9px 4px 9px 0;font-size:12px;}
  .search-chips{display:none;}
  .search-kbd{display:none;}

  /* Category heading */
  .cat-heading{font-size:13px;padding:8px 12px;}

  /* Content area */
  .tab-content{margin:16px auto;padding:0 10px 50px;}
  .sec-title{font-size:11px;margin:20px 0 10px;}

  /* Tool cards — single column */
  .tools-grid{grid-template-columns:1fr;gap:12px;}
  .tools-grid-2{grid-template-columns:1fr;gap:12px;}

  /* Card head */
  .card-head{padding:14px 42px 12px 14px;}
  .card-icon{width:42px;height:42px;font-size:18px;border-radius:10px;}
  .card-head h3{font-size:14px;}
  .card-head p{font-size:11px;}
  .card-body{padding:12px 14px;}

  /* Buttons full width, comfortable tap target */
  .btn{padding:12px;font-size:13px;}

  /* Inputs & labels */
  label{font-size:12px;}
  input[type=text],input[type=number],input[type=date],input[type=email],input[type=color],select,textarea{
    padding:10px 12px;font-size:13px;
  }

  /* Grid-2 inside cards — stack on mobile */
  .grid-2{grid-template-columns:1fr;}

  /* Timer */
  .timer-big{font-size:38px;}

  /* Age / WC grids */
  .age-grid{grid-template-columns:repeat(3,1fr);gap:6px;}
  .wc-stats{grid-template-columns:repeat(3,1fr);gap:5px;}
  .age-box .val{font-size:18px;}
  .wc-stat .num{font-size:17px;}

  /* Result box */
  .result-box{font-size:12px;padding:9px 12px;}

  /* File drop */
  .file-drop{padding:16px 12px;font-size:12px;}
  .file-drop i{font-size:22px;}

  /* Back to tools button */
  .back-to-tools{font-size:12px;padding:8px 13px;}

  /* Typing layout */
  .typing-layout{grid-template-columns:1fr;}

  /* Resume layout */
  .resume-layout{grid-template-columns:1fr;}
  .resume-preview-col{position:static;}
  #resume-preview{padding:20px 16px;}
  #resume-preview .r-header{margin:-20px -16px 16px;padding:18px 16px 14px;}

  /* Batch table scroll */
  .batch-table{font-size:11px;}
  .batch-table th,.batch-table td{padding:6px 7px;}

  /* Skeleton */
  #page-skeleton .sk-grid{grid-template-columns:1fr;}

  /* Recently used */
  .recently-used{padding:10px 14px;}
  .ru-chip{font-size:11px;padding:4px 12px;}

  /* Footer */
  footer{font-size:12px;padding:16px;}

  /* Bottom stats */
  .bottom-stats{padding:16px 12px;}
  .hero-stat{max-width:none;}
}

/* ===================================================
   RESPONSIVE — Very small phones (≤380px)
=================================================== */
@media(max-width:380px){
  .tabs-inner{grid-template-columns:repeat(4,1fr);}
  .tab-btn{font-size:8.5px;padding:6px 2px;}
  .tab-btn i{font-size:13px;}
  .hero h1{font-size:19px;}
  .card-head h3{font-size:13px;}
  .timer-big{font-size:32px;}
  .age-box .val{font-size:16px;}
}

/* ===================================================
   DESKTOP ENHANCEMENTS (≥1024px)
=================================================== */
@media(min-width:1024px){

  /* ── Wider content area ── */
  .tab-content{padding:0 40px 80px;}

  /* ── Navbar: larger font & spacing ── */
  .nav-links a{font-size:14.5px;padding:7px 14px;}

  /* ── Hero: bigger, more breathing room ── */
  .hero{padding:56px 40px 0;}
  .hero h1{font-size:52px;}
  .hero p{font-size:17px;}
  .hero-stat .h-num{font-size:40px;}

  /* ── Tab bar: bigger tabs ── */
  .tab-btn{height:56px;padding:0 22px;font-size:14px;gap:9px;}

  /* ── Tool cards: taller head, bigger icon & text ── */
  .card-head{padding:22px 54px 18px 24px;gap:18px;}
  .card-icon{width:58px;height:58px;font-size:26px;border-radius:15px;}
  .card-head h3{font-size:16px;}
  .card-head p{font-size:12px;}
  .card-body{padding:22px 26px 24px;gap:13px;}

  /* ── Open card body: 2-column layout for inputs ── */
  .tool-card.active .card-body{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px 24px;
    align-items:start;
  }

  /* ── Wide elements that should span both columns ── */
  .tool-card.active .card-body > .info-box,
  .tool-card.active .card-body > .file-drop-wrap,
  .tool-card.active .card-body > .file-drop,
  .tool-card.active .card-body > .progress-bar,
  .tool-card.active .card-body > .result-box,
  .tool-card.active .card-body > .file-preview-panel,
  .tool-card.active .card-body > .card-error-msg,
  .tool-card.active .card-body > .batch-stats,
  .tool-card.active .card-body > .batch-overall-bar,
  .tool-card.active .card-body > table,
  .tool-card.active .card-body > #merge-file-list,
  .tool-card.active .card-body > #split-info,
  .tool-card.active .card-body > #compress-pdf-info,
  .tool-card.active .card-body > img.img-preview,
  .tool-card.active .card-body > .typing-layout,
  .tool-card.active .card-body > .wc-stats,
  .tool-card.active .card-body > .age-grid,
  .tool-card.active .card-body > .timer-big,
  .tool-card.active .card-body > .grid-2,
  .tool-card.active .card-body > .strength-bar,
  .tool-card.active .card-body > [style*="display:flex"],
  .tool-card.active .card-body > [style*="display: flex"],
  .tool-card.active .card-body > div[id$="-result"],
  .tool-card.active .card-body > div[id$="-info"],
  .tool-card.active .card-body > div[id$="-preview"],
  .tool-card.active .card-body > div[id$="-bar"],
  .tool-card.active .card-body > div[id$="-list"]{
    grid-column: 1 / -1;
  }

  /* ── Buttons: slightly larger ── */
  .btn{padding:12px 16px;font-size:13.5px;}
  .btn-download-ready{padding:10px 22px;font-size:13px;}

  /* ── Inputs: comfortable size ── */
  input[type=text],input[type=number],input[type=date],
  input[type=email],input[type=color],select,textarea{
    padding:11px 15px;font-size:13.5px;border-radius:10px;
  }
  label{font-size:12px;}
  textarea{height:90px;}

  /* ── File drop: taller & more inviting ── */
  .file-drop{padding:32px 20px;}
  .file-drop i{font-size:36px;margin-bottom:12px;}
  .file-drop strong{font-size:14px;}
  .file-drop small{font-size:12px;}

  /* ── Result box ── */
  .result-box{font-size:14px;padding:12px 16px;}

  /* ── Info box ── */
  .info-box{font-size:13px;padding:12px 16px;}

  /* ── Section title ── */
  .sec-title{font-size:12px;margin:40px 0 18px;}

  /* ── Focus mode: even wider centered card ── */
  body.tool-focus-active .tab-content.active .tool-card.active{max-width:1000px;}

  /* ── Recently used ── */
  .recently-used{padding:16px 22px;}
  .ru-chip{font-size:13px;padding:6px 16px;}

  /* ── Stats boxes ── */
  .wc-stat .num{font-size:24px;}
  .wc-stat .lbl{font-size:10px;}
  .age-box .val{font-size:26px;}
  .age-box .lbl{font-size:10px;}
  .timer-big{font-size:56px;}

  /* ── QR / Color preview: taller ── */
  .color-prev{height:64px;}

  /* ── Card hover: slightly stronger lift ── */
  .tool-card:hover{transform:translateY(-7px);box-shadow:0 18px 40px rgba(0,0,0,.14);}

  /* ── Breadcrumb ── */
  .breadcrumb{padding:11px 40px;}
  .breadcrumb-inner{font-size:13px;}

  /* ── Footer ── */
  footer{padding:28px 40px;font-size:14px;}

  /* ── Search bar inline (desktop tab bar) ── */
  .tabs-search-inline-wrap{width:240px;}
  .tabs-search-inline input{font-size:13px;}
}

/* ===================================================
   EXTRA WIDE SCREENS (≥1440px)
=================================================== */
@media(min-width:1440px){
  .tab-content{max-width:1400px;padding:0 60px 80px;}
  .tools-grid{grid-template-columns:repeat(4,1fr);gap:26px;}
  .hero h1{font-size:58px;}
  .card-head{padding:24px 58px 20px 26px;}
  .card-icon{width:62px;height:62px;font-size:28px;}
  .card-head h3{font-size:17px;}
}

/* ===================================================
   DESKTOP-ONLY ENHANCEMENTS (≥1024px)
   — Better UX for mouse/keyboard users
=================================================== */
@media(min-width:1024px){

  /* Navbar: logo on left, links centered, right-side tools */
  .navbar{justify-content:flex-start;padding:0 48px;gap:0;}
  .logo{margin-right:32px;font-size:23px;}
  .nav-links{gap:2px;flex:1;}
  .nav-links a:not(.admin-btn){font-size:14px;padding:7px 13px;border-radius:7px;}
  /* Dark mode toggle pinned to right */
  .dm-toggle-nav{margin-left:auto;}

  /* Hero: max-width constraint, more padding */
  .hero{padding:64px 60px 0;}
  .hero-inner{max-width:920px;}
  .hero-badge{font-size:11.5px;padding:7px 20px;}

  /* Stats bar aligned */
  .hero-stats{margin:0 -60px;padding:26px 60px;}
  .hero-stat .h-num{font-size:42px;}

  /* Tabs bar: full width, tabs evenly spread */
  .tabs-inner{max-width:100%;padding:0 48px;}
  .tab-btn{height:58px;padding:0 24px;font-size:14px;letter-spacing:0.1px;}
  .tab-btn i{font-size:15px;}
  .tabs-search-inline{padding:10px 20px;}
  .tabs-search-inline-wrap{width:260px;}

  /* Tool grid: 4-col on desktop */
  .tools-grid{grid-template-columns:repeat(4,1fr);gap:24px;}

  /* Card: better proportions */
  .tool-card{border-radius:18px;}
  .card-head{padding:22px 56px 18px 22px;gap:16px;min-height:88px;}
  .card-icon{width:56px;height:56px;font-size:24px;border-radius:14px;}
  .card-head h3{font-size:15.5px;font-weight:700;line-height:1.3;}
  .card-head p{font-size:12px;margin-top:2px;line-height:1.4;}

  /* Card toggle icon — bigger hit area */
  .card-toggle-icon{right:20px;font-size:15px;}

  /* Card body: comfortable padding */
  .card-body{padding:22px 24px 26px;gap:12px;}

  /* Open card in focus mode: wider */
  body.tool-focus-active .tab-content.active .tool-card.active{
    max-width:1080px;
    border-radius:22px;
  }

  /* Buttons: bigger, rounder */
  .btn{padding:12px 20px;font-size:13.5px;border-radius:10px;}
  .btn-download-ready{padding:11px 24px;font-size:13px;}

  /* Inputs: desktop-size */
  input[type=text],input[type=number],input[type=date],
  input[type=email],input[type=color],select,textarea{
    padding:11px 14px;font-size:13.5px;border-radius:9px;
  }
  textarea{min-height:100px;}

  /* File drop zone: inviting desktop size */
  .file-drop{padding:36px 24px;border-radius:14px;}
  .file-drop i{font-size:40px;margin-bottom:14px;}
  .file-drop strong{font-size:15px;}

  /* Result & info boxes */
  .result-box{font-size:14px;padding:13px 18px;border-radius:10px;}
  .info-box{font-size:13px;padding:13px 18px;}

  /* Search bar */
  .search-bar-wrap{padding:12px 48px;}
  .search-input-row{max-width:600px;}

  /* Breadcrumb */
  .breadcrumb{padding:11px 48px;}

  /* Footer */
  footer{padding:30px 48px;}

  /* Back-to-tools button */
  .back-to-tools{font-size:13.5px;padding:10px 18px;border-radius:11px;}

  /* Recently used */
  .recently-used{padding:16px 24px;border-radius:14px;}
  .ru-chip{font-size:13px;padding:7px 18px;}

  /* Tooltip-like hover on card icons */
  .card-icon{transition:transform .2s,box-shadow .2s;}
  .tool-card:hover .card-icon{transform:scale(1.08);box-shadow:0 6px 18px rgba(0,0,0,.2);}

  /* Active tab indicator — thicker underline */
  .tab-btn.active{border-bottom-width:3px;}

  /* Skeleton grid */
  #page-skeleton .sk-grid{grid-template-columns:repeat(4,1fr);}
}



/* Override category tab menu to make it wrap, fit on screen, and look compact (No horizontal scrolling!) */
.tabs-bar {
  background: #fff !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.08) !important;
  overflow: visible !important; /* Disable scrollband */
  padding: 8px 0 !important;
}
.tabs-inner {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important; /* Wrap instead of scroll */
  justify-content: center !important; /* Center on screen */
  align-items: center !important;
  gap: 6px !important; /* Thoda pass (closer) */
  max-width: 1280px !important;
  margin: 0 auto !important;
  overflow: visible !important;
  width: 100% !important;
  padding: 0 10px !important;
}
.tab-btn {
  padding: 6px 12px !important; /* Thoda chhota padding */
  height: auto !important;
  min-height: 32px !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 11.5px !important; /* Smaller size (chhota) */
  font-weight: 600 !important;
  color: #555 !important;
  background: #f1f5f9 !important; /* Chip style background */
  border: 1.5px solid #dde3f0 !important;
  border-radius: 20px !important; /* Pill style */
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  border-bottom: none !important;
  border-right: none !important;
  box-shadow: none !important;
}
.tab-btn i {
  font-size: 12px !important;
}
.tab-btn:hover {
  background: #e2e8f0 !important;
  color: #0056b3 !important;
  transform: translateY(-1px) !important;
}
.tab-btn.active {
  background: #1565c0 !important; /* Royal Blue */
  color: #fff !important;
  border-color: #1565c0 !important;
  box-shadow: 0 3px 8px rgba(21, 101, 192, 0.2) !important;
}

/* Hide global Copy Link button in breadcrumb completely as requested */
#copy-tool-link-btn {
  display: none !important;
}

/* Hide breadcrumb completely as requested */
.breadcrumb, #breadcrumb-nav {
  display: none !important;
}

/* Hide share and star buttons in preview/collapsed state */
.tool-card:not(.active) .card-head-actions {
  display: none !important;
}
/* Show share and star buttons only when active/opened */
.tool-card.active .card-head-actions {
  display: flex !important;
}

.card-head-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 15;
  margin-right: 0;
  flex-shrink: 0;
}
/* Title area takes available space, wraps instead of getting squeezed */
.card-head > div:not(.card-icon):not(.card-head-actions) {
  flex: 1 1 auto;
  min-width: 0;
}
.card-head > div:not(.card-icon):not(.card-head-actions) h3,
.card-head > div:not(.card-icon):not(.card-head-actions) p {
  white-space: normal;
}
.card-star-btn, .card-share-btn, .card-reset-btn {
  background: none !important;
  border: none !important;
  cursor: pointer;
  padding: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #bbb;
  font-size: 16px;
  transition: color 0.2s, transform 0.2s, background 0.2s;
  border-radius: 50%;
  width: 32px;
  height: 32px;
}
/* Reset button with text label — pill style so it stands out */
.card-reset-btn {
  width: auto;
  height: 32px;
  padding: 0 12px 0 8px;
  border-radius: 30px;
  gap: 2px;
  background: #f0f2f7 !important;
  color: #555 !important;
  border: 1px solid #dde2ea !important;
}
.card-reset-btn:hover { background: #ffe9e9 !important; color: #dc3545 !important; border-color: #f5c2c2 !important; transform: translateY(-1px); }
.card-share-btn:hover {
  color: #0056b3;
  transform: scale(1.15);
  background: rgba(0, 86, 179, 0.08) !important;
}

/* Starred layout shortcut cards */
.tools-shortcut-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin: 16px 0 24px;
}
.tool-shortcut-card {
  background: #fff;
  border: 1.5px solid #dde3f0;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  position: relative;
}
.tool-shortcut-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 86, 179, 0.08);
  border-color: #0056b3;
}
.shortcut-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #fff;
  flex-shrink: 0;
}
.shortcut-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.shortcut-info h4 {
  font-size: 14px;
  font-weight: 700;
  margin: 0;
  color: #1a1a2e;
}
.shortcut-info p {
  font-size: 11px;
  color: #888;
  margin: 0;
}
.shortcut-arrow {
  margin-left: auto;
  color: #ccc;
  font-size: 13px;
  transition: transform 0.2s, color 0.2s;
}
.tool-shortcut-card:hover .shortcut-arrow {
  color: #0056b3;
  transform: translateX(3px);
}

/* Pulsing highlight animation for deep linking */
@keyframes pulseHighlight {
  0% { box-shadow: 0 0 0 0 rgba(0, 86, 179, 0.4); border-color: #0056b3; }
  70% { box-shadow: 0 0 0 10px rgba(0, 86, 179, 0); border-color: #0056b3; }
  100% { box-shadow: 0 0 0 0 rgba(0, 86, 179, 0); border-color: #dde3f0; }
}
.pulse-card-highlight {
  animation: pulseHighlight 2s ease-in-out 3;
}
@keyframes pulseHighlightDark {
  0% { box-shadow: 0 0 0 0 rgba(96, 165, 250, 0.4); border-color: #60a5fa; }
  70% { box-shadow: 0 0 0 10px rgba(96, 165, 250, 0); border-color: #60a5fa; }
  100% { box-shadow: 0 0 0 0 rgba(96, 165, 250, 0); border-color: #2d3f55; }
}

/* Typing Test feedback caret and wrong/correct spans */
#typing-text-display span {
  border-bottom: 2px solid transparent;
  transition: background 0.15s, border-color 0.15s;
}
#typing-text-display span.correct {
  color: #28a745;
  background: rgba(40, 167, 69, 0.1);
}
#typing-text-display span.wrong {
  color: #dc3545;
  background: rgba(220, 53, 69, 0.15);
  border-bottom-color: #dc3545;
}
/* Custom sizing and behavior for search bar - compact and wider */
.search-bar-wrap {
  justify-content: center !important;
  padding: 6px 18px !important;
  transition: max-height 0.3s ease, padding 0.3s ease, opacity 0.3s ease, border-bottom-color 0.3s ease, visibility 0.3s ease !important;
  max-height: 60px;
  opacity: 1;
  visibility: visible;
  overflow: visible;
}
@media(max-width:768px) {
  .search-bar-wrap {
    padding: 6px 12px !important;
  }
}
.search-bar-wrap.sb-hidden {
  max-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  opacity: 0 !important;
  border-bottom-color: transparent !important;
  visibility: hidden !important;
  overflow: hidden !important;
  pointer-events: none !important;
}
.search-input-row {
  max-width: 700px !important; /* Make it longer (wider) */
  width: 100% !important;
  min-height: 38px !important; /* Shorter height (chhota) */
  height: 38px !important;
  border-radius: 20px !important;
}
.search-bar-wrap input {
  padding: 6px 8px 6px 0 !important;
  font-size: 13px !important;
}
.search-bar-icon {
  font-size: 13px !important;
  padding: 0 8px 0 14px !important;
}
.search-right-btns {
  padding-right: 8px !important;
}
.search-clear {
  font-size: 13px !important;
}

/* Hide search bar completely as requested */
#search-bar-wrap {
  display: none !important;
}

/* ===== EMBED MODE: individual tool pages iframe tools.html?embed=1#tool-xxx ===== */
html.tool-embed #page-skeleton,
html.tool-embed .skip-link,
html.tool-embed .topbar,
html.tool-embed .navbar,
html.tool-embed .nav-overlay,
html.tool-embed .breadcrumb,
html.tool-embed .sticky-header,
html.tool-embed .tabs-bar,
html.tool-embed .search-bar-wrap,
html.tool-embed .tools-shortcut-grid,
html.tool-embed .cat-heading,
html.tool-embed .sec-title,
html.tool-embed .recently-used,
html.tool-embed .bottom-stats,
html.tool-embed .hero-stats,
html.tool-embed footer,
html.tool-embed .whatsapp-float,
html.tool-embed .card-toggle-icon,
html.tool-embed .card-share-btn,
html.tool-embed #copy-tool-link-btn,
html.tool-embed .adsbygoogle,
html.tool-embed ins.adsbygoogle {
  display: none !important;
}
html.tool-embed body {
  padding-top: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff !important;
  overflow: auto !important;
}
html.tool-embed main#main-tools-content,
html.tool-embed main {
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
}
html.tool-embed .tab-content {
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
}
html.tool-embed .tools-grid {
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  gap: 0 !important;
}
html.tool-embed .tool-card { display: none !important; }
html.tool-embed .tool-card.active,
html.tool-embed .tool-card:target {
  display: flex !important;
  flex-direction: column !important;
  box-shadow: none !important;
  border: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  max-width: none !important;
}
html.tool-embed .tool-card.active .card-body,
html.tool-embed .tool-card:target .card-body { display: flex !important; }
html.tool-embed .card-head { cursor: default !important; }




  @media(max-width:700px){ #ppCropBody{ grid-template-columns:1fr !important; } }

/* --- Footer (same as index.html) --- */
.footer { background: #333; color: white; text-align: center; padding: 20px; margin-top: 40px; }

/* --- Jump to another tool bar --- */
.tool-jump {
  max-width: 900px; margin: 16px auto 0; padding: 12px 16px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: linear-gradient(135deg, #ffffff, #f4f8ff);
  border: 1px solid #e6ecf5; border-radius: 14px;
  box-shadow: 0 2px 12px rgba(0,0,0,.05);
  position: relative; overflow: hidden;
  animation: tpJumpIn .55s ease both;
}
@keyframes tpJumpIn {
  from { opacity: 0; transform: translateY(-14px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* shine sweep on the whole bar */
.tool-jump::after {
  content: ''; position: absolute; top: 0; left: -100%;
  width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.7), transparent);
  transition: left .8s ease; pointer-events: none;
}
.tool-jump:hover::after { left: 130%; }

.tool-jump .jump-label {
  font-size: 13px; font-weight: 700; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(90deg, #0056b3, #17a2b8);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.tool-jump .jump-label i {
  -webkit-text-fill-color: initial; color: #0056b3;
  display: inline-block; animation: tpBounce 2s ease-in-out infinite;
}
@keyframes tpBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

.tool-jump select {
  flex: 1; min-width: 220px; padding: 11px 14px;
  border: 1.5px solid #dde3f0; border-radius: 10px;
  font-family: 'Poppins',sans-serif; font-size: 14px;
  background: #fff; color: #222; cursor: pointer; outline: none;
  transition: border-color .25s ease, box-shadow .25s ease, transform .2s ease;
}
.tool-jump select:hover {
  border-color: #b9d3ee; transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,86,179,.1);
}
.tool-jump select:focus {
  border-color: #0056b3;
  box-shadow: 0 0 0 4px rgba(0,86,179,.12), 0 4px 14px rgba(0,86,179,.15);
  transform: translateY(-1px);
}

.tool-jump .jump-all {
  margin-left: auto; color: #fff; text-decoration: none;
  font-size: 13px; font-weight: 700; white-space: nowrap;
  background: linear-gradient(135deg, #0056b3, #003a70);
  padding: 10px 18px; border-radius: 10px;
  display: inline-flex; align-items: center; gap: 8px;
  transition: transform .2s ease, box-shadow .25s ease;
}
.tool-jump .jump-all i { transition: transform .25s ease; }
.tool-jump .jump-all:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,86,179,.35);
}
.tool-jump .jump-all:hover i { transform: translateX(-4px); }
.tool-jump .jump-all:active { transform: translateY(0); }



/* ============================================================
   DYNAMIC / MODERN LOOK (applies to all individual tool pages)
   ============================================================ */

/* Gradient page background */
body {
  background: linear-gradient(160deg, #eef4fb 0%, #f6f9ff 40%, #eef2ff 100%);
}

/* Tool card: entrance animation */
.tool-card {
  animation: tpCardIn .5s ease both;
  position: relative;
}
@keyframes tpCardIn {
  from { opacity: 0; transform: translateY(26px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Tool card: shine sweep on hover */
.tool-card::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 55%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
  transition: left .7s ease;
  pointer-events: none;
  z-index: 2;
}
.tool-card:hover::after { left: 130%; }

/* Tool card: stronger hover lift + glow */
.tool-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 38px rgba(0,86,179,.16), 0 4px 10px rgba(0,0,0,.06);
}

/* Card icon: gentle float + rotate on hover */
.card-icon {
  transition: transform .3s ease, box-shadow .3s ease;
}
.tool-card:hover .card-icon {
  transform: scale(1.1) rotate(-6deg);
  box-shadow: 0 8px 18px rgba(0,0,0,.25);
}

/* Card head: subtle gradient tint on hover */
.card-head { transition: background .25s ease; }
.card-head:hover { background: linear-gradient(90deg, #f7fbff, #eef5ff); }

/* Buttons: lift + glow on hover */
.btn {
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,86,179,.22);
}
.btn:active { transform: translateY(0); }

/* File drop: soft pulse ring */
.file-drop { transition: border-color .25s ease, background .25s ease, box-shadow .25s ease, transform .2s ease; }
.file-drop:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,86,179,.14);
}
.file-drop i { transition: transform .3s ease; }
.file-drop:hover i { transform: scale(1.15); }

/* Info box: accent left border glow */
.info-box {
  transition: box-shadow .25s ease, border-color .25s ease;
}
.info-box:hover { box-shadow: 0 4px 14px rgba(0,86,179,.1); }

/* Result box / preview panel: smooth appear */
.result-box, .file-preview-panel {
  animation: tpFadeIn .4s ease both;
}
@keyframes tpFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Progress bar: smoother + gradient fill */
.progress-fill {
  background: linear-gradient(90deg, #0056b3, #17a2b8) !important;
}

/* Visible page title (SEO) — tool name as <h1> */
.tool-h1 {
  max-width: 900px; margin: 20px auto 4px; padding: 0 20px;
  font-size: 28px; font-weight: 800; color: #003a70; line-height: 1.25;
  background: linear-gradient(90deg, #003a70, #0056b3);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
@media (max-width: 600px) {
  .tool-h1 { font-size: 22px; margin: 14px auto 2px; }
}

/* ============================================================
   SINGLE-TOOL PAGE LAYOUT FIX — full-width card, single column
   (each tool is now its own page, so the old 2-column focus-mode
    grid + 1100px cap leave empty space on the right)
   ============================================================ */
.tools-grid {
  max-width: 900px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
}

@media(min-width:1024px){
  /* Override the desktop 2-column card-body back to a single column */
  .tool-card.active .card-body {
    display: flex !important;
    flex-direction: column;
    gap: 13px;
    align-items: stretch;
  }
  .tool-card.active .card-body > * {
    width: 100%;
  }
}

/* ============================================================
   INLINE TOOL SEARCH (on individual tool pages)
   ============================================================ */
.tool-search-inline {
  max-width: 900px; margin: 8px auto 0; padding: 0 16px; position: relative;
}
.tool-search-inline .tsi-box {
  position: relative;
}
.tool-search-inline input {
  width: 100%; padding: 10px 14px 10px 38px;
  border: 1.5px solid #dde3f0; border-radius: 10px;
  font-family: 'Poppins',sans-serif; font-size: 13.5px;
  background: #fff; color: #222; outline: none;
  box-sizing: border-box;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.tool-search-inline input:focus {
  border-color: #0056b3;
  box-shadow: 0 0 0 4px rgba(0,86,179,.12);
}
.tool-search-inline .tsi-icon {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  color: #94a3b8; font-size: 13px; pointer-events: none;
}
.tool-search-suggestions {
  display: none; position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: #fff; border: 1px solid #e6ecf5; border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,.14); max-height: 320px; overflow-y: auto;
  z-index: 999; padding: 6px;
}
.tool-search-suggestions .sugg-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 8px;
  color: #1e293b; text-decoration: none; font-size: 13.5px; font-weight: 500;
  transition: background .15s ease;
}
.tool-search-suggestions .sugg-item:hover { background: #eef5ff; color: #0056b3; }
.tool-search-suggestions .sugg-item i { color: #0056b3; font-size: 12px; width: 16px; text-align: center; }
.tool-search-suggestions .sugg-empty { padding: 12px; text-align: center; color: #94a3b8; font-size: 13px; }

/* Direct share button colors (WhatsApp / Facebook) */
.card-share-wa:hover { color: #25D366 !important; background: rgba(37, 211, 102, 0.12) !important; }
.card-share-fb:hover { color: #1877f2 !important; background: rgba(24, 119, 242, 0.12) !important; }

/* Star button hover + active state */
.card-star-btn:hover { color: #ffc107; transform: scale(1.15); background: rgba(255, 193, 7, 0.08) !important; }
.card-star-btn.starred { color: #ffc107; }

/* Mobile: card header wraps — title full width, actions on their own row */
@media (max-width: 560px) {
  .card-head {
    flex-wrap: wrap;
    gap: 10px 12px;
    padding: 14px 14px 12px;
  }
  .card-head-actions {
    width: 100%;
    margin-left: 0;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 4px;
  }
  .card-star-btn, .card-share-btn {
    width: 30px;
    height: 30px;
    padding: 5px;
    font-size: 14px;
  }
  .card-reset-btn {
    height: 30px;
    padding: 0 10px 0 6px;
    font-size: 11px;
  }
}

/* ============================================================
   SEO CONTENT SECTION (intro + how-to + FAQ under each tool)
   ============================================================ */
.seo-content {
  max-width: 900px;
  margin: 28px auto 0;
  padding: 0 20px 20px;
  color: #334155;
  font-size: 14.5px;
  line-height: 1.8;
}
.seo-block {
  background: #fff;
  border: 1px solid #e6ecf5;
  border-radius: 14px;
  padding: 22px 24px;
  margin-bottom: 18px;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
}
.seo-block h2 {
  margin: 0 0 12px;
  font-size: 19px;
  font-weight: 800;
  color: #003a70;
  display: flex;
  align-items: center;
  gap: 10px;
}
.seo-block h2::before {
  content: '';
  width: 5px;
  height: 22px;
  background: linear-gradient(180deg, #0056b3, #17a2b8);
  border-radius: 4px;
  display: inline-block;
}
.seo-block p {
  margin: 0 0 12px;
}
.seo-block p:last-child { margin-bottom: 0; }
.seo-block ol {
  margin: 0;
  padding-left: 22px;
}
.seo-block ol li {
  margin-bottom: 8px;
  padding-left: 4px;
}
.seo-faq-item {
  border: 1px solid #eef2f7;
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 10px;
  background: #fafcff;
}
.seo-faq-item:last-child { margin-bottom: 0; }
.seo-faq-item h4 {
  margin: 0 0 6px;
  font-size: 14.5px;
  font-weight: 700;
  color: #0056b3;
}
.seo-faq-item p {
  margin: 0;
  font-size: 13.5px;
  color: #555;
  line-height: 1.7;
}
@media (max-width: 600px) {
  .seo-content { padding: 0 12px 16px; }
  .seo-block { padding: 16px 16px; }
  .seo-block h2 { font-size: 16px; }
  .seo-block p { font-size: 13.5px; }
  .seo-faq-item h4 { font-size: 13.5px; }
  .seo-faq-item p { font-size: 13px; }
}