@import url('premium-buttons.css');

@import url('premium-buttons.css');
@import url('styles/progress-bars.css');

:root {
  --page-bg: #f8fafc;
  --surface: #ffffff;
  --primary: #1e40af;
  --primary-light: #eff6ff;
  --accent: #4f46e5;
  --ink: #0f172a;
  --muted: #475569;
  --line: #dbe4f0;
  --success: #047857;
  --danger: #b91c1c;
  --gutter: clamp(1rem, 4vw, 4.5rem);
  font-family: 'SolaimanLipi', 'Segoe UI', Tahoma, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 280px; min-height: 100vh; overflow-x: hidden; color: var(--ink); background: var(--page-bg); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .65rem var(--gutter); background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: 0 4px 18px rgba(15,23,42,.05); }
.brand { display: flex; align-items: center; gap: .65rem; color: var(--primary); font-size: clamp(1.1rem,3vw,1.7rem); font-weight: 700; text-decoration: none; background: linear-gradient(110deg,#173f9f 0%,#1388c9 42%,#d59b2a 72%,#173f9f 100%); background-size: 220% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: brand-shimmer 6s ease-in-out infinite; }
@keyframes brand-shimmer { 0%,100% { background-position: 0% center; } 50% { background-position: 100% center; } }
.brand span { font-size: 0; }
.brand span::after { content: 'MR COMPUTER'; font-size: clamp(1.1rem,3vw,1.7rem); }
.brand img { width: clamp(2.5rem,7vw,4.25rem); height: clamp(2.5rem,7vw,4.25rem); object-fit: contain; }
.back-link { padding: .6rem .85rem; color: var(--ink); border-radius: 10px; font-size: .85rem; font-weight: 700; text-decoration: none; }
.back-link:hover { color: var(--primary); background: var(--primary-light); }
main { width: min(100% - 2 * var(--gutter), 78rem); margin: auto; padding: clamp(1.5rem,5vw,3.5rem) 0; }
.page-heading { margin-bottom: clamp(1.2rem,3vw,2rem); text-align: center; }
h1 { margin: 0; color: var(--primary); font-size: clamp(1.45rem,4vw,2.45rem); line-height: 1.25; }
.lead { max-width: 52rem; margin: .55rem auto 0; color: var(--muted); font-size: clamp(.78rem,1.7vw,1rem); line-height: 1.65; }
.workspace { display: grid; grid-template-columns: minmax(16rem,.82fr) minmax(0,1.18fr); gap: clamp(1rem,2.5vw,1.6rem); align-items: start; }
.panel { min-width: 0; padding: clamp(1rem,2.5vw,1.5rem); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 25px rgba(15,23,42,.07); }
.panel-title { display: flex; align-items: center; gap: .5rem; margin-bottom: 1rem; color: var(--ink); font-size: clamp(.9rem,2vw,1.1rem); font-weight: 700; }
.panel-title i { color: var(--primary); }
.upload-zone { display: grid; place-items: center; min-height: 6.5rem; padding: .75rem; border: 1.5px dashed #93c5fd; border-radius: 9px; background: var(--primary-light); text-align: center; cursor: pointer; transition: transform .2s ease, background .2s ease, border-color .2s ease; }
.upload-zone:hover, .upload-zone.dragging, .upload-zone:focus-within { transform: translateY(-1px); border-color: var(--primary); background: #dbeafe; }
.upload-zone i { color: var(--primary); font-size: 1.5rem; }
.upload-zone strong { display: block; margin-top: .3rem; font-size: .8rem; }
.upload-zone span { display: block; margin-top: .15rem; color: var(--muted); font-size: .64rem; }
input[type=file] { display: none; }
.controls { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .8rem; margin-top: 1rem; }
label { display: grid; gap: .35rem; color: var(--muted); font-size: .76rem; font-weight: 700; }
input[type=text], input[type=number], input[type=range], select, textarea { width: 100%; padding: .62rem .7rem; border: 1px solid #cbd5e1; border-radius: 9px; background: #fff; color: var(--ink); }
input[type=range] { padding: 0; accent-color: var(--primary); }
textarea { min-height: 15rem; resize: vertical; line-height: 1.6; }
.primary-button, .secondary-button, .danger-button { min-height: 2.6rem; margin-top: 1rem; padding: .65rem 1rem; border: 1px solid transparent; border-radius: 10px; font-size: .82rem; font-weight: 700; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.primary-button { width: 100%; color: #fff; background: var(--primary); box-shadow: 0 7px 15px rgba(30,64,175,.18); }
.secondary-button { color: var(--primary); background: var(--surface); border-color: #bfdbfe; }
.danger-button { color: var(--danger); background: #fff; border-color: #fecaca; }
.primary-button:hover, .secondary-button:hover, .danger-button:hover { transform: translateY(-4px); box-shadow: 0 12px 22px rgba(15,23,42,.12); }
button:disabled { cursor: not-allowed; opacity: .5; transform: none !important; box-shadow: none !important; }
.preview-stage { display: grid; place-items: center; min-height: 23rem; padding: 1rem; overflow: auto; border-radius: 10px; background: #eef2f7; }
.preview-stage canvas, .preview-stage img { display: block; max-width: 100%; height: auto; }
.preview-empty { color: #94a3b8; text-align: center; font-size: .82rem; }
.file-details, .status { min-height: 1.25rem; margin-top: .7rem; color: var(--muted); font-size: .75rem; line-height: 1.5; }
.progress { height: .55rem; margin-top: .7rem; overflow: hidden; border-radius: 999px; background: #e2e8f0; }
.progress { position: relative; height: .38rem; overflow: visible; background: #e8eef7; box-shadow: inset 0 1px 2px rgba(15,23,42,.08); }
.progress > span { position: relative; display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #2563eb, #06b6d4); box-shadow: 0 0 10px rgba(37,99,235,.3); transition: width .35s ease; }
.progress > span::after { position: absolute; top: .55rem; right: 0; color: var(--primary); content: attr(data-percent); font-size: .68rem; font-weight: 700; white-space: nowrap; }
@keyframes premium-progress-shimmer { from { background-position: 0 0; } to { background-position: 3rem 0; } }
.progress > span { background-image: linear-gradient(110deg, #2563eb 0%, #0891b2 28%, #14b8a6 48%, #f59e0b 52%, #0891b2 72%, #2563eb 100%); background-size: 3rem 100%; }
.progress > span.is-active { animation: premium-progress-shimmer 1.35s linear infinite; }
.preview-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(11rem,1fr)); gap: .8rem; max-height: 30rem; overflow: auto; }
.preview-card { padding: .65rem; background: #fff; border: 1px solid var(--line); border-radius: 10px; text-align: center; }
.preview-card img, .preview-card canvas { width: 100%; max-height: 14rem; object-fit: contain; background: #f1f5f9; }
.preview-card small { display: block; margin-top: .4rem; color: var(--muted); font-size: .7rem; overflow-wrap: anywhere; }
.inline-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.inline-actions button { flex: 1 1 9rem; }
.metric-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .8rem; }
.metric { padding: 1rem; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.metric strong { display: block; color: var(--primary); font-size: 1.25rem; }
.metric span { color: var(--muted); font-size: .72rem; }
.result { margin-top: 1rem; padding: 1rem; border-radius: 10px; background: var(--primary-light); color: var(--ink); }
.result strong { color: var(--primary); }
.checker { height: 100%; min-height: 14rem; background-image: linear-gradient(45deg,#e2e8f0 25%,transparent 25%),linear-gradient(-45deg,#e2e8f0 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e2e8f0 75%),linear-gradient(-45deg,transparent 75%,#e2e8f0 75%); background-size: 1.25rem 1.25rem; background-position: 0 0,0 .625rem,.625rem -.625rem,-.625rem 0; }
canvas { max-width: 100%; }
.footer-note { margin-top: 1rem; color: var(--muted); font-size: .72rem; text-align: center; }
@media (max-width: 48rem) { .workspace { grid-template-columns: 1fr; } .preview-stage { min-height: 17rem; } }
@media (max-width: 32rem) { .controls, .metric-grid { grid-template-columns: 1fr; } header { align-items: flex-start; } .panel { padding: .85rem; } }