:root{--yellow:#ffd400;--yellow-dark:#e5b900;--black:#090909;--black-soft:#171717;--bg:#f4f5f7;--card:#fff;--text:#171717;--muted:#70757f;--success:#26a65b;--danger:#d93c45;--warning:#e58c19;--border:#e4e6ea;--shadow:0 8px 24px rgba(15,15,15,.08)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Segoe UI,Inter,Arial,sans-serif;background:var(--bg);color:var(--text)}a{color:inherit}.app-shell{min-height:100vh}.sidebar{position:fixed;inset:0 auto 0 0;width:270px;background:linear-gradient(180deg,#050505,#111);color:#fff;padding:18px 14px;display:flex;flex-direction:column;z-index:1000;box-shadow:12px 0 30px rgba(0,0,0,.13)}.brand{display:flex;flex-direction:column;align-items:center;text-decoration:none;padding:5px 8px 18px;border-bottom:1px solid rgba(255,255,255,.12)}.brand img{width:205px;height:82px;object-fit:contain;background:#fff;border-radius:12px;padding:4px}.brand span{font-size:13px;font-weight:800;letter-spacing:.5px;margin-top:8px;color:var(--yellow)}.side-nav{padding-top:18px;display:flex;flex-direction:column;gap:7px}.side-nav a{display:flex;align-items:center;gap:12px;text-decoration:none;padding:12px 14px;border-radius:12px;color:#efefef;font-weight:600;font-size:14px;transition:.18s}.side-nav a:hover{background:rgba(255,212,0,.12);color:#fff}.side-nav a.active{background:linear-gradient(135deg,var(--yellow),#ffbc00);color:#080808;box-shadow:0 7px 18px rgba(255,212,0,.2)}.nav-icon{font-size:20px;width:24px;text-align:center}.nav-label{font-size:10px;text-transform:uppercase;letter-spacing:1.4px;color:#777;margin:14px 14px 2px}.sidebar-user{margin-top:auto;display:flex;align-items:center;gap:11px;border-top:1px solid rgba(255,255,255,.12);padding:17px 8px 12px}.user-avatar{width:43px;height:43px;border-radius:50%;display:grid;place-items:center;background:var(--yellow);color:#000;font-weight:900}.sidebar-user strong,.sidebar-user small{display:block}.sidebar-user small{color:var(--yellow);margin-top:3px}.logout-link{display:flex;align-items:center;gap:9px;color:#fff;text-decoration:none;padding:10px;border-radius:10px}.logout-link:hover{background:#222}.main-panel{margin-left:270px;min-height:100vh;display:flex;flex-direction:column}.topbar{height:78px;background:#fff;border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 26px;gap:18px;position:sticky;top:0;z-index:900}.menu-toggle{display:none;border:0;background:transparent;font-size:27px;cursor:pointer}.welcome{display:flex;flex-direction:column}.welcome small{color:var(--muted)}.welcome strong{font-size:21px}.topbar-right{margin-left:auto;display:flex;align-items:center;gap:22px}.topbar-right img{width:116px;height:48px;object-fit:contain}.today-date{font-weight:700}.container{width:100%;max-width:none;margin:0;padding:20px 18px 32px;flex:1}.page-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px}.page-heading h1{margin-bottom:5px}.hero-strip{background:linear-gradient(135deg,#080808,#1e1e1e);color:#fff;border-radius:20px;padding:20px 22px;display:grid;grid-template-columns:1.2fr .8fr .9fr .9fr;gap:0;margin-bottom:18px;box-shadow:0 12px 28px rgba(0,0,0,.15);overflow:hidden}.hero-stat{padding:4px 22px;border-left:1px solid rgba(255,255,255,.2);display:flex;flex-direction:column;justify-content:center}.hero-stat:first-child{border-left:0;padding-left:0}.hero-stat small{text-transform:uppercase;font-size:11px;letter-spacing:.7px;color:#c9c9c9}.hero-stat strong{font-size:22px;margin:5px 0}.hero-stat .accent{color:var(--yellow)}.hero-progress{height:9px;background:#3a3a3a;border-radius:999px;overflow:hidden;margin-top:7px}.hero-progress span{display:block;height:100%;background:var(--yellow);border-radius:inherit}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}.summary-grid{grid-template-columns:repeat(6,minmax(150px,1fr));margin-bottom:18px}.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:18px;box-shadow:var(--shadow)}.summary-card{text-align:center;min-height:148px;display:flex;flex-direction:column;align-items:center;justify-content:center}.summary-icon{width:45px;height:45px;border-radius:12px;background:#fff7cc;color:#111;display:grid;place-items:center;font-size:23px;margin-bottom:10px}.metric{font-size:28px;font-weight:800;line-height:1.1}.metric-label{text-transform:uppercase;font-size:11px;letter-spacing:.5px;color:var(--muted);margin-bottom:7px}.muted{color:var(--muted)}h1,h2,h3{margin-top:0}.dashboard-content{display:grid;grid-template-columns:1.4fr 1fr;gap:16px;margin-bottom:18px}.chart-card canvas{max-height:310px}.section-title{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}.section-title h2{margin:0}.progress{height:11px;background:#ececec;border-radius:999px;overflow:hidden}.progress>span{display:block;height:100%;background:linear-gradient(90deg,var(--yellow),#ffb700);border-radius:inherit}.table-wrap{overflow:auto;border:1px solid var(--border);border-radius:14px;background:#fff;box-shadow:var(--shadow)}table{width:100%;border-collapse:collapse;background:#fff}th,td{padding:12px 14px;border-bottom:1px solid var(--border);text-align:left;vertical-align:middle}th{background:#111;color:#fff;font-size:12px;text-transform:uppercase;letter-spacing:.4px}tr:last-child td{border-bottom:0}tbody tr:hover{background:#fffdf0}.leaderboard-section{border:2px solid var(--yellow);border-radius:20px;background:#fff;padding:16px;box-shadow:var(--shadow)}.leaderboard-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(205px,1fr));gap:13px}.leader-card{position:relative;border:1px solid var(--border);border-radius:15px;padding:17px;background:linear-gradient(180deg,#fff,#fcfcfc);box-shadow:0 5px 14px rgba(0,0,0,.06)}.leader-rank{position:absolute;left:12px;top:12px;width:31px;height:31px;border-radius:50%;display:grid;place-items:center;background:#777;color:#fff;font-weight:900}.leader-card:nth-child(1) .leader-rank{background:var(--yellow);color:#000}.leader-card:nth-child(2) .leader-rank{background:#a9adb3}.leader-card:nth-child(3) .leader-rank{background:#c97a2b}.leader-avatar{width:68px;height:68px;border-radius:50%;object-fit:cover;display:block;margin:0 auto 10px;border:4px solid #fff;box-shadow:0 0 0 2px var(--yellow)}.leader-initial{display:grid;place-items:center;background:#111;color:var(--yellow);font-weight:900;font-size:25px}.leader-card h3{text-align:center;margin-bottom:4px}.leader-pct{text-align:center;font-size:29px;font-weight:900;color:#111}.leader-pct span{color:var(--yellow-dark)}.leader-meta{text-align:center;color:var(--muted);font-size:12px;min-height:35px;margin:7px 0}.rank{float:right;background:#fff1a6;color:#111;font-weight:800;padding:5px 9px;border-radius:8px}.btn{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:9px;padding:10px 14px;background:var(--yellow);color:#080808;text-decoration:none;cursor:pointer;font-weight:800;box-shadow:0 4px 10px rgba(255,212,0,.18)}.btn:hover{filter:brightness(.96);transform:translateY(-1px)}.btn.secondary{background:#333;color:#fff}.btn.danger{background:var(--danger);color:#fff}.btn.warning{background:var(--warning);color:#fff}.btn.success-btn{background:var(--success);color:#fff}.btn.small{padding:7px 10px;font-size:12px}.actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.inline-form{display:inline;margin:0}form.card{max-width:none;width:100%}label{display:block;font-weight:700;margin:12px 0 6px}input,select,textarea{width:100%;padding:11px 12px;border:1px solid #cfd2d7;border-radius:9px;background:#fff;color:#111}input:focus,select:focus,textarea:focus{outline:3px solid rgba(255,212,0,.24);border-color:var(--yellow-dark)}textarea{min-height:95px}.row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.alert{padding:13px 15px;border-radius:10px;margin-bottom:15px;font-weight:650}.success{background:#e1f7e9;color:#176c3b}.error{background:#fde7e9;color:#982d36}.photo{width:90px;height:90px;object-fit:cover;border-radius:50%;background:#e4e4e4}.status,.due-status{display:inline-flex;padding:5px 9px;border-radius:999px;font-size:12px;font-weight:800;white-space:nowrap}.status.active,.due-status.completed{background:#dff6e8;color:#14663a}.status.disabled,.due-status.upcoming{background:#eceff2;color:#59616c}.due-status.overdue{background:#fde5e8;color:#9d2635}.due-status.due{background:#ffe6d6;color:#9f460f}.due-status.soon{background:#fff2bd;color:#705400}.member-cell{display:flex;align-items:center;gap:10px;min-width:180px}.member-cell small{display:block;color:var(--muted);margin-top:3px}.avatar{width:38px;height:38px;border-radius:50%;object-fit:cover;flex:0 0 38px}.initials{display:inline-flex;align-items:center;justify-content:center;background:#111;color:var(--yellow);font-weight:800}.wide-card{max-width:none!important;width:100%}.profile-heading{display:flex;align-items:center;gap:15px;margin-bottom:20px}.profile-heading h2{margin-bottom:6px}.profile-grid{grid-template-columns:minmax(220px,.7fr) minmax(350px,2fr)}.profile-summary{text-align:center}.profile-photo-large{width:120px;height:120px;border-radius:50%;object-fit:cover;margin:0 auto 12px}.detail-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px}.detail-list div{display:flex;justify-content:space-between;gap:15px;padding:11px 0;border-bottom:1px solid var(--border)}.detail-list span{color:var(--muted)}.pre-line{white-space:pre-line}.check{width:auto}.next-chip{background:#111;color:#fff;border-radius:12px;padding:10px 14px;display:flex;flex-direction:column;box-shadow:var(--shadow)}.next-chip span{font-size:12px;color:#bbb}.next-chip strong{margin-top:4px;color:var(--yellow)}.schedule-strip{display:flex;gap:10px;overflow-x:auto;padding:4px 0 10px}.schedule-strip>div{min-width:130px;background:#fffdf1;border:1px solid #f1df7a;border-radius:10px;padding:11px;display:flex;flex-direction:column}.schedule-strip span{font-size:12px;color:var(--muted);margin-top:4px}.locked-date{margin:14px 0;background:#fff9d9;border:1px solid #ecd65e;border-radius:10px;padding:13px;display:flex;flex-direction:column}.locked-date span,.locked-date small{color:var(--muted)}.locked-date strong{font-size:18px;margin:3px 0}.member-picker{min-width:230px}.badge{display:inline-block;background:#fff1b5;color:#5d4700;border-radius:999px;padding:5px 9px;font-size:12px;font-weight:800}.app-footer{margin:0 18px 14px;background:#0a0a0a;color:#fff;border-bottom:3px solid var(--yellow);border-radius:0 0 14px 14px;text-align:center;padding:13px}.app-footer span{color:var(--yellow);margin-left:13px}.guest-body{background:radial-gradient(circle at top right,#fff7bf,transparent 35%),#f4f4f4}.guest-header{height:100px;display:flex;align-items:center;justify-content:center;gap:15px;font-weight:900;font-size:20px}.guest-header img{width:180px;height:78px;object-fit:contain}.guest-container{width:min(100%,500px);max-width:500px;margin:0 auto;padding-left:18px;padding-right:18px}.login{width:100%;margin:35px auto;border-top:5px solid var(--yellow)}.guest-footer{text-align:center;color:var(--muted);padding:25px}.login .btn{width:100%}
@media(max-width:1180px){.summary-grid{grid-template-columns:repeat(3,1fr)}.hero-strip{grid-template-columns:repeat(2,1fr)}.hero-stat:nth-child(3){border-left:0;margin-top:16px}.dashboard-content{grid-template-columns:1fr}}
@media(max-width:820px){.sidebar{transform:translateX(-100%);transition:.22s}.sidebar-open .sidebar{transform:translateX(0)}.main-panel{margin-left:0}.menu-toggle{display:block}.topbar-right img{display:none}.container{padding:18px}.hero-strip{grid-template-columns:1fr}.hero-stat{border-left:0;border-top:1px solid rgba(255,255,255,.18);padding:14px 0}.hero-stat:first-child{border-top:0}.summary-grid{grid-template-columns:repeat(2,1fr)}.row,.profile-grid,.detail-list{grid-template-columns:1fr}.page-heading{flex-direction:column}.app-footer{margin:0 18px 12px}}
@media(max-width:520px){.summary-grid{grid-template-columns:1fr}.today-date{display:none}.topbar{padding:0 15px}.welcome strong{font-size:17px}.leaderboard-grid{grid-template-columns:1fr}.guest-header{flex-direction:column;height:auto;padding-top:18px}.guest-header span{font-size:16px}}
@media print{.sidebar,.topbar,.app-footer,.btn{display:none!important}.main-panel{margin-left:0}.container{max-width:none;margin:0}.card,.table-wrap{box-shadow:none}body{background:#fff}}


/* Mobile navigation and touch usability */
.sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(2px);z-index:990;opacity:0;transition:opacity .22s ease}
.sidebar-close{display:none;position:absolute;top:10px;right:10px;width:42px;height:42px;border:0;border-radius:12px;background:rgba(255,255,255,.1);color:#fff;font-size:31px;line-height:1;cursor:pointer;align-items:center;justify-content:center}
.sidebar-close:hover{background:var(--yellow);color:#000}
.menu-toggle{width:44px;height:44px;border-radius:11px;align-items:center;justify-content:center;color:#111}
.menu-toggle:hover,.menu-toggle:focus-visible{background:#fff4b3;outline:3px solid rgba(255,212,0,.25)}

@media(max-width:820px){
  body.sidebar-open{overflow:hidden;touch-action:none}
  .sidebar{width:min(86vw,320px);padding-top:58px;overflow-y:auto;overscroll-behavior:contain;box-shadow:20px 0 45px rgba(0,0,0,.35)}
  .sidebar-open .sidebar-backdrop{display:block;opacity:1}
  .sidebar-close{display:flex}
  .brand{padding-top:0}
  .brand img{width:min(205px,72vw)}
  .side-nav a,.logout-link{min-height:48px;padding:13px 15px;font-size:15px}
  .nav-icon{font-size:22px}
  .menu-toggle{display:inline-flex;flex:0 0 44px}
  .topbar{height:70px;padding:0 14px;gap:12px}
  .topbar-right{gap:10px}
  .container{padding:14px 12px 24px}
  .card{padding:15px;border-radius:14px}
  .hero-strip{border-radius:16px;padding:16px}
  .btn{min-height:44px;padding:11px 15px}
  .btn.small{min-height:40px;padding:9px 12px;font-size:13px}
  input,select,textarea{min-height:44px;font-size:16px}
  textarea{min-height:105px}
  .actions{gap:8px}
  .actions .btn,.actions form{flex:0 0 auto}
  .table-wrap{max-width:100%;-webkit-overflow-scrolling:touch;position:relative}
  table{min-width:720px}
  th,td{padding:12px;white-space:nowrap}
  .member-cell{min-width:190px}
  .leader-card{padding:16px}
  .app-footer{margin:0 12px 10px;padding:12px}
}

@media(max-width:520px){
  .welcome small{font-size:11px}
  .topbar-right{display:none}
  .page-heading h1{font-size:25px}
  .page-heading{margin-bottom:14px}
  .metric{font-size:25px}
  .summary-card{min-height:132px}
  .section-title{align-items:flex-start;flex-direction:column}
  .section-title .btn{width:100%}
  .actions{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .actions .btn,.actions form,.actions form .btn{width:100%}
  .actions .inline-form{display:block}
  .next-chip{width:100%}
  .guest-container{padding-left:12px;padding-right:12px}
  .login{margin-top:18px}
  .guest-footer{padding:18px 12px}
}
.compact-row{gap:10px}.compact-row>div{min-width:0}.compact-row small{display:block;margin-top:5px}
@media(max-width:560px){.compact-row{grid-template-columns:1fr 1fr!important}}

/* SRD polished motion and depth layer */
:root{
  --shine:linear-gradient(115deg,transparent 0%,rgba(255,255,255,.52) 42%,transparent 68%);
  --shadow-soft:0 10px 30px rgba(12,12,12,.08),0 2px 8px rgba(12,12,12,.04);
  --shadow-lift:0 20px 42px rgba(12,12,12,.14),0 6px 16px rgba(255,196,0,.10);
}
body{background:
  radial-gradient(circle at 90% 0%,rgba(255,212,0,.12),transparent 28rem),
  radial-gradient(circle at 15% 85%,rgba(255,212,0,.06),transparent 24rem),
  var(--bg)}
.main-panel{animation:pageFade .42s ease both}
.topbar{background:rgba(255,255,255,.88);backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);box-shadow:0 4px 22px rgba(0,0,0,.05)}
.sidebar{background:radial-gradient(circle at 20% 0%,rgba(255,212,0,.13),transparent 21rem),linear-gradient(180deg,#030303,#121212 72%,#060606);overflow:hidden}
.sidebar:before{content:"";position:absolute;inset:-40% -100% auto;height:190px;background:linear-gradient(100deg,transparent,rgba(255,255,255,.11),transparent);transform:rotate(-10deg);animation:sidebarShine 8s ease-in-out infinite;pointer-events:none}
.brand img{box-shadow:0 10px 25px rgba(0,0,0,.3);transition:transform .35s ease,box-shadow .35s ease}.brand:hover img{transform:translateY(-3px) scale(1.015);box-shadow:0 16px 32px rgba(0,0,0,.4)}
.side-nav a{position:relative;overflow:hidden;transition:transform .22s ease,background .22s ease,color .22s ease,box-shadow .22s ease}.side-nav a:after{content:"";position:absolute;inset:0;transform:translateX(-130%);background:var(--shine);transition:transform .65s ease}.side-nav a:hover{transform:translateX(4px)}.side-nav a:hover:after{transform:translateX(130%)}.side-nav a.active{box-shadow:0 9px 22px rgba(255,212,0,.28),inset 0 1px rgba(255,255,255,.55)}
.hero-strip{position:relative;isolation:isolate;background:radial-gradient(circle at 82% 0%,rgba(255,212,0,.18),transparent 17rem),linear-gradient(135deg,#050505,#242424);box-shadow:0 20px 42px rgba(0,0,0,.21),inset 0 1px rgba(255,255,255,.09);animation:riseIn .48s ease both}
.hero-strip:after{content:"";position:absolute;inset:-120% auto -120% -35%;width:32%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);transform:skewX(-18deg);animation:heroSweep 7s ease-in-out infinite;z-index:-1}
.hero-stat strong{letter-spacing:-.35px;text-shadow:0 1px 0 rgba(255,255,255,.08)}
.card,.leaderboard-section,.table-wrap{box-shadow:var(--shadow-soft);transition:transform .26s cubic-bezier(.2,.8,.2,1),box-shadow .26s ease,border-color .26s ease}
.card{position:relative;overflow:hidden;background:linear-gradient(155deg,rgba(255,255,255,.98),rgba(255,255,255,.88))}
.card:before,.leader-card:before{content:"";position:absolute;inset:0 auto auto 0;width:100%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,212,0,.7),transparent);opacity:.75}
.card:hover,.leader-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lift);border-color:rgba(255,196,0,.55)}
.summary-icon{position:relative;background:linear-gradient(145deg,#fff9d7,#ffd400);box-shadow:0 9px 19px rgba(255,196,0,.24),inset 0 1px rgba(255,255,255,.9);transition:transform .3s ease}.summary-card:hover .summary-icon{transform:translateY(-3px) rotate(-4deg) scale(1.08)}
.metric{background:linear-gradient(180deg,#0b0b0b,#444);-webkit-background-clip:text;background-clip:text;color:transparent}
.leaderboard-section{position:relative;background:linear-gradient(145deg,#fff,#fffdf3);box-shadow:0 13px 34px rgba(0,0,0,.09),0 0 0 1px rgba(255,212,0,.15) inset}
.leader-card{overflow:hidden;transition:transform .27s cubic-bezier(.2,.8,.2,1),box-shadow .27s ease,border-color .27s ease;background:linear-gradient(160deg,#fff,#f9f9f9)}
.leader-card:nth-child(1){background:radial-gradient(circle at 90% 0%,rgba(255,212,0,.22),transparent 9rem),linear-gradient(160deg,#fff,#fffbee)}
.leader-card:nth-child(1) .leader-rank{animation:medalPulse 2.5s ease-in-out infinite;box-shadow:0 0 0 5px rgba(255,212,0,.18)}
.leader-avatar{transition:transform .3s ease,box-shadow .3s ease}.leader-card:hover .leader-avatar{transform:scale(1.06);box-shadow:0 0 0 3px var(--yellow),0 12px 26px rgba(0,0,0,.18)}
.progress,.hero-progress{box-shadow:inset 0 2px 4px rgba(0,0,0,.12);position:relative}.progress>span,.hero-progress span{width:0!important;transition:width 1.1s cubic-bezier(.2,.9,.2,1);box-shadow:0 0 14px rgba(255,196,0,.42)}.progress>span:after,.hero-progress span:after{content:"";position:absolute;inset:0;width:45%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.8),transparent);animation:barShimmer 2.5s linear infinite}
.btn{position:relative;overflow:hidden;transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;box-shadow:0 7px 16px rgba(255,196,0,.24),inset 0 1px rgba(255,255,255,.7)}.btn:after{content:"";position:absolute;inset:-20%;transform:translateX(-135%) skewX(-20deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);transition:transform .6s ease}.btn:hover{transform:translateY(-2px);box-shadow:0 11px 23px rgba(255,196,0,.32)}.btn:hover:after{transform:translateX(135%) skewX(-20deg)}.btn:active{transform:translateY(1px) scale(.985)}
input,select,textarea{transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;background:linear-gradient(180deg,#fff,#fdfdfd)}input:hover,select:hover,textarea:hover{border-color:#aaa}input:focus,select:focus,textarea:focus{transform:translateY(-1px);box-shadow:0 8px 20px rgba(255,196,0,.12)}
.due-status.overdue{animation:softPulse 2s ease-in-out infinite}.due-status.due{animation:softPulse 2.6s ease-in-out infinite}
tbody tr{transition:background .18s ease,transform .18s ease}tbody tr:hover{transform:translateX(2px)}
.alert{animation:alertDrop .34s ease both;box-shadow:0 8px 24px rgba(0,0,0,.08)}
.login{background:rgba(255,255,255,.88);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 24px 55px rgba(0,0,0,.14),0 0 0 1px rgba(255,255,255,.75) inset;animation:loginFloat .55s cubic-bezier(.2,.8,.2,1) both}
.guest-header img{filter:drop-shadow(0 11px 18px rgba(0,0,0,.17));animation:logoFloat 4s ease-in-out infinite}
.app-footer{background:radial-gradient(circle at 50% 0%,rgba(255,212,0,.12),transparent 12rem),#090909;box-shadow:0 12px 28px rgba(0,0,0,.18)}
.reveal-item{opacity:0;transform:translateY(16px)}.reveal-item.is-visible{animation:riseIn .5s cubic-bezier(.2,.8,.2,1) forwards}

@keyframes pageFade{from{opacity:0}to{opacity:1}}
@keyframes riseIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes alertDrop{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@keyframes loginFloat{from{opacity:0;transform:translateY(24px) scale(.985)}to{opacity:1;transform:none}}
@keyframes logoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes heroSweep{0%,55%{left:-40%}75%,100%{left:125%}}
@keyframes sidebarShine{0%,65%{transform:translateX(-70%) rotate(-10deg)}90%,100%{transform:translateX(170%) rotate(-10deg)}}
@keyframes barShimmer{from{transform:translateX(-150%)}to{transform:translateX(320%)}}
@keyframes medalPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.09)}}
@keyframes softPulse{0%,100%{box-shadow:0 0 0 0 rgba(217,60,69,0)}50%{box-shadow:0 0 0 6px rgba(217,60,69,.12)}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}.reveal-item{opacity:1;transform:none}.progress>span,.hero-progress span{width:var(--target-width)!important}}
@media(max-width:820px){.card:hover,.leader-card:hover{transform:none}.sidebar:before,.hero-strip:after{display:none}}

/* Dashboard motion refinement: summary metrics and charts */
.summary-grid .summary-card,.hero-strip .hero-stat{opacity:0;transform:translateY(22px) scale(.975)}
.summary-grid .summary-card.is-visible,.hero-strip .hero-stat.is-visible{animation:dashboardCardIn .62s cubic-bezier(.2,.85,.2,1) forwards;animation-delay:var(--reveal-delay,0ms)}
.summary-grid .summary-card:hover{transform:translateY(-7px) scale(1.015);box-shadow:0 18px 40px rgba(0,0,0,.14),0 0 0 1px rgba(255,212,0,.28) inset}
.summary-grid .summary-card:hover .summary-icon{transform:translateY(-3px) rotate(-4deg) scale(1.08);box-shadow:0 10px 20px rgba(255,212,0,.22)}
.summary-icon{transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s ease}
.summary-card .metric{transition:transform .28s ease,text-shadow .28s ease}
.summary-card:hover .metric{transform:scale(1.06);text-shadow:0 8px 22px rgba(0,0,0,.12)}
.chart-card{overflow:hidden;position:relative}
.chart-card:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.58) 43%,transparent 61%);transform:translateX(-130%);opacity:0}
.chart-card.chart-animating:after{animation:chartSweep 1.15s .18s ease-out both}
.chart-card canvas{opacity:0;transform:translateY(10px);transition:opacity .45s ease,transform .45s ease}
.chart-card.chart-ready canvas{opacity:1;transform:none}
@keyframes dashboardCardIn{0%{opacity:0;transform:translateY(22px) scale(.975)}65%{opacity:1;transform:translateY(-4px) scale(1.008)}100%{opacity:1;transform:none}}
@keyframes chartSweep{0%{opacity:0;transform:translateX(-130%)}25%{opacity:.72}100%{opacity:0;transform:translateX(135%)}}
@media(prefers-reduced-motion:reduce){.summary-grid .summary-card,.hero-strip .hero-stat{opacity:1;transform:none}.summary-grid .summary-card.is-visible,.hero-strip .hero-stat.is-visible{animation:none}.chart-card canvas{opacity:1;transform:none}.chart-card:after{display:none}}


/* Definitive whole-card dashboard entrance animation */
.summary-grid .summary-card{
  opacity:0;
  transform:translate3d(0,34px,0) scale(.91);
  transform-origin:50% 100%;
  animation:none!important;
  will-change:transform,opacity,box-shadow,border-color;
  backface-visibility:hidden;
}
.summary-grid .summary-card.card-entered{
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
}
@keyframes summaryWholeCardIn{
  0%{
    opacity:0;
    transform:translate3d(0,34px,0) scale(.91);
    border-color:rgba(255,212,0,0);
    box-shadow:0 2px 5px rgba(0,0,0,.02);
  }
  55%{
    opacity:1;
    transform:translate3d(0,-9px,0) scale(1.035);
    border-color:rgba(255,212,0,.65);
    box-shadow:0 25px 48px rgba(0,0,0,.18),0 0 0 1px rgba(255,212,0,.26) inset;
  }
  76%{
    transform:translate3d(0,4px,0) scale(.992);
    box-shadow:0 12px 25px rgba(0,0,0,.12);
  }
  100%{
    opacity:1;
    transform:translate3d(0,0,0) scale(1);
    border-color:var(--border);
    box-shadow:var(--shadow-soft);
  }
}
.summary-grid .summary-card.card-entering{
  animation-name:summaryWholeCardIn!important;
  animation-duration:.82s!important;
  animation-timing-function:cubic-bezier(.18,.84,.22,1)!important;
  animation-fill-mode:both!important;
  animation-delay:var(--card-delay,0ms)!important;
}
@media(prefers-reduced-motion:reduce){
  .summary-grid .summary-card{opacity:1;transform:none;animation:none!important}
}
.logout-form{margin:0}.logout-form .logout-link{width:100%;border:0;background:transparent;font:inherit;text-align:left;cursor:pointer}.security-note{padding:12px 14px;border:1px solid rgba(255,212,0,.35);border-radius:12px;background:rgba(255,212,0,.08)}

/* Whole summary-card hover: keep this after the entrance-state rules so the
   card container, background, border and shadow move together with its content. */
.summary-grid .summary-card.card-entered{
  transition:transform .3s cubic-bezier(.2,.8,.2,1),
             box-shadow .3s ease,
             border-color .3s ease,
             background-color .3s ease;
}
@media (hover:hover) and (pointer:fine){
  .summary-grid .summary-card.card-entered:hover{
    transform:translate3d(0,-8px,0) scale(1.018);
    border-color:rgba(255,196,0,.72);
    box-shadow:0 20px 42px rgba(0,0,0,.16),
               0 0 0 1px rgba(255,212,0,.30) inset;
  }
  .summary-grid .summary-card.card-entered:active{
    transform:translate3d(0,-3px,0) scale(.995);
    box-shadow:0 11px 24px rgba(0,0,0,.13);
  }
}
@media(max-width:820px){
  .summary-grid .summary-card.card-entered:hover,
  .summary-grid .summary-card.card-entered:active{
    transform:translate3d(0,0,0) scale(1);
  }
}

/* Table hover stability
   Do not translate table rows: even a small horizontal transform makes the
   row exceed its scroll container and causes a temporary horizontal scrollbar. */
.table-wrap{
  overflow-x:auto;
  overflow-y:hidden;
}
tbody tr{
  transition:background-color .18s ease,box-shadow .18s ease;
}
tbody tr:hover{
  transform:none!important;
  background:#fffdf0;
  box-shadow:inset 3px 0 0 var(--yellow);
}
@media(max-width:820px){
  tbody tr:hover{
    box-shadow:none;
  }
}

/* Live next-weigh-in countdown */
/* Compact live weigh-in countdown inside the existing dashboard hero tile. */
.hero-weighin-stat{min-width:0}
.compact-weigh-countdown{display:flex;align-items:baseline;gap:7px;margin:5px 0 3px;white-space:nowrap}
.compact-weigh-countdown>span{display:inline-flex;align-items:baseline;gap:2px}
.compact-weigh-countdown strong{margin:0!important;color:var(--yellow);font-size:22px!important;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.4px;text-shadow:none}
.compact-weigh-countdown em{font-style:normal;color:#aaa;font-size:10px;font-weight:800;text-transform:uppercase}
.compact-weigh-date{color:#d1d1d1;font-size:11px;line-height:1.3}
.compact-weigh-message{min-height:13px;margin-top:2px;color:#bbb;font-size:9px;font-weight:800;letter-spacing:.45px;text-transform:uppercase;line-height:1.2}
.compact-weigh-countdown.is-today strong,.compact-weigh-countdown.is-today+.compact-weigh-date+.compact-weigh-message{color:var(--yellow)}
.compact-weigh-countdown.is-overdue+.compact-weigh-date+.compact-weigh-message{color:#ffb7b7}
@media(max-width:820px){.compact-weigh-countdown{gap:10px}.compact-weigh-countdown strong{font-size:21px!important}}
@media(prefers-reduced-motion:reduce){.compact-weigh-countdown *{animation:none!important;transition:none!important}}