/* Local overrides to integrate with global site styles */
body {direction: ltr}

/* Make tool use the site's card styling */
.tool-card {text-align:center}

input[type="file"] {display:block;margin:0 auto}

#pageInput {width:90%;padding:10px;border-radius:10px;border:1px solid rgba(255,255,255,0.06);background:transparent;color:var(--text);text-align:center}

/* Buttons: reuse global `.cta` and `.btn` styles from site.css; fallback styles below */
.cta{padding:8px 14px}
.cta.ghost{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--accent-purple)}

#message{min-height:1.1em;margin-top:6px}

@media(max-width:720px){#pageInput{width:95%}}

/* Styled file input wrapper to match site buttons */
.file-input-wrapper{display:flex;align-items:center;gap:12px}
.file-label{display:inline-flex;align-items:center;gap:.5rem;padding:8px 14px;border-radius:10px;border:0;cursor:pointer;font-weight:700}
.file-label.cta{box-shadow:0 10px 36px rgba(124,58,237,0.12);}
.file-name{color:var(--muted);font-size:0.95rem;opacity:.95}
/* Hide native file input appearance, keep it accessible */
input[type="file"]{position:relative;z-index:1;opacity:0;width:0;height:0;padding:0;margin:0}

/* Ensure brand header matches global site style (gradient clipped text) */
header nav .brand h1,
header .brand h1 {
	background: var(--accent-mid);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-weight: 800;
	font-size: 1.05rem;
}