:root{
  --dl-primary:#0E6B35;
  --dl-primary-dark:#074D24;
  --dl-primary-light:#2E9B5A;
  --dl-accent:#F5A623;
  --dl-bg:#FAFBF7;
  --dl-surface:#FFFFFF;
  --dl-surface-alt:#F0F4EA;
  --dl-text:#16211A;
  --dl-text-muted:#6B7A70;
  --dl-border:#E3E9DC;
  --dl-danger:#D64545;
  --dl-radius:18px;
  --dl-shadow:0 12px 32px -8px rgba(14,107,53,.16), 0 2px 8px rgba(0,0,0,.05);
}

*{box-sizing:border-box;}

body{
  margin:0;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  font-family:'Segoe UI',Roboto,-apple-system,BlinkMacSystemFont,sans-serif;
  background:
    radial-gradient(circle at 15% 10%, rgba(14,107,53,.10), transparent 45%),
    radial-gradient(circle at 85% 90%, rgba(245,166,35,.12), transparent 45%),
    var(--dl-bg);
  color:var(--dl-text);
}

.dl-wrap{width:100%; display:flex; justify-content:center;}

.dl-card{
  width:100%;
  max-width:360px;
  background:var(--dl-surface);
  border:1px solid var(--dl-border);
  border-radius:var(--dl-radius);
  box-shadow:var(--dl-shadow);
  padding:36px 28px 28px;
  text-align:center;
}

.dl-icon{
  width:72px; height:72px;
  margin:0 auto 18px;
  border-radius:20px;
  background:var(--dl-surface-alt);
  display:flex; align-items:center; justify-content:center;
  padding:14px;
}
.dl-icon svg{width:100%; height:100%;}

.dl-title{
  margin:0 0 4px;
  font-size:1.5rem;
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--dl-primary-dark);
}

.dl-subtitle{
  margin:0 0 16px;
  font-size:.92rem;
  color:var(--dl-text-muted);
  line-height:1.4;
}

.dl-meta{
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-size:.8rem;
  color:var(--dl-text-muted);
  margin-bottom:22px;
}
.dl-dot{opacity:.5;}

.dl-btn{
  position:relative;
  width:100%;
  border:none;
  border-radius:14px;
  background:var(--dl-primary);
  color:#fff;
  padding:16px 20px;
  font-size:1rem;
  font-weight:700;
  cursor:pointer;
  overflow:hidden;
  isolation:isolate;
  transition:transform .15s ease, box-shadow .15s ease, background .2s ease;
  box-shadow:0 8px 20px -6px rgba(14,107,53,.5);
}
.dl-btn:hover{transform:translateY(-1px); box-shadow:0 12px 26px -6px rgba(14,107,53,.55);}
.dl-btn:active{transform:translateY(0);}
.dl-btn:focus-visible{outline:3px solid var(--dl-accent); outline-offset:2px;}

.dl-btn-fill{
  position:absolute; inset:0;
  width:0%;
  background:var(--dl-primary-light);
  z-index:-1;
  transition:width .12s linear;
}

.dl-btn-label{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
}
.dl-btn-icon{width:20px; height:20px; flex-shrink:0;}
.dl-btn-icon.spin{animation:dl-spin 1s linear infinite;}

.dl-btn[data-state="downloading"] .dl-btn-fill{background:var(--dl-primary-dark);}
.dl-btn[data-state="done"]{background:var(--dl-primary-dark);}
.dl-btn[data-state="error"]{background:var(--dl-danger); box-shadow:0 8px 20px -6px rgba(214,69,69,.5);}

@keyframes dl-spin{to{transform:rotate(360deg);}}

.dl-note{
  margin:14px 0 0;
  font-size:.78rem;
  color:var(--dl-text-muted);
}

.dl-status{
  margin-top:10px;
  min-height:18px;
  font-size:.82rem;
  font-weight:600;
}
.dl-status[data-tone="ok"]{color:var(--dl-primary-dark);}
.dl-status[data-tone="error"]{color:var(--dl-danger);}

@media (max-width:400px){
  .dl-card{padding:28px 20px 22px;}
}

@media (prefers-reduced-motion: reduce){
  .dl-btn, .dl-btn-fill, .dl-btn-icon.spin{transition:none; animation:none;}
}