/* Modernized theme with subtle gradients, shadows and animations */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

:root{
    --bg:#f4f7fb;
    --card:#ffffff;
    --accent:#3178f6;
    --muted:#6b7280;
    --danger:#e74c3c;
}

body{
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    background: radial-gradient(1200px 600px at 10% 10%, rgba(49,120,246,0.06), transparent),
                radial-gradient(800px 400px at 90% 90%, rgba(99,102,241,0.04), transparent),
                var(--bg);
    margin:0;
    padding:0;
    color:#0f172a;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

.container {
    max-width:1200px;
    margin:40px auto;
    padding:28px;
    background: linear-gradient(180deg, rgba(255,255,255,0.9), var(--card));
    border-radius:14px;
    box-shadow: 0 8px 30px rgba(16,24,40,0.06);
    transition: transform .35s ease, box-shadow .35s ease;
}

.container:hover{ transform: translateY(-4px); box-shadow: 0 16px 40px rgba(16,24,40,0.08); }

.fade-in{ animation: fadeIn .45s ease both; }

@keyframes fadeIn{ from { opacity: 0; transform: translateY(6px);} to { opacity:1; transform: none; } }

h1, h2{ color:#0f172a; margin-bottom:18px; }
h1{ font-size:1.9rem; margin-top:0; padding-bottom:12px; border-bottom:3px solid rgba(49,120,246,0.12); display:flex; align-items:center; gap:10px; }
h2{ font-size:1.2rem; margin-top:26px; color:var(--muted); }

ul {
    list-style: none;
    padding: 0;
}

ul li{ background: linear-gradient(90deg, rgba(249,250,251,1), rgba(246,247,249,1)); margin:10px 0; padding:12px 14px; border-radius:8px; transition: transform .18s ease, box-shadow .18s ease; display:flex; align-items:center; }
ul li:hover{ transform: translateY(-3px); box-shadow: 0 6px 18px rgba(15,23,42,0.06); }
ul li a{ text-decoration:none; color:var(--accent); font-weight:600; }

table{ width:100%; border-collapse:collapse; margin-top:20px; background:transparent; }
table th, table td{ padding:14px 16px; text-align:left; border-bottom:1px solid rgba(15,23,42,0.04); }
table th{ background:linear-gradient(90deg,var(--accent), #5aa0ff); color:#fff; font-weight:700; font-size:0.95rem; }
table tr{ transition: background .18s ease, transform .18s ease; }
table tr:hover{ background: linear-gradient(90deg, rgba(49,120,246,0.03), rgba(49,120,246,0.01)); transform: translateY(-2px); }

form{ margin:12px 0; display:flex; gap:10px; align-items:center; flex-direction:column; }

input[type="number"], input[type="text"]{ padding:10px 12px; border:1px solid rgba(15,23,42,0.08); border-radius:8px; font-size:0.95rem; width:100%; box-shadow:inset 0 1px 0 rgba(255,255,255,0.6); }

._row{ display:flex; gap:10px; width:100%; }

@media(min-width:760px){ form{ flex-direction:row; } ._row{ flex-direction:row; } }

button{ padding:10px 16px; background:var(--accent); color:#fff; border:none; border-radius:8px; cursor:pointer; font-weight:600; transition: transform .12s ease, box-shadow .12s ease; }
button:hover{ transform: translateY(-2px); box-shadow: 0 8px 20px rgba(49,120,246,0.12); }
button.deduct{ background:var(--danger); }
button.deduct:hover{ box-shadow: 0 8px 20px rgba(231,76,60,0.12); }

.btn-secondary{ background:transparent; color:var(--accent); border:1px solid rgba(49,120,246,0.12); }

.template-remark{ font-weight:600; color:#0f172a; margin-bottom:6px; }
.template-text{ font-family:monospace; font-size:0.9rem; color:#111827; }

.small { font-size:0.85rem; color:var(--muted); }

a{ display:inline-block; margin-top:18px; color:var(--accent); text-decoration:none; font-weight:600; }
a:hover{ text-decoration:underline; }

/* helper for subtle badge */
.badge{ background:rgba(49,120,246,0.12); color:var(--accent); padding:4px 8px; border-radius:999px; font-size:0.85rem; font-weight:600; }