/*==========================================================
HEADER ACTIONS
==========================================================*/

/* ===== Header Action ===== */

.header-action{

width:48px;

height:48px;

display:flex;

align-items:center;

justify-content:center;

background:#fff;

border:1px solid #E8EDF5;

border-radius:16px;

color:#334155;

position:relative;

cursor:pointer;

transition:.25s;

box-shadow:
0 8px 20px rgba(15,23,42,.05);

}

.header-action:hover{

transform:translateY(-3px);

border-color:#6D5EF8;

box-shadow:
0 15px 35px rgba(109,94,248,.18);

color:#6D5EF8;

}

.header-action i{

font-size:20px;

}

/*================================*/

.action-btn{

width:46px;

height:46px;

border-radius:50%;

}

.action-btn:hover{

    background:var(--primary-light);

    border-color:var(--primary);

}

.action-btn i{

    font-size:20px;

    color:var(--text);

}

/*================================*/

.action-badge{

position:absolute;

top:-4px;

right:-4px;

width:20px;

height:20px;

border-radius:50%;

background:#FF4D4F;

color:#fff;

font-size:11px;

font-weight:700;

display:flex;

align-items:center;

justify-content:center;

border:2px solid #fff;

}

.action-icon{

width:48px;

height:48px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;
}

/*==================================
CREATE BUTTON
==================================*/

.create-button{

height:40px;

padding:0 24px;

border-radius:14px;

font-size:10px;

margin-left:6px;

color: white;

font-weight:500;

background:var(--gradient-primary);

box-shadow:var(--shadow-sm);

}

.create-button:hover{

transform:translateY(-2px);

box-shadow:var(--shadow-md);

}

/*==================================
WORKSPACE
==================================*/

.workspace-btn{

display:flex;

align-items:center;

justify-content:center;

gap:10px;

height:52px;
}

.workspace-button:hover{

    border-color:var(--primary);

}

/*==================================
Guest Actions
==================================*/

.guest-actions{

display:flex;

align-items:center;

gap:14px;

}

.header-action-btn{

height:46px;

padding:0 20px;

display:flex;

align-items:center;

gap:10px;

background:#fff;

border:1px solid #E7ECF4;

border-radius:14px;

font-size:15px;

font-weight:600;

color:#0F172A;

cursor:pointer;

transition:.25s;

box-shadow:
0 8px 20px rgba(15,23,42,.05);

}

.header-action-btn:hover{

transform:translateY(-2px);

border-color:#695CFF;

box-shadow:
0 18px 36px rgba(105,92,255,.15);

}

.header-action-btn i{

font-size:16px;

color:#695CFF;

}

/*==================================
PROFILE
==================================*/

.header-profile{

height:56px;

padding:8px 14px;

display:flex;

align-items:center;

gap:12px;

background:#fff;

border:1px solid #E8EDF5;

border-radius:18px;

cursor:pointer;

transition:.3s;

box-shadow:
0 8px 20px rgba(15,23,42,.05);

}

.header-profile:hover{

transform:translateY(-3px);

border-color:#6D5EF8;

box-shadow:
0 15px 35px rgba(109,94,248,.18);

}

.profile-avatar{

width:40px;

height:40px;

border-radius:50%;

background:linear-gradient(135deg,#6D5EF8,#20B6FF);

display:flex;

align-items:center;

justify-content:center;

color:#fff;

font-weight:700;

font-size:18px;

}

.profile-info{

display:flex;

flex-direction:column;

}

.profile-info span{

font-size:15px;

font-weight:700;

line-height:1.1;

}

.profile-info small{

font-size:12px;

color:#64748B;

}

.header-profile-wrapper{

position:relative;

}

.profile-dropdown{

width:320px;

top:64px;

right:0;

padding:14px;

}

.profile-card{

display:flex;

gap:14px;

align-items:center;

padding:8px;

}

.profile-avatar.large{

width:54px;

height:54px;

font-size:22px;

}

.profile-card h6{

margin:0;

font-size:17px;

font-weight:700;

}

.profile-card p{

margin:2px 0 8px;

font-size:13px;

color:#64748B;

}

.workspace-tag{

display:inline-flex;

align-items:center;

gap:6px;

padding:6px 10px;

border-radius:999px;

background:#F8FAFC;

font-size:12px;

font-weight:600;

color:#695CFF;

}

.dropdown-divider{

height:1px;

background:#EEF2F7;

margin:14px 0;

}

.profile-dropdown a{

display:flex;

align-items:center;

gap:14px;

padding:12px;

border-radius:14px;

text-decoration:none;

color:#0F172A;

transition:.25s;

}

.profile-dropdown a:hover{

background:#F8FAFC;

color:#695CFF;

}

.profile-dropdown a i{

width:22px;

font-size:18px;

}

.logout-link{

color:#EF4444 !important;

}

.logout-link:hover{

background:#FEF2F2 !important;

}

/*==================================================
PROFILE TRIGGER
==================================================*/

.profile-wrapper{

position:relative;

}

.header-profile-btn{

display:flex;

align-items:center;

gap:14px;

height:54px;

padding:8px 14px 8px 8px;

border:none;

background:#fff;

border-radius:18px;

cursor:pointer;

transition:.25s;

}

.header-profile-btn:hover{

background:#F8FAFC;

box-shadow:0 10px 30px rgba(15,23,42,.08);

}

.profile-avatar{

width:42px;

height:42px;

border-radius:50%;

background:linear-gradient(135deg,#695CFF,#3B82F6);

display:flex;

align-items:center;

justify-content:center;

font-size:16px;

font-weight:700;

color:#fff;

position:relative;

overflow:hidden;

flex-shrink:0;

}

.profile-avatar img{

width:100%;

height:100%;

object-fit:cover;

}

.profile-verified{

position:absolute;

bottom:-1px;

right:-1px;

width:18px;

height:18px;

border-radius:50%;

background:#fff;

display:flex;

align-items:center;

justify-content:center;

font-size:11px;

color:#2563EB;

}

.profile-meta{

display:flex;

flex-direction:column;

align-items:flex-start;

line-height:1.2;

}

.profile-name{

font-size:14px;

font-weight:700;

color:#0F172A;

max-width:130px;

overflow:hidden;

white-space:nowrap;

text-overflow:ellipsis;

}

.profile-role{

font-size:12px;

color:#64748B;

}

.profile-arrow{

font-size:12px;

color:#94A3B8;

transition:.25s;

margin-left:4px;

}

.profile-wrapper.open .profile-arrow{

transform:rotate(180deg);

color:#695CFF;

}

/*==================================================
PROFILE DROPDOWN
ACMOBOOK
==================================================*/

.profile-dropdown{

position:absolute;

top:calc(100% + 16px);

right:0;

width:380px;

background:#FFFFFF;

border-radius:24px;

overflow:hidden;

border:1px solid rgba(15,23,42,.06);

box-shadow:
0 30px 80px rgba(15,23,42,.16);

opacity:0;

visibility:hidden;

pointer-events:none;

transform:translateY(16px) scale(.98);

transition:
opacity .25s,
transform .25s,
visibility .25s;

z-index:99999;

}

.profile-dropdown.show{

opacity:1;

visibility:visible;

pointer-events:auto;

transform:translateY(0) scale(1);

}

/*==================================================
HEADER
==================================================*/

.profile-card-header{

position:relative;

overflow:hidden;

background:linear-gradient(
135deg,
#695CFF,
#3B82F6
);

padding:26px;

color:#fff;

}

.profile-cover{

position:absolute;

width:260px;

height:260px;

right:-120px;

top:-120px;

border-radius:50%;

background:rgba(255,255,255,.12);

}

.profile-cover::after{

content:"";

position:absolute;

width:140px;

height:140px;

left:-50px;

bottom:-30px;

border-radius:50%;

background:rgba(255,255,255,.08);

}

.profile-user{

position:relative;

display:flex;

align-items:center;

gap:18px;

z-index:2;

}

.profile-user-avatar{

position:relative;

width:64px;

height:64px;

border-radius:50%;

background:#fff;

display:flex;

align-items:center;

justify-content:center;

font-size:24px;

font-weight:700;

color:#695CFF;

overflow:hidden;

flex-shrink:0;

box-shadow:
0 10px 25px rgba(0,0,0,.18);

}

.profile-user-avatar img{

width:100%;

height:100%;

object-fit:cover;

}

.verified-badge{

position:absolute;

right:-2px;

bottom:-2px;

width:22px;

height:22px;

border-radius:50%;

background:#fff;

display:flex;

align-items:center;

justify-content:center;

color:#2563EB;

font-size:13px;

}

.profile-user-info{

flex:1;

min-width:0;

}

.profile-title{

display:flex;

align-items:center;

gap:10px;

margin-bottom:6px;

}

.profile-title h4{

margin:0;

font-size:20px;

font-weight:700;

color:#fff;

overflow:hidden;

text-overflow:ellipsis;

white-space:nowrap;

}

.pro-badge{

display:inline-flex;

align-items:center;

justify-content:center;

height:24px;

padding:0 10px;

border-radius:999px;

background:rgba(255,255,255,.18);

backdrop-filter:blur(12px);

font-size:11px;

font-weight:700;

letter-spacing:.08em;

}

.profile-user-info p{

margin:0;

font-size:14px;

opacity:.95;

}

.profile-user-info small{

display:block;

margin-top:6px;

font-size:12px;

opacity:.8;

}

/*==================================================
SECTIONS
==================================================*/

.profile-section{

padding:18px 22px;

border-bottom:1px solid #EEF2F7;

}

.section-title{

margin-bottom:14px;

font-size:11px;

font-weight:700;

text-transform:uppercase;

letter-spacing:.12em;

color:#94A3B8;

}