:root{
    --bg:#fffaf9;
    --bg-blush:#f7e8df;
    --panel:rgba(255,255,255,0.68);
    --panel-strong:rgba(255,255,255,0.88);
    --text:#30262d;
    --muted:#7d6a72;
    --primary:#c78f9f;
    --secondary:#f7e8df;
    --accent:#d4af37;
    --danger:#b65a6d;
    --shadow:0 24px 70px rgba(99,68,78,0.12);
    --radius:24px;
    cursor:none;
}
*{box-sizing:border-box}
body{
    margin:0;
    font-family:"Manrope",sans-serif;
    color:var(--text);
    background:
      radial-gradient(circle at top left, rgba(212,175,55,0.18), transparent 30%),
      radial-gradient(circle at bottom right, rgba(199,143,159,0.2), transparent 28%),
      linear-gradient(135deg, #fffdfc 0%, #f9f0eb 42%, #fff7f8 100%);
    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(122,95,104,.15);
    background:rgba(255,255,255,.8);
    border-radius:18px;
    padding:14px 16px;
    color:var(--text);
    outline:none;
    transition:.25s ease;
}
input:focus,select:focus,textarea:focus{
    border-color:rgba(199,143,159,.7);
    box-shadow:0 0 0 4px rgba(199,143,159,.12);
}
textarea{min-height:110px;resize:vertical}
.glass{
    background:var(--panel);
    backdrop-filter:blur(24px);
    border:1px solid rgba(255,255,255,.5);
    box-shadow:var(--shadow);
}
.glass-soft{
    background:rgba(255,255,255,.55);
    border:1px solid rgba(255,255,255,.55);
    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),#b27788);
    color:#fff;
    box-shadow:0 12px 30px rgba(199,143,159,.34);
}
.btn-outline{
    background:rgba(255,255,255,.72);
    color:var(--text);
    border:1px solid rgba(122,95,104,.14);
}
.btn-danger{
    background:rgba(182,90,109,.14);
    color:var(--danger);
}
.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:"";
    position:absolute;
    inset:auto -20% -45% auto;
    width:360px;height:360px;
    background:radial-gradient(circle, rgba(212,175,55,.24), transparent 65%);
}
.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:rgba(255,255,255,.55);
}
.login-meta strong,.login-meta span{display:block}
.loader-overlay{
    position:fixed;
    inset:0;
    display:grid;
    place-items:center;
    background:radial-gradient(circle at center, rgba(247,232,223,.9), rgba(255,248,248,.98));
    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(212,175,55,.5));
    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:"";
    position:absolute;left:50%;top:50%;
    width:420px;height:420px;border-radius:50%;
    transform:translate(-50%,-50%);
    background:
      radial-gradient(circle, rgba(255,255,255,.86) 0%, rgba(247,232,223,.45) 36%, rgba(199,143,159,.15) 52%, transparent 68%);
    box-shadow:0 0 90px rgba(212,175,55,.18);
    animation:pulsePortal 2.2s ease-in-out infinite;
}
.sparkles::before,.sparkles::after{
    content:"";
    position:absolute;inset:10%;
    background:
      radial-gradient(circle at 20% 30%, rgba(212,175,55,.8) 0 2px, transparent 3px),
      radial-gradient(circle at 75% 25%, rgba(255,255,255,.9) 0 2px, transparent 3px),
      radial-gradient(circle at 40% 60%, rgba(199,143,159,.7) 0 2px, transparent 3px),
      radial-gradient(circle at 65% 75%, rgba(212,175,55,.7) 0 2px, transparent 3px),
      radial-gradient(circle at 85% 55%, rgba(255,255,255,.95) 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:linear-gradient(135deg, rgba(199,143,159,.18), rgba(212,175,55,.1));
    color:var(--text);
    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}
.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;
}
.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(122,95,104,.1);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;
}
.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(199,143,159,.15);
    color:#8d5d6d;
}
.badge-paid,.badge-completed,.badge-active,.badge-available,.badge-admin{background:rgba(98,169,123,.16);color:#2e7d4c}
.badge-overdue,.badge-urgent,.badge-damaged,.badge-cancelled,.badge-inactive,.badge-low{background:rgba(182,90,109,.15);color:#9d475a}
.badge-unpaid,.badge-waiting,.badge-lead,.badge-staff{background:rgba(212,175,55,.18);color:#8b6d18}
.badge-vip,.badge-manager,.badge-in-progress,.badge-ordered,.badge-partially-paid{background:rgba(109,104,180,.12);color:#5c57a9}
.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}
.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,#79b28b,#4f9365)}
.toast-error{background:linear-gradient(135deg,#c9798a,#9f5064)}
.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:12px;height:12px;background:radial-gradient(circle,#d4af37,#c78f9f)}
.cursor-ring{width:36px;height:36px;border:1px solid rgba(199,143,159,.6);transform:translate(-12px,-12px)}
.spark-trail{
    position:fixed;width:8px;height:8px;border-radius:50%;
    background:radial-gradient(circle, rgba(212,175,55,.9), rgba(199,143,159,0));
    pointer-events:none;z-index:90;animation:fadeTrail .7s linear forwards;
}
#calendar{min-height:420px}
@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(212,175,55,.2))}
    55%{opacity:1;transform:scale(1.04) rotate(0);filter:blur(0) drop-shadow(0 0 26px rgba(212,175,55,.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}
}
@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}
}
