:root{
  --blue: #00A9E0;
  --blue-deep: #0B2A3C;

  --green: #2DBE60;
  --white: #fff;
  --text: #0b1b2a;

  --sun: #FFD34D;

  --type: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  --bg-grad: rgb(215, 213, 213);
  --card-grad: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.90));

  --shadow-soft: 0 14px 34px rgba(11,42,60,0.18);
  --shadow-card: 0 16px 42px rgba(11,42,60,0.12);
  --shadow-chip: 0 10px 22px rgba(11,42,60,0.10);

  --radius: 14px;
  --radius-sm: 12px;

  --border: 3px solid var(--blue-deep);
  --border-soft: 2px solid rgba(11,42,60,0.18);

  --bg1: #f7f7f7;
  --bg2: #ececec;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  min-height:100vh;
  font-family: var(--type);
  background: var(--bg-grad);
  color: var(--text);
  display:grid;
  place-items:center;
  padding:24px;
  overflow-x:hidden;
  letter-spacing: 0.1px;
}

.app{
  width: min(900px, 100%);
  background: var(--card-grad);
  border: var(--border);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
}

.app::before{
  content:"";
  position:absolute;
  right:-60px;
  top:-60px;
  width:200px;
  height:200px;
  border-radius:999px;
  background: radial-gradient(circle at 30% 30%, rgba(255,211,77,0.22), transparent 60%);
  pointer-events:none;
}

h1{
  margin: 0;
  font-size: clamp(1.8rem, 3vw, 2.2rem);
  font-weight: 950;
  color: var(--blue);
  line-height: 1.06;
  text-shadow: 0 10px 22px rgba(0,169,224,0.20);
  letter-spacing: .2px;
}

.subtitle{
  margin-top: 8px;
  margin-bottom: 18px;
  color: rgba(11,27,42,0.75);
  font-weight: 800;
  line-height: 1.55;
}

.controls{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

label{
  display:grid;
  gap:6px;
  font-size: 0.95rem;
  font-weight: 950;
  color: rgba(11,27,42,0.78);
}

input{
  border: var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 1rem;
  font-family: var(--type);
  font-weight: 800;
  background: rgba(255,255,255,0.92);
  color: rgba(11,27,42,0.92);
  outline:none;
}

input:focus{
  border-color: rgba(0,169,224,0.55);
  box-shadow: 0 0 0 4px rgba(0,169,224,0.16);
}

.inline-check{
  align-items:center;
  align-content:center;
}

.inline-check input[type="checkbox"]{
  width: 18px;
  height: 18px;
  margin-top: 4px;
  accent-color: var(--blue);
}

.actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin: 16px 0 20px;
}

button{
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 0.95rem;
  cursor:pointer;
  font-family: var(--type);
  font-weight: 950;
  box-shadow: 0 10px 18px rgba(11,42,60,0.08);
  transition: transform .15s ease, filter .15s ease;
}

button:hover{
  transform: translateY(-1px);
  filter: brightness(1.02);
}

#previewBtn{
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.90));
  color: var(--blue);
}

#uploadBtn{
  background: linear-gradient(180deg, rgba(11,42,60,0.10), rgba(11,42,60,0.06));
  color: var(--blue-deep);
  border: var(--border-soft);
}

#removeBgBtn{
  background: linear-gradient(180deg, rgba(255,177,74,1), rgba(255,177,74,0.86));
  color: var(--white);
  border: 1px solid rgba(255,255,255,0.45);
  box-shadow: 0 12px 24px rgba(255,177,74,0.18);
}

#downloadBtn{
  background: linear-gradient(180deg, rgba(0,169,224,1), rgba(0,169,224,0.86));
  color: var(--white);
  border: 1px solid rgba(255,255,255,0.45);
  box-shadow: 0 12px 24px rgba(0,169,224,0.20);
}

.preview-wrap p{
  margin: 0 0 8px;
  font-weight: 950;
  color: rgba(11,27,42,0.85);
}

.checkerboard{
  padding: 12px;
  border-radius: var(--radius);
  border: var(--border-soft);
  background-image:
    linear-gradient(45deg, var(--bg1) 25%, transparent 25%),
    linear-gradient(-45deg, var(--bg1) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--bg1) 75%),
    linear-gradient(-45deg, transparent 75%, var(--bg1) 75%);
  background-size: 24px 24px;
  background-position: 0 0, 0 12px, 12px -12px, -12px 0;
  background-color: var(--bg2);
  overflow:auto;
  box-shadow: var(--shadow-chip);
}

canvas{
  display:block;
  max-width:100%;
  height:auto;
  border: 2px solid rgba(11,42,60,0.18);
  border-radius: 10px;
  background: transparent;
}