/* Theme variables */
:root{
  --bg-top: #f6fbff;
  --bg-bottom: #ffffff;
  --card-bg: rgba(255,255,255,0.98);
  --muted: #64748b;
  --accent-1: #176be0;      /* primary blue */
  --accent-2: #00b294;      /* green tint for file-present */
  --danger: #d9534f;
  --glass-border: rgba(20,40,80,0.06);
  --btn-shadow: 0 10px 30px rgba(13, 45, 115, 0.08);
  --radius: 10px;
  --focus-ring: rgba(23,107,224,0.16);
  --glass: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(248,250,255,0.98));
  --smooth-ease: 200ms cubic-bezier(.2,.9,.3,1);
}

/* Page hero + card */
.hero {
  padding: 28px 16px 48px;
  background: linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bottom) 60%);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.hero > h1 {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  font-weight: 600;
  font-size: 1.55rem;
  color: #0b1220;
  margin: 0 0 14px;
  letter-spacing: -0.2px;
}

/* Make the tool feel like a centered card (applies if you wrap with .card, but safe to keep) */
.hero .card,
.hero .file-area { /* ensures file area sits nicely if not using a card container */
  border-radius: calc(var(--radius) + 4px);
}

/* File upload area */
.file-area{
  border: 2px dashed #e6eefb;
  padding: 22px;
  text-align: center;
  border-radius: var(--radius);
  cursor: pointer;
  background: var(--glass);
  transition: transform var(--smooth-ease), box-shadow var(--smooth-ease), border-color var(--smooth-ease), background var(--smooth-ease);
  box-shadow: 0 6px 18px rgba(16,24,40,0.03);
}
.file-area:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(11,58,130,0.06);
  border-color: rgba(23,107,224,0.18);
}

/* Focus & keyboard accessibility */
.file-area:focus{
  outline: none;
  box-shadow: 0 20px 48px rgba(23,107,224,0.08);
  border-color: rgba(23,107,224,0.22);
}

/* File-present state: change background & border */
.file-area.has-file{
  background: linear-gradient(90deg, rgba(241,255,250,0.95), rgba(245,255,252,0.9));
  border-style: solid;
  border-color: rgba(0,178,148,0.14);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.01), 0 10px 30px rgba(5,80,60,0.03);
  transform: none;
}
.file-area .file-name{ color: #0f5132; font-weight:600; margin-top:8px; }

/* Small text */
.small { font-size:0.92rem; color: var(--muted); }

/* Analyze / Clear / Compress buttons base */
.btn {
  padding: 8px 12px;
  border-radius: 9px;
  border: 0;
  cursor: pointer;
  font-weight: 600;
  transition: transform var(--smooth-ease), box-shadow var(--smooth-ease), opacity var(--smooth-ease);
  box-shadow: var(--btn-shadow);
  min-height:40px;
}

/* Ghost analyze button - blue glass */
.btn-ghost {
  background: linear-gradient(180deg,#ffffff 0%, #f3f8ff 100%);
  color: var(--accent-1);
  border: 1px solid rgba(23,107,224,0.12);
}
.btn-ghost:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 48px rgba(23,107,224,0.09);
}
.btn-ghost:active { transform: translateY(0); }

/* Clear button - subtle red */
#clear-btn.btn {
  background: linear-gradient(180deg,#fff 0%, #fff6f6 100%);
  color: var(--danger);
  border: 1px solid rgba(217,83,79,0.08);
}
#clear-btn.btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 36px rgba(217,83,79,0.06);
}

/* Primary compress button - strong gradient */
.btn-primary{
  background: linear-gradient(180deg, #2f86ff 0%, #0f56c1 100%);
  color: #fff;
  border: none;
  box-shadow: 0 16px 46px rgba(15,86,193,0.14);
  min-width: 190px;
}
.btn-primary:hover{
  transform: translateY(-3px);
  box-shadow: 0 24px 64px rgba(15,86,193,0.18);
}
.btn-primary:active{ transform: translateY(0); }
.btn-primary[disabled],
.btn-primary:disabled{
  opacity: 0.6;
  cursor: not-allowed;
  box-shadow: none;
}

/* Status text near actions */
#status { margin-left:12px; color: var(--muted); display:inline-block; vertical-align: middle; }

/* Table / media-table basic polish */
#media-table table { width:100%; border-collapse:collapse; margin-top:10px; font-size:0.95rem; color:#0b1220; }
#media-table td, #media-table th { padding:8px 10px; border-bottom:1px solid rgba(6,10,20,0.03); text-align:left; }

/* Input range & number nicer */
input[type="range"]{ width: 320px; height: 6px; accent-color: var(--accent-1); }
input[type="number"]{ padding:8px 10px; border-radius:8px; border:1px solid rgba(11,20,40,0.06); }

/* Hoverable font samples (if you later add them) */
.font-sample {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(6,10,20,0.04);
  transition: transform var(--smooth-ease), box-shadow var(--smooth-ease), background var(--smooth-ease);
}
.font-sample:hover { transform: translateY(-6px); box-shadow: 0 16px 48px rgba(9,20,50,0.08); background: linear-gradient(180deg,#ffffff,#f3fbff); }

/* Focus ring for buttons and inputs (high contrast accessible) */
.btn:focus, input:focus, select:focus {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

/* Responsive adjustments */
@media (max-width: 720px){
  input[type="range"]{ width: 100%; }
  .btn-primary { width: 100%; box-sizing: border-box; min-width: unset; }
}

/* Subtle icon / micro animation for button click (pure CSS) */
.btn:active { transform: translateY(1px) scale(0.998); transition: transform 80ms ease; }

/* Optional: animate dashed border when dragging (needs .dragover class to be toggled by JS) */
.file-area.dragover{
  border-color: rgba(23,107,224,0.28);
  background: linear-gradient(180deg,#f7fbff,#ffffff);
  box-shadow: 0 22px 60px rgba(23,107,224,0.06);
  transform: translateY(-6px);
}