/* SmallResizer frontend (shadcn-classless component layer) */
/* ─── Design tokens ─── */
:root { --primary:#4f46e5; --primary-hover:#4338ca; --primary-soft:#eef2ff; --primary-ring:rgba(79, 70, 229, 0.25); --bg-page:#fafaff; --bg-card:#ffffff; --bg-muted:#f8fafc; --text:#0f172a; --text-muted:#4b5563; --text-light:#94a3b8; --border:#e2e8f0; --border-light:#f1f5f9; --font:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --text-base:1rem; --text-lead:1.0625rem; --leading-body:1.75; --leading-tight:1.25; --radius:10px; --radius-lg:14px; --radius-xl:18px; --shadow-sm:0 1px 2px rgba(15, 23, 42, 0.04); --shadow-md:0 4px 16px -2px rgba(15, 23, 42, 0.08); --shadow-lg:0 12px 40px -8px rgba(15, 23, 42, 0.12); --header-h:64px; --container:1260px; --sidebar-w:280px; --gap:28px; --bulk-preview-h:370px; --nav-overlay:rgba(15, 23, 42, 0.45); }
/* ─── Reset & base ─── */
*, *::before, *::after { box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }
body.site-body { margin:0; font-family:var(--font); font-size:var(--text-base); line-height:var(--leading-body); color:var(--text); background:var(--bg-page); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
a { color:var(--primary); text-decoration:none; }
a:hover { color:var(--primary-hover); }
a.site-brand,
a.site-brand:hover,
a.site-brand:visited { color:inherit; text-decoration:none; }
img, svg { display:block; max-width:100%; }
.hidden,
.is-hidden { display:none !important; }
.desktop-only { display:none !important; }
@media (min-width:1024px) {
.desktop-only { display:block !important; }
}
.flex-center { display:flex; justify-content:center; align-items:center; }
.text-center { text-align:center; }
/* ─── Site container ─── */
.site-container { width:100%; max-width:var(--container); margin:0 auto; padding:24px 20px 48px; }
@media (min-width:768px) {
.site-container {  padding: 20px 25px 35px; }
}
@media (min-width:1280px) {
.site-container {  padding: 20px 25px 35px;}
}
.site-container-bottom { padding-top:0; padding-bottom:32px; }
.site-main { min-height:calc(100vh - var(--header-h) - 200px); }
/* ─── Page layout: main + sidebar ─── */
.page-grid { display:flex; flex-direction:column; gap:24px; }
@media (min-width:1024px) {
.page-grid { flex-direction:row; align-items:flex-start; gap:var(--gap); }
.page-main { flex:1; min-width:0; }
.page-sidebar { width:var(--sidebar-w); flex-shrink:0; }
}
.page-stack > * + * { margin-top:20px; }
.page-stack-lg > * + * { margin-top:28px; }
/* ─── Header ─── */
.site-header { position:sticky; top:0; z-index:100; min-height:var(--header-h); background:var(--bg-card); border-bottom:1px solid var(--border); box-shadow:var(--shadow-sm); }
.site-header-inner { max-width:var(--container); margin:0 auto; padding:0 20px; }
@media (min-width:768px) {
.site-header-inner { padding:0 32px; }
}
@media (min-width:1280px) {
.site-header-inner { padding:0 40px; }
}
.site-header-row { display:flex; align-items:center; height:var(--header-h); gap:16px; }
.site-brand { display:flex; align-items:center; gap:10px; flex-shrink:0; text-decoration:none; color:inherit; }
.site-brand-icon { width:36px; height:36px; border-radius:10px; background:linear-gradient(135deg, #353535, #2b2a2d); color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.site-brand-icon--img { background:transparent; padding:0; overflow:hidden; }
.site-brand-icon--img img { display:block; width:100%; height:100%; object-fit:contain; border-radius:10px; }
.site-footer-brand .site-brand-icon--img { width:32px; height:32px; }
.site-brand-text { font-weight:800; font-size:22px; letter-spacing:-0.03em; white-space:nowrap; line-height:1.1; color:inherit; }
.site-brand .site-brand-part--primary { color:#fe005e; -webkit-text-fill-color:#fe005e; }
.site-brand .site-brand-part--accent { color:#7c3aed; -webkit-text-fill-color:#7c3aed; }
.site-brand:hover .site-brand-part--primary { color:#4338ca; -webkit-text-fill-color:#4338ca; }
.site-brand:hover .site-brand-part--accent { color:#6d28d9; -webkit-text-fill-color:#6d28d9; }
.site-nav { display:none; align-items:center; justify-content:center; gap:2px; flex:1; min-width:0; padding:0 12px; overflow:visible; }
@media (min-width:1024px) {
.site-nav { display:flex; }
}
.nav-link { padding:8px 14px; font-size:14px; font-weight:500; color:var(--text-muted); border-radius:8px; text-decoration:none; white-space:nowrap; transition:color 0.15s, background 0.15s; }
.nav-link:hover { color:var(--primary); background:var(--primary-soft); }
.nav-dropdown { position:relative; }
.nav-link-dropdown { display:inline-flex; align-items:center; gap:2px; }
.nav-dropdown-menu { position:absolute; top:100%; left:50%; transform:translateX(-50%); display:flex; gap:0; min-width:400px; max-width:520px; padding:10px; background:#ffffff; border:1px solid #e2e8f0; border-radius:14px; box-shadow:0 16px 40px rgba(15, 23, 42, 0.18), 0 4px 12px rgba(15, 23, 42, 0.08); opacity:0; visibility:hidden; pointer-events:none; transition:opacity 0.15s, visibility 0.15s; z-index:200; }
.nav-dropdown-menu::before { content:''; position:absolute; top:-10px; left:0; right:0; height:10px; }
.nav-dropdown-col { flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:2px; padding:2px 4px; }
.nav-dropdown-col + .nav-dropdown-col { border-left:1px solid #e2e8f0; }
.nav-dropdown-menu--single { min-width:220px; max-width:280px; }
.nav-dropdown-menu--single .nav-dropdown-col + .nav-dropdown-col { border-left:none; }
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu { opacity:1; visibility:visible; pointer-events:auto; }
.nav-dropdown-item { display:block; padding:10px 12px; font-size:13px; font-weight:600; color:#1e293b; border-radius:8px; text-decoration:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:background 0.15s, color 0.15s; }
.nav-dropdown-item:hover { background:#eef2ff; color:#4f46e5; }
.mobile-nav-group { display:flex; flex-direction:column; gap:4px; width:100%; }
.mobile-nav-submenu { display:flex; flex-direction:column; gap:4px; padding-left:4px; }
.mobile-nav-submenu.is-hidden { display:none !important; }
.mobile-nav-group.is-open .mobile-nav-chevron { transform:rotate(180deg); }
#nav-mobile .mobile-nav-link { display:block; padding:10px 14px; font-size:14px; font-weight:500; color:var(--text); background:var(--bg-muted); border-radius:8px; text-decoration:none; transition:background 0.15s, color 0.15s; }
#nav-mobile button.mobile-nav-link.mobile-nav-toggle { display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important; align-items:center !important; justify-content:flex-start !important; gap:8px; width:100%; border:none; cursor:pointer; text-align:left; white-space:nowrap; }
#nav-mobile .mobile-nav-toggle-text { display:inline !important; flex:0 1 auto; white-space:nowrap; line-height:1.2; }
#nav-mobile .mobile-nav-chevron { display:inline-flex !important; flex:0 0 auto; width:16px; height:16px; flex-shrink:0; transition:transform 0.25s ease; color:var(--text-muted); }
#nav-mobile .mobile-nav-link:hover { background:var(--primary-soft); color:var(--primary); }
.nav-link-my-files { padding:8px 14px; font-size:14px; font-weight:500; color:var(--text-muted); border-radius:8px; text-decoration:none; white-space:nowrap; transition:color 0.15s, background 0.15s; }
.nav-link-my-files:hover { color:var(--primary); background:var(--primary-soft); }
.site-header-actions { display:flex; align-items:center; gap:4px; flex-shrink:0; margin-left:auto; }
.sr-pwa-mount:empty,
.sr-pwa-mount[hidden] { display:none !important; }
.btn-pwa-install { display:none; align-items:center; gap:6px; height:40px; padding:0 10px; border:none; border-radius:8px; background:transparent; color:var(--text-muted); font-size:0.8125rem; font-weight:600; cursor:pointer; transition:background 0.15s, color 0.15s; white-space:nowrap; flex-shrink:0; }
.btn-pwa-install:hover { background:var(--bg-muted); color:var(--text); }
.pwa-install-dl-icon { display:inline-flex; width:18px; height:18px; flex-shrink:0; color:var(--primary); }
.pwa-install-label { font-size:0.8125rem; line-height:1; }
.download-pwa-banner { display:none; max-width:360px; margin:0 auto 28px; padding:12px; background:transparent; text-align:center; border:1px solid #e1e1e1; border-radius:10px; }
.download-pwa-info { margin:10px 0 0; font-size:0.8125rem; color:var(--text-muted); line-height:1.45; }
.btn-pwa-install-banner { display:none; align-items:center; justify-content:center; gap:8px; width:100%; min-height:44px; padding:10px 16px; border:1px solid var(--primary); border-radius:10px; background:var(--primary); color:#fff; font-size:0.9375rem; font-weight:600; cursor:pointer; transition:opacity 0.15s, transform 0.15s; }
.btn-pwa-install-banner .pwa-install-dl-icon { color:#fff; }
.btn-pwa-install-banner:hover { opacity:0.92; transform:translateY(-1px); }
@media (max-width:1023px) {
.btn-pwa-install,
.btn-pwa-install-banner,
.download-pwa-banner,
[data-pwa-install-wrap] { display:none !important; visibility:hidden !important; pointer-events:none !important; }
}
@media (min-width:1024px) {
.btn-pwa-install.desktop-only:not(.is-hidden) { display:inline-flex !important; }
.download-pwa-banner.desktop-only:not(.is-hidden) { display:block !important; }
.download-pwa-banner.desktop-only:not(.is-hidden) .btn-pwa-install-banner { display:inline-flex !important; }
}
.pwa-install-guide { position:fixed; inset:0; z-index:10100; display:flex; align-items:center; justify-content:center; padding:20px; }
.pwa-install-guide.is-hidden { display:none; }
.pwa-install-guide-backdrop { position:absolute; inset:0; background:rgba(15, 23, 42, 0.55); }
.pwa-install-guide-dialog { position:relative; width:min(400px, 100%); padding:24px 22px 20px; border-radius:16px; background:var(--bg-card); box-shadow:0 24px 48px rgba(15, 23, 42, 0.2); text-align:center; }
.pwa-install-guide-close { position:absolute; top:10px; right:12px; border:none; background:transparent; font-size:28px; line-height:1; color:var(--text-muted); cursor:pointer; }
.pwa-install-guide-icon { display:inline-flex; align-items:center; justify-content:center; width:52px; height:52px; margin:0 auto 12px; border-radius:14px; background:var(--primary-soft); color:var(--primary); }
.pwa-install-guide-title { margin:0 0 10px; font-size:1.125rem; font-weight:700; color:var(--text); }
.pwa-install-guide-text { margin:0 0 18px; font-size:0.9375rem; line-height:1.55; color:var(--text-muted); }
.pwa-install-guide-btn { width:100%; max-width:none; }
body.pwa-install-guide-open { overflow:hidden; }
@media (max-width:1023px) {
.site-header-row .site-brand { flex:1; min-width:0; }
.nav-mobile-links { flex-direction:column !important; flex-wrap:nowrap !important; gap:6px; }
.nav-mobile-links .mobile-nav-group { width:100%; }
}
#theme-toggle .icon-sun { color:#f59e0b; stroke-width:2.25; }
#theme-toggle .icon-moon { color:var(--text-muted); }
#theme-toggle:hover .icon-sun { color:#d97706; }
#theme-toggle:hover .icon-moon { color:var(--text); }
.btn-icon { width:40px; height:40px; display:flex; align-items:center; justify-content:center; border:none; border-radius:8px; background:transparent; color:var(--text-muted); cursor:pointer; transition:background 0.15s, color 0.15s; }
.btn-icon:hover { background:var(--bg-muted); color:var(--text); }
.nav-toggle { display:flex; }
@media (min-width:1024px) {
.nav-toggle { display:none; }
}
body.nav-mobile-open::before { content:''; position:fixed; inset:0; top:var(--header-h); z-index:90; background:var(--nav-overlay); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); pointer-events:none; animation:nav-overlay-in 0.2s ease; }
body.nav-mobile-open .site-header { background:rgba(255, 255, 255, 0.94); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow:0 8px 28px rgba(79, 70, 229, 0.12); border-bottom-color:rgba(99, 102, 241, 0.15); }
body.nav-mobile-open .nav-mobile { position:relative; z-index:101; }
@keyframes nav-overlay-in { from { opacity:0; } to { opacity:1; } }
.nav-mobile { padding:12px 0 16px; border-top:1px solid var(--border-light); }
.nav-mobile-links { display:flex; flex-direction:column; gap:6px; width:100%; }
.mobile-nav-link-child { margin-left:12px; font-size:13px; color:var(--text-muted); background:transparent; border-left:2px solid var(--border); border-radius:0 8px 8px 0; }
/* ─── Tool hero ─── */

.tool-hero-inner  { position:relative; padding:32px 36px; text-align:center; }

/* .tool-hero-inner { position:relative; padding:32px 36px; border-radius:var(--radius-xl); background:linear-gradient(135deg, #eef2ff 0%, #e0e7ff 28%, #f5f3ff 55%, #fdf4ff 82%, #ffffff 100%); border:1px solid rgba(99, 102, 241, 0.18); box-shadow:0 8px 32px -12px rgba(99, 102, 241, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.8); text-align:center; } */

.tool-hero { margin-bottom:0; scroll-margin-top:calc(var(--header-h) + 30px); }
.tool-hero-title { font-size:clamp(1.875rem, 3.2vw, 2.375rem); font-weight:700; letter-spacing:-0.035em; line-height:var(--leading-tight); color:#f60530; margin:0 0 12px; }
.tool-hero-desc { font-size:clamp(1rem, 1.6vw, 1.125rem); line-height:1.7; color:var(--text-muted); margin:0 auto; max-width:720px; }
.tool-hero--with-ad { margin-bottom:16px; }
.page-stack-lg > .tool-hero:not(.tool-hero--with-ad) + .card-tool,
.page-tool-main.page-stack-lg > .tool-hero + .card-tool { margin-top:10px !important; }
.page-tool-main.page-stack-lg > .tool-hero--with-ad + .card-tool { margin-top:16px !important; }
.page-tool-main.page-stack-lg > * + * { margin-top:28px; }
.page-tool-main.page-stack-lg > .tool-hero + .card-tool { margin-top:10px !important; }
.tool-hero-ad { margin-top:20px; display:flex; justify-content:center; }
@media (max-width:767px) {
.tool-hero-inner { padding:22px 20px; }
}
/* ─── Cards ─── */
.card-premium { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-md); }
.card-tool { padding:28px; transition:padding-top 0.25s ease; }
.card-tool:has(.bulk-tool-block) { padding:0; background:transparent; border:none; box-shadow:none; }
.card-tool.has-upload:has(.bulk-tool-block) { padding-top:0; }
.card-tool.has-upload { padding-top:40px; }
@media (min-width:768px) {
.card-tool { padding:36px 40px; }
.card-tool.has-upload { padding-top:40px; }
}
.card-section { padding:24px 28px; }
@media (min-width:768px) {
.card-section { padding:28px 32px; }
}
.section-title { font-size:clamp(1.0625rem, 1.8vw, 1.25rem); font-weight:600; letter-spacing:-0.01em; color:var(--text); margin:0 0 16px; }
.section-title--icon { display:flex; align-items:center; gap:8px; }
.related-tools { margin-top:8px; }
/* ─── Tool form area ─── */
.tool-form-wrap { width:100%; max-width:100%; }
.tool-stack > * + * { margin-top:20px; }
.tool-intro { color:var(--text-muted); font-size:var(--text-base); line-height:var(--leading-body); margin:0 0 24px; }
/* Tool page typography — match main article content */
.card-tool,
.tool-form-wrap,
.bulk-editor-settings { font-family:var(--font); font-size:var(--text-base); line-height:var(--leading-body); color:var(--text); }
@media (min-width:768px) {
.card-tool,
.tool-form-wrap,
.bulk-editor-settings { font-size:var(--text-lead); }
.card-tool .form-input,
.card-tool input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
.card-tool select,
.card-tool textarea,
.tool-form-wrap .form-input,
.tool-form-wrap input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
.tool-form-wrap select,
.tool-form-wrap textarea,
.bulk-editor-settings .form-input,
.bulk-editor-settings input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
.bulk-editor-settings select,
.bulk-editor-settings textarea { font-size:var(--text-lead); }
.card-tool .form-label,
.tool-form-wrap .form-label,
.bulk-settings-label { font-size:var(--text-lead); }
.card-tool .option-item,
.card-tool .upload-hint,
.card-tool .upload-title,
.card-tool .notice-info,
.card-tool .alert-error,
.card-tool .link-advanced,
.tool-form-wrap .option-item,
.tool-form-wrap .upload-hint,
.tool-form-wrap .upload-title,
.tool-form-wrap .notice-info,
.tool-form-wrap .alert-error,
.tool-form-wrap .link-advanced,
.bulk-editor-settings .option-item,
.bulk-editor-settings .upload-hint,
.bulk-editor-settings .notice-info,
.bulk-editor-settings .alert-error,
.bulk-editor-settings .link-advanced { font-size:var(--text-lead); }
}
.tool-actions { display:flex; justify-content:center; margin-top:24px; padding-top:8px; }
.btn-tool-submit { max-width:320px; width:100%; }
.form-field-narrow { max-width:320px; }
.tool-options-block { margin-top:4px; }
.tool-options-block + .tool-options-block { margin-top:20px; }
.preset-options { margin-bottom:4px; }
.tool-advanced { margin-bottom:20px; }
.link-advanced { display:inline-flex; align-items:center; gap:4px; font-family:var(--font); font-size:var(--text-base); font-weight:500; color:var(--primary); background:none; border:none; cursor:pointer; padding:0; margin-bottom:12px; }
.link-advanced:hover { color:var(--primary-hover); }
/* ─── Forms ─── */
.form-label { display:block; font-family:var(--font); font-size:var(--text-base); font-weight:600; line-height:var(--leading-tight); color:var(--text); margin-bottom:6px; }
.form-row { display:grid; gap:16px; }
.form-row-2 { grid-template-columns:1fr; }
@media (min-width:640px) {
.form-row-2 { grid-template-columns:1fr 1fr; }
}
.form-row-3 { grid-template-columns:1fr; }
@media (min-width:640px) {
.form-row-3 { grid-template-columns:repeat(3, 1fr); }
}
.form-hint { font-size:0.875rem; color:var(--text-light); margin-top:4px; line-height:var(--leading-body); }
.form-input,
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
select,
textarea { width:100%; padding:10px 12px; font-family:var(--font); font-size:var(--text-base); line-height:var(--leading-body); color:var(--text); background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); outline:none; transition:border-color 0.15s, box-shadow 0.15s; }
select#resizer-unit { padding:10px 8px; min-width:58px; }
input#resizer-width, input#resizer-height, input#compress-width, input#compress-height { font-weight:600; color:red; line-height: normal;}
.form-input:focus, input:focus, select:focus,
textarea:focus { border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-ring); }
.file-input { padding:0; cursor:pointer; font-size:14px; border:none; background:transparent; }
.file-picker { position:relative; display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--border); border-radius:var(--radius); background:var(--bg-muted); transition:border-color 0.15s, box-shadow 0.15s, background 0.15s; }
.file-picker:hover { border-color:#c7d2fe; background:var(--primary-soft); }
.file-picker:focus-within { border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-ring); }
.file-picker-icon { width:40px; height:40px; border-radius:8px; background:var(--bg-card); border:1px solid var(--border); color:var(--primary); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.file-picker-text { flex:1; min-width:0; font-size:14px; font-weight:500; color:var(--text-muted); }
.file-picker input[type="file"] { position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%; }
.file-picker--visible { min-height:52px; border:1px solid var(--border); border-radius:var(--radius); background:var(--bg-muted); }
.merger-file-input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; z-index:2; }
.merger-options { margin:0; }
.merger-files { margin-bottom:0; }
.merger-settings-row { margin-top:20px; }
.merger-settings-row .tool-options-block { margin-top:0; }
.merger-settings-row .tool-options-block + .tool-options-block { margin-top:0; }
.merger-format-field { max-width:none; }
.merger-result { margin-top:24px; padding-top:24px; border-top:1px solid var(--border-light); scroll-margin-top:calc(var(--header-h) + 16px); }
.merger-result-title { margin:0 0 16px; font-size:17px; font-weight:600; color:var(--text); }
.merger-preview-wrap { display:flex; align-items:center; justify-content:center; height:380px; min-height:380px; max-height:380px; border-radius:var(--radius-lg); border:1px solid var(--border); background:var(--bg-muted); padding:12px; overflow:hidden; }
.merger-preview-img { display:block; width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain; margin:0 auto; }
.merger-preview-meta { margin:12px 0 0; font-size:14px; color:var(--text-muted); }
.merger-result-actions { margin-top:16px; gap:12px; flex-wrap:wrap; }
.article-content,
.tool-article,
.my-files-content,
.site-container-bottom { content-visibility:auto; contain-intrinsic-size:auto 500px; }
.option-row { display:flex; flex-wrap:wrap; gap:20px; margin-top:6px; }
.option-row .option-item { flex:0 1 auto; min-width:auto; justify-content:flex-start; text-align:left; padding:0; }
.option-list { display:flex; flex-direction:column; gap:10px; max-width:100%; }
.option-item { display:flex; align-items:center; gap:10px; padding:0; font-family:var(--font); font-size:var(--text-base); font-weight:500; color:var(--text-muted); background:transparent; border:none; border-radius:0; cursor:pointer; transition:color 0.15s; user-select:none; }
.option-item:hover { color:var(--text); background:transparent; }
.option-item:has(input:checked) { color:var(--primary); background:transparent; box-shadow:none; }
.option-item input[type="radio"],
.option-item input[type="checkbox"] { appearance:none; -webkit-appearance:none; width:18px; height:18px; margin:0; border:2px solid #cbd5e1; background:var(--bg-card); flex-shrink:0; cursor:pointer; transition:border-color 0.15s, background 0.15s; }
.option-item input[type="radio"] { border-radius:50%; }
.option-item input[type="checkbox"] { border-radius:5px; }
.option-item input[type="radio"]:checked { border-color:var(--primary); background:var(--primary); box-shadow:inset 0 0 0 3px var(--bg-card); }
.option-item input[type="checkbox"]:checked { border-color:var(--primary); background:var(--primary); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3E%3Cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3E%3C/svg%3E"); background-size:12px; background-position:center; background-repeat:no-repeat; }
.select-wrap { position:relative; max-width:320px; }
.select-wrap .form-input,
.form-field-narrow select.form-input { max-width:320px; appearance:none; -webkit-appearance:none; padding-right:40px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; cursor:pointer; }
/* ─── Buttons ─── */
.btn-primary,
button[type="submit"].btn-primary { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:13px 28px; font-family:var(--font); font-size:15px; font-weight:600; letter-spacing:-0.01em; color:#fff; background:var(--primary); border:none; border-radius:var(--radius); cursor:pointer; text-decoration:none; box-shadow:0 2px 8px rgba(79, 70, 229, 0.35); transition:background 0.15s, transform 0.15s, box-shadow 0.15s; }
.btn-primary:hover:not(:disabled) { background:var(--primary-hover); box-shadow:0 4px 14px rgba(79, 70, 229, 0.4); transform:translateY(-1px); }
a.btn-primary,
a.btn-primary:hover,
a.btn-primary:visited { color:#fff; }
.btn-primary:active:not(:disabled) { transform:translateY(0); }
.btn-primary:disabled { opacity:0.55; cursor:not-allowed; transform:none; }
.btn-secondary { display:inline-flex; align-items:center; gap:6px; padding:10px 20px; font-size:14px; font-weight:500; color:var(--text-muted); background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); cursor:pointer; text-decoration:none; transition:border-color 0.15s, background 0.15s; }
.btn-secondary:hover { border-color:#cbd5e1; background:var(--bg-muted); color:var(--text); }
/* ─── Upload zone ─── */
.upload-zone { position:relative; border:2px dashed #c7d2fe; border-radius:var(--radius-xl); background:linear-gradient(180deg, var(--bg-muted) 0%, var(--bg-card) 100%); margin-bottom:24px; transition:border-color 0.2s, background 0.2s, padding 0.25s ease, box-shadow 0.2s; box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.6); }
.upload-zone:hover { border-color:#a5b4fc; box-shadow:var(--shadow-sm); }
.upload-zone.has-files {border-color:var(--border); background:var(--bg-card); box-shadow:none; }
.upload-zone.drag-over { border-color:#818cf8; background:var(--primary-soft); }
.upload-input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; z-index:2; }
.upload-zone-empty .upload-zone-inner { padding:48px 24px; text-align:center; pointer-events:none; }
.upload-zone.has-files .upload-zone-empty { display:none; }
.upload-zone-filled { display:block; }
.upload-zone:not(.has-files):not([data-layout="bulk"]) .upload-zone-filled { display:none !important; }
.upload-zone[data-layout="bulk"] .upload-zone-filled { display:flex !important; }
.upload-icon { width:72px; height:72px; margin:0 auto 16px; border-radius:18px; background:linear-gradient(135deg, var(--primary-soft) 0%, #fff 100%); border:1px solid #e0e7ff; color:var(--primary); display:flex; align-items:center; justify-content:center; box-shadow:0 4px 14px -4px rgba(79, 70, 229, 0.25); }
.upload-title { font-family:var(--font); font-weight:600; font-size:var(--text-base); line-height:var(--leading-tight); color:var(--text); margin:0; }
.upload-hint { font-family:var(--font); font-size:var(--text-base); line-height:var(--leading-body); color:var(--text-muted); margin:6px 0 0; }
.upload-preview-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:20px; margin-bottom:20px; }
.upload-preview-item { position:relative; display:flex; flex-direction:column; align-items:center; }
.upload-preview-frame { position:relative; width:140px; padding-top:12px; }
.upload-preview-toolbar { position:absolute; top:0; left:0; right:0; display:flex; align-items:center; justify-content:space-between; z-index:3; pointer-events:none; }
.upload-preview-toolbar button { pointer-events:auto; }
.upload-preview-thumb-wrap { position:relative; width:140px; height:140px; border-radius:12px; overflow:hidden; border:1px solid var(--border); background:#fff; box-shadow:0 4px 14px -6px rgba(15, 23, 42, 0.18); display:flex; align-items:center; justify-content:center; }
.upload-preview-crop { width:28px; height:28px; border:1px solid var(--primary); border-radius:8px; background:#fff; color:var(--primary); display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 2px 8px rgba(15, 23, 42, 0.12); transition:background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s; }
.upload-preview-crop:hover { background:var(--primary); border-color:var(--primary); color:#fff; transform:translateY(-1px); }
.upload-preview-remove { width:28px; height:28px; margin-left:auto; border-radius:8px; border:1px solid #fecaca; background:#fff; color:#dc2626; font-size:18px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 8px rgba(15, 23, 42, 0.12); transition:background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s; }
.upload-preview-thumb { width:100%; height:100%; max-width:100%; max-height:100%; object-fit:contain; object-position:center; display:block; }
.upload-preview-name { display:none; }
.upload-preview-remove:hover { background:#fef2f2; border-color:#f87171; color:#b91c1c; transform:translateY(-1px); }
.upload-add-more-btn { display:flex; align-items:center; justify-content:center; gap:8px; flex:1; min-width:0; max-width:320px; padding:10px 16px; font-family:var(--font); font-size:14px; font-weight:700; color:var(--primary); background:var(--primary-soft); border:2px dashed rgba(79, 70, 229, 0.35); border-radius:var(--radius-lg); cursor:pointer; transition:background 0.15s, border-color 0.15s, transform 0.15s, box-shadow 0.15s; }
.upload-add-more-btn:hover { background:#e0e7ff; border-color:var(--primary); transform:translateY(-1px); box-shadow:0 4px 12px -4px rgba(79, 70, 229, 0.35); }
.upload-add-more-btn:disabled { opacity:0.45; cursor:not-allowed; pointer-events:none; transform:none; box-shadow:none; }
.upload-add-more-btn:disabled:hover { background:var(--primary-soft); border-color:rgba(79, 70, 229, 0.35); }
.upload-zone-actions-wrap { max-width:400px; margin:0 auto; }
.upload-zone-actions { display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; }
.upload-max-files-note { margin:8px 0 0; font-size:11px; line-height:1.35; color:var(--text-muted); text-align:center; }
.upload-clear-btn { flex-shrink:0; padding:10px 18px; font-family:var(--font); font-size:13px; font-weight:600; color:var(--text-muted); background:var(--bg-muted); border:1px solid var(--border); border-radius:var(--radius); cursor:pointer; transition:background 0.15s, color 0.15s, border-color 0.15s; }
.upload-clear-btn:hover { color:#dc2626; border-color:#fecaca; background:#fef2f2; }
.upload-filename { display:none; }
.upload-zone-block { margin-bottom:16px; }
.upload-zone-alert { display:none; }
/* ─── Sidebar ─── */
.sidebar-sticky { display:flex; flex-direction:column; gap:16px; }
@media (min-width:1024px) {
.sidebar-sticky { position:sticky; top:calc(var(--header-h) + 20px); }
}
.sidebar-card { padding:20px 22px; }
.sidebar-heading { display:flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:var(--text); margin:0 0 14px; letter-spacing:-0.01em; }
.sidebar-heading svg { color:var(--primary); flex-shrink:0; }
.sidebar-list { list-style:none; padding:0; margin:0; }
.sidebar-link { display:block; padding:9px 10px; margin:0 -10px; font-size:14px; font-weight:500; color:var(--text-muted); border-radius:8px; text-decoration:none; transition:color 0.15s, background 0.15s; }
.sidebar-link:hover { color:var(--primary); background:var(--primary-soft); }
.tag-pill-row { display:flex; flex-wrap:wrap; gap:8px; }
.tag-pill { padding:6px 12px; font-size:13px; font-weight:500; color:var(--text-muted); background:var(--bg-muted); border-radius:999px; text-decoration:none; transition:background 0.15s, color 0.15s; }
.tag-pill:hover { background:var(--primary-soft); color:var(--primary); }
/* ─── Tool cards grid ─── */
.tool-card-grid { display:grid; grid-template-columns:1fr; gap:10px; }
@media (min-width:640px) {
.tool-card-grid { grid-template-columns:1fr 1fr; }
}
@media (min-width:1024px) {
.tool-card-grid { grid-template-columns:1fr 1fr; }
}
.tool-card { display:flex; align-items:flex-start; gap:12px; padding:14px 16px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); text-decoration:none; color:inherit; transition:border-color 0.15s, box-shadow 0.15s, transform 0.15s; }
.tool-card:hover { border-color:#a5b4fc; box-shadow:var(--shadow-sm); transform:translateY(-1px); }
.tool-card-featured { border-color:#c7d2fe; background:linear-gradient(135deg, var(--bg-card) 0%, var(--primary-soft) 100%); }
.tool-card-icon { width:40px; height:40px; border-radius:8px; background:var(--primary-soft); color:var(--primary); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.tool-card-icon-accent { background:var(--primary); color:#fff; }
.tool-card-title { font-weight:600; font-size:15px; color:var(--text); transition:color 0.15s; }
.tool-card:hover .tool-card-title { color:var(--primary); }
.tool-card-meta { font-size:12px; color:var(--text-light); margin:2px 0 0; }
/* ─── Tabs ─── */
.home-engine-tabs, .tool-tabs { display:flex; flex-wrap:wrap; gap:8px;}
.home-engine-tabs { margin:15px !important;}
.tool-tabs { margin:24px; padding-bottom:16px; border-bottom:1px solid var(--border); }
.home-engine-tabs--center { justify-content:center; }
.home-engine-tab,
.tool-tabs .tool-tab { padding:9px 18px; font-family:var(--font); font-size:var(--text-base); font-weight:600; color:var(--text-muted); background:var(--bg-muted); border:1px solid transparent; border-radius:999px; cursor:pointer; transition:all 0.15s; }
.home-engine-tab:hover,
.tool-tabs .tool-tab:hover { background:var(--border); color:var(--text); }
.home-engine-tab.active,
.tool-tabs .tool-tab.active { background:var(--primary); color:#fff; box-shadow:0 2px 8px rgba(79, 70, 229, 0.35); }
/* ─── Notices & alerts ─── */
.notice-info { font-family:var(--font); font-size:var(--text-base); line-height:var(--leading-body); color:var(--text-muted); background:var(--primary-soft); border:1px solid #c7d2fe; border-radius:var(--radius); padding:12px 14px; margin-bottom:16px; }
.alert-error { padding:12px 14px; border-radius:var(--radius); background:#fef2f2; color:#b91c1c; font-family:var(--font); font-size:var(--text-base); line-height:var(--leading-body); border:1px solid #fecaca; }
.tool-processing { margin-top:28px; text-align:center; }
.tool-error { margin-top:16px; margin-bottom:4px; }
.processing-text { margin-top:12px; color:var(--text-muted); font-weight:500; }
.skeleton-circle { width:56px; height:56px; border-radius:50%; margin:0 auto; }
.skeleton-loader { background:linear-gradient(90deg, var(--border), var(--bg-muted), var(--border)); animation:pulse 1.5s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity:1; }
50% { opacity:0.5; }
}
.icon-spin { animation:spin 1s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); }
}
/* ─── Article / prose ─── */
.article-block { margin-top:8px; }
.prose,
.prose-slate,
.article-main,
.cms-page-content .prose {
    font-size:var(--text-base);
    line-height:var(--leading-body);
    color:var(--text-muted);
}
.prose :where(h1, h2, h3, h4, h5, h6),
.prose-slate :where(h1, h2, h3, h4, h5, h6) {
    color:var(--text);
    font-weight:700;
    letter-spacing:-0.02em;
    line-height:var(--leading-tight);
}
.prose :where(h1),
.prose-slate :where(h1) {
    font-size:clamp(1.875rem, 3vw, 2.125rem);
    margin:0 0 1rem;
}
.prose :where(h2),
.prose-slate :where(h2) {
    font-size:clamp(1.5rem, 2.4vw, 1.8rem);
    margin:2rem 0 0.875rem;
}
.prose :where(h3),
.prose-slate :where(h3) {
    font-size:clamp(1.25rem, 2vw, 1.5rem);
    font-weight:600;
    margin:1.5rem 0 0.75rem;
}
.prose :where(h4),
.prose-slate :where(h4) {
    font-size:1.25rem;
    font-weight:600;
    margin:1.25rem 0 0.625rem;
}
.prose :where(h5),
.prose-slate :where(h5) {
    font-size:1.125rem;
    font-weight:600;
    margin:1rem 0 0.5rem;
}
.prose :where(h6),
.prose-slate :where(h6) {
    font-size:1rem;
    font-weight:600;
    margin:1rem 0 0.5rem;
    color:var(--text-muted);
    text-transform:uppercase;
    letter-spacing:0.04em;
}
.prose :where(p),
.prose-slate :where(p) {
    font-size:var(--text-base);
    color:var(--text-muted);
    line-height:var(--leading-body);
    margin:0 0 1rem;
}
@media (min-width:768px) {
.prose :where(p),
.prose-slate :where(p) {
    font-size:var(--text-lead);
}
}
.prose :where(ul, ol),
.prose-slate :where(ul, ol) {
    margin:0 0 1.25rem;
    padding-left:1.5rem;
    font-size:var(--text-base);
    color:var(--text-muted);
    line-height:var(--leading-body);
}
@media (min-width:768px) {
.prose :where(ul, ol),
.prose-slate :where(ul, ol) {
    font-size:var(--text-lead);
}
}
.prose :where(li),
.prose-slate :where(li) {
    margin-bottom:0.5rem;
}
.prose :where(ol),
.prose-slate :where(ol) { list-style:decimal; }
.prose :where(ul),
.prose-slate :where(ul) { list-style:disc; }
.prose :where(a),
.prose-slate :where(a) { color:var(--primary); text-decoration:underline; text-underline-offset:2px; }
.prose :where(a:hover),
.prose-slate :where(a:hover) { color:var(--primary-hover); }
.prose :where(strong, b),
.prose-slate :where(strong, b) { color:var(--text); font-weight:700; }
.prose :where(blockquote),
.prose-slate :where(blockquote) {
    margin:1.25rem 0;
    padding:0.875rem 1rem;
    border-left:4px solid var(--primary);
    background:var(--primary-soft);
    border-radius:0 var(--radius) var(--radius) 0;
    font-size:var(--text-lead);
    color:var(--text);
}
.article-faq > h2:first-child { margin-top:0; }
.faq-item + .faq-item { margin-top:1.25rem; }
.faq-section :where(h1, h2, h3, h4, h5, h6):first-child { margin-top:0; }
/* ─── Footer ─── */
.site-footer { margin-top:0; background:var(--bg-card); border-top:1px solid var(--border); }
.site-footer-inner { max-width:var(--container); margin:0 auto; padding:28px 20px 20px; }
@media (min-width:768px) {
.site-footer-inner { padding:32px 32px 24px; }
}
.site-footer-grid { display:grid; grid-template-columns:1fr; gap:20px; }
.site-footer-nav-row { display:grid; grid-template-columns:1fr 1fr; gap:20px 24px; }
@media (min-width:768px) {
.site-footer-grid { grid-template-columns:2fr 1fr 1fr; gap:24px; }
.site-footer-nav-row { display:contents; }
}
.site-footer-desc { font-size:13px; color:var(--text-muted); line-height:1.55; max-width:360px; margin-top:8px; }
.site-footer-heading { font-weight:600; font-size:13px; color:var(--text); margin-bottom:8px; }
.site-footer-links { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--text-muted); }
.footer-link { color:var(--text-muted); text-decoration:none; transition:color 0.15s; }
.footer-link:hover { color:var(--primary); }
.site-footer-bottom { margin-top:24px; padding-top:16px; border-top:1px solid var(--border-light); display:flex; flex-direction:column; gap:8px; align-items:center; text-align:center; }
.site-footer-copy { font-size:13px; color:var(--text-light); margin:0; }
.site-footer-quote { font-size:14px; color:var(--text-muted); margin:0; max-width:520px; line-height:1.5; }
.site-footer-credit { font-style:italic; font-weight:600; color:var(--text); }
@media (min-width:640px) {
.site-footer-bottom { flex-direction:row; justify-content:space-between; align-items:center; text-align:left; }
.site-footer-quote { text-align:right; }
}
/* ─── Download page (premium layout) ─── */
.site-main--download { padding-top:0; }
.download-layout { display:grid; grid-template-columns:1fr; gap:0; max-width:1280px; margin:0 auto; padding:24px 16px 48px; }
@media (min-width:1100px) {
.download-layout { grid-template-columns:160px minmax(0, 1fr) 160px; gap:24px; padding:32px 24px 56px; }
}
.download-ad-col { display:none; }
@media (min-width:1100px) {
.download-ad-col { display:block; position:sticky; top:calc(var(--header-h) + 20px); align-self:start; max-height:calc(100vh - var(--header-h) - 40px); }
.download-ad-col .ad-slot { margin:0; }
}
.download-ad-col--left .ad-slot,
.download-ad-col--right .ad-slot { background:none; border:none; padding:0; box-shadow:none; }
.download-center { min-width:0; }
.download-page { max-width:720px; margin:0 auto; text-align:center; }
.download-success-badge { width:64px; height:64px; margin:0 auto 20px; border-radius:50%; background:linear-gradient(135deg, #34d399, #059669); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 28px -6px rgba(5, 150, 105, 0.45); }
.download-title { font-size:clamp(1.5rem, 2.5vw, 1.875rem); font-weight:700; letter-spacing:-0.03em; margin:0 0 10px; color:var(--text); }
.download-subtitle { color:var(--text-muted); font-size:15px; line-height:1.6; margin:0 auto 28px; max-width:520px; }
.download-ad-center { margin:0 auto 28px; max-width:100%; }
.download-ad-center .ad-slot { margin:0; }
.download-file-row--has-thumb .download-file-details { flex:1; min-width:0; }
.download-files-list { display:flex; flex-direction:column; gap:12px; margin-bottom:20px; text-align:left; }
.download-file-row:hover { box-shadow:var(--shadow-lg); }
.download-file-row { display:flex; flex-direction:column; gap:14px; padding:18px 20px; transition:box-shadow 0.2s, transform 0.2s; }
.download-file-row.download-file-row--has-thumb { flex-direction:row; flex-wrap:wrap; align-items:flex-start; gap:12px 14px; }
.download-file-row.download-file-row--has-thumb .download-file-details { flex:1; min-width:0; }
.download-file-row.download-file-row--has-thumb .btn-download-single { flex:1 1 100%; width:calc(100% - 24px); max-width:none; min-width:0; margin:2px 12px 0; justify-content:center; }
.download-file-row:not(.download-file-row--has-thumb) { flex-direction:column; align-items:stretch; gap:12px; }
.download-file-row:not(.download-file-row--has-thumb) .btn-download-single { align-self:center; width:calc(100% - 24px); max-width:320px; justify-content:center; }
@media (min-width:768px) {
.download-file-row.download-file-row--has-thumb { flex-wrap:nowrap; align-items:center; gap:16px; }
.download-file-row.download-file-row--has-thumb .btn-download-single { flex:0 0 auto; width:auto; min-width:140px; margin:0 0 0 auto; }
.download-file-row:not(.download-file-row--has-thumb) { flex-direction:row; align-items:center; justify-content:space-between; }
.download-file-row:not(.download-file-row--has-thumb) .btn-download-single { align-self:auto; width:auto; max-width:none; }
}
.download-file-thumb-wrap { position:relative; flex-shrink:0; width:72px; height:72px; padding:0; border-radius:var(--radius); overflow:hidden; border:1px solid var(--border); background:var(--bg-muted); cursor:pointer; display:flex; align-items:center; justify-content:center; }
.download-file-preview-trigger { background:none; font:inherit; text-align:left; }
.download-file-name-btn { display:block; width:100%; padding:0; margin:0 0 6px; border:none; background:none; font-weight:600; font-size:15px; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:pointer; text-align:left; }
.download-file-name-btn:hover { color:var(--primary); }
.download-file-thumb-wrap:hover { border-color:#c7d2fe; box-shadow:0 0 0 1px rgba(99, 102, 241, 0.12); }
.download-file-thumb-overlay,
.preview-thumb-overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(15, 23, 42, 0.5); color:#fff; opacity:0; transition:opacity 0.15s; pointer-events:none; }
.download-file-thumb-wrap:hover .preview-thumb-overlay,
.my-files-card-thumb:hover .preview-thumb-overlay { opacity:1; }
.download-files-list.is-loading .download-file-thumb { opacity:0.35; }
.download-preview-modal .tool-modal-dialog { width:min(1100px, calc(100vw - 24px)); max-height:96vh; }
.download-preview-header { display:flex; align-items:center; gap:12px; padding:12px 16px; }
.download-preview-title { font-size:16px; font-weight:700; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; flex:1; }
.download-preview-body { padding:0 16px 16px; flex:1; min-height:0; display:flex; flex-direction:column; }
.download-preview-layout { display:grid; grid-template-columns:minmax(0, 1fr) 148px; gap:12px; align-items:stretch; flex:1; min-height:0; }
.download-preview-stage { position:relative; display:flex; align-items:center; justify-content:center; width:100%; min-height:min(72vh, 560px); height:min(82vh, 760px); max-height:calc(95vh - 120px); padding:0; border:1px solid var(--border); border-radius:12px; background:linear-gradient(180deg, #f8fafc 0%, #fff 100%); overflow:hidden; touch-action:none; isolation:isolate; }
.download-preview-viewport { display:flex; align-items:center; justify-content:center; width:100%; height:100%; overflow:hidden; padding:12px; box-sizing:border-box; }
.download-preview-zoom-layer { display:flex; align-items:center; justify-content:center; max-width:100%; max-height:100%; transform-origin:center center; will-change:transform; line-height:0; }
.download-preview-image { display:block; max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; object-position:center center; border-radius:4px; user-select:none; -webkit-user-drag:none; pointer-events:none; }
.download-preview-zoom-controls { position:absolute; right:10px; bottom:10px; z-index:10; display:inline-flex; align-items:center; gap:2px; padding:4px; border-radius:8px; background:#fff; border:1px solid var(--border); box-shadow:0 2px 10px rgba(15, 23, 42, 0.14); pointer-events:auto; }
.download-preview-zoom-btn { width:24px; height:24px; padding:0; border:none; border-radius:5px; background:transparent; color:#475569; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:background 0.15s, color 0.15s; }
.download-preview-zoom-btn:hover:not(:disabled) { background:#f1f5f9; color:var(--primary); }
.download-preview-zoom-btn:disabled { opacity:0.35; cursor:not-allowed; }
.download-preview-zoom-btn svg { display:block; }
.download-preview-side { display:flex; flex-direction:column; min-width:0; }
.download-preview-side-label { margin:0 0 8px; font-size:11px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.05em; }
.download-preview-meta { list-style:none; margin:0; padding:0; border:1px solid var(--border); border-radius:10px; overflow:hidden; background:#fff; }
.download-preview-meta li { display:flex; flex-direction:column; gap:2px; padding:9px 10px; border-bottom:1px solid var(--border-light); }
.download-preview-meta li:last-child { border-bottom:none; }
.download-preview-meta-label { font-size:10px; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.04em; line-height:1.2; }
.download-preview-meta-value { font-size:12px; font-weight:700; color:var(--text); line-height:1.35; word-break:break-word; }
.download-preview-download-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%; margin-top:12px; padding:10px 14px; border:none; border-radius:10px; background:var(--primary); color:#fff; font-size:0.88rem; font-weight:600; cursor:pointer; transition:background 0.15s, transform 0.15s; box-shadow:0 4px 12px -4px rgba(79, 70, 229, 0.45); }
.download-preview-download-btn:hover { background:var(--primary-hover); transform:translateY(-1px); }
.download-preview-modal .tool-modal-footer { display:none; }
.download-file-thumb { width:100%; height:100%; max-width:100%; max-height:100%; object-fit:contain; object-position:center; display:block; }
.download-file-name { font-weight:600; font-size:15px; color:var(--text); margin:0 0 6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.download-file-meta-list { list-style:none; margin:0; padding:0; font-size:13px; color:var(--text-muted); display:flex; flex-wrap:wrap; gap:8px 16px; }
.btn-download-single,
.btn-download-all { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-width:140px; padding:12px 20px; font-weight:600; border-radius:var(--radius); color:#fff; transition:transform 0.15s, box-shadow 0.15s, opacity 0.15s; }
.btn-download-single:hover,
.btn-download-all:hover { color:#fff; transform:translateY(-1px); box-shadow:0 8px 20px -6px rgba(79, 70, 229, 0.45); }
.btn-download-single.is-loading,
.btn-download-all.is-loading { opacity:0.75; pointer-events:none; }
.download-bulk-actions { margin-bottom:24px; }
.btn-download-all { width:100%; max-width:360px; }
.download-actions-row { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-bottom:36px; }
.btn-my-files { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:14px 28px; font-weight:700; font-size:15px; border:none; border-radius:var(--radius); background:linear-gradient(135deg, #22c55e, #059669); color:#fff; cursor:pointer; box-shadow:0 8px 22px -6px rgba(5, 150, 105, 0.55); transition:transform 0.15s, box-shadow 0.15s, filter 0.15s, opacity 0.15s; }
.btn-delete-output { display:inline-flex; align-items:center; justify-content:center; padding:12px 22px; font-weight:600; font-size:14px; border:1px solid #fecaca; border-radius:var(--radius); background:#fef2f2; color:#b91c1c; cursor:pointer; transition:background 0.15s, border-color 0.15s, transform 0.15s; }
.btn-delete-output:hover { background:#fee2e2; border-color:#fca5a5; transform:translateY(-1px); }
.btn-delete-output:disabled { opacity:0.7; cursor:wait; }
/* Full-screen processing overlay */
.sr-processing-overlay { position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; background:rgba(15, 23, 42, 0.55); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.sr-processing-overlay.is-hidden { display:none; }
body.sr-processing-active { overflow:hidden; }
.sr-processing-card { display:flex; flex-direction:column; align-items:center; gap:18px; padding:40px 48px 36px; border-radius:20px; background:var(--bg-card); border:1px solid var(--border); box-shadow:0 24px 64px -12px rgba(0, 0, 0, 0.35); min-width:240px; }
.sr-processing-brand { margin:0; font-size:clamp(1.35rem, 3vw, 1.65rem); font-weight:800; letter-spacing:-0.03em; line-height:1.15; text-align:center; }
.sr-processing-brand-part--primary { color:#fe005e; }
.sr-processing-brand-part--accent { color:#7c3aed; }
.sr-processing-ring { width:72px; height:72px; border-radius:50%; border:4px solid var(--border); border-top-color:var(--primary, #6366f1); animation:sr-spin 0.85s linear infinite; }
.sr-processing-text { font-size:17px; font-weight:600; color:var(--text); letter-spacing:-0.01em; margin:0; }
@keyframes sr-spin { to { transform:rotate(360deg); }
}
.btn-my-files:disabled { opacity:0.75; cursor:wait; }
.btn-my-files:hover { color:#fff; transform:translateY(-1px); box-shadow:0 10px 24px -6px rgba(5, 150, 105, 0.5); filter:brightness(1.03); }
.btn-my-files.is-added { background:linear-gradient(135deg, #10b981, #047857); }
.btn-back-tool { display:inline-flex; align-items:center; padding:10px 20px; }
.download-more-tools { text-align:left; padding-top:8px; border-top:1px solid var(--border); }
.download-more-title { font-size:18px; font-weight:700; margin:0 0 6px; color:var(--text); }
.download-more-desc { font-size:14px; color:var(--text-muted); margin:0 0 20px; }
.download-tools-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:12px; }
.download-tool-card { display:flex; align-items:center; gap:10px; padding:14px 16px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); text-decoration:none; color:var(--text); transition:border-color 0.15s, background 0.15s, transform 0.15s, box-shadow 0.15s; }
.download-tool-card:hover { border-color:#c7d2fe; background:var(--primary-soft); color:var(--primary); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.download-tool-icon { width:36px; height:36px; border-radius:8px; background:var(--bg-muted); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--primary); }
.download-tool-name { font-size:13px; font-weight:600; line-height:1.3; }
@media (max-width:1099px) {
    .download-ad-col--left,
.download-ad-col--right { display:block; order:10; margin-top:24px; }
.download-layout { display:flex; flex-direction:column; }
.download-center { order:1; }
}
/* ─── Ad slots ─── */
.ad-slot { display:flex; justify-content:center; margin:16px 0; }
.ad-slot-title { margin:16px 0 0; }
/* ─── Toast ─── */
.toast-root { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); z-index:200; display:flex; flex-direction:column; gap:8px; width:min(480px, calc(100vw - 32px)); pointer-events:none; }
.toast { display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:12px; box-shadow:0 12px 32px rgba(15, 23, 42, 0.18); font-size:14px; font-weight:500; color:#fff; animation:toast-slide-up 0.3s ease-out; pointer-events:auto; }
.toast-text { flex:1; min-width:0; line-height:1.45; }
.toast-close { flex-shrink:0; width:24px; height:24px; border:none; border-radius:6px; background:rgba(255, 255, 255, 0.18); color:inherit; font-size:18px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background 0.15s; }
.toast-close:hover { background:rgba(255, 255, 255, 0.28); }
.toast-success { background:#042c20; }
.toast-error { background:#dc2626; }
.toast-tip { background:#059669; padding:8px 16px; font-size:13px; font-weight:500; justify-content:center; box-shadow:0 8px 24px rgba(5, 150, 105, 0.35); }
@keyframes toast-slide-up { from { transform:translateY(12px); opacity:0; } to { transform:translateY(0); opacity:1; } }
@keyframes slide-in { from { transform:translateX(100%); opacity:0; } to { transform:translateX(0); opacity:1; } }
/* ─── Ads ─── */
.tool-header--with-ad { margin-bottom:16px; }
.ad-slot-title-wrap { margin-top:16px; display:flex; justify-content:flex-start; }
@media (max-width:1023px) {
    .ad-slot-title ins,
.ad-slot-title iframe { max-width:100% !important; width:100% !important; }
.page-sidebar .sidebar-sticky { display:grid; gap:16px; }
    @media (min-width:640px) {
.page-sidebar .sidebar-sticky { grid-template-columns:1fr 1fr; }
.page-sidebar .sidebar-sticky > .sidebar-card:only-child { grid-column:1 / -1; }
    }
}
@media (max-width:380px) {
.site-brand-text { font-size:18px; max-width:none; }
}
/* ─── My Files ─── */
.nav-link-my-files { display:none; align-items:center; padding:8px 14px; font-size:14px; font-weight:600; color:var(--primary); background:var(--primary-soft); border-radius:8px; text-decoration:none; white-space:nowrap; transition:background 0.15s, color 0.15s; }
.nav-link-my-files:hover { color:#fff; background:var(--primary); }
@media (min-width:1024px) {
.nav-link-my-files { display:inline-flex; }
}
.mobile-nav-link-files { font-weight:600; color:var(--primary); }
.my-files-page { padding-bottom:32px; }
.my-files-header { margin-bottom:16px; }
.my-files-header-row { display:flex; flex-wrap:wrap; gap:12px 16px; align-items:flex-start; justify-content:space-between; margin-bottom:12px; }
.my-files-intro { flex:1 1 220px; min-width:min(100%, 220px); }
.my-files-title { font-size:clamp(1.5rem, 2.5vw, 1.85rem); font-weight:800; margin:0 0 4px; letter-spacing:-0.02em; color:var(--text); line-height:1.2; }
.my-files-subtitle { color:var(--text-muted); font-size:0.88rem; margin:0 0 10px; line-height:1.4; }
.my-files-usage { display:flex; align-items:center; gap:10px; padding:10px 12px; background:var(--bg-card); border-radius:12px; border:1px solid var(--border); box-shadow:var(--shadow-sm); width:min(100%, 300px); flex-shrink:0; }
.my-files-usage-body { display:flex; align-items:flex-start; gap:8px; flex:1; min-width:0; }
.my-files-usage-lock { flex-shrink:0; color:var(--text-muted); margin-top:1px; }
.my-files-usage-text { display:flex; flex-direction:column; gap:1px; min-width:0; }
.my-files-usage-text strong { font-size:0.82rem; font-weight:700; color:var(--text); line-height:1.3; }
.my-files-usage-text span { font-size:0.74rem; color:var(--text-muted); line-height:1.3; }
.my-files-usage-ring { position:relative; flex-shrink:0; width:42px; height:42px; }
.my-files-usage-ring-label { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:0.66rem; font-weight:700; color:var(--primary); }
.my-files-tabs { display:flex; flex-wrap:wrap; gap:6px; margin:0; }
.my-files-tabs--desktop { display:flex; }
.my-files-tabs--mobile { display:none; width:100%; margin-top:8px; padding:9px 12px; border:1px solid var(--border); border-radius:10px; background:var(--bg-card); color:var(--text); font-size:0.88rem; font-weight:600; }
@media (max-width:767px) {
.my-files-header-row { flex-direction:column; }
.my-files-usage { width:100%; }
.my-files-tabs--desktop { display:none; }
.my-files-tabs--mobile { display:block; }
.my-files-intro { flex:1 1 102px;}
}
.my-files-tab { display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border:1px solid var(--border); background:var(--bg-card); color:var(--text-muted); font-size:0.84rem; font-weight:600; cursor:pointer; border-radius:999px; transition:background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s; }
.my-files-tab:hover { color:var(--text); border-color:#c7d2fe; }
.my-files-tab.is-active { color:#fff; background:var(--primary); border-color:var(--primary); box-shadow:0 4px 14px -4px rgba(79, 70, 229, 0.55); }
.my-files-tab.is-active svg { stroke:#fff; }
.my-files-panel { background:var(--bg-card); border:1px solid var(--border); border-radius:14px; padding:12px 14px; box-shadow:var(--shadow-sm); margin-bottom:16px; }
.my-files-toolbar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding-bottom:10px; border-bottom:1px solid var(--border-light); }
.my-files-search-wrap { position:relative; width:100%; max-width:320px; }
.my-files-search { width:100%; padding:10px 14px; border:1px solid var(--border); border-radius:10px; background:var(--bg-muted); color:var(--text); font-size:0.9rem; }
.my-files-search:focus { outline:none; border-color:#a5b4fc; box-shadow:0 0 0 3px var(--primary-ring); }
.my-files-toolbar-actions { display:flex; flex-wrap:wrap; gap:8px; width:100%; }
.my-files-select { padding:10px 12px; border:1px solid var(--border); border-radius:10px; background:var(--bg-muted); color:var(--text); font-size:0.88rem; min-width:0; flex:1; }
@media (min-width:768px) {
.my-files-toolbar { flex-wrap:nowrap; }
.my-files-search-wrap { flex:0 0 auto; width:min(320px, 100%); }
.my-files-toolbar-actions { flex:1; width:auto; flex-wrap:nowrap; justify-content:flex-end; }
.my-files-select { flex:0 1 auto; min-width:130px; }
}
.my-files-select--retention { width:100%; margin-top:8px; }
.my-files-bulk { display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; padding-top:12px; }
.my-files-bulk-count { font-weight:600; font-size:0.88rem; color:var(--text-muted); min-width:88px; }
.my-files-bulk-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; flex:1; }
.my-files-bulk-btn { display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border:1px solid var(--border); border-radius:8px; background:var(--bg-card); font-size:0.85rem; font-weight:600; cursor:pointer; transition:background 0.15s, border-color 0.15s, color 0.15s; }
.my-files-bulk-btn:disabled { opacity:0.45; cursor:not-allowed; }
.my-files-bulk-btn--download { color:var(--primary); border-color:#c7d2fe; background:#f5f7ff; }
.my-files-bulk-btn--download:not(:disabled):hover { background:#eef2ff; }
.my-files-bulk-btn--delete { color:#dc2626; border-color:#fecaca; background:#fef2f2; }
.my-files-bulk-btn--delete:not(:disabled):hover { background:#fee2e2; }
.my-files-bulk-btn--clear { color:var(--text-muted); }
.my-files-bulk-btn--clear:not(:disabled):hover { background:var(--bg-muted); }
.my-files-alert { padding:12px 16px; margin-bottom:16px; border-radius:var(--radius); background:rgba(220, 38, 38, 0.08); color:#dc2626; font-size:0.9rem; }
.my-files-skeleton-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:16px; }
.my-files-skeleton-card { height:300px; border-radius:14px; background:linear-gradient(90deg, var(--bg-muted) 25%, var(--border) 50%, var(--bg-muted) 75%); background-size:200% 100%; animation:my-files-shimmer 1.2s infinite; }
@keyframes my-files-shimmer { 0% { background-position:200% 0; }
100% { background-position:-200% 0; }
}
.my-files-empty { text-align:center; padding:48px 24px; background:var(--bg-card); border:1px solid var(--border); border-radius:14px; }
.my-files-empty-illus { color:var(--text-muted); margin-bottom:16px; opacity:0.6; }
.my-files-empty h2 { margin:0 0 8px; font-size:1.25rem; }
.my-files-empty p { color:var(--text-muted); margin:0 0 20px; }
.my-files-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:16px; }
.my-files-card { position:relative; display:flex; flex-direction:column; background:var(--bg-card); border:1px solid var(--border); border-radius:14px; overflow:hidden; box-shadow:var(--shadow-sm); transition:box-shadow 0.2s, transform 0.2s, border-color 0.2s; }
.my-files-card:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
.my-files-card.is-selected { border-color:var(--primary); box-shadow:0 0 0 2px rgba(79, 70, 229, 0.2); }
.my-files-card.is-selected:hover { border-color:var(--primary-hover); box-shadow:0 0 0 2px rgba(79, 70, 229, 0.28), var(--shadow-md); }
.my-files-section { margin-bottom:28px; }
.my-files-section-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.my-files-section-title { margin:0; font-size:0.8rem; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color:var(--text-muted); }
.my-files-select-all { display:inline-flex; align-items:center; gap:8px; font-size:0.82rem; font-weight:600; color:var(--text-muted); cursor:pointer; user-select:none; white-space:nowrap; }
.my-files-select-all:hover { color:var(--text); }
.my-files-select-all-check { width:16px; height:16px; margin:0; cursor:pointer; accent-color:var(--primary); }
.my-files-card-check { position:absolute; top:10px; left:10px; z-index:3; width:18px; height:18px; cursor:pointer; accent-color:var(--primary); }
.my-files-card-thumb { position:relative; aspect-ratio:16 / 10; max-height:132px; padding:0; border:none; background:var(--bg-muted); overflow:hidden; cursor:pointer; text-align:left; width:100%; display:flex; align-items:center; justify-content:center; }
.my-files-card-img { width:100%; height:100%; max-width:100%; max-height:100%; object-fit:contain; object-position:center; display:block; }
.my-files-card-format { position:absolute; bottom:8px; right:8px; z-index:2; padding:4px 8px; border-radius:999px; background:rgba(15, 23, 42, 0.72); color:#fff; font-size:0.68rem; font-weight:700; letter-spacing:0.03em; line-height:1; }
.my-files-card-body { padding:14px; display:flex; flex-direction:column; gap:6px; flex:1; }
.my-files-card-name { display:block; width:100%; padding:0; border:none; background:none; font-size:0.92rem; font-weight:600; margin:0; line-height:1.35; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:left; cursor:pointer; color:var(--text); }
.my-files-card-name:hover { color:var(--primary); }
.my-files-card-summary { font-size:0.82rem; color:var(--text-muted); margin:0; line-height:1.45; }
.my-files-card-footnote { font-size:0.76rem; color:var(--text-light); margin:0; line-height:1.4; }
.my-files-card-actions { display:flex; gap:8px; margin-top:8px; }
.my-files-card-action { display:inline-flex; align-items:center; justify-content:center; height:38px; border-radius:10px; cursor:pointer; transition:background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s; }
.my-files-card-action--download-text { flex:1; min-width:0; padding:0 14px; border:none; background:var(--primary); color:#fff; font-size:0.85rem; font-weight:600; box-shadow:0 4px 12px -4px rgba(79, 70, 229, 0.5); }
.my-files-card-action--download-text:hover { background:var(--primary-hover); transform:translateY(-1px); }
.my-files-card-action--preview,
.my-files-card-action--delete { width:38px; flex-shrink:0; border:1px solid var(--border); background:var(--bg-card); color:var(--text-muted); }
.my-files-card-action--preview:hover { border-color:#c7d2fe; color:var(--primary); background:#f8faff; }
.my-files-card-action--delete { color:#dc2626; border-color:#fecaca; background:#fff; }
.my-files-card-action--delete:hover { background:#fef2f2; border-color:#fca5a5; }
.my-files-load-more { text-align:center; margin-top:24px; }
.my-files-privacy { display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px; margin-top:28px; padding:16px 18px; border-radius:12px; background:linear-gradient(135deg, #eff6ff 0%, #eef2ff 100%); border:1px solid #c7d2fe; }
.my-files-privacy-icon { flex-shrink:0; color:var(--primary); }
.my-files-privacy-text { flex:1; min-width:min(100%, 240px); margin:0; font-size:0.88rem; line-height:1.5; color:#334155; }
.my-files-privacy-btn { flex-shrink:0; padding:8px 16px; border:1px solid #a5b4fc; border-radius:8px; background:#fff; color:var(--primary); font-size:0.85rem; font-weight:600; cursor:pointer; transition:background 0.15s, border-color 0.15s; }
.my-files-privacy-btn:hover { background:#eef2ff; border-color:var(--primary); }
.my-files-delete-btn { color:#dc2626; border-color:rgba(220, 38, 38, 0.35); }
.error-page { display:flex; justify-content:center; padding:40px 20px 64px; }
.error-page-card { width:100%; max-width:720px; padding:40px 36px 32px; text-align:center; }
.error-page-badge { width:88px; height:88px; margin:0 auto 22px; border-radius:50%; background:linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%); border:1px solid #c7d2fe; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 28px -8px rgba(79, 70, 229, 0.28); }
.error-page-code { font-size:2rem; font-weight:800; letter-spacing:-0.04em; line-height:1; color:var(--primary); }
.error-page-title { margin:0 0 10px; font-size:clamp(1.5rem, 2.5vw, 1.875rem); font-weight:700; letter-spacing:-0.03em; color:var(--text); }
.error-page-text { margin:0 auto 28px; max-width:480px; font-size:15px; line-height:1.65; color:var(--text-muted); }
.error-page-actions { display:flex; justify-content:center; margin-bottom:8px; }
.error-page-home-btn { min-width:200px; }
.error-page-more-tools { margin-top:28px; padding-top:28px; border-top:1px solid var(--border); text-align:left; }
@media (max-width:640px) {
.error-page-card { padding:32px 22px 24px; }
.error-page-home-btn { width:100%; }
}
.tool-empty-state { text-align:center; padding:32px 16px; color:var(--text-muted); }
.breadcrumb { margin-bottom:16px; }
.breadcrumb-list { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:0; padding:0; list-style:none; font-size:14px; color:var(--text-muted); }
.breadcrumb-item { display:flex; align-items:center; gap:6px; }
.breadcrumb-sep { color:var(--text-light); }
.breadcrumb-current { color:var(--text); font-weight:600; }
.breadcrumb-link:hover { color:var(--primary-hover); }
.sidebar-stacked { display:flex; flex-direction:column; gap:16px; }
@media (max-width:640px) {
.my-files-grid { grid-template-columns:1fr; }
.my-files-toolbar { flex-direction:column; align-items:stretch; }
.my-files-toolbar-actions { width:100%; }
.my-files-select { flex:1; min-width:0; }
.my-files-bulk { flex-direction:column; align-items:stretch; }
.my-files-privacy { flex-direction:column; align-items:flex-start; }
.my-files-privacy-btn { width:100%; }
}

/* Crop modal */
body.crop-modal-open { overflow:hidden; }
.crop-modal { position:fixed; inset:0; z-index:10050; display:flex; align-items:center; justify-content:center; padding:20px; }
.crop-modal.is-hidden { display:none; }
.crop-modal-backdrop { position:absolute; inset:0; background:rgba(15, 23, 42, 0.55); }
.crop-modal-dialog { position:relative; width:min(960px, 100%); min-height: 70vh; max-height:92vh; background:var(--bg-card, #fff); border-radius:16px; box-shadow:0 24px 48px rgba(15, 23, 42, 0.2); overflow:hidden; display:flex; flex-direction:column; }
.crop-modal-header { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--border); }
.crop-modal-title { margin:0; font-size:18px; }
.crop-modal-close { border:none; background:transparent; font-size:28px; line-height:1; cursor:pointer; color:var(--text-muted); }
.crop-modal-loading { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:48px 20px; }
.crop-modal-body { padding:20px; overflow:hidden; }
.crop-modal-grid { display:grid; grid-template-columns:2fr 1fr; gap:20px; align-items:start; }
.crop-modal-image-col { min-height:0; }
.crop-image-viewport { position:relative; height:380px; width:100%; overflow:visible; padding:10px; box-sizing:border-box; }
.crop-image-stage { position:absolute; inset:10px; background:#fff; border:1px solid var(--border); border-radius:12px; overflow:visible; display:flex; align-items:center; justify-content:center; }
.crop-image-stage.is-hidden { display:none !important; }
.crop-image-stage .cropper-container { max-height:360px !important; max-width:100% !important; overflow:visible !important; }
.crop-modal .cropper-wrap-box { overflow:visible !important; background:#fff !important; }
.crop-modal .cropper-canvas { overflow:visible !important; background:#fff !important; }
.crop-modal .cropper-bg { background-color:#fff !important; }
.crop-modal .cropper-modal { background-color:#fff; opacity:0.55; }
.crop-modal .cropper-view-box { outline-color:#4f46e5; }
.crop-source-image { display:block; max-width:100%; max-height:360px; }
.crop-result-image { display:block; max-width:100%; max-height:360px; object-fit:contain; background:#fff; }
.crop-ratio-section { margin-bottom:16px; }
.crop-mode-tabs { display:flex; gap:8px; margin-bottom:16px; }
.crop-mode-tab { flex:1; padding:10px 12px; border:1px solid var(--border); border-radius:10px; background:var(--bg-muted); cursor:pointer; font-weight:600; }
.crop-mode-tab.active { background:var(--primary-soft); border-color:var(--primary); color:var(--primary); }
.crop-options-label { font-weight:600; margin:0 0 10px; }
.crop-options-hint { font-size:13px; color:var(--text-muted); margin:0 0 12px; }
.crop-ratio-list { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; margin-bottom:20px; }
.crop-ratio-btn { padding:10px 12px; border:1px solid var(--border); border-radius:10px; background:#fff; cursor:pointer; font-size:14px; }
.crop-ratio-btn.active { background:var(--primary); border-color:var(--primary); color:#fff; }
.crop-modal .cropper-point { width:14px !important; height:14px !important; margin:-7px !important; border-radius:50%; background:#fff !important; border:2px solid #4f46e5 !important; opacity:1 !important; box-sizing:border-box; }
.crop-modal .cropper-point.point-se, .crop-modal .cropper-point.point-sw, .crop-modal .cropper-point.point-ne, .crop-modal .cropper-point.point-nw { width:14px !important; height:14px !important; margin:-7px !important; }
.crop-modal-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:8px; }
@media (max-width:768px) {
.crop-modal-grid { grid-template-columns:1fr; }
}
/* ─── Bulk tool workspace (resizer / compressor) ─── */
.bulk-tool-block { display:flex; flex-direction:column; align-items:stretch; margin-bottom:0; }
.bulk-upload-zone { border:none; background:transparent; box-shadow:none; padding:0; margin-bottom:0; }
.bulk-upload-zone:hover { border:none; box-shadow:none; }
.upload-zone.bulk-upload-zone { margin-bottom:0; }
.bulk-workspace { display:grid !important; grid-template-columns:minmax(0, 1fr); grid-auto-rows:auto; align-content:start; gap:10px; }
.upload-zone[data-layout="bulk"] .upload-zone-filled { display:grid !important; grid-template-columns:minmax(0, 1fr); grid-auto-rows:auto; align-content:start; }
.bulk-upload-zone.has-files .bulk-workspace,
.bulk-upload-zone.bulk-has-thumbs .bulk-workspace,
.bulk-tool-block.bulk-has-thumbs { padding-top:20px; }
.bulk-thumb-strip { width:100%; scroll-margin-top:calc(var(--header-h) + 20px); }
.bulk-editor { width:100%; scroll-margin-top:calc(var(--header-h) + 30px); }
.bulk-tool-block.bulk-has-thumbs .bulk-upload-zone { margin-bottom:0; }
.card-tool.bulk-has-thumbs,
.card-tool.has-upload.bulk-has-thumbs,
.card-tool.has-upload:has(.bulk-tool-block) { padding-top:0 !important; }
body.sr-has-files .page-tool-main > .tool-hero { display:none; }
body.sr-has-files .page-tool-main > .tool-hero + .card-tool,
body.sr-has-files .page-tool-main.page-stack-lg > .tool-hero + .card-tool.bulk-has-thumbs { margin-top:0 !important; }
.page-tool-main.page-stack-lg > .tool-hero + .card-tool.bulk-has-thumbs { margin-top:0 !important; }
.bulk-thumb-strip:not(.is-hidden) { margin:0; flex-shrink:0; }
.bulk-card { background:var(--bg-card); border:1px solid #e5eaf2; border-radius:16px; box-shadow:0 8px 30px -12px rgba(15, 23, 42, 0.12), 0 2px 8px rgba(15, 23, 42, 0.04); }
.bulk-thumb-strip { display:flex; align-items:center; gap:10px; padding:14px 12px; overflow:hidden; }
.bulk-thumb-nav { flex-shrink:0; width:36px; height:36px; border:1px solid var(--border); border-radius:50%; background:#fff; color:var(--text-muted); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:border-color 0.15s, color 0.15s, background 0.15s; }
.bulk-thumb-nav:hover:not(:disabled) { border-color:#c7d2fe; color:var(--primary); background:var(--primary-soft); }
.bulk-thumb-nav:disabled { opacity:0.35; cursor:not-allowed; }
.bulk-thumb-track { display:flex; align-items:center; gap:12px; flex:1; min-width:0; overflow:hidden; }
.bulk-thumb-add { flex-shrink:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; width:86px; height:80px; padding:10px; border:2px dashed #c7d2fe; border-radius:12px; background:linear-gradient(180deg, #f8faff 0%, #eef2ff 100%); color:var(--primary); cursor:pointer; transition:border-color 0.15s, background 0.15s, box-shadow 0.15s; }
.bulk-thumb-add:hover:not(:disabled):not(.is-disabled) { border-color:var(--primary); background:#e8edff; box-shadow:0 4px 14px -6px rgba(79, 70, 229, 0.35); }
.bulk-thumb-add:disabled,
.bulk-thumb-add.is-disabled { opacity:0.45; cursor:not-allowed; pointer-events:none; border-color:#e2e8f0; background:#f8fafc; color:var(--text-muted); box-shadow:none; }
.bulk-thumb-add-icon { font-size:26px; font-weight:300; line-height:1; }
.bulk-thumb-add-label { font-size:12px; font-weight:700; }
.bulk-thumb-count { font-size:10px; color:var(--text-muted); font-weight:500; }
.bulk-thumb-scroll { display:flex; gap:10px; overflow-x:auto; overflow-y:hidden; padding:2px 4px; flex:1; min-width:0; scrollbar-width:none; -ms-overflow-style:none; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; scroll-behavior:smooth; touch-action:pan-x; scroll-snap-type:x proximity; }
.bulk-thumb-scroll::-webkit-scrollbar { display:none; }
.bulk-thumb-scroll:empty { display:none; }
.bulk-thumb-card { position:relative; flex-shrink:0; width:80px; height:80px; padding:0; border:2px solid #e8edf5; border-radius:12px; background:#fff; cursor:pointer; overflow:hidden; transition:border-color 0.15s, background 0.15s, box-shadow 0.15s; scroll-snap-align:center; }
.bulk-thumb-card:hover { border-color:#a5b4fc; }
.bulk-thumb-card.is-active { border-color:var(--primary); background:var(--primary-soft); box-shadow:0 0 0 1px rgba(79, 70, 229, 0.2); }
.bulk-thumb-image { width:100%; height:100%; object-fit:cover; display:block; }
.bulk-thumb-index { position:absolute; top:5px; left:5px; z-index:2; min-width:20px; height:20px; padding:0 5px; border-radius:999px; background:rgba(15, 23, 42, 0.78); color:#fff; font-size:11px; font-weight:700; line-height:20px; text-align:center; pointer-events:none; }
.bulk-thumb-remove { position:absolute; top:5px; right:5px; z-index:3; width:24px; height:24px; border-radius:6px; border:none; background:#0f172a; color:#fe005e; font-size:16px; font-weight:700; line-height:1; display:flex; align-items:center; justify-content:center; cursor:pointer; opacity:0; transition:opacity 0.15s, color 0.15s; }
.bulk-thumb-card:hover .bulk-thumb-remove { opacity:1; }
.bulk-thumb-remove:hover { color:#ff4d8d; }
.bulk-editor { display:grid; grid-template-columns:1fr; padding:0; overflow:hidden; }
@media (min-width:960px) {
.bulk-editor { grid-template-columns:minmax(0, 1.22fr) minmax(0, 0.78fr); }
}
.bulk-editor-main { display:flex; flex-direction:column; min-width:0; border-bottom:1px solid var(--border); }
@media (min-width:960px) {
.bulk-editor-main { border-bottom:none; border-right:1px solid var(--border); }
}
.bulk-preview-header { padding:8px 14px 5px; flex-shrink:0; }
.bulk-preview-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:8px; width:100%; }
.bulk-preview-toolbar .bulk-preview-remove { position:static; margin-left:auto; flex-shrink:0; }
.bulk-tool-btn { display:inline-flex; align-items:center; gap:7px; padding:9px 16px; font-size:13px; font-weight:600; color:var(--text-muted); background:#fff; border:1px solid #e2e8f0; border-radius:999px; cursor:pointer; transition:color 0.15s, border-color 0.15s, background 0.15s, box-shadow 0.15s; }
.bulk-tool-btn:hover { color:var(--primary); border-color:#c7d2fe; background:var(--primary-soft); box-shadow:0 2px 8px -4px rgba(79, 70, 229, 0.25); }
.bulk-preview-stage { position:relative; display:flex; align-items:center; justify-content:center; height:var(--bulk-preview-h, 370px); min-height:var(--bulk-preview-h, 370px); max-height:var(--bulk-preview-h, 370px); padding:5px; background:linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%); overflow:hidden; }
.bulk-preview-placeholder { width:100%; height:100%; padding:0; border:2px dashed #c7d2fe; border-radius:12px; background:linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(248,250,252,0.95) 100%); cursor:pointer; transition:border-color 0.15s, background 0.15s, box-shadow 0.15s; }
.bulk-preview-placeholder:hover { border-color:#a5b4fc; background:#fff; box-shadow:inset 0 0 0 1px rgba(99, 102, 241, 0.08); }
.bulk-preview-placeholder-inner { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; height:100%; padding:28px 20px; pointer-events:none; }
.bulk-preview-placeholder .upload-icon { width:68px; height:68px; margin:0 auto 14px; border-radius:16px; background:linear-gradient(135deg, var(--primary-soft) 0%, #fff 100%); border:1px solid #e0e7ff; color:var(--primary); display:flex; align-items:center; justify-content:center; box-shadow:0 4px 14px -4px rgba(79, 70, 229, 0.25); }
.bulk-preview-placeholder .upload-title { font-weight:700; font-size:17px; color:var(--text); margin:0; }
.bulk-preview-placeholder .upload-hint { font-size:13px; color:var(--text-muted); margin:8px 0 0; max-width:380px; line-height:1.55; }
.bulk-preview-placeholder .upload-formats { display:block; font-size:12px; color:var(--text-light); margin:8px 0 0; }
.bulk-privacy-badge { display:inline-flex; align-items:center; gap:6px; margin-top:14px; padding:6px 12px; border-radius:999px; background:#ecfdf5; color:#059669; font-size:11px; font-weight:600; }
.bulk-preview-image-wrap { position:relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.bulk-preview-image { width:auto; height:auto; max-width:100%; max-height:360px; object-fit:contain; border-radius:6px; display:block; }
.bulk-preview-remove { position:absolute; top:8px; right:8px; z-index:4; width:36px; height:36px; border:none; border-radius:8px; background:#0f172a; color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 4px 14px rgba(15, 23, 42, 0.3); transition:background 0.15s, color 0.15s; }
.bulk-preview-remove:hover { background:#000; color:#fff; }
.bulk-preview-remove svg { display:block; }
.bulk-preview-meta { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px 16px; padding:10px 14px 14px; font-size:13px; color:var(--text-muted); border-top:1px solid var(--border-light); background:var(--bg-card); }
.bulk-preview-dims { font-weight:600; color:var(--text); }
.bulk-preview-size { color:var(--text-muted); }
.bulk-editor-settings { display:flex; flex-direction:column; gap:16px; padding:20px 22px 22px; background:var(--bg-card); border:none; box-shadow:none; min-width:0; }
.bulk-settings-section { display:flex; flex-direction:column; gap:10px; }
.bulk-settings-section.is-section-disabled,
.bulk-dim-row.is-section-disabled { opacity:0.42; pointer-events:none; filter:grayscale(0.15); transition:opacity 0.2s ease; }
.bulk-settings-label { display:block; font-family:var(--font); font-size:var(--text-base); font-weight:600; line-height:var(--leading-tight); color:var(--text); margin:0; padding-bottom: 4px; }
.bulk-dim-row { display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap; }
.bulk-dim-row--whu { flex-wrap:nowrap; gap:8px; }
.bulk-dim-row--whu .bulk-dim-field--w,
.bulk-dim-row--whu .bulk-dim-field--h { flex:2 1 0; min-width:0; }
.bulk-dim-row--whu .bulk-dim-field--unit { flex:1 1 0; min-width:0; max-width:72px; }
.bulk-dim-row--whu .bulk-dim-sep { flex:0 0 auto; padding-bottom:12px; }
.bulk-dim-row--aspect { margin-top:2px; }
.bulk-dim-row--size .bulk-dim-field { flex:1; min-width:100px; }
.bulk-dim-row--meta .bulk-dim-field { flex:1; min-width:120px; }
.bulk-dim-sep { padding-bottom:12px; font-size:18px; color:var(--text-muted); font-weight:500; }
.bulk-aspect-toggle { margin-bottom:2px; }
.bulk-mode-tabs { display:flex; gap:6px; padding:4px; background:#f1f5f9; border-radius:12px; border:1px solid var(--border); }
.bulk-mode-tab { flex:1; padding:10px 12px; font-family:var(--font); font-size:14px; font-weight:600; color:var(--text-muted); background:transparent; border:none; border-radius:9px; cursor:pointer; transition:background 0.15s, color 0.15s, box-shadow 0.15s; }
.bulk-mode-tab.active { background:#fff; color:var(--text); box-shadow:var(--shadow-sm); border:1px solid #c7d2fe; }
.bulk-mode-panel { display:flex; flex-direction:column; gap:10px; }
.bulk-size-row { display:grid; grid-template-columns:1fr auto; gap:10px; }
.bulk-size-unit { min-width:88px; }
.bulk-advanced-toggle { display:inline-flex; align-items:center; gap:6px; padding:0; font-size:14px; font-weight:600; color:var(--primary); background:none; border:none; cursor:pointer; }
.bulk-advanced-toggle:hover { color:var(--primary-hover); }
.bulk-advanced-panel { padding-top:4px; }
.bulk-quality-header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.bulk-toggle-switch { position:relative; display:inline-flex; width:44px; height:24px; flex-shrink:0; }
.bulk-toggle-switch--sm { width:34px; height:18px; }
.bulk-toggle-switch input { opacity:0; width:0; height:0; position:absolute; }
.bulk-toggle-track { position:absolute; inset:0; border-radius:999px; background:#cbd5e1; transition:background 0.15s; cursor:pointer; }
.bulk-toggle-track::after { content:''; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; transition:transform 0.15s; box-shadow:0 1px 3px rgba(15, 23, 42, 0.2); }
.bulk-toggle-switch--sm .bulk-toggle-track::after { top:2px; left:2px; width:14px; height:14px; }
.bulk-toggle-switch input:checked + .bulk-toggle-track { background:var(--primary); }
.bulk-toggle-switch input:checked + .bulk-toggle-track::after { transform:translateX(20px); }
.bulk-toggle-switch--sm input:checked + .bulk-toggle-track::after { transform:translateX(16px); }
.bulk-target-header { margin:10px 0; }
.bulk-slider-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.bulk-range { flex:1; min-width:140px; accent-color:var(--primary); }
.bulk-range:disabled { opacity:0.45; cursor:not-allowed; }
.bulk-range-value { font-size:14px; font-weight:600; color:var(--primary); min-width:42px; text-align:right; }
.bulk-settings-actions { margin-top:4px; }
.btn-bulk-submit { width:100%; max-width:none; padding:14px 20px; font-size:15px; border-radius:12px; }
.bulk-tool-block .btn-bulk-submit:hover:not(:disabled) { transform:none; }
/* ─── Tool modals (rotate, shared with crop) ─── */
body.tool-modal-open, body.crop-modal-open { overflow:hidden; }
.tool-modal { position:fixed; inset:0; z-index:10050; display:flex; align-items:center; justify-content:center; padding:20px; }
.tool-modal.is-hidden { display:none; }
.tool-modal-backdrop { position:absolute; inset:0; background:rgba(15, 23, 42, 0.55); }
.tool-modal-dialog { position:relative; width:min(920px, 100%); max-height:92vh; background:var(--bg-card); border-radius:16px; box-shadow:0 24px 48px rgba(15, 23, 42, 0.2); overflow:hidden; display:flex; flex-direction:column; }
.tool-modal-header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:18px 22px; border-bottom:1px solid var(--border); }
.tool-modal-title { margin:0; font-size:20px; font-weight:700; }
.tool-modal-desc { margin:6px 0 0; font-size:13px; color:var(--text-muted); line-height:1.5; max-width:520px; }
.tool-modal-close { border:none; background:transparent; font-size:28px; line-height:1; cursor:pointer; color:var(--text-muted); flex-shrink:0; }
.tool-modal-body { padding:20px 22px; overflow:auto; }
.tool-modal-grid { display:grid; grid-template-columns:1.2fr 0.8fr; gap:20px; align-items:start; }
.tool-modal-preview-col { min-height:0; }
.tool-modal-options-col { min-width:0; }
.tool-options-label { font-weight:600; margin:0 0 10px; font-size:14px; }
.tool-modal-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 22px; border-top:1px solid var(--border); background:var(--bg-muted); }
.tool-modal-footer-left { display:flex; gap:10px; }
.rotate-preview-stage { display:flex; align-items:center; justify-content:center; min-height:400px; max-height:400px; padding:12px; border:1px solid var(--border); border-radius:12px; background:#fff; overflow:hidden; }
.rotate-preview-inner { display:flex; align-items:center; justify-content:center; width:100%; height:100%; min-height:376px; overflow:hidden; }
.rotate-preview-image { display:block; width:auto; height:auto; max-width:100%; max-height:376px; object-fit:contain; transform-origin:center center; transition:transform 0.2s ease; }
.rotate-action-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:18px; }
.rotate-action-btn { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; min-height:88px; padding:12px; border:1px solid var(--border); border-radius:12px; background:#fff; font-size:13px; font-weight:600; color:var(--text); cursor:pointer; transition:border-color 0.15s, background 0.15s, color 0.15s; }
.rotate-action-btn:hover { border-color:#c7d2fe; background:var(--primary-soft); color:var(--primary); }
.btn-primary--sm, .btn-secondary--sm { padding:10px 18px; font-size:14px; }

/* Confirm dialog */
.sr-confirm-dialog { width:min(420px, calc(100vw - 32px)); }
.sr-confirm-body p { margin:0; color:var(--text-muted); line-height:1.55; font-size:0.95rem; }
.sr-confirm-footer { justify-content:flex-end; background:var(--bg-card); }
.sr-confirm-actions { display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; width:100%; }
.sr-confirm-btn--danger { background:#dc2626; box-shadow:0 2px 8px rgba(220, 38, 38, 0.35); }
.sr-confirm-btn--danger:hover:not(:disabled) { background:#b91c1c; box-shadow:0 4px 14px rgba(220, 38, 38, 0.4); }

@media (max-width:768px) {
.tool-modal-grid { grid-template-columns:1fr; }
.download-preview-layout { grid-template-columns:1fr; }
.download-preview-stage { min-height:min(58vh, 480px); height:min(70vh, 620px); max-height:calc(95vh - 160px); }
.bulk-editor { grid-template-columns:1fr; }
.bulk-editor-main { border-right:none; border-bottom:1px solid var(--border); }
.bulk-thumb-strip { flex-wrap:nowrap; align-items:stretch; }
.bulk-thumb-nav { display:none; }
.bulk-thumb-track { width:100%; min-width:0; overflow:hidden; }
.bulk-thumb-scroll { flex:1; width:100%; max-width:100%; }
.bulk-thumb-add { width:80px; height:80px; flex-shrink:0; }
.bulk-thumb-card { width:80px; height:80px; }
}
label.option-item.bulk-aspect-toggle {  font-size: 15px;}