body,header,footer,span,div,h1,h2,h3, button, a,
code, pre, textarea, input, u, b, strong
{
	font-family:"PT Mono"  !important ;
}

@media (max-width: 768px) {
  .card {
    clear:both;
	margin-left:1px;
	margin-bottom:2em;
	width:100%;
	display:inline-block;
	
  }
  body{display:block !important ;}
}

body { background: #3f1301;   text-align: center; padding: 50px; }
#qrcode { margin: 20px auto; display: inline-block; }
input { padding: 10px; width: 300px; }
button { padding: 10px 20px; cursor: pointer; background: #007bff; color: white; border: none; border-radius: 4px; }
#downloadBtn { display: none; margin-top: 20px; background: #28a745; }


html .urlInput{filter:invert(1);}

html button { 
  background: #d74c08; 
}
button:hover { 
  background: #ff950d; 
}

h2 img{
	height: auto;
  width: 77px;
  padding-right: 1em;
  filter: hue-rotate(195deg)saturate(1.6);
}

html a, .main-content a {
  color: #a39963;
}
html a:hover, .main-content a:hover {
  color: #dbc651;
}

html input, html button{
	font-size: 20px;
}

#downloadBtn:hover {
  display: none;
  margin-top: 20px;
  background: #a3ba07;
}



/* ... (previous styles) ... */

#qrcode { 
	margin: 25px auto;
	padding: 33px;        /* The 33px white border */
	background: #fff;     /* Background for the border */
	display: inline-block;
	line-height: 0;       /* Removes extra bottom spacing */
	border: 1px solid #eee; /* Optional: light stroke to see the white edge */
}

/* Ensure the 512px image scales down on small phones */
#qrcode img, #qrcode canvas {
	max-width: 100% !important;
	height: auto !important;
}


html #qrcode {
  margin: 25px auto;
  padding: 33px;
  background: #919191;
  display: inline-block;
  line-height: 0;
  border: 1px solid #ffd634;
}




body {   display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; }
.card { background: white; padding: 30px; border-radius: 15px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); text-align: center; width: 90%; max-width: 420px; margin-left: 2em; }
input { width: 100%; padding: 12px; margin-bottom: 20px; border: 1px solid #ccc; border-radius: 8px; box-sizing: border-box; font-size: 16px; }
button { width: 100%; padding: 12px; border: none; border-radius: 8px; cursor: pointer; font-weight: bold; font-size: 16px; margin-bottom: 10px; }
.gen-btn { background: #007bff; color: white; }
.dl-btn { background: #28a745; color: white; display: none; }

/* This shows the QR on screen, scaled down for mobile */
#qrcode-visible { 
	margin: 20px auto; 
	padding: 10px; 
	background: #fff;
	display: inline-block;
}
#qrcode-visible img { max-width: 200px; height: auto; border: 1px solid #eee; }

/* Hidden helper for high-res generation */
#qrcode-hidden { display: none; }
html .card-title { 
  font-size: 40px; 
}
html .card-subtitle {
 
  color: #ffb33b;
 
}


html body { 
  background: #562603; 
}

html .card {
  background: #753801; 
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.41); 
}html .gen-btn {
  background: #ff7800;
  
}
html #qrcode-visible {
  background: #fff;
  padding: 1.3em;
  display:none;
}


html #drop-area { 
  background-color: #d17615; 
}
html #drop-area p {
  margin: 0;
  color: #451705;
  font-weight: 500;
  font-size: 20px;
}

html #drop-area p span
{font-size: 17px;
  color: #921c08;
margin-top: 0.5rem;}

html .result-label { 
  color: #ffbe58;
  font-size: 25px;
}

html #qr-text {
  
  border: 2px solid #ffc824;
  
  background-color: #823100;
 
  transition: border-color 0.2s;
  color: white;
}


/*read qr */


:root {
	--primary-color: #3b82f6; /* A nice blue */
	--bg-color: #f3f4f6; /* Light gray background */
	--card-bg: #ffffff; /* White card */
	--border-color: #d1d5db; /* Light gray borders */
	--text-color: #1f2937; /* Dark gray text */
	--border-radius: 12px;
}

body {
 	margin: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	color: var(--text-color);
}

/* --- Main Card Layout --- */
.card {
	background-color: var(--card-bg);
	border-radius: var(--border-radius);
	box-shadow: 0 10px 25px rgba(0,0,0,0.1);
	width: 90%;
	max-width: 480px;
	padding: 2.5rem;
	box-sizing: border-box;
	border: 1px solid rgba(0,0,0,0.05);
}

.card-header {
	text-align: center;
	margin-bottom: 2rem;
}

.card-title {
	margin: 0;
	font-size: 1.75rem;
	font-weight: 700;
	letter-spacing: -0.025em;
}

.card-subtitle {
	margin-top: 0.5rem;
	color: #6b7280;
	font-size: 1rem;
}

/* --- Drag & Drop Area --- */
#drop-area {
	border: 3px dashed var(--border-color);
	border-radius: var(--border-radius);
	padding: 3rem 1.5rem;
	text-align: center;
	cursor: pointer;
	transition: all 0.3s ease;
	position: relative;
	background-color: #fafafa;
}

/* Hover and active states for drag and drop */
#drop-area.highlight {
	border-color: var(--primary-color);
	background-color: #eff6ff;
}

#drop-area p {
	margin: 0;
	color: #4b5563;
	font-weight: 500;
}

.icon-upload {
	font-size: 3rem;
	margin-bottom: 1rem;
	color: #9ca3af;
}

/* This hidden input is crucial for click-to-browse */
#file-input {
	display: none;
}

/* Container for the image preview */
#preview-container {
	margin-top: 1.5rem;
	text-align: center;
	display: none; /* Hidden until an image is loaded */
}

#qr-preview {
	max-width: 100%;
	max-height: 250px;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
	border: 1px solid var(--border-color);
}

/* --- Feedback/Status Area --- */
#status-area {
	margin-top: 1.5rem;
	padding: 1rem;
	border-radius: 8px;
	text-align: center;
	display: none;
	font-size: 0.95rem;
}

#status-area.error {
	background-color: #fee2e2;
	color: #b91c1c;
	border: 1px solid #fecaca;
}

#status-area.info {
	background-color: #e0f2fe;
	color: #0369a1;
	border: 1px solid #bae6fd;
}

/* --- Text Box (Result) --- */
#result-area {
	margin-top: 1.5rem;
	display: none; /* Hidden until data is successfully decoded */
}

.result-label {
	display: block;
	margin-bottom: 0.5rem;
	font-weight: 600;
	color: #374151;
	font-size: 0.9rem;
}

#qr-text {
	width: 100%;
	padding: 1rem;
	border: 2px solid var(--border-color);
	border-radius: 8px;
	box-sizing: border-box;
 	font-size: 1rem;
	background-color: var(--bg-color);
	cursor: pointer; /* Suggests clickability */
	resize: none; /* Prevent manual resizing */
	transition: border-color 0.2s;
}

#qr-text:focus {
	outline: none;
	border-color: var(--primary-color);
	background-color: #ffffff;
}

/* Minimal responsive adjustments */
@media (max-width: 480px) {
	.card {
		padding: 1.5rem;
	}
	.card-title {
		font-size: 1.5rem;
	}
}



html .highlight {
	background: var(--grease-gradient);
	
	 
}


html qr-text:focus { 
background: var(--grease-gradient); color:white;
background-color:transparent;
}

#urlInput{
	background: #9c5000;
  color: white;
  border: solid 3px #ff7800;
}


html #qr-text:focus {
  outline: none;
  border-color: #ff9b00;
  background-color: transparent;
  background: var(--grease-gradient); color:white;


}