/* style.css – modern dark aesthetic */
:root {
  --bg: #0d1b1e;
  --panel: #122b36;
  --border: #1e3a40;
  --text: #e2f7fa;
  --accent: #38bdf8; /* blue-400 */
  --accent2: #34d399; /* green-400 */
  --danger: #f87171;
  font-family: 'Inter', system-ui, sans-serif;
}
html,body {margin:0;height:100%;background:var(--bg);color:var(--text);} 
.container {max-width:1200px;min-width:900px;width:90vw;margin:2.5rem auto;padding:2.5rem 2.2rem 2rem 2.2rem;background:var(--panel);border-radius:22px;box-shadow:0 8px 32px 0 rgba(31,38,135,0.17);}
h1 {text-align:center;margin-bottom:2rem;font-weight:800;letter-spacing:-0.04em;font-size:2.2rem;background:linear-gradient(90deg,var(--accent),var(--accent2));background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;}

/* table */
table {width:100%;border-collapse:separate;border-spacing:0 0.3rem;font-size:1rem;table-layout:fixed;}
th,td {border:1px solid var(--border);padding:0.5rem 0.3rem;text-align:center;transition:background 0.2s;}
th {background:var(--panel);font-weight:700;font-size:1rem;} 
tr {background:rgba(18,43,54,0.93);border-radius:8px;}
tr:nth-child(even) {background:rgba(18,43,54,0.8);} 
th:nth-child(1), td:nth-child(1) {width:2.2rem;}
th:nth-child(2), td:nth-child(2) {width:4.4rem;}
th:nth-child(3), td:nth-child(3) {width:7.5rem;}
th:nth-child(4), td:nth-child(4) {width:8rem;}
th:nth-child(5), td:nth-child(5), th:nth-child(6), td:nth-child(6) {width:7.5rem;}
th:nth-child(7), td:nth-child(7) {width:4.5rem;}
th:nth-child(8), td:nth-child(8) {width:2.5rem;}
input,select {background:#122b36;border:1px solid var(--border);color:var(--text);padding:0.35rem 0.4rem;border-radius:6px;font-size:0.98rem;width:100%;box-sizing:border-box;transition:border 0.2s;}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{opacity:0.5;}
input:focus,select:focus {outline:2px solid var(--accent);} 
button {cursor:pointer;font-weight:600;border-radius:6px;border:none;transition:background 0.2s,box-shadow 0.2s;}
button#add-row {margin-top:1.1rem;background:linear-gradient(90deg,var(--accent),var(--accent2));color:#fff;padding:0.55rem 1.2rem;font-size:1.1rem;box-shadow:0 2px 8px 0 rgba(56,189,248,0.08);}
button#add-row:hover {background:linear-gradient(90deg,var(--accent2),var(--accent));}

/* results */
#result {margin-top:2.3rem;background:rgba(18,43,54,0.93);padding:1.1rem 0.7rem 1rem 0.7rem;border-radius:10px;box-shadow:0 2px 10px 0 rgba(52,211,153,0.07);}
#result.hidden {display:none;}
.stats {display:flex;gap:1.2rem;justify-content:center;margin:1.2rem 0 0.2rem 0;}
.stats > div {background:rgba(18,43,54,0.93);padding:0.6rem 1rem;border-radius:8px;box-shadow:0 1px 4px 0 rgba(52,211,153,0.07);min-width:70px;}
.label {display:block;font-size:0.8rem;color:#7dd3fc;margin-bottom:0.3rem;letter-spacing:0.03em;}

/* misc */
.delete {color:var(--danger);background:none;border:none;font-size:1.25rem;line-height:1;cursor:pointer;transition:color 0.2s;width:100%;}
.delete:hover {color:#ef4444;background:rgba(255,255,255,0.07);}