:root {
    --bg: #050807;
    --card: #0b1711;
    --text: #f6ffe9;
    --muted: #b6c7b0;
    --accent-green: #3cff8b;
    --accent-yellow: #f5d94e;
    --border: #1f3d2f;
}
body.theme-light {
    --bg: #f7f7f7;
    --card: #ffffff;
    --text: #152018;
    --muted: #4d5e53;
    --accent-green: #1e8f4f;
    --accent-yellow: #c1960f;
    --border: #d7eadc;
}
* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    background: radial-gradient(circle at top, #0a1a12, var(--bg));
    color: var(--text);
}
.site-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 24px; border-bottom: 1px solid var(--border); position: sticky; top: 0;
    backdrop-filter: blur(8px); background: rgba(0,0,0,.35);
}
.brand { font-size: 22px; color: var(--accent-green); font-weight: 700; text-shadow: 0 0 12px var(--accent-green); }
.controls { display: flex; gap: 10px; align-items: center; }
#themeToggle {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    font-size: 20px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
}
main { padding: 18px; max-width: 1260px; margin: 0 auto; }
.hero h1 { margin-bottom: 8px; }
.cards-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.box-card {
    background: linear-gradient(160deg, var(--card), #0d2218);
    border: 1px solid var(--border); border-radius: 14px; padding: 16px;
    box-shadow: 0 10px 28px rgba(0,0,0,.22);
}
.box-cube {
    width: 68px; height: 68px; margin: 0 auto 12px; border-radius: 14px;
    background: linear-gradient(145deg, var(--accent-green), var(--accent-yellow));
    box-shadow: 0 0 12px rgba(60,255,139,.22);
}
.box-image {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid var(--border);
    margin-bottom: 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
}
.card-actions { display: flex; gap: 8px; margin-top: 10px; }
.btn-primary, .btn-secondary, button {
    border: 0; padding: 10px 12px; border-radius: 10px; cursor: pointer;
}
.btn-primary { background: var(--accent-green); color: #001006; font-weight: 700; }
.btn-secondary { background: var(--accent-yellow); color: #2e2400; font-weight: 700; }
.modal {
    position: fixed; inset: 0; background: rgba(0,0,0,.58);
    display: flex; align-items: center; justify-content: center; z-index: 30;
}
.hidden { display: none; }
.modal-content {
    width: min(640px, 94vw); max-height: 88vh; overflow: auto;
    background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 16px;
}
.scrollable { scrollbar-width: thin; }
label { display: block; margin: 8px 0; }
input, textarea, select {
    width: 100%; margin-top: 4px; padding: 10px; border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--text);
    font: inherit;
}
select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--text) 50%),
        linear-gradient(135deg, var(--text) 50%, transparent 50%);
    background-position:
        calc(100% - 18px) calc(50% - 3px),
        calc(100% - 12px) calc(50% - 3px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 32px;
}
select option {
    color: #0d1510;
    background: #f7fff9;
}
.payment-info {
    margin-top: 12px; padding: 10px; border-radius: 10px;
    border: 1px solid var(--accent-yellow); background: rgba(245,217,78,.18);
}
.dash-card { border: 1px solid var(--border); padding: 10px; border-radius: 10px; margin-bottom: 10px; }
.muted { opacity: 0.7; }
.box-anim-1 .box-cube { animation: spin 14s linear infinite; }
.box-anim-2 .box-cube { animation: pulse 5s ease-in-out infinite; }
.box-anim-3 .box-cube { animation: float 6s ease-in-out infinite; }
.box-anim-4 .box-cube { animation: wobble 7s ease-in-out infinite; }
.box-anim-5 .box-cube { animation: glow 6s ease-in-out infinite; }
.box-anim-6 .box-cube { animation: spin 16s linear infinite reverse; }
.box-anim-7 .box-cube { animation: pulse 6.5s ease-in-out infinite; }
.box-anim-8 .box-cube { animation: glow 7s ease-in-out infinite; }
.box-anim-9 .box-cube { animation: float 7.5s ease-in-out infinite; }
@keyframes spin { to { transform: rotate(360deg) } }
@keyframes pulse { 50% { transform: scale(1.025) } }
@keyframes float { 50% { transform: translateY(-3px) rotate(1.5deg) } }
@keyframes wobble { 25% { transform: rotate(-2deg) } 75% { transform: rotate(2deg) } }
@keyframes glow { 50% { box-shadow: 0 0 16px rgba(245,217,78,.28); } }