:root{
    --bg:#000;
    --bg-blush:#000;
    --panel:rgba(0,0,0,0.92);
    --panel-strong:#000;
    --text:#fff;
    --muted:#d8cdb8;
    --primary:#c8ae75;
    --secondary:#000;
    --accent:#f6f1e8;
    --danger:#ff6c86;
    --shadow:0 18px 42px rgba(0,0,0,0.72);
    --radius:24px;
    cursor:none;
}
*{box-sizing:border-box}
body{
    margin:0;
    font-family:"Manrope",sans-serif;
    color:var(--text);
    background:#000;
    min-height:100vh;
}
h1,h2,h3{font-family:"Cormorant Garamond",serif;margin:0 0 .4rem}
a{text-decoration:none;color:inherit}
img{max-width:100%}
input,select,textarea,button{
    font:inherit;
}
input,select,textarea{
    width:100%;
    border:1px solid rgba(200,174,117,.45);
    background:#000;
    border-radius:18px;
    padding:14px 16px;
    color:var(--text);
    outline:none;
    transition:.25s ease;
}
input:focus,select:focus,textarea:focus{
    border-color:rgba(200,174,117,.75);
    box-shadow:0 0 0 4px rgba(200,174,117,.12);
}
textarea{min-height:110px;resize:vertical}
.glass{
    background:var(--panel);
    backdrop-filter:blur(24px);
    border:1px solid rgba(200,174,117,.42);
    box-shadow:var(--shadow);
}
.glass-soft{
    background:#000;
    border:1px solid rgba(200,174,117,.4);
    backdrop-filter:blur(18px);
}
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.5rem;
    border:none;
    border-radius:999px;
    padding:12px 20px;
    cursor:pointer;
    transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{
    background:linear-gradient(135deg,var(--primary),#8f7440);
    color:#050505;
    box-shadow:0 12px 30px rgba(200,174,117,.28);
}
.btn-outline{
    background:#000;
    color:#fff;
    border:1px solid rgba(246,241,232,.22);
}
.btn-danger{
    background:rgba(255,108,134,.14);
    color:#fff;
}
.btn-small{padding:8px 14px;font-size:.83rem}
.eyebrow{
    text-transform:uppercase;
    letter-spacing:.18em;
    font-size:.72rem;
    color:var(--muted);
}
.muted{color:var(--muted)}
.login-body{overflow:hidden}
.login-wrap{
    min-height:100vh;
    display:grid;
    place-items:center;
    padding:2rem;
}
.login-panel{
    width:min(960px,100%);
    border-radius:34px;
    padding:2rem;
    display:grid;
    gap:2rem;
    position:relative;
    overflow:hidden;
}
.login-panel::before{
    content:none;
}
.brand-block{
    display:grid;
    grid-template-columns:120px 1fr;
    gap:1.4rem;
    align-items:center;
}
.brand-logo{width:120px;border-radius:22px}
.auth-form{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.auth-form label{display:grid;gap:.5rem;color:var(--muted)}
.auth-form button{grid-column:1/-1}
.login-meta{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1rem;
}
.login-meta div{
    border-radius:18px;
    padding:1rem;
    background:#000;
    border:1px solid rgba(200,174,117,.35);
}
.login-meta strong,.login-meta span{display:block}
.loader-overlay{
    position:fixed;
    inset:0;
    display:grid;
    place-items:center;
    background:#000;
    z-index:40;
    transition:opacity .8s ease, visibility .8s ease;
}
.loader-overlay.hide{opacity:0;visibility:hidden}
.loader-logo{
    width:170px;
    filter:drop-shadow(0 0 25px rgba(200,174,117,.45));
    animation:logoReveal 2.4s ease forwards;
    position:relative;
    z-index:3;
    border-radius:22px;
}
.loader-copy{text-align:center;position:relative;z-index:3}
.portal,.sparkles{
    position:absolute;inset:0;pointer-events:none;
}
.portal::before{
    content:none;
}
.sparkles::before,.sparkles::after{
    content:"";
    position:absolute;inset:10%;
    background:
      radial-gradient(circle at 20% 30%, rgba(216,192,138,.85) 0 2px, transparent 3px),
      radial-gradient(circle at 75% 25%, rgba(255,255,255,.75) 0 2px, transparent 3px),
      radial-gradient(circle at 40% 60%, rgba(200,174,117,.7) 0 2px, transparent 3px),
      radial-gradient(circle at 65% 75%, rgba(216,192,138,.7) 0 2px, transparent 3px),
      radial-gradient(circle at 85% 55%, rgba(255,255,255,.85) 0 2px, transparent 3px);
    animation:floatSparkles 4s linear infinite;
}
.app-shell{display:grid;grid-template-columns:300px 1fr;gap:1.25rem;padding:1.25rem;min-height:100vh}
.sidebar{
    border-radius:30px;
    padding:1.5rem;
    display:flex;
    flex-direction:column;
    gap:1.5rem;
}
.sidebar-brand{display:grid;grid-template-columns:68px 1fr;gap:1rem;align-items:center}
.sidebar-brand img{border-radius:18px}
.sidebar-brand p{margin:.2rem 0 0;color:var(--muted);font-size:.85rem}
.nav{display:grid;gap:.55rem}
.nav a{
    padding:14px 16px;
    border-radius:18px;
    color:var(--muted);
    transition:.25s ease;
}
.nav a.active,.nav a:hover{
    background:var(--primary);
    color:#050505;
    transform:translateX(3px);
}
.main-panel{display:grid;grid-template-rows:auto 1fr;gap:1rem}
.topbar{
    border-radius:26px;
    padding:1.1rem 1.4rem;
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.topbar-actions{display:flex;align-items:center;gap:1rem}
.profile-chip{
    border-radius:999px;
    padding:.7rem 1rem;
    display:grid;
}
.content{display:grid;gap:1rem}
.hero-band{
    border-radius:30px;
    padding:1.5rem 1.7rem;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:1rem;
}
.hero-band h2{font-size:2rem}
.hero-metrics{display:flex;gap:1rem;flex-wrap:wrap}
.hero-metric{
    min-width:160px;
    padding:1rem 1.1rem;
    border-radius:20px;
    background:#000;
    border:1px solid rgba(200,174,117,.42);
}
.hero-metric span,.rank-item small,.event-chip small{display:block;color:var(--muted)}
.hero-metric strong{font-size:1.6rem}
.workflow-strip{
    border-radius:28px;
    padding:1rem;
    display:grid;
    grid-template-columns:1.2fr repeat(5, minmax(130px,1fr));
    gap:.8rem;
    align-items:stretch;
}
.workflow-strip h3{font-size:1.35rem}
.workflow-strip a,.workflow-info{
    display:grid;
    gap:.2rem;
    border:1px solid rgba(200,174,117,.28);
    border-radius:18px;
    padding:.95rem;
    background:rgba(255,255,255,.03);
    min-height:92px;
    transition:.25s ease;
}
.workflow-strip a:hover{
    transform:translateY(-2px);
    border-color:rgba(200,174,117,.65);
}
.workflow-strip span{
    color:var(--muted);
    font-size:.78rem;
    line-height:1.35;
}
.stats-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:1rem;
}
.stat-card{
    border-radius:24px;
    padding:1.2rem;
    display:grid;
    gap:.3rem;
    animation:floatUp .6s ease both;
    position:relative;
    overflow:hidden;
}
.stat-card::after{
    content:none;
}
.stat-card span{color:var(--muted);font-size:.85rem}
.stat-card strong{font-size:1.5rem}
.panel-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:1rem;
}
.two-col{grid-template-columns:minmax(320px,460px) 1fr}
.panel{
    border-radius:28px;
    padding:1.3rem;
    overflow:hidden;
}
.panel-head{
    display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem
}
.table-wrap{overflow:auto}
table{width:100%;border-collapse:collapse}
th,td{padding:.9rem .7rem;border-bottom:1px solid rgba(200,174,117,.28);vertical-align:top}
th{text-align:left;color:var(--muted);font-size:.82rem;font-weight:600}
.actions{display:flex;flex-wrap:wrap;gap:.45rem}
.grid-form{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1rem;
}
.field-label{
    align-self:end;
    color:var(--muted);
    font-size:.78rem;
    font-weight:800;
    letter-spacing:.12em;
    text-transform:uppercase;
}
.checkbox-line{
    display:flex;
    align-items:center;
    gap:.65rem;
    color:var(--muted);
    font-weight:700;
}
.checkbox-line input{
    width:auto;
    accent-color:var(--primary);
}
.form-section-title{
    grid-column:1/-1;
    color:var(--text);
    border-top:1px solid rgba(200,174,117,.3);
    padding-top:1rem;
    font-family:"Cormorant Garamond",serif;
    font-size:1.25rem;
    font-weight:700;
}
.grid-form textarea,.grid-form button,.grid-form .line-items,.grid-form input[type="file"]{grid-column:1/-1}
.line-items{display:grid;gap:.75rem}
.item-row{display:grid;grid-template-columns:2fr .8fr .9fr;gap:.75rem}
.badge{
    display:inline-flex;
    padding:7px 11px;
    border-radius:999px;
    font-size:.75rem;
    font-weight:700;
    background:rgba(200,174,117,.16);
    color:#f6f1e8;
}
.badge-paid,.badge-completed,.badge-active,.badge-available,.badge-admin{background:rgba(200,174,117,.2);color:#f6f1e8}
.badge-overdue,.badge-urgent,.badge-damaged,.badge-cancelled,.badge-inactive,.badge-low{background:rgba(255,108,134,.18);color:#ffd9e0}
.badge-unpaid,.badge-waiting,.badge-lead,.badge-staff{background:rgba(32,27,18,.96);color:#ead9ae;border:1px solid rgba(216,192,138,.18)}
.badge-vip,.badge-manager,.badge-in-progress,.badge-ordered,.badge-partially-paid{background:rgba(80,64,34,.82);color:#f6f1e8}
.search-bar{display:flex;gap:.8rem}
.module-head{display:flex;justify-content:flex-end}
.clean-list{list-style:none;padding:0;margin:0;display:grid;gap:.8rem}
.event-stack,.rank-list{display:grid;gap:.8rem}
.event-chip,.rank-item{
    display:flex;
    justify-content:space-between;
    gap:.8rem;
    align-items:center;
    padding:1rem;
    border-radius:18px;
    background:#000;
    border:1px solid rgba(200,174,117,.35);
}
.event-chip{justify-content:flex-start}
.event-dot{
    width:12px;
    height:12px;
    border-radius:50%;
    box-shadow:0 0 18px currentColor;
    margin-top:3px;
}
.rank-item span{font-weight:700}
.toast{
    position:fixed;right:24px;bottom:24px;z-index:50;
    padding:14px 18px;border-radius:16px;color:#fff;box-shadow:var(--shadow);opacity:0;transform:translateY(10px);transition:.35s ease;
}
.toast.show{opacity:1;transform:translateY(0)}
.toast.inline{position:static;color:var(--text);opacity:1;transform:none}
.toast-success{background:linear-gradient(135deg,#c8ae75,#8f7440);color:#050505}
.toast-error{background:linear-gradient(135deg,#ff7c98,#b63e5a)}
.cursor-dot,.cursor-ring{
    position:fixed;left:0;top:0;border-radius:50%;pointer-events:none;z-index:100;mix-blend-mode:multiply;
}
.cursor-dot{
    width:42px;
    height:42px;
    background:url("../images/cursor-padel-racket.svg") center/contain no-repeat;
    filter:drop-shadow(0 8px 14px rgba(0,0,0,.42)) drop-shadow(0 0 10px rgba(200,174,117,.35));
}
.cursor-ring{
    width:16px;
    height:16px;
    border:2px solid rgba(246,241,232,.85);
    background:rgba(200,174,117,.18);
    transform:translate(-8px,-8px);
}
.spark-trail{
    position:fixed;width:8px;height:8px;border-radius:50%;
    background:radial-gradient(circle, rgba(216,192,138,.92), rgba(200,174,117,0));
    pointer-events:none;z-index:90;animation:fadeTrail .7s linear forwards;
}
#calendar{min-height:420px}
.public-invoice-body{
    background:#050505;
    cursor:auto;
}
.public-invoice-body .cursor-dot,
.public-invoice-body .cursor-ring{display:none}
.public-invoice-shell{
    min-height:100vh;
    padding:1.25rem;
}
.public-invoice-panel{
    width:min(1180px,100%);
    margin:0 auto;
    border-radius:28px;
    padding:1.25rem;
}
.public-invoice-head{
    display:flex;
    gap:1rem;
    align-items:center;
    margin-bottom:1rem;
}
.public-invoice-head img{
    width:74px;
    height:74px;
    border-radius:18px;
    object-fit:contain;
    background:#050505;
    border:1px solid rgba(200,174,117,.35);
}
.public-invoice-actions{
    display:flex;
    flex-wrap:wrap;
    gap:.75rem;
    align-items:center;
    margin-bottom:1rem;
}
.payfast-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:46px;
    border-radius:999px;
    padding:12px 20px;
    background:linear-gradient(135deg,#c8ae75,#8f7440);
    color:#050505;
    font-weight:800;
}
.payfast-pending{
    border:1px solid rgba(200,174,117,.36);
    border-radius:18px;
    padding:12px 14px;
    color:#d8cdb8;
}
.public-invoice-frame{
    width:100%;
    min-height:820px;
    border:1px solid rgba(200,174,117,.28);
    border-radius:18px;
    background:#fff;
}
@keyframes pulsePortal{
    0%,100%{transform:translate(-50%,-50%) scale(.92)}
    50%{transform:translate(-50%,-50%) scale(1.02)}
}
@keyframes floatSparkles{
    0%{transform:translateY(0);opacity:.6}
    50%{transform:translateY(-10px);opacity:1}
    100%{transform:translateY(-24px);opacity:0}
}
@keyframes logoReveal{
    0%{opacity:0;transform:scale(.66) rotate(-5deg);filter:blur(8px) drop-shadow(0 0 10px rgba(200,174,117,.2))}
    55%{opacity:1;transform:scale(1.04) rotate(0);filter:blur(0) drop-shadow(0 0 26px rgba(200,174,117,.42))}
    100%{opacity:1;transform:scale(1)}
}
@keyframes floatUp{
    from{opacity:0;transform:translateY(12px)}
    to{opacity:1;transform:translateY(0)}
}
@keyframes fadeTrail{
    to{opacity:0;transform:translateY(10px) scale(2.8)}
}
@media (max-width: 1080px){
    .app-shell{grid-template-columns:1fr}
    .sidebar{position:static}
    .two-col{grid-template-columns:1fr}
    .workflow-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 720px){
    .login-panel,.topbar,.panel,.sidebar{border-radius:24px}
    .brand-block,.auth-form,.login-meta,.grid-form,.item-row{grid-template-columns:1fr}
    .app-shell{padding:.8rem}
    .topbar{flex-direction:column;align-items:flex-start;gap:1rem}
    .topbar-actions{width:100%;justify-content:space-between}
    .search-bar{flex-direction:column}
    .hero-band{flex-direction:column;align-items:flex-start}
}