/* ================================================================
   CamMaster by PDFdukan — Complete Shared Stylesheet
   Dark mode default | Light mode via [data-theme="light"]
================================================================ */

/* ── CSS VARIABLES ─────────────────────────────────────────── */
:root {
  --primary:        #ff6333;
  --primary-hover:  #e8522a;
  --primary-light:  #ff8055;
  --primary-soft:   rgba(255,99,51,0.12);
  --primary-soft-2: rgba(255,99,51,0.06);
  --primary-glow:   0 0 30px rgba(255,99,51,0.18);

  --bg:             #0f0f0f;
  --bg-2:           #161616;
  --card:           #1a1a1a;
  --card-2:         #222222;
  --card-3:         #2a2a2a;
  --border:         #2a2a2a;
  --border-strong:  #383838;

  --text:           #f0f0f0;
  --text-2:         #b0b0b0;
  --text-3:         #888888;
  --text-muted:     #555555;

  --success:        #10b981;
  --warning:        #f59e0b;
  --error:          #ef4444;
  --info:           #3b82f6;

  --shadow-sm:  0 1px 3px rgba(0,0,0,0.5);
  --shadow:     0 4px 14px rgba(0,0,0,0.45);
  --shadow-lg:  0 12px 40px rgba(0,0,0,0.65);

  --radius-sm:  8px;
  --radius:     12px;
  --radius-lg:  16px;
  --radius-xl:  20px;
  --radius-pill:100px;

  --header-h:   64px;
  --sidebar-w:  240px;
  --max-w:      1280px;

  --ease:       cubic-bezier(0.4,0,0.2,1);
  --t:          0.2s;
  --t-slow:     0.4s;
}

html[data-theme="light"] {
  --bg:             #f5f5f5;
  --bg-2:           #ebebeb;
  --card:           #ffffff;
  --card-2:         #f7f7f7;
  --card-3:         #eeeeee;
  --border:         #e2e2e2;
  --border-strong:  #d0d0d0;
  --text:           #111111;
  --text-2:         #444444;
  --text-3:         #666666;
  --text-muted:     #999999;
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.08);
  --shadow:     0 4px 14px rgba(0,0,0,0.10);
  --shadow-lg:  0 12px 40px rgba(0,0,0,0.14);
}

/* ── RESET ──────────────────────────────────────────────────── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  line-height:1.5;
  transition:background var(--t) var(--ease), color var(--t) var(--ease);
  -webkit-font-smoothing:antialiased;
}
a{text-decoration:none;color:inherit}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
img,svg,canvas{display:block;max-width:100%}
input,textarea,select{font-family:inherit}
ul{list-style:none}

/* ── SCROLLBAR ──────────────────────────────────────────────── */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}

/* ── HEADER ─────────────────────────────────────────────────── */
.header{
  position:sticky;top:0;z-index:200;
  background:var(--card);
  border-bottom:1px solid var(--border);
  height:var(--header-h);
  display:flex;align-items:center;gap:14px;
  padding:0 20px;
  backdrop-filter:blur(12px);
  transition:background var(--t) var(--ease);
}
.logo{display:flex;align-items:center;gap:10px;flex-shrink:0}
.logo-icon{
  width:38px;height:38px;
  background:linear-gradient(135deg,var(--primary),var(--primary-light));
  border-radius:10px;display:grid;place-items:center;
  font-size:20px;box-shadow:var(--shadow-sm);flex-shrink:0;
}
.logo-text{display:flex;flex-direction:column;line-height:1.1}
.logo-text .brand{font-size:16px;font-weight:800;letter-spacing:-0.3px}
.logo-text .sub{font-size:10px;color:var(--text-3);font-weight:600;text-transform:uppercase;letter-spacing:0.5px}

.search-wrap{flex:1;max-width:460px;position:relative}
.search-input{
  width:100%;background:var(--card-2);border:1px solid var(--border);
  border-radius:var(--radius-pill);padding:10px 18px 10px 42px;
  font-size:14px;color:var(--text);outline:none;transition:var(--t);
}
.search-input::placeholder{color:var(--text-3)}
.search-input:focus{border-color:var(--primary);background:var(--card)}
.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--text-3);pointer-events:none}

.header-actions{display:flex;align-items:center;gap:8px;margin-left:auto}
.icon-btn{
  width:38px;height:38px;border-radius:var(--radius-sm);
  display:grid;place-items:center;color:var(--text-2);
  transition:var(--t) var(--ease);border:1px solid transparent;
}
.icon-btn:hover{background:var(--card-2);color:var(--primary)}

/* Auth button */
.auth-btn{
  display:flex;align-items:center;gap:8px;padding:7px 14px;
  background:var(--card-2);border:1px solid var(--border);
  border-radius:var(--radius-pill);font-size:13px;font-weight:600;
  color:var(--text);transition:var(--t) var(--ease);
}
.auth-btn:hover{border-color:var(--primary);color:var(--primary)}
.auth-btn .avatar{
  width:24px;height:24px;border-radius:50%;
  background:linear-gradient(135deg,var(--primary),var(--primary-light));
  display:grid;place-items:center;font-size:12px;color:#fff;font-weight:700;
}

/* ── BUTTONS ─────────────────────────────────────────────────── */
.btn{
  padding:9px 18px;border-radius:var(--radius-pill);font-size:13px;font-weight:600;
  transition:var(--t) var(--ease);display:inline-flex;align-items:center;gap:6px;
  white-space:nowrap;cursor:pointer;
}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-hover);transform:translateY(-1px);box-shadow:var(--shadow)}
.btn-secondary{background:var(--card-2);color:var(--text);border:1px solid var(--border)}
.btn-secondary:hover{border-color:var(--primary);color:var(--primary)}
.btn-danger{background:#ef4444;color:#fff}
.btn-danger:hover{background:#dc2626}

.btn-lg{padding:12px 28px;font-size:15px;border-radius:var(--radius)}
.btn-sm{padding:6px 14px;font-size:12px}

.btn-icon{
  width:38px;height:38px;display:grid;place-items:center;border-radius:var(--radius-sm);
  background:var(--card-2);border:1px solid var(--border);color:var(--text-2);
  transition:var(--t) var(--ease);cursor:pointer;
}
.btn-icon:hover{border-color:var(--primary);color:var(--primary)}

/* ── LAYOUT ──────────────────────────────────────────────────── */
.layout{display:flex;min-height:calc(100vh - var(--header-h))}

/* ── SIDEBAR ─────────────────────────────────────────────────── */
.sidebar{
  width:var(--sidebar-w);flex-shrink:0;background:var(--card);
  border-right:1px solid var(--border);padding:20px 0;
  position:sticky;top:var(--header-h);height:calc(100vh - var(--header-h));
  overflow-y:auto;transition:background var(--t) var(--ease);
}
.sb-section{padding:0 12px;margin-bottom:4px}
.sb-label{
  font-size:10px;color:var(--text-muted);text-transform:uppercase;
  letter-spacing:1.2px;padding:0 10px;margin-bottom:6px;font-weight:700;
}
.sb-item{
  width:100%;display:flex;align-items:center;gap:10px;
  padding:9px 12px;border-radius:var(--radius-sm);
  font-size:13px;color:var(--text-2);transition:var(--t) var(--ease);text-align:left;
}
.sb-item:hover{background:var(--card-2);color:var(--text)}
.sb-item.active{background:var(--primary-soft);color:var(--primary);font-weight:600}
.sb-item .sb-icon{font-size:17px;width:20px;text-align:center;flex-shrink:0}
.sb-divider{height:1px;background:var(--border);margin:8px 16px}

.storage-card{
  margin:16px 14px;padding:14px;background:var(--card-2);
  border-radius:var(--radius);border:1px solid var(--border);
}
.storage-card .sc-label{
  font-size:11px;color:var(--text-3);margin-bottom:6px;
  display:flex;justify-content:space-between;align-items:center;
}
.sc-bar{height:4px;background:var(--card-3);border-radius:10px;overflow:hidden;margin-bottom:8px}
.sc-fill{
  height:100%;background:linear-gradient(90deg,var(--primary),var(--primary-light));
  border-radius:10px;transition:width var(--t-slow) var(--ease);
}
.sc-hint{font-size:10px;color:var(--text-3);line-height:1.5}

/* ── CONTENT ─────────────────────────────────────────────────── */
.content{flex:1;min-width:0;padding:32px;overflow-y:auto}
.content-wrap{max-width:var(--max-w);margin:0 auto}

/* ── HERO ────────────────────────────────────────────────────── */
.hero-section{
  background:linear-gradient(135deg,var(--card) 0%,var(--bg-2) 100%);
  border-radius:var(--radius-xl);padding:48px 32px;margin-bottom:28px;
  border:1px solid var(--border);position:relative;overflow:hidden;
}
.hero-section::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 0%,var(--primary-soft) 0%,transparent 65%);
  pointer-events:none;
}
.hero-badge{
  display:inline-flex;align-items:center;gap:6px;padding:5px 12px;
  background:var(--primary-soft);color:var(--primary);border-radius:var(--radius-pill);
  font-size:11px;font-weight:700;margin-bottom:14px;text-transform:uppercase;
  letter-spacing:0.5px;position:relative;z-index:1;
}
.hero-title{
  font-size:clamp(22px,4vw,36px);font-weight:800;text-align:center;
  margin-bottom:12px;line-height:1.2;letter-spacing:-0.8px;position:relative;z-index:1;
}
.hero-title .highlight{
  background:linear-gradient(135deg,var(--primary),var(--primary-light));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.hero-subtitle{
  text-align:center;color:var(--text-3);font-size:15px;max-width:560px;
  margin:0 auto 28px;position:relative;z-index:1;line-height:1.6;
}
/* Hero two-column layout */
.hero-layout{
  display:flex;align-items:center;gap:32px;justify-content:center;
  margin-bottom:28px;position:relative;z-index:1;
}
.hero-left{flex:1;min-width:0;text-align:center;}
.hero-right{flex-shrink:0;width:clamp(200px,35%,380px);display:flex;align-items:center;justify-content:center;}
.hero-right img{border-radius:12px;filter:drop-shadow(0 8px 32px rgba(255,99,51,0.2));}
@media(max-width:700px){
  .hero-layout{flex-direction:column;gap:16px;}
  .hero-right{width:100%;max-width:320px;}
}

/* Upload box */
.upload-box{
  max-width:700px;margin:0 auto;background:var(--card-2);
  border:2px dashed var(--border-strong);border-radius:var(--radius-lg);
  padding:40px 24px;text-align:center;cursor:pointer;
  transition:var(--t) var(--ease);position:relative;z-index:1;
}
.upload-box:hover,.upload-box.drag-over{
  border-color:var(--primary);background:var(--card-2);
  transform:translateY(-2px);
  box-shadow:inset 0 0 0 9999px rgba(255,99,51,0.06),var(--primary-glow);
}
.upload-icon{
  width:70px;height:70px;background:linear-gradient(135deg,var(--primary),var(--primary-light));
  border-radius:50%;display:grid;place-items:center;margin:0 auto 18px;
  font-size:30px;box-shadow:var(--shadow);
}
.upload-text{font-size:17px;font-weight:700;margin-bottom:6px}
.upload-hint{color:var(--text-3);font-size:13px;margin-bottom:22px}
.upload-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.action-btn{
  display:flex;align-items:center;gap:8px;padding:11px 22px;
  border-radius:var(--radius-pill);font-size:14px;font-weight:700;
  transition:var(--t) var(--ease);cursor:pointer;
}
.action-btn.primary{background:var(--primary);color:#fff}
.action-btn.primary:hover{background:var(--primary-hover);transform:translateY(-2px);box-shadow:0 6px 16px rgba(255,99,51,0.3)}
.action-btn.secondary{background:var(--card);color:var(--text);border:1px solid var(--border)}
.action-btn.secondary:hover{border-color:var(--primary);color:var(--primary)}
.supported-formats{margin-top:16px;font-size:12px;color:var(--text-muted)}

/* ── SECTION HEADER ──────────────────────────────────────────── */
.section-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:16px;flex-wrap:wrap;gap:10px;
}
.section-title{font-size:17px;font-weight:700;display:flex;align-items:center;gap:10px}
.st-icon{
  width:30px;height:30px;background:var(--primary-soft);color:var(--primary);
  border-radius:var(--radius-sm);display:grid;place-items:center;font-size:15px;
}
.see-all{font-size:12px;color:var(--primary);font-weight:600;cursor:pointer;white-space:nowrap}
.see-all:hover{text-decoration:underline}

/* ── TOOLS GRID ──────────────────────────────────────────────── */
.tools-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));
  gap:12px;margin-bottom:36px;
}
.tool-card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:18px 14px;cursor:pointer;transition:var(--t) var(--ease);
  text-align:center;position:relative;overflow:hidden;
}
.tool-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--primary),var(--primary-light));
  opacity:0;transition:var(--t) var(--ease);
}
.tool-card:hover{border-color:var(--primary);transform:translateY(-3px);box-shadow:var(--shadow)}
.tool-card:hover::before{opacity:1}
.tool-icon-wrap{
  width:54px;height:54px;border-radius:var(--radius);display:grid;place-items:center;
  margin:0 auto 11px;font-size:24px;color:#fff;
}
.tool-icon-wrap.scan    {background:linear-gradient(135deg,#ff6333,#ff8055)}
.tool-icon-wrap.img-pdf {background:linear-gradient(135deg,#1e88e5,#42a5f5)}
.tool-icon-wrap.pdf-img {background:linear-gradient(135deg,#e53935,#ef5350)}
.tool-icon-wrap.merge   {background:linear-gradient(135deg,#7b1fa2,#ab47bc)}
.tool-icon-wrap.split   {background:linear-gradient(135deg,#00838f,#26c6da)}
.tool-icon-wrap.compress{background:linear-gradient(135deg,#388e3c,#66bb6a)}
.tool-icon-wrap.ocr     {background:linear-gradient(135deg,#f57f17,#ffca28)}
.tool-icon-wrap.age     {background:linear-gradient(135deg,#ad1457,#ec407a)}
.tc-name{font-size:13px;font-weight:700;margin-bottom:4px}
.tc-desc{font-size:11px;color:var(--text-3);line-height:1.4}
.tc-badge{
  position:absolute;top:8px;right:8px;background:var(--primary);color:#fff;
  font-size:9px;font-weight:700;padding:2px 6px;border-radius:var(--radius-pill);
}

/* ── RECENT DOCS ──────────────────────────────────────────────── */
.recent-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(175px,1fr));
  gap:12px;margin-bottom:28px;
}
.doc-card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;cursor:pointer;transition:var(--t) var(--ease);
}
.doc-card:hover{border-color:var(--primary);transform:translateY(-3px);box-shadow:var(--shadow)}
.doc-thumb{
  height:130px;background:var(--card-2);display:flex;align-items:center;
  justify-content:center;font-size:38px;position:relative;overflow:hidden;
}
.doc-thumb img{width:100%;height:100%;object-fit:cover}
.doc-badge{
  position:absolute;bottom:6px;right:6px;background:rgba(0,0,0,0.7);
  color:#fff;font-size:10px;padding:3px 7px;border-radius:var(--radius-pill);font-weight:600;
}
.doc-info{padding:10px 12px}
.doc-name{font-size:12px;font-weight:700;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.doc-meta{font-size:10px;color:var(--text-3)}
.empty-state{grid-column:1/-1;text-align:center;padding:50px 20px;color:var(--text-3)}
.empty-state .es-icon{font-size:52px;margin-bottom:14px;opacity:0.5}
.empty-state p{font-size:14px;margin-bottom:4px}
.empty-state .es-hint{font-size:12px;color:var(--text-muted)}

/* ── SEO CONTENT ─────────────────────────────────────────────── */
.seo-section{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:30px;margin-bottom:20px;
}
.seo-section h2{
  font-size:22px;font-weight:800;margin-bottom:12px;
  background:linear-gradient(135deg,var(--primary),var(--primary-light));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.seo-section .lead{font-size:14px;color:var(--text-2);margin-bottom:18px;line-height:1.7}
.feature-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.feature-card{background:var(--card-2);padding:16px;border-radius:var(--radius);border:1px solid var(--border)}
.feature-card .fc-icon{font-size:22px;margin-bottom:8px}
.feature-card .fc-title{font-size:13px;font-weight:700;margin-bottom:5px}
.feature-card .fc-desc{font-size:11px;color:var(--text-3);line-height:1.6}

/* ── FAQ ─────────────────────────────────────────────────────── */
.faq-item{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);margin-bottom:8px;overflow:hidden;
}
.faq-q{
  width:100%;padding:16px 18px;display:flex;align-items:center;
  justify-content:space-between;font-size:14px;font-weight:600;
  text-align:left;transition:var(--t) var(--ease);
}
.faq-q:hover{background:var(--card-2)}
.faq-q::after{content:'+';font-size:20px;color:var(--primary);transition:transform var(--t) var(--ease);flex-shrink:0}
.faq-item.open .faq-q::after{transform:rotate(45deg)}
.faq-a{
  max-height:0;overflow:hidden;padding:0 18px;font-size:13px;
  color:var(--text-2);line-height:1.7;
  transition:max-height var(--t-slow) var(--ease),padding var(--t-slow) var(--ease);
}
.faq-item.open .faq-a{max-height:300px;padding:0 18px 16px}

/* ── FOOTER ──────────────────────────────────────────────────── */
.footer{background:var(--card);border-top:1px solid var(--border);margin-top:40px}
.footer-content{max-width:var(--max-w);margin:0 auto;padding:44px 32px 22px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:36px;margin-bottom:32px}
.footer-brand h3{
  font-size:20px;font-weight:800;margin-bottom:10px;
  display:flex;align-items:center;gap:8px;
}
.fb-icon{
  width:34px;height:34px;background:linear-gradient(135deg,var(--primary),var(--primary-light));
  border-radius:var(--radius-sm);display:grid;place-items:center;font-size:17px;
}
.footer-brand p{font-size:13px;color:var(--text-3);line-height:1.7;margin-bottom:14px;max-width:300px}
.social-links{display:flex;gap:8px}
.social-links a{
  width:34px;height:34px;background:var(--card-2);border-radius:var(--radius-sm);
  display:grid;place-items:center;color:var(--text-3);transition:var(--t) var(--ease);
}
.social-links a:hover{background:var(--primary);color:#fff}
.footer-col h4{font-size:12px;font-weight:700;margin-bottom:12px;text-transform:uppercase;letter-spacing:0.5px}
.footer-col a{display:block;font-size:13px;color:var(--text-3);margin-bottom:9px;transition:var(--t) var(--ease)}
.footer-col a:hover{color:var(--primary)}
.footer-bottom{
  border-top:1px solid var(--border);padding-top:18px;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;
}
.footer-bottom p{font-size:12px;color:var(--text-muted)}
.footer-links{display:flex;gap:18px}
.footer-links a{font-size:12px;color:var(--text-muted);transition:var(--t) var(--ease)}
.footer-links a:hover{color:var(--primary)}

/* ── AUTH MODAL ──────────────────────────────────────────────── */
.modal-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,0.75);z-index:1000;
  display:none;align-items:center;justify-content:center;padding:20px;
  backdrop-filter:blur(5px);
}
.modal-backdrop.show{display:flex;animation:fadeIn 0.2s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.auth-modal{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius-xl);
  max-width:400px;width:100%;padding:30px;position:relative;box-shadow:var(--shadow-lg);
  animation:slideUp 0.25s ease;
}
@keyframes slideUp{from{transform:translateY(18px);opacity:0}to{transform:translateY(0);opacity:1}}
.modal-close{
  position:absolute;top:14px;right:14px;width:30px;height:30px;
  border-radius:var(--radius-sm);display:grid;place-items:center;
  color:var(--text-3);transition:var(--t) var(--ease);
}
.modal-close:hover{background:var(--card-2);color:var(--text)}
.auth-modal h2{font-size:21px;font-weight:800;margin-bottom:7px;text-align:center}
.auth-modal p{font-size:13px;color:var(--text-3);text-align:center;margin-bottom:22px;line-height:1.6}
.google-btn{
  width:100%;padding:12px 16px;background:#fff;color:#333;
  border-radius:var(--radius);font-size:14px;font-weight:600;
  display:flex;align-items:center;justify-content:center;gap:10px;
  transition:var(--t) var(--ease);border:1px solid #ddd;cursor:pointer;
}
.google-btn:hover{background:#f5f5f5;box-shadow:var(--shadow)}
.privacy-note{margin-top:14px;font-size:11px;color:var(--text-muted);text-align:center;line-height:1.5}
.privacy-note a{color:var(--primary)}

/* ── TOAST ───────────────────────────────────────────────────── */
.toast{
  position:fixed;bottom:28px;left:50%;
  transform:translateX(-50%) translateY(70px);
  background:var(--card);color:var(--text);padding:11px 20px;
  border-radius:var(--radius-pill);font-size:13px;font-weight:600;
  z-index:9999;border:1px solid var(--border);box-shadow:var(--shadow-lg);
  transition:transform var(--t-slow) var(--ease),opacity var(--t-slow) var(--ease);
  opacity:0;white-space:nowrap;max-width:90vw;text-align:center;
}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}
.toast.success{background:var(--success);border-color:var(--success);color:#fff}
.toast.error{background:var(--error);border-color:var(--error);color:#fff}

/* ── MOBILE NAV ──────────────────────────────────────────────── */
.mobile-nav{
  display:none;position:fixed;bottom:0;left:0;right:0;
  background:var(--card);border-top:1px solid var(--border);
  z-index:50;padding:8px 4px 16px;
  transition:background var(--t) var(--ease);
}
.mob-nav-items{display:flex;justify-content:space-around}
.mob-nav-item{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:5px 10px;color:var(--text-3);font-size:10px;font-weight:600;
  transition:var(--t) var(--ease);cursor:pointer;
}
.mob-nav-item.active,.mob-nav-item:hover{color:var(--primary)}
.mob-nav-item .mni{font-size:21px}

/* ── AD SLOTS ─────────────────────────────────────────────────── */
.ad-slot{
  background:var(--card);border:1px dashed var(--border);
  border-radius:var(--radius);padding:14px;text-align:center;
  margin-bottom:22px;min-height:90px;display:flex;
  align-items:center;justify-content:center;
}
.ad-slot p{color:var(--text-muted);font-size:11px}

/* ── SCANNER UI ──────────────────────────────────────────────── */

/* Step indicator */
.scanner-steps{
  display:flex;align-items:center;gap:0;background:var(--card);
  border-radius:var(--radius-pill);padding:6px;margin-bottom:24px;
  border:1px solid var(--border);overflow:hidden;
}
.scanner-step{
  flex:1;text-align:center;padding:8px 12px;font-size:12px;font-weight:600;
  border-radius:var(--radius-pill);color:var(--text-3);transition:var(--t) var(--ease);
  cursor:default;
}
.scanner-step.active{background:var(--primary);color:#fff}
.scanner-step.done{color:var(--primary)}

/* Scanner screens */
.scanner-screen{display:none}
.scanner-screen.active{display:block}

/* Upload screen */
.scanner-upload{max-width:700px;margin:0 auto}
.scanner-upload .upload-zone{
  background:var(--card);border:2px dashed var(--border-strong);
  border-radius:var(--radius-lg);padding:60px 24px;text-align:center;
  cursor:pointer;transition:var(--t) var(--ease);margin-bottom:20px;
  position:relative;z-index:1;
}
.scanner-upload .upload-zone:hover,
.scanner-upload .upload-zone.drag-over{
  border-color:var(--primary);background:var(--card);
  transform:translateY(-2px);
  box-shadow:inset 0 0 0 9999px rgba(255,99,51,0.06),var(--primary-glow);
}
.uz-icon{font-size:56px;margin-bottom:14px}
.uz-title{font-size:20px;font-weight:800;margin-bottom:8px}
.uz-hint{color:var(--text-3);font-size:14px;margin-bottom:24px}
.uz-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

/* Crop screen */
.crop-layout{display:grid;grid-template-columns:1fr;gap:16px}
.crop-canvas-wrap{
  background:#000;border-radius:var(--radius);overflow:hidden;
  position:relative;min-height:300px;display:flex;
  align-items:center;justify-content:center;
}
#cropCanvas{max-width:100%;display:block;cursor:crosshair;touch-action:none}
#cropCanvas.grabbing{cursor:grabbing}
.crop-controls{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);padding:14px;
}
.crop-controls .crop-info{
  flex:1;min-width:200px;font-size:12px;color:var(--text-3);
  background:var(--card-2);padding:8px 12px;border-radius:var(--radius-sm);
  display:flex;align-items:center;gap:6px;
}

/* Filter screen */
.filter-layout{display:grid;grid-template-columns:1fr 320px;gap:20px;align-items:start}
.filter-preview-wrap{
  background:#000;border-radius:var(--radius);overflow:hidden;
  min-height:400px;display:flex;align-items:center;justify-content:center;
}
#previewCanvas{max-width:100%;max-height:560px;display:block}
.filter-panel{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);padding:16px;
}
.filter-strip{
  display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:16px;
}
.filter-card{
  cursor:pointer;border:2px solid transparent;border-radius:var(--radius-sm);
  overflow:hidden;background:var(--card-2);transition:var(--t) var(--ease);
}
.filter-card:hover{border-color:var(--border-strong)}
.filter-card.active{border-color:var(--primary)}
.filter-card canvas{width:100%;height:70px;display:block;background:var(--card-2)}
.filter-card .fc-label{
  font-size:10px;font-weight:600;text-align:center;padding:5px 3px;
  color:var(--text-3);
}
.filter-card.active .fc-label{color:var(--primary)}

.compare-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.compare-box{background:var(--card-2);border-radius:var(--radius-sm);overflow:hidden}
.compare-box .cb-label{
  background:#000;color:#fff;font-size:10px;font-weight:700;
  padding:5px 8px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;
}
.compare-box canvas{width:100%;display:block;max-height:160px;background:#111;object-fit:contain}

/* Sliders */
.slider-group{margin-bottom:10px}
.slider-group label{
  display:flex;justify-content:space-between;font-size:11px;
  color:var(--text-3);margin-bottom:4px;font-weight:600;
}
.slider-group .sv{color:var(--primary);font-weight:700}
.slider-group input[type=range]{width:100%;accent-color:var(--primary);height:4px}
.sliders-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* Apply to all checkbox */
.apply-all{
  display:flex;align-items:center;gap:8px;margin:12px 0;
  font-size:12px;color:var(--text-2);cursor:pointer;
}
.apply-all input{accent-color:var(--primary)}

/* Pages screen */
.pages-screen-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:16px;flex-wrap:wrap;gap:10px;
}
.pages-screen-header h2{font-size:18px;font-weight:700}
.pages-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:14px;margin-bottom:20px;
}
.page-thumb{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;cursor:pointer;position:relative;transition:var(--t) var(--ease);
}
.page-thumb:hover{border-color:var(--primary);box-shadow:var(--shadow)}
.page-thumb .pt-img{height:180px;background:#000;display:flex;align-items:center;justify-content:center}
.page-thumb .pt-img img,.page-thumb .pt-img canvas{max-width:100%;max-height:100%;object-fit:contain}
.page-thumb .pt-info{padding:8px 10px}
.page-num{font-size:11px;color:var(--text-3);font-weight:600}
.page-filter{font-size:10px;color:var(--primary)}
.page-del{
  position:absolute;top:6px;right:6px;width:26px;height:26px;
  background:rgba(0,0,0,0.7);border-radius:50%;display:grid;place-items:center;
  color:#fff;font-size:13px;opacity:0;transition:var(--t) var(--ease);cursor:pointer;
}
.page-thumb:hover .page-del{opacity:1}
.page-thumb.sortable-ghost{opacity:0.4}

/* Export screen */
.export-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px}
.export-option{
  background:var(--card);border:2px solid var(--border);border-radius:var(--radius);
  padding:20px;cursor:pointer;transition:var(--t) var(--ease);text-align:center;
}
.export-option:hover{border-color:var(--primary)}
.export-option.selected{border-color:var(--primary);background:var(--primary-soft)}
.eo-icon{font-size:36px;margin-bottom:10px}
.eo-title{font-size:15px;font-weight:700;margin-bottom:5px}
.eo-desc{font-size:12px;color:var(--text-3)}
.pdf-options{
  background:var(--card-2);border-radius:var(--radius);padding:16px;margin-bottom:16px;
}
.pdf-options .po-row{display:flex;align-items:center;gap:12px;margin-bottom:10px;flex-wrap:wrap}
.pdf-options label{font-size:12px;color:var(--text-3);font-weight:600;white-space:nowrap}
.pdf-options select{
  background:var(--card);border:1px solid var(--border);color:var(--text);
  padding:6px 10px;border-radius:var(--radius-sm);font-size:12px;outline:none;
}

/* Processing overlay */
.processing-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,0.88);z-index:9999;
  display:none;align-items:center;justify-content:center;flex-direction:column;gap:14px;
}
.processing-overlay.show{display:flex}
.spinner{
  width:48px;height:48px;border:4px solid var(--border);
  border-top-color:var(--primary);border-radius:50%;
  animation:spin 0.7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.processing-overlay p{color:var(--text);font-size:14px;font-weight:600;text-align:center}

/* ── TOOL PAGE ───────────────────────────────────────────────── */
.tool-page{max-width:900px;margin:0 auto;padding:32px 20px}
.tool-hero{
  background:linear-gradient(135deg,var(--card),var(--bg-2));
  border:1px solid var(--border);border-radius:var(--radius-xl);
  padding:32px;margin-bottom:24px;text-align:center;
  position:relative;overflow:hidden;
}
.tool-hero::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 0%,var(--primary-soft) 0%,transparent 60%);
  pointer-events:none;
}
.tool-hero-icon{
  width:72px;height:72px;border-radius:var(--radius-lg);
  display:grid;place-items:center;margin:0 auto 14px;
  font-size:34px;color:#fff;position:relative;z-index:1;box-shadow:var(--shadow);
}
.tool-hero h1{font-size:26px;font-weight:800;margin-bottom:8px;position:relative;z-index:1}
.tool-hero p{color:var(--text-3);font-size:14px;position:relative;z-index:1}

.tool-card{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:24px;margin-bottom:20px;
}
.tool-card h3{font-size:15px;font-weight:700;margin-bottom:16px;display:flex;align-items:center;gap:8px}
.tool-card h3 .tc-icon{
  width:28px;height:28px;background:var(--primary-soft);color:var(--primary);
  border-radius:var(--radius-sm);display:grid;place-items:center;font-size:14px;
}

/* Drop zone in tools */
.drop-zone{
  background:var(--card-2);border:2px dashed var(--border-strong);
  border-radius:var(--radius);padding:44px 20px;text-align:center;
  cursor:pointer;transition:var(--t) var(--ease);
}
.drop-zone:hover,.drop-zone.drag{
  border-color:var(--primary);background:var(--card-2);
  transform:translateY(-2px);
  box-shadow:inset 0 0 0 9999px rgba(255,99,51,0.06),var(--primary-glow);
}
.dz-icon{font-size:44px;margin-bottom:12px}
.dz-title{font-size:16px;font-weight:700;margin-bottom:6px}
.dz-hint{color:var(--text-3);font-size:13px;margin-bottom:18px}
.dz-btn{
  display:inline-flex;align-items:center;gap:8px;padding:10px 22px;
  background:var(--primary);color:#fff;border-radius:var(--radius-pill);
  font-size:14px;font-weight:700;transition:var(--t) var(--ease);cursor:pointer;
}
.dz-btn:hover{background:var(--primary-hover)}

/* Progress bar */
.progress-wrap{margin-bottom:16px}
.progress-bar{height:6px;background:var(--card-2);border-radius:10px;overflow:hidden;margin-bottom:6px}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--primary),var(--primary-light));border-radius:10px;transition:width 0.3s ease}
.progress-label{font-size:12px;color:var(--text-3)}

/* File list */
.file-list{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.file-item{
  display:flex;align-items:center;gap:12px;padding:10px 14px;
  background:var(--card-2);border-radius:var(--radius-sm);border:1px solid var(--border);
}
.file-item .fi-icon{font-size:22px;flex-shrink:0}
.file-item .fi-name{flex:1;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.file-item .fi-size{font-size:11px;color:var(--text-3);flex-shrink:0}
.file-item .fi-del{color:var(--text-3);cursor:pointer;transition:var(--t) var(--ease);padding:4px}
.file-item .fi-del:hover{color:var(--error)}

/* Result section */
.result-section{display:none}
.result-section.show{display:block}
.result-preview{
  background:#000;border-radius:var(--radius);margin-bottom:16px;
  min-height:200px;display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.result-preview img,.result-preview canvas{max-width:100%;max-height:400px;display:block}
.result-stats{
  display:flex;gap:20px;margin-bottom:16px;flex-wrap:wrap;
}
.result-stat{
  background:var(--card-2);border-radius:var(--radius-sm);padding:10px 16px;
  border:1px solid var(--border);flex:1;min-width:100px;
}
.result-stat .rs-label{font-size:10px;color:var(--text-3);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:4px}
.result-stat .rs-value{font-size:16px;font-weight:700}
.rs-value.positive{color:var(--success)}

/* Download button */
.download-btn{
  width:100%;padding:14px;background:linear-gradient(135deg,var(--primary),var(--primary-light));
  color:#fff;border-radius:var(--radius);font-size:15px;font-weight:700;
  display:flex;align-items:center;justify-content:center;gap:10px;
  cursor:pointer;transition:var(--t) var(--ease);border:none;
}
.download-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(255,99,51,0.4)}
.download-btn:disabled{opacity:0.5;cursor:not-allowed;transform:none}

/* Options row */
.options-row{
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:16px;
}
.option-group{display:flex;flex-direction:column;gap:5px}
.option-group label{font-size:11px;color:var(--text-3);font-weight:600}
.option-group select,.option-group input[type=number],.option-group input[type=range]{
  background:var(--card-2);border:1px solid var(--border);color:var(--text);
  padding:7px 10px;border-radius:var(--radius-sm);font-size:13px;outline:none;
  transition:var(--t) var(--ease);
}
.option-group select:focus,.option-group input:focus{border-color:var(--primary)}
.option-group input[type=range]{padding:0;accent-color:var(--primary)}

/* OCR result */
.ocr-result{
  background:var(--card-2);border:1px solid var(--border);border-radius:var(--radius);
  padding:16px;font-family:monospace;font-size:13px;line-height:1.7;
  color:var(--text-2);min-height:120px;white-space:pre-wrap;word-break:break-word;
  max-height:400px;overflow-y:auto;
}
.ocr-actions{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap}

/* Age calculator */
.age-input-group{display:flex;flex-direction:column;gap:16px;max-width:400px;margin:0 auto 24px}
.age-input-group label{font-size:13px;color:var(--text-3);font-weight:600;margin-bottom:5px}
.age-date-input{
  background:var(--card-2);border:1px solid var(--border);color:var(--text);
  padding:12px 16px;border-radius:var(--radius);font-size:15px;outline:none;width:100%;
  transition:var(--t) var(--ease);
}
.age-date-input:focus{border-color:var(--primary)}
.age-result{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px;
}
.age-unit{
  background:var(--card-2);border:1px solid var(--border);border-radius:var(--radius);
  padding:16px;text-align:center;
}
.age-unit .au-val{
  font-size:28px;font-weight:800;color:var(--primary);display:block;
  font-variant-numeric:tabular-nums;
}
.age-unit .au-label{font-size:11px;color:var(--text-3);font-weight:600;text-transform:uppercase;letter-spacing:0.5px}
.age-next-birthday{
  background:var(--primary-soft);border:1px solid var(--primary);
  border-radius:var(--radius);padding:16px;margin-top:16px;
  text-align:center;font-size:14px;color:var(--primary);font-weight:600;
}

/* ── UTILITIES ───────────────────────────────────────────────── */
.hidden{display:none!important}
.text-primary{color:var(--primary)}
.text-muted{color:var(--text-muted)}
.flex{display:flex}
.flex-center{display:flex;align-items:center;justify-content:center}
.gap-8{gap:8px}
.gap-12{gap:12px}
.mb-16{margin-bottom:16px}
.mb-24{margin-bottom:24px}
input[type="file"]{display:none}
.badge{
  display:inline-block;padding:2px 8px;border-radius:var(--radius-pill);
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;
}
.badge-primary{background:var(--primary);color:#fff}
.badge-success{background:var(--success);color:#fff}
.badge-warning{background:var(--warning);color:#000}

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media (max-width:1100px) {
  .filter-layout{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:900px) {
  .sidebar{display:none}
  .content{padding:24px 18px 90px}
  .mobile-nav{display:block}
  .filter-strip{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:640px) {
  .header{padding:0 12px;gap:8px}
  .search-wrap{display:none}
  .logo-text .sub{display:none}
  .hero-section{padding:28px 18px}
  .upload-box{padding:26px 14px}
  .footer-grid{grid-template-columns:1fr;gap:24px}
  .footer-content{padding:28px 18px 18px}
  .tools-grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .recent-grid{grid-template-columns:repeat(2,1fr)}
  .feature-grid{grid-template-columns:1fr}
  .seo-section{padding:22px 16px}
  .export-grid{grid-template-columns:1fr}
  .scanner-steps{gap:0}
  .scanner-step{font-size:10px;padding:7px 6px}
  .filter-strip{grid-template-columns:repeat(3,1fr)}
  .sliders-grid{grid-template-columns:1fr}
  .tool-page{padding:20px 14px}
  .pages-grid{grid-template-columns:repeat(2,1fr)}
  .age-result{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:400px) {
  .upload-actions{flex-direction:column;align-items:stretch}
  .action-btn{justify-content:center}
  .filter-strip{grid-template-columns:repeat(2,1fr)}
}

/* ================================================================
   NOTIFICATION OVERLAY
================================================================ */
.notif-overlay {
  position: fixed; top: calc(var(--header-h) + 8px); right: 16px;
  width: 340px; max-width: calc(100vw - 32px);
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  z-index: 500; display: none; flex-direction: column;
  overflow: hidden;
}
.notif-overlay.show { display: flex; animation: fadeSlideDown 0.18s var(--ease); }
@keyframes fadeSlideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.notif-header {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
  background: var(--card-2);
}
.notif-title { font-size: 14px; font-weight: 700; flex: 1; color: var(--text); }
.notif-mark-read {
  font-size: 11px; font-weight: 600; color: var(--primary);
  background: var(--primary-soft); border: none; cursor: pointer;
  padding: 4px 10px; border-radius: var(--radius-pill);
  transition: var(--t) var(--ease);
}
.notif-mark-read:hover { background: var(--primary); color: #fff; }
.notif-close {
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 16px; padding: 2px 6px;
  border-radius: 4px; transition: var(--t);
}
.notif-close:hover { color: var(--text); background: var(--card-3); }
.notif-list {
  max-height: 360px; overflow-y: auto; padding: 8px 0;
}
.notif-item {
  display: flex; gap: 12px; padding: 12px 16px;
  border-bottom: 1px solid var(--border); transition: var(--t);
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--card-2); }
.notif-item.read { opacity: 0.55; }
.ni-icon { font-size: 22px; flex-shrink: 0; margin-top: 2px; }
.ni-body { flex: 1; min-width: 0; }
.ni-title { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 3px; }
.ni-text  { font-size: 12px; color: var(--text-2); line-height: 1.5; }
.ni-date  { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.notif-empty { padding: 24px 16px; text-align: center; color: var(--text-3); font-size: 13px; }

/* ================================================================
   BLOG / LEGAL PAGE STYLES
================================================================ */
.page-prose {
  max-width: 780px; margin: 0 auto; padding: 32px 24px 60px;
}
.page-prose h1 { font-size: 32px; font-weight: 800; margin-bottom: 8px; }
.page-prose .page-meta { color: var(--text-3); font-size: 13px; margin-bottom: 32px; }
.page-prose h2 { font-size: 20px; font-weight: 700; margin: 36px 0 10px; color: var(--text); }
.page-prose h3 { font-size: 16px; font-weight: 700; margin: 24px 0 8px; color: var(--text); }
.page-prose p  { color: var(--text-2); line-height: 1.8; margin-bottom: 14px; }
.page-prose ul, .page-prose ol {
  color: var(--text-2); line-height: 1.8; padding-left: 20px; margin-bottom: 14px;
}
.page-prose li { margin-bottom: 6px; }
.page-prose a  { color: var(--primary); }
.page-prose a:hover { text-decoration: underline; }
.page-prose strong { color: var(--text); font-weight: 700; }
.page-prose hr { border: none; border-top: 1px solid var(--border); margin: 32px 0; }
.page-prose blockquote {
  border-left: 3px solid var(--primary); padding: 10px 16px;
  background: var(--primary-soft); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin: 20px 0; color: var(--text-2);
}
.page-hero {
  background: linear-gradient(135deg, var(--card), var(--card-2));
  border-bottom: 1px solid var(--border); padding: 48px 24px;
  text-align: center;
}
.page-hero h1 { font-size: 36px; font-weight: 900; margin-bottom: 10px; }
.page-hero p  { font-size: 16px; color: var(--text-2); max-width: 560px; margin: 0 auto; }

/* Blog card grid */
.blog-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px; padding: 0;
}
.blog-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
  transition: var(--t) var(--ease); cursor: pointer;
}
.blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--border-strong); }
.bc-img { height: 160px; background: linear-gradient(135deg,var(--card-3),var(--card-2)); display:flex;align-items:center;justify-content:center;font-size:56px; }
.bc-body { padding: 18px 20px; }
.bc-tag  { font-size: 11px; font-weight: 700; color: var(--primary); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
.bc-title { font-size: 17px; font-weight: 700; margin-bottom: 8px; color: var(--text); line-height: 1.4; }
.bc-excerpt { font-size: 13px; color: var(--text-3); line-height: 1.6; margin-bottom: 12px; }
.bc-meta { font-size: 11px; color: var(--text-muted); }
.bc-read-more { color: var(--primary); font-size: 12px; font-weight: 600; margin-top: 12px; display: block; }

/* Contact form */
.contact-form { display: flex; flex-direction: column; gap: 14px; }
.cf-field { display: flex; flex-direction: column; gap: 5px; }
.cf-field label { font-size: 12px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.5px; }
.cf-field input, .cf-field textarea, .cf-field select {
  background: var(--card-2); border: 1px solid var(--border); color: var(--text);
  padding: 11px 14px; border-radius: var(--radius); font-size: 14px;
  outline: none; transition: var(--t) var(--ease); font-family: inherit;
}
.cf-field input:focus, .cf-field textarea:focus, .cf-field select:focus {
  border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft);
}
.cf-field textarea { min-height: 120px; resize: vertical; }

/* Help / FAQ enhanced */
.help-cats {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-bottom: 32px;
}
.help-cat {
  background: var(--card-2); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px 16px; text-align: center; cursor: pointer; transition: var(--t);
}
.help-cat:hover { border-color: var(--primary); background: var(--primary-soft); }
.hc-icon  { font-size: 32px; margin-bottom: 8px; }
.hc-title { font-size: 14px; font-weight: 700; }
.hc-count { font-size: 11px; color: var(--text-3); margin-top: 3px; }

@media(max-width:640px){
  .page-prose { padding: 20px 16px 40px; }
  .page-prose h1 { font-size: 24px; }
  .page-hero h1 { font-size: 26px; }
  .blog-grid { grid-template-columns: 1fr; }
}

/* ================================================================
   3D PARTICLE SPHERE CANVAS (Three.js background)
   JavaScript overrides position/z-index at runtime,
   but these base styles act as a safe fallback.
================================================================ */
#particleCanvas {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: -999 !important;
  pointer-events: none !important;
  opacity: 1;
  display: block;
}
/* Everything else renders in normal flow above the fixed canvas */

/* ================================================================
   AUTH MODAL — SIGN IN / SIGN UP TABS
================================================================ */
.auth-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 22px;
  background: var(--card-2);
  border-radius: var(--radius);
  padding: 4px;
}
.auth-tab {
  flex: 1;
  padding: 9px;
  border-radius: calc(var(--radius) - 3px);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-3);
  cursor: pointer;
  transition: var(--t) var(--ease);
  background: transparent;
  border: none;
}
.auth-tab.active {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 2px 8px rgba(255,99,51,.35);
}
.auth-tab:not(.active):hover {
  color: var(--text);
  background: var(--card-3);
}
.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0;
  color: var(--text-muted);
  font-size: 12px;
}
.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.auth-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 12px;
}
.auth-field label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: .5px;
}
.auth-field input {
  background: var(--card-2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 10px 14px;
  border-radius: var(--radius);
  font-size: 14px;
  outline: none;
  transition: var(--t) var(--ease);
  font-family: inherit;
}
.auth-field input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.auth-submit {
  width: 100%;
  padding: 12px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity var(--t) var(--ease);
  margin-top: 4px;
}
.auth-submit:hover { opacity: .88; }
.auth-switch {
  text-align: center;
  font-size: 13px;
  color: var(--text-3);
  margin-top: 14px;
}
.auth-switch a {
  color: var(--primary);
  font-weight: 600;
}

/* ================================================================
   TOOL CARD ENTRANCE ANIMATIONS
================================================================ */
@keyframes fadeSlideUp {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tool-card {
  animation: fadeSlideUp 0.45s var(--ease) both;
}

/* Stagger each card in the tools grid */
.tools-grid .tool-item:nth-child(1)  { animation-delay: 0.04s; }
.tools-grid .tool-item:nth-child(2)  { animation-delay: 0.08s; }
.tools-grid .tool-item:nth-child(3)  { animation-delay: 0.12s; }
.tools-grid .tool-item:nth-child(4)  { animation-delay: 0.16s; }
.tools-grid .tool-item:nth-child(5)  { animation-delay: 0.20s; }
.tools-grid .tool-item:nth-child(6)  { animation-delay: 0.24s; }
.tools-grid .tool-item:nth-child(7)  { animation-delay: 0.28s; }
.tools-grid .tool-item:nth-child(8)  { animation-delay: 0.32s; }
.tools-grid .tool-item:nth-child(9)  { animation-delay: 0.36s; }
.tools-grid .tool-item:nth-child(10) { animation-delay: 0.40s; }
.tools-grid .tool-item:nth-child(11) { animation-delay: 0.44s; }
.tools-grid .tool-item:nth-child(12) { animation-delay: 0.48s; }

.tools-grid .tool-item {
  animation: fadeSlideUp 0.5s var(--ease) both;
}

/* Micro-interactions on tool items */
.tool-item {
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease), border-color 0.22s var(--ease);
  will-change: transform;
}
.tool-item:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 8px 28px rgba(255,99,51,.18);
}
.tool-item:active {
  transform: translateY(-2px) scale(0.99);
}

/* Hero section entrance */
.tool-hero {
  animation: fadeSlideUp 0.5s var(--ease) both;
}
.tool-hero-icon {
  animation: fadeSlideUp 0.4s var(--ease) both;
  animation-delay: 0.05s;
}

/* Scanner step indicators — slide in from top */
@keyframes stepIn {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0);     }
}
.scanner-steps {
  animation: stepIn 0.35s var(--ease) both;
}

/* ================================================================
   BLOG PAGE — RICH LAYOUT IMPROVEMENTS
================================================================ */
.blog-feat-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: var(--radius) var(--radius) 0 0;
  display: block;
  background: linear-gradient(135deg, var(--card-3) 0%, var(--card-2) 100%);
}
.bc-stats {
  display: flex;
  gap: 14px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.bc-stat {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text-muted);
}
.blog-cols {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 18px;
  margin: 28px 0;
}
.blog-cols .blog-card { margin: 0; }
@media(max-width:900px) { .blog-cols { grid-template-columns: 1fr 1fr; } }
@media(max-width:580px) { .blog-cols { grid-template-columns: 1fr; } }

/* Article reading progress indicator */
.read-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: var(--primary);
  z-index: 9998;
  transition: width 0.1s linear;
  border-radius: 0 2px 2px 0;
}

/* ================================================================
   RESULT SECTION — FADE IN ON REVEAL
================================================================ */
.result-section {
  animation: none;  /* override tool-card default — shown dynamically */
}
.result-section.visible {
  animation: fadeSlideUp 0.4s var(--ease) both;
}

/* ================================================================
   SETTINGS PAGE ENHANCEMENTS
================================================================ */
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  gap: 16px;
  flex-wrap: wrap;
}
.settings-row:last-child { border-bottom: none; }
.sr-info { flex: 1; min-width: 180px; }
.sr-label { font-size: 14px; font-weight: 600; color: var(--text); }
.sr-desc  { font-size: 12px; color: var(--text-3); margin-top: 2px; line-height: 1.5; }
.toggle-switch {
  position: relative;
  width: 46px;
  height: 26px;
  flex-shrink: 0;
}
.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.toggle-track {
  position: absolute;
  inset: 0;
  background: var(--card-3);
  border-radius: 100px;
  cursor: pointer;
  transition: background var(--t) var(--ease);
  border: 1px solid var(--border);
}
.toggle-switch input:checked + .toggle-track {
  background: var(--primary);
  border-color: var(--primary);
}
.toggle-track::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform var(--t) var(--ease);
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.toggle-switch input:checked + .toggle-track::after {
  transform: translateY(-50%) translateX(20px);
}

/* ================================================================
   SECTION 2026-OVERHAUL — Brand Logo, Mega Nav, Loader, Blog
================================================================ */

/* ── 1. HEADER RESTRUCTURE ──────────────────────────────────── */
/* Updated header to accommodate logo + nav + search + actions */
.header {
  gap: 10px;
}
/* SVG logo container */
.logo-svg-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  text-decoration: none;
  color: inherit;
}
.logo-svg-mark {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
}

/* ── 2. MEGA-DROPDOWN NAVIGATION ────────────────────────────── */
.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
@media(max-width: 820px) { .nav-links { display: none; } }

.nav-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 11px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color var(--t) var(--ease), background var(--t) var(--ease);
  white-space: nowrap;
  text-decoration: none;
  border: none;
  background: none;
  font-family: inherit;
}
.nav-item:hover  { color: var(--primary); background: var(--primary-soft); }
.nav-item.active { color: var(--primary); background: var(--primary-soft); }

.nav-chevron {
  display: inline-block;
  font-size: 9px;
  opacity: 0.6;
  transition: transform 0.2s var(--ease);
  pointer-events: none;
}
.nav-item.has-dropdown:hover .nav-chevron,
.nav-item.has-dropdown:focus-within .nav-chevron { transform: rotate(180deg); }

/* Dropdown panel */
.nav-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 200px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 600;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 0.18s var(--ease),
              transform 0.18s var(--ease),
              visibility 0.18s;
  padding: 8px;
}
.nav-item.has-dropdown:hover .nav-dropdown,
.nav-item.has-dropdown:focus-within .nav-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  transform: translateY(0);
}

/* Multi-column mega-panel */
.nav-dropdown.mega {
  display: flex;
  gap: 0;
  min-width: 620px;
  padding: 16px 12px;
}
@media(max-width: 960px) {
  .nav-dropdown.mega {
    flex-direction: column;
    min-width: 260px;
    max-height: 70vh;
    overflow-y: auto;
  }
}
.nd-col {
  flex: 1;
  min-width: 0;
  padding: 0 8px;
}
.nd-col + .nd-col { border-left: 1px solid var(--border); }
.nd-section-head {
  font-size: 10px;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 4px 8px 8px;
  display: block;
}
.nd-link {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--text-2);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
  line-height: 1.2;
}
.nd-link:hover { background: var(--primary-soft); color: var(--primary); }
.nd-link-icon { font-size: 17px; flex-shrink: 0; margin-top: 1px; }
.nd-link-body {}
.nd-link-name { font-size: 13px; font-weight: 600; }
.nd-link-desc { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.nd-link:hover .nd-link-desc { color: var(--primary); opacity: .75; }

/* Legal dropdown — single column */
.nav-dropdown.legal { min-width: 210px; }
.nd-divider { height: 1px; background: var(--border); margin: 4px 8px; }

/* ── 3. BRAND PROCESSING LOADER ──────────────────────────────── */
.brand-loader-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  z-index: 8000;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 18px;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.brand-loader-overlay.show { display: flex; }

.brand-loader-ring {
  position: relative;
  width: 84px;
  height: 84px;
}
/* Outer spinning gradient ring */
.brand-loader-ring::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3.5px solid transparent;
  border-top-color:   #ff6333;
  border-right-color: #ff8c42;
  border-bottom-color: rgba(255,99,51,0.25);
  animation: brandSpin 0.85s linear infinite;
}
/* Inner counter-spin ring */
.brand-loader-ring::after {
  content: '';
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-bottom-color: rgba(255,99,51,0.55);
  border-left-color:  rgba(255,140,66,0.35);
  animation: brandSpin 1.3s linear infinite reverse;
}
@keyframes brandSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
/* Pulse glow behind ring */
.brand-loader-glow {
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,99,51,0.18) 0%, transparent 70%);
  animation: brandPulse 1.6s ease-in-out infinite;
}
@keyframes brandPulse {
  0%, 100% { opacity: 0.5; transform: scale(0.92); }
  50%       { opacity: 1;   transform: scale(1.06); }
}
/* Logo icon inside the ring */
.brand-loader-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.brand-loader-text {
  font-size: 14px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.88);
  letter-spacing: 0.3px;
  text-align: center;
}
.brand-loader-sub {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  text-align: center;
  margin-top: 2px;
}

/* ── 4. THREE.JS CANVAS — FINAL LAYER FIX ────────────────────── */
/* Override previous z-index:-999 rules */
#particleCanvas {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: -10 !important;
  pointer-events: none !important;
  opacity: 0.4 !important;
  display: block;
}

/* ── 5. BLOG READABILITY ─────────────────────────────────────── */
/* Article cards need solid backdrops so particles don't bleed through */
.blog-card,
.blog-feat-card,
.blog-sidebar-tip {
  background: var(--card) !important;
  position: relative;
  z-index: 1;
}
/* Light mode article backdrop */
html[data-theme="light"] .blog-card,
html[data-theme="light"] .blog-feat-card,
html[data-theme="light"] .blog-sidebar-tip {
  background: rgba(255,255,255,0.97) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
/* Blog article image containers */
.blog-article-img {
  width: 100%;
  border-radius: var(--radius);
  display: block;
  object-fit: cover;
  background: var(--card-2);
  position: relative;
  overflow: hidden;
}
.blog-img-caption {
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
  margin-top: 6px;
  font-style: italic;
}
.blog-img-block {
  margin: 24px 0;
  background: var(--card-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
}
.blog-img-block .bib-visual {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 72px;
}
.blog-img-block .bib-alt {
  padding: 10px 14px;
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
  background: var(--card);
  border-top: 1px solid var(--border);
}
/* Blog page content area sits above particles */
.blog-content-layer {
  position: relative;
  z-index: 1;
}

/* ── 6. AUTH MODAL EXPANDED FORM ─────────────────────────────── */
/* select input inside auth modal (gender field) */
.auth-field select {
  background: var(--card-2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 10px 14px;
  border-radius: var(--radius);
  font-size: 14px;
  outline: none;
  transition: var(--t) var(--ease);
  font-family: inherit;
  width: 100%;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 34px;
}
.auth-field select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
/* Scrollable auth modal when Sign Up form is tall */
.auth-modal {
  max-height: 92vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
.auth-modal::-webkit-scrollbar { width: 4px; }
.auth-modal::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 2px; }
/* Optional field tag */
.auth-field-opt {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--card-2);
  border-radius: var(--radius-pill);
  padding: 2px 7px;
  margin-left: 6px;
  vertical-align: middle;
}
/* Two-column row inside auth form */
.auth-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media(max-width: 380px) { .auth-field-row { grid-template-columns: 1fr; } }
/* Password strength meter */
.pw-strength {
  height: 3px;
  background: var(--card-3);
  border-radius: 10px;
  margin-top: 6px;
  overflow: hidden;
}
.pw-strength-bar {
  height: 100%;
  border-radius: 10px;
  transition: width 0.3s, background 0.3s;
  width: 0%;
}

/* ── 7. PROGRESS BAR — BRAND STYLE ──────────────────────────── */
/* Replace default progress-fill with branded gradient */
.progress-fill {
  background: linear-gradient(90deg, #ff6333, #ff8c42) !important;
}
.progress-bar {
  height: 6px;
  background: var(--card-3);
  border-radius: 10px;
  overflow: hidden;
  margin: 10px 0 6px;
}

/* ── 8. MOBILE HAMBURGER MENU ────────────────────────────────── */
.hamburger-btn {
  display: none;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  background: var(--card-2);
  border: 1px solid var(--border);
  padding: 0;
  flex-shrink: 0;
}
@media(max-width: 820px) { .hamburger-btn { display: flex; } }
.hamburger-btn span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--text-2);
  border-radius: 1px;
  transition: var(--t) var(--ease);
}

/* Mobile nav drawer */
.mobile-nav-drawer {
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  z-index: 400;
  padding: 12px 16px 20px;
  transform: translateY(-105%);
  transition: transform 0.28s var(--ease);
  box-shadow: var(--shadow-lg);
}
.mobile-nav-drawer.open { transform: translateY(0); }
@media(min-width: 821px) { .mobile-nav-drawer { display: none !important; } }
.mnd-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 10px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-2);
  text-decoration: none;
  transition: background .15s, color .15s;
}
.mnd-link:hover, .mnd-link.active { background: var(--primary-soft); color: var(--primary); }
.mnd-section {
  font-size: 10px;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 12px 10px 6px;
}

/* ── 9. TOOL ICON COLORS — NEW TOOLS ─────────────────────────── */
.tool-icon-wrap.bmi      { background: linear-gradient(135deg,#0288d1,#4fc3f7); }
.tool-icon-wrap.discount { background: linear-gradient(135deg,#388e3c,#66bb6a); }
.tool-icon-wrap.pdf-word { background: linear-gradient(135deg,#1565c0,#42a5f5); }
.tool-icon-wrap.word-pdf { background: linear-gradient(135deg,#283593,#5c6bc0); }
.tool-icon-wrap.scan     { background: linear-gradient(135deg,#ff6333,#ff8055); }

/* ── 10. TOOL CARD — ENHANCED HOVER ON HOMEPAGE GRID ─────────── */
.tool-card:hover {
  border-color: var(--primary);
  transform: translateY(-4px) scale(1.015);
  box-shadow: 0 8px 24px rgba(255,99,51,0.15);
}

/* ── 11. DROP ZONE BRANDED ────────────────────────────────────── */
.drop-zone {
  background: var(--card-2);
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 40px 24px;
  text-align: center;
  cursor: pointer;
  transition: border-color .2s, background .2s, transform .2s;
}
.drop-zone:hover, .drop-zone.drag {
  border-color: var(--primary); background: var(--card-2);
  transform: translateY(-2px);
  box-shadow: inset 0 0 0 9999px rgba(255,99,51,0.06), var(--primary-glow);
}
.dz-inner { pointer-events: none; }
.dz-icon  { font-size: 40px; margin-bottom: 12px; }
.dz-text  { font-size: 15px; font-weight: 700; margin-bottom: 6px; color: var(--text); }
.dz-link  { color: var(--primary); }
.dz-sub   { font-size: 12px; color: var(--text-3); }

/* ================================================================
   SPEC 1 — LANGUAGE SELECTOR (Top-Right Premium Dropdown)
================================================================ */
.lang-selector {
  position: relative;
  flex-shrink: 0;
}
.lang-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 6px 10px;
  background: var(--card-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 700;
  color: var(--text-2); cursor: pointer;
  transition: var(--t) var(--ease);
  white-space: nowrap; font-family: inherit;
}
.lang-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
.lang-globe { width: 15px; height: 15px; flex-shrink: 0; stroke: currentColor; }
.lang-flag-current { font-size: 14px; line-height: 1; }
.lang-label { font-size: 11px; font-weight: 800; letter-spacing: 0.5px; }

.lang-dropdown {
  position: absolute;
  top: calc(100% + 8px); right: 0;
  min-width: 188px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 700;
  opacity: 0; visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
  padding: 6px; overflow: hidden;
}
.lang-selector:hover .lang-dropdown,
.lang-selector:focus-within .lang-dropdown {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.lang-dropdown-header {
  font-size: 10px; font-weight: 800; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 1px;
  padding: 6px 10px 8px; display: block;
}
.lang-option {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: var(--radius-sm);
  cursor: pointer; transition: background .15s; font-size: 13px;
  color: var(--text-2); font-weight: 600;
}
.lang-option:hover { background: var(--primary-soft); color: var(--primary); }
.lang-option.active { background: var(--primary-soft); color: var(--primary); }
.lang-flag { font-size: 18px; flex-shrink: 0; line-height: 1; }
.lang-opt-body { flex: 1; min-width: 0; }
.lang-opt-name { font-size: 13px; font-weight: 700; }
.lang-opt-native { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.lang-option.active .lang-opt-native { color: var(--primary); opacity: .7; }
.lang-check { font-size: 13px; color: var(--primary); opacity: 0; }
.lang-option.active .lang-check { opacity: 1; }

/* RTL language support */
html[dir="rtl"] .header { flex-direction: row-reverse; }
html[dir="rtl"] .nav-links { flex-direction: row-reverse; }
html[dir="rtl"] .lang-dropdown { right: auto; left: 0; }

/* ================================================================
   SPEC 6 — GLOBAL SEARCH RESULTS OVERLAY
================================================================ */
.search-results-overlay {
  position: absolute;
  top: calc(100% + 6px); left: 0; right: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 650;
  overflow: hidden;
  max-height: 420px; overflow-y: auto;
  animation: fadeSlideDown .15s var(--ease);
}
.sr-header {
  padding: 10px 14px 8px;
  font-size: 11px; font-weight: 700;
  color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px;
  border-bottom: 1px solid var(--border);
  background: var(--card-2);
}
.sr-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; cursor: pointer;
  transition: background .15s;
  border-bottom: 1px solid var(--border);
}
.sr-item:last-child { border-bottom: none; }
.sr-item:hover { background: var(--primary-soft); }
.sr-icon { font-size: 22px; flex-shrink: 0; width: 28px; text-align: center; }
.sr-body { flex: 1; min-width: 0; }
.sr-name { font-size: 13px; font-weight: 700; color: var(--text); }
.sr-desc { font-size: 11px; color: var(--text-3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-item:hover .sr-desc { color: var(--primary); opacity: .75; }
.sr-cat {
  font-size: 10px; font-weight: 700; color: var(--text-muted);
  background: var(--card-2); border-radius: var(--radius-pill);
  padding: 3px 8px; white-space: nowrap; flex-shrink: 0;
}
.sr-item:hover .sr-cat { background: var(--primary-soft); color: var(--primary); }
.sr-empty { padding: 24px 16px; text-align: center; color: var(--text-3); font-size: 13px; }
.sr-empty strong { color: var(--text); }

/* search wrap needs relative positioning for overlay */
.search-wrap { position: relative; }

/* ================================================================
   SPEC 3 — NEW TOOL ICON COLORS
================================================================ */
.tool-icon-wrap.compress-pdf  { background: linear-gradient(135deg,#c62828,#ef5350); }
.tool-icon-wrap.fill-sign     { background: linear-gradient(135deg,#1b5e20,#43a047); }
.tool-icon-wrap.watermark     { background: linear-gradient(135deg,#004d40,#00897b); }
.tool-icon-wrap.page-numbers  { background: linear-gradient(135deg,#311b92,#7c4dff); }
.tool-icon-wrap.delete-pages  { background: linear-gradient(135deg,#bf360c,#ff5722); }
.tool-icon-wrap.html-pdf      { background: linear-gradient(135deg,#006064,#00acc1); }
.tool-icon-wrap.pdf-editor    { background: linear-gradient(135deg,#4a148c,#8e24aa); }
.tool-icon-wrap.pdf-ppt       { background: linear-gradient(135deg,#b71c1c,#f44336); }
.tool-icon-wrap.ppt-pdf       { background: linear-gradient(135deg,#880e4f,#e91e63); }
.tool-icon-wrap.pdf-excel     { background: linear-gradient(135deg,#1a5c38,#2e7d32); }
.tool-icon-wrap.excel-pdf     { background: linear-gradient(135deg,#0d47a1,#1565c0); }
.tool-icon-wrap.ai-summary    { background: linear-gradient(135deg,#37474f,#607d8b); }
.tool-icon-wrap.img-compress  { background: linear-gradient(135deg,#e65100,#ff6d00); }

/* ================================================================
   SPEC 4 — PDF EDITOR WORKSPACE STYLES
================================================================ */
.pdf-editor-wrap {
  display: grid;
  grid-template-columns: 220px 1fr 260px;
  gap: 0; height: calc(100vh - var(--header-h) - 120px);
  min-height: 500px; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--bg-2);
}
/* Left page panel */
.pe-pages {
  background: var(--card); border-right: 1px solid var(--border);
  overflow-y: auto; padding: 12px 8px;
  display: flex; flex-direction: column; gap: 8px;
}
.pe-page-thumb {
  border: 2px solid var(--border); border-radius: var(--radius-sm);
  overflow: hidden; cursor: pointer; transition: var(--t) var(--ease);
  background: #fff; position: relative;
}
.pe-page-thumb:hover { border-color: var(--primary); }
.pe-page-thumb.active { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-soft); }
.pe-page-thumb canvas { width: 100%; display: block; }
.pe-page-num {
  position: absolute; bottom: 4px; right: 6px;
  font-size: 10px; font-weight: 700; color: #fff;
  background: rgba(0,0,0,.55); border-radius: var(--radius-pill);
  padding: 1px 6px;
}
/* Centre canvas area */
.pe-canvas-area {
  flex: 1; overflow: auto; padding: 20px;
  display: flex; align-items: flex-start; justify-content: center;
  background: var(--bg-2);
}
.pe-canvas-wrap {
  position: relative; box-shadow: 0 8px 32px rgba(0,0,0,.5);
  cursor: text;
}
#peCanvas { display: block; }
.pe-overlay-layer {
  position: absolute; inset: 0;
  pointer-events: none;
}
/* Text & object overlay nodes */
.pe-text-node {
  position: absolute;
  background: rgba(255,99,51,.08);
  border: 1.5px dashed rgba(255,99,51,.5);
  border-radius: 3px;
  cursor: move;
  min-width: 40px; min-height: 20px;
  pointer-events: all;
  outline: none;
  font-family: inherit;
  white-space: pre;
  line-height: 1.4;
  padding: 2px 4px;
}
.pe-text-node:focus { background: rgba(255,99,51,.12); border-color: var(--primary); outline: none; }
.pe-text-node.selected { border-style: solid; box-shadow: 0 0 0 2px var(--primary); }
/* Right toolbar */
.pe-toolbar {
  width: 260px; background: var(--card);
  border-left: 1px solid var(--border);
  overflow-y: auto; padding: 16px;
  display: flex; flex-direction: column; gap: 14px;
}
.pe-tool-group { display: flex; flex-direction: column; gap: 6px; }
.pe-tool-label {
  font-size: 10px; font-weight: 800; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .8px; margin-bottom: 4px;
}
.pe-tool-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 600; color: var(--text-2);
  cursor: pointer; transition: .15s;
  background: var(--card-2); border: 1px solid var(--border);
}
.pe-tool-btn:hover { background: var(--primary-soft); color: var(--primary); border-color: var(--primary); }
.pe-tool-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.pe-color-row { display: flex; gap: 6px; flex-wrap: wrap; }
.pe-color-swatch {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid transparent; cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}
.pe-color-swatch:hover { transform: scale(1.15); }
.pe-color-swatch.active { border-color: var(--text); box-shadow: 0 0 0 2px var(--primary); }
.pe-font-select, .pe-font-size {
  background: var(--card-2); border: 1px solid var(--border);
  color: var(--text); padding: 7px 10px; border-radius: var(--radius-sm);
  font-size: 13px; outline: none; width: 100%; transition: var(--t);
}
.pe-font-select:focus, .pe-font-size:focus { border-color: var(--primary); }
@media(max-width: 900px) { .pdf-editor-wrap { grid-template-columns: 1fr; height: auto; } .pe-pages, .pe-toolbar { display: none; } }

/* ================================================================
   SPEC 3 — FILL & SIGN CANVAS STYLES
================================================================ */
.fs-canvas-wrap {
  position: relative; overflow: hidden;
  background: #fff; box-shadow: var(--shadow-lg);
  border-radius: var(--radius);
  display: inline-block;
}
#fsCanvas { display: block; cursor: crosshair; touch-action: none; }
.fs-toolbar {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px;
  padding: 12px 16px; background: var(--card);
  border: 1px solid var(--border); border-radius: var(--radius);
  align-items: center;
}
.fs-mode-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 700;
  background: var(--card-2); border: 1px solid var(--border);
  color: var(--text-2); cursor: pointer; transition: .15s;
}
.fs-mode-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.fs-mode-btn:hover:not(.active) { border-color: var(--primary); color: var(--primary); }
.fs-page-nav { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.fs-page-info { font-size: 13px; color: var(--text-3); font-weight: 600; }

/* ================================================================
   SPEC 3 — WATERMARK TOOL STYLES
================================================================ */
.wm-preview-wrap {
  background: #f0f0f0;
  border-radius: var(--radius); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  min-height: 300px; position: relative;
}
.wm-canvas-preview { max-width: 100%; display: block; }
.wm-controls { display: flex; flex-direction: column; gap: 12px; }
.wm-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.wm-label { font-size: 12px; font-weight: 700; color: var(--text-3); min-width: 80px; }
.wm-input {
  background: var(--card-2); border: 1px solid var(--border);
  color: var(--text); padding: 8px 12px; border-radius: var(--radius-sm);
  font-size: 13px; outline: none; flex: 1; transition: var(--t);
}
.wm-input:focus { border-color: var(--primary); }
.wm-range { flex: 1; accent-color: var(--primary); }

/* ================================================================
   SPEC 3 — DELETE PAGES THUMBNAIL GRID
================================================================ */
.dp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px; margin-top: 12px;
}
.dp-thumb {
  border: 2px solid var(--border); border-radius: var(--radius-sm);
  overflow: hidden; cursor: pointer; position: relative;
  background: #fff; transition: var(--t) var(--ease);
}
.dp-thumb:hover { border-color: var(--error); }
.dp-thumb.marked { border-color: var(--error); opacity: .55; }
.dp-thumb canvas { width: 100%; display: block; }
.dp-del-badge {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(239,68,68,.15);
  font-size: 28px; opacity: 0; transition: .15s;
}
.dp-thumb.marked .dp-del-badge { opacity: 1; }
.dp-page-label {
  position: absolute; bottom: 4px; left: 0; right: 0;
  text-align: center; font-size: 10px; font-weight: 700;
  color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.8);
}

/* ================================================================
   SPEC 3 — PAGE NUMBERS TOOL
================================================================ */
.pn-preview-wrap {
  background: #fff; border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  min-height: 280px; padding: 10px;
}
#pnPreviewCanvas { max-width: 100%; display: block; }
.pn-position-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; max-width: 200px; }
.pn-pos-btn {
  padding: 8px; text-align: center; font-size: 11px; font-weight: 700;
  background: var(--card-2); border: 2px solid var(--border);
  border-radius: var(--radius-sm); cursor: pointer; transition: .15s;
  color: var(--text-3);
}
.pn-pos-btn:hover { border-color: var(--primary); color: var(--primary); }
.pn-pos-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }

/* ================================================================
   SPEC 3 — AI SUMMARIZER
================================================================ */
.ai-summary-output {
  background: var(--card-2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px;
  font-size: 14px; line-height: 1.7; color: var(--text-2);
}
.ai-summary-output h3 {
  font-size: 16px; font-weight: 700; color: var(--primary);
  margin-bottom: 12px; display: flex; align-items: center; gap: 8px;
}
.ai-summary-output ul { padding-left: 20px; margin-top: 8px; }
.ai-summary-output li { margin-bottom: 6px; }
.ai-key-words {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px;
}
.ai-keyword {
  padding: 4px 10px; background: var(--primary-soft); color: var(--primary);
  border-radius: var(--radius-pill); font-size: 12px; font-weight: 700;
}
.ai-stat-row { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.ai-stat { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 16px; flex: 1; min-width: 100px; text-align: center; }
.ai-stat .as-val { font-size: 20px; font-weight: 800; color: var(--primary); }
.ai-stat .as-lbl { font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: .5px; margin-top: 2px; }

/* ================================================================
   SPEC 3 — HTML TO PDF
================================================================ */
.htp-source-tabs { display: flex; gap: 0; margin-bottom: 16px; background: var(--card-2); border-radius: var(--radius); padding: 4px; }
.htp-tab { flex: 1; padding: 9px; border-radius: calc(var(--radius) - 3px); font-size: 13px; font-weight: 700; color: var(--text-3); cursor: pointer; transition: var(--t); background: transparent; border: none; }
.htp-tab.active { background: var(--primary); color: #fff; }
.htp-preview-frame { width: 100%; height: 400px; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; }
.htp-code-area { background: var(--card-2); border: 1px solid var(--border); color: var(--text); padding: 14px; border-radius: var(--radius); font-family: monospace; font-size: 13px; min-height: 200px; width: 100%; resize: vertical; outline: none; line-height: 1.6; }
.htp-code-area:focus { border-color: var(--primary); }

/* ================================================================
   SPEC 2 — HOMEPAGE COMPRESS LABEL SPLIT
================================================================ */
/* no extra CSS needed — handled in HTML tool-icon-wrap classes */

/* ================================================================
   HOMEPAGE CATEGORY SECTION LABELS
================================================================ */
.tool-category-label {
  font-size: 10px; font-weight: 800; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 1.2px;
  margin-bottom: 10px; margin-top: 4px;
  display: flex; align-items: center; gap: 6px;
}
.tool-category-label::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}

/* ================================================================
   MEGA-DROPDOWN RIGHT-SIDE ALIGNMENT (LANGUAGE AT FAR RIGHT)
================================================================ */
/* Ensure the RHS header area never wraps */
.header-actions { flex-wrap: nowrap; }
/* On very small screens, hide language label text */
@media(max-width: 400px) { .lang-label { display: none; } .lang-flag-current { font-size: 16px; } }

/* Nav links sit on RHS, logo anchors left */
.header { justify-content: flex-start; }

/* ================================================================
   SPEC 7 — ENHANCED THREE.JS CANVAS (final z-index lock)
================================================================ */
#particleCanvas {
  z-index: -10 !important;
  opacity: 0.45 !important;
}

/* ================================================================
   SPEC 7 — BLOG CARD & ARTICLE CONTENT SHIELDS
   Solid backdrops so Three.js particles never bleed through text
================================================================ */

/* Blog index page content shield */
.blog-content-layer {
  position: relative;
  z-index: 1;
}

/* Card-level solid shield: dark mode */
.blog-card,
.blog-feat-card,
.blog-sidebar-tip {
  background: rgba(22,22,22,0.98) !important;
  backdrop-filter: none;
}

/* Light theme overrides */
html[data-theme="light"] .blog-card,
html[data-theme="light"] .blog-feat-card,
html[data-theme="light"] .blog-sidebar-tip {
  background: rgba(255,255,255,0.98) !important;
}

/* Article body shield wrapper */
.article-shield {
  position: relative;
  background: var(--bg);
  z-index: 1;
}

/* Article prose sections get solid backing */
.page-prose {
  position: relative;
  z-index: 1;
  background: var(--bg);
}

/* Blog hero strip solid backing */
.blog-hero-strip {
  position: relative;
  z-index: 1;
  background: linear-gradient(135deg, rgba(255,99,51,.14) 0%, rgba(180,60,220,.10) 100%) !important;
}
html[data-theme="light"] .blog-hero-strip {
  background: linear-gradient(135deg, rgba(255,99,51,.08) 0%, rgba(180,60,220,.05) 100%) !important;
}

/* Article hero shield */
.article-hero {
  position: relative;
  z-index: 1;
}

/* Blog secondary grid cards */
.blog-secondary-grid .blog-card .bc-body {
  background: var(--card);
}

/* SEO section shield */
.seo-section {
  position: relative;
  z-index: 1;
  background: var(--bg);
  padding: 24px 0;
}

/* ================================================================
   BLOG CARD COMPONENT (shared across blog pages)
================================================================ */
.blog-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow .25s var(--ease), border-color .25s var(--ease), transform .2s var(--ease);
}
.blog-card:hover {
  box-shadow: var(--shadow-lg);
  border-color: var(--primary);
  transform: translateY(-2px);
}
.blog-card .bc-img {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  height: 140px;
  position: relative;
  overflow: hidden;
}
.blog-card .bc-body {
  padding: 18px 18px 16px;
}
.blog-card .bc-tag {
  font-size: 10px;
  font-weight: 800;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: .8px;
  margin-bottom: 8px;
}
.blog-card .bc-title {
  font-size: 14px;
  font-weight: 800;
  line-height: 1.4;
  margin-bottom: 8px;
  color: var(--text);
}
.blog-card .bc-excerpt {
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.65;
  margin-bottom: 10px;
}
.blog-card .bc-meta {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.blog-card .bc-read-more {
  font-size: 12px;
  font-weight: 700;
  color: var(--primary);
}
.blog-card .bc-read-more:hover { text-decoration: underline; }