/* Shared UX Styles for Auth Pages */
 
:root{
 --brand-primary:#16a34a;
 --brand-primary-dark:#15803d;
 --brand-secondary:#0ea5e9;
 --brand-accent:#f0fdf4;
 --brand-dark:#0f172a;
 --brand-gray:#64748b;
 --brand-light:#f8fafc;
 --brand-danger:#ef4444;
 --brand-success:#22c55e;
}
 
 .container{
 width:min(1200px, 94vw);
 margin:0 auto;
 padding:0 1rem;
}
 
 /* Header */
 .app-header{
 position:sticky;
 top:0;
 z-index:30;
 backdrop-filter:saturate(180%) blur(14px);
 background:rgba(255, 255, 255, 0.92);
 border-bottom:1px solid rgba(148, 163, 184, 0.2);
 padding:0;
}
 
 .header-inner{
 display:flex;
 justify-content:space-between;
 align-items:center;
 gap:1.5rem;
 padding:1.5rem 1rem;
 max-width:1200px;
 margin:0 auto;
 width:100%;
 box-sizing:border-box;
 flex-wrap:nowrap;
}
 
 .brand{
 display:flex;
 align-items:center;
 gap:0.75rem;
 text-decoration:none;
 flex-shrink:0;
}
 
 .brand img{
 width:50px;
 height:50px;
 border-radius:50%;
 box-shadow:0 10px 30px rgba(22, 163, 74, 0.25);
}
 
 .brand span{
 font-size:1.35rem;
 font-weight:700;
 color:var(--brand-dark);
}
 
 .nav-actions{
 display:flex;
 align-items:center;
 gap:0.75rem;
 flex-wrap:wrap;
 justify-content:flex-end;
 flex-shrink:0;
}
 
 /* Buttons */
 .btn{
 display:inline-flex;
 align-items:center;
 justify-content:center;
 border-radius:999px;
 padding:0.7rem 1.6rem;
 font-weight:600;
 font-size:0.95rem;
 text-decoration:none;
 transition:all 0.2s ease;
 cursor:pointer;
 border:none;
 outline:none;
 white-space:nowrap;
}
 
 .btn:hover{
 transform:translateY(-1px);
}
 
 .btn:disabled{
 opacity:0.6;
 cursor:not-allowed;
 transform:none;
}
 
 .btn.primary{
 background:linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark));
 color:#fff;
 box-shadow:0 10px 30px rgba(22, 163, 74, 0.25);
}
 
 .btn.primary:hover:not(:disabled){
 box-shadow:0 15px 35px rgba(22, 163, 74, 0.35);
}
 
 .btn.secondary{
 background:#3b82f6;
 color:#fff;
 box-shadow:0 10px 25px rgba(59, 130, 246, 0.25);
}
 
 .btn.secondary:hover:not(:disabled){
 box-shadow:0 15px 35px rgba(59, 130, 246, 0.35);
}
 
 .btn.tertiary{
 background:#a855f7;
 color:#fff;
 box-shadow:0 10px 25px rgba(168, 85, 247, 0.25);
}
 
 .btn.tertiary:hover:not(:disabled){
 box-shadow:0 15px 35px rgba(168, 85, 247, 0.35);
}
 
 .btn.ghost{
 background:transparent;
 color:var(--brand-primary);
 border:1px solid rgba(22, 163, 74, 0.3);
}
 
 .btn.ghost:hover:not(:disabled){
 background:var(--brand-accent);
}
 
 .btn.full-width{
 width:100%;
}
 
 /* Icon Button Styling */
 .btn.icon-btn{
 gap:0.5rem;
 padding:0.65rem 1.2rem;
}
 
 .btn.icon-btn svg{
 width:18px;
 height:18px;
 flex-shrink:0;
 transition:transform 0.3s ease;
}
 
 .btn.icon-btn:hover svg{
 transform:translateX(-2px);
}
 
 .btn.icon-btn span{
 font-size:0.9rem;
 font-weight:600;
}
 
 @media (max-width:640px){
 .header-inner{
 padding:1rem 1rem;
 gap:0.75rem;
 flex-wrap:nowrap;
}
 
 .brand{
 flex-shrink:0;
}
 
 .brand img{
 width:40px;
 height:40px;
}
 
 .brand span{
 font-size:1.1rem;
}
 
 .nav-actions{
 gap:0.4rem;
 flex-shrink:0;
 margin-left:0;
 margin-right:auto;
 padding-left:0.5rem;
}
 
 .nav-actions .btn{
 padding:0.55rem 0.8rem;
 font-size:0.8rem;
 white-space:nowrap;
}
 
 .container{
 width:100%;
 padding:0 1rem;
}
 
 .btn.icon-btn{
 padding:0.55rem 0.85rem;
 font-size:0.8rem;
}
 
 .btn.icon-btn svg{
 width:16px;
 height:16px;
}
}