/* SF Tools v1.0.0 */
/* ═══════════════════════════════════════════
   SF Tools — Shared UI Components
   Light/dark aware
═══════════════════════════════════════════ */

/* ── SECTION HEADERS ── */
.sec { max-width:var(--container); margin:0 auto; padding:72px 28px 0; position:relative; z-index:1; }
.sec-last { padding-bottom:72px; }
.sec-head { text-align:center; margin-bottom:52px; }
.sec-eye  { font-family:'DM Mono',monospace; font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); opacity:.8; margin-bottom:12px; }
.sec-title{ font-family:'Orbitron',sans-serif; font-size:clamp(22px,4vw,36px); font-weight:700; color:var(--text); letter-spacing:.03em; line-height:1.2; margin-bottom:14px; transition:color .3s; }
.sec-sub  { font-size:clamp(13px,2vw,15px); color:var(--text-muted); max-width:540px; margin:0 auto; line-height:1.7; transition:color .3s; }

/* Page hero */
.page-hero { padding:40px 0 32px; }
.page-hero .ph-eye { font-family:'DM Mono',monospace; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); opacity:.75; margin-bottom:10px; }
.page-hero h1 { font-family:'Orbitron',sans-serif; font-weight:900; font-size:clamp(26px,5vw,52px); letter-spacing:.04em; line-height:1.1; color:var(--text); margin-bottom:14px; transition:color .3s; }
.page-hero h1 span { color:var(--accent); }
.page-hero p { font-size:clamp(14px,2.2vw,17px); color:var(--text-muted); max-width:660px; line-height:1.7; transition:color .3s; }
.page-hero-meta { display:flex; gap:10px; margin-top:20px; flex-wrap:wrap; }
.ph-badge { font-family:'DM Mono',monospace; font-size:10px; letter-spacing:.1em; text-transform:uppercase; padding:4px 12px; border-radius:4px; }
.ph-badge.live { color:var(--success); background:rgba(0,212,170,.1); border:1px solid rgba(0,212,170,.25); }
.ph-badge.free { color:var(--accent);  background:rgba(77,166,255,.1); border:1px solid rgba(77,166,255,.2); }
.ph-badge.priv { color:var(--text-muted); background:var(--surface2); border:1px solid var(--border2); }

/* ── BUTTONS ── */
.btn {
  display:inline-flex; align-items:center; gap:8px; text-decoration:none; border:none;
  cursor:pointer; font-family:'Orbitron',sans-serif; font-weight:700; letter-spacing:.08em;
  border-radius:var(--radius); transition:background .2s,transform .18s,box-shadow .2s,color .2s,border-color .2s;
  white-space:nowrap; outline:none;
}
.btn:disabled { opacity:.3; cursor:not-allowed; transform:none !important; }
.btn-primary { padding:13px 32px; background:var(--accent); color:#000; font-size:clamp(12px,1.8vw,14px); }
.btn-primary:hover:not(:disabled) { background:var(--accent-dim); transform:translateY(-2px); box-shadow:0 8px 28px rgba(77,166,255,.32); }
.btn-outline { padding:12px 26px; background:transparent; color:var(--accent); border:1.5px solid var(--accent); font-size:clamp(11px,1.6vw,13px); }
.btn-outline:hover:not(:disabled) { background:var(--accent); color:#000; box-shadow:0 6px 22px rgba(77,166,255,.28); }
.btn-ghost  { padding:11px 22px; background:var(--surface2); color:var(--text-muted); border:1px solid var(--border2); font-size:12px; }
.btn-ghost:hover:not(:disabled) { border-color:var(--accent); color:var(--accent); }
.btn-danger { padding:11px 22px; background:transparent; color:var(--error); border:1px solid var(--error); font-size:12px; }
.btn-danger:hover:not(:disabled) { background:var(--error); color:#fff; }
.btn-sm  { padding:8px 18px; font-size:11px; }
.btn-lg  { padding:16px 42px; font-size:15px; }
.btn-full{ width:100%; justify-content:center; }
.btn-mono{ font-family:'DM Mono',monospace; }

/* ── TOOL CARDS ── */
.tools-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.tool-card {
  position:relative; background:var(--surface); border:1px solid var(--border);
  border-radius:12px; padding:26px 22px 22px; text-decoration:none; color:inherit;
  overflow:hidden; display:flex; flex-direction:column; gap:14px;
  transition:border-color .25s,transform .3s,box-shadow .3s,background .3s;
}
.tool-card::before { content:''; position:absolute; inset:0; opacity:0; transition:opacity .3s; pointer-events:none; }
.tool-card.cat-image::before { background:radial-gradient(ellipse at 20% 20%,rgba(77,166,255,.08) 0%,transparent 60%); }
.tool-card.cat-text::before  { background:radial-gradient(ellipse at 20% 20%,rgba(16,185,129,.07) 0%,transparent 60%); }
.tool-card.cat-dev::before   { background:radial-gradient(ellipse at 20% 20%,rgba(124,58,237,.08) 0%,transparent 60%); }
.tool-card.cat-seo::before   { background:radial-gradient(ellipse at 20% 20%,rgba(245,158,11,.07) 0%,transparent 60%); }
.tool-card.cat-file::before  { background:radial-gradient(ellipse at 20% 20%,rgba(6,182,212,.07) 0%,transparent 60%); }
.tool-card:not(.cs):hover { transform:translateY(-6px); box-shadow:var(--shadow); }
.tool-card:not(.cs):hover::before { opacity:1; }
.tool-card.cs   { opacity:.65; cursor:default; }
.tool-card.featured { border-color:rgba(77,166,255,.3); }

.t-badge { position:absolute; top:14px; right:14px; font-family:'DM Mono',monospace; font-size:9px; letter-spacing:.1em; text-transform:uppercase; padding:3px 8px; border-radius:3px; }
.b-live { color:var(--success); background:rgba(0,212,170,.1); border:1px solid rgba(0,212,170,.25); }
.b-hot  { color:var(--warn);    background:rgba(255,170,0,.1);   border:1px solid rgba(255,170,0,.25); }
.b-new  { color:var(--accent);  background:rgba(77,166,255,.1);  border:1px solid rgba(77,166,255,.2); }
.b-soon { color:var(--muted);   background:var(--surface2);      border:1px solid var(--border2); }

.t-icon { width:50px; height:50px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0; transition:transform .25s; }
.tool-card:not(.cs):hover .t-icon { transform:scale(1.1) rotate(-4deg); }
.t-icon.cat-image { background:rgba(77,166,255,.09); border:1px solid rgba(77,166,255,.15); }
.t-icon.cat-text  { background:rgba(16,185,129,.08); border:1px solid rgba(16,185,129,.15); }
.t-icon.cat-dev   { background:rgba(124,58,237,.09); border:1px solid rgba(124,58,237,.15); }
.t-icon.cat-seo   { background:rgba(245,158,11,.08); border:1px solid rgba(245,158,11,.15); }
.t-icon.cat-file  { background:rgba(6,182,212,.08);  border:1px solid rgba(6,182,212,.15); }
.t-name { font-family:'Orbitron',sans-serif; font-size:14px; font-weight:700; color:var(--text); letter-spacing:.03em; line-height:1.25; transition:color .3s; }
.t-desc { font-size:12.5px; color:var(--text-muted); line-height:1.65; flex:1; transition:color .3s; }
.t-tags { display:flex; gap:5px; flex-wrap:wrap; }
.t-tag  { font-family:'DM Mono',monospace; font-size:8.5px; letter-spacing:.07em; text-transform:uppercase; padding:2px 7px; border:1px solid var(--border2); border-radius:2px; color:var(--muted); transition:color .3s,border-color .3s; }
.t-go   { display:flex; align-items:center; gap:5px; font-family:'DM Mono',monospace; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); opacity:0; transition:opacity .2s; }
.tool-card:not(.cs):hover .t-go { opacity:1; }

/* ── CATEGORY TABS ── */
.cat-tabs { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-bottom:40px; }
.cat-tab  { font-family:'DM Mono',monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; padding:8px 18px; border:1px solid var(--border2); border-radius:20px; color:var(--muted); background:none; cursor:pointer; transition:all .2s; }
.cat-tab:hover { color:var(--text-muted); border-color:var(--muted); }
.cat-tab.active { color:var(--accent); border-color:var(--accent); background:rgba(77,166,255,.07); }

/* ── CATEGORY CARDS ── */
.cat-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.cat-card {
  background:var(--surface); border:1px solid var(--border); border-radius:10px;
  padding:24px 18px; text-align:center; text-decoration:none; color:inherit;
  transition:border-color .2s,transform .25s,background .3s;
  display:flex; flex-direction:column; align-items:center; gap:12px;
}
.cat-card:hover { transform:translateY(-4px); }
.cat-card.c-img:hover  { border-color:rgba(77,166,255,.5); background:rgba(77,166,255,.05); }
.cat-card.c-txt:hover  { border-color:rgba(16,185,129,.5); background:rgba(16,185,129,.04); }
.cat-card.c-dev:hover  { border-color:rgba(124,58,237,.5); background:rgba(124,58,237,.05); }
.cat-card.c-seo:hover  { border-color:rgba(245,158,11,.5); background:rgba(245,158,11,.04); }
.cat-card.c-file:hover { border-color:rgba(6,182,212,.5);  background:rgba(6,182,212,.04); }
.cat-icon  { font-size:30px; }
.cat-name  { font-family:'Orbitron',sans-serif; font-size:12px; font-weight:700; color:var(--text); letter-spacing:.04em; transition:color .3s; }
.cat-count { font-family:'DM Mono',monospace; font-size:10px; color:var(--muted); letter-spacing:.08em; transition:color .3s; }

/* ── WHY CARDS ── */
.why-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.why-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:24px 20px; transition:border-color .2s,transform .2s,background .3s; }
.why-card:hover { border-color:var(--border2); transform:translateY(-3px); }
.why-icon  { font-size:26px; margin-bottom:12px; }
.why-title { font-size:14px; font-weight:600; color:var(--text); margin-bottom:8px; transition:color .3s; }
.why-desc  { font-size:12.5px; color:var(--text-muted); line-height:1.65; transition:color .3s; }

/* ── FAQ ── */
.faq-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
details.faq { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:18px 22px; transition:border-color .2s,background .3s; }
details.faq:hover { border-color:var(--border2); }
details.faq summary { font-size:14px; font-weight:600; color:var(--text); cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:12px; user-select:none; transition:color .3s; }
details.faq summary::-webkit-details-marker { display:none; }
details.faq summary::after { content:'+'; font-size:18px; color:var(--accent); flex-shrink:0; font-weight:300; transition:transform .2s; line-height:1; }
details.faq[open] summary::after { transform:rotate(45deg); }
details.faq p { font-size:13px; color:var(--text-muted); line-height:1.7; margin-top:12px; transition:color .3s; }

/* ── ALERTS ── */
.alert { padding:11px 16px; font-family:'DM Mono',monospace; font-size:11px; letter-spacing:.06em; border-left:3px solid; border-radius:0 var(--radius) var(--radius) 0; margin-bottom:12px; display:none; }
.alert.show  { display:block; }
.alert.error { border-color:var(--error); color:var(--error); background:rgba(255,85,102,.07); }
.alert.warn  { border-color:var(--warn);  color:var(--warn);  background:rgba(255,170,0,.07); }
.alert.info  { border-color:var(--accent); color:var(--accent); background:rgba(77,166,255,.06); }

/* ── CTA BANNER ── */
.cta-banner {
  position:relative; overflow:hidden;
  background:linear-gradient(135deg,rgba(77,166,255,.08) 0%,rgba(124,58,237,.05) 100%);
  border:1px solid rgba(77,166,255,.18); border-radius:16px; padding:60px 40px; text-align:center;
  transition:background .3s;
}
[data-theme="light"] .cta-banner { background:linear-gradient(135deg,rgba(77,166,255,.1) 0%,rgba(124,58,237,.06) 100%); border-color:rgba(77,166,255,.25); }
.cta-banner::before { content:''; position:absolute; top:-80px; right:-80px; width:300px; height:300px; background:radial-gradient(circle,rgba(77,166,255,.12) 0%,transparent 70%); pointer-events:none; }
.cta-banner h2 { font-family:'Orbitron',sans-serif; font-size:clamp(20px,4vw,34px); font-weight:700; color:var(--text); letter-spacing:.03em; margin-bottom:12px; }
.cta-banner p  { font-size:15px; color:var(--text-muted); max-width:500px; margin:0 auto 32px; }
.cta-btns { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* ── PROFILE CARD ── */
.profile-card {
  background:linear-gradient(135deg,rgba(77,166,255,.07) 0%,rgba(124,58,237,.04) 100%);
  border:1px solid rgba(77,166,255,.2); border-radius:16px; padding:48px 44px;
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:40px;
  transition:background .3s;
}
[data-theme="light"] .profile-card { background:linear-gradient(135deg,rgba(77,166,255,.08) 0%,rgba(124,58,237,.05) 100%); }
.profile-avatar {
  width:88px; height:88px; border-radius:50%;
  background:linear-gradient(135deg,var(--accent) 0%,var(--accent2) 100%);
  display:flex; align-items:center; justify-content:center;
  font-family:'Orbitron',sans-serif; font-weight:900; font-size:28px; color:#fff;
  flex-shrink:0; box-shadow:0 0 32px rgba(77,166,255,.3);
}
.profile-info h3 { font-family:'Orbitron',sans-serif; font-size:clamp(16px,2.5vw,22px); font-weight:700; color:var(--text); letter-spacing:.04em; margin-bottom:8px; transition:color .3s; }
.profile-info p  { font-size:14px; color:var(--text-muted); line-height:1.7; max-width:500px; transition:color .3s; }
.profile-tags { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.profile-tag { font-family:'DM Mono',monospace; font-size:10px; letter-spacing:.1em; text-transform:uppercase; padding:3px 10px; border:1px solid var(--border2); border-radius:3px; color:var(--text-muted); transition:color .3s,border-color .3s; }

/* ── SEO CONTENT GRID ── */
.seo-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.seo-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:22px 20px; transition:border-color .2s,background .3s; }
.seo-card:hover { border-color:var(--border2); }
.seo-card h3 { font-size:14px; font-weight:600; color:var(--text); margin-bottom:8px; transition:color .3s; }
.seo-card p  { font-size:12.5px; color:var(--text-muted); line-height:1.68; transition:color .3s; }

/* ── COMING SOON PAGE ── */
.cs-page { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:55vh; text-align:center; padding:40px 20px; }
.cs-page .cs-icon { font-size:64px; margin-bottom:24px; opacity:.65; }
.cs-page h1 { font-family:'Orbitron',sans-serif; font-size:clamp(24px,4vw,40px); font-weight:700; color:var(--text); letter-spacing:.04em; margin-bottom:14px; }
.cs-page p  { font-size:16px; color:var(--text-muted); max-width:500px; line-height:1.7; margin-bottom:32px; }

/* ── RESPONSIVE ── */
@media (max-width:1024px) {
  .tools-grid { grid-template-columns:repeat(2,1fr); }
  .cat-grid   { grid-template-columns:repeat(3,1fr); }
  .why-grid   { grid-template-columns:repeat(2,1fr); }
  .seo-grid   { grid-template-columns:1fr 1fr; }
  .profile-card { grid-template-columns:auto 1fr; gap:28px; }
}
@media (max-width:768px) {
  .faq-grid { grid-template-columns:1fr; }
  .sec { padding:56px 20px 0; }
  .page-wrap { padding:32px 20px 64px; }
  .profile-card { grid-template-columns:1fr; text-align:center; padding:32px 24px; gap:20px; }
  .profile-avatar { margin:0 auto; }
  .profile-tags { justify-content:center; }
  .cta-banner { padding:40px 24px; }
}
@media (max-width:560px) {
  .tools-grid { grid-template-columns:1fr; }
  .cat-grid   { grid-template-columns:repeat(2,1fr); }
  .why-grid   { grid-template-columns:1fr; }
  .seo-grid   { grid-template-columns:1fr; }
  .cta-btns   { flex-direction:column; align-items:center; }
  .cta-banner { padding:32px 18px; }
}

/* ═══════════════════════════════════════════
   GLOBAL OVERFLOW & RESPONSIVE SAFETY NET
   Prevents horizontal scroll on all pages
═══════════════════════════════════════════ */

/* Prevent any element from causing horizontal overflow */
.page-wrap, main, section, .sec { max-width:100%; }

/* File rows — prevent overflow on small screens */
.file-item {
  min-width: 0;
  max-width: 100%;
}
.file-item .f-info { min-width: 0; overflow: hidden; }
.file-item .f-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Stats bars */
.stats-bar { overflow: hidden; }

/* Tables — always scrollable on mobile */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Tool textareas — never exceed viewport */
.tool-textarea, .output-box { max-width: 100%; }

/* Action rows — stack on very small */
@media (max-width: 400px) {
  .action-row { flex-direction: column; }
  .action-row .btn { width: 100%; justify-content: center; }
}

/* ── THUMBNAIL FIX ── */
/* Both .f-thumb (image-studio/webp-converter) must be fixed size */
.f-thumb, .file-thumb {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px;
  min-height: 42px;
  max-width: 42px;
  max-height: 42px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--border2);
  background: var(--surface2);
  flex-shrink: 0;
  display: block;
}

/* ── MOBILE FILE LIST FIX ── */
@media (max-width: 560px) {
  .file-item {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
  }
  .file-item .f-thumb { width: 36px !important; height: 36px !important; min-width: 36px; min-height: 36px; max-width: 36px; max-height: 36px; }
  .file-item .f-info  { flex: 1; min-width: calc(100% - 54px); }
  .file-item .f-status { font-size: 9px; padding: 2px 7px; }
  .file-item .dl-btn  { font-size: 10px; padding: 5px 10px; }
  .file-item .rm-btn  { width: 26px; height: 26px; }
}

/* ── STATS BAR MOBILE ── */
@media (max-width: 480px) {
  .stats-bar { grid-template-columns: repeat(2, 1fr) !important; }
  .stat-val  { font-size: 14px !important; }
}

/* ── OPTIONS/SETTINGS PANEL MOBILE ── */
@media (max-width: 560px) {
  .tab-btns, .s-tabs { flex-wrap: wrap; }
  .tab-btn, .s-tab   { flex: none; font-size: 9px !important; padding: 8px 8px !important; white-space: nowrap; }
  .opt-sep, .ctrl-sep { display: none; }
}

/* ── TOOL GRID MOBILE (word-counter, text-repeater) ── */
@media (max-width: 768px) {
  .tool-grid { grid-template-columns: 1fr !important; }
}

/* ── DIFF INPUTS MOBILE ── */
@media (max-width: 600px) {
  .diff-inputs { grid-template-columns: 1fr !important; }
  .diff-controls { flex-wrap: wrap; gap: 8px; }
  .diff-stats { margin-left: 0; width: 100%; }
}

/* ── CASES GRID MOBILE ── */
@media (max-width: 600px) {
  .cases-grid { grid-template-columns: 1fr !important; }
}

/* ── SLUG OUTPUTS MOBILE ── */
@media (max-width: 480px) {
  .slug-label { min-width: 80px !important; font-size: 9px !important; }
  .slug-value { font-size: 12px; }
}

/* ── CONTROLS/SETTINGS CARD MOBILE ── */
@media (max-width: 560px) {
  .controls    { padding: 12px 14px !important; flex-direction: column; align-items: stretch; }
  .settings-card { padding: 14px !important; }
}