:root {
  --bg:#08080a; --bg-s:#0e0e12; --bg-card:#121218; --bg-hover:#18181f;
  --bg-input:#0c0c10; --border:#1e1e28; --border-l:#2a2a36;
  --text:#e2dcd0; --text-s:#9a9488; --text-m:#5a564e;
  --gold:#c8a84e; --gold-glow:rgba(200,168,78,0.15);
  --green:#4ade80; --green-d:rgba(74,222,128,0.12);
  --red:#ef4444; --blue:#5865F2; --purple:#a78bfa;
  --pink:#f472b6; --orange:#f59e0b; --cyan:#22d3ee;
  --sidebar-w:250px; --topbar-h:56px; --r:8px; --r-lg:14px;
  --font-display:'Cinzel Decorative','Cinzel',serif;
  --font-head:'Cinzel',serif;
  --font-body:'Inter',-apple-system,sans-serif;
  --shadow:0 4px 30px rgba(0,0,0,.6);
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{overflow-x:hidden;width:100%;max-width:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{font-family:var(--font-body);background:var(--bg);color:var(--text);min-height:100vh;-webkit-font-smoothing:antialiased;overflow-x:hidden;width:100%;max-width:100%;position:relative}
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--border-l);border-radius:3px}
a{color:inherit;text-decoration:none}

/* ══ AMBIENT PARTICLES ══ */
.ambient-particles{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.ambient-particles .mote{position:absolute;width:2px;height:2px;border-radius:50%;background:rgba(200,168,78,.5);box-shadow:0 0 6px rgba(200,168,78,.3);opacity:0;animation:moteRise linear infinite,moteFade ease-in-out infinite}
@keyframes moteRise{0%{transform:translateY(0) translateX(0)}25%{transform:translateY(-25vh) translateX(15px)}50%{transform:translateY(-50vh) translateX(-10px)}75%{transform:translateY(-75vh) translateX(20px)}100%{transform:translateY(-100vh) translateX(-5px)}}
@keyframes moteFade{0%,100%{opacity:0}40%,60%{opacity:.7}}

/* ══ GLOW LINE ══ */
.glow-line{height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.2;margin:32px 0;animation:glowPulse 4s ease-in-out infinite alternate}
@keyframes glowPulse{from{opacity:.1}to{opacity:.35}}

/* ══ SIDEBAR ══ */
.app{display:flex;min-height:100vh;position:relative}
.sidebar{position:fixed;left:0;top:0;width:var(--sidebar-w);height:100vh;background:var(--bg-s);border-right:1px solid var(--border);display:flex;flex-direction:column;z-index:100;transition:transform .3s ease}
.sidebar-brand{padding:28px 22px 24px;border-bottom:1px solid var(--border)}
.sidebar-brand h2{font-family:var(--font-display);font-size:1.3rem;letter-spacing:.14em;color:var(--text);text-shadow:0 0 20px rgba(200,168,78,.12)}
.sidebar-nav{flex:1;padding:14px 10px;display:flex;flex-direction:column;gap:2px}
.nav-link{display:flex;align-items:center;gap:12px;padding:11px 16px;font-size:.82rem;font-weight:500;letter-spacing:.04em;color:var(--text-s);border-radius:var(--r);transition:all .15s}
.nav-link:hover{background:rgba(200,168,78,.06);color:var(--text)}
.nav-link.active{background:var(--gold-glow);color:var(--gold)}
.nav-link svg{width:18px;height:18px;flex-shrink:0;opacity:.7}
.nav-link.active svg{opacity:1}
.sidebar-bottom{padding:14px;border-top:1px solid var(--border)}
.sidebar-user{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.avatar-sm{width:34px;height:34px;border-radius:50%;background:var(--bg-hover);border:1.5px solid var(--border-l);display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;color:var(--text-s)}
.sidebar-username{font-size:.78rem;font-weight:600;letter-spacing:.03em}
.sidebar-role{font-size:.62rem;color:var(--gold);letter-spacing:.06em;text-transform:uppercase}
.btn-logout{width:100%;padding:7px;background:none;border:1px solid var(--border);border-radius:var(--r);color:var(--text-m);font-family:var(--font-body);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:all .2s}
.btn-logout:hover{border-color:var(--red);color:var(--red)}
.btn-login{width:100%;padding:9px;background:#5865F2;border:none;border-radius:var(--r);color:#fff;font-family:var(--font-body);font-size:.72rem;font-weight:600;letter-spacing:.06em;cursor:pointer;transition:all .2s;margin-bottom:6px}
.btn-login:hover{background:#4752c4;transform:translateY(-1px)}

/* ══ TOPBAR ══ */
.topbar{display:none;position:sticky;top:0;z-index:50;height:var(--topbar-h);background:var(--bg-s);border-bottom:1px solid var(--border);padding:0 18px;align-items:center;gap:14px}
.hamburger{background:none;border:none;color:var(--text);font-size:1.3rem;cursor:pointer}
.topbar-title{font-family:var(--font-head);font-size:.85rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase}

/* ══ CONTENT ══ */
.content{margin-left:var(--sidebar-w);flex:1;min-height:100vh;padding:36px 40px;position:relative;z-index:1}

/* ══ BUTTONS ══ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 22px;border-radius:var(--r);font-family:var(--font-body);font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:all .2s;border:none}
.btn-primary{background:var(--green);color:#000}
.btn-primary:hover{background:#22c55e;transform:translateY(-1px);box-shadow:0 4px 16px rgba(74,222,128,.25)}
.btn-gold{background:var(--gold);color:#000}
.btn-gold:hover{background:#d4b050;transform:translateY(-1px);box-shadow:0 4px 16px rgba(200,168,78,.3)}
.btn-ghost{background:none;border:1px solid var(--border);color:var(--text)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}
.btn-danger{background:none;border:1px solid var(--red);color:var(--red)}
.btn-danger:hover{background:rgba(239,68,68,.1)}
.btn-sm{padding:7px 14px;font-size:.7rem}
.btn-text{background:none;border:none;color:var(--gold);font-size:.72rem;cursor:pointer;font-family:var(--font-body);letter-spacing:.04em}
.btn-text:hover{text-decoration:underline}
.btn-icon{background:none;border:none;color:var(--text-m);cursor:pointer;padding:4px;transition:color .2s;display:inline-flex;align-items:center}
.btn-icon:hover{color:var(--text)}
.btn-icon.danger:hover{color:var(--red)}

/* ══ TABS ══ */
.tabs{display:flex;gap:0;border-bottom:1px solid var(--border);margin-bottom:28px;overflow-x:auto}
.tab{padding:12px 26px;font-family:var(--font-head);font-size:.74rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-m);background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;transition:all .15s;white-space:nowrap}
.tab:hover{color:var(--text-s)}
.tab.active{color:var(--gold);border-bottom-color:var(--gold)}

/* ══ FORMS ══ */
.form-group{margin-bottom:18px}
.form-label{display:block;margin-bottom:7px;font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-s)}
.form-input,.form-select,.form-textarea{width:100%;padding:11px 14px;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--r);color:var(--text);font-family:var(--font-body);font-size:.84rem;outline:none;transition:border-color .2s}
.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--gold)}
.form-input::placeholder,.form-textarea::placeholder{color:var(--text-m)}
.form-textarea{min-height:90px;resize:vertical}
.form-select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='%235a564e' viewBox='0 0 16 16'%3E%3Cpath d='M8 12L2 6h12z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}
.form-select option{background:var(--bg);color:var(--text)}
.form-row{display:flex;gap:12px}
.form-row .form-group{flex:1}
.form-hint{font-size:.65rem;color:var(--text-m);margin-top:4px}
.checkbox-grid{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.checkbox-grid label{display:flex;align-items:center;gap:6px;font-size:.74rem;color:var(--text-s);cursor:pointer;padding:5px 10px;border:1px solid var(--border);border-radius:var(--r);transition:all .15s}
.checkbox-grid label:has(input:checked){border-color:var(--gold);color:var(--gold);background:var(--gold-glow)}
.checkbox-grid input[type="checkbox"]{display:none}

/* ══ MODAL ══ */
.modal-overlay{position:fixed;inset:0;z-index:500;background:rgba(0,0,0,.85);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:20px}
.modal{position:relative;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-lg);padding:36px;max-width:620px;width:100%;max-height:85vh;overflow-y:auto;box-shadow:0 0 60px rgba(0,0,0,.8);animation:modalPop .25s ease}
@keyframes modalPop{from{opacity:0;transform:scale(.96) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}
.modal-x{position:absolute;top:14px;right:18px;background:none;border:none;color:var(--text-m);font-size:1.6rem;cursor:pointer;transition:color .2s}
.modal-x:hover{color:var(--text)}

/* ══ TOAST ══ */
.toasts{position:fixed;bottom:20px;right:20px;z-index:600;display:flex;flex-direction:column;gap:8px}
.toast{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r);padding:12px 18px;font-size:.8rem;color:var(--text);max-width:340px;box-shadow:var(--shadow);animation:toastSlide .3s ease}
.toast.success{border-left:3px solid var(--green)}
.toast.error{border-left:3px solid var(--red)}
.toast.info{border-left:3px solid var(--gold)}
@keyframes toastSlide{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

/* ══ APPLICATIONS ══ */
.app-hero{text-align:center;padding:48px 28px;margin-bottom:32px;background:linear-gradient(180deg,var(--bg-card) 0%,var(--bg) 100%);border:1px solid var(--border);border-radius:var(--r-lg);position:relative;overflow:hidden}
.app-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 0%,var(--gold-glow) 0%,transparent 60%);pointer-events:none;animation:heroGlow 6s ease-in-out infinite alternate}
@keyframes heroGlow{from{opacity:.6}to{opacity:1}}
.app-hero h2{position:relative;font-family:var(--font-head);font-size:1.5rem;letter-spacing:.1em;font-weight:700}
.app-hero .underline{display:block;width:60px;height:2px;background:var(--gold);margin:12px auto 0;border-radius:1px;animation:underlineGrow .6s ease forwards}
@keyframes underlineGrow{from{width:0;opacity:0}to{width:60px;opacity:1}}
.app-hero p{position:relative;max-width:750px;margin:16px auto 0;font-size:.84rem;color:var(--text-s);line-height:1.7}

.app-layout{display:flex;gap:28px;margin-bottom:32px;align-items:flex-start}
.app-req{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-lg);padding:24px;min-width:260px;flex-shrink:0}
.app-req h4{font-family:var(--font-head);font-size:.78rem;font-style:italic;font-weight:700;text-decoration:underline;text-transform:uppercase;letter-spacing:.08em;margin-bottom:12px}
.app-req ul{list-style:none;padding:0}
.app-req li{font-size:.74rem;color:var(--text-s);margin-bottom:8px;text-transform:uppercase;font-weight:600;letter-spacing:.03em;padding-left:14px;position:relative}
.app-req li::before{content:"";position:absolute;left:0;top:7px;width:5px;height:5px;border-radius:50%;background:var(--gold);opacity:.6}
.roles-wrap{flex:1;min-width:0}

.roles-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px;margin-bottom:32px}
.role-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-lg);padding:28px 22px;text-align:center;transition:all .3s ease;position:relative;overflow:hidden}
.role-card::after{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:0;transition:opacity .3s}
.role-card:hover{border-color:var(--border-l);transform:translateY(-3px);box-shadow:0 8px 30px rgba(0,0,0,.3)}
.role-card:hover::after{opacity:.5}
.role-card h3{font-family:var(--font-head);font-size:.88rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:18px}
.role-icon{width:100%;height:120px;background:var(--bg-hover);border-radius:var(--r);margin-bottom:18px;display:flex;align-items:center;justify-content:center}
.role-icon svg{width:48px;height:48px;color:var(--gold);opacity:.6}
.role-duties{text-align:left;list-style:none;padding:0}
.role-duties li{font-size:.76rem;color:var(--text-s);margin-bottom:7px;line-height:1.5;padding-left:14px;position:relative}
.role-duties li::before{content:"";position:absolute;left:0;top:8px;width:4px;height:4px;border-radius:50%;background:var(--text-m)}

.apply-center{text-align:center;margin-top:8px}
.btn-apply{display:inline-block;padding:16px 52px;background:var(--green);color:#000;font-family:var(--font-head);font-size:1.05rem;font-weight:800;font-style:italic;letter-spacing:.08em;text-transform:uppercase;border:none;border-radius:var(--r);cursor:pointer;transition:all .2s;text-decoration:none}
.btn-apply:hover{background:#22c55e;transform:translateY(-2px);box-shadow:0 6px 24px rgba(74,222,128,.3)}

/* ══ MEDIA ══ */
.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}
.media-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-lg);padding:36px 24px;text-align:center;transition:all .3s ease;cursor:pointer;position:relative;overflow:hidden}
.media-card::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 0%,var(--gold-glow),transparent 70%);opacity:0;transition:opacity .3s}
.media-card:hover{border-color:var(--gold);transform:translateY(-4px);box-shadow:0 8px 30px rgba(0,0,0,.4)}
.media-card:hover::before{opacity:1}
.media-card svg{width:40px;height:40px;margin-bottom:16px;color:var(--text-s);transition:color .3s;position:relative}
.media-card:hover svg{color:var(--gold)}
.media-card h3{position:relative;font-family:var(--font-head);font-size:.88rem;letter-spacing:.08em;margin-bottom:8px}
.media-card p{position:relative;font-size:.76rem;color:var(--text-s);line-height:1.5}

/* ══ CALENDAR ══ */
.cal-wrapper{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden}
.cal-header{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--border);gap:14px;flex-wrap:wrap}
.cal-header h3{font-family:var(--font-head);font-size:.95rem;letter-spacing:.08em}
.cal-title-wrap{display:flex;align-items:center;gap:10px;min-width:0;flex:1 1 auto}
.cal-title-edit-btn{background:transparent;border:1px solid var(--border);border-radius:var(--r);color:var(--text-m);width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:all .18s var(--spring-soft);padding:0}
.cal-title-edit-btn:hover{border-color:var(--gold);color:var(--gold);transform:rotate(-8deg) scale(1.08)}
.cal-title-editor{display:inline-flex;align-items:center;gap:6px;flex:1 1 auto;min-width:0}
.cal-title-editor .form-input{flex:1 1 auto;min-width:140px;padding:7px 12px;font-size:.86rem;font-family:var(--font-head);letter-spacing:.04em}
.cal-title-editor .btn-sm{padding:6px 10px;min-width:34px;display:inline-flex;align-items:center;justify-content:center}
.cal-nav{display:flex;gap:6px}
.cal-nav button{background:var(--bg-hover);border:1px solid var(--border);border-radius:var(--r);color:var(--text-s);padding:5px 14px;font-size:.82rem;cursor:pointer;transition:all .15s;font-family:var(--font-body)}
.cal-nav button:hover{border-color:var(--gold);color:var(--gold)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr)}
.cal-day-hdr{padding:10px 4px;text-align:center;font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-m);border-bottom:1px solid var(--border)}
.cal-day{min-height:90px;padding:6px 8px;border-right:1px solid var(--border);border-bottom:1px solid var(--border);position:relative;transition:background .2s}
.cal-day:nth-child(7n){border-right:none}
.cal-day.other{opacity:.25}
.cal-day.today{background:var(--gold-glow)}
.cal-day.today .cal-day-num{color:var(--gold)}
.cal-day-num{font-size:.68rem;color:var(--text-m);font-weight:600;margin-bottom:4px}
.cal-event{font-size:.6rem;padding:2px 5px;border-radius:3px;margin-bottom:2px;color:#000;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;transition:transform .15s}
.cal-event:hover{transform:scale(1.02)}
.events-upcoming{margin-top:24px}
.events-upcoming h3{font-family:var(--font-head);font-size:.88rem;letter-spacing:.08em;margin-bottom:14px;display:flex;align-items:center;gap:12px}
.events-upcoming h3::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--border-l),transparent)}
.event-row{display:flex;align-items:flex-start;gap:14px;padding:14px 18px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r);margin-bottom:8px;transition:all .2s}
.event-row:hover{border-color:var(--border-l);transform:translateX(4px)}
.event-dot{width:8px;height:8px;border-radius:50%;margin-top:5px;flex-shrink:0}
.event-info{flex:1}
.event-info h4{font-size:.82rem;letter-spacing:.04em;margin-bottom:3px}
.event-info p{font-size:.74rem;color:var(--text-s);line-height:1.4}
.event-meta{font-size:.66rem;color:var(--text-m);margin-top:3px}
.btn-event-del{background:none;border:1px solid var(--border);border-radius:var(--r);padding:6px;cursor:pointer;color:var(--text-m);transition:all .2s;flex-shrink:0;align-self:center}
.btn-event-del:hover{color:var(--red);border-color:var(--red);background:rgba(239,68,68,.08)}

/* ══ PROFILE ══ */
.profile-top{display:flex;align-items:center;gap:24px;padding:32px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-lg);margin-bottom:24px;position:relative;overflow:hidden}
.profile-top::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 0% 0%,var(--gold-glow) 0%,transparent 50%);pointer-events:none}
.profile-avatar{position:relative;width:76px;height:76px;border-radius:50%;background:var(--bg-hover);border:2.5px solid var(--gold);display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-size:1.8rem;font-weight:700;color:var(--gold);flex-shrink:0;animation:avatarPulse 4s ease-in-out infinite}
@keyframes avatarPulse{0%,100%{box-shadow:0 0 0 0 rgba(200,168,78,.2)}50%{box-shadow:0 0 0 8px rgba(200,168,78,0)}}
.profile-details{position:relative}
.profile-details h2{font-family:var(--font-head);font-size:1.3rem;letter-spacing:.07em}
.profile-badge-wrap{margin-top:6px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.profile-badge{display:inline-flex;align-items:center;gap:5px;padding:3px 12px;border-radius:20px;font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.admin-tag{display:inline-block;padding:2px 10px;background:var(--gold-glow);border:1px solid var(--gold);border-radius:4px;font-size:.58rem;font-weight:700;letter-spacing:.12em;color:var(--gold);text-transform:uppercase}
.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-bottom:24px}
.stat-box{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r);padding:18px;text-align:center;transition:border-color .2s}
.stat-box:hover{border-color:var(--border-l)}
.stat-num{font-family:var(--font-head);font-size:1.6rem;font-weight:700;color:var(--gold)}
.stat-lbl{font-size:.66rem;color:var(--text-m);letter-spacing:.1em;text-transform:uppercase;margin-top:3px}

/* ══ TASKS ══ */
.tasks-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.task-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;cursor:pointer;transition:all .25s;position:relative}
.task-card:hover{border-color:var(--gold);transform:translateY(-3px);box-shadow:0 6px 24px rgba(0,0,0,.35)}
.task-card-img{width:100%;height:140px;background:var(--bg-hover);object-fit:cover;display:block;border-bottom:1px solid var(--border)}
.task-card-body{padding:18px 20px}
.task-cat{display:inline-block;padding:3px 10px;border-radius:4px;font-size:.58rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:10px}
.task-cat.builder{background:rgba(74,222,128,.12);color:var(--green)}
.task-cat.voice{background:rgba(167,139,250,.12);color:var(--purple)}
.task-cat.animator{background:rgba(244,114,182,.12);color:var(--pink)}
.task-cat.story{background:rgba(245,158,11,.12);color:var(--orange)}
.task-card h4{font-size:.86rem;letter-spacing:.04em;margin-bottom:6px}
.task-card p{font-size:.76rem;color:var(--text-s);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.task-foot{display:flex;align-items:center;justify-content:space-between;margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
.task-price{font-family:var(--font-head);font-size:.95rem;font-weight:700;color:var(--green)}
.task-badges{display:flex;gap:4px;flex-wrap:wrap}
.task-badge-tag{font-size:.58rem;color:var(--text-m);letter-spacing:.04em;text-transform:uppercase;padding:2px 6px;border:1px solid var(--border);border-radius:3px}
.task-status{display:inline-block;padding:3px 10px;border-radius:4px;font-size:.58rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.task-status.open{background:rgba(74,222,128,.12);color:var(--green)}
.task-status.taken{background:rgba(245,158,11,.12);color:var(--orange)}
.task-status.completed{background:rgba(99,102,241,.12);color:#818cf8}

/* Task modal */
.task-detail-img{width:100%;height:200px;object-fit:cover;border-radius:var(--r);margin-bottom:20px}
.task-detail h2{font-family:var(--font-head);font-size:1.15rem;letter-spacing:.05em;margin-bottom:6px}
.task-detail-meta{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0 20px}
.task-meta-tag{font-size:.72rem;color:var(--text-s);letter-spacing:.03em;display:flex;align-items:center;gap:5px}
.task-meta-tag svg{width:14px;height:14px}
.task-detail-desc{padding:20px;background:var(--bg);border-radius:var(--r);margin-bottom:22px}
.task-detail-desc p{font-size:.84rem;color:var(--text-s);line-height:1.7}
.task-detail-actions{display:flex;gap:10px;justify-content:flex-end}
.task-locked{display:flex;align-items:center;gap:10px;padding:12px 16px;background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.35);border-radius:var(--r);color:#fca5a5;font-size:.78rem;line-height:1.5;margin-bottom:16px}
.task-locked svg{flex-shrink:0;color:#fca5a5}
.task-locked strong{color:#fecaca;font-weight:600}

/* ══ ADMIN ══ */
.admin-section{margin-top:28px;padding-top:28px;border-top:1px solid var(--border)}
.admin-title{font-family:var(--font-head);font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:16px;display:flex;align-items:center;gap:10px}
.admin-title::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(200,168,78,.3),transparent)}
.user-row{display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--bg);border-radius:var(--r);margin-bottom:6px;transition:background .15s}
.user-row:hover{background:var(--bg-hover)}
.user-row-name{flex:1;font-size:.82rem;line-height:1.3}
.user-row-id{font-size:.62rem;color:var(--text-m);font-family:ui-monospace,monospace;margin-top:2px;letter-spacing:.02em}
.user-row-badge{font-size:.68rem;color:var(--gold);margin-right:8px}
.user-row select{padding:5px 8px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r);color:var(--text);font-size:.72rem;font-family:var(--font-body)}
.user-detail{padding:8px 4px}
.user-detail-top{display:flex;align-items:center;gap:18px;margin-bottom:24px}
.user-detail-avatar{width:78px;height:78px;border-radius:50%;background:var(--bg);border:2px solid var(--gold);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:1.8rem;color:var(--gold);background-size:cover;background-position:center;flex-shrink:0}
.user-detail h2{font-family:var(--font-head);font-size:1.4rem;letter-spacing:.04em;margin-bottom:6px}
.user-detail-field{margin-bottom:14px}
.user-detail-field label{display:block;font-size:.66rem;color:var(--text-m);text-transform:uppercase;letter-spacing:.1em;margin-bottom:4px}
.user-detail-val{font-size:.88rem;color:var(--text);background:var(--bg);border:1px solid var(--border);border-radius:var(--r);padding:10px 14px;font-family:ui-monospace,monospace;word-break:break-all}
.user-detail-val.copy-target{cursor:pointer;transition:border-color .2s}
.user-detail-val.copy-target:hover{border-color:var(--gold)}
.ongoing-row{display:flex;align-items:center;gap:14px;padding:12px 16px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r);margin-bottom:8px;transition:border-color .2s}
.ongoing-row:hover{border-color:var(--border-l)}
.ongoing-info{flex:1;min-width:0}
.ongoing-title{font-size:.86rem;color:var(--text);margin-bottom:3px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ongoing-meta{font-size:.72rem;color:var(--text-s)}
.ongoing-meta strong{color:var(--gold);font-weight:600}
.ongoing-id{font-family:ui-monospace,monospace;font-size:.64rem;color:var(--text-m);margin-left:6px}
.ongoing-price{font-family:var(--font-head);color:var(--gold);font-size:.88rem;padding:0 10px}
.ongoing-actions{display:flex;gap:6px;flex-shrink:0}
@media (max-width:768px){.ongoing-row{flex-wrap:wrap}.ongoing-actions{width:100%;margin-top:6px}}
.edit-block{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-lg);padding:22px;margin-bottom:14px;transition:border-color .2s}
.edit-block:hover{border-color:var(--border-l)}
.edit-block h4{font-family:var(--font-head);font-size:.82rem;color:var(--gold);letter-spacing:.06em;margin-bottom:14px}

/* ══ SECTION HEAD ══ */
.section-head{font-family:var(--font-head);font-size:1rem;letter-spacing:.08em;margin-bottom:18px;display:flex;align-items:center;gap:12px}
.section-head::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--border-l),transparent)}

/* ══ RESPONSIVE ══ */
@media(max-width:768px){
.sidebar{transform:translateX(-100%)}
.sidebar.open{transform:translateX(0);box-shadow:var(--shadow)}
.topbar{display:flex}
.content{margin-left:0;padding:20px 16px;padding-top:calc(var(--topbar-h) + 16px)}
.profile-top{flex-direction:column;text-align:center}
.roles-grid{grid-template-columns:1fr}
.tasks-grid{grid-template-columns:1fr}
.app-layout{flex-direction:column}
.app-req{min-width:unset}
.cal-day{min-height:56px}
.modal{padding:24px 20px}
.form-row{flex-direction:column}
}
/* ══ NOTIFICATIONS (BELL + PANEL) ══ */
.bell-wrap{position:fixed;top:14px;right:20px;z-index:90}
.bell-btn{position:relative;background:none;border:1px solid var(--border);color:var(--text-s);width:38px;height:38px;border-radius:var(--r);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}
.bell-btn:hover{color:var(--gold);border-color:var(--gold);background:var(--gold-glow)}
.bell-count{position:absolute;top:-4px;right:-4px;min-width:17px;height:17px;padding:0 4px;background:var(--red);color:#fff;font-size:.62rem;font-weight:700;border-radius:9px;display:flex;align-items:center;justify-content:center;border:2px solid var(--bg);font-family:var(--font-body);line-height:1}
.notif-panel{position:absolute;top:46px;right:0;width:360px;max-width:calc(100vw - 32px);max-height:480px;background:var(--bg-card);border:1px solid var(--border-l);border-radius:var(--r-lg);box-shadow:var(--shadow);z-index:100;display:flex;flex-direction:column;overflow:hidden;animation:fadeUp .2s ease}
.notif-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--border);background:var(--bg-s)}
.notif-head h4{font-family:var(--font-head);font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold)}
.notif-head-btns{display:flex;gap:4px}
.notif-btn-ghost{background:none;border:none;color:var(--text-m);font-size:.68rem;padding:4px 8px;border-radius:4px;cursor:pointer;font-family:var(--font-body);transition:color .15s}
.notif-btn-ghost:hover{color:var(--gold)}
.notif-list{overflow-y:auto;flex:1;padding:6px 0}
.notif-empty{text-align:center;padding:30px 20px;color:var(--text-m);font-size:.78rem}
.notif-item{display:flex;gap:12px;padding:12px 18px;border-bottom:1px solid var(--border);transition:background .15s;position:relative}
.notif-item:hover{background:var(--bg-hover)}
.notif-item:last-child{border-bottom:none}
.notif-item.unread{background:rgba(200,168,78,.04)}
.notif-item.unread::before{content:"";position:absolute;left:6px;top:50%;transform:translateY(-50%);width:4px;height:4px;border-radius:50%;background:var(--gold);box-shadow:0 0 8px var(--gold)}
.notif-icon{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--bg);border:1px solid var(--border-l)}
.notif-icon svg{width:16px;height:16px}
.notif-icon.task_claimed{color:var(--blue)}
.notif-icon.task_completed{color:var(--green)}
.notif-body{flex:1;min-width:0}
.notif-title{font-size:.78rem;font-weight:600;color:var(--text);margin-bottom:2px}
.notif-msg{font-size:.72rem;color:var(--text-s);line-height:1.4;word-wrap:break-word}
.notif-time{font-size:.62rem;color:var(--text-m);margin-top:4px;font-family:ui-monospace,monospace}
@media (max-width:768px){.notif-panel{width:calc(100vw - 20px);right:-10px}}

/* ══ FADE IN ANIMATION ══ */
.fade-in{animation:fadeUp .5s ease forwards;opacity:0}
.fade-in-d1{animation-delay:.1s}
.fade-in-d2{animation-delay:.2s}
.fade-in-d3{animation-delay:.3s}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

/* ══ POLISH: RICHER PARTICLES ══ */
.ambient-particles .mote.orb{width:4px;height:4px;background:radial-gradient(circle,rgba(255,230,140,.9),rgba(200,168,78,.2) 60%,transparent);box-shadow:0 0 14px rgba(200,168,78,.5),0 0 24px rgba(200,168,78,.2)}
.ambient-particles .mote.rune{width:6px;height:6px;background:none;border:1px solid rgba(200,168,78,.6);border-radius:1px;transform:rotate(45deg);box-shadow:0 0 8px rgba(200,168,78,.35)}
.ambient-particles .mote.ember{width:2px;height:2px;background:rgba(255,170,60,.8);box-shadow:0 0 10px rgba(255,140,40,.5),0 0 18px rgba(255,120,30,.25);animation:moteRise linear infinite,emberFlicker 2s ease-in-out infinite}
@keyframes emberFlicker{0%,100%{opacity:.2}35%{opacity:.9}65%{opacity:.4}}
.ambient-particles .mote.star{width:3px;height:3px;background:#fff;box-shadow:0 0 6px rgba(255,255,255,.8),0 0 12px rgba(200,168,78,.3);animation:moteRise linear infinite,starTwinkle 3s ease-in-out infinite}
@keyframes starTwinkle{0%,100%{opacity:0;transform:scale(.6)}50%{opacity:1;transform:scale(1.1)}}

/* ══ POLISH: GOLD BURST (on task claim/complete) ══ */
.burst-layer{position:fixed;inset:0;pointer-events:none;z-index:9999;overflow:hidden}
.burst-shard{position:absolute;width:6px;height:6px;border-radius:50%;background:radial-gradient(circle,#ffe690,var(--gold) 50%,transparent);box-shadow:0 0 14px var(--gold),0 0 26px rgba(200,168,78,.6);animation:burstFly 1.1s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes burstFly{0%{transform:translate(0,0) scale(1);opacity:1}70%{opacity:1}100%{transform:translate(var(--tx),var(--ty)) scale(.2);opacity:0}}
.burst-shard.diamond{border-radius:1px;transform:rotate(45deg);width:8px;height:8px}
.burst-ring{position:absolute;width:40px;height:40px;border-radius:50%;border:2px solid var(--gold);transform:translate(-50%,-50%);animation:burstRing .9s ease-out forwards;box-shadow:0 0 30px var(--gold)}
@keyframes burstRing{0%{opacity:1;width:10px;height:10px}100%{opacity:0;width:220px;height:220px}}

/* ══ POLISH: BELL RING ══ */
.bell-btn.ringing{animation:bellRing .8s ease;color:var(--gold);border-color:var(--gold);background:var(--gold-glow)}
@keyframes bellRing{0%,100%{transform:rotate(0)}10%{transform:rotate(-18deg)}20%{transform:rotate(16deg)}30%{transform:rotate(-14deg)}40%{transform:rotate(12deg)}50%{transform:rotate(-9deg)}60%{transform:rotate(7deg)}70%{transform:rotate(-4deg)}80%{transform:rotate(2deg)}}
.bell-btn.ringing::after{content:"";position:absolute;inset:-4px;border-radius:var(--r);border:2px solid var(--gold);animation:bellWave .8s ease-out forwards;pointer-events:none}
@keyframes bellWave{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.8)}}
.bell-count{animation:countPop .25s ease}
@keyframes countPop{0%{transform:scale(.4)}60%{transform:scale(1.25)}100%{transform:scale(1)}}

/* ══ POLISH: BUTTON SHIMMER ══ */
.btn-gold,.btn-primary,.btn-apply{position:relative;overflow:hidden;isolation:isolate}
.btn-gold::before,.btn-primary::before,.btn-apply::before{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;background:linear-gradient(110deg,transparent 0%,rgba(255,255,255,.55) 50%,transparent 100%);transform:skewX(-24deg);transition:left .7s cubic-bezier(.3,.9,.3,1);z-index:-1}
.btn-gold:hover::before,.btn-primary:hover::before,.btn-apply:hover::before{left:160%}

/* ══ POLISH: TASK CARD TILT + GLOW ══ */
.task-card{will-change:transform}
.task-card:hover{transform:translateY(-4px) rotateX(2deg) rotateY(-2deg);border-color:var(--gold);box-shadow:0 12px 40px rgba(0,0,0,.5),0 0 30px rgba(200,168,78,.18)}
.task-card::after{content:"";position:absolute;inset:0;border-radius:var(--r-lg);pointer-events:none;background:linear-gradient(135deg,transparent 40%,rgba(200,168,78,.12) 50%,transparent 60%);opacity:0;transition:opacity .4s}
.task-card:hover::after{opacity:1;animation:cardSheen 1.2s ease}
@keyframes cardSheen{0%{background-position:-200% 0}100%{background-position:200% 0}}

/* ══ POLISH: TITLE PULSE ══ */
.app-hero h2,.stat-num,.admin-title{position:relative}
.app-hero h2{animation:titleGlow 4s ease-in-out infinite}
@keyframes titleGlow{0%,100%{text-shadow:0 0 18px rgba(200,168,78,.25)}50%{text-shadow:0 0 32px rgba(200,168,78,.55),0 0 60px rgba(200,168,78,.2)}}

/* ══ POLISH: NAV LINK SHINE ══ */
.nav-link{position:relative;overflow:hidden}
.nav-link::before{content:"";position:absolute;left:-100%;top:0;width:100%;height:100%;background:linear-gradient(90deg,transparent,var(--gold-glow),transparent);transition:left .55s ease}
.nav-link:hover::before{left:100%}
.nav-link.active{background:linear-gradient(90deg,var(--gold-glow),transparent);color:var(--gold);box-shadow:inset 3px 0 0 var(--gold)}

/* ══ POLISH: ROLE CARD LIFT ══ */
.role-card{will-change:transform}
.role-card:hover{transform:translateY(-6px);border-color:var(--gold);box-shadow:0 16px 40px rgba(0,0,0,.45),0 0 30px rgba(200,168,78,.15)}
.role-card:hover::after{opacity:1}
.role-icon{transition:transform .4s cubic-bezier(.3,.9,.3,1),color .3s}
.role-card:hover .role-icon{transform:scale(1.1) rotate(-4deg);color:var(--gold)}

/* ══ POLISH: MEDIA CARD SPIN ══ */
.media-card:hover svg{transform:scale(1.15) rotate(6deg);color:var(--gold)}
.media-card svg{transition:transform .4s cubic-bezier(.3,.9,.3,1),color .3s}
.media-card:hover{transform:translateY(-6px);border-color:var(--gold);box-shadow:0 16px 40px rgba(0,0,0,.5),0 0 30px rgba(200,168,78,.2)}
.media-card:hover::before{opacity:1}

/* ══ POLISH: SIDEBAR BRAND GLOW ══ */
.sidebar-brand h2{animation:brandGlow 5s ease-in-out infinite}
@keyframes brandGlow{0%,100%{text-shadow:0 0 16px rgba(200,168,78,.3)}50%{text-shadow:0 0 28px rgba(200,168,78,.6),0 0 46px rgba(200,168,78,.3)}}

/* ══ POLISH: NOTIFICATION ITEM APPEAR ══ */
.notif-item{animation:notifSlide .35s ease backwards}
.notif-item:nth-child(1){animation-delay:.02s}
.notif-item:nth-child(2){animation-delay:.06s}
.notif-item:nth-child(3){animation-delay:.1s}
.notif-item:nth-child(4){animation-delay:.14s}
.notif-item:nth-child(5){animation-delay:.18s}
@keyframes notifSlide{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:translateX(0)}}

/* ══ POLISH: MODAL BACKDROP BLUR ══ */
.modal-overlay{backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);animation:overlayFade .25s ease}
@keyframes overlayFade{from{opacity:0;backdrop-filter:blur(0)}to{opacity:1;backdrop-filter:blur(4px)}}

/* ══ POLISH: TOAST GOLD ACCENT ══ */
.toast{border-left:3px solid var(--gold);position:relative;overflow:hidden}
.toast::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gold);box-shadow:0 0 12px var(--gold)}
.toast.success{border-left-color:var(--green)}
.toast.success::before{background:var(--green);box-shadow:0 0 12px var(--green)}
.toast.error{border-left-color:var(--red)}
.toast.error::before{background:var(--red);box-shadow:0 0 12px var(--red)}

/* ══ POLISH: AVATAR HOVER ══ */
.user-detail-avatar{transition:transform .3s,box-shadow .3s}
.user-detail-avatar:hover{transform:scale(1.05);box-shadow:0 0 30px rgba(200,168,78,.5)}

/* ══════════════════════════════════════════════════════════════
   MAGICAL CARTOON LAYER — second polish pass
   ══════════════════════════════════════════════════════════════ */

/* Chunky springy easing curves + snappy timings */
:root{
  --spring:cubic-bezier(.34,1.56,.64,1);
  --spring-soft:cubic-bezier(.25,1.3,.5,1);
  --bounce:cubic-bezier(.68,-0.55,.265,1.55);
  --t-fast:.12s;
  --t-snap:.18s;
  --t-med:.28s;
}

/* === CURSOR FIREFLY TRAIL === */
.cursor-spark{position:fixed;width:9px;height:9px;border-radius:50%;pointer-events:none;z-index:9998;
  background:radial-gradient(circle,#fff6c0 0%,#ffd86b 40%,rgba(255,216,107,0) 70%);
  box-shadow:0 0 10px #ffd86b,0 0 20px rgba(255,216,107,.5);
  animation:sparkFade .55s ease-out forwards}
@keyframes sparkFade{
  0%{transform:translate(-50%,-50%) scale(1);opacity:1}
  100%{transform:translate(-50%,calc(-50% - 20px)) scale(.2);opacity:0}
}

/* === CLICK RIPPLE === */
.ripple-host{position:relative;overflow:hidden}
.click-ripple{position:absolute;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,236,160,.6) 0%,rgba(200,168,78,.3) 35%,transparent 70%);
  transform:translate(-50%,-50%) scale(0);animation:rippleExpand .45s ease-out forwards;z-index:2}
@keyframes rippleExpand{
  0%{transform:translate(-50%,-50%) scale(0);opacity:.9}
  100%{transform:translate(-50%,-50%) scale(4);opacity:0}
}

/* === MAGIC ORBS BACKGROUND LAYER (bigger drifting blobs) === */
.magic-orbs{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden;opacity:.55;contain:layout paint}
.magic-orbs .orb-blob{position:absolute;width:300px;height:300px;border-radius:50%;mix-blend-mode:screen;filter:blur(40px);will-change:transform}
.magic-orbs .orb-blob.o1{background:radial-gradient(circle,rgba(200,168,78,.35),transparent 60%);top:-5%;left:-5%;animation:orbDrift1 28s ease-in-out infinite}
.magic-orbs .orb-blob.o2{background:radial-gradient(circle,rgba(167,139,250,.22),transparent 60%);top:30%;right:-8%;animation:orbDrift2 34s ease-in-out infinite}
.magic-orbs .orb-blob.o3{background:radial-gradient(circle,rgba(34,211,238,.18),transparent 60%);bottom:-10%;left:30%;animation:orbDrift3 42s ease-in-out infinite}
.magic-orbs .orb-blob.o4{background:radial-gradient(circle,rgba(244,114,182,.2),transparent 60%);top:55%;left:10%;animation:orbDrift1 38s ease-in-out infinite reverse}
@keyframes orbDrift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(120px,80px) scale(1.2)}}
@keyframes orbDrift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-100px,120px) scale(1.15)}}
@keyframes orbDrift3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(80px,-100px) scale(1.25)}}

/* === MOUSE-TILT CARDS === */
.task-card,.role-card,.media-card{
  transform-style:preserve-3d;perspective:900px;
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--lift,0px)) translateZ(0);
  transition:transform var(--t-snap) var(--spring-soft),border-color var(--t-snap),box-shadow var(--t-snap)
}
.task-card:hover,.role-card:hover,.media-card:hover{
  --lift:-6px;
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-6px) translateZ(0);
  border-color:var(--gold);box-shadow:0 14px 42px rgba(0,0,0,.5),0 0 32px rgba(200,168,78,.2)
}
.task-card::before,.role-card::before,.media-card::before{pointer-events:none}

/* === CHUNKIER CARTOON BORDERS === */
.role-card,.media-card,.task-card,.stat-box,.edit-block,.profile-top,.cal-wrapper,.app-hero,.app-req{
  border-width:1.5px;
}
.role-card:hover,.media-card:hover,.task-card:hover{border-width:2px}

/* === BOUNCY BUTTONS === */
.btn,.btn-gold,.btn-primary,.btn-ghost,.btn-danger,.btn-apply,.btn-login,.btn-logout{
  transition:transform var(--t-snap) var(--spring),box-shadow var(--t-snap),background var(--t-fast),border-color var(--t-fast),color var(--t-fast)
}
.btn-gold:hover,.btn-primary:hover,.btn-apply:hover{transform:translateY(-3px) scale(1.03)}
.btn-gold:active,.btn-primary:active,.btn-apply:active,.btn:active{transform:translateY(0) scale(.95);transition-duration:.05s}
.btn-ghost:hover{transform:translateY(-2px) scale(1.02)}
.btn-apply{border-radius:14px;box-shadow:0 6px 0 rgba(0,0,0,.35),0 10px 24px rgba(74,222,128,.18)}
.btn-apply:hover{box-shadow:0 8px 0 rgba(0,0,0,.4),0 16px 34px rgba(74,222,128,.35)}
.btn-apply:active{box-shadow:0 2px 0 rgba(0,0,0,.35),0 4px 10px rgba(74,222,128,.15);transform:translateY(4px) scale(.98)}

/* === BOUNCY NAV LINKS WITH WIGGLE === */
.nav-link{transition:all var(--t-snap) var(--spring-soft)}
.nav-link:hover{transform:translateX(6px) scale(1.03)}
.nav-link:hover svg{animation:iconWiggle .6s ease}
.nav-link.active svg{animation:iconPulse 2s ease-in-out infinite}
@keyframes iconWiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-14deg) scale(1.15)}50%{transform:rotate(12deg) scale(1.15)}75%{transform:rotate(-6deg) scale(1.1)}}
@keyframes iconPulse{0%,100%{transform:scale(1);filter:drop-shadow(0 0 4px rgba(200,168,78,.5))}50%{transform:scale(1.12);filter:drop-shadow(0 0 10px rgba(200,168,78,.9))}}

/* === IDLE FLOAT ON ROLE / MEDIA ICONS === */
.role-icon svg,.media-card svg{animation:idleFloat 4s ease-in-out infinite}
.role-card:nth-child(2) .role-icon svg{animation-delay:-1.3s}
.role-card:nth-child(3) .role-icon svg{animation-delay:-2.6s}
.media-card:nth-child(2) svg{animation-delay:-1s}
.media-card:nth-child(3) svg{animation-delay:-2s}
.media-card:nth-child(4) svg{animation-delay:-3s}
@keyframes idleFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-6px) rotate(3deg)}}
.role-card:hover .role-icon svg,.media-card:hover svg{animation:iconHappy .6s ease}
@keyframes iconHappy{0%{transform:scale(1) rotate(0)}30%{transform:scale(1.25) rotate(-10deg)}60%{transform:scale(1.15) rotate(8deg)}100%{transform:scale(1.15) rotate(0)}}

/* === PROFILE AVATAR: GLOWING HALO (box-shadow, doesn't hide image) === */
.profile-avatar{position:relative;animation:avatarGlow 3.5s ease-in-out infinite}
@keyframes avatarGlow{
  0%,100%{box-shadow:0 0 0 2px rgba(200,168,78,.35),0 0 18px rgba(200,168,78,.35),0 0 36px rgba(200,168,78,.15)}
  50%{box-shadow:0 0 0 4px rgba(255,230,140,.45),0 0 32px rgba(255,230,140,.5),0 0 58px rgba(200,168,78,.25)}
}
.profile-avatar:hover{transform:scale(1.05) rotate(-3deg);transition:transform .25s var(--spring)}

/* === STAT BOXES: BOUNCY HOVER === */
.stat-box{transition:all var(--t-snap) var(--spring-soft);cursor:default}
.stat-box:hover{transform:translateY(-5px) scale(1.04);border-color:var(--gold);box-shadow:0 12px 30px rgba(0,0,0,.35),0 0 24px rgba(200,168,78,.2)}
.stat-num{background:linear-gradient(180deg,#ffe690 0%,var(--gold) 55%,#8a6e25 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 6px rgba(200,168,78,.3))}
.stat-box:hover .stat-num{animation:numPop .4s var(--bounce)}
@keyframes numPop{0%{transform:scale(1)}40%{transform:scale(1.25)}100%{transform:scale(1)}}

/* === SECTION HEADERS: GRADIENT TEXT === */
.section-head,.admin-title{background:linear-gradient(90deg,var(--gold) 0%,#ffe690 50%,var(--gold) 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:gradShift 6s ease infinite}
@keyframes gradShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* === APP HERO: ANIMATED GRADIENT BACKGROUND === */
.app-hero{background:linear-gradient(135deg,#121218 0%,#18181f 40%,#1a1522 80%,#121218 100%);background-size:200% 200%;animation:heroShift 12s ease-in-out infinite}
@keyframes heroShift{0%,100%{background-position:0% 0%}50%{background-position:100% 100%}}
.app-hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(circle at 20% 20%,rgba(200,168,78,.12),transparent 40%),
  radial-gradient(circle at 80% 30%,rgba(167,139,250,.08),transparent 45%);animation:heroGlow 6s ease-in-out infinite alternate}

/* === REVEAL-ON-SCROLL === */
.reveal{opacity:0;transform:translateY(16px) scale(.97);transition:opacity .35s var(--spring-soft),transform .35s var(--spring-soft)}
.reveal.in{opacity:1;transform:translateY(0) scale(1)}
.reveal-left{opacity:0;transform:translateX(-24px);transition:opacity .35s var(--spring-soft),transform .35s var(--spring-soft)}
.reveal-left.in{opacity:1;transform:translateX(0)}

/* === TABS: SLIDING UNDERLINE === */
.tab{transition:color .3s,transform .3s var(--spring)}
.tab:hover{transform:translateY(-2px)}
.tab.active{animation:tabPop .5s var(--bounce)}
@keyframes tabPop{0%{transform:translateY(0) scale(1)}50%{transform:translateY(-3px) scale(1.08)}100%{transform:translateY(0) scale(1)}}

/* === NOTIF BELL: EXTRA BOUNCE === */
.bell-btn{transition:transform .3s var(--spring),color .2s,background .2s,border-color .2s}
.bell-btn:hover{transform:scale(1.1) rotate(-8deg)}
.bell-btn:active{transform:scale(.9)}

/* === CALENDAR DAYS: PLAYFUL === */
.cal-day{transition:all .25s var(--spring-soft)}
.cal-day:hover:not(.other){background:rgba(200,168,78,.05);transform:scale(1.04);z-index:2;position:relative;border-radius:6px;box-shadow:0 4px 16px rgba(0,0,0,.35)}
.cal-event{transition:transform .2s var(--spring)}
.cal-event:hover{transform:scale(1.15) rotate(-1deg)}

/* === MODAL: BOUNCIER POP === */
.modal{animation:modalBounce .28s var(--bounce)}
@keyframes modalBounce{0%{opacity:0;transform:scale(.8) translateY(24px)}60%{opacity:1;transform:scale(1.03) translateY(-2px)}100%{opacity:1;transform:scale(1) translateY(0)}}

/* === TOAST: BOUNCIER === */
.toast{animation:toastBounce .32s var(--bounce);border-radius:12px}
@keyframes toastBounce{0%{opacity:0;transform:translateX(50px) scale(.85)}60%{opacity:1;transform:translateX(-4px) scale(1.03)}100%{opacity:1;transform:translateX(0) scale(1)}}

/* === SIDEBAR BRAND: FLOAT === */
.sidebar-brand h2{animation:brandGlow 5s ease-in-out infinite,brandFloat 6s ease-in-out infinite}
@keyframes brandFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}

/* === USER ROW: SLIDE ON HOVER === */
.user-row{transition:all .3s var(--spring-soft);border-radius:10px}
.user-row:hover{transform:translateX(6px);box-shadow:0 4px 14px rgba(0,0,0,.3)}
.ongoing-row{transition:all .3s var(--spring-soft);border-radius:10px}
.ongoing-row:hover{transform:translateX(4px) scale(1.01);box-shadow:0 6px 20px rgba(0,0,0,.35)}

/* === FORM INPUTS: GLOW FOCUS === */
.form-input,.form-select,.form-textarea{transition:all .3s var(--spring-soft)}
.form-input:focus,.form-select:focus,.form-textarea:focus{transform:translateY(-1px);box-shadow:0 0 0 3px rgba(200,168,78,.18),0 6px 20px rgba(200,168,78,.1)}

/* === APP REQ LIST: BULLETS SPARKLE === */
.app-req li::before{animation:bulletSparkle 3s ease-in-out infinite}
.app-req li:nth-child(2n)::before{animation-delay:-1s}
.app-req li:nth-child(3n)::before{animation-delay:-2s}
@keyframes bulletSparkle{0%,100%{box-shadow:0 0 0 rgba(200,168,78,0);opacity:.5}50%{box-shadow:0 0 10px rgba(200,168,78,.8);opacity:1;transform:scale(1.4)}}

/* === GLOW LINES BREATHE === */
.glow-line{height:2px;background:linear-gradient(90deg,transparent 0%,var(--gold) 20%,#ffe690 50%,var(--gold) 80%,transparent 100%);background-size:200% 100%;animation:glowPulse 4s ease-in-out infinite alternate,glowShift 6s linear infinite}
@keyframes glowShift{to{background-position:200% 0}}

/* === PAGE ENTER ANIMATION === */
.content>*:not(.modal-overlay){animation:pageEnter .38s var(--spring-soft) both}
.content>*:nth-child(1):not(.modal-overlay){animation-delay:.02s}
.content>*:nth-child(2):not(.modal-overlay){animation-delay:.07s}
.content>*:nth-child(3):not(.modal-overlay){animation-delay:.12s}
.content>*:nth-child(4):not(.modal-overlay){animation-delay:.17s}
.content>*:nth-child(5):not(.modal-overlay){animation-delay:.22s}
@keyframes pageEnter{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
/* Override .fade-in opacity:0 so pageEnter's final state sticks */
.content>.fade-in{opacity:1}

/* === APPLY BUTTON: IDLE WIGGLE === */
.apply-center .btn-apply{animation:applyIdle 4s ease-in-out infinite}
@keyframes applyIdle{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(-3px) rotate(-1deg)}50%{transform:translateY(0) rotate(0)}75%{transform:translateY(-3px) rotate(1deg)}}
.apply-center .btn-apply:hover{animation:none}

/* === SIDEBAR: MAGICAL EDGE === */
.sidebar{border-right:2px solid transparent;background-image:linear-gradient(var(--bg-s),var(--bg-s)),linear-gradient(180deg,transparent 0%,rgba(200,168,78,.4) 30%,rgba(200,168,78,.6) 50%,rgba(200,168,78,.4) 70%,transparent 100%);background-origin:border-box;background-clip:padding-box,border-box}

/* === TASK CARD PRICE: SPARKLE === */
.task-price{position:relative;display:inline-block}
.task-price::after{content:"✦";position:absolute;top:-4px;right:-12px;font-size:.7em;color:var(--gold);opacity:.7;animation:priceSparkle 2.5s ease-in-out infinite}
@keyframes priceSparkle{0%,100%{opacity:.2;transform:rotate(0) scale(.8)}50%{opacity:1;transform:rotate(180deg) scale(1.2)}}

/* === BELL ICON: GENTLE IDLE SWAY === */
.bell-btn:not(.ringing):not(:hover) svg{animation:bellSway 5s ease-in-out infinite;transform-origin:top center}
@keyframes bellSway{0%,100%{transform:rotate(0)}25%{transform:rotate(-4deg)}75%{transform:rotate(4deg)}}

/* ══════════════════════════════════════════════════════════════
   MOBILE — smooth & intuitive
   ══════════════════════════════════════════════════════════════ */
@media(max-width:768px){
  :root{--sidebar-w:280px;--topbar-h:58px}

  /* Cleaner content padding with safe-areas for notched phones */
  .content{
    padding:16px 16px 24px;
    padding-top:calc(var(--topbar-h) + env(safe-area-inset-top) + 14px);
    padding-left:max(16px,env(safe-area-inset-left));
    padding-right:max(16px,env(safe-area-inset-right));
    padding-bottom:max(28px,env(safe-area-inset-bottom));
  }

  /* Topbar: proper glass look and safe-area padding */
  .topbar{
    display:flex;position:fixed;top:0;left:0;right:0;
    height:var(--topbar-h);
    padding:0 14px;
    padding-top:env(safe-area-inset-top);
    padding-left:max(14px,env(safe-area-inset-left));
    padding-right:max(14px,env(safe-area-inset-right));
    height:calc(var(--topbar-h) + env(safe-area-inset-top));
    background:rgba(14,14,18,.9);backdrop-filter:saturate(140%) blur(14px);-webkit-backdrop-filter:saturate(140%) blur(14px);
    border-bottom:1px solid var(--border);z-index:60;
  }
  .topbar-title{flex:1;font-size:.82rem}
  .hamburger{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;transition:transform var(--t-fast) var(--spring),background var(--t-fast)}
  .hamburger:active{transform:scale(.9);background:var(--bg-hover)}

  /* Sidebar as drawer */
  .sidebar{
    width:var(--sidebar-w);
    transform:translateX(-100%);
    transition:transform .28s var(--spring-soft);
    box-shadow:none;
    padding-top:env(safe-area-inset-top);
    padding-bottom:env(safe-area-inset-bottom);
    z-index:150;
  }
  .sidebar.open{transform:translateX(0);box-shadow:12px 0 40px rgba(0,0,0,.6)}
  .sidebar-brand{padding:22px 20px 18px}
  .sidebar-brand h2{font-size:1.2rem}
  .nav-link{padding:14px 18px;font-size:.9rem;min-height:46px}
  .nav-link svg{width:20px;height:20px}
  .btn-logout,.btn-login{padding:12px;min-height:44px;font-size:.78rem}

  /* Sidebar backdrop */
  .sidebar-backdrop{
    position:fixed;inset:0;background:rgba(0,0,0,.6);
    backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
    z-index:140;opacity:0;pointer-events:none;
    transition:opacity .22s ease;
  }
  body.sidebar-open .sidebar-backdrop{opacity:1;pointer-events:auto}
  body.sidebar-open{overflow:hidden}

  /* Bell positioned inside topbar area */
  .bell-wrap{position:fixed;top:calc(9px + env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));z-index:95}
  .bell-btn{width:40px;height:40px;border-radius:10px;background:var(--bg-card)}
  .notif-panel{width:calc(100vw - 24px);max-width:360px;right:0;top:48px;max-height:70vh}

  /* Profile header stacks & centers */
  .profile-top{flex-direction:column;text-align:center;padding:24px 18px;gap:14px}
  .profile-avatar{width:88px;height:88px;font-size:2rem;margin:0 auto}
  .profile-details{width:100%}
  .profile-details h2{font-size:1.2rem;justify-content:center;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .profile-badge-wrap{justify-content:center}

  /* Stats 2x2 */
  .stats-row{grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px}
  .stat-box{padding:16px 10px}
  .stat-num{font-size:1.45rem}
  .stat-lbl{font-size:.6rem}

  /* Single-column grids */
  .tasks-grid{grid-template-columns:1fr;gap:12px}
  .roles-grid{grid-template-columns:1fr;gap:14px}
  .media-grid{grid-template-columns:1fr;gap:12px}
  .role-card{padding:22px 18px}
  .role-icon{height:110px;margin-bottom:14px}
  .media-card{padding:28px 22px}

  /* Hero */
  .app-hero{padding:32px 20px;margin-bottom:22px}
  .app-hero h2{font-size:1.2rem}
  .app-hero p{font-size:.82rem;line-height:1.6}
  .app-layout{flex-direction:column;gap:16px}
  .app-req{min-width:unset;padding:20px}

  /* Apply button: full-width chunky tap target */
  .apply-center{margin-top:14px}
  .btn-apply{width:100%;padding:18px 28px;font-size:1rem;min-height:56px}

  /* Calendar compact */
  .cal-day-hdr{font-size:.52rem;padding:8px 2px;letter-spacing:.06em}
  .cal-day{min-height:52px;padding:3px 4px}
  .cal-day-num{font-size:.62rem}
  .cal-event{font-size:.52rem;padding:1px 4px;border-radius:2px}
  .cal-header{padding:14px 16px}
  .cal-header h3{font-size:.85rem}

  /* Task card images a bit taller on narrow screens */
  .task-card-img{height:170px}
  .task-card-body{padding:16px 18px}

  /* Tabs scrollable */
  .tabs{margin-bottom:22px;-webkit-overflow-scrolling:touch;padding-bottom:2px}
  .tab{padding:12px 18px;font-size:.72rem;min-height:44px}

  /* Forms: 16px font prevents iOS zoom on focus */
  .form-input,.form-select,.form-textarea{font-size:16px;padding:13px 14px}
  .form-row{flex-direction:column;gap:0}

  /* Modal as bottom sheet */
  .modal-overlay{padding:0;align-items:flex-end;backdrop-filter:blur(4px)}
  .modal{
    max-width:100%;width:100%;
    max-height:92vh;
    border-radius:20px 20px 0 0;
    padding:24px 20px 28px;
    padding-bottom:max(28px,env(safe-area-inset-bottom));
    animation:sheetUp .3s var(--spring-soft) both;
    box-shadow:0 -12px 50px rgba(0,0,0,.6);
  }
  @keyframes sheetUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
  .modal::before{
    content:"";position:absolute;left:50%;top:8px;
    width:40px;height:4px;background:var(--border-l);border-radius:2px;
    transform:translateX(-50%);
  }
  .modal-x{top:16px;right:16px;font-size:1.8rem;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--bg-hover)}

  /* Task detail modal */
  .task-detail h2{font-size:1.05rem;padding-right:40px}
  .task-detail-img{height:180px;margin-bottom:16px}
  .task-detail-actions{flex-direction:column-reverse;gap:8px}
  .task-detail-actions .btn{width:100%;min-height:48px}

  /* Buttons: larger tap targets */
  .btn{padding:13px 22px;min-height:46px;font-size:.78rem}
  .btn-sm{padding:10px 16px;min-height:38px}

  /* Section heads */
  .section-head{font-size:.92rem;margin-bottom:14px}
  .admin-title{font-size:.78rem}

  /* User/ongoing rows */
  .user-row{padding:12px 14px;flex-wrap:wrap;gap:10px;min-height:56px}
  .user-row-name{font-size:.88rem}
  .user-row select{padding:8px 10px;font-size:.76rem;min-height:38px}
  .ongoing-row{padding:14px;flex-wrap:wrap}
  .ongoing-actions{width:100%;margin-top:8px}
  .ongoing-actions .btn{flex:1}

  /* User detail modal values */
  .user-detail-top{flex-direction:column;text-align:center;gap:12px}

  /* Toast: bottom-center, thumb-friendly */
  .toasts{bottom:max(16px,env(safe-area-inset-bottom));right:16px;left:16px}
  .toast{max-width:none}

  /* Reduce particle density for perf */
  .ambient-particles .mote{opacity:.4}
  .magic-orbs{opacity:.35}

  /* Glow line smaller */
  .glow-line{margin:22px 0}

  /* Profile edit blocks */
  .edit-block{padding:18px 16px}
  .edit-block h4{font-size:.76rem}

  /* Disable mouse-tilt perspective jumps on touch */
  .task-card,.role-card,.media-card{--rx:0deg !important;--ry:0deg !important;perspective:none}
  .task-card:active,.role-card:active,.media-card:active{transform:scale(.98);transition-duration:.08s}

  /* Reduce expensive backdrop blurs on mobile for perf */
  .topbar{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}

  /* Login banner */
  #auth-error-banner{font-size:.78rem;padding:14px 16px}

  /* Nav link hover → active feel on tap */
  .nav-link:active{background:rgba(200,168,78,.12);transform:translateX(4px) scale(.98)}
}

/* Extra-small phones */
@media(max-width:400px){
  .content{padding:14px 12px 24px;padding-top:calc(var(--topbar-h) + 12px)}
  .stat-num{font-size:1.3rem}
  .profile-avatar{width:78px;height:78px;font-size:1.75rem}
  .app-hero h2{font-size:1.05rem}
  .btn-apply{padding:16px 22px;font-size:.92rem}
}

/* Landscape phones: keep modal as bottom sheet but shorter */
@media(max-width:820px) and (orientation:landscape) and (max-height:500px){
  .modal{max-height:86vh}
  .profile-top{flex-direction:row;text-align:left}
  .profile-avatar{margin:0}
  .stats-row{grid-template-columns:repeat(4,1fr)}
}

/* Reduced motion fallback */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .cursor-spark,.click-ripple,.magic-orbs{display:none !important}
}