:root{
  --bg:#f6f7fa;
  --excel-header:#d9e1f2;
  --excel-alt:#f2f2f2;
  --radius:.6rem;
  --shadow:0 6px 14px rgba(0,0,0,.08);
  --font:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --ebay:#0061d5;--amazon:#ff9900;--green:#28a745;--red:#dc3545;
}
*{box-sizing:border-box;}
body{margin:0;padding:2rem;background:var(--bg);font-family:var(--font);
     display:flex;flex-direction:column;align-items:center;position:relative;}
h1{margin:0 0 1.4rem;font-size:1.7rem;}

/* Tutorial button - positioned at top left */
.tutorial-button{
  position:fixed;
  top:1rem;
  left:1rem;
  background:#6f42c1;
  color:#fff;
  border:none;
  border-radius:var(--radius);
  padding:.65rem 1.2rem;
  font-size:.9rem;
  cursor:pointer;
  transition:opacity .2s ease;
  box-shadow:var(--shadow);
  z-index:1000;
  font-family:var(--font);
}
.tutorial-button:hover{
  opacity:.9;
}

/* Summary wrapper for positioning */
.summary-wrapper{
  position:relative;
  margin-bottom:1.5rem;
  display:flex;
  justify-content:center;
  width:100%;
}

/* Summary section - centered */
.summary{
  display:flex;
  gap:2rem;
  padding:1rem 2rem;
  background:#fff;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  flex-wrap:wrap;
  justify-content:center;
}
.summary-item{
  text-align:center;
  min-width:120px;
}
.summary-label{
  font-size:.85rem;
  color:#666;
  margin-bottom:.3rem;
  font-weight:500;
}
.summary-value{
  font-size:1.4rem;
  font-weight:700;
  margin:0;
}
.summary-value.profit{color:var(--green);}
.summary-value.revenue{color:var(--ebay);}
.summary-value.orders{color:#666;}

/* Filter section - positioned to the right */
.filter-section{
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  background:#fff;
  padding:.8rem 1.2rem;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

.date-filter{
  padding:.6rem 1rem;
  border:1px solid #ced4da;
  border-radius:var(--radius);
  font-size:.9rem;
  background:#fff;
  cursor:pointer;
  color:#495057;
  font-family:var(--font);
  min-width:140px;
  transition:border-color .2s ease, box-shadow .2s ease;
}

.date-filter:focus{
  outline:none;
  border-color:var(--ebay);
  box-shadow:0 0 0 3px rgba(0,97,213,.1);
}

.date-filter:hover{
  border-color:#adb5bd;
}

.controls{display:flex;gap:.8rem;flex-wrap:wrap;margin-bottom:1.2rem;}
button{padding:.65rem 1.2rem;font-size:1rem;border:none;border-radius:var(--radius);
       cursor:pointer;transition:opacity .2s ease;box-shadow:var(--shadow);color:#fff;}
button:hover{opacity:.9;}
button:disabled{opacity:.5;cursor:not-allowed;}
#addBtn{background:var(--green);}
#uploadBtn{background:#6c63ff;}
#downloadCsv{background:#17a2b8;}
#downloadXlsx{background:#6c63ff;}
#clearDataBtn{background:var(--red);}

/* Excel table */
table{border-collapse:collapse;font-size:.92rem;width:100%;max-width:1600px;}
thead tr{background:var(--excel-header);}
th,td{border:1px solid #ccc;padding:.45rem .6rem;text-align:left;vertical-align:top;}
tbody tr:nth-child(even){background:var(--excel-alt);}
tbody tr:hover{background:#e8f4f8;}

/* Delete button styling */
.delete-btn{
  background:none;
  border:none;
  color:#999;
  cursor:pointer;
  font-size:1.2rem;
  padding:.2rem;
  margin:0;
  line-height:1;
  transition:color .2s ease;
  box-shadow:none;
  width:auto;
  height:auto;
}
.delete-btn:hover{
  color:#dc3545;
  opacity:1;
}
.actions-col{
  text-align:center;
  width:50px;
}

/* Modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.35);display:flex;
       justify-content:center;align-items:center;visibility:hidden;opacity:0;
       transition:opacity .25s ease;}
.modal.show{visibility:visible;opacity:1;}
.modal-content{background:#fff;width:95%;max-width:820px;border-radius:var(--radius);
               padding:2rem 2.2rem;box-shadow:var(--shadow);position:relative;
               animation:fade .3s ease;}
@keyframes fade{from{transform:scale(.97);opacity:.4}to{transform:scale(1);opacity:1}}
.close{position:absolute;top:.9rem;right:1.1rem;font-size:1.6rem;cursor:pointer;}

.grid{display:grid;grid-template-columns:200px 1fr 160px 1fr;
      gap:1rem .9rem;align-items:center;}
label{font-weight:600;font-size:.9rem;}
input[type="text"],input[type="number"]{width:100%;padding:.45rem .6rem;
     border:1px solid #ced4da;border-radius:.4rem;font-size:.92rem;}
input[type="number"]{max-width:120px;}

.buttons{margin-top:1.2rem;display:flex;gap:.7rem;flex-wrap:wrap;}
.action{padding:.55rem 1rem;font-size:.95rem;border:none;border-radius:.5rem;
        color:#fff;cursor:pointer;transition:opacity .2s ease;flex:1;min-width:150px;}
.ebay{background:var(--ebay);}  .amazon{background:var(--amazon);}
.confirm{background:var(--green);flex:unset;min-width:130px;}
.action:hover{opacity:.9;}

.storage-info{margin-top:1rem;font-size:.85rem;color:#666;text-align:center;}